@salesforce/retail-react-app 2.4.0-dev → 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/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/wishlist/index.jsx

@@ -22,6 +22,7 @@ import WishlistSecondaryButtonGroup from '@salesforce/retail-react-app/app/pages
 
 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

@@ -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>
     )
 }

package/app/pages/checkout/index.test.js

@@ -65,7 +65,19 @@ beforeEach(() => {
     global.server.use(
         // mock product details
         rest.get('*/products', (req, res, ctx) => {
-            return res(ctx.json({data: [{id: '701642811398M'}]}))
+            return res(
+                ctx.json({
+                    data: [
+                        {
+                            id: '701643070725M',
+                            currency: 'GBP',
+                            name: 'Long Sleeve Crew Neck',
+                            pricePerUnit: 19.18,
+                            price: 19.18
+                        }
+                    ]
+                })
+            )
         }),
         // mock the available shipping methods
         rest.get('*/shipments/me/shipping-methods', (req, res, ctx) => {
@@ -162,11 +174,13 @@ beforeEach(() => {
 
         // mock place order
         rest.post('*/orders', (req, res, ctx) => {
-            currentBasket = {
+            const response = {
+                ...currentBasket,
                 ...scapiOrderResponse,
-                customerInfo: {...scapiOrderResponse.customerInfo, email: 'customer@test.com'}
+                customerInfo: {...scapiOrderResponse.customerInfo, email: 'customer@test.com'},
+                status: 'created'
             }
-            return res(ctx.json(currentBasket))
+            return res(ctx.json(response))
         }),
 
         rest.get('*/baskets', (req, res, ctx) => {
@@ -272,11 +286,13 @@ test('Can proceed through checkout steps as guest', async () => {
 
         // mock place order
         rest.post('*/orders', (req, res, ctx) => {
-            currentBasket = {
+            const response = {
+                ...currentBasket,
                 ...scapiOrderResponse,
-                customerInfo: {...scapiOrderResponse.customerInfo, email: 'test@test.com'}
+                customerInfo: {...scapiOrderResponse.customerInfo, email: 'customer@test.com'},
+                status: 'created'
             }
-            return res(ctx.json(currentBasket))
+            return res(ctx.json(response))
         }),
 
         rest.get('*/baskets', (req, res, ctx) => {

package/app/pages/product-list/index.jsx

@@ -148,7 +148,7 @@ const ProductList = (props) => {
         {
             parameters: {
                 ...restOfParams,
-                refine: searchParams._refine
+                refine: _refine
             }
         },
         {

package/app/ssr.js

@@ -5,6 +5,15 @@
  * 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
+ * ssr.js template files in pwa-kit-create-app.
+ *
+ * In the pwa-kit-create-app, the templates are found under:
+ * - assets/bootstrap/js/overrides/app/ssr.js.hbs
+ * - assets/templates/@salesforce/retail-react-app/app/ssr.js.hbs
+ */
+
 'use strict'
 
 import path from 'path'
@@ -29,7 +38,14 @@ const options = {
     // The protocol on which the development Express app listens.
     // Note that http://localhost is treated as a secure context for development,
     // except by Safari.
-    protocol: 'http'
+    protocol: 'http',
+
+    // Option for whether to set up a special endpoint for handling
+    // private SLAS clients
+    // Set this to false if using a SLAS public client
+    // When setting this to true, make sure to also set the PWA_KIT_SLAS_CLIENT_SECRET
+    // environment variable as this endpoint will return HTTP 501 if it is not set
+    useSLASPrivateClient: false
 }
 
 const runtime = getRuntime()
@@ -67,6 +83,7 @@ const {handler} = runtime.createHandler(options, (app) => {
         res.set('Cache-Control', `max-age=31536000`)
         res.send()
     })
+
     app.get('/robots.txt', runtime.serveStaticFile('static/robots.txt'))
     app.get('/favicon.ico', runtime.serveStaticFile('static/ico/favicon.ico'))
 

package/app/static/translations/compiled/en-GB.json

@@ -879,12 +879,24 @@
       "value": "No, keep item"
     }
   ],
+  "confirmation_modal.remove_cart_item.action.remove": [
+    {
+      "type": 0,
+      "value": "Remove"
+    }
+  ],
   "confirmation_modal.remove_cart_item.action.yes": [
     {
       "type": 0,
       "value": "Yes, remove item"
     }
   ],
+  "confirmation_modal.remove_cart_item.message.need_to_remove_due_to_unavailability": [
+    {
+      "type": 0,
+      "value": "Some items are no longer available online and will be removed from your cart."
+    }
+  ],
   "confirmation_modal.remove_cart_item.message.sure_to_remove": [
     {
       "type": 0,
@@ -897,6 +909,12 @@
       "value": "Confirm Remove Item"
     }
   ],
+  "confirmation_modal.remove_cart_item.title.items_unavailable": [
+    {
+      "type": 0,
+      "value": "Items Unavailable"
+    }
+  ],
   "confirmation_modal.remove_wishlist_item.action.no": [
     {
       "type": 0,
@@ -1637,6 +1655,12 @@
       "value": "Sale"
     }
   ],
+  "item_image.label.unavailable": [
+    {
+      "type": 0,
+      "value": "Unavailable"
+    }
+  ],
   "item_price.label.starting_at": [
     {
       "type": 0,