Merge standard products feature into develop @W-18912410

packages/template-retail-react-app/CHANGELOG.md

@@ -7,7 +7,13 @@
 - Password Reset and Passwordless Integration Test [#2669](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2669)
 - Update latest translations for all languages [#2616](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2616)
 - Added support for Buy Online Pick up In Store (BOPIS) [#2646](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2646)
+- Support standard product on PDP [#2518](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2518)
+- Removed the "Edit" button from product cards of Standard Products [#2581](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2581)
+- Support standard product as a child item in bundles [#2574](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2574)
+- Verify einstein activity with standard product [#2650](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2650)
+- Support standard product as a child item in sets [#2636](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2636)
 - Load active data scripts on demand only [#2623](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2623)
+- Refactor Add to Cart in PDP [#2664](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2664)
 - Provide base image for convenient perf optimizations [#2642](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2642)
 - Support saving billing phone number on user registration from order confirmation [#2653](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2653)
 - Support saving default shipping address on user registration from order confirmation [#2706](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2706)
@@ -452,4 +458,4 @@ The versions published below were not published on npm, and the versioning match
 
 ### v1.0.0 (Sep 08, 2021)
 
-- PWA Kit General Availability and open source. 🎉
+- PWA Kit General Availability and open source. 🎉

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

@@ -44,7 +44,9 @@ const BundleProductViewModal = ({product: bundle, isOpen, onClose, updateCart, .
     let childProductIds = productViewModalData.product?.bundledProductItems
         ?.map(({productId}) => productId)
         .join(',')
-    const productIds = selectedChildProducts.map(({variant}) => variant.productId).join(',')
+    const productIds = selectedChildProducts
+        .map(({variant, product}) => variant?.productId || product?.id)
+        .join(',')
     if (productIds?.length > 0 && productIds !== childProductIds) {
         childProductIds = productIds
     }

packages/template-retail-react-app/app/components/product-view-modal/bundle.test.js

@@ -17,6 +17,7 @@ import {
     mockProductBundle
 } from '@salesforce/retail-react-app/app/mocks/product-bundle'
 import {rest} from 'msw'
+import {mockStandardProductOrderable} from '@salesforce/retail-react-app/app/mocks/standard-product'
 
 const MockComponent = ({updateCart}) => {
     const {isOpen, onOpen, onClose} = useDisclosure()
@@ -166,6 +167,20 @@ test('bundle product view modal disables update button when quantity exceeds chi
         expect(swingTankProductView).toBeInTheDocument()
         expect(sizeSelectBtn).toBeInTheDocument()
         expect(quantityInput).toBeInTheDocument()
+    })
+
+    // Wait for all child products to be rendered
+    await waitFor(() => {
+        expect(screen.getAllByText('Sleeveless Pleated Floral Front Blouse')).toHaveLength(2)
+        expect(screen.getAllByText('Swing Tank')).toHaveLength(2)
+        expect(screen.getAllByText('Pull On Neutral Pant')).toHaveLength(2)
+    })
+
+    // Select a valid variant
+    fireEvent.click(sizeSelectBtn)
+
+    // Wait for the initial state to be fully loaded and the button to be enabled
+    await waitFor(() => {
         expect(updateBtn).toBeInTheDocument()
     })
 
@@ -187,3 +202,58 @@ test('bundle product view modal disables update button when quantity exceeds chi
         expect(screen.getByText('Only 1 left!')).toBeInTheDocument()
     })
 })
+
+test('modal displays standard product child name when bundle contains a standard product', async () => {
+    // Create a bundle with a standard product as the first child
+    const bundleWithStandardChild = {
+        ...mockBundledProductItemsVariant,
+        bundledProductItems: [
+            {
+                ...mockBundledProductItemsVariant.bundledProductItems[0],
+                productId: mockStandardProductOrderable.id,
+                productName: mockStandardProductOrderable.name,
+                itemText: mockStandardProductOrderable.name
+            },
+            ...mockBundledProductItemsVariant.bundledProductItems.slice(1)
+        ]
+    }
+
+    // Custom MSW handler for this test
+    global.server.use(
+        rest.get('*/products', (req, res, ctx) => {
+            const ids = req.url.searchParams.get('ids')
+            if (ids && ids.includes(mockStandardProductOrderable.id)) {
+                return res(ctx.json({data: [mockStandardProductOrderable], total: 1}))
+            }
+            return res(ctx.json(mockProductBundleWithVariants))
+        })
+    )
+
+    const MockComponent = ({updateCart}) => {
+        const {isOpen, onOpen, onClose} = useDisclosure()
+        return (
+            <div>
+                <button onClick={onOpen}>Open Modal</button>
+                <BundleProductViewModal
+                    updateCart={updateCart}
+                    onOpen={onOpen}
+                    onClose={onClose}
+                    isOpen={isOpen}
+                    product={bundleWithStandardChild}
+                />
+            </div>
+        )
+    }
+    MockComponent.propTypes = {updateCart: PropTypes.func}
+
+    renderWithProviders(<MockComponent />)
+    await waitFor(() => {
+        const trigger = screen.getByText(/open modal/i)
+        fireEvent.click(trigger)
+    })
+
+    // Assert the standard product child name is rendered
+    await waitFor(() => {
+        expect(screen.getAllByText(mockStandardProductOrderable.name)[0]).toBeInTheDocument()
+    })
+})

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

@@ -125,8 +125,21 @@ const ProductView = forwardRef(
             setChildProductOrderability,
             isBasketLoading = false,
             onVariantSelected = () => {},
-            validateOrderability = (variant, quantity, stockLevel) =>
-                !isProductLoading && variant?.orderable && quantity > 0 && quantity <= stockLevel,
+            validateOrderability = (variant, product, quantity, stockLevel) => {
+                if (isProductLoading) return false
+
+                // If product has variations, a variant must be selected
+                if (product?.variationAttributes?.length > 0 && !variant) {
+                    return false
+                }
+
+                // Check if product (either variant or standard) is orderable and if quantity is valid
+                return (
+                    (variant?.orderable || product?.inventory?.orderable) &&
+                    quantity > 0 &&
+                    quantity <= stockLevel
+                )
+            },
             showImageGallery = true,
             setSelectedBundleQuantity = () => {},
             selectedBundleParentQuantity = 1,
@@ -169,8 +182,8 @@ const ProductView = forwardRef(
             return getPriceData(product, {quantity})
         }, [product, quantity])
         const canAddToWishlist = !isProductLoading
-        const isProductASet = product?.type.set
-        const isProductABundle = product?.type.bundle
+        const isProductASet = product?.type?.set
+        const isProductABundle = product?.type?.bundle
         const errorContainerRef = useRef(null)
         const [pickupEnabled, setPickupEnabled] = useState(false)
         const storeName = selectedStore?.name
@@ -223,7 +236,7 @@ const ProductView = forwardRef(
         const validateAndShowError = (opts = {}) => {
             const {scrollErrorIntoView = true} = opts
             // Validate that all attributes are selected before proceeding.
-            const hasValidSelection = validateOrderability(variant, quantity, stockLevel)
+            const hasValidSelection = validateOrderability(variant, product, quantity, stockLevel)
             const showError = !isProductASet && !isProductABundle && !hasValidSelection
             const scrollToError = showError && scrollErrorIntoView
 
@@ -292,7 +305,7 @@ const ProductView = forwardRef(
                     return
                 }
                 try {
-                    const itemsAdded = await addToCart(variant, quantity)
+                    const itemsAdded = await addToCart([{product, variant, quantity}])
                     // Open modal only when `addToCart` returns some data
                     // It's possible that the item has been added to cart, but we don't want to open the modal.
                     // See wishlist_primary_action for example.
@@ -390,7 +403,7 @@ const ProductView = forwardRef(
             if (
                 !isProductASet &&
                 !isProductABundle &&
-                validateOrderability(variant, quantity, stockLevel)
+                validateOrderability(variant, product, quantity, stockLevel)
             ) {
                 toggleShowOptionsMessage(false)
             }
@@ -402,6 +415,12 @@ const ProductView = forwardRef(
             }
         }, [variant?.productId, quantity])
 
+        useEffect(() => {
+            if ((isProductPartOfBundle || isProductPartOfSet) && product && product.type?.item) {
+                onVariantSelected(product, null, childOfBundleQuantity || quantity)
+            }
+        }, [product, childOfBundleQuantity, quantity, isProductPartOfBundle, isProductPartOfSet])
+
         useEffect(() => {
             if (isProductPartOfBundle || isProductPartOfSet) {
                 const key = product.itemId ?? product.id