From ec707a8e5356e62a3b68dc0d5403c228765f2e37 Mon Sep 17 00:00:00 2001
From: Alex Vuong <alex.vuong@salesforce.com>
Date: Fri, 15 Jul 2022 17:07:21 -0700
Subject: [PATCH 1/4] fix checkout header logo navigation

---
 .../app/components/_app/index.jsx             |  2 +-
 .../checkout/partials/checkout-header.jsx     | 30 +++++++++++++------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/template-retail-react-app/app/components/_app/index.jsx b/packages/template-retail-react-app/app/components/_app/index.jsx
index 24d14d7282..14ccd686c2 100644
--- a/packages/template-retail-react-app/app/components/_app/index.jsx
+++ b/packages/template-retail-react-app/app/components/_app/index.jsx
@@ -230,7 +230,7 @@ const App = (props) => {
                                         </HideOnMobile>
                                     </Header>
                                 ) : (
-                                    <CheckoutHeader />
+                                    <CheckoutHeader onLogoClick={onLogoClick} />
                                 )}
                             </Box>
 
diff --git a/packages/template-retail-react-app/app/pages/checkout/partials/checkout-header.jsx b/packages/template-retail-react-app/app/pages/checkout/partials/checkout-header.jsx
index 9b8f9e79f4..ed624ee348 100644
--- a/packages/template-retail-react-app/app/pages/checkout/partials/checkout-header.jsx
+++ b/packages/template-retail-react-app/app/pages/checkout/partials/checkout-header.jsx
@@ -5,25 +5,33 @@
  * 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 {FormattedMessage} from 'react-intl'
-import {Badge, Box, Button, Flex, Center} from '@chakra-ui/react'
+import PropTypes from 'prop-types'
+import {FormattedMessage, useIntl} from 'react-intl'
+import {Badge, Box, Button, Flex, Center, IconButton, useMultiStyleConfig} from '@chakra-ui/react'
 import useBasket from '../../../commerce-api/hooks/useBasket'
 import Link from '../../../components/link'
 import {BasketIcon, BrandLogo} from '../../../components/icons'
+import {noop} from '../../../utils/utils'
 
