@graphcommerce/magento-customer 9.1.0-canary.54 → 10.0.0-canary.56

package/components/Order/OrderStateLabel/OrderStateLabel.tsx

@@ -1,5 +1,5 @@
 import { extendableComponent } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import type { OrderState, OrderStateProps } from '../../../utils'

package/components/Order/OrderTotals/OrderTotals.tsx

@@ -1,6 +1,6 @@
 import { Money } from '@graphcommerce/magento-store'
 import { breakpointVal, extendableComponent, sxx } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Divider, lighten, Typography } from '@mui/material'
 import type { OrderTotalsFragment } from './OrderTotals.gql'
@@ -44,7 +44,7 @@ export function OrderTotals(props: OrderTotalsProps) {
     >
       <Box className={classes.totalsRow} sx={{ display: 'flex', justifyContent: 'space-between' }}>
         <Typography>
-          <Trans id='Products' />
+          <Trans>Products</Trans>
         </Typography>
         <Money {...total?.subtotal} />
       </Box>
@@ -68,7 +68,9 @@ export function OrderTotals(props: OrderTotalsProps) {
           sx={{ display: 'flex', justifyContent: 'space-between' }}
         >
           <Typography>
-            <Trans id='Shipping ({0} {1})' values={{ 0: carrier, 1: shipping_method }} />
+            <Trans>
+              Shipping ({carrier} {shipping_method})
+            </Trans>
           </Typography>
           <Money {...total?.total_shipping} />
         </Box>
@@ -87,7 +89,7 @@ export function OrderTotals(props: OrderTotalsProps) {
         })}
       >
         <Typography>
-          <Trans id='Grand total' />
+          <Trans>Grand total</Trans>
         </Typography>
         <Money {...total?.grand_total} />
       </Box>
@@ -105,7 +107,7 @@ export function OrderTotals(props: OrderTotalsProps) {
           })}
         >
           <Typography>
-            <Trans id='Including {0}' values={{ 0: tax?.title }} />
+            <Trans>Including {tax?.title}</Trans>
           </Typography>
           <Money {...tax?.amount} />
         </Box>

package/components/ReorderItems/ReorderItems.tsx

@@ -2,7 +2,7 @@
 import { useFormGqlMutationCart } from '@graphcommerce/magento-cart'
 import { AddProductsToCartSnackbarMessage } from '@graphcommerce/magento-product/components/AddProductsToCart/AddProductsToCartSnackbarMessage'
 import { iconChevronRight, IconSvg, LinkOrButton, nonNullable } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import { Box } from '@mui/material'
 import type { OrderItemsFragment } from '../Order'
 import type { ReorderItemsMutation, ReorderItemsMutationVariables } from './ReorderItems.gql'
@@ -45,6 +45,7 @@ export function ReorderItems(props: ReorderItemsProps) {
         error={error}
         userErrors={errors?.filter(nonNullable)}
         showSuccess={!!cart}
+        cart={cart}
       />
     </Box>
   )

package/components/ResetPasswordForm/ResetPasswordForm.tsx

@@ -1,7 +1,7 @@
 import { EmailElement, PasswordRepeatElement } from '@graphcommerce/ecommerce-ui'
 import { Button, Form, FormActions, FormRow } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { useRouter } from 'next/router'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import { ValidatedPasswordElement } from '../ValidatedPasswordElement/ValidatedPasswordElement'
@@ -56,7 +56,7 @@ export function ResetPasswordForm(props: ResetPasswordFormProps) {
           name='newPassword'
           autoComplete='new-password'
           variant='outlined'
-          label={<Trans id='New password' />}
+          label={<Trans>New password</Trans>}
           required
           disabled={formState.isSubmitting}
         />
@@ -66,7 +66,7 @@ export function ResetPasswordForm(props: ResetPasswordFormProps) {
           autoComplete='new-password'
           passwordFieldName='newPassword'
           variant='outlined'
-          label={<Trans id='Confirm password' />}
+          label={<Trans>Confirm password</Trans>}
           required
           disabled={formState.isSubmitting}
         />
@@ -83,7 +83,7 @@ export function ResetPasswordForm(props: ResetPasswordFormProps) {
           size='large'
           {...buttonProps}
         >
-          <Trans id='Save new password' />
+          <Trans>Save new password</Trans>
         </Button>
       </FormActions>
     </Form>

package/components/Shipment/ShipmentCard.tsx

@@ -7,7 +7,7 @@ import {
   NextLink,
   sxx,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, lighten } from '@mui/material'
 import { TrackingLink } from '../TrackingLink/TrackingLink'

package/components/Shipment/ShipmentDetails.tsx

@@ -5,7 +5,7 @@ import {
   filterNonNullableKeys,
   SectionContainer,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, lighten, Typography } from '@mui/material'
 import { TrackingLink } from '../TrackingLink/TrackingLink'

package/components/Shipment/ShipmentItem.tsx

@@ -1,7 +1,7 @@
 import { Image } from '@graphcommerce/image'
 import { Money, PriceModifiersList, type PriceModifier } from '@graphcommerce/magento-store'
 import { ActionCard, actionCardImageSizes, type ActionCardProps } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { Box } from '@mui/material'
 import type { ShipmentItemFragment } from './ShipmentItem.gql'
 
@@ -103,7 +103,7 @@ export function ShipmentItem(props: ShipmentItemProps) {
         <>
           {priceModifiers && priceModifiers.length > 0 && (
             <PriceModifiersList
-              label={<Trans id='Base Price'>Base price</Trans>}
+              label={<Trans>Base price</Trans>}
               modifiers={[...priceModifiers]}
               total={product_sale_price.value ?? 0}
               currency={product_sale_price.currency}

package/components/Shipment/ShipmentItems.tsx

@@ -5,7 +5,7 @@ import {
   nonNullable,
   SectionContainer,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import type { ShipmentFragment } from './Shipment.gql'

package/components/SignInForm/SignInForm.tsx

@@ -2,8 +2,8 @@ import type { UseFormClearErrors, UseFormSetError } from '@graphcommerce/ecommer
 import { PasswordElement } from '@graphcommerce/ecommerce-ui'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import { Button, FormActions, FormRow } from '@graphcommerce/next-ui'
-import { t } from '@lingui/macro'
-import { Trans } from '@lingui/react'
+import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, FormControl, Link } from '@mui/material'
 import { useSignInForm } from '../../hooks/useSignInForm'
@@ -49,7 +49,7 @@ export function SignInForm(props: SignInFormProps) {
           error={!!formState.errors.password || !!authError}
           control={control}
           name='password'
-          label={<Trans id='Password' />}
+          label={<Trans>Password</Trans>}
           autoFocus={!!email}
           autoComplete='current-password'
           id='current-password'
@@ -58,7 +58,7 @@ export function SignInForm(props: SignInFormProps) {
           InputProps={{
             endAdornment: (
               <Link href='/account/forgot-password' underline='hover' sx={{ whiteSpace: 'nowrap' }}>
-                <Trans id='Forgot password?' />
+                <Trans>Forgot password?</Trans>
               </Link>
             ),
           }}
@@ -76,7 +76,7 @@ export function SignInForm(props: SignInFormProps) {
             variant='pill'
             size='large'
           >
-            <Trans id='Sign in' />
+            <Trans>Sign in</Trans>
           </Button>
         </FormControl>
       </FormActions>

package/components/SignInForm/SignInFormInline.tsx

@@ -1,6 +1,6 @@
 import { PasswordElement } from '@graphcommerce/ecommerce-ui'
 import { Button, extendableComponent } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Link } from '@mui/material'
 import { useSignInForm } from '../../hooks/useSignInForm'
@@ -45,7 +45,7 @@ export function SignInFormInline(props: InlineSignInFormProps) {
         control={control}
         variant='outlined'
         name='password'
-        label={<Trans id='Password' />}
+        label={<Trans>Password</Trans>}
         autoFocus
         autoComplete='current-password'
         id='current-password'
@@ -54,7 +54,7 @@ export function SignInFormInline(props: InlineSignInFormProps) {
         InputProps={{
           endAdornment: (
             <Link href='/account/forgot-password' underline='hover' sx={{ whiteSpace: 'nowrap' }}>
-              <Trans id='Forgot password?' />
+              <Trans>Forgot password?</Trans>
             </Link>
           ),
         }}
@@ -66,7 +66,7 @@ export function SignInFormInline(props: InlineSignInFormProps) {
         variant='pill'
         sx={{ alignSelf: 'start', marginTop: (theme) => `calc(${theme.spacings.xxs} * .33)` }}
       >
-        <Trans id='Sign in' />
+        <Trans>Sign in</Trans>
       </Button>
       {children}
     </Box>

package/components/SignUpForm/SignUpForm.tsx

@@ -2,8 +2,10 @@ import { FormPersist, PasswordRepeatElement, SwitchElement } from '@graphcommerc
 import { useQuery } from '@graphcommerce/graphql'
 import { AttributesFormAutoLayout, StoreConfigDocument } from '@graphcommerce/magento-store'
 import { Button, FormActions, FormRow } from '@graphcommerce/next-ui'
+import { magentoVersion } from '@graphcommerce/next-config/config'
 import type { UseFormClearErrors, UseFormSetError } from '@graphcommerce/react-hook-form'
-import { t, Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
+import { t } from '@lingui/core/macro'
 import { Alert } from '@mui/material'
 import { useSignInForm } from '../../hooks/useSignInForm'
 import { ApolloCustomerErrorSnackbar } from '../ApolloCustomerError/ApolloCustomerErrorSnackbar'
@@ -64,7 +66,7 @@ export function SignUpForm(props: SignUpFormProps) {
   ) {
     return (
       <Alert>
-        <Trans id='Registration successful. Please check your inbox to confirm your email address ({email})'>
+        <Trans>
           Registration successful. Please check your inbox to confirm your email address ({email})
         </Trans>
       </Alert>
@@ -78,7 +80,7 @@ export function SignUpForm(props: SignUpFormProps) {
           control={control}
           name='input.password'
           variant='outlined'
-          label={<Trans id='Password'>Password</Trans>}
+          label={<Trans>Password</Trans>}
           autoFocus={!!email}
           autoComplete='new-password'
           required
@@ -88,13 +90,13 @@ export function SignUpForm(props: SignUpFormProps) {
           name='confirmPassword'
           passwordFieldName='input.password'
           variant='outlined'
-          label={<Trans id='Confirm password'>Confirm password</Trans>}
+          label={<Trans>Confirm password</Trans>}
           autoComplete='new-password'
           required
         />
       </FormRow>
 
-      {import.meta.graphCommerce.magentoVersion < 247 ? (
+      {magentoVersion < 247 ? (
         <NameFields
           form={form}
           names={{
@@ -116,7 +118,7 @@ export function SignUpForm(props: SignUpFormProps) {
         control={control}
         name='input.is_subscribed'
         disabled={formState.isSubmitting}
-        label={<Trans id='Subscribe to newsletter'>Subscribe to newsletter</Trans>}
+        label={<Trans>Subscribe to newsletter</Trans>}
       />
 
       <ApolloCustomerErrorSnackbar error={error} />
@@ -130,7 +132,7 @@ export function SignUpForm(props: SignUpFormProps) {
           size='large'
           loading={formState.isSubmitting}
         >
-          <Trans id='Create Account'>Create Account</Trans>
+          <Trans>Create Account</Trans>
         </Button>
       </FormActions>
       <FormPersist form={form} name='SignUp' exclude={['input.password', 'confirmPassword']} />

package/components/SignUpForm/SignUpFormInline.tsx

@@ -4,7 +4,7 @@ import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { Button, extendableComponent, Form, FormRow } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { Alert, Box } from '@mui/material'
 import React from 'react'
 import { useSignInForm } from '../../hooks/useSignInForm'
@@ -68,10 +68,7 @@ export function SignUpFormInline(props: SignUpFormInlineProps) {
   ) {
     return (
       <Alert>
-        <Trans
-          id='Registration successful. Please check your inbox to confirm your email address ({email})'
-          values={{ email }}
-        />
+        <Trans>Registration successful. Please check your inbox to confirm your email address ({email})</Trans>
       </Alert>
     )
   }
@@ -84,7 +81,7 @@ export function SignUpFormInline(props: SignUpFormInlineProps) {
           name='password'
           autoComplete='new-password'
           variant='outlined'
-          label={<Trans id='Password' />}
+          label={<Trans>Password</Trans>}
           required={required.password}
           disabled={formState.isSubmitting}
           error={!!inputError}
@@ -96,7 +93,7 @@ export function SignUpFormInline(props: SignUpFormInlineProps) {
           passwordFieldName='password'
           autoComplete='new-password'
           variant='outlined'
-          label={<Trans id='Confirm password' />}
+          label={<Trans>Confirm password</Trans>}
           required
           disabled={formState.isSubmitting}
         />
@@ -121,7 +118,7 @@ export function SignUpFormInline(props: SignUpFormInlineProps) {
               color='secondary'
               variant='pill'
             >
-              <Trans id='Create Account' />
+              <Trans>Create Account</Trans>
             </Button>
           </Box>
         </FormRow>

package/components/TrackingLink/TrackingLink.tsx

@@ -1,5 +1,5 @@
 import { iconLocation, IconSvg } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Link, Typography } from '@mui/material'
 import type { TrackingLinkFragment } from './TrackingLink.gql'
@@ -32,7 +32,7 @@ export function TrackingLink(props: TrackingLinkProps) {
           sx={{ display: 'inline-flex', alignItems: 'center' }}
         >
           <IconSvg src={iconLocation} size='small' />
-          <Trans id='Follow order' />
+          <Trans>Follow order</Trans>
         </Link>
       )}
 

package/components/UpdateCustomerEmailForm/UpdateCustomerEmailForm.tsx

@@ -10,8 +10,8 @@ import {
   MessageSnackbar,
 } from '@graphcommerce/next-ui'
 import { emailPattern, useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
-import { Trans } from '@lingui/react'
+import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
 import { ApolloCustomerErrorSnackbar } from '../ApolloCustomerError'
 import type {
   UpdateCustomerEmailMutation,
@@ -57,7 +57,7 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
         <TextFieldElement
           variant='outlined'
           type='text'
-          label={<Trans id='Current email' />}
+          label={<Trans>Current email</Trans>}
           required
           name='currentEmail'
           control={control}
@@ -73,7 +73,7 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
           autoComplete='off'
           error={formState.isSubmitted && !!formState.errors.email}
           helperText={formState.isSubmitted && formState.errors.email?.message}
-          label={<Trans id='New email' />}
+          label={<Trans>New email</Trans>}
           required={required.email}
           name='email'
           rules={{
@@ -90,12 +90,12 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
           autoComplete='off'
           error={formState.isSubmitted && !!formState.errors.confirmEmail}
           helperText={formState.isSubmitted && formState.errors.confirmEmail?.message}
-          label={<Trans id='Confirm new email' />}
+          label={<Trans>Confirm new email</Trans>}
           required
           name='confirmEmail'
           rules={{
             required: true,
-            validate: (value) => value === watchNewEmail || i18n._(/* i18n */ "Emails don't match"),
+            validate: (value) => value === watchNewEmail || t`Emails don't match`,
           }}
           showValid
           control={control}
@@ -107,7 +107,7 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
           control={control}
           variant='outlined'
           name='password'
-          label={<Trans id='Password' />}
+          label={<Trans>Password</Trans>}
           autoComplete='current-password'
           required={required.password}
           disabled={formState.isSubmitting}
@@ -127,7 +127,7 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
           size='large'
           loading={formState.isSubmitting}
         >
-          <Trans id='Save changes' />
+          <Trans>Save changes</Trans>
         </Button>
       </FormActions>
 
@@ -137,7 +137,7 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
         sticky
         open={formState.isSubmitSuccessful && !formState.isSubmitting && !error}
       >
-        <Trans id='Successfully updated email' />
+        <Trans>Successfully updated email</Trans>
       </MessageSnackbar>
     </Form>
   )

package/components/UpdateDefaultAddressForm/UpdateDefaultAddressForm.tsx

@@ -1,5 +1,5 @@
 import { Controller, FormAutoSubmit, useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { FormControl, FormControlLabel, FormHelperText, Switch } from '@mui/material'
 import React, { useEffect, useMemo } from 'react'
@@ -47,7 +47,7 @@ export function UpdateDefaultAddressForm(props: UpdateDefaultAddressFormProps) {
           <FormControl error={!!formState.errors.defaultShipping}>
             <FormControlLabel
               control={<Switch color='primary' />}
-              label={<Trans id='Shipping address' />}
+              label={<Trans>Shipping address</Trans>}
               checked={value}
               inputRef={ref}
               onBlur={onBlur}
@@ -68,7 +68,7 @@ export function UpdateDefaultAddressForm(props: UpdateDefaultAddressFormProps) {
           <FormControl error={!!formState.errors.defaultBilling}>
             <FormControlLabel
               control={<Switch color='primary' />}
-              label={<Trans id='Billing address' />}
+              label={<Trans>Billing address</Trans>}
               checked={value}
               inputRef={ref}
               onBlur={onBlur}

package/components/ValidatedPasswordElement/ValidatedPasswordElement.tsx

@@ -3,13 +3,13 @@ import { PasswordElement } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import type { FieldValues } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 
 export type ValidatedPasswordElementProps<T extends FieldValues> = PasswordElementProps<T>
 
 export function ValidatedPasswordElement<TFieldValues extends FieldValues>(
   props: PasswordElementProps<TFieldValues>,
-): JSX.Element {
+): React.ReactNode {
   const { ...textFieldProps } = props
 
   const storeConfig = useQuery(StoreConfigDocument).data?.storeConfig
@@ -20,9 +20,7 @@ export function ValidatedPasswordElement<TFieldValues extends FieldValues>(
 
   rules.minLength = {
     value: minPasswordLength,
-    message: i18n._(/* i18n */ 'Password must have at least {minPasswordLength} characters', {
-      minPasswordLength,
-    }),
+    message: t`Password must have at least ${minPasswordLength} characters`,
   }
 
   rules.validate = (value: string) => {
@@ -35,10 +33,7 @@ export function ValidatedPasswordElement<TFieldValues extends FieldValues>(
     if (pass.match(/[^a-zA-Z0-9]+/)) counter++
 
     if (counter < passwordMinCharacterSets) {
-      return i18n._(
-        /* i18n */ 'Minimum of different classes of characters in password is {passwordMinCharacterSets}. Classes of characters: Lower Case, Upper Case, Digits, Special Characters.',
-        { passwordMinCharacterSets },
-      )
+      return t`Minimum of different classes of characters in password is ${passwordMinCharacterSets}. Classes of characters: Lower Case, Upper Case, Digits, Special Characters.`
     }
 
     return true

package/components/WaitForCustomer/WaitForCustomer.tsx

@@ -1,8 +1,8 @@
 import type { WaitForQueriesProps } from '@graphcommerce/ecommerce-ui'
 import { mergeErrors, WaitForQueries } from '@graphcommerce/ecommerce-ui'
 import type { FullPageMessageProps } from '@graphcommerce/next-ui'
-import { FullPageMessage, iconPerson, IconSvg } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { FullPageMessage, iconPerson, IconSvg, nonNullable } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react/macro'
 import { Button, CircularProgress } from '@mui/material'
 import React from 'react'
 import type { SetOptional } from 'type-fest'
@@ -15,10 +15,6 @@ export type WaitForCustomerProps = SetOptional<WaitForQueriesProps, 'waitFor'> &
     allowError?: boolean
   }
 
-export function nonNullable<T>(value: T): value is NonNullable<T> {
-  return value !== null && value !== undefined
-}
-
 /**
  * A full page wrapper to render customer specific information.
  *
@@ -65,10 +61,10 @@ export function WaitForCustomer(props: WaitForCustomerProps) {
         fallback ?? (
           <FullPageMessage
             icon={<CircularProgress />}
-            title={<Trans id='Loading your data' />}
+            title={<Trans>Loading your data</Trans>}
             {...rest}
           >
-            <Trans id='This may take a second' />
+            <Trans>This may take a second</Trans>
           </FullPageMessage>
         )
       }
@@ -77,13 +73,13 @@ export function WaitForCustomer(props: WaitForCustomerProps) {
         (unauthenticated ?? (
           <FullPageMessage
             icon={<IconSvg src={iconPerson} size='xxl' />}
-            title={<Trans id='You must sign in to continue' />}
+            title={<Trans>You must sign in to continue</Trans>}
             button={
               <Button href='/account/signin' variant='pill' color='secondary' size='large'>
                 {!session.valid ? (
-                  <Trans id='Sign in' />
+                  <Trans>Sign in</Trans>
                 ) : (
-                  <Trans id='Sign in or create an account!' />
+                  <Trans>Sign in or create an account!</Trans>
                 )}
               </Button>
             }

package/components/index.ts

@@ -19,6 +19,7 @@ export * from './CompanyFields'
 export * from './ConfirmCustomer/ConfirmCustomerForm'
 export * from './ContactForm/ContactForm'
 export * from './CreateCustomerAddressForm/CreateCustomerAddressForm'
+export * from './CreateCustomerAddressForm/CustomerAddress.gql'
 export * from './CreditMemo'
 export * from './CustomerFab/CustomerFab'
 export * from './CustomerForms'

package/graphql/index.ts

@@ -1,4 +1,5 @@
 export * from './fragments/AccountDashboardQueryFragment.gql'
+export * from './fragments/AccountDashboardQueryFragment.gql'
 export * from './queries/AccountDashboard.gql'
 export * from './queries/AccountDashboardAddresses.gql'
 export * from './queries/AccountDashboardCustomer.gql'

package/hooks/useAccountSignInUpForm.tsx

@@ -1,5 +1,6 @@
 import { usePageContext } from '@graphcommerce/framer-next-pages'
 import { useQuery } from '@graphcommerce/graphql'
+import { enableGuestCheckoutLogin } from '@graphcommerce/next-config/config'
 import { useUrlQuery } from '@graphcommerce/next-ui'
 import { useFormGqlQuery } from '@graphcommerce/react-hook-form'
 import { useEffect } from 'react'
@@ -20,7 +21,7 @@ export function useAccountSignInUpForm(props: UseFormIsEmailAvailableProps = {})
   const { token, valid } = useCustomerSession()
 
   const canSignUp = useCustomerAccountCanSignUp()
-  const isToggleMethod = !import.meta.graphCommerce.enableGuestCheckoutLogin || !canSignUp
+  const isToggleMethod = !enableGuestCheckoutLogin || !canSignUp
 
   const [queryState, setRouterQuery] = useUrlQuery<{ email?: string | null }>()
 

package/hooks/useCustomerPermissions.ts

@@ -1,10 +1,9 @@
+import { permissions } from '@graphcommerce/next-config/config'
 import { useStorefrontConfig } from '@graphcommerce/next-ui'
 
 function useCustomerAccountPermission() {
   return (
-    useStorefrontConfig().permissions?.customerAccount ??
-    import.meta.graphCommerce.permissions?.customerAccount ??
-    'ENABLED'
+    useStorefrontConfig().permissions?.customerAccount ?? permissions?.customerAccount ?? 'ENABLED'
   )
 }