Merge pull request #2138 from graphcommerce-org/fix/GCOM-1164

Wrap the logo in a div on the homepage to prevent redirection. (GCOM-1164)

.changeset/calm-bees-care.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/next-ui': patch
+---
+
+Wrap the logo in a div on the homepage to prevent redirection.

packages/next-ui/LayoutParts/Logo.tsx

@@ -5,6 +5,7 @@ import {
   SxProps,
   Theme,
   unstable_composeClasses as composeClasses,
+  Box,
 } from '@mui/material'
 import { useRouter } from 'next/router'
 import { forwardRef } from 'react'
@@ -22,25 +23,21 @@ const getLogoUtilityClass = (slot: string) => generateUtilityClass(name, slot)
 const useUtilityClasses = ({ classes }: LogoClassProps) =>
   composeClasses({ logo: ['logo'], parent: ['parent'] }, getLogoUtilityClass, classes)
 
-/** Creating styled components */
-const LogoContainer = styled(NextLink, {
-  name,
-  slot: 'parent',
-  overridesResolver: (_props, styles) => styles.parent,
-})(({ theme }) => ({
+const commonLogoStyles: SxProps<Theme> = {
   height: '100%',
   width: 'max-content',
   display: 'flex',
   alignItems: 'center',
   margin: '0 auto',
   justifyContent: 'center',
   pointerEvents: 'all',
-  [theme.breakpoints.up('md')]: {
-    display: 'flex',
-    margin: 'unset',
-    justifyContent: 'left',
-  },
-}))
+}
+
+const LogoContainer = styled(NextLink, {
+  name,
+  slot: 'parent',
+  overridesResolver: (_props, styles) => styles.parent,
+})()
 
 export type LogoProps = {
   href?: `/${string}`
@@ -51,7 +48,6 @@ export type LogoProps = {
 export const Logo = forwardRef<HTMLAnchorElement, LogoProps>((props, ref) => {
   const { href = '/', image, sx } = props
   const router = useRouter()
-
   const classes = useUtilityClasses(props)
 
   const img = (
@@ -63,13 +59,17 @@ export const Logo = forwardRef<HTMLAnchorElement, LogoProps>((props, ref) => {
     />
   )
 
-  return router.asPath.split('?')[0] === '/' ? (
-    <LogoContainer ref={ref} sx={sx} className={classes.parent}>
-      {img}
-    </LogoContainer>
-  ) : (
-    <LogoContainer href={href} ref={ref} sx={sx} className={classes.parent}>
+  const shouldRedirect = router.asPath.split('?')[0] !== href
+
+  return (
+    <Box
+      component={shouldRedirect ? LogoContainer : 'div'}
+      href={shouldRedirect ? href : undefined}
+      ref={ref}
+      sx={[...(Array.isArray(sx) ? sx : [sx]), commonLogoStyles]}
+      className={classes.parent}
+    >
       {img}
-    </LogoContainer>
+    </Box>
   )
 })