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

package/app/hooks/einstein-mock-data.js

@@ -429,6 +429,163 @@ export const mockSearchResults = {
     total: 4
 }
 
+export const mockNoSearchResults = {
+    limit: 0,
+    query: 'dsflksajfdklsafj',
+    refinements: [
+        {
+            attributeId: 'cgid',
+            label: 'Category'
+        },
+        {
+            attributeId: 'c_refinementColor',
+            label: 'Colour',
+            values: [
+                {
+                    hitCount: 0,
+                    label: 'Beige',
+                    presentationId: 'beige',
+                    value: 'Beige'
+                },
+                {
+                    hitCount: 0,
+                    label: 'Black',
+                    presentationId: 'black',
+                    value: 'Black'
+                },
+                {
+                    hitCount: 0,
+                    label: 'Blue',
+                    presentationId: 'blue',
+                    value: 'Blue'
+                },
+                {
+                    hitCount: 0,
+                    label: 'Navy',
+                    presentationId: 'navy',
+                    value: 'Navy'
+                },
+                {
+                    hitCount: 0,
+                    label: 'Brown',
+                    presentationId: 'brown',
+                    value: 'Brown'
+                },
+                {
+                    hitCount: 0,
+                    label: 'Green',
+                    presentationId: 'green',
+                    value: 'Green'
+                },
+                {
+                    hitCount: 0,
+                    label: 'Grey',
+                    presentationId: 'grey',
+                    value: 'Grey'
+                },
+                {
+                    hitCount: 0,
+                    label: 'Orange',
+                    presentationId: 'orange',
+                    value: 'Orange'
+                },
+                {
+                    hitCount: 0,
+                    label: 'Pink',
+                    presentationId: 'pink',
+                    value: 'Pink'
+                },
+                {
+                    hitCount: 0,
+                    label: 'Purple',
+                    presentationId: 'purple',
+                    value: 'Purple'
+                },
+                {
+                    hitCount: 0,
+                    label: 'Red',
+                    presentationId: 'red',
+                    value: 'Red'
+                },
+                {
+                    hitCount: 0,
+                    label: 'White',
+                    presentationId: 'white',
+                    value: 'White'
+                },
+                {
+                    hitCount: 0,
+                    label: 'Yellow',
+                    presentationId: 'yellow',
+                    value: 'Yellow'
+                },
+                {
+                    hitCount: 0,
+                    label: 'Miscellaneous',
+                    presentationId: 'miscellaneous',
+                    value: 'Miscellaneous'
+                }
+            ]
+        },
+        {
+            attributeId: 'price',
+            label: 'Price'
+        },
+        {
+            attributeId: 'c_isNew',
+            label: 'New Arrival'
+        },
+        {
+            attributeId: 'brand',
+            label: 'By brand'
+        }
+    ],
+    searchPhraseSuggestions: {
+        suggestedTerms: [
+            {
+                originalTerm: 'dsflksajfdklsafj'
+            }
+        ]
+    },
+    selectedSortingOption: 'best-matches',
+    sortingOptions: [
+        {
+            id: 'best-matches',
+            label: 'Best Matches'
+        },
+        {
+            id: 'price-low-to-high',
+            label: 'Price Low To High'
+        },
+        {
+            id: 'price-high-to-low',
+            label: 'Price High to Low'
+        },
+        {
+            id: 'product-name-ascending',
+            label: 'Product Name A - Z'
+        },
+        {
+            id: 'product-name-descending',
+            label: 'Product Name Z - A'
+        },
+        {
+            id: 'brand',
+            label: 'Brand'
+        },
+        {
+            id: 'most-popular',
+            label: 'Most Popular'
+        },
+        {
+            id: 'top-sellers',
+            label: 'Top Sellers'
+        }
+    ],
+    offset: 0,
+    total: 0
+}
+
 export const mockBasket = {
     adjustedMerchandizeTotalTax: 1.5,
     adjustedShippingTotalTax: 0.3,

package/app/hooks/use-einstein.js

@@ -161,14 +161,13 @@ export class EinsteinAPI {
         const endpoint = `/activities/${this.siteId}/viewSearch`
         const method = 'POST'
 
-        const products = searchResults?.hits?.map((product) =>
-            this._constructEinsteinProduct(product)
-        )
+        const products =
+            searchResults?.hits?.map((product) => this._constructEinsteinProduct(product)) ?? []
 
         const body = {
             searchText,
             products,
-            showProducts: true, // Needed by Reports and Dashboards to differentiate searches with results vs no results
+            showProducts: Boolean(products.length), // Needed by Reports and Dashboards to differentiate searches with results vs no results
             ...args
         }
 

package/app/hooks/use-einstein.test.js

@@ -11,7 +11,8 @@ import {
     mockCategory,
     mockSearchResults,
     mockBasket,
-    mockRecommenderDetails
+    mockRecommenderDetails,
+    mockNoSearchResults
 } from '@salesforce/retail-react-app/app/hooks/einstein-mock-data'
 import fetchMock from 'jest-fetch-mock'
 
@@ -65,6 +66,23 @@ describe('EinsteinAPI', () => {
         )
     })
 
+    test('viewSearch: no search results', async () => {
+        const searchTerm = 'dsflksajfdklsafj'
+        await einsteinApi.sendViewSearch(searchTerm, mockNoSearchResults, {cookieId: 'test-usid'})
+        expect(fetch).toHaveBeenCalledWith(
+            'http://localhost/test-path/v3/activities/test-site-id/viewSearch',
+            {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-cq-client-id': 'test-id'
+                },
+                // Most importantly, the body should contain `products=[]` and `showProducts=false`
+                body: '{"searchText":"dsflksajfdklsafj","products":[],"showProducts":false,"cookieId":"test-usid","realm":"test","instanceType":"sbx"}'
+            }
+        )
+    })
+
     test('viewCategory sends expected api request', async () => {
         await einsteinApi.sendViewCategory(mockCategory, mockSearchResults, {cookieId: 'test-usid'})
         expect(fetch).toHaveBeenCalledWith(

package/app/pages/account/index.jsx

@@ -110,11 +110,11 @@ const Account = () => {
     // If we have customer data and they are not registered, push to login page
     // Using Redirect allows us to store the directed page to location
     // so we can direct users back after they are successfully log in
-    // we don't want redirect on server side
     if (customerType !== null && !isRegistered && onClient) {
         const path = buildUrl('/login')
         return <Redirect to={{pathname: path, state: {directedFrom: '/account'}}} />
     }
+
     return (
         <Box
             data-testid={isRegistered && isHydrated() ? 'account-page' : 'account-page-skeleton'}

package/app/pages/account/order-detail.jsx

@@ -35,28 +35,30 @@ import PropTypes from 'prop-types'
 const onClient = typeof window !== 'undefined'
 
 const OrderProducts = ({productItems, currency}) => {
-    const productItemsMap = productItems.reduce(
-        (map, item) => ({...map, [item.productId]: item}),
-        {}
-    )
-    const ids = Object.keys(productItemsMap).join(',') ?? ''
-    const {data: {data: products} = {}, isLoading} = useProducts(
+    const orderProductIds = productItems.map((product) => product.productId)
+    const {data: products, isLoading} = useProducts(
         {
             parameters: {
-                ids: ids
+                ids: orderProductIds
             }
         },
         {
-            enabled: !!ids && onClient
+            enabled: !!orderProductIds && onClient,
+            select: (result) => {
+                return result?.data?.reduce((result, item) => {
+                    const key = item.id
+                    result[key] = item
+                    return result
+                }, {})
+            }
         }
     )
-
-    const variants = products?.map((product) => {
-        const productItem = productItemsMap[product.id]
+    const variants = productItems?.map((item) => {
+        const product = products?.[item.productId]
         return {
-            ...productItem,
-            ...product,
-            price: productItem.price
+            ...(product ? product : {}),
+            isProductUnavailable: !product,
+            ...item
         }
     })
 

package/app/pages/account/profile.jsx

@@ -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, {useEffect, useRef, useState} from 'react'
+import React, {forwardRef, useEffect, useRef, useState} from 'react'
 import {FormattedMessage, useIntl} from 'react-intl'
 import {
     Alert,
@@ -42,7 +42,7 @@ import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-cur
  * the bounding element will affect the contents size.
  */
 // eslint-disable-next-line react/prop-types
-const Skeleton = ({children, height, width, ...rest}) => {
+const Skeleton = forwardRef(({children, height, width, ...rest}, ref) => {
     const {data: customer} = useCurrentCustomer()
     const {isRegistered} = customer
     const size = !isRegistered
@@ -52,15 +52,17 @@ const Skeleton = ({children, height, width, ...rest}) => {
           }
         : {}
     return (
-        <ChakraSkeleton isLoaded={!customer.isLoading} {...rest} {...size}>
+        <ChakraSkeleton ref={ref} isLoaded={!customer.isLoading} {...rest} {...size}>
             {children}
         </ChakraSkeleton>
     )
-}
+})
+
+Skeleton.displayName = 'Skeleton'
 
 const ProfileCard = () => {
     const {formatMessage} = useIntl()
-
+    const headingRef = useRef(null)
     const {data: customer} = useCurrentCustomer()
     const {isRegistered, customerId} = customer
 
@@ -87,14 +89,6 @@ const ProfileCard = () => {
         })
     }, [customer?.firstName, customer?.lastName, customer?.email, customer?.phoneHome])
 
-    const profileHeadingText = formatMessage({
-        defaultMessage: 'My Profile',
-        id: 'profile_card.title.my_profile'
-    })
-    const profileHeading = Array.from(document.querySelectorAll('h2')).find(
-        (element) => element.textContent === profileHeadingText
-    )
-
     const submit = async (values) => {
         try {
             form.clearErrors()
@@ -126,7 +120,7 @@ const ProfileCard = () => {
                             status: 'success',
                             isClosable: true
                         })
-                        profileHeading?.focus()
+                        headingRef?.current?.focus()
                     }
                 }
             )
@@ -139,8 +133,11 @@ const ProfileCard = () => {
         <ToggleCard
             id="my-profile"
             title={
-                <Skeleton height="30px" width="120px">
-                    {profileHeadingText}
+                <Skeleton ref={headingRef} tabIndex="-1" height="30px" width="120px">
+                    <FormattedMessage
+                        defaultMessage="My Profile"
+                        id="profile_card.title.my_profile"
+                    />
                 </Skeleton>
             }
             editing={isEditing}
@@ -164,7 +161,8 @@ const ProfileCard = () => {
                             <FormActionButtons
                                 onCancel={() => {
                                     setIsEditing(false)
-                                    profileHeading?.focus()
+                                    headingRef?.current?.focus()
+                                    form.reset()
                                 }}
                             />
                         </Stack>
@@ -232,7 +230,7 @@ const ProfileCard = () => {
 
 const PasswordCard = () => {
     const {formatMessage} = useIntl()
-
+    const headingRef = useRef(null)
     const {data: customer} = useCurrentCustomer()
     const {isRegistered, customerId, email} = customer
 
@@ -244,14 +242,6 @@ const PasswordCard = () => {
 
     const form = useForm()
 
-    const passwordHeadingText = formatMessage({
-        defaultMessage: 'Password',
-        id: 'password_card.title.password'
-    })
-    const passwordHeading = Array.from(document.querySelectorAll('h2')).find(
-        (element) => element.textContent === passwordHeadingText
-    )
-
     const submit = async (values) => {
         try {
             form.clearErrors()
@@ -278,7 +268,7 @@ const PasswordCard = () => {
                             username: email,
                             password: values.password
                         })
-                        passwordHeading?.focus()
+                        headingRef?.current?.focus()
                         form.reset()
                     },
                     onError: async (err) => {
@@ -296,8 +286,8 @@ const PasswordCard = () => {
         <ToggleCard
             id="password"
             title={
-                <Skeleton height="30px" width="120px">
-                    {passwordHeadingText}
+                <Skeleton ref={headingRef} tabIndex="-1" height="30px" width="120px">
+                    <FormattedMessage defaultMessage="Password" id="password_card.title.password" />
                 </Skeleton>
             }
             editing={isEditing}
@@ -321,7 +311,8 @@ const PasswordCard = () => {
                             <FormActionButtons
                                 onCancel={() => {
                                     setIsEditing(false)
-                                    passwordHeading?.focus()
+                                    headingRef?.current?.focus()
+                                    form.reset()
                                 }}
                             />
                         </Stack>

package/app/pages/account/wishlist/index.jsx

@@ -16,12 +16,13 @@ import {useWishList} from '@salesforce/retail-react-app/app/hooks/use-wish-list'
 
 import PageActionPlaceHolder from '@salesforce/retail-react-app/app/components/page-action-placeholder'
 import {HeartIcon} from '@salesforce/retail-react-app/app/components/icons'
-import ProductItem from '@salesforce/retail-react-app/app/components/product-item/index'
+import ProductItem from '@salesforce/retail-react-app/app/components/product-item'
 import WishlistPrimaryAction from '@salesforce/retail-react-app/app/pages/account/wishlist/partials/wishlist-primary-action'
 import WishlistSecondaryButtonGroup from '@salesforce/retail-react-app/app/pages/account/wishlist/partials/wishlist-secondary-button-group'
 
 import {API_ERROR_MESSAGE} from '@salesforce/retail-react-app/app/constants'
 import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
+import UnavailableProductConfirmationModal from '@salesforce/retail-react-app/app/components/unavailable-product-confirmation-modal'
 
 const numberOfSkeletonItems = 3
 
@@ -60,6 +61,7 @@ const AccountWishlist = () => {
     const deleteCustomerProductListItem = useShopperCustomersMutation(
         'deleteCustomerProductListItem'
     )
+
     const {data: customer} = useCurrentCustomer()
 
     const handleSecondaryAction = async (itemId, promise) => {
@@ -75,6 +77,23 @@ const AccountWishlist = () => {
         }
     }
 
+    const handleUnavailableProducts = async (unavailableProductIds) => {
+        if (!unavailableProductIds.length) return
+        await Promise.all(
+            unavailableProductIds.map(async (id) => {
+                const item = wishListItems?.find((item) => {
+                    return item.productId.toString() === id.toString()
+                })
+                const parameters = {
+                    customerId: customer.customerId,
+                    itemId: item?.id,
+                    listId: wishListData?.id
+                }
+                await deleteCustomerProductListItem.mutateAsync({parameters})
+            })
+        )
+    }
+
     const handleItemQuantityChanged = async (quantity, item) => {
         let isValidChange = false
         setSelectedItem(item.productId)
@@ -197,6 +216,11 @@ const AccountWishlist = () => {
                         }
                     />
                 ))}
+
+            <UnavailableProductConfirmationModal
+                productIds={productIds}
+                handleUnavailableProducts={handleUnavailableProducts}
+            />
         </Stack>
     )
 }

package/app/pages/cart/index.jsx

@@ -26,7 +26,7 @@ import CartTitle from '@salesforce/retail-react-app/app/pages/cart/partials/cart
 import ConfirmationModal from '@salesforce/retail-react-app/app/components/confirmation-modal'
 import EmptyCart from '@salesforce/retail-react-app/app/pages/cart/partials/empty-cart'
 import OrderSummary from '@salesforce/retail-react-app/app/components/order-summary'
-import ProductItem from '@salesforce/retail-react-app/app/components/product-item/index'
+import ProductItem from '@salesforce/retail-react-app/app/components/product-item'
 import ProductViewModal from '@salesforce/retail-react-app/app/components/product-view-modal'
 import RecommendedProducts from '@salesforce/retail-react-app/app/components/recommended-products'
 
@@ -56,13 +56,13 @@ import {
     useShopperCustomersMutation
 } from '@salesforce/commerce-sdk-react'
 import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
+import UnavailableProductConfirmationModal from '@salesforce/retail-react-app/app/components/unavailable-product-confirmation-modal'
 
 const DEBOUNCE_WAIT = 750
 const Cart = () => {
     const {data: basket, isLoading} = useCurrentBasket()
-
     const productIds = basket?.productItems?.map(({productId}) => productId).join(',') ?? ''
-    const {data: products} = useProducts(
+    const {data: products, isLoading: isProductsLoading} = useProducts(
         {
             parameters: {
                 ids: productIds,
@@ -72,7 +72,6 @@ const Cart = () => {
         {
             enabled: Boolean(productIds),
             select: (result) => {
-                // Convert array into key/value object with key is the product id
                 return result?.data?.reduce((result, item) => {
                     const key = item.id
                     result[key] = item
@@ -81,9 +80,9 @@ const Cart = () => {
             }
         }
     )
+
     const {data: customer} = useCurrentCustomer()
     const {customerId, isRegistered} = customer
-
     /*****************Basket Mutation************************/
     const updateItemInBasketMutation = useShopperBasketsMutation('updateItemInBasket')
     const removeItemFromBasketMutation = useShopperBasketsMutation('removeItemFromBasket')
@@ -298,6 +297,18 @@ const Cart = () => {
             setSelectedItem(undefined)
         }
     }
+
+    const handleUnavailableProducts = async (unavailableProductIds) => {
+        const productItems = basket?.productItems?.filter((item) =>
+            unavailableProductIds?.includes(item.productId)
+        )
+
+        await Promise.all(
+            productItems.map(async (item) => {
+                await handleRemoveItem(item)
+            })
+        )
+    }
     /***************************** Update Cart **************************/
 
     /***************************** Update quantity **************************/
@@ -448,6 +459,9 @@ const Cart = () => {
                                                     ...productItem,
                                                     ...(products &&
                                                         products[productItem.productId]),
+                                                    isProductUnavailable: !isProductsLoading
+                                                        ? !products?.[productItem.productId]
+                                                        : undefined,
                                                     price: productItem.price,
                                                     quantity: localQuantity[productItem.itemId]
                                                         ? localQuantity[productItem.itemId]
@@ -536,7 +550,6 @@ const Cart = () => {
             >
                 <CartCta />
             </Box>
-
             <ConfirmationModal
                 {...REMOVE_CART_ITEM_CONFIRMATION_DIALOG_CONFIG}
                 onPrimaryAction={() => {
@@ -545,6 +558,11 @@ const Cart = () => {
                 onAlternateAction={() => {}}
                 {...modalProps}
             />
+
+            <UnavailableProductConfirmationModal
+                productIds={productIds.split(',')}
+                handleUnavailableProducts={handleUnavailableProducts}
+            />
         </Box>
     )
 }

package/app/pages/checkout/index.jsx

@@ -29,7 +29,18 @@ import OrderSummary from '@salesforce/retail-react-app/app/components/order-summ
 import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
 import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
 import CheckoutSkeleton from '@salesforce/retail-react-app/app/pages/checkout/partials/checkout-skeleton'
-import {useUsid, useShopperOrdersMutation} from '@salesforce/commerce-sdk-react'
+import {
+    useUsid,
+    useShopperOrdersMutation,
+    useShopperBasketsMutation
+} from '@salesforce/commerce-sdk-react'
+import UnavailableProductConfirmationModal from '@salesforce/retail-react-app/app/components/unavailable-product-confirmation-modal'
+import {
+    API_ERROR_MESSAGE,
+    TOAST_MESSAGE_REMOVED_ITEM_FROM_CART
+} from '@salesforce/retail-react-app/app/constants'
+import {useToast} from '@salesforce/retail-react-app/app/hooks/use-toast'
+import LoadingSpinner from '@salesforce/retail-react-app/app/components/loading-spinner'
 
 const Checkout = () => {
     const {formatMessage} = useIntl()
@@ -51,11 +62,6 @@ const Checkout = () => {
         setIsLoading(true)
         try {
             const order = await createOrder({
-                // We send the SLAS usid via this header. This is required by ECOM to map
-                // Einstein events sent via the API with the finishOrder event fired by ECOM
-                // when an Order transitions from Created to New status.
-                // Without this, various order conversion metrics will not appear on reports and dashboards
-                headers: {_sfdc_customer_id: usid},
                 body: {basketId: basket.basketId}
             })
             navigate(`/checkout/confirmation/${order.orderNo}`)
@@ -163,6 +169,43 @@ const Checkout = () => {
 const CheckoutContainer = () => {
     const {data: customer} = useCurrentCustomer()
     const {data: basket} = useCurrentBasket()
+    const {formatMessage} = useIntl()
+    const productIds = basket?.productItems?.map(({productId}) => productId) ?? []
+    const removeItemFromBasketMutation = useShopperBasketsMutation('removeItemFromBasket')
+    const toast = useToast()
+    const [isDeletingUnavailableItem, setIsDeletingUnavailableItem] = useState(false)
+
+    const handleRemoveItem = async (product) => {
+        await removeItemFromBasketMutation.mutateAsync(
+            {
+                parameters: {basketId: basket.basketId, itemId: product.itemId}
+            },
+            {
+                onSuccess: () => {
+                    toast({
+                        title: formatMessage(TOAST_MESSAGE_REMOVED_ITEM_FROM_CART, {quantity: 1}),
+                        status: 'success'
+                    })
+                },
+                onError: () => {
+                    toast({
+                        title: formatMessage(API_ERROR_MESSAGE),
+                        status: 'error'
+                    })
+                }
+            }
+        )
+    }
+    const handleUnavailableProducts = async (unavailableProductIds) => {
+        setIsDeletingUnavailableItem(true)
+        const productItems = basket?.productItems?.filter((item) =>
+            unavailableProductIds?.includes(item.productId)
+        )
+        for (let item of productItems) {
+            await handleRemoveItem(item)
+        }
+        setIsDeletingUnavailableItem(false)
+    }
 
     if (!customer || !customer.customerId || !basket || !basket.basketId) {
         return <CheckoutSkeleton />
@@ -170,7 +213,13 @@ const CheckoutContainer = () => {
 
     return (
         <CheckoutProvider>
+            {isDeletingUnavailableItem && <LoadingSpinner wrapperStyles={{height: '100vh'}} />}
+
             <Checkout />
+            <UnavailableProductConfirmationModal
+                productIds={productIds}
+                handleUnavailableProducts={handleUnavailableProducts}
+            />
         </CheckoutProvider>
     )
 }