W 15586246/removed out of stock product from cart

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

@@ -1,4 +1,7 @@
 ## v3.1.0-dev (Jun 25, 2024)
+### Bug Fixes
+
+- Out of stock and low stock items are removed from cart and checkout as unavailable products [#1865](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1865)
 
 ## v3.0.0 (Jun 25, 2024)
 

packages/template-retail-react-app/app/components/confirmation-modal/index.jsx

@@ -25,14 +25,15 @@ const ConfirmationModal = ({
     dialogTitle = CONFIRMATION_DIALOG_DEFAULT_CONFIG.dialogTitle,
     confirmationMessage = CONFIRMATION_DIALOG_DEFAULT_CONFIG.confirmationMessage,
     primaryActionLabel = CONFIRMATION_DIALOG_DEFAULT_CONFIG.primaryActionLabel,
+    primaryActionAriaLabel = CONFIRMATION_DIALOG_DEFAULT_CONFIG.primaryActionAriaLabel,
     alternateActionLabel = CONFIRMATION_DIALOG_DEFAULT_CONFIG.alternateActionLabel,
+    alternateActionAriaLabel = CONFIRMATION_DIALOG_DEFAULT_CONFIG.alternateActionAriaLabel,
     hideAlternateAction = false,
     onPrimaryAction = noop,
     onAlternateAction = noop,
     ...props
 }) => {
     const {formatMessage} = useIntl()
-
     const handleConfirmClick = () => {
         onPrimaryAction()
         props.onClose()
@@ -59,11 +60,20 @@ const ConfirmationModal = ({
 
                 <AlertDialogFooter>
                     {!hideAlternateAction ? (
-                        <Button variant="ghost" mr={3} onClick={handleAlternateActionClick}>
+                        <Button
+                            variant="ghost"
+                            mr={3}
+                            aria-label={formatMessage(alternateActionAriaLabel)}
+                            onClick={handleAlternateActionClick}
+                        >
                             {formatMessage(alternateActionLabel)}
                         </Button>
                     ) : null}
-                    <Button variant="solid" onClick={handleConfirmClick}>
+                    <Button
+                        variant="solid"
+                        onClick={handleConfirmClick}
+                        aria-label={formatMessage(primaryActionAriaLabel)}
+                    >
                         {formatMessage(primaryActionLabel)}
                     </Button>
                 </AlertDialogFooter>
@@ -97,10 +107,18 @@ ConfirmationModal.propTypes = {
      * Button Label for primary action in confirmation modal
      */
     primaryActionLabel: PropTypes.object,
+    /**
+     * Button aria Label for primary action
+     */
+    primaryActionAriaLabel: PropTypes.object,
     /**
      * Button Label for alternate or secondary action in confirmation modal
      */
     alternateActionLabel: PropTypes.object,
+    /**
+     * Button aria Label for alternate or secondary action in confirmation modal
+     */
+    alternateActionAriaLabel: PropTypes.object,
     /**
      * Action to execute if user selects primary action
      */

packages/template-retail-react-app/app/components/unavailable-product-confirmation-modal/index.jsx

@@ -14,28 +14,52 @@ import {useDisclosure} from '@salesforce/retail-react-app/app/components/shared/
 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
+ * This Component determines if the provided products have become unavailable or out of stock or low stock that
+ * can't be fulfilled and will prompt the users to remove them before proceeding any further
  *
  * @param productIds -  list of product ids to check for availability
+ * @param productItems -  basket product items
  * @param handleUnavailableProducts - callback function to handle what to do with unavailable products
  * @returns {JSX.Element} -  Conformation Modal Component
  *
  */
 const UnavailableProductConfirmationModal = ({
     productIds = [],
+    productItems = [],
     handleUnavailableProducts = noop
 }) => {
     const unavailableProductIdsRef = useRef(null)
+    const ids = productIds.length ? productIds : productItems.map((i) => i.productId)
     useProducts(
-        {parameters: {ids: productIds?.join(','), allImages: true}},
+        {parameters: {ids: ids?.join(','), allImages: true}},
         {
-            enabled: productIds?.length > 0,
+            enabled: ids?.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))
+                const resProductIds = []
+                const unOrderableIds = []
+                result.data?.forEach(({id, inventory}) => {
+                    const productItem = productItems.find((item) => item.productId === id)
+                    // wishlist item will have the property type
+                    const isWishlist = !!productItem?.type
+                    // 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
+                    resProductIds.push(id)
+                    // when a product is orderable, but the quantity in the basket is more than the remaining stock
+                    // we want to make sure it is removed before go to checkout page to avoid error when placing order
+                    // we don't need to remove low stock/ out of stock from wishlist
+                    if (
+                        !isWishlist &&
+                        (!inventory?.orderable ||
+                            (inventory?.orderable && productItem?.quantity > inventory.stockLevel))
+                    ) {
+                        unOrderableIds.push(id)
+                    }
+                })
+
+                const unavailableProductIds = ids.filter(
+                    (id) => !resProductIds.includes(id) || unOrderableIds.includes(id)
+                )
+
                 unavailableProductIdsRef.current = unavailableProductIds
             }
         }
@@ -49,6 +73,7 @@ const UnavailableProductConfirmationModal = ({
 
     return (
         <ConfirmationModal
+            data-testid="unavailable-product-modal"
             closeOnEsc={false}
             closeOnOverlayClick={false}
             {...REMOVE_UNAVAILABLE_CART_ITEM_DIALOG_CONFIG}
@@ -65,6 +90,7 @@ const UnavailableProductConfirmationModal = ({
 }
 
 UnavailableProductConfirmationModal.propTypes = {
+    productItems: PropTypes.array,
     productIds: PropTypes.array,
     handleUnavailableProducts: PropTypes.func
 }