From 9304957fa2240d80b62ba80deac2ec808789c6bd Mon Sep 17 00:00:00 2001
From: Jainam Tushar Sheth <j.sheth@salesforce.com>
Date: Tue, 16 Jul 2024 12:17:38 -0400
Subject: [PATCH 1/8] Added descriptive labels for edit actions on checkout

---
 .../app/components/toggle-card/index.jsx      | 13 ++++-
 .../pages/checkout/partials/contact-info.jsx  |  5 +-
 .../app/pages/checkout/partials/payment.jsx   |  6 ++
 .../checkout/partials/shipping-address.jsx    |  8 ++-
 .../checkout/partials/shipping-options.jsx    |  6 ++
 .../static/translations/compiled/en-GB.json   | 24 ++++++++
 .../static/translations/compiled/en-US.json   | 24 ++++++++
 .../static/translations/compiled/en-XA.json   | 56 +++++++++++++++++++
 .../translations/en-GB.json                   | 12 ++++
 .../translations/en-US.json                   | 12 ++++
 10 files changed, 163 insertions(+), 3 deletions(-)

diff --git a/packages/template-retail-react-app/app/components/toggle-card/index.jsx b/packages/template-retail-react-app/app/components/toggle-card/index.jsx
index 7972653f40..dc963d536b 100644
--- a/packages/template-retail-react-app/app/components/toggle-card/index.jsx
+++ b/packages/template-retail-react-app/app/components/toggle-card/index.jsx
@@ -34,6 +34,12 @@ export const ToggleCard = ({
     children,
     ...props
 }) => {
+    let editButtonAriaLabel = 'Edit'
+    if (typeof editLabel === 'string') {
+        editButtonAriaLabel = editLabel
+    } else if (typeof editLabel === 'object' && editLabel?.type?.displayName === 'MemoizedFormattedMessage') {
+        editButtonAriaLabel = editLabel?.props.defaultMessage[0].value
+    }
     return (
         <ToggleCardContext.Provider value={{editing, disabled}}>
             <Box
@@ -55,7 +61,12 @@ export const ToggleCard = ({
                             {title}
                         </Heading>
                         {!editing && !disabled && onEdit && (
-                            <Button variant="link" size="sm" onClick={onEdit}>
+                            <Button
+                                variant="link"
+                                size="sm"
+                                onClick={onEdit}
+                                aria-label={editButtonAriaLabel}
+                            >
                                 {editLabel || (
                                     <FormattedMessage
                                         defaultMessage="Edit"
diff --git a/packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx b/packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx
index 01c464dd96..b548456b3e 100644
--- a/packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx
+++ b/packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx
@@ -128,7 +128,10 @@ const ContactInfo = () => {
             editLabel={
                 customer.isRegistered ? (
                     <FormattedMessage defaultMessage="Sign Out" id="contact_info.action.sign_out" />
-                ) : undefined
+                ) : <FormattedMessage
+                defaultMessage="Edit Contact Info"
+                id="toggle_card.action.editContactInfo"
+            />
             }
         >
             <ToggleCardEdit>
diff --git a/packages/template-retail-react-app/app/pages/checkout/partials/payment.jsx b/packages/template-retail-react-app/app/pages/checkout/partials/payment.jsx
index 973950561f..cae486db3c 100644
--- a/packages/template-retail-react-app/app/pages/checkout/partials/payment.jsx
+++ b/packages/template-retail-react-app/app/pages/checkout/partials/payment.jsx
@@ -152,6 +152,12 @@ const Payment = () => {
             }
             disabled={appliedPayment == null}
             onEdit={() => goToStep(STEPS.PAYMENT)}
+            editLabel={
+                <FormattedMessage
+                    defaultMessage="Edit Payment Info"
+                    id="toggle_card.action.editPaymentInfo"
+                />
+            }
         >
             <ToggleCardEdit>
                 <Box mt={-2} mb={4}>
diff --git a/packages/template-retail-react-app/app/pages/checkout/partials/shipping-address.jsx b/packages/template-retail-react-app/app/pages/checkout/partials/shipping-address.jsx
index 1b1269a568..983d869d2f 100644
--- a/packages/template-retail-react-app/app/pages/checkout/partials/shipping-address.jsx
+++ b/packages/template-retail-react-app/app/pages/checkout/partials/shipping-address.jsx
@@ -6,7 +6,7 @@
  */
 import React, {useState} from 'react'
 import {nanoid} from 'nanoid'
-import {defineMessage, useIntl} from 'react-intl'
+import {FormattedMessage, defineMessage, useIntl} from 'react-intl'
 import {useCheckout} from '@salesforce/retail-react-app/app/pages/checkout/util/checkout-context'
 import {
     ToggleCard,
@@ -114,6 +114,12 @@ export default function ShippingAddress() {
             isLoading={isLoading}
             disabled={step === STEPS.CONTACT_INFO && !selectedShippingAddress}
             onEdit={() => goToStep(STEPS.SHIPPING_ADDRESS)}
+            editLabel={
+                <FormattedMessage
+                    defaultMessage="Edit Shipping Address"
+                    id="toggle_card.action.editShippingAddress"
+                />
+            }
         >
             <ToggleCardEdit>
                 <ShippingAddressSelection
diff --git a/packages/template-retail-react-app/app/pages/checkout/partials/shipping-options.jsx b/packages/template-retail-react-app/app/pages/checkout/partials/shipping-options.jsx
index 76e32631dc..20de79d784 100644
--- a/packages/template-retail-react-app/app/pages/checkout/partials/shipping-options.jsx
+++ b/packages/template-retail-react-app/app/pages/checkout/partials/shipping-options.jsx
@@ -105,6 +105,12 @@ export default function ShippingOptions() {
             isLoading={form.formState.isSubmitting}
             disabled={selectedShippingMethod == null || !selectedShippingAddress}
             onEdit={() => goToStep(STEPS.SHIPPING_OPTIONS)}
+            editLabel={
+                <FormattedMessage
+                    defaultMessage="Edit Shipping Options"
+                    id="toggle_card.action.editShippingOptions"
+                />
+            }
         >
             <ToggleCardEdit>
                 <form
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/en-GB.json b/packages/template-retail-react-app/app/static/translations/compiled/en-GB.json
index efffd291aa..81c20356fb 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/en-GB.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/en-GB.json
@@ -2987,6 +2987,30 @@
       "value": "Edit"
     }
   ],
+  "toggle_card.action.editContactInfo": [
+    {
+      "type": 0,
+      "value": "Edit Contact Info"
+    }
+  ],
+  "toggle_card.action.editPaymentInfo": [
+    {
+      "type": 0,
+      "value": "Edit Payment Info"
+    }
+  ],
+  "toggle_card.action.editShippingAddress": [
+    {
+      "type": 0,
+      "value": "Edit Shipping Address"
+    }
+  ],
+  "toggle_card.action.editShippingOptions": [
+    {
+      "type": 0,
+      "value": "Edit Shipping Options"
+    }
+  ],
   "update_password_fields.button.forgot_password": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/en-US.json b/packages/template-retail-react-app/app/static/translations/compiled/en-US.json
index efffd291aa..81c20356fb 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/en-US.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/en-US.json
@@ -2987,6 +2987,30 @@
       "value": "Edit"
     }
   ],
+  "toggle_card.action.editContactInfo": [
+    {
+      "type": 0,
+      "value": "Edit Contact Info"
+    }
+  ],
+  "toggle_card.action.editPaymentInfo": [
+    {
+      "type": 0,
+      "value": "Edit Payment Info"
+    }
+  ],
+  "toggle_card.action.editShippingAddress": [
+    {
+      "type": 0,
+      "value": "Edit Shipping Address"
+    }
+  ],
+  "toggle_card.action.editShippingOptions": [
+    {
+      "type": 0,
+      "value": "Edit Shipping Options"
+    }
+  ],
   "update_password_fields.button.forgot_password": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/en-XA.json b/packages/template-retail-react-app/app/static/translations/compiled/en-XA.json
index 7c51feca86..58a6bb69c2 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/en-XA.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/en-XA.json
@@ -6363,6 +6363,62 @@
       "value": "]"
     }
   ],
+  "toggle_card.action.editContactInfo": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ḗḓīŧ Ƈǿǿƞŧȧȧƈŧ Īƞƒǿǿ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
+  "toggle_card.action.editPaymentInfo": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ḗḓīŧ Ƥȧȧẏḿḗḗƞŧ Īƞƒǿǿ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
+  "toggle_card.action.editShippingAddress": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ḗḓīŧ Şħīƥƥīƞɠ Ȧḓḓřḗḗşş"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
+  "toggle_card.action.editShippingOptions": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ḗḓīŧ Şħīƥƥīƞɠ Ǿƥŧīǿǿƞş"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
   "update_password_fields.button.forgot_password": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/translations/en-GB.json b/packages/template-retail-react-app/translations/en-GB.json
index 3de0a1631b..1dee7b0c3d 100644
--- a/packages/template-retail-react-app/translations/en-GB.json
+++ b/packages/template-retail-react-app/translations/en-GB.json
@@ -1280,6 +1280,18 @@
   "toggle_card.action.edit": {
     "defaultMessage": "Edit"
   },
+  "toggle_card.action.editContactInfo": {
+    "defaultMessage": "Edit Contact Info"
+  },
+  "toggle_card.action.editPaymentInfo": {
+    "defaultMessage": "Edit Payment Info"
+  },
+  "toggle_card.action.editShippingAddress": {
+    "defaultMessage": "Edit Shipping Address"
+  },
+  "toggle_card.action.editShippingOptions": {
+    "defaultMessage": "Edit Shipping Options"
+  },
   "update_password_fields.button.forgot_password": {
     "defaultMessage": "Forgot Password?"
   },
diff --git a/packages/template-retail-react-app/translations/en-US.json b/packages/template-retail-react-app/translations/en-US.json
index 3de0a1631b..1dee7b0c3d 100644
--- a/packages/template-retail-react-app/translations/en-US.json
+++ b/packages/template-retail-react-app/translations/en-US.json
@@ -1280,6 +1280,18 @@
   "toggle_card.action.edit": {
     "defaultMessage": "Edit"
   },
+  "toggle_card.action.editContactInfo": {
+    "defaultMessage": "Edit Contact Info"
+  },
+  "toggle_card.action.editPaymentInfo": {
+    "defaultMessage": "Edit Payment Info"
+  },
+  "toggle_card.action.editShippingAddress": {
+    "defaultMessage": "Edit Shipping Address"
+  },
+  "toggle_card.action.editShippingOptions": {
+    "defaultMessage": "Edit Shipping Options"
+  },
   "update_password_fields.button.forgot_password": {
     "defaultMessage": "Forgot Password?"
   },

From c5152df286fe60e86e8294de21eae147d014507a Mon Sep 17 00:00:00 2001
From: Jainam Tushar Sheth <j.sheth@salesforce.com>
Date: Tue, 16 Jul 2024 12:33:15 -0400
Subject: [PATCH 2/8] Run prettier

---
 .../app/components/toggle-card/index.jsx                     | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/template-retail-react-app/app/components/toggle-card/index.jsx b/packages/template-retail-react-app/app/components/toggle-card/index.jsx
index dc963d536b..508a0630bc 100644
--- a/packages/template-retail-react-app/app/components/toggle-card/index.jsx
+++ b/packages/template-retail-react-app/app/components/toggle-card/index.jsx
@@ -37,7 +37,10 @@ export const ToggleCard = ({
     let editButtonAriaLabel = 'Edit'
     if (typeof editLabel === 'string') {
         editButtonAriaLabel = editLabel
-    } else if (typeof editLabel === 'object' && editLabel?.type?.displayName === 'MemoizedFormattedMessage') {
+    } else if (
+        typeof editLabel === 'object' &&
+        editLabel?.type?.displayName === 'MemoizedFormattedMessage'
+    ) {
         editButtonAriaLabel = editLabel?.props.defaultMessage[0].value
     }
     return (

From 594323f00181c6cc5fb5a6121814573751395843 Mon Sep 17 00:00:00 2001
From: Jainam Tushar Sheth <j.sheth@salesforce.com>
Date: Tue, 16 Jul 2024 12:34:03 -0400
Subject: [PATCH 3/8] Format file

---
 .../app/pages/checkout/partials/contact-info.jsx       | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx b/packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx
index b548456b3e..dac7c78603 100644
--- a/packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx
+++ b/packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx
@@ -128,10 +128,12 @@ const ContactInfo = () => {
             editLabel={
                 customer.isRegistered ? (
                     <FormattedMessage defaultMessage="Sign Out" id="contact_info.action.sign_out" />
-                ) : <FormattedMessage
-                defaultMessage="Edit Contact Info"
-                id="toggle_card.action.editContactInfo"
-            />
+                ) : (
+                    <FormattedMessage
+                        defaultMessage="Edit Contact Info"
+                        id="toggle_card.action.editContactInfo"
+                    />
+                )
             }
         >
             <ToggleCardEdit>

From a6c05b74a02cfeba0dca4ec3dbbcfa665a22c756 Mon Sep 17 00:00:00 2001
From: Jainam Tushar Sheth <j.sheth@salesforce.com>
Date: Wed, 17 Jul 2024 12:53:44 -0400
Subject: [PATCH 4/8] Replace FormattedMessage component to format message
 string

---
 .../app/components/toggle-card/index.jsx        | 11 +----------
 .../pages/checkout/partials/contact-info.jsx    | 17 +++++++++--------
 .../app/pages/checkout/partials/payment.jsx     | 10 ++++------
 .../checkout/partials/shipping-address.jsx      | 10 ++++------
 .../checkout/partials/shipping-options.jsx      | 10 ++++------
 5 files changed, 22 insertions(+), 36 deletions(-)

diff --git a/packages/template-retail-react-app/app/components/toggle-card/index.jsx b/packages/template-retail-react-app/app/components/toggle-card/index.jsx
index 508a0630bc..60e6d62677 100644
--- a/packages/template-retail-react-app/app/components/toggle-card/index.jsx
+++ b/packages/template-retail-react-app/app/components/toggle-card/index.jsx
@@ -34,15 +34,6 @@ export const ToggleCard = ({
     children,
     ...props
 }) => {
-    let editButtonAriaLabel = 'Edit'
-    if (typeof editLabel === 'string') {
-        editButtonAriaLabel = editLabel
-    } else if (
-        typeof editLabel === 'object' &&
-        editLabel?.type?.displayName === 'MemoizedFormattedMessage'
-    ) {
-        editButtonAriaLabel = editLabel?.props.defaultMessage[0].value
-    }
     return (
         <ToggleCardContext.Provider value={{editing, disabled}}>
             <Box
@@ -68,7 +59,7 @@ export const ToggleCard = ({
                                 variant="link"
                                 size="sm"
                                 onClick={onEdit}
-                                aria-label={editButtonAriaLabel}
+                                aria-label={editLabel}
                             >
                                 {editLabel || (
                                     <FormattedMessage
diff --git a/packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx b/packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx
index dac7c78603..b10d3288a6 100644
--- a/packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx
+++ b/packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx
@@ -126,14 +126,15 @@ const ContactInfo = () => {
                 }
             }}
             editLabel={
-                customer.isRegistered ? (
-                    <FormattedMessage defaultMessage="Sign Out" id="contact_info.action.sign_out" />
-                ) : (
-                    <FormattedMessage
-                        defaultMessage="Edit Contact Info"
-                        id="toggle_card.action.editContactInfo"
-                    />
-                )
+                customer.isRegistered
+                    ? formatMessage({
+                          defaultMessage: 'Sign Out',
+                          id: 'contact_info.action.sign_out'
+                      })
+                    : formatMessage({
+                          defaultMessage: 'Edit Contact Info',
+                          id: 'toggle_card.action.editContactInfo'
+                      })
             }
         >
             <ToggleCardEdit>
diff --git a/packages/template-retail-react-app/app/pages/checkout/partials/payment.jsx b/packages/template-retail-react-app/app/pages/checkout/partials/payment.jsx
index cae486db3c..19be0900f9 100644
--- a/packages/template-retail-react-app/app/pages/checkout/partials/payment.jsx
+++ b/packages/template-retail-react-app/app/pages/checkout/partials/payment.jsx
@@ -152,12 +152,10 @@ const Payment = () => {
             }
             disabled={appliedPayment == null}
             onEdit={() => goToStep(STEPS.PAYMENT)}
-            editLabel={
-                <FormattedMessage
-                    defaultMessage="Edit Payment Info"
-                    id="toggle_card.action.editPaymentInfo"
-                />
-            }
+            editLabel={formatMessage({
+                defaultMessage: 'Edit Payment Info',
+                id: 'toggle_card.action.editPaymentInfo'
+            })}
         >
             <ToggleCardEdit>
                 <Box mt={-2} mb={4}>
diff --git a/packages/template-retail-react-app/app/pages/checkout/partials/shipping-address.jsx b/packages/template-retail-react-app/app/pages/checkout/partials/shipping-address.jsx
index 983d869d2f..4bb5125870 100644
--- a/packages/template-retail-react-app/app/pages/checkout/partials/shipping-address.jsx
+++ b/packages/template-retail-react-app/app/pages/checkout/partials/shipping-address.jsx
@@ -114,12 +114,10 @@ export default function ShippingAddress() {
             isLoading={isLoading}
             disabled={step === STEPS.CONTACT_INFO && !selectedShippingAddress}
             onEdit={() => goToStep(STEPS.SHIPPING_ADDRESS)}
-            editLabel={
-                <FormattedMessage
-                    defaultMessage="Edit Shipping Address"
-                    id="toggle_card.action.editShippingAddress"
-                />
-            }
+            editLabel={formatMessage({
+                defaultMessage: 'Edit Shipping Address',
+                id: 'toggle_card.action.editShippingAddress'
+            })}
         >
             <ToggleCardEdit>
                 <ShippingAddressSelection
diff --git a/packages/template-retail-react-app/app/pages/checkout/partials/shipping-options.jsx b/packages/template-retail-react-app/app/pages/checkout/partials/shipping-options.jsx
index 75035db79f..d508ffd0e7 100644
--- a/packages/template-retail-react-app/app/pages/checkout/partials/shipping-options.jsx
+++ b/packages/template-retail-react-app/app/pages/checkout/partials/shipping-options.jsx
@@ -127,12 +127,10 @@ export default function ShippingOptions() {
             isLoading={form.formState.isSubmitting}
             disabled={selectedShippingMethod == null || !selectedShippingAddress}
             onEdit={() => goToStep(STEPS.SHIPPING_OPTIONS)}
-            editLabel={
-                <FormattedMessage
-                    defaultMessage="Edit Shipping Options"
-                    id="toggle_card.action.editShippingOptions"
-                />
-            }
+            editLabel={formatMessage({
+                defaultMessage: 'Edit Shipping Options',
+                id: 'toggle_card.action.editShippingOptions'
+            })}
         >
             <ToggleCardEdit>
                 <form

From fee6907e10bf4c8c4b16e96db039703db2e50c8e Mon Sep 17 00:00:00 2001
From: Jainam Tushar Sheth <j.sheth@salesforce.com>
Date: Wed, 17 Jul 2024 14:11:49 -0400
Subject: [PATCH 5/8] Remove unused imports

---
 .../app/pages/checkout/partials/shipping-address.jsx            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/template-retail-react-app/app/pages/checkout/partials/shipping-address.jsx b/packages/template-retail-react-app/app/pages/checkout/partials/shipping-address.jsx
index 4bb5125870..f6853b7c73 100644
--- a/packages/template-retail-react-app/app/pages/checkout/partials/shipping-address.jsx
+++ b/packages/template-retail-react-app/app/pages/checkout/partials/shipping-address.jsx
@@ -6,7 +6,7 @@
  */
 import React, {useState} from 'react'
 import {nanoid} from 'nanoid'
-import {FormattedMessage, defineMessage, useIntl} from 'react-intl'
+import {defineMessage, useIntl} from 'react-intl'
 import {useCheckout} from '@salesforce/retail-react-app/app/pages/checkout/util/checkout-context'
 import {
     ToggleCard,

From 2d214b28649bd6f863213f7391db878639f31deb Mon Sep 17 00:00:00 2001
From: Jainam Tushar Sheth <j.sheth@salesforce.com>
Date: Wed, 17 Jul 2024 14:11:57 -0400
Subject: [PATCH 6/8] Add test for toggle card

---
 .../app/components/toggle-card/index.test.jsx | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 packages/template-retail-react-app/app/components/toggle-card/index.test.jsx

diff --git a/packages/template-retail-react-app/app/components/toggle-card/index.test.jsx b/packages/template-retail-react-app/app/components/toggle-card/index.test.jsx
new file mode 100644
index 0000000000..1df46913f0
--- /dev/null
+++ b/packages/template-retail-react-app/app/components/toggle-card/index.test.jsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import {screen, fireEvent} from '@testing-library/react'
+import {renderWithProviders} from '../../utils/test-utils'
+import { ToggleCard } from './index'
+
+test('ToggleCard renders edit button with correct aria-label and calls onEdit on click', () => {
+    const mockOnEdit = jest.fn()
+    const editLabel = 'Edit Card'
+
+    renderWithProviders(
+        <ToggleCard
+            title="Card Title"
+            editLabel={editLabel}
+            editing={false}
+            disabled={false}
+            onEdit={mockOnEdit}
+        />
+    )
+
+    // Find the edit button
+    const editButton = screen.getByRole('button', {name: editLabel})
+
+    // Assert aria-label
+    expect(editButton).toHaveAttribute('aria-label', editLabel)
+
+    // Click the edit button
+    fireEvent.click(editButton)
+
+    // Assert onEdit function is called
+    expect(mockOnEdit).toHaveBeenCalledTimes(1)
+})

From 86780f0ccf1b92cfdd9f091054fb44a2dc161a5d Mon Sep 17 00:00:00 2001
From: Jainam Tushar Sheth <j.sheth@salesforce.com>
Date: Thu, 18 Jul 2024 09:19:00 -0400
Subject: [PATCH 7/8] format file

---
 .../app/components/toggle-card/index.test.jsx                   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/template-retail-react-app/app/components/toggle-card/index.test.jsx b/packages/template-retail-react-app/app/components/toggle-card/index.test.jsx
index 1df46913f0..cbe7d18316 100644
--- a/packages/template-retail-react-app/app/components/toggle-card/index.test.jsx
+++ b/packages/template-retail-react-app/app/components/toggle-card/index.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import {screen, fireEvent} from '@testing-library/react'
 import {renderWithProviders} from '../../utils/test-utils'
-import { ToggleCard } from './index'
+import {ToggleCard} from './index'
 
 test('ToggleCard renders edit button with correct aria-label and calls onEdit on click', () => {
     const mockOnEdit = jest.fn()

From d1861efd1c818eef66492c2a9898d1ad4a318685 Mon Sep 17 00:00:00 2001
From: Jainam Tushar Sheth <j.sheth@salesforce.com>
Date: Thu, 18 Jul 2024 09:36:25 -0400
Subject: [PATCH 8/8] Fix linting errors

---
 .../app/components/toggle-card/index.test.jsx          | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/template-retail-react-app/app/components/toggle-card/index.test.jsx b/packages/template-retail-react-app/app/components/toggle-card/index.test.jsx
index cbe7d18316..20d900048f 100644
--- a/packages/template-retail-react-app/app/components/toggle-card/index.test.jsx
+++ b/packages/template-retail-react-app/app/components/toggle-card/index.test.jsx
@@ -1,7 +1,13 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * 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 from 'react'
 import {screen, fireEvent} from '@testing-library/react'
-import {renderWithProviders} from '../../utils/test-utils'
-import {ToggleCard} from './index'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import {ToggleCard} from '@salesforce/retail-react-app/app/components/toggle-card'
 
 test('ToggleCard renders edit button with correct aria-label and calls onEdit on click', () => {
     const mockOnEdit = jest.fn()