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

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## v2.4.0-dev (Jan 22, 2024)
+
+### Bug Fixes
+
+- 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)
+
 ## v2.3.1 (Jan 23, 2024)
 
 ### Bug Fixes

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/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/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,7 +16,7 @@ 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'
 

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'
 

package/app/pages/checkout/partials/payment.jsx

@@ -109,9 +109,9 @@ const Payment = () => {
         // Using destructuring to remove properties from the object...
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const {addressId, creationDate, lastModified, preferred, ...address} = billingAddress
-        return updateBillingAddressForBasket({
+        return await updateBillingAddressForBasket({
             body: address,
-            parameters: {basketId: basket.basketId, shipmentId: 'me'}
+            parameters: {basketId: basket.basketId}
         })
     }
     const onPaymentRemoval = async () => {

package/app/pages/checkout/partials/shipping-options.jsx

@@ -45,7 +45,7 @@ export default function ShippingOptions() {
             }
         },
         {
-            enabled: Boolean(basket?.basketId) && step === STEPS.ShippingOptions
+            enabled: Boolean(basket?.basketId) && step === STEPS.SHIPPING_OPTIONS
         }
     )
 

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

@@ -99,7 +99,7 @@ const ProductDetail = () => {
     } = useCategory({
         parameters: {
             id: product?.primaryCategoryId,
-            level: 1
+            levels: 1
         }
     })
 

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

@@ -137,6 +137,9 @@ const ProductList = (props) => {
     )
 
     /**************** Query Actions ****************/
+    // _refine is an invalid param for useProductSearch, we don't want to pass it to API call
+    const {_refine, ...restOfParams} = searchParams
+
     const {
         isLoading,
         isRefetching,
@@ -144,7 +147,7 @@ const ProductList = (props) => {
     } = useProductSearch(
         {
             parameters: {
-                ...searchParams,
+                ...restOfParams,
                 refine: searchParams._refine
             }
         },

package/app/utils/url.js

@@ -147,8 +147,6 @@ export const getPathWithLocale = (shortCode, buildUrl, opts = {}) => {
     // remove ending any &
     search = search.replace(/&$/, '')
 
-    const defaultSite = getDefaultSite()
-
     // Remove query parameters
     const {disallowParams = []} = opts
 
@@ -161,7 +159,6 @@ export const getPathWithLocale = (shortCode, buildUrl, opts = {}) => {
     }
 
     const site = getSiteByReference(siteRef)
-
     const locale = getLocaleByReference(site, shortCode)
 
     // rebuild the url with new locale,
@@ -169,7 +166,7 @@ export const getPathWithLocale = (shortCode, buildUrl, opts = {}) => {
         `${pathname}${Array.from(queryString).length !== 0 ? `?${queryString}` : ''}`,
         // By default, as for home page, when the values of site and locale belongs to the default site,
         // they will be not shown in the url just
-        defaultSite.alias || defaultSite.id,
+        site.alias || site.id,
         locale?.alias || locale?.id
     )
     return newUrl

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/retail-react-app",
-  "version": "2.3.1",
+  "version": "2.4.0-dev",
   "license": "See license in LICENSE",
   "author": "cc-pwa-kit@salesforce.com",
   "ccExtensibility": {
@@ -45,10 +45,10 @@
     "@lhci/cli": "^0.11.0",
     "@loadable/component": "^5.15.3",
     "@peculiar/webcrypto": "^1.4.2",
-    "@salesforce/commerce-sdk-react": "1.3.0",
-    "@salesforce/pwa-kit-dev": "3.4.0",
-    "@salesforce/pwa-kit-react-sdk": "3.4.0",
-    "@salesforce/pwa-kit-runtime": "3.4.0",
+    "@salesforce/commerce-sdk-react": "1.4.0-gpt-nightly-20240315030539",
+    "@salesforce/pwa-kit-dev": "3.5.0-dev",
+    "@salesforce/pwa-kit-react-sdk": "3.5.0-dev",
+    "@salesforce/pwa-kit-runtime": "3.5.0-dev",
     "@tanstack/react-query": "^4.28.0",
     "@tanstack/react-query-devtools": "^4.29.1",
     "@testing-library/dom": "^9.0.1",
@@ -97,8 +97,8 @@
     },
     {
       "path": "build/vendor.js",
-      "maxSize": "320 kB"
+      "maxSize": "370 kB"
     }
   ],
-  "gitHead": "41c7e7d585508f5b0f259e7d80dce8aff5df24f9"
+  "gitHead": "61dd7239a60def4e983fbab25194ffb1e25279fe"
 }