-const CheckoutHeader = () => {
+const CheckoutHeader = ({onLogoClick = noop()}) => {
     const basket = useBasket()
+    const intl = useIntl()
+    const styles = useMultiStyleConfig('Header')
 
     return (
         <Box px={[4, 4, 8]} bg="white" borderBottom="1px" borderColor="gray.100">
             <Box maxWidth="container.xxxl" marginLeft="auto" marginRight="auto">
                 <Flex h={{base: '52px', md: '80px'}} align="center" justify="space-between">
-                    <Link href="/" title="Back to homepage">
-                        <BrandLogo
-                            width={{base: '35px', md: '45px'}}
-                            height={{base: '24px', md: '32px'}}
-                        />
-                    </Link>
+                    <IconButton
+                        aria-label={intl.formatMessage({
+                            id: 'header.button.assistive_msg.logo',
+                            defaultMessage: 'Logo'
+                        })}
+                        icon={<BrandLogo {...styles.logo} />}
+                        {...styles.icons}
+                        variant="unstyled"
+                        onClick={onLogoClick}
+                    />
 
                     <Button
                         as={Link}
@@ -49,4 +57,8 @@ const CheckoutHeader = () => {
     )
 }
 
+CheckoutHeader.propTypes = {
+    onLogoClick: PropTypes.func
+}
+
 export default CheckoutHeader

From e8b2cd21ae927d7a73d2808ef50111a6777b5f61 Mon Sep 17 00:00:00 2001
From: Alex Vuong <alex.vuong@salesforce.com>
Date: Mon, 18 Jul 2022 15:19:27 -0700
Subject: [PATCH 2/4] fix test

---
 .../app/pages/checkout/partials/checkout-header.test.js         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/template-retail-react-app/app/pages/checkout/partials/checkout-header.test.js b/packages/template-retail-react-app/app/pages/checkout/partials/checkout-header.test.js
index 3544a41d0e..87138f9c52 100644
--- a/packages/template-retail-react-app/app/pages/checkout/partials/checkout-header.test.js
+++ b/packages/template-retail-react-app/app/pages/checkout/partials/checkout-header.test.js
@@ -12,5 +12,5 @@ import {renderWithProviders} from '../../../utils/test-utils'
 
 test('renders component', () => {
     renderWithProviders(<CheckoutHeader />)
-    expect(screen.getByTitle(/back to homepage/i)).toBeInTheDocument()
+    expect(screen.getByLabelText(/Logo/i)).toBeInTheDocument()
 })

From 33773367a6efb86e97934f1849455064614e278f Mon Sep 17 00:00:00 2001
From: Alex Vuong <alex.vuong@salesforce.com>
Date: Thu, 4 Aug 2022 16:53:58 -0700
Subject: [PATCH 3/4] fix Link component to work with HOME_REF

---
 .../app/components/link/index.jsx             |  2 +-
 .../checkout/partials/checkout-header.jsx     | 32 ++++++-------------
 .../checkout/partials/checkout-header.test.js |  2 +-
 3 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/packages/template-retail-react-app/app/components/link/index.jsx b/packages/template-retail-react-app/app/components/link/index.jsx
index 74b61b14c2..e5bd8d7da5 100644
--- a/packages/template-retail-react-app/app/components/link/index.jsx
+++ b/packages/template-retail-react-app/app/components/link/index.jsx
@@ -19,7 +19,7 @@ const Link = React.forwardRef(({href, to, useNavLink = false, ...props}, ref) =>
             as={useNavLink ? NavSPALink : SPALink}
             {...(useNavLink && {exact: true})}
             {...props}
-            to={_href === '/' ? '/' : updatedHref}
+            to={updatedHref}
             ref={ref}
         />
     )
diff --git a/packages/template-retail-react-app/app/pages/checkout/partials/checkout-header.jsx b/packages/template-retail-react-app/app/pages/checkout/partials/checkout-header.jsx
index ed624ee348..c2e4994f29 100644
--- a/packages/template-retail-react-app/app/pages/checkout/partials/checkout-header.jsx
+++ b/packages/template-retail-react-app/app/pages/checkout/partials/checkout-header.jsx
@@ -5,33 +5,25 @@
  * 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 PropTypes from 'prop-types'
-import {FormattedMessage, useIntl} from 'react-intl'
-import {Badge, Box, Button, Flex, Center, IconButton, useMultiStyleConfig} from '@chakra-ui/react'
+import {FormattedMessage} from 'react-intl'
+import {Badge, Box, Button, Flex, Center} from '@chakra-ui/react'
 import useBasket from '../../../commerce-api/hooks/useBasket'
 import Link from '../../../components/link'
 import {BasketIcon, BrandLogo} from '../../../components/icons'
-import {noop} from '../../../utils/utils'
+import {HOME_HREF} from '../../../constants'
 
-const CheckoutHeader = ({onLogoClick = noop()}) => {
+const CheckoutHeader = () => {
     const basket = useBasket()
-    const intl = useIntl()
-    const styles = useMultiStyleConfig('Header')
-
     return (
         <Box px={[4, 4, 8]} bg="white" borderBottom="1px" borderColor="gray.100">
             <Box maxWidth="container.xxxl" marginLeft="auto" marginRight="auto">
                 <Flex h={{base: '52px', md: '80px'}} align="center" justify="space-between">
-                    <IconButton
-                        aria-label={intl.formatMessage({
-                            id: 'header.button.assistive_msg.logo',
-                            defaultMessage: 'Logo'
-                        })}
-                        icon={<BrandLogo {...styles.logo} />}
-                        {...styles.icons}
-                        variant="unstyled"
-                        onClick={onLogoClick}
-                    />
+                    <Link href={HOME_HREF} title="Back to homepage">
+                        <BrandLogo
+                            width={{base: '35px', md: '45px'}}
+                            height={{base: '24px', md: '32px'}}
+                        />
+                    </Link>
 
                     <Button
                         as={Link}
@@ -57,8 +49,4 @@ const CheckoutHeader = ({onLogoClick = noop()}) => {
     )
 }
 
-CheckoutHeader.propTypes = {
-    onLogoClick: PropTypes.func
-}
-
 export default CheckoutHeader
diff --git a/packages/template-retail-react-app/app/pages/checkout/partials/checkout-header.test.js b/packages/template-retail-react-app/app/pages/checkout/partials/checkout-header.test.js
index 87138f9c52..3544a41d0e 100644
--- a/packages/template-retail-react-app/app/pages/checkout/partials/checkout-header.test.js
+++ b/packages/template-retail-react-app/app/pages/checkout/partials/checkout-header.test.js
@@ -12,5 +12,5 @@ import {renderWithProviders} from '../../../utils/test-utils'
 
 test('renders component', () => {
     renderWithProviders(<CheckoutHeader />)
-    expect(screen.getByLabelText(/Logo/i)).toBeInTheDocument()
+    expect(screen.getByTitle(/back to homepage/i)).toBeInTheDocument()
 })

From 27cb43264eb5d562f683245398e90242c4535721 Mon Sep 17 00:00:00 2001
From: Alex Vuong <alex.vuong@salesforce.com>
Date: Thu, 4 Aug 2022 16:57:02 -0700
Subject: [PATCH 4/4] remove prop from checkout header component

---
 .../template-retail-react-app/app/components/_app/index.jsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/template-retail-react-app/app/components/_app/index.jsx b/packages/template-retail-react-app/app/components/_app/index.jsx
index f767f0fe6c..2fdf569943 100644
--- a/packages/template-retail-react-app/app/components/_app/index.jsx
+++ b/packages/template-retail-react-app/app/components/_app/index.jsx
@@ -222,7 +222,7 @@ const App = (props) => {
                                         </HideOnMobile>
                                     </Header>
                                 ) : (
-                                    <CheckoutHeader onLogoClick={onLogoClick} />
+                                    <CheckoutHeader />
                                 )}
                             </Box>