@W-18942954 BOPIS revert unneeded swatch change (#2700)

* @W-18942954 BOPIS revert unneeded swatch change

* @W-18942954 BOPIS revert unneeded add to cart test change

* @W-18942954 BOPIS constant for radio labels

Author: patricksullivansf

packages/template-retail-react-app/app/components/product-view/index.jsx

@@ -24,6 +24,12 @@ import {
     RadioGroup,
     useTheme
 } from '@salesforce/retail-react-app/app/components/shared/ui'
+
+// Constants
+const DELIVERY_OPTIONS = {
+    SHIP: 'ship',
+    PICKUP: 'pickup'
+}
 import {useCurrency, useDerivedProduct} from '@salesforce/retail-react-app/app/hooks'
 import {useAddToCartModalContext} from '@salesforce/retail-react-app/app/hooks/use-add-to-cart-modal'
 import {STORE_LOCATOR_IS_ENABLED} from '@salesforce/retail-react-app/app/constants'
@@ -425,7 +431,7 @@ const ProductView = forwardRef(
         }, [selectedStore])
 
         const handleDeliveryOptionChange = (value) => {
-            setPickupInStore(value === 'pickup')
+            setPickupInStore(value === DELIVERY_OPTIONS.PICKUP)
         }
 
         return (
@@ -681,20 +687,27 @@ const ProductView = forwardRef(
                                                 />
                                             </Text>
                                             <RadioGroup
-                                                value={pickupInStore ? 'pickup' : 'ship'}
+                                                value={
+                                                    pickupInStore
+                                                        ? DELIVERY_OPTIONS.PICKUP
+                                                        : DELIVERY_OPTIONS.SHIP
+                                                }
                                                 onChange={handleDeliveryOptionChange}
                                                 mb={1}
                                             >
                                                 <Stack direction="column" spacing={2}>
-                                                    <Radio value="ship" isDisabled={disableButton}>
+                                                    <Radio
+                                                        value={DELIVERY_OPTIONS.SHIP}
+                                                        isDisabled={disableButton}
+                                                    >
                                                         <FormattedMessage
                                                             defaultMessage="Ship to Address"
                                                             id="product_view.label.ship_to_address"
                                                         />
                                                     </Radio>
                                                     {STORE_LOCATOR_IS_ENABLED && (
                                                         <Radio
-                                                            value="pickup"
+                                                            value={DELIVERY_OPTIONS.PICKUP}
                                                             isDisabled={
                                                                 !pickupEnabled ||
                                                                 (storeName &&

packages/template-retail-react-app/app/components/swatch-group/index.jsx

@@ -75,20 +75,17 @@ const SwatchGroup = (props) => {
             return
         }
         const childrenArray = Children.toArray(children)
-        const index = childrenArray.findIndex((child) => child?.props?.value === value)
+        const index = childrenArray.findIndex(({props}) => props?.value === value)
 
-        setSelectedIndex(index >= 0 ? index : 0)
+        setSelectedIndex(index)
     }, [])
 
     // Whenever the selected index changes ensure that we call the change handler.
     useEffect(() => {
         const childrenArray = Children.toArray(children)
-        const selectedChild = childrenArray[selectedIndex]
+        const newValue = childrenArray[selectedIndex].props.value
 
-        if (selectedChild?.props?.value) {
-            const newValue = selectedChild.props.value
-            handleChange(newValue)
-        }
+        handleChange(newValue)
     }, [selectedIndex])
 
     return (
@@ -108,7 +105,6 @@ const SwatchGroup = (props) => {
                 )}
                 <Flex ref={wrapperRef} {...styles.swatchesWrapper}>
                     {Children.toArray(children).map((child, index) => {
-                        if (!child?.props) return null
                         const selected = child.props.value === value
                         return React.cloneElement(child, {
                             handleSelect: handleChange,

packages/template-retail-react-app/app/hooks/use-add-to-cart-modal.test.js

@@ -650,20 +650,21 @@ test('renders product bundle', () => {
     expect(screen.getByText(mockProductBundle.name)).toBeInTheDocument()
     expect(screen.getByRole('dialog', {name: /1 item added to cart/i})).toBeInTheDocument()
 
+    // bundle data is displayed in 1 row
     const numOfRowsRendered = screen.getAllByTestId('product-added').length
     expect(numOfRowsRendered).toBe(1)
 
+    // modal displays product name of children and variant selection
     mockBundleItemsAdded.forEach(({product, variant, quantity}) => {
-        expect(
-            screen.getByText((content) => content.trim().includes(product.name))
-        ).toBeInTheDocument()
-        const quantityText = `(${quantity})`
-        const found = !!screen.queryByText((content) => content.includes(quantityText))
-        expect(found).toBe(quantity > 1)
+        const displayedName = quantity > 1 ? `${product.name} (${quantity})` : product.name
+        expect(screen.getByText(displayedName)).toBeInTheDocument()
+
         const variationAttributeValues = getDisplayVariationValues(
             product.variationAttributes,
             variant.variationValues
         )
+
+        // Looks for text displaying variant ('Color: Black' or 'Size: S') in modal
         Object.entries(variationAttributeValues).forEach(([name, value]) => {
             expect(screen.getAllByText(`${name}: ${value}`)[0]).toBeInTheDocument()
         })