@graphcommerce/magento-customer 10.0.0-canary.66 → 10.0.0-canary.68

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 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
+
+- [#2540](https://github.com/graphcommerce-org/graphcommerce/pull/2540) [`36e2bac`](https://github.com/graphcommerce-org/graphcommerce/commit/36e2bacb4fe765ce1fcd24dc36736e90bb17a7dc) - Add billingAddress permission (EDITABLE | READONLY) that controls whether the end user can update their billing address in the account section and checkout. ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
 ## 10.0.0-canary.66
 
 ## 10.0.0-canary.65

package/components/AccountAddress/AccountAddress.tsx

@@ -1,7 +1,8 @@
-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'
+import { useBillingAddressPermission } from '../../hooks'
 import { AddressMultiLine } from '../AddressMultiLine/AddressMultiLine'
 import { DeleteCustomerAddressForm } from '../DeleteCustomerAddressForm/DeleteCustomerAddressForm'
 import { UpdateDefaultAddressForm } from '../UpdateDefaultAddressForm/UpdateDefaultAddressForm'
@@ -16,10 +17,12 @@ const { classes } = extendableComponent(name, parts)
 export function AccountAddress(props: AccountAddressProps) {
   const { id, sx = [], ...addressProps } = props
 
+  const billingAddressReadonly = useBillingAddressPermission() === 'READONLY'
+
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           display: 'flex',
           justifyContent: 'space-between',
@@ -27,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} />
@@ -48,7 +51,9 @@ export function AccountAddress(props: AccountAddressProps) {
         <Link href={`/account/addresses/edit?addressId=${id}`} color='primary' underline='hover'>
           <Trans>Edit</Trans>
         </Link>
-        <DeleteCustomerAddressForm addressId={id ?? undefined} />
+        {!(billingAddressReadonly && addressProps.default_billing) && (
+          <DeleteCustomerAddressForm addressId={id ?? undefined} />
+        )}
       </Box>
     </Box>
   )

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/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/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/EditAddressForm/EditAddressForm.tsx

@@ -6,6 +6,7 @@ import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { useRouter } from 'next/router'
+import { useBillingAddressPermission } from '../../hooks'
 import type { AccountAddressFragment } from '../AccountAddress/AccountAddress.gql'
 import { AddressFields } from '../AddressFields/AddressFields'
 import { CompanyFields } from '../CompanyFields'
@@ -24,10 +25,12 @@ export function EditAddressForm(props: EditAddressFormProps) {
   const { address, sx } = props
 
   const router = useRouter()
+  const billingAddressReadonly = useBillingAddressPermission() === 'READONLY'
 
   const form = useFormGqlMutation(
     UpdateCustomerAddressDocument,
     {
+      disabled: billingAddressReadonly && (address?.default_billing ?? false),
       defaultValues: {
         id: address?.id ?? undefined,
         firstname: address?.firstname,
@@ -96,20 +99,25 @@ export function EditAddressForm(props: EditAddressFormProps) {
             showValid
           />
         </FormRow>
-
-        <FormActions sx={{ paddingBottom: 0 }}>
-          <Button
-            type='submit'
-            variant='pill'
-            color='primary'
-            size='large'
-            loading={formState.isSubmitting}
-          >
-            <Trans>Save changes</Trans>
-          </Button>
-        </FormActions>
+        {billingAddressReadonly && address?.default_billing ? (
+          <Trans>
+            You can not change this address as it is your billing address. Not correct? Please
+            contact our support to update this.
+          </Trans>
+        ) : (
+          <FormActions sx={{ paddingBottom: 0 }}>
+            <Button
+              type='submit'
+              variant='pill'
+              color='primary'
+              size='large'
+              loading={formState.isSubmitting}
+            >
+              <Trans>Save changes</Trans>
+            </Button>
+          </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'

package/components/Invoice/InvoiceCard.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 { InvoiceCardFragment } from './InvoiceCard.gql'
 
 export type InvoiceCardProps = {
@@ -26,10 +26,10 @@ export function InvoiceCard(props: InvoiceCardProps) {
           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 InvoiceCard(props: InvoiceCardProps) {
             theme.breakpoints.values,
           ),
           '&:hover': {
-            backgroundColor: theme.palette.action.hover,
+            backgroundColor: theme.vars.palette.action.hover,
           },
           display: 'grid',
           gridTemplate: `