SFRA Choice of Bonus Product without options results in broken client-side JS

[Jakobud]

I'm looking at the Choice of Bonus Product modal/popup template. I see this line 41 here:

https://github.com/SalesforceCommerceCloud/storefront-reference-architecture/blob/master/cartridges/app_storefront_base/cartridge/templates/default/product/components/choiceOfBonusProducts/bonusProducts.isml#L41

This is saying that if a bonus product has no "options" then the code block will not render. Within that code block there is the quantity selector:

https://github.com/SalesforceCommerceCloud/storefront-reference-architecture/blob/master/cartridges/app_storefront_base/cartridge/templates/default/product/components/choiceOfBonusProducts/bonusProducts.isml#L52

So seeing this code, sometimes the quantity selector will not render in the page for a bonus product. However, if you look at the client-side JS that controls the functionality for when a Bonus Product is selected, this line here:

https://github.com/SalesforceCommerceCloud/storefront-reference-architecture/blob/master/cartridges/app_storefront_base/cartridge/client/default/js/product/base.js#L686

That line is specifically looking for the quantity selector for the product. If it doesn't find it, then submittedQty resolves to NaN. So then this line:

https://github.com/SalesforceCommerceCloud/storefront-reference-architecture/blob/master/cartridges/app_storefront_base/cartridge/client/default/js/product/base.js#L691

Will then result in totalQty resolving to NaN as well. Finally, this line:

https://github.com/SalesforceCommerceCloud/storefront-reference-architecture/blob/master/cartridges/app_storefront_base/cartridge/client/default/js/product/base.js#L694

That conditional will always be false, which results in this line:

https://github.com/SalesforceCommerceCloud/storefront-reference-architecture/blob/master/cartridges/app_storefront_base/cartridge/client/default/js/product/base.js#L712

And in the end, you are not able to add the bonus product to the cart all because the product did not have options.

So this could use a little bit of insight from someone who is more familiar with it.

1. Why is rendering of a quantity selector dependent on a bonus product having at least 1 option? It's perfectly acceptable to create a product without variations and without options and offer this product as a bonus product. Or is it not? Is there some dependency thing I'm misunderstanding here?
2. Why is there a conditional in the template that sometimes does not render a quantity selector if the client-side JS 100% is dependent on that quantity selector being rendered in the HTML?

Is this a bug or am I just misunderstanding something? I feel like I'm missing something here. If anyone could shed light on this I would really appreciate it. Thank you!

[tanveer236]

@Jakobud I have filed an internal ticket to take a look at this issue. Thanks