@graphcommerce/magento-customer 3.6.44 → 4.1.0

package/components/AccountAddress/index.tsx

@@ -1,62 +1,58 @@
+import { extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
-import { Link, makeStyles, Theme } from '@material-ui/core'
+import { Box, Link, SxProps, Theme } from '@mui/material'
 import PageLink from 'next/link'
-import React from 'react'
 import AddressMultiLine from '../AddressMultiLine'
 import DeleteCustomerAddressForm from '../DeleteCustomerAddressForm'
 import UpdateDefaultAddressForm from '../UpdateDefaultAddressForm'
 import { AccountAddressFragment } from './AccountAddress.gql'
 
-export type AccountAddressProps = AccountAddressFragment
+export type AccountAddressProps = AccountAddressFragment & { sx?: SxProps<Theme> }
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      paddingTop: theme.spacings.md,
-      paddingBottom: theme.spacings.md,
-      ...theme.typography.body2,
-    },
-    address: {
-      '& > span': {
-        display: 'block',
-      },
-    },
-    switches: {
-      paddingTop: theme.spacings.xxs,
-    },
-    actions: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      flexDirection: 'column',
-      textAlign: 'right',
-    },
-  }),
-  { name: 'AccountAddress' },
-)
+const name = 'AccountAddress'
+const parts = ['root', 'address', 'switches', 'actions'] as const
+const { classes } = extendableComponent(name, parts)
 
 export default function AccountAddress(props: AccountAddressProps) {
-  const { id } = props
-  const classes = useStyles()
+  const { id, sx = [], ...addressProps } = props
 
   return (
-    <div className={classes.root}>
-      <div className={classes.address}>
-        <AddressMultiLine {...props} />
+    <Box
+      className={classes.root}
+      sx={[
+        (theme) => ({
+          display: 'flex',
+          justifyContent: 'space-between',
+          paddingTop: theme.spacings.md,
+          paddingBottom: theme.spacings.md,
+          typography: 'body2',
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <Box className={classes.address} sx={{ '& > span': { display: 'block' } }}>
+        <AddressMultiLine id={id} {...addressProps} />
 
-        <div className={classes.switches}>
-          <UpdateDefaultAddressForm {...props} />
-        </div>
-      </div>
-      <div className={classes.actions}>
+        <Box className={classes.switches} sx={(theme) => ({ paddingTop: theme.spacings.xxs })}>
+          <UpdateDefaultAddressForm id={id} {...addressProps} />
+        </Box>
+      </Box>
+      <Box
+        className={classes.actions}
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          flexDirection: 'column',
+          textAlign: 'right',
+        }}
+      >
         <PageLink href={`/account/addresses/edit?addressId=${id}`} passHref>
-          <Link color='primary'>
+          <Link color='primary' underline='hover'>
             <Trans>Edit</Trans>
           </Link>
         </PageLink>
         <DeleteCustomerAddressForm addressId={id ?? undefined} />
-      </div>
-    </div>
+      </Box>
+    </Box>
   )
 }

package/components/AccountAddresses/index.tsx

@@ -1,59 +1,51 @@
 import {
-  Button,
   FullPageMessage,
   SectionContainer,
-  MessageSnackbar,
   iconHome,
-  SvgImageSimple,
+  SvgIcon,
+  extendableComponent,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
-import { makeStyles, Theme } from '@material-ui/core'
-import { Skeleton } from '@material-ui/lab'
+import { Skeleton, Button, Box, Theme, SxProps } from '@mui/material'
 import Link from 'next/link'
-import { useRouter } from 'next/router'
-import React from 'react'
 import AccountAddress from '../AccountAddress'
 import { AccountAddressesFragment } from './AccountAddresses.gql'
 
-export type AccountAddressesProps = AccountAddressesFragment & { loading: boolean }
+export type AccountAddressesProps = AccountAddressesFragment & {
+  loading: boolean
+  sx?: SxProps<Theme>
+}
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      '& > div': {
-        borderBottom: `1px solid ${theme.palette.divider}`,
-      },
-    },
-    sectionContainer: {
-      position: 'absolute',
-    },
-    button: {
-      display: 'block',
-      maxWidth: 'max-content',
-      margin: `${theme.spacings.md} auto`,
-      padding: `${theme.spacings.xxs} ${theme.spacings.md}`,
-    },
-    link: {
-      textDecoration: 'none',
-    },
-  }),
-  { name: 'AccountAddresses' },
-)
+const name = 'AccountAddresses' as const
+const parts = ['root', 'addresses', 'button', 'link'] as const
+const { classes } = extendableComponent(name, parts)
 
 export default function AccountAddresses(props: AccountAddressesProps) {
-  const { addresses, loading } = props
-  const classes = useStyles()
-  const router = useRouter()
+  const { addresses, loading, sx = [] } = props
 
   if (loading) {
     return (
-      <SectionContainer labelLeft='Shipping addresses'>
-        <div className={classes.root}>
+      <SectionContainer labelLeft='Shipping addresses' sx={sx} className={classes.root}>
+        <Box
+          className={classes.addresses}
+          sx={(theme) => ({ '& > div': { borderBottom: `1px solid ${theme.palette.divider}` } })}
+        >
           <Skeleton height={128} />
           <Skeleton height={128} />
           <Skeleton height={128} />
-        </div>
-        <Button className={classes.button} variant='contained' color='primary' disabled>
+        </Box>
+        <Button
+          className={classes.button}
+          variant='contained'
+          color='primary'
+          disabled
+          size='large'
+          sx={(theme) => ({
+            display: 'block',
+            maxWidth: 'max-content',
+            margin: `${theme.spacings.md} auto`,
+          })}
+        >
           <Trans>Add new address</Trans>
         </Button>
       </SectionContainer>
@@ -65,7 +57,7 @@ export default function AccountAddresses(props: AccountAddressesProps) {
       {((addresses && addresses.length === 0) || !addresses) && (
         <FullPageMessage
           title={<Trans>You have no addresses saved yet</Trans>}
-          icon={<SvgImageSimple src={iconHome} size='xxl' />}
+          icon={<SvgIcon src={iconHome} size='xxl' />}
           button={
             <Link href='/account/addresses/add' passHref>
               <Button size='large' variant='contained' color='primary'>
@@ -78,14 +70,27 @@ export default function AccountAddresses(props: AccountAddressesProps) {
 
       {addresses && addresses.length >= 1 && (
         <SectionContainer labelLeft='Shipping addresses'>
-          <div className={classes.root}>
+          <Box
+            className={classes.addresses}
+            sx={(theme) => ({ '& > div': { borderBottom: `1px solid ${theme.palette.divider}` } })}
+          >
             {addresses?.map((address) => (
               <AccountAddress key={address?.id} {...address} />
             ))}
-          </div>
+          </Box>
 
           <Link href='/account/addresses/add' passHref>
-            <Button className={classes.button} variant='contained' color='primary'>
+            <Button
+              className={classes.button}
+              variant='contained'
+              color='primary'
+              size='large'
+              sx={(theme) => ({
+                display: 'block',
+                maxWidth: 'max-content',
+                margin: `${theme.spacings.md} auto`,
+              })}
+            >
               <Trans>Add new address</Trans>
             </Button>
           </Link>

package/components/AddressFields/index.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from '@apollo/client'
+import { useQuery } from '@graphcommerce/graphql'
 import { CountryRegionsDocument } from '@graphcommerce/magento-store'
 import { FormRow, InputCheckmark } from '@graphcommerce/next-ui'
 import {
@@ -7,7 +7,7 @@ import {
   UseFormReturn,
 } from '@graphcommerce/react-hook-form'
 import { t, Trans } from '@lingui/macro'
-import { TextField } from '@material-ui/core'
+import { TextField } from '@mui/material'
 import React, { useMemo } from 'react'
 
 type AddressFieldValues = {

package/components/AddressMultiLine/index.tsx

@@ -1,6 +1,6 @@
 import { useFindCountry } from '@graphcommerce/magento-store'
-import { UseStyles } from '@graphcommerce/next-ui'
-import { makeStyles, Typography } from '@material-ui/core'
+import { extendableComponent } from '@graphcommerce/next-ui'
+import { SxProps, Theme, Typography } from '@mui/material'
 import { CustomerAddressFragment } from '../CreateCustomerAddressForm/CustomerAddress.gql'
 
 // exports.getEuMembers = function()
@@ -12,9 +12,11 @@ import { CustomerAddressFragment } from '../CreateCustomerAddressForm/CustomerAd
 // 	return exports.getEuMembers().indexOf(code.toUpperCase()) != -1;
 // };
 
-const useStyles = makeStyles({ title: {} }, { name: 'AddressMultiLine' })
+type AddressMultiLineProps = CustomerAddressFragment & { sx?: SxProps<Theme> }
 
-type AddressMultiLineProps = CustomerAddressFragment & UseStyles<typeof useStyles>
+const name = 'AddressMultiLine'
+const parts = ['root', 'title'] as const
+const { classes } = extendableComponent(name, parts)
 
 export default function AddressMultiLine(props: AddressMultiLineProps) {
   const {
@@ -29,14 +31,14 @@ export default function AddressMultiLine(props: AddressMultiLineProps) {
     city,
     postcode,
     country_code,
+    sx = [],
   } = props
   const countryName = useFindCountry(country_code)?.full_name_locale ?? country_code
 
   const regionName = typeof region === 'string' ? region : region?.region
-  const classes = useStyles(props)
 
   return (
-    <Typography variant='body1' component='div'>
+    <Typography variant='body1' component='div' className={classes.root} sx={sx}>
       <div className={classes.title}>
         <div>{company}</div>
         <div>

package/components/ApolloCustomerError/ApolloCustomerErrorAlert.tsx

@@ -1,6 +1,6 @@
 import { ApolloErrorAlert, ApolloErrorAlertProps } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
-import { Link } from '@material-ui/core'
+import { Link } from '@mui/material'
 import NextLink from 'next/link'
 import React from 'react'
 import { useExtractCustomerErrors } from '../../hooks/useExtractCustomerErrors'
@@ -12,7 +12,7 @@ export default function ApolloCustomerErrorAlert(props: MagentoErrorAlertProps)
 
   const action = unauthorized && (
     <NextLink href='/account/signin' passHref>
-      <Link>
+      <Link underline='hover'>
         <Trans>Create Account</Trans> / <Trans>Sign In</Trans>
       </Link>
     </NextLink>

package/components/ApolloCustomerError/ApolloCustomerErrorFullPage.tsx

@@ -1,14 +1,12 @@
 import {
   ApolloErrorFullPage,
   ApolloErrorAlertProps,
-  Button,
   iconPerson,
-  SvgImageSimple,
+  SvgIcon,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
+import { Button } from '@mui/material'
 import PageLink from 'next/link'
-import React from 'react'
-
 import { useExtractCustomerErrors } from '../../hooks/useExtractCustomerErrors'
 
 type ApolloCustomerErrorFullPageProps = {
@@ -23,7 +21,7 @@ export default function ApolloCustomerErrorFullPage(props: ApolloCustomerErrorFu
   return (
     <ApolloErrorFullPage
       error={error}
-      icon={<SvgImageSimple src={iconPerson} size='xxl' />}
+      icon={<SvgIcon src={iconPerson} size='xxl' />}
       button={
         unauthorized ? (
           <PageLink href={signInHref} passHref>

package/components/ChangeNameForm/index.tsx

@@ -1,7 +1,6 @@
-import { Button, Form, FormActions, FormDivider, MessageSnackbar } from '@graphcommerce/next-ui'
+import { Form, FormActions, FormDivider, MessageSnackbar, Button } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/macro'
-import React from 'react'
 import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import NameFields from '../NameFields'
 import { UpdateCustomerNameDocument } from './UpdateCustomerName.gql'

package/components/ChangePasswordForm/ChangePasswordForm.tsx

@@ -1,16 +1,14 @@
 import {
-  Button,
   Form,
   FormActions,
   FormRow,
   MessageSnackbar,
   FormDivider,
+  Button,
 } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans, t } from '@lingui/macro'
-import { TextField } from '@material-ui/core'
-import React from 'react'
-
+import { TextField } from '@mui/material'
 import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import {
   ChangePasswordDocument,

package/components/CreateCustomerAddressForm/index.tsx

@@ -1,18 +1,17 @@
-import { useQuery } from '@apollo/client'
+import { useQuery } from '@graphcommerce/graphql'
 import { CountryRegionsDocument } from '@graphcommerce/magento-store'
 import {
-  Button,
   Form,
   FormActions,
   FormDivider,
   FormRow,
   InputCheckmark,
+  Button,
 } from '@graphcommerce/next-ui'
 import { phonePattern, useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans, t } from '@lingui/macro'
-import { TextField } from '@material-ui/core'
+import { TextField } from '@mui/material'
 import { useRouter } from 'next/router'
-import React from 'react'
 import AddressFields from '../AddressFields'
 import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import NameFields from '../NameFields'

package/components/CustomerFab/index.tsx

@@ -1,27 +1,30 @@
-import { useQuery } from '@apollo/client'
-import { iconPerson, StyledBadge, SvgImageSimple, UseStyles } from '@graphcommerce/next-ui'
+import { useQuery } from '@graphcommerce/graphql'
+import {
+  iconPerson,
+  DesktopHeaderBadge,
+  SvgIcon,
+  extendableComponent,
+} from '@graphcommerce/next-ui'
 import { t } from '@lingui/macro'
-import { Fab, FabProps as FabPropsType, makeStyles, NoSsr, Theme } from '@material-ui/core'
+import { Fab, FabProps as FabPropsType, NoSsr, SxProps, Theme } from '@mui/material'
 import PageLink from 'next/link'
 import React from 'react'
 import { CustomerTokenDocument, CustomerTokenQuery } from '../../hooks'
 
-const useStyles = makeStyles((theme: Theme) => ({
-  colorError: {
-    backgroundColor: theme.palette.grey['500'],
-  },
-}))
-
 type CustomerFabContentProps = CustomerTokenQuery & {
   icon?: React.ReactNode
   authHref: string
   guestHref: string
   FabProps?: Omit<FabPropsType, 'children'>
-} & UseStyles<typeof useStyles>
+  sx?: SxProps<Theme>
+}
+
+const name = 'CustomerFab'
+const parts = ['root'] as const
+const { classes } = extendableComponent(name, parts)
 
 function CustomerFabContent(props: CustomerFabContentProps) {
-  const { customerToken, icon, guestHref, authHref, FabProps } = props
-  const classes = useStyles(props)
+  const { customerToken, icon, guestHref, authHref, FabProps, sx } = props
   const requireAuth = Boolean(!customerToken || !customerToken.valid)
 
   return (
@@ -31,16 +34,18 @@ function CustomerFabContent(props: CustomerFabContentProps) {
         data-test-id='customer-fab'
         aria-label={t`Account`}
         size='large'
+        className={classes.root}
         {...FabProps}
+        sx={sx}
       >
-        <StyledBadge
+        <DesktopHeaderBadge
           badgeContent={customerToken?.token ? 1 : 0}
           color={customerToken?.valid ? 'primary' : 'error'}
           variant='dot'
-          classes={{ colorError: classes.colorError }}
+          overlap='circular'
         >
-          {icon ?? <SvgImageSimple src={iconPerson} size='large' />}
-        </StyledBadge>
+          {icon ?? <SvgIcon src={iconPerson} size='large' />}
+        </DesktopHeaderBadge>
       </Fab>
     </PageLink>
   )

package/components/CustomerMenuFabItem/index.tsx

@@ -1,54 +1,38 @@
-import { useQuery } from '@apollo/client'
+import { useQuery } from '@graphcommerce/graphql'
 import {
   MenuFabSecondaryItem,
-  StyledBadge,
-  UseStyles,
+  DesktopHeaderBadge,
   iconPerson,
-  SvgImageSimple,
+  SvgIcon,
 } from '@graphcommerce/next-ui'
-import { makeStyles, NoSsr, Theme } from '@material-ui/core'
+import { NoSsr, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { CustomerTokenDocument, CustomerTokenQuery } from '../../hooks'
 
-const useStyles = makeStyles((theme: Theme) => ({
-  colorError: {
-    backgroundColor: theme.palette.grey['500'],
-  },
-  badge: {
-    top: 3,
-    right: 3,
-    padding: 3,
-    [theme.breakpoints.up('md')]: {
-      top: 5,
-      right: 7,
-      padding: 4,
-    },
-  },
-}))
-
 type CustomerMenuFabItemProps = CustomerTokenQuery & {
   icon?: React.ReactNode
   children: React.ReactNode
   authHref: string
   guestHref: string
-} & UseStyles<typeof useStyles>
+  sx?: SxProps<Theme>
+}
 
 function CustomerMenuFabItemContent(props: CustomerMenuFabItemProps) {
-  const { customerToken, icon, children, guestHref, authHref } = props
-  const classes = useStyles(props)
+  const { customerToken, icon, children, guestHref, authHref, sx = [] } = props
   const requireAuth = Boolean(!customerToken || !customerToken.valid)
 
   return (
     <MenuFabSecondaryItem
+      sx={sx}
       icon={
-        <StyledBadge
+        <DesktopHeaderBadge
           badgeContent={customerToken?.token ? 1 : 0}
           color={customerToken?.valid ? 'primary' : 'error'}
           variant='dot'
-          classes={{ colorError: classes.colorError, badge: classes.badge }}
+          overlap='circular'
         >
-          {icon ?? <SvgImageSimple src={iconPerson} />}
-        </StyledBadge>
+          {icon ?? <SvgIcon src={iconPerson} size='medium' />}
+        </DesktopHeaderBadge>
       }
       href={requireAuth ? guestHref : authHref}
     >

package/components/DeleteCustomerAddressForm/index.tsx

@@ -1,7 +1,7 @@
 import { ApolloErrorSnackbar } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/macro'
-import { Button } from '@material-ui/core'
+import { Button } from '@mui/material'
 import React from 'react'
 import { DeleteCustomerAddressFormDocument } from './DeleteCustomerAddressForm.gql'
 

package/components/EditAddressForm/index.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from '@apollo/client'
+import { useQuery } from '@graphcommerce/graphql'
 import { CountryRegionsDocument } from '@graphcommerce/magento-store'
 import {
   Button,
@@ -10,30 +10,19 @@ import {
 } from '@graphcommerce/next-ui'
 import { phonePattern, useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { t, Trans } from '@lingui/macro'
-import { makeStyles, TextField } from '@material-ui/core'
+import { SxProps, TextField, Theme } from '@mui/material'
 import { useRouter } from 'next/router'
-import React from 'react'
 import { AccountAddressFragment } from '../AccountAddress/AccountAddress.gql'
 import AddressFields from '../AddressFields'
 import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import NameFields from '../NameFields'
 import { UpdateCustomerAddressDocument } from './UpdateCustomerAddress.gql'
 
-const useStyles = makeStyles(
-  () => ({
-    editActions: {
-      paddingBottom: 0,
-    },
-  }),
-  { name: 'EditAddressForm' },
-)
-
-type EditAddressFormProps = { address?: AccountAddressFragment }
+type EditAddressFormProps = { address?: AccountAddressFragment; sx?: SxProps<Theme> }
 
 export default function EditAddressForm(props: EditAddressFormProps) {
   const countries = useQuery(CountryRegionsDocument).data?.countries
-  const { address } = props
-  const classes = useStyles()
+  const { address, sx } = props
   const router = useRouter()
 
   const form = useFormGqlMutation(
@@ -85,7 +74,7 @@ export default function EditAddressForm(props: EditAddressFormProps) {
 
   return (
     <>
-      <Form onSubmit={submitHandler} noValidate>
+      <Form onSubmit={submitHandler} noValidate sx={sx}>
         <NameFields form={form} prefix />
         <AddressFields form={form} />
 
@@ -108,7 +97,7 @@ export default function EditAddressForm(props: EditAddressFormProps) {
 
         <FormDivider />
 
-        <FormActions classes={{ root: classes.editActions }}>
+        <FormActions sx={{ paddingBottom: 0 }}>
           <Button
             type='submit'
             variant='contained'

package/components/ForgotPasswordForm/ForgotPasswordForm.tsx

@@ -1,9 +1,7 @@
 import { Button, Form, FormActions, FormRow } from '@graphcommerce/next-ui'
 import { emailPattern, useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { t, Trans } from '@lingui/macro'
-import { makeStyles, TextField, Theme } from '@material-ui/core'
-import { Alert } from '@material-ui/lab'
-import React from 'react'
+import { TextField, Alert, SxProps, Theme } from '@mui/material'
 import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import {
   ForgotPasswordDocument,
@@ -11,18 +9,8 @@ import {
   ForgotPasswordMutationVariables,
 } from './ForgotPassword.gql'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    alert: {
-      marginTop: theme.spacings.md,
-      marginBottom: theme.spacings.sm,
-    },
-  }),
-  { name: 'ForgotPasswordForm' },
-)
-
-export default function ForgotPasswordForm() {
-  const classes = useStyles()
+export default function ForgotPasswordForm(props: { sx?: SxProps<Theme> }) {
+  const { sx = [] } = props
   const form = useFormGqlMutation<ForgotPasswordMutation, ForgotPasswordMutationVariables>(
     ForgotPasswordDocument,
   )
@@ -31,14 +19,21 @@ export default function ForgotPasswordForm() {
 
   if (formState.isSubmitSuccessful && data) {
     return (
-      <Alert severity='success' variant='standard' className={classes.alert}>
+      <Alert
+        severity='success'
+        variant='standard'
+        sx={(theme) => ({
+          marginTop: theme.spacings.md,
+          marginBottom: theme.spacings.sm,
+        })}
+      >
         <Trans>We've send a password reset link to your email address!</Trans>
       </Alert>
     )
   }
 
   return (
-    <Form onSubmit={submitHandler} noValidate>
+    <Form onSubmit={submitHandler} noValidate sx={sx}>
       <FormRow>
         <TextField
           variant='outlined'

package/components/NameFields/index.tsx

@@ -1,7 +1,7 @@
 import { FormRow, InputCheckmark } from '@graphcommerce/next-ui'
 import { assertFormGqlOperation, Controller, UseFormReturn } from '@graphcommerce/react-hook-form'
 import { t, Trans } from '@lingui/macro'
-import { MenuItem, TextField } from '@material-ui/core'
+import { MenuItem, TextField } from '@mui/material'
 import React from 'react'
 
 type NameFieldValues = {

package/components/ResetPasswordForm/index.tsx

@@ -1,7 +1,7 @@
 import { Button, Form, FormActions, FormRow } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/macro'
-import { TextField } from '@material-ui/core'
+import { TextField } from '@mui/material'
 import { useRouter } from 'next/router'
 import React from 'react'
 import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'