@W-18811979 BOPIS (buy online pick up in store)

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

@@ -5,6 +5,7 @@
 - Updated 6 new languages [#2495](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2495)
 - Fix Einstein event tracking for `addToCart` event [#2558](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2558)
 - 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)
 - Load active data scripts on demand only [#2623](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2623)
 - Provide base image for convenient perf optimizations [#2642](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2642)
 

packages/template-retail-react-app/app/components/_app/index.jsx

@@ -74,7 +74,8 @@ import {
     THEME_COLOR,
     CAT_MENU_DEFAULT_NAV_SSR_DEPTH,
     CAT_MENU_DEFAULT_ROOT_CATEGORY,
-    DEFAULT_LOCALE
+    DEFAULT_LOCALE,
+    STORE_LOCATOR_IS_ENABLED
 } from '@salesforce/retail-react-app/app/constants'
 
 import Seo from '@salesforce/retail-react-app/app/components/seo'
@@ -354,10 +355,12 @@ const App = (props) => {
 
                         <Box id="app" display="flex" flexDirection="column" flex={1}>
                             <SkipNavLink zIndex="skipLink">Skip to Content</SkipNavLink>
-                            <StoreLocatorModal
-                                isOpen={isOpenStoreLocator}
-                                onClose={onCloseStoreLocator}
-                            />
+                            {STORE_LOCATOR_IS_ENABLED && (
+                                <StoreLocatorModal
+                                    isOpen={isOpenStoreLocator}
+                                    onClose={onCloseStoreLocator}
+                                />
+                            )}
                             <Box {...styles.headerWrapper}>
                                 {!isCheckout ? (
                                     <>

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

@@ -166,17 +166,22 @@ test('bundle product view modal disables update button when quantity exceeds chi
         expect(swingTankProductView).toBeInTheDocument()
         expect(sizeSelectBtn).toBeInTheDocument()
         expect(quantityInput).toBeInTheDocument()
-        expect(updateBtn).toBeEnabled()
+        expect(updateBtn).toBeInTheDocument()
     })
 
     // Set product bundle quantity selection to 4
     fireEvent.change(quantityInput, {target: {value: '4'}})
     fireEvent.keyDown(quantityInput, {key: 'Enter', code: 'Enter', charCode: 13})
 
+    // Wait for quantity change to be processed
+    await waitFor(() => {
+        expect(screen.getByRole('spinbutton', {name: /quantity/i})).toHaveValue('4')
+    })
+
+    // Now click the size selection
     fireEvent.click(sizeSelectBtn)
 
     await waitFor(() => {
-        expect(screen.getByRole('spinbutton', {name: /quantity/i})).toHaveValue('4')
         expect(within(swingTankProductView).getAllByText('L')).toHaveLength(2)
         expect(updateBtn).toBeDisabled()
         expect(screen.getByText('Only 1 left!')).toBeInTheDocument()

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

@@ -19,10 +19,20 @@ import {
     Text,
     VStack,
     Fade,
+    Stack,
+    Radio,
+    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'
 
 // project components
 import ImageGallery from '@salesforce/retail-react-app/app/components/image-gallery'
@@ -84,7 +94,8 @@ ProductViewHeader.propTypes = {
     category: PropTypes.array,
     priceData: PropTypes.object,
     product: PropTypes.object,
-    isProductPartOfBundle: PropTypes.bool
+    isProductPartOfBundle: PropTypes.bool,
+    showDeliveryOptions: PropTypes.bool
 }
 
 const ButtonWithRegistration = withRegistration(Button)
@@ -118,7 +129,11 @@ const ProductView = forwardRef(
                 !isProductLoading && variant?.orderable && quantity > 0 && quantity <= stockLevel,
             showImageGallery = true,
             setSelectedBundleQuantity = () => {},
-            selectedBundleParentQuantity = 1
+            selectedBundleParentQuantity = 1,
+            pickupInStore = false,
+            setPickupInStore = () => {},
+            onOpenStoreLocator = () => {},
+            showDeliveryOptions = true
         },
         ref
     ) => {
@@ -146,7 +161,9 @@ const ProductView = forwardRef(
             stockLevel,
             stepQuantity,
             isOutOfStock,
-            unfulfillable
+            unfulfillable,
+            isSelectedStoreOutOfStock,
+            selectedStore
         } = useDerivedProduct(product, isProductPartOfSet, isProductPartOfBundle)
         const priceData = useMemo(() => {
             return getPriceData(product, {quantity})
@@ -155,6 +172,9 @@ const ProductView = forwardRef(
         const isProductASet = product?.type.set
         const isProductABundle = product?.type.bundle
         const errorContainerRef = useRef(null)
+        const [pickupEnabled, setPickupEnabled] = useState(false)
+        const storeName = selectedStore?.name
+        const inventoryId = selectedStore?.inventoryId
 
         const {disableButton, customInventoryMessage} = useMemo(() => {
             let shouldDisableButton = showInventoryMessage
@@ -272,14 +292,17 @@ const ProductView = forwardRef(
                     return
                 }
                 try {
-                    const itemsAdded = await addToCart(variant, quantity)
+                    const itemsAdded = await addToCart([{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.
                     if (itemsAdded) {
                         onAddToCartModalOpen({
                             product,
-                            itemsAdded,
+                            itemsAdded: itemsAdded.map((item) => ({
+                                ...item,
+                                product // attach the full product object
+                            })),
                             selectedQuantity: quantity
                         })
                     }
@@ -399,6 +422,18 @@ const ProductView = forwardRef(
             }
         }, [showInventoryMessage, inventoryMessage])
 
+        // Auto-switch off pickup in store when product becomes unavailable at selected store
+        useEffect(() => {
+            setPickupEnabled(!!selectedStore?.inventoryId)
+            if (pickupInStore && isSelectedStoreOutOfStock) {
+                setPickupInStore(false)
+            }
+        }, [selectedStore])
+
+        const handleDeliveryOptionChange = (value) => {
+            setPickupInStore(value === DELIVERY_OPTIONS.PICKUP)
+        }
+
         return (
             <Flex direction={'column'} data-testid="product-view" ref={ref}>
                 {/* Basic information etc. title, price, breadcrumb*/}
@@ -641,12 +676,148 @@ const ProductView = forwardRef(
                                     </Text>
                                 </Fade>
                             )}
-                            <Box
-                                display={
-                                    isProductPartOfSet ? 'block' : ['none', 'none', 'none', 'block']
-                                }
-                            >
-                                {renderActionButtons()}
+                            <Box>
+                                {showDeliveryOptions && (
+                                    <>
+                                        <Box mb={4}>
+                                            <Text fontWeight={600} mb={3}>
+                                                <FormattedMessage
+                                                    defaultMessage="Delivery:"
+                                                    id="product_view.label.delivery"
+                                                />
+                                            </Text>
+                                            <RadioGroup
+                                                value={
+                                                    pickupInStore
+                                                        ? DELIVERY_OPTIONS.PICKUP
+                                                        : DELIVERY_OPTIONS.SHIP
+                                                }
+                                                onChange={handleDeliveryOptionChange}
+                                                mb={1}
+                                            >
+                                                <Stack direction="column" spacing={2}>
+                                                    <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={DELIVERY_OPTIONS.PICKUP}
+                                                            isDisabled={
+                                                                !pickupEnabled ||
+                                                                (storeName &&
+                                                                    inventoryId &&
+                                                                    isSelectedStoreOutOfStock)
+                                                            }
+                                                        >
+                                                            <FormattedMessage
+                                                                defaultMessage="Pickup in Store"
+                                                                id="product_view.label.pickup_in_store"
+                                                            />
+                                                        </Radio>
+                                                    )}
+                                                </Stack>
+                                            </RadioGroup>
+                                        </Box>
+
+                                        {STORE_LOCATOR_IS_ENABLED && (
+                                            <>
+                                                {storeName && inventoryId && (
+                                                    <Text
+                                                        color="black"
+                                                        fontWeight={600}
+                                                        mb={2}
+                                                        data-testid="store-stock-status-msg"
+                                                    >
+                                                        {!isSelectedStoreOutOfStock
+                                                            ? intl.formatMessage(
+                                                                  {
+                                                                      id: 'product_view.status.in_stock_at_store',
+                                                                      defaultMessage:
+                                                                          'In Stock at {storeName}'
+                                                                  },
+                                                                  {
+                                                                      storeName: (
+                                                                          <Link
+                                                                              as="button"
+                                                                              color="blue.600"
+                                                                              textDecoration="underline"
+                                                                              onClick={
+                                                                                  onOpenStoreLocator
+                                                                              }
+                                                                          >
+                                                                              {storeName}
+                                                                          </Link>
+                                                                      )
+                                                                  }
+                                                              )
+                                                            : intl.formatMessage(
+                                                                  {
+                                                                      id: 'product_view.status.out_of_stock_at_store',
+                                                                      defaultMessage:
+                                                                          'Out of Stock at {storeName}'
+                                                                  },
+                                                                  {
+                                                                      storeName: (
+                                                                          <Link
+                                                                              as="button"
+                                                                              color="blue.600"
+                                                                              textDecoration="underline"
+                                                                              onClick={
+                                                                                  onOpenStoreLocator
+                                                                              }
+                                                                          >
+                                                                              {storeName}
+                                                                          </Link>
+                                                                      )
+                                                                  }
+                                                              )}
+                                                    </Text>
+                                                )}
+
+                                                {/* Show label if pickup is disabled due to no store/inventoryId */}
+                                                {!pickupEnabled && !storeName && !inventoryId && (
+                                                    <Text
+                                                        color="black"
+                                                        fontWeight={600}
+                                                        mb={3}
+                                                        data-testid="pickup-select-store-msg"
+                                                    >
+                                                        <FormattedMessage
+                                                            defaultMessage="Pickup in "
+                                                            id="product_view.label.pickup_in_select_store_prefix"
+                                                        />{' '}
+                                                        <Link
+                                                            as="button"
+                                                            color="blue.600"
+                                                            textDecoration="underline"
+                                                            onClick={onOpenStoreLocator}
+                                                        >
+                                                            <FormattedMessage
+                                                                defaultMessage="Select Store"
+                                                                id="product_view.label.select_store_link"
+                                                            />
+                                                        </Link>
+                                                    </Text>
+                                                )}
+                                            </>
+                                        )}
+                                    </>
+                                )}
+                                <Box
+                                    display={
+                                        isProductPartOfSet
+                                            ? 'block'
+                                            : ['none', 'none', 'none', 'block']
+                                    }
+                                >
+                                    {renderActionButtons()}
+                                </Box>
                             </Box>
                         </Box>
                     </VStack>
@@ -698,7 +869,11 @@ ProductView.propTypes = {
     validateOrderability: PropTypes.func,
     showImageGallery: PropTypes.bool,
     setSelectedBundleQuantity: PropTypes.func,
-    selectedBundleParentQuantity: PropTypes.number
+    selectedBundleParentQuantity: PropTypes.number,
+    pickupInStore: PropTypes.bool,
+    setPickupInStore: PropTypes.func,
+    onOpenStoreLocator: PropTypes.func,
+    showDeliveryOptions: PropTypes.bool
 }
 
 export default ProductView