@graphcommerce/magento-customer 10.0.0-canary.67 → 10.0.0-canary.72

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Change Log
 
+## 10.0.0-canary.72
+
+## 10.0.0-canary.71
+
+## 10.0.0-canary.70
+
+### Major Changes
+
+- [#2565](https://github.com/graphcommerce-org/graphcommerce/pull/2565) [`c96dfcd`](https://github.com/graphcommerce-org/graphcommerce/commit/c96dfcdca981baca387c270ad9e2b9515cdd00cc) - Updated to Apollo Client 4 ([@paales](https://github.com/paales))
+
+## 10.0.0-canary.69
+
+## 10.0.0-canary.68
+
+### Major Changes
+
+- [#2557](https://github.com/graphcommerce-org/graphcommerce/pull/2557) [`ceaadd8`](https://github.com/graphcommerce-org/graphcommerce/commit/ceaadd87f0648982a068a3b07b1fa149c9127f49) - ## Material UI v5 → v7 Migration
+
+  This release upgrades Material UI from v5 to v7 with full CSS variables support. ([@paales](https://github.com/paales))
+
 ## 10.0.0-canary.67
 
 ### Patch Changes

package/components/AccountAddress/AccountAddress.tsx

@@ -1,4 +1,4 @@
-import { extendableComponent } from '@graphcommerce/next-ui'
+import { extendableComponent, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Link } from '@mui/material'
@@ -22,7 +22,7 @@ export function AccountAddress(props: AccountAddressProps) {
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           display: 'flex',
           justifyContent: 'space-between',
@@ -30,8 +30,8 @@ export function AccountAddress(props: AccountAddressProps) {
           paddingBottom: theme.spacings.md,
           typography: 'body2',
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <Box className={classes.address} sx={{ '& > span': { display: 'block' } }}>
         <AddressMultiLine id={id} {...addressProps} />

package/components/AccountAddresses/AccountAddresses.tsx

@@ -35,7 +35,9 @@ export function AccountAddresses(props: AccountAddressesProps) {
       >
         <Box
           className={classes.addresses}
-          sx={(theme) => ({ '& > div': { borderBottom: `1px solid ${theme.palette.divider}` } })}
+          sx={(theme) => ({
+            '& > div': { borderBottom: `1px solid ${theme.vars.palette.divider}` },
+          })}
         >
           <Skeleton height={128} />
           <Skeleton height={128} />
@@ -77,7 +79,9 @@ export function AccountAddresses(props: AccountAddressesProps) {
         <SectionContainer labelLeft={<Trans>Shipping addresses</Trans>}>
           <Box
             className={classes.addresses}
-            sx={(theme) => ({ '& > div': { borderBottom: `1px solid ${theme.palette.divider}` } })}
+            sx={(theme) => ({
+              '& > div': { borderBottom: `1px solid ${theme.vars.palette.divider}` },
+            })}
           >
             {addresses.map((address) => (
               <AccountAddress key={address.id} {...address} />

package/components/AccountDeleteForm/AccountDeleteForm.tsx

@@ -2,8 +2,8 @@ import { CheckboxElement, EmailElement } from '@graphcommerce/ecommerce-ui'
 import { useApolloClient, useMutation } from '@graphcommerce/graphql'
 import { Button, FormActions, FormRow } from '@graphcommerce/next-ui'
 import { useForm } from '@graphcommerce/react-hook-form'
-import { Trans } from '@lingui/react/macro'
 import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
 import { Box, Typography } from '@mui/material'
 import { useRouter } from 'next/router'
 import { CustomerDocument, CustomerTokenDocument, useCustomerQuery } from '../../hooks'
@@ -50,10 +50,20 @@ export function AccountDeleteForm() {
       {!called || error || loading ? (
         <WaitForCustomer waitFor={dashboard}>
           <Box component='form' onSubmit={submitHandler} noValidate>
-            <Typography variant='h6' textAlign='center'>
+            <Typography
+              variant='h6'
+              sx={{
+                textAlign: 'center',
+              }}
+            >
               <Trans>Are you sure you want to delete your account?</Trans>
             </Typography>
-            <Typography variant='body1' textAlign='center'>
+            <Typography
+              variant='body1'
+              sx={{
+                textAlign: 'center',
+              }}
+            >
               <Trans>
                 Doing so will remove all your data including order history and saved shipping /
                 billing addresses.
@@ -91,7 +101,7 @@ export function AccountDeleteForm() {
         </WaitForCustomer>
       ) : (
         <>
-          <Typography variant='h6' textAlign='center'>
+          <Typography variant='h6' sx={{ textAlign: 'center' }}>
             <Trans>Account deletion successful</Trans>
           </Typography>
           <FormActions>

package/components/AccountMenu/AccountMenu.tsx

@@ -1,4 +1,4 @@
-import { extendableComponent } from '@graphcommerce/next-ui'
+import { extendableComponent, sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { List } from '@mui/material'
 import React from 'react'
@@ -14,7 +14,7 @@ export function AccountMenu(props: AccountMenuProps) {
     <List
       classes={classes}
       disablePadding
-      sx={[(theme) => ({ marginBottom: theme.spacings.lg }), ...(Array.isArray(sx) ? sx : [sx])]}
+      sx={sxx((theme) => ({ marginBottom: theme.spacings.lg }), sx)}
     >
       {children}
     </List>

package/components/AccountMenuItem/AccountMenuItem.tsx

@@ -6,6 +6,7 @@ import {
   iconChevronRight,
   IconSvg,
   responsiveVal,
+  sxx,
 } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { ListItem, ListItemIcon, ListItemText } from '@mui/material'
@@ -44,30 +45,29 @@ export function AccountMenuItem(props: AccountMenuItemProps) {
       href={href}
       disabled={disabled}
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           width: '100%',
           height: responsiveVal(88, 104),
           padding: 0,
           borderRadius: 0,
-          background: theme.palette.background.paper,
+          background: theme.vars.palette.background.paper,
           '&:hover': {
-            background: theme.palette.background.default,
+            background: theme.vars.palette.background.default,
           },
           '&:disabled': {
-            background: theme.palette.background.default,
+            background: theme.vars.palette.background.default,
           },
           '&:focus': {
             // fix: disableElevation does not work when button is focused
             boxShadow: 'none',
           },
-
           '&:not(.noBorderBottom)': {
-            borderBottom: `1px solid ${theme.palette.divider}`,
+            borderBottom: `1px solid ${theme.vars.palette.divider}`,
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
       {...buttonProps}
     >
       <ListItem disableGutters>
@@ -80,16 +80,19 @@ export function AccountMenuItem(props: AccountMenuItemProps) {
           <IconSvg src={iconSrc} size='large' />
         </ListItemIcon>
         <ListItemText
-          primaryTypographyProps={{ sx: { typography: 'subtitle1' } }}
-          secondaryTypographyProps={{
-            sx: {
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              textOverflow: 'elipsis',
-            },
-          }}
           primary={title}
           secondary={subtitle}
+          slotProps={{
+            primary: { sx: { typography: 'subtitle1' } },
+
+            secondary: {
+              sx: {
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'elipsis',
+              },
+            },
+          }}
         />
         {endIcon ?? <IconSvg src={iconChevronRight} />}
       </ListItem>

package/components/ApolloCustomerError/useAuthorizationErrorMasked.ts

@@ -1,9 +1,9 @@
-import type { ApolloError } from '@graphcommerce/graphql'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
+import type { ErrorLike } from '@apollo/client'
 import { t } from '@lingui/core/macro'
 import { useCustomerSession } from '../../hooks/useCustomerSession'
 
-export function useAuthorizationErrorMasked(error?: ApolloError | null) {
+export function useAuthorizationErrorMasked(error?: ErrorLike | null) {
   const { token } = useCustomerSession()
 
   return graphqlErrorByCategory({

package/components/CancelOrder/CancelOrderForm.tsx

@@ -8,6 +8,7 @@ import {
   FormRow,
   iconChevronDown,
   IconSvg,
+  sxx,
 } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react/macro'
@@ -52,10 +53,9 @@ export function CancelOrderForm(props: CancelOrderFormProps) {
         <Trans>Order has successfully been canceled</Trans>
       </Alert>
     )
-
   return (
     <Accordion
-      sx={[
+      sx={sxx(
         (theme) => ({
           mb: theme.spacings.xxl,
           ...breakpointVal(
@@ -69,22 +69,20 @@ export function CancelOrderForm(props: CancelOrderFormProps) {
             mb: theme.spacings.xxl,
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
       {...rest}
     >
       <AccordionSummary
         expandIcon={<IconSvg src={iconChevronDown} />}
-        sx={[
-          (theme) => ({
-            px: theme.spacings.xs,
-            '& .MuiAccordionSummary-content': {
-              alignItems: 'center',
-              columnGap: 2,
-              justifyContent: 'space-between',
-            },
-          }),
-        ]}
+        sx={(theme) => ({
+          px: theme.spacings.xs,
+          '& .MuiAccordionSummary-content': {
+            alignItems: 'center',
+            columnGap: 2,
+            justifyContent: 'space-between',
+          },
+        })}
       >
         <Trans>Cancel order</Trans>
       </AccordionSummary>
@@ -103,7 +101,6 @@ export function CancelOrderForm(props: CancelOrderFormProps) {
               }))}
             />
           </FormRow>
-
           <CheckboxElement
             required
             control={control}
@@ -113,19 +110,15 @@ export function CancelOrderForm(props: CancelOrderFormProps) {
               <Trans>I understand that my order will be canceled and this can not be undone.</Trans>
             }
           />
-
           {submittedWithoutErrors && (
             <Alert>
               <Trans>Order has successfully been canceled</Trans>
             </Alert>
           )}
-
           {cancelOrderData?.cancelOrder?.error && (
             <Alert severity='error'>{cancelOrderData?.cancelOrder?.error}</Alert>
           )}
-
           <ApolloErrorSnackbar error={error} />
-
           <FormRow
             sx={(theme) => ({
               justifyContent: 'center',

package/components/ConfirmCustomer/ConfirmCustomerForm.tsx

@@ -37,7 +37,6 @@ export function ConfirmCustomerForm() {
       <LayoutTitle icon={iconPerson}>
         <Trans>Account confirmation</Trans>
       </LayoutTitle>
-
       {!key && (
         <Alert severity='error' sx={(theme) => ({ my: theme.spacings.xxs })}>
           <Trans>You can only confirm you account by clicking on the link in your email.</Trans>
@@ -45,10 +44,9 @@ export function ConfirmCustomerForm() {
       )}
       {key && (
         <>
-          <Typography variant='h6' textAlign='center'>
+          <Typography variant='h6' sx={{ textAlign: 'center' }}>
             <Trans>Fill in your email to confirm registration</Trans>
           </Typography>
-
           <FormRow>
             <EmailElement
               variant='outlined'
@@ -59,7 +57,6 @@ export function ConfirmCustomerForm() {
               disabled={isSubmitSuccessful}
             />
           </FormRow>
-
           <FormRow sx={{ justifyItems: 'center' }}>
             <Button
               type='submit'
@@ -72,7 +69,6 @@ export function ConfirmCustomerForm() {
               <Trans>Confirm registration</Trans>
             </Button>
           </FormRow>
-
           <ApolloCustomerErrorAlert
             sx={(theme) => ({ my: theme.spacings.xxs })}
             error={error}

package/components/ContactForm/ContactForm.tsx

@@ -7,12 +7,13 @@ import {
 import { Button, Form, FormRow, MessageSnackbar } from '@graphcommerce/next-ui'
 import { FormPersist, useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react/macro'
+import { useEffect } from 'react'
 import type { CustomerQuery } from '../../hooks'
 import { CustomerDocument, useCustomerQuery } from '../../hooks'
 import type { ContactUsMutationVariables } from './ContactUsMutation.gql'
 import { ContactUsDocument } from './ContactUsMutation.gql'
 
-function findTelephone(data: CustomerQuery): string | undefined {
+function findTelephone(data: Partial<CustomerQuery>): string | undefined {
   const { customer } = data
   if (!customer) return undefined
 
@@ -48,31 +49,33 @@ export function ContactForm() {
 
   const { control, formState, error, handleSubmit, setValue, getValues } = form
 
-  useCustomerQuery(CustomerDocument, {
-    onCompleted: (data) => {
-      if (!data.customer) return
-
-      const telephone = findTelephone(data)
-
-      if (!getValues('input.telephone') && telephone) {
-        setValue('input.telephone', telephone)
-      }
-
-      if (!getValues('input.email') && data.customer?.email) {
-        setValue('input.email', data.customer?.email)
-      }
-
-      if (!getValues('input.name') && data.customer) {
-        setValue(
-          'input.name',
-          `${data.customer?.firstname ?? ''} ${data.customer?.middlename ?? ''} ${data.customer?.lastname ?? ''}`.replaceAll(
-            '  ',
-            ' ',
-          ),
-        )
-      }
-    },
-  })
+  const customerQuery = useCustomerQuery(CustomerDocument)
+
+  // Handle customer data when it's loaded
+  useEffect(() => {
+    const data = customerQuery.data
+    if (!data?.customer) return
+
+    const telephone = findTelephone(data)
+
+    if (!getValues('input.telephone') && telephone) {
+      setValue('input.telephone', telephone)
+    }
+
+    if (!getValues('input.email') && data.customer?.email) {
+      setValue('input.email', data.customer?.email)
+    }
+
+    if (!getValues('input.name') && data.customer) {
+      setValue(
+        'input.name',
+        `${data.customer?.firstname ?? ''} ${data.customer?.middlename ?? ''} ${data.customer?.lastname ?? ''}`.replaceAll(
+          '  ',
+          ' ',
+        ),
+      )
+    }
+  }, [customerQuery.data, getValues, setValue])
 
   const submit = handleSubmit(() => {})
 

package/components/CreditMemo/CreditMemoCard.tsx

@@ -2,7 +2,7 @@ import { Money } from '@graphcommerce/magento-store'
 import { breakpointVal, iconChevronRight, IconSvg, NextLink, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { Box, lighten } from '@mui/material'
+import { Box } from '@mui/material'
 import type { CreditMemoCardFragment } from './CreditMemoCard.gql'
 
 export type CreditMemoCardProps = {
@@ -26,10 +26,10 @@ export function CreditMemoCard(props: CreditMemoCardProps) {
           px: theme.spacings.xxs,
           py: theme.spacings.xxs,
           gap: theme.spacings.sm,
-          background:
-            theme.palette.mode === 'light'
-              ? theme.palette.background.default
-              : lighten(theme.palette.background.default, 0.15),
+          background: theme.vars.palette.background.default,
+          ...theme.applyStyles('dark', {
+            background: theme.lighten(theme.vars.palette.background.default, 0.15),
+          }),
           ...breakpointVal(
             'borderRadius',
             theme.shape.borderRadius * 2,
@@ -37,7 +37,7 @@ export function CreditMemoCard(props: CreditMemoCardProps) {
             theme.breakpoints.values,
           ),
           '&:hover': {
-            backgroundColor: theme.palette.action.hover,
+            backgroundColor: theme.vars.palette.action.hover,
           },
           display: 'grid',
           gridTemplate: `

package/components/CreditMemo/CreditMemoDetails.tsx

@@ -3,10 +3,11 @@ import {
   DateTimeFormat,
   extendableComponent,
   SectionContainer,
+  sxx,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { Box, lighten, Typography } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import type { CreditMemoFragment } from './CreditMemo.gql'
 
 export type CreditMemoDetailsProps = {
@@ -30,14 +31,11 @@ export function CreditMemoDetails(props: CreditMemoDetailsProps) {
   return (
     <SectionContainer
       labelLeft={<Trans>Credit Memo details</Trans>}
-      sx={[
+      sx={sxx(
         (theme) => ({
           padding: theme.spacings.sm,
           marginBottom: theme.spacings.md,
-          background:
-            theme.palette.mode === 'light'
-              ? theme.palette.background.default
-              : lighten(theme.palette.background.default, 0.15),
+          background: theme.lighten(theme.vars.palette.background.default, 0.15),
           ...breakpointVal(
             'borderRadius',
             theme.shape.borderRadius * 2,
@@ -48,13 +46,16 @@ export function CreditMemoDetails(props: CreditMemoDetailsProps) {
             mt: 0,
             mb: theme.spacings.xs,
           },
+          ...theme.applyStyles('light', {
+            background: theme.vars.palette.background.default,
+          }),
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <Box
         className={classes.creditMemoDetailContainer}
-        sx={[
+        sx={sxx(
           (theme) => ({
             gridColumnGap: theme.spacings.xxl,
             gridRowGap: theme.spacings.md,
@@ -64,8 +65,8 @@ export function CreditMemoDetails(props: CreditMemoDetailsProps) {
               marginTop: theme.spacings.xxs,
             },
           }),
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+          sx,
+        )}
       >
         <Box className={classes.creditMemoDetailRow}>
           <SectionContainer
@@ -77,7 +78,6 @@ export function CreditMemoDetails(props: CreditMemoDetailsProps) {
             <Typography>{number}</Typography>
           </SectionContainer>
         </Box>
-
         <Box className={classes.creditMemoDetailRow}>
           {/* <SectionContainer
             variantLeft='h5'

package/components/CreditMemo/CreditMemoItems.tsx

@@ -4,6 +4,7 @@ import {
   extendableComponent,
   nonNullable,
   SectionContainer,
+  sxx,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
@@ -31,11 +32,11 @@ export function CreditMemoItems(props: CreditMemoItemsProps) {
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           my: theme.spacings.md,
           padding: `${theme.spacings.sm} ${theme.spacings.sm}`,
-          border: `1px ${theme.palette.divider} solid`,
+          border: `1px ${theme.vars.palette.divider} solid`,
           ...breakpointVal(
             'borderRadius',
             theme.shape.borderRadius * 2,
@@ -43,8 +44,8 @@ export function CreditMemoItems(props: CreditMemoItemsProps) {
             theme.breakpoints.values,
           ),
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <SectionContainer
         sx={{ '& .SectionHeader-root': { mt: 0 } }}

package/components/CreditMemo/CreditMemoTotals.tsx

@@ -2,7 +2,7 @@ import { Money } from '@graphcommerce/magento-store'
 import { breakpointVal, extendableComponent, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { Box, Divider, lighten, Typography } from '@mui/material'
+import { Box, Divider, Typography } from '@mui/material'
 import type { CreditMemoFragment } from './CreditMemo.gql'
 
 export type CreditMemoTotalsProps = {
@@ -32,10 +32,10 @@ export function CreditMemoTotals(props: CreditMemoTotalsProps) {
             theme.shape.borderRadius * 5,
             theme.breakpoints.values,
           ),
-          background:
-            theme.palette.mode === 'light'
-              ? theme.palette.background.default
-              : lighten(theme.palette.background.default, 0.15),
+          background: theme.vars.palette.background.default,
+          ...theme.applyStyles('dark', {
+            background: theme.lighten(theme.vars.palette.background.default, 0.15),
+          }),
           padding: `${theme.spacings.xs} ${theme.spacings.sm}`,
         }),
         sx,
@@ -86,13 +86,12 @@ export function CreditMemoTotals(props: CreditMemoTotalsProps) {
       )}
 
       <Divider sx={(theme) => ({ my: theme.spacings.xxs })} />
-
       <Box
         className={classes.totalsRow}
         sx={(theme) => ({
           display: 'flex',
           justifyContent: 'space-between',
-          color: theme.palette.primary.main,
+          color: theme.vars.palette.primary.main,
         })}
       >
         <Typography>
@@ -108,7 +107,7 @@ export function CreditMemoTotals(props: CreditMemoTotalsProps) {
           sx={(theme) => ({
             display: 'flex',
             justifyContent: 'space-between',
-            color: theme.palette.text.disabled,
+            color: theme.vars.palette.text.disabled,
           })}
         >
           <Typography>

package/components/CustomerForms/useCustomerCreateForm.ts

@@ -6,7 +6,7 @@ import {
   type UseAttributesFormConfig,
 } from '@graphcommerce/magento-store'
 import { useFormGqlMutation, type UseFormGraphQlOptions } from '@graphcommerce/react-hook-form'
-import type { MutationHookOptions } from '@apollo/client'
+import type { useMutation } from '@apollo/client/react'
 import {
   UseCustomerCreateFormDocument,
   type UseCustomerCreateFormMutation,
@@ -46,7 +46,7 @@ export function useCustomerCreateForm(
     UseCustomerCreateFormMutation,
     CreateCustomerFormValues
   >,
-  mutationOptions?: MutationHookOptions<UseCustomerCreateFormMutation, CreateCustomerFormValues>,
+  mutationOptions?: useMutation.Options<UseCustomerCreateFormMutation, CreateCustomerFormValues>,
 ) {
   const attributes = useAttributesForm({
     formCode: 'customer_account_create',

package/components/CustomerForms/useCustomerUpdateForm.ts

@@ -7,7 +7,7 @@ import {
   type UseAttributesFormConfig,
 } from '@graphcommerce/magento-store'
 import { useFormGqlMutation, type UseFormGraphQlOptions } from '@graphcommerce/react-hook-form'
-import type { MutationHookOptions } from '@apollo/client'
+import type { useMutation } from '@apollo/client/react'
 import type { OmitDeep } from 'type-fest'
 import type { CustomerInfoFragment } from '../../hooks'
 import {
@@ -93,7 +93,7 @@ export function useCustomerUpdateForm(
     UseCustomerUpdateFormMutation,
     UpdateCustomerFormValues
   >,
-  mutationOptions?: MutationHookOptions<UseCustomerUpdateFormMutation, UpdateCustomerFormValues>,
+  mutationOptions?: useMutation.Options<UseCustomerUpdateFormMutation, UpdateCustomerFormValues>,
 ) {
   const { customer, ...attributeFormConfig } = config
   const attributes = useAttributesForm({

package/components/EditAddressForm/EditAddressForm.tsx

@@ -99,7 +99,6 @@ export function EditAddressForm(props: EditAddressFormProps) {
             showValid
           />
         </FormRow>
-
         {billingAddressReadonly && address?.default_billing ? (
           <Trans>
             You can not change this address as it is your billing address. Not correct? Please
@@ -119,7 +118,6 @@ export function EditAddressForm(props: EditAddressFormProps) {
           </FormActions>
         )}
       </Form>
-
       <ApolloErrorSnackbar error={error} />
     </>
   )

package/components/ForgotPasswordForm/ForgotPasswordForm.tsx

@@ -56,9 +56,7 @@ export function ForgotPasswordForm(props: ForgotPasswordFormProps) {
           showValid
         />
       </FormRow>
-
       <ApolloCustomerErrorAlert error={error} />
-
       <FormActions>
         <Button
           type='submit'