@salesforce/retail-react-app 2.3.1 → 2.4.0-dev.1

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## v2.4.0-dev (Jan 22, 2024)
+
+### Bug Fixes
+
+- Add Support for SLAS private flow [#1722](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1722)
+- Fix promo codes not being properly applied in cart [#1692](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1692)
+- Fix checkout shipping method fetching [#1693](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1693)
+- Fix invalid query params warnings [#1655](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1655)
+- Fix internal server error on account pages [#1675](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1675)
+- Fix `product-item` component imports to ensure that it is overridable. [#1672](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1672)
+- Fix locale selector navigating back to default locale [#1670](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1670)
+- Fix handling of offline products on Cart, Checkout, Order History, and Wishlist pages [#1691](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1691)
+- Fix tracking of `viewSearch` event for Einstein analytics, in the case of no-search-results [#1702](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1702)
+- Remove invalid header `_sfdc_customer_id` due to recent MRT HTTP3 upgrade [#1731](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1731)
+
 ## v2.3.1 (Jan 23, 2024)
 
 ### Bug Fixes

package/app/components/_app-config/index.jsx

@@ -4,6 +4,15 @@
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
+
+/*
+ * Developer note! When updating this file, make sure to also update the
+ * _app-config template files in pwa-kit-create-app.
+ *
+ * In the pwa-kit-create-app, the templates are found under:
+ * - assets/bootstrap/js/overrides/app/components/_app-config
+ * - assets/templates/@salesforce/retail-react-app/app/components/_app-config
+ */
 import React from 'react'
 import PropTypes from 'prop-types'
 import {ChakraProvider} from '@salesforce/retail-react-app/app/components/shared/ui'
@@ -55,6 +64,9 @@ const AppConfig = ({children, locals = {}}) => {
             redirectURI={`${appOrigin}/callback`}
             proxy={`${appOrigin}${commerceApiConfig.proxyPath}`}
             headers={headers}
+            // Uncomment 'enablePWAKitPrivateClient' to use SLAS private client login flows.
+            // Make sure to also enable useSLASPrivateClient in ssr.js when enabling this setting.
+            // enablePWAKitPrivateClient={true}
             OCAPISessionsURL={`${appOrigin}/mobify/proxy/ocapi/s/${locals.site?.id}/dw/shop/v22_8/sessions`}
         >
             <MultiSiteProvider site={locals.site} locale={locals.locale} buildUrl={locals.buildUrl}>

package/app/components/confirmation-modal/index.jsx

@@ -26,6 +26,7 @@ const ConfirmationModal = ({
     confirmationMessage = CONFIRMATION_DIALOG_DEFAULT_CONFIG.confirmationMessage,
     primaryActionLabel = CONFIRMATION_DIALOG_DEFAULT_CONFIG.primaryActionLabel,
     alternateActionLabel = CONFIRMATION_DIALOG_DEFAULT_CONFIG.alternateActionLabel,
+    hideAlternateAction = false,
     onPrimaryAction = noop,
     onAlternateAction = noop,
     ...props
@@ -57,9 +58,11 @@ const ConfirmationModal = ({
                 </AlertDialogBody>
 
                 <AlertDialogFooter>
-                    <Button variant="ghost" mr={3} onClick={handleAlternateActionClick}>
-                        {formatMessage(alternateActionLabel)}
-                    </Button>
+                    {!hideAlternateAction ? (
+                        <Button variant="ghost" mr={3} onClick={handleAlternateActionClick}>
+                            {formatMessage(alternateActionLabel)}
+                        </Button>
+                    ) : null}
                     <Button variant="solid" onClick={handleConfirmClick}>
                         {formatMessage(primaryActionLabel)}
                     </Button>
@@ -105,7 +108,11 @@ ConfirmationModal.propTypes = {
     /**
      * Action to execute if user selects alternate or secondary action
      */
-    onAlternateAction: PropTypes.func
+    onAlternateAction: PropTypes.func,
+    /**
+     * Flag to hide of show alternative button
+     */
+    hideAlternateAction: PropTypes.bool
 }
 
 export default ConfirmationModal

package/app/components/item-variant/item-image.jsx

@@ -50,6 +50,24 @@ const ItemImage = ({imageProps, ratio = 1, ...props}) => {
                             />
                         </Badge>
                     )}
+                    {variant.isProductUnavailable && (
+                        <Badge
+                            position="absolute"
+                            top={0}
+                            left={0}
+                            marginLeft={2}
+                            marginTop={2}
+                            fontSize="10px"
+                            variant="solid"
+                            colorScheme="red"
+                        >
+                            <FormattedMessage
+                                defaultMessage="Unavailable"
+                                id="item_image.label.unavailable"
+                                description="A unavailable badge placed on top of a product image"
+                            />
+                        </Badge>
+                    )}
 
                     {image && (
                         <Image

package/app/components/product-item/index.test.js

@@ -5,7 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 import React from 'react'
-import ProductItem from '@salesforce/retail-react-app/app/components/product-item/index'
+import ProductItem from '@salesforce/retail-react-app/app/components/product-item'
 import {mockedCustomerProductListsDetails} from '@salesforce/retail-react-app/app/mocks/mock-data'
 import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
 import {screen} from '@testing-library/react'

package/app/components/promo-code/index.jsx

@@ -33,38 +33,35 @@ export const usePromoCode = () => {
     const removePromoCodeMutation = useShopperBasketsMutation('removeCouponFromBasket')
 
     const submitPromoCode = async ({code}) => {
-        applyPromoCodeMutation.mutate(
-            {
+        try {
+            await applyPromoCodeMutation.mutateAsync({
                 parameters: {basketId: basket?.basketId},
                 body: {
                     code
                 }
-            },
-            {
-                onSuccess: () => {
-                    form.reset({code: ''})
-                    toast({
-                        title: formatMessage({
-                            defaultMessage: 'Promotion applied',
-                            id: 'use_promocode.info.promo_applied'
-                        }),
-                        status: 'success',
-                        position: 'top-right',
-                        isClosable: true
-                    })
-                },
-                onError: () => {
-                    form.setError('code', {
-                        type: 'manual',
-                        message: formatMessage({
-                            defaultMessage:
-                                'Check the code and try again, it may already be applied or the promo has expired.',
-                            id: 'use_promocode.error.check_the_code'
-                        })
-                    })
-                }
-            }
-        )
+            })
+
+            form.reset({code: ''})
+
+            toast({
+                title: formatMessage({
+                    defaultMessage: 'Promotion applied',
+                    id: 'use_promocode.info.promo_applied'
+                }),
+                status: 'success',
+                position: 'top-right',
+                isClosable: true
+            })
+        } catch (e) {
+            form.setError('code', {
+                type: 'manual',
+                message: formatMessage({
+                    defaultMessage:
+                        'Check the code and try again, it may already be applied or the promo has expired.',
+                    id: 'use_promocode.error.check_the_code'
+                })
+            })
+        }
     }
 
     const removePromoCode = async (couponItemId) => {

package/app/components/unavailable-product-confirmation-modal/index.jsx

@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) 2024, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import React, {useEffect, useRef} from 'react'
+import PropTypes from 'prop-types'
+import {useProducts} from '@salesforce/commerce-sdk-react'
+import {REMOVE_UNAVAILABLE_CART_ITEM_DIALOG_CONFIG} from '@salesforce/retail-react-app/app/constants'
+import ConfirmationModal from '@salesforce/retail-react-app/app/components/confirmation-modal'
+import {useDisclosure} from '@salesforce/retail-react-app/app/components/shared/ui'
+import {noop} from '@salesforce/retail-react-app/app/utils/utils'
+
+/**
+ * This Component will responsible to determine of a given product ids has become unavailable
+ * and will prompt the users to remove them before proceeding any further
+ *
+ * @param productIds -  list of product ids to check for availability
+ * @param handleUnavailableProducts - callback function to handle what to do with unavailable products
+ * @returns {JSX.Element} -  Conformation Modal Component
+ *
+ */
+const UnavailableProductConfirmationModal = ({
+    productIds = [],
+    handleUnavailableProducts = noop
+}) => {
+    const unavailableProductIdsRef = useRef(null)
+    useProducts(
+        {parameters: {ids: productIds?.join(','), allImages: true}},
+        {
+            enabled: productIds?.length > 0,
+            onSuccess: (result) => {
+                // when a product is unavailable, the getProducts will not return its product detail.
+                // we compare the response ids with the ones in basket to figure which product has become unavailable
+                const resProductIds = result.data?.map((i) => i.id) || []
+                const unavailableProductIds = productIds.filter((id) => !resProductIds.includes(id))
+                unavailableProductIdsRef.current = unavailableProductIds
+            }
+        }
+    )
+    const unavailableProductsModalProps = useDisclosure()
+    useEffect(() => {
+        if (unavailableProductIdsRef.current?.length > 0) {
+            unavailableProductsModalProps.onOpen()
+        }
+    }, [unavailableProductIdsRef.current])
+
+    return (
+        <ConfirmationModal
+            closeOnEsc={false}
+            closeOnOverlayClick={false}
+            {...REMOVE_UNAVAILABLE_CART_ITEM_DIALOG_CONFIG}
+            hideAlternateAction={true}
+            onPrimaryAction={async () => {
+                await handleUnavailableProducts(unavailableProductIdsRef.current)
+                unavailableProductIdsRef.current = null
+                unavailableProductsModalProps.onClose()
+            }}
+            onAlternateAction={() => {}}
+            {...unavailableProductsModalProps}
+        />
+    )
+}
+
+UnavailableProductConfirmationModal.propTypes = {
+    productIds: PropTypes.array,
+    handleUnavailableProducts: PropTypes.func
+}
+
+export default UnavailableProductConfirmationModal

package/app/components/unavailable-product-confirmation-modal/index.test.js

@@ -0,0 +1,362 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import React from 'react'
+import UnavailableProductConfirmationModal from '@salesforce/retail-react-app/app/components/unavailable-product-confirmation-modal/index'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import {waitFor} from '@testing-library/react'
+import {prependHandlersToServer} from '@salesforce/retail-react-app/jest-setup'
+const mockProducts = {
+    limit: 0,
+    total: 1,
+    data: [
+        {
+            currency: 'GBP',
+            id: '701642889830M',
+            imageGroups: [
+                {
+                    images: [
+                        {
+                            alt: 'Belted Cardigan With Studs, , large',
+                            disBaseLink:
+                                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c2304f9/images/large/PG.10215179.JJ0NLD0.PZ.jpg',
+                            link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c2304f9/images/large/PG.10215179.JJ0NLD0.PZ.jpg',
+                            title: 'Belted Cardigan With Studs, '
+                        },
+                        {
+                            alt: 'Belted Cardigan With Studs, , large',
+                            disBaseLink:
+                                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw23cbdec5/images/large/PG.10215179.JJ0NLD0.BZ.jpg',
+                            link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw23cbdec5/images/large/PG.10215179.JJ0NLD0.BZ.jpg',
+                            title: 'Belted Cardigan With Studs, '
+                        }
+                    ],
+                    viewType: 'large'
+                },
+                {
+                    images: [
+                        {
+                            alt: 'Belted Cardigan With Studs, Laurel, large',
+                            disBaseLink:
+                                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c2304f9/images/large/PG.10215179.JJ0NLD0.PZ.jpg',
+                            link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c2304f9/images/large/PG.10215179.JJ0NLD0.PZ.jpg',
+                            title: 'Belted Cardigan With Studs, Laurel'
+                        },
+                        {
+                            alt: 'Belted Cardigan With Studs, Laurel, large',
+                            disBaseLink:
+                                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw23cbdec5/images/large/PG.10215179.JJ0NLD0.BZ.jpg',
+                            link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw23cbdec5/images/large/PG.10215179.JJ0NLD0.BZ.jpg',
+                            title: 'Belted Cardigan With Studs, Laurel'
+                        }
+                    ],
+                    variationAttributes: [
+                        {
+                            id: 'color',
+                            values: [
+                                {
+                                    value: 'JJ0NLD0'
+                                }
+                            ]
+                        }
+                    ],
+                    viewType: 'large'
+                },
+                {
+                    images: [
+                        {
+                            alt: 'Belted Cardigan With Studs, , medium',
+                            disBaseLink:
+                                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw521c09a6/images/medium/PG.10215179.JJ0NLD0.PZ.jpg',
+                            link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw521c09a6/images/medium/PG.10215179.JJ0NLD0.PZ.jpg',
+                            title: 'Belted Cardigan With Studs, '
+                        },
+                        {
+                            alt: 'Belted Cardigan With Studs, , medium',
+                            disBaseLink:
+                                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwb147ee45/images/medium/PG.10215179.JJ0NLD0.BZ.jpg',
+                            link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dwb147ee45/images/medium/PG.10215179.JJ0NLD0.BZ.jpg',
+                            title: 'Belted Cardigan With Studs, '
+                        }
+                    ],
+                    viewType: 'medium'
+                },
+                {
+                    images: [
+                        {
+                            alt: 'Belted Cardigan With Studs, Laurel, medium',
+                            disBaseLink:
+                                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw521c09a6/images/medium/PG.10215179.JJ0NLD0.PZ.jpg',
+                            link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw521c09a6/images/medium/PG.10215179.JJ0NLD0.PZ.jpg',
+                            title: 'Belted Cardigan With Studs, Laurel'
+                        },
+                        {
+                            alt: 'Belted Cardigan With Studs, Laurel, medium',
+                            disBaseLink:
+                                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwb147ee45/images/medium/PG.10215179.JJ0NLD0.BZ.jpg',
+                            link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dwb147ee45/images/medium/PG.10215179.JJ0NLD0.BZ.jpg',
+                            title: 'Belted Cardigan With Studs, Laurel'
+                        }
+                    ],
+                    variationAttributes: [
+                        {
+                            id: 'color',
+                            values: [
+                                {
+                                    value: 'JJ0NLD0'
+                                }
+                            ]
+                        }
+                    ],
+                    viewType: 'medium'
+                },
+                {
+                    images: [
+                        {
+                            alt: 'Belted Cardigan With Studs, , small',
+                            disBaseLink:
+                                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwa5ed67ee/images/small/PG.10215179.JJ0NLD0.PZ.jpg',
+                            link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dwa5ed67ee/images/small/PG.10215179.JJ0NLD0.PZ.jpg',
+                            title: 'Belted Cardigan With Studs, '
+                        },
+                        {
+                            alt: 'Belted Cardigan With Studs, , small',
+                            disBaseLink:
+                                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw2baf85f2/images/small/PG.10215179.JJ0NLD0.BZ.jpg',
+                            link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw2baf85f2/images/small/PG.10215179.JJ0NLD0.BZ.jpg',
+                            title: 'Belted Cardigan With Studs, '
+                        }
+                    ],
+                    viewType: 'small'
+                },
+                {
+                    images: [
+                        {
+                            alt: 'Belted Cardigan With Studs, Laurel, small',
+                            disBaseLink:
+                                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwa5ed67ee/images/small/PG.10215179.JJ0NLD0.PZ.jpg',
+                            link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dwa5ed67ee/images/small/PG.10215179.JJ0NLD0.PZ.jpg',
+                            title: 'Belted Cardigan With Studs, Laurel'
+                        },
+                        {
+                            alt: 'Belted Cardigan With Studs, Laurel, small',
+                            disBaseLink:
+                                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw2baf85f2/images/small/PG.10215179.JJ0NLD0.BZ.jpg',
+                            link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw2baf85f2/images/small/PG.10215179.JJ0NLD0.BZ.jpg',
+                            title: 'Belted Cardigan With Studs, Laurel'
+                        }
+                    ],
+                    variationAttributes: [
+                        {
+                            id: 'color',
+                            values: [
+                                {
+                                    value: 'JJ0NLD0'
+                                }
+                            ]
+                        }
+                    ],
+                    viewType: 'small'
+                },
+                {
+                    images: [
+                        {
+                            alt: 'Belted Cardigan With Studs, Laurel, swatch',
+                            disBaseLink:
+                                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw024437d3/images/swatch/PG.10215179.JJ0NLD0.CP.jpg',
+                            link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw024437d3/images/swatch/PG.10215179.JJ0NLD0.CP.jpg',
+                            title: 'Belted Cardigan With Studs, Laurel'
+                        }
+                    ],
+                    variationAttributes: [
+                        {
+                            id: 'color',
+                            values: [
+                                {
+                                    value: 'JJ0NLD0'
+                                }
+                            ]
+                        }
+                    ],
+                    viewType: 'swatch'
+                }
+            ],
+            inventory: {
+                ats: 68,
+                backorderable: false,
+                id: 'inventory_m',
+                orderable: true,
+                preorderable: false,
+                stockLevel: 68
+            },
+            longDescription:
+                'Our best selling cardigan is now updated with a detachable belt and studs. Pair it with a Commerce Cloud Store shell and it is great for nine-to-five and beyond.',
+            master: {
+                masterId: '25502228M',
+                orderable: true,
+                price: 61.43
+            },
+            minOrderQuantity: 1,
+            name: 'Belted Cardigan With Studs',
+            pageDescription:
+                'Our best selling cardigan is now updated with a detachable belt and studs. Pair it with a Commerce Cloud Store shell and it is great for nine-to-five and beyond.',
+            pageTitle: 'Belted Cardigan With Studs',
+            price: 61.43,
+            pricePerUnit: 61.43,
+            productPromotions: [
+                {
+                    calloutMsg: 'Buy one Long Center Seam Skirt and get 2 tops',
+                    promotionId: 'ChoiceOfBonusProdect-ProductLevel-ruleBased'
+                },
+                {
+                    calloutMsg: '$50 Fixed Products Amount Above 100',
+                    promotionId: '$50FixedProductsAmountAbove100'
+                },
+                {
+                    calloutMsg: 'Bonus Product for Order Amounts Above 250',
+                    promotionId: 'BonusProductOnOrderOfAmountABove250'
+                }
+            ],
+            shortDescription:
+                'Our best selling cardigan is now updated with a detachable belt and studs. Pair it with a Commerce Cloud Store shell and it is great for nine-to-five and beyond.',
+            slugUrl:
+                'https://zzrf-001.dx.commercecloud.salesforce.com/s/RefArchGlobal/belted-cardigan-with-studs/701642889830M.html?lang=en_GB',
+            stepQuantity: 1,
+            type: {
+                variant: true
+            },
+            unitMeasure: '',
+            unitQuantity: 0,
+            upc: '701642889830',
+            validFrom: {
+                default: '2010-11-18T05:00:00.000Z'
+            },
+            variants: [
+                {
+                    orderable: true,
+                    price: 61.43,
+                    productId: '701642889823M',
+                    variationValues: {
+                        color: 'JJ0NLD0',
+                        size: '9LG'
+                    }
+                },
+                {
+                    orderable: true,
+                    price: 61.43,
+                    productId: '701642889847M',
+                    variationValues: {
+                        color: 'JJ0NLD0',
+                        size: '9SM'
+                    }
+                },
+                {
+                    orderable: true,
+                    price: 61.43,
+                    productId: '701642889830M',
+                    variationValues: {
+                        color: 'JJ0NLD0',
+                        size: '9MD'
+                    }
+                },
+                {
+                    orderable: true,
+                    price: 61.43,
+                    productId: '701642889854M',
+                    variationValues: {
+                        color: 'JJ0NLD0',
+                        size: '9XL'
+                    }
+                }
+            ],
+            variationAttributes: [
+                {
+                    id: 'color',
+                    name: 'Colour',
+                    values: [
+                        {
+                            name: 'Laurel',
+                            orderable: true,
+                            value: 'JJ0NLD0'
+                        }
+                    ]
+                },
+                {
+                    id: 'size',
+                    name: 'Size',
+                    values: [
+                        {
+                            name: 'S',
+                            orderable: true,
+                            value: '9SM'
+                        },
+                        {
+                            name: 'M',
+                            orderable: true,
+                            value: '9MD'
+                        },
+                        {
+                            name: 'L',
+                            orderable: true,
+                            value: '9LG'
+                        },
+                        {
+                            name: 'XL',
+                            orderable: true,
+                            value: '9XL'
+                        }
+                    ]
+                }
+            ],
+            variationValues: {
+                color: 'JJ0NLD0',
+                size: '9MD'
+            },
+            c_color: 'JJ0NLD0',
+            c_refinementColor: 'black',
+            c_size: '9MD',
+            c_width: 'Z'
+        }
+    ]
+}
+
+describe('UnavailableProductConfirmationModal', () => {
+    beforeEach(() => {
+        prependHandlersToServer([
+            {
+                path: '*/products',
+                res: () => {
+                    return mockProducts
+                }
+            }
+        ])
+    })
+    test('renders without crashing', () => {
+        expect(() => {
+            renderWithProviders(<UnavailableProductConfirmationModal />)
+        }).not.toThrow()
+    })
+
+    test('opens confirmation modal when unavailable products are found', async () => {
+        const mockProductIds = ['701642889899M', '701642889830M']
+        const mockFunc = jest.fn()
+        const {getByRole, user} = renderWithProviders(
+            <UnavailableProductConfirmationModal
+                productIds={mockProductIds}
+                handleUnavailableProducts={mockFunc}
+            />
+        )
+
+        await waitFor(async () => {
+            const removeBtn = getByRole('button')
+            expect(removeBtn).toBeInTheDocument()
+            await user.click(removeBtn)
+            expect(mockFunc).toHaveBeenCalled()
+            expect(removeBtn).not.toBeInTheDocument()
+        })
+    })
+})

package/app/constants.js

@@ -6,6 +6,7 @@
  */
 
 import {defineMessage} from 'react-intl'
+import {noop} from '@salesforce/retail-react-app/app/utils/utils'
 
 // Global app defaults
 export const DEFAULT_LOCALE = 'en-US'
@@ -120,3 +121,20 @@ export const SHIPPING_COUNTRY_CODES = [
 
 // Constant to Enable Active Data
 export const ACTIVE_DATA_ENABLED = false
+
+export const REMOVE_UNAVAILABLE_CART_ITEM_DIALOG_CONFIG = {
+    dialogTitle: defineMessage({
+        defaultMessage: 'Items Unavailable',
+        id: 'confirmation_modal.remove_cart_item.title.items_unavailable'
+    }),
+    confirmationMessage: defineMessage({
+        defaultMessage:
+            'Some items are no longer available online and will be removed from your cart.',
+        id: 'confirmation_modal.remove_cart_item.message.need_to_remove_due_to_unavailability'
+    }),
+    primaryActionLabel: defineMessage({
+        defaultMessage: 'Remove',
+        id: 'confirmation_modal.remove_cart_item.action.remove'
+    }),
+    onPrimaryAction: noop
+}