@graphcommerce/magento-customer 5.2.0-canary.2 → 5.2.0-canary.4

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## 5.2.0-canary.4
+
+## 5.2.0-canary.3
+
 ## 5.2.0-canary.2
 
 ## 5.2.0-canary.1

package/components/AccountAddress/AccountAddress.tsx

@@ -1,7 +1,6 @@
 import { extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Box, Link, SxProps, Theme } from '@mui/material'
-import PageLink from 'next/link'
 import { AddressMultiLine } from '../AddressMultiLine/AddressMultiLine'
 import { DeleteCustomerAddressForm } from '../DeleteCustomerAddressForm/DeleteCustomerAddressForm'
 import { UpdateDefaultAddressForm } from '../UpdateDefaultAddressForm/UpdateDefaultAddressForm'
@@ -46,11 +45,9 @@ export function AccountAddress(props: AccountAddressProps) {
           textAlign: 'right',
         }}
       >
-        <PageLink href={`/account/addresses/edit?addressId=${id}`} passHref>
-          <Link color='primary' underline='hover'>
-            <Trans id='Edit' />
-          </Link>
-        </PageLink>
+        <Link href={`/account/addresses/edit?addressId=${id}`} color='primary' underline='hover'>
+          <Trans id='Edit' />
+        </Link>
         <DeleteCustomerAddressForm addressId={id ?? undefined} />
       </Box>
     </Box>

package/components/AccountAddresses/AccountAddresses.tsx

@@ -7,7 +7,6 @@ import {
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Skeleton, Button, Box, Theme, SxProps } from '@mui/material'
-import Link from 'next/link'
 import { AccountAddress } from '../AccountAddress/AccountAddress'
 import { AccountAddressesFragment } from './AccountAddresses.gql'
 
@@ -59,11 +58,9 @@ export function AccountAddresses(props: AccountAddressesProps) {
           title={<Trans id='You have no addresses saved yet' />}
           icon={<IconSvg src={iconHome} size='xxl' />}
           button={
-            <Link href='/account/addresses/add' passHref>
-              <Button size='large' variant='pill' color='primary'>
-                <Trans id='Add new address' />
-              </Button>
-            </Link>
+            <Button href='/account/addresses/add' size='large' variant='pill' color='primary'>
+              <Trans id='Add new address' />
+            </Button>
           }
         />
       )}
@@ -79,21 +76,20 @@ export function AccountAddresses(props: AccountAddressesProps) {
             ))}
           </Box>
 
-          <Link href='/account/addresses/add' passHref>
-            <Button
-              className={classes.button}
-              variant='pill'
-              color='primary'
-              size='large'
-              sx={(theme) => ({
-                display: 'block',
-                maxWidth: 'max-content',
-                margin: `${theme.spacings.md} auto`,
-              })}
-            >
-              <Trans id='Add new address' />
-            </Button>
-          </Link>
+          <Button
+            href='/account/addresses/add'
+            className={classes.button}
+            variant='pill'
+            color='primary'
+            size='large'
+            sx={(theme) => ({
+              display: 'block',
+              maxWidth: 'max-content',
+              margin: `${theme.spacings.md} auto`,
+            })}
+          >
+            <Trans id='Add new address' />
+          </Button>
         </SectionContainer>
       )}
     </>

package/components/AccountMenuItem/AccountMenuItem.tsx

@@ -8,7 +8,6 @@ import {
   extendableComponent,
 } from '@graphcommerce/next-ui'
 import { ListItem, ListItemIcon, ListItemText, SxProps, Theme } from '@mui/material'
-import PageLink from 'next/link'
 import React from 'react'
 
 export type AccountMenuItemProps = {
@@ -39,8 +38,9 @@ export function AccountMenuItem(props: AccountMenuItemProps) {
   } = props
   const classes = withState({ noBorderBottom })
 
-  const button = (
+  return (
     <Button
+      href={href}
       disabled={disabled}
       className={classes.root}
       sx={[
@@ -94,12 +94,4 @@ export function AccountMenuItem(props: AccountMenuItemProps) {
       </ListItem>
     </Button>
   )
-
-  return href ? (
-    <PageLink href={href} passHref>
-      {button}
-    </PageLink>
-  ) : (
-    button
-  )
 }

package/components/AccountOrders/AccountOrders.tsx

@@ -1,7 +1,6 @@
 import { Pagination, SectionContainer, extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Box, Link, SxProps, Theme } from '@mui/material'
-import PageLink from 'next/link'
 import React from 'react'
 import useOrderCardItemImages from '../../hooks/useOrderCardItemImages'
 import { NoOrdersFound } from '../NoOrdersFound/NoOrdersFound'
@@ -76,11 +75,13 @@ export function AccountOrders(props: AccountOrdersProps) {
         count={pageInfo?.total_pages ?? 1}
         page={pageInfo?.current_page ?? 1}
         renderLink={(p: number, icon: React.ReactNode) => (
-          <PageLink href={p === 1 ? '/account/orders' : `/account/orders?page=${p}`} passHref>
-            <Link color='primary' underline='hover'>
-              {icon}
-            </Link>
-          </PageLink>
+          <Link
+            href={p === 1 ? '/account/orders' : `/account/orders?page=${p}`}
+            color='primary'
+            underline='hover'
+          >
+            {icon}
+          </Link>
         )}
       />
     </Box>

package/components/AccountSignInUpForm/AccountSignInUpForm.tsx

@@ -17,7 +17,6 @@ import {
 import { emailPattern } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
 import { Box, CircularProgress, Link, SxProps, TextField, Theme, Typography } from '@mui/material'
-import PageLink from 'next/link'
 import router from 'next/router'
 
 export type AccountSignInUpFormProps = { sx?: SxProps<Theme> }
@@ -80,11 +79,9 @@ export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
             <Trans id='Hi {firstname}! You’re now logged in!' values={{ firstname }} />
           </LayoutTitle>
           <Typography variant='h6' align='center'>
-            <PageLink href='/account' passHref>
-              <Link underline='hover' color='secondary'>
-                <Trans id='View your account' />
-              </Link>
-            </PageLink>
+            <Link href='/account' underline='hover' color='secondary'>
+              <Trans id='View your account' />
+            </Link>
           </Typography>
 
           <FormActions>

package/components/ApolloCustomerError/ApolloCustomerErrorAlert.tsx

@@ -1,7 +1,6 @@
 import { ApolloErrorAlert, ApolloErrorAlertProps } from '@graphcommerce/ecommerce-ui'
 import { Trans } from '@lingui/react'
 import { Link } from '@mui/material'
-import NextLink from 'next/link'
 import { useCustomerSession } from '../../hooks/useCustomerSession'
 import { useAuthorizationErrorMasked } from './useAuthorizationErrorMasked'
 
@@ -18,11 +17,9 @@ export function ApolloCustomerErrorAlert(props: ApolloCustomerErrorAlertProps) {
       error={newError}
       graphqlErrorAlertProps={{
         action: unauthorized ? (
-          <NextLink href='/account/signin' passHref>
-            <Link underline='hover'>
-              {token ? <Trans id='Sign in' /> : <Trans id='Create Account' />}
-            </Link>
-          </NextLink>
+          <Link href='/account/signin' underline='hover'>
+            {token ? <Trans id='Sign in' /> : <Trans id='Create Account' />}
+          </Link>
         ) : (
           graphqlErrorAlertProps?.action
         ),

package/components/ApolloCustomerError/ApolloCustomerErrorFullPage.tsx

@@ -2,7 +2,6 @@ import { ApolloErrorFullPage, ApolloErrorFullPageProps } from '@graphcommerce/ec
 import { iconPerson, IconSvg } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Button } from '@mui/material'
-import PageLink from 'next/link'
 import type { SetOptional } from 'type-fest'
 import { useCustomerSession } from '../../hooks/useCustomerSession'
 import { useAuthorizationErrorMasked } from './useAuthorizationErrorMasked'
@@ -26,11 +25,9 @@ export function ApolloCustomerErrorFullPage(props: ApolloCustomerErrorFullPagePr
       error={newError}
       button={
         unauthorized ? (
-          <PageLink href='/account/signin' passHref>
-            <Button variant='pill' color='primary' size='large'>
-              {token ? <Trans id='Sign in' /> : <Trans id='Sign in or create an account!' />}
-            </Button>
-          </PageLink>
+          <Button href='/account/signin' variant='pill' color='primary' size='large'>
+            {token ? <Trans id='Sign in' /> : <Trans id='Sign in or create an account!' />}
+          </Button>
         ) : (
           button
         )

package/components/ApolloCustomerError/ApolloCustomerErrorSnackbar.tsx

@@ -1,7 +1,6 @@
 import { ApolloErrorSnackbar, ApolloErrorSnackbarProps } from '@graphcommerce/ecommerce-ui'
 import { Trans } from '@lingui/react'
 import { Button } from '@mui/material'
-import NextLink from 'next/link'
 import { useCustomerSession } from '../../hooks/useCustomerSession'
 import { useAuthorizationErrorMasked } from './useAuthorizationErrorMasked'
 
@@ -18,11 +17,9 @@ export function ApolloCustomerErrorSnackbar(props: ApolloCustomerErrorSnackbarPr
       error={newError}
       action={
         unauthorized ? (
-          <NextLink href='/account/signin' passHref>
-            <Button variant='pill' color='secondary'>
-              {token ? <Trans id='Sign in' /> : <Trans id='Create Account' />}
-            </Button>
-          </NextLink>
+          <Button href='/account/signin' variant='pill' color='secondary'>
+            {token ? <Trans id='Sign in' /> : <Trans id='Create Account' />}
+          </Button>
         ) : (
           action
         )

package/components/CustomerFab/CustomerFab.tsx

@@ -6,7 +6,6 @@ import {
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Fab, FabProps as FabPropsType, NoSsr, SxProps, Theme } from '@mui/material'
-import PageLink from 'next/link'
 import React from 'react'
 import { useCustomerSession, UseCustomerSessionReturn } from '../../hooks'
 
@@ -27,26 +26,25 @@ function CustomerFabContent(props: CustomerFabContentProps) {
   const { session, icon, guestHref, authHref, FabProps, sx } = props
 
   return (
-    <PageLink href={session?.requireAuth ? guestHref : authHref} passHref>
-      <Fab
-        color='inherit'
-        id='account'
-        aria-label={i18n._(/* i18n */ 'Account')}
-        size='large'
-        className={classes.root}
-        {...FabProps}
-        sx={sx}
+    <Fab
+      href={session?.requireAuth ? guestHref : authHref}
+      color='inherit'
+      id='account'
+      aria-label={i18n._(/* i18n */ 'Account')}
+      size='large'
+      className={classes.root}
+      {...FabProps}
+      sx={sx}
+    >
+      <DesktopHeaderBadge
+        badgeContent={session?.token ? 1 : 0}
+        color={session?.valid ? 'primary' : 'error'}
+        variant='dot'
+        overlap='circular'
       >
-        <DesktopHeaderBadge
-          badgeContent={session?.token ? 1 : 0}
-          color={session?.valid ? 'primary' : 'error'}
-          variant='dot'
-          overlap='circular'
-        >
-          {icon ?? <IconSvg src={iconPerson} size='large' />}
-        </DesktopHeaderBadge>
-      </Fab>
-    </PageLink>
+        {icon ?? <IconSvg src={iconPerson} size='large' />}
+      </DesktopHeaderBadge>
+    </Fab>
   )
 }
 

package/components/OrderCard/OrderCard.tsx

@@ -1,7 +1,6 @@
 import { Money } from '@graphcommerce/magento-store'
 import { extendableComponent, useDateTimeFormat } from '@graphcommerce/next-ui'
 import { Box, styled, SxProps, Theme, Skeleton, ListItemButton } from '@mui/material'
-import PageLink from 'next/link'
 import { UseOrderCardItemImages } from '../../hooks/useOrderCardItemImages'
 import { OrderCardItemImage } from '../OrderCardItemImage/OrderCardItemImage'
 import { OrderStateLabel } from '../OrderStateLabel/OrderStateLabel'
@@ -75,86 +74,85 @@ export function OrderCard(props: OrderCardProps) {
   }
 
   return (
-    <PageLink href={`/account/orders/view?orderId=${number}`} passHref>
-      <ListItemButton
-        className={classes.buttonRoot}
-        sx={[
-          (theme) => ({
-            width: '100%',
-            boxShadow: 'none',
-            marginTop: theme.spacings.xxs,
-            borderBottom: `1px solid ${theme.palette.divider}`,
-            '&:hover': { background: 'none' },
-          }),
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
-      >
-        <OrderContainer className={classes.orderContainer}>
-          <OrderRow>
-            <Box component='span' className={classes.orderMoney} sx={{ fontWeight: 'bold' }}>
-              <Money {...total?.grand_total} />
-            </Box>
-            <span>{dateFormatter.format(new Date(order_date ?? ''))}</span>
-            <span>#{number}</span>
-          </OrderRow>
-          <OrderRow>
-            <OrderStateLabel
-              items={items}
-              renderer={{
-                Ordered: () => <span>Your order is being processed</span>,
-                Invoiced: () => <span>Your order has been invoiced</span>,
-                Shipped: () => <span>Your order is on its way!</span>,
-                Refunded: () => <span>Your order has been refunded</span>,
-                Canceled: () => <span>Your order has been canceled</span>,
-                Returned: () => <span>Your order has been returned</span>,
-                Partial: () => <span>Your order has been partially processed</span>,
-              }}
-            />
-          </OrderRow>
-          <Box className={classes.orderProducts}>
-            <Box
-              className={classes.images}
-              sx={(theme) => ({
-                display: 'grid',
-                gridAutoFlow: 'column',
-                gap: theme.spacings.xxs,
-                gridTemplateColumns: 'repeat(auto-fit, 88px)',
-                placeContent: 'center',
-                placeItems: 'center',
-                padding: theme.spacings.xxs,
-              })}
-            >
-              {items
-                ?.slice(0, maxItemsInRow)
-                .map(
-                  (item) =>
-                    item?.product_url_key &&
-                    images?.[item.product_url_key] && (
-                      <OrderCardItemImage
-                        key={item.product_url_key}
-                        {...images[item.product_url_key]}
-                      />
-                    ),
-                )}
-              {totalItems > maxItemsInRow && (
-                <Box
-                  className={classes.placeholder}
-                  sx={{
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    width: 88,
-                    height: 88,
-                  }}
-                >{`+${totalItems - maxItemsInRow}`}</Box>
-              )}
-            </Box>
+    <ListItemButton
+      href={`/account/orders/view?orderId=${number}`}
+      className={classes.buttonRoot}
+      sx={[
+        (theme) => ({
+          width: '100%',
+          boxShadow: 'none',
+          marginTop: theme.spacings.xxs,
+          borderBottom: `1px solid ${theme.palette.divider}`,
+          '&:hover': { background: 'none' },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <OrderContainer className={classes.orderContainer}>
+        <OrderRow>
+          <Box component='span' className={classes.orderMoney} sx={{ fontWeight: 'bold' }}>
+            <Money {...total?.grand_total} />
           </Box>
-          <Box className={`${classes.orderRow} ${classes.tracking}`} sx={{ textAlign: 'center' }}>
-            {shipments?.[0]?.tracking?.[0] && <TrackingLink {...shipments?.[0].tracking?.[0]} />}
+          <span>{dateFormatter.format(new Date(order_date ?? ''))}</span>
+          <span>#{number}</span>
+        </OrderRow>
+        <OrderRow>
+          <OrderStateLabel
+            items={items}
+            renderer={{
+              Ordered: () => <span>Your order is being processed</span>,
+              Invoiced: () => <span>Your order has been invoiced</span>,
+              Shipped: () => <span>Your order is on its way!</span>,
+              Refunded: () => <span>Your order has been refunded</span>,
+              Canceled: () => <span>Your order has been canceled</span>,
+              Returned: () => <span>Your order has been returned</span>,
+              Partial: () => <span>Your order has been partially processed</span>,
+            }}
+          />
+        </OrderRow>
+        <Box className={classes.orderProducts}>
+          <Box
+            className={classes.images}
+            sx={(theme) => ({
+              display: 'grid',
+              gridAutoFlow: 'column',
+              gap: theme.spacings.xxs,
+              gridTemplateColumns: 'repeat(auto-fit, 88px)',
+              placeContent: 'center',
+              placeItems: 'center',
+              padding: theme.spacings.xxs,
+            })}
+          >
+            {items
+              ?.slice(0, maxItemsInRow)
+              .map(
+                (item) =>
+                  item?.product_url_key &&
+                  images?.[item.product_url_key] && (
+                    <OrderCardItemImage
+                      key={item.product_url_key}
+                      {...images[item.product_url_key]}
+                    />
+                  ),
+              )}
+            {totalItems > maxItemsInRow && (
+              <Box
+                className={classes.placeholder}
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  width: 88,
+                  height: 88,
+                }}
+              >{`+${totalItems - maxItemsInRow}`}</Box>
+            )}
           </Box>
-        </OrderContainer>
-      </ListItemButton>
-    </PageLink>
+        </Box>
+        <Box className={`${classes.orderRow} ${classes.tracking}`} sx={{ textAlign: 'center' }}>
+          {shipments?.[0]?.tracking?.[0] && <TrackingLink {...shipments?.[0].tracking?.[0]} />}
+        </Box>
+      </OrderContainer>
+    </ListItemButton>
   )
 }

package/components/OrderItem/OrderItem.tsx

@@ -1,8 +1,7 @@
 import { Image } from '@graphcommerce/image'
 import { Money } from '@graphcommerce/magento-store'
-import { responsiveVal, extendableComponent } from '@graphcommerce/next-ui'
+import { responsiveVal, extendableComponent, NextLink } from '@graphcommerce/next-ui'
 import { Box } from '@mui/material'
-import PageLink from 'next/link'
 import { OrderCardItemImageFragment } from '../../hooks/OrderCardItemImage.gql'
 import { OrderItemFragment } from './OrderItem.gql'
 
@@ -99,68 +98,66 @@ export function OrderItem(props: OrderItemProps) {
           borderRadius: '50%',
         }}
       >
-        <PageLink href={productLink} passHref>
+        <Box
+          href={productLink}
+          component={NextLink}
+          className={classes.productLink}
+          sx={{ display: 'block', width: '100%', height: '100%' }}
+        >
           <Box
-            component='a'
-            className={classes.productLink}
-            sx={{ display: 'block', width: '100%', height: '100%' }}
+            className={classes.pictureSpacing}
+            sx={() => ({
+              overflow: 'hidden',
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              position: 'relative',
+              alignItems: 'center',
+              flexShrink: 0,
+              userSelect: 'none',
+              borderRadius: '50%',
+              justifyContent: 'center',
+            })}
           >
-            <Box
-              className={classes.pictureSpacing}
-              sx={() => ({
-                overflow: 'hidden',
-                width: '100%',
-                height: '100%',
-                display: 'flex',
-                position: 'relative',
-                alignItems: 'center',
-                flexShrink: 0,
-                userSelect: 'none',
-                borderRadius: '50%',
-                justifyContent: 'center',
-              })}
-            >
-              {thumbnail?.url && thumbnail?.label && (
-                <Image
-                  alt={thumbnail?.label ?? ''}
-                  width={104}
-                  height={86}
-                  src={thumbnail?.url ?? ''}
-                  className={classes.image}
-                  sx={(theme) => ({
-                    gridColumn: 1,
-                    backgroundColor: theme.palette.background.image,
-                    objectFit: 'cover',
-                    display: 'block',
-                    transform: 'scale(1.1)',
-                  })}
-                />
-              )}
-            </Box>
+            {thumbnail?.url && thumbnail?.label && (
+              <Image
+                alt={thumbnail?.label ?? ''}
+                width={104}
+                height={86}
+                src={thumbnail?.url ?? ''}
+                className={classes.image}
+                sx={(theme) => ({
+                  gridColumn: 1,
+                  backgroundColor: theme.palette.background.image,
+                  objectFit: 'cover',
+                  display: 'block',
+                  transform: 'scale(1.1)',
+                })}
+              />
+            )}
           </Box>
-        </PageLink>
+        </Box>
       </Box>
 
-      <PageLink href={productLink} passHref>
-        <Box
-          component='a'
-          className={classes.itemName}
-          sx={(theme) => ({
-            typography: 'h5',
-            fontWeight: 500,
-            gridArea: 'itemName',
-            color: theme.palette.text.primary,
-            textDecoration: 'none',
-            flexWrap: 'nowrap',
-            maxWidth: 'max-content',
-            '&.hasOptions': {
-              alignSelf: 'flex-end',
-            },
-          })}
-        >
-          {product_name}
-        </Box>
-      </PageLink>
+      <Box
+        href={productLink}
+        component={NextLink}
+        className={classes.itemName}
+        sx={(theme) => ({
+          typography: 'h5',
+          fontWeight: 500,
+          gridArea: 'itemName',
+          color: theme.palette.text.primary,
+          textDecoration: 'none',
+          flexWrap: 'nowrap',
+          maxWidth: 'max-content',
+          '&.hasOptions': {
+            alignSelf: 'flex-end',
+          },
+        })}
+      >
+        {product_name}
+      </Box>
 
       <Box
         className={classes.itemPrice}

package/components/SignInForm/SignInForm.tsx

@@ -4,7 +4,6 @@ import { Button, FormRow, FormActions } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
 import { Box, FormControl, Link, SxProps, TextField, Theme } from '@mui/material'
-import PageLink from 'next/link'
 import { CustomerDocument } from '../../hooks'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import { SignInDocument } from './SignIn.gql'
@@ -53,11 +52,9 @@ export function SignInForm(props: SignInFormProps) {
           {...muiRegister('password', { required: required.password })}
           InputProps={{
             endAdornment: (
-              <PageLink href='/account/forgot-password' key='forgot-password' passHref>
-                <Link underline='hover' sx={{ whiteSpace: 'nowrap' }}>
-                  <Trans id='Forgot password?' />
-                </Link>
-              </PageLink>
+              <Link href='/account/forgot-password' underline='hover' sx={{ whiteSpace: 'nowrap' }}>
+                <Trans id='Forgot password?' />
+              </Link>
             ),
           }}
           helperText={formState.errors.password?.message || authError?.message}

package/components/SignInForm/SignInFormInline.tsx

@@ -2,7 +2,6 @@ import { Button, extendableComponent } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
 import { Box, SxProps, TextField, Theme } from '@mui/material'
-import PageLink from 'next/link'
 import { SignInDocument, SignInMutationVariables } from './SignIn.gql'
 
 type InlineSignInFormProps = Omit<SignInMutationVariables, 'password'> & {
@@ -56,16 +55,15 @@ export function SignInFormInline(props: InlineSignInFormProps) {
         disabled={formState.isSubmitting}
         InputProps={{
           endAdornment: (
-            <PageLink href='/account/forgot-password' key='forgot-password' passHref>
-              <Button
-                color='secondary'
-                variant='text'
-                className={classes.button}
-                sx={{ minWidth: 'max-content' }}
-              >
-                <Trans id='Forgot password?' />
-              </Button>
-            </PageLink>
+            <Button
+              href='/account/forgot-password'
+              color='secondary'
+              variant='text'
+              className={classes.button}
+              sx={{ minWidth: 'max-content' }}
+            >
+              <Trans id='Forgot password?' />
+            </Button>
           ),
         }}
       />

package/components/WaitForCustomer/WaitForCustomer.tsx

@@ -2,7 +2,6 @@ import { mergeErrors, WaitForQueries, WaitForQueriesProps } from '@graphcommerce
 import { FullPageMessage, IconSvg, iconPerson } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Button, CircularProgress } from '@mui/material'
-import PageLink from 'next/link'
 import React from 'react'
 import { useCustomerSession } from '../../hooks/useCustomerSession'
 import { ApolloCustomerErrorFullPage } from '../ApolloCustomerError/ApolloCustomerErrorFullPage'
@@ -65,15 +64,13 @@ export function WaitForCustomer(props: WaitForCustomerProps) {
             icon={<IconSvg src={iconPerson} size='xxl' />}
             title={<Trans id='You must sign in to continue' />}
             button={
-              <PageLink href='/account/signin' passHref>
-                <Button variant='pill' color='secondary' size='large'>
-                  {!session.valid ? (
-                    <Trans id='Sign in' />
-                  ) : (
-                    <Trans id='Sign in or create an account!' />
-                  )}
-                </Button>
-              </PageLink>
+              <Button href='/account/signin' variant='pill' color='secondary' size='large'>
+                {!session.valid ? (
+                  <Trans id='Sign in' />
+                ) : (
+                  <Trans id='Sign in or create an account!' />
+                )}
+              </Button>
             }
           />
         ))}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "5.2.0-canary.2",
+  "version": "5.2.0-canary.4",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,20 +12,20 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "5.2.0-canary.2",
-    "@graphcommerce/prettier-config-pwa": "5.2.0-canary.2",
-    "@graphcommerce/typescript-config-pwa": "5.2.0-canary.2"
+    "@graphcommerce/eslint-config-pwa": "5.2.0-canary.4",
+    "@graphcommerce/prettier-config-pwa": "5.2.0-canary.4",
+    "@graphcommerce/typescript-config-pwa": "5.2.0-canary.4"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "5.2.0-canary.2",
-    "@graphcommerce/framer-utils": "5.2.0-canary.2",
-    "@graphcommerce/graphql": "5.2.0-canary.2",
-    "@graphcommerce/graphql-mesh": "5.2.0-canary.2",
-    "@graphcommerce/image": "5.2.0-canary.2",
-    "@graphcommerce/magento-graphql": "5.2.0-canary.2",
-    "@graphcommerce/magento-store": "5.2.0-canary.2",
-    "@graphcommerce/next-ui": "5.2.0-canary.2",
-    "@graphcommerce/react-hook-form": "5.2.0-canary.2"
+    "@graphcommerce/ecommerce-ui": "5.2.0-canary.4",
+    "@graphcommerce/framer-utils": "5.2.0-canary.4",
+    "@graphcommerce/graphql": "5.2.0-canary.4",
+    "@graphcommerce/graphql-mesh": "5.2.0-canary.4",
+    "@graphcommerce/image": "5.2.0-canary.4",
+    "@graphcommerce/magento-graphql": "5.2.0-canary.4",
+    "@graphcommerce/magento-store": "5.2.0-canary.4",
+    "@graphcommerce/next-ui": "5.2.0-canary.4",
+    "@graphcommerce/react-hook-form": "5.2.0-canary.4"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",
@@ -33,7 +33,7 @@
     "@mui/material": "^5.10.16",
     "framer-motion": "^7.0.0",
     "graphql": "^16.0.0",
-    "next": "^12.1.2",
+    "next": "^13.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }