fix for false positives error toast

Signed-off-by: d.phan <d.phan@salesforce.com>

Author: dannyphan2000

packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-shipping-address.jsx

@@ -59,7 +59,7 @@ export default function ShippingAddress(props) {
     const selectedShippingAddress = deliveryShipments[0]?.shippingAddress
     const targetDeliveryShipmentId = deliveryShipments[0]?.shipmentId || 'me'
     const isAddressFilled = selectedShippingAddress?.address1 && selectedShippingAddress?.city
-    const {step, STEPS, goToStep, goToNextStep, contactPhone} = useCheckout()
+    const {step, STEPS, goToStep, goToNextStep, contactPhone, setConsolidationLock} = useCheckout()
     const createCustomerAddress = useShopperCustomersMutation('createCustomerAddress')
     const updateCustomerAddress = useShopperCustomersMutation('updateCustomerAddress')
     const updateShippingAddressForShipment = useShopperBasketsMutation(
@@ -115,6 +115,14 @@ export default function ShippingAddress(props) {
             const targetShipmentId = targetShipment?.shipmentId || DEFAULT_SHIPMENT_ID
             let basketAfterItemMoves = null
 
+            // Do not advance the step while basket mutations are in flight
+            const willConsolidate = deliveryItems.some(
+                (item) => item.shipmentId !== targetShipmentId
+            )
+            if (willConsolidate) {
+                setConsolidationLock(true)
+            }
+
             await updateShippingAddressForShipment.mutateAsync({
                 parameters: {
                     basketId: basket.basketId,
@@ -173,6 +181,7 @@ export default function ShippingAddress(props) {
             }
             // Remove any empty shipments. Use updated basket if available
             await removeEmptyShipments(basketAfterItemMoves || basket)
+            setConsolidationLock(false)
 
             // For registered shoppers: if an existing shipping method is still valid for the new address,
             // skip the Shipping Options step and go straight to Payment.
@@ -199,6 +208,7 @@ export default function ShippingAddress(props) {
                 console.error('Error submitting shipping address:', error)
             }
         } finally {
+            setConsolidationLock(false)
             setIsManualSubmitLoading(false)
         }
     }

packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-shipping-address.test.js

@@ -116,7 +116,8 @@ jest.mock(
             },
             goToStep: mockGoToStep,
             goToNextStep: mockGoToNextStep,
-            contactPhone: '(727) 555-0000'
+            contactPhone: '(727) 555-0000',
+            setConsolidationLock: jest.fn()
         })
     })
 )
@@ -524,7 +525,8 @@ describe('ShippingAddress Component', () => {
                     },
                     goToStep: mockGoToStep,
                     goToNextStep: mockGoToNextStep,
-                    contactPhone: '(727) 555-9999'
+                    contactPhone: '(727) 555-9999',
+                    setConsolidationLock: jest.fn()
                 })
             })
         )
@@ -820,7 +822,8 @@ describe('ShippingAddress Component', () => {
                     },
                     goToStep: mockGoToStep,
                     goToNextStep: mockGoToNextStep,
-                    contactPhone: '(727) 555-0000'
+                    contactPhone: '(727) 555-0000',
+                    setConsolidationLock: jest.fn()
                 })
             })
         )
@@ -1052,7 +1055,8 @@ describe('ShippingAddress Component', () => {
                     },
                     goToStep: mockGoToStep,
                     goToNextStep: mockGoToNextStep,
-                    contactPhone: '(727) 555-0000'
+                    contactPhone: '(727) 555-0000',
+                    setConsolidationLock: jest.fn()
                 })
             })
         )
@@ -1213,7 +1217,8 @@ describe('ShippingAddress Component', () => {
                     },
                     goToStep: mockGoToStep,
                     goToNextStep: mockGoToNextStep,
-                    contactPhone: '(727) 555-0000'
+                    contactPhone: '(727) 555-0000',
+                    setConsolidationLock: jest.fn()
                 })
             })
         )

packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-shipping-options.jsx

@@ -53,6 +53,8 @@ export default function ShippingOptions() {
     const [noMethodsToastShown, setNoMethodsToastShown] = useState(false)
     const [shipmentIdsWithNoMethods, setShipmentIdsWithNoMethods] = useState(() => new Set())
     const [resolvedShipmentIds, setResolvedShipmentIds] = useState(() => new Set())
+    const [singleShipmentFetchCompleted, setSingleShipmentFetchCompleted] = useState(false)
+    const prevIsFetchingRef = useRef(false)
 
     const productItems = basket?.productItems || []
     const deliveryShipments =
@@ -93,7 +95,9 @@ export default function ShippingOptions() {
         const wasMulti = prevHasMultipleRef.current
         prevHasMultipleRef.current = hasMultipleDeliveryShipments
 
-        if (wasMulti && !hasMultipleDeliveryShipments) return
+        if (wasMulti && !hasMultipleDeliveryShipments) {
+            return
+        }
         if (step === STEPS.SHIPPING_OPTIONS) return
 
         setNoMethodsToastShown(false)
@@ -160,9 +164,24 @@ export default function ShippingOptions() {
         noShippingMethodsToast
     ])
 
-    // Single shipment: show toast when methods data is available and has no delivery methods
+    // Prevent false positives from stale cached data for single-shipment error toast
+    useEffect(() => {
+        setSingleShipmentFetchCompleted(false)
+        prevIsFetchingRef.current = false
+    }, [step, hasMultipleDeliveryShipments])
+
+    // Track the single-shipment query's fetch lifecycle
+    useEffect(() => {
+        const wasFetching = prevIsFetchingRef.current
+        prevIsFetchingRef.current = isShippingMethodsFetching
+        if (wasFetching && !isShippingMethodsFetching) {
+            setSingleShipmentFetchCompleted(true)
+        }
+    }, [isShippingMethodsFetching])
+
     const singleShipmentNoMethods =
         !hasMultipleDeliveryShipments &&
+        singleShipmentFetchCompleted &&
         step === STEPS.SHIPPING_OPTIONS &&
         !isShippingMethodsFetching &&
         shippingMethods != null &&

packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-shipping-options.test.js

@@ -223,10 +223,12 @@ describe('ShippingOptions Component', () => {
         })
 
         test('shows error toast and hides controls when no shipping methods are available', async () => {
-            const emptyMethodsPayload = {
-                data: {applicableShippingMethods: [], defaultShippingMethodId: 'std'}
-            }
-            commerceSdk.useShippingMethodsForShipment.mockImplementation(() => emptyMethodsPayload)
+            commerceSdk.useShippingMethodsForShipment
+                .mockReturnValueOnce({data: null, isFetching: true})
+                .mockReturnValue({
+                    data: {applicableShippingMethods: [], defaultShippingMethodId: 'std'},
+                    isFetching: false
+                })
             mockUpdateShippingMethod.mutateAsync.mockResolvedValue({})
 
             renderWithProviders(<ShippingOptions />)

packages/template-retail-react-app/app/pages/checkout-one-click/util/checkout-context.js

@@ -4,7 +4,7 @@
  * 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, useState} from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 import PropTypes from 'prop-types'
 import useEinstein from '@salesforce/retail-react-app/app/hooks/use-einstein'
 import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
@@ -39,6 +39,7 @@ export const CheckoutProvider = ({children}) => {
     const einstein = useEinstein()
     const [step, setStep] = useState()
     const [contactPhone, setContactPhone] = useState('')
+    const consolidationLockRef = useRef(false)
 
     const CHECKOUT_STEPS_LIST = [
         'CONTACT_INFO',
@@ -56,6 +57,7 @@ export const CheckoutProvider = ({children}) => {
         if (!customer || !basket) {
             return
         }
+        if (consolidationLockRef.current) return
 
         let step = STEPS.REVIEW_ORDER
 
@@ -134,13 +136,18 @@ export const CheckoutProvider = ({children}) => {
 
     const goToStep = (step) => setStep(step)
 
+    const setConsolidationLock = (locked) => {
+        consolidationLockRef.current = locked
+    }
+
     const value = {
         step,
         STEPS,
         goToNextStep,
         goToStep,
         contactPhone,
-        setContactPhone
+        setContactPhone,
+        setConsolidationLock
     }
 
     return <CheckoutContext.Provider value={value}>{children}</CheckoutContext.Provider>