@W-12627191: add error icon to error message (#1839)

* add icon to error message
SalesforceCommerceCloud · Jun 19, 2024 · 6bedeb8 · 6bedeb8
1 parent 85fd4f7
commit 6bedeb8
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 16 deletions.
diff --git a/packages/template-retail-react-app/app/components/field/index.jsx b/packages/template-retail-react-app/app/components/field/index.jsx
@@ -18,7 +18,11 @@ import {
     Select,
     Checkbox
 } from '@salesforce/retail-react-app/app/components/shared/ui'
-import {VisibilityIcon, VisibilityOffIcon} from '@salesforce/retail-react-app/app/components/icons'
+import {
+    VisibilityIcon,
+    VisibilityOffIcon,
+    AlertIcon
+} from '@salesforce/retail-react-app/app/components/icons'
 import {useIntl} from 'react-intl'
 
 const Field = ({
@@ -133,7 +137,10 @@ const Field = ({
                         </InputGroup>
 
                         {error && type !== 'hidden' && (
-                            <FormErrorMessage color="red.600">{error.message}</FormErrorMessage>
+                            <FormErrorMessage color="red.600">
+                                <AlertIcon aria-hidden="true" mr={2} />
+                                {error.message}
+                            </FormErrorMessage>
                         )}
 
                         {helpText}

diff --git a/packages/template-retail-react-app/app/components/promo-code/index.jsx b/packages/template-retail-react-app/app/components/promo-code/index.jsx
@@ -53,14 +53,18 @@ export const usePromoCode = () => {
                 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'
-                })
-            })
+            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'
+                    })
+                },
+                {shouldFocus: true}
+            )
         }
     }
 

diff --git a/packages/template-retail-react-app/app/pages/checkout/index.jsx b/packages/template-retail-react-app/app/pages/checkout/index.jsx
@@ -29,11 +29,7 @@ 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,
-    useShopperBasketsMutation
-} from '@salesforce/commerce-sdk-react'
+import {useShopperOrdersMutation, useShopperBasketsMutation} from '@salesforce/commerce-sdk-react'
 import UnavailableProductConfirmationModal from '@salesforce/retail-react-app/app/components/unavailable-product-confirmation-modal'
 import {
     API_ERROR_MESSAGE,
@@ -45,7 +41,6 @@ import LoadingSpinner from '@salesforce/retail-react-app/app/components/loading-
 const Checkout = () => {
     const {formatMessage} = useIntl()
     const navigate = useNavigation()
-    const {usid} = useUsid()
     const {step} = useCheckout()
     const [error, setError] = useState()
     const {data: basket} = useCurrentBasket()