@graphcommerce/magento-customer 9.0.0-canary.99 → 9.0.0

package/components/CustomerFab/CustomerFab.tsx

@@ -1,25 +1,24 @@
 import {
-  iconPerson,
   DesktopHeaderBadge,
   IconSvg,
   extendableComponent,
+  iconPerson,
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
-import { Fab, FabProps as FabPropsType, NoSsr, SxProps, Theme } from '@mui/material'
+import type { BadgeProps, FabProps as FabPropsType, SxProps, Theme } from '@mui/material'
+import { Fab, NoSsr } from '@mui/material'
 import React from 'react'
-import {
-  useCustomerAccountCanSignIn,
-  useCustomerSession,
-  UseCustomerSessionReturn,
-} from '../../hooks'
+import type { UseCustomerSessionReturn } from '../../hooks'
+import { useCustomerAccountCanSignIn, useCustomerSession } from '../../hooks'
 
-type CustomerFabContentProps = {
+export type CustomerFabContentProps = {
   icon?: React.ReactNode
   authHref: string
   guestHref: string
   FabProps?: Omit<FabPropsType, 'children'>
   sx?: SxProps<Theme>
   session?: UseCustomerSessionReturn
+  BadgeProps?: BadgeProps
 }
 
 const name = 'CustomerFab'
@@ -27,7 +26,7 @@ const parts = ['root'] as const
 const { classes } = extendableComponent(name, parts)
 
 function CustomerFabContent(props: CustomerFabContentProps) {
-  const { session, icon, guestHref, authHref, FabProps, sx } = props
+  const { session, icon, guestHref, authHref, FabProps, sx, BadgeProps } = props
 
   return (
     <Fab
@@ -45,6 +44,7 @@ function CustomerFabContent(props: CustomerFabContentProps) {
         color={session?.valid ? 'primary' : 'error'}
         variant='dot'
         overlap='circular'
+        {...BadgeProps}
       >
         {icon ?? <IconSvg src={iconPerson} size='large' />}
       </DesktopHeaderBadge>

package/components/CustomerMenuFabItem/CustomerMenuFabItem.tsx

@@ -1,10 +1,13 @@
-import { MenuFabSecondaryItem, iconPerson, IconSvg } from '@graphcommerce/next-ui'
-import { Badge, NoSsr, SxProps, Theme } from '@mui/material'
-import React, { MouseEventHandler } from 'react'
+import { IconSvg, MenuFabSecondaryItem, iconPerson } from '@graphcommerce/next-ui'
+import type { SxProps, Theme } from '@mui/material'
+import { Badge, NoSsr } from '@mui/material'
+import type { MouseEventHandler } from 'react'
+import React from 'react'
 import { useCustomerAccountCanSignIn } from '../../hooks'
-import { useCustomerSession, UseCustomerSessionReturn } from '../../hooks/useCustomerSession'
+import type { UseCustomerSessionReturn } from '../../hooks/useCustomerSession'
+import { useCustomerSession } from '../../hooks/useCustomerSession'
 
-type CustomerMenuFabItemProps = {
+export type CustomerMenuFabItemProps = {
   icon?: React.ReactNode
   children: React.ReactNode
   authHref: string

package/components/EditAddressForm/EditAddressForm.tsx

@@ -4,21 +4,17 @@ import { CountryRegionsDocument } from '@graphcommerce/magento-store'
 import { Button, Form, FormActions, FormRow } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
-import { SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
 import { useRouter } from 'next/router'
-import { AccountAddressFragment } from '../AccountAddress/AccountAddress.gql'
+import type { AccountAddressFragment } from '../AccountAddress/AccountAddress.gql'
 import { AddressFields } from '../AddressFields/AddressFields'
 import { CompanyFields } from '../CompanyFields'
 import { NameFields } from '../NameFields/NameFields'
 import { UpdateCustomerAddressDocument } from './UpdateCustomerAddress.gql'
 
-type EditAddressFormProps = {
+export type EditAddressFormProps = {
   address?: AccountAddressFragment
   sx?: SxProps<Theme>
-  /**
-   * @deprecated not used, can be safely removed.
-   */
-  onCompleteRoute?: string
 }
 
 export function EditAddressForm(props: EditAddressFormProps) {

package/components/ForgotPasswordForm/ForgotPasswordForm.tsx

@@ -4,16 +4,18 @@ import { emailPattern, useFormGqlMutation } from '@graphcommerce/react-hook-form
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { Alert, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Alert } from '@mui/material'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
-import {
-  ForgotPasswordDocument,
-  ForgotPasswordMutation,
-  ForgotPasswordMutationVariables,
-} from './ForgotPassword.gql'
+import type { ForgotPasswordMutation, ForgotPasswordMutationVariables } from './ForgotPassword.gql'
+import { ForgotPasswordDocument } from './ForgotPassword.gql'
 
-export function ForgotPasswordForm(props: { sx?: SxProps<Theme> }) {
-  const { sx = [] } = props
+export type ForgotPasswordFormProps = {
+  sx?: SxProps<Theme>
+  buttonProps?: React.ComponentProps<typeof Button>
+}
+export function ForgotPasswordForm(props: ForgotPasswordFormProps) {
+  const { sx = [], buttonProps } = props
   const form = useFormGqlMutation<ForgotPasswordMutation, ForgotPasswordMutationVariables>(
     ForgotPasswordDocument,
   )
@@ -64,6 +66,7 @@ export function ForgotPasswordForm(props: { sx?: SxProps<Theme> }) {
           color='primary'
           variant='pill'
           size='large'
+          {...buttonProps}
         >
           <Trans id='Send password reset email' />
         </Button>

package/components/GuestOrderOverview/GuestOrderOverviewForm.tsx

@@ -10,7 +10,8 @@ import { OrderDetails } from '../OrderDetails/OrderDetails'
 import { OrderTotals } from '../OrderDetails/OrderTotals'
 import { OrderItems } from '../OrderItems/OrderItems'
 import { OrderStateLabel } from '../OrderStateLabel/OrderStateLabel'
-import { GuestOrderDocument, GuestOrderQueryVariables } from './GuestOrder.gql'
+import type { GuestOrderQueryVariables } from './GuestOrder.gql'
+import { GuestOrderDocument } from './GuestOrder.gql'
 
 export function GuestOrderOverviewForm() {
   const [urlQuery, setUrlQuery] = useUrlQuery<Partial<GuestOrderQueryVariables>>(true)

package/components/NameFields/NameFields.tsx

@@ -1,8 +1,10 @@
 import { SelectElement, TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import { FormRow } from '@graphcommerce/next-ui'
-import { assertFormGqlOperation, UseFormReturn } from '@graphcommerce/react-hook-form'
+import type { UseFormReturn } from '@graphcommerce/react-hook-form'
+import { assertFormGqlOperation } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
+
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 
 type NameFieldValues = {
@@ -11,7 +13,7 @@ type NameFieldValues = {
   prefix?: string
 }
 
-type NameFieldProps = {
+export type NameFieldProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   form: UseFormReturn<any>
   readOnly?: boolean

package/components/NoOrdersFound/NoOrdersFound.tsx

@@ -1,11 +1,12 @@
-import { IconHeader, iconBox, extendableComponent } from '@graphcommerce/next-ui'
+import { IconHeader, extendableComponent, iconBox } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
 
 const parts = ['root'] as const
 const { classes } = extendableComponent('NoOrdersFound', parts)
 
-type NoOrdersFoundProps = { sx?: SxProps<Theme> }
+export type NoOrdersFoundProps = { sx?: SxProps<Theme> }
 
 export function NoOrdersFound(props: NoOrdersFoundProps) {
   const { sx = [] } = props

package/components/OrderCard/OrderCard.tsx

@@ -1,13 +1,14 @@
 import { Money } from '@graphcommerce/magento-store'
-import { DateTimeFormat, extendableComponent, NextLink } from '@graphcommerce/next-ui'
-import { Box, styled, SxProps, Theme, Skeleton, ListItemButton } from '@mui/material'
-import { UseOrderCardItemImages } from '../../hooks/useOrderCardItemImages'
+import { DateTimeFormat, NextLink, extendableComponent } from '@graphcommerce/next-ui'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, ListItemButton, Skeleton, styled } from '@mui/material'
+import type { UseOrderCardItemImages } from '../../hooks/useOrderCardItemImages'
 import { OrderCardItemImage } from '../OrderCardItemImage/OrderCardItemImage'
 import { OrderStateLabel } from '../OrderStateLabel/OrderStateLabel'
 import { TrackingLink } from '../TrackingLink/TrackingLink'
-import { OrderCardFragment } from './OrderCard.gql'
+import type { OrderCardFragment } from './OrderCard.gql'
 
-type OrderCardProps = Partial<OrderCardFragment> & {
+export type OrderCardProps = Partial<OrderCardFragment> & {
   loading?: boolean
   images?: UseOrderCardItemImages
   sx?: SxProps<Theme>
@@ -102,7 +103,7 @@ export function OrderCard(props: OrderCardProps) {
           <Box component='span' className={classes.orderMoney} sx={{ fontWeight: 'bold' }}>
             <Money {...total?.grand_total} />
           </Box>
-          <DateTimeFormat>{order_date}</DateTimeFormat>
+          <DateTimeFormat date={order_date} />
           <span>#{number}</span>
         </OrderRow>
         <OrderRow>

package/components/OrderCardItem/OrderCardItem.tsx

@@ -6,6 +6,10 @@ export type OrderCardItemProps = OrderCardItemFragment & {
   thumbnail?: Pick<ProductImage, 'label' | 'url'>
 }
 
+/**
+ * @deprecated
+ * @public
+ */
 export function OrderCardItem(props: OrderCardItemProps) {
   const { product_sku, product_url_key, thumbnail } = props
 

package/components/OrderCardItemImage/OrderCardItemImage.tsx

@@ -1,13 +1,14 @@
 import { Image } from '@graphcommerce/image'
 import { extendableComponent } from '@graphcommerce/next-ui'
-import { Box, SxProps, Theme } from '@mui/material'
-import { OrderCardItemImageFragment } from '../../hooks/OrderCardItemImage.gql'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import type { OrderCardItemImageFragment } from '../../hooks/OrderCardItemImage.gql'
 
 export type OrderCardItemImageProps = Omit<OrderCardItemImageFragment, 'uid'> & {
   sx?: SxProps<Theme>
 }
 
-const componentName = 'OrderCardItemImage' as const
+const componentName = 'OrderCardItemImage'
 const parts = ['image', 'placeholder'] as const
 const { classes } = extendableComponent(componentName, parts)
 

package/components/OrderDetails/OrderDetails.tsx

@@ -1,22 +1,23 @@
 import {
-  SectionContainer,
-  iconInvoice,
+  DateTimeFormat,
   IconSvg,
-  extendableComponent,
+  SectionContainer,
   breakpointVal,
-  DateTimeFormat,
+  extendableComponent,
+  iconInvoice,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
-import { Box, SxProps, Theme, Typography, lighten } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Typography, lighten } from '@mui/material'
 import { AddressMultiLine } from '../AddressMultiLine/AddressMultiLine'
 import { TrackingLink } from '../TrackingLink/TrackingLink'
-import { OrderDetailsFragment } from './OrderDetails.gql'
+import type { OrderDetailsFragment } from './OrderDetails.gql'
 
 export type OrderDetailsProps = Partial<OrderDetailsFragment> & {
   sx?: SxProps<Theme>
 }
 
-const componentName = 'OrderDetails' as const
+const componentName = 'OrderDetails'
 const parts = [
   'sectionContainer',
   'orderDetailTitle',
@@ -70,9 +71,9 @@ export function OrderDetails(props: OrderDetailsProps) {
           (theme) => ({
             gridColumnGap: theme.spacings.xxl,
             gridRowGap: theme.spacings.md,
-            display: `grid`,
+            display: 'grid',
             [theme.breakpoints.up('sm')]: {
-              gridTemplateColumns: `1fr 1fr`,
+              gridTemplateColumns: '1fr 1fr',
               marginTop: theme.spacings.xxs,
             },
           }),
@@ -97,7 +98,7 @@ export function OrderDetails(props: OrderDetailsProps) {
             className={classes.orderDetailTitle}
             sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '4px' } }}
           >
-            <DateTimeFormat>{order_date}</DateTimeFormat>
+            <DateTimeFormat date={order_date} />
           </SectionContainer>
         </Box>
 

package/components/OrderDetails/OrderTotals.tsx

@@ -1,14 +1,15 @@
 import { Money } from '@graphcommerce/magento-store'
-import { extendableComponent, breakpointVal } from '@graphcommerce/next-ui'
+import { breakpointVal, extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, Divider, SxProps, Theme, Typography } from '@mui/material'
-import { OrderDetailsFragment } from './OrderDetails.gql'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Divider, Typography } from '@mui/material'
+import type { OrderDetailsFragment } from './OrderDetails.gql'
 
 export type OrderTotalsProps = Partial<OrderDetailsFragment> & {
   sx?: SxProps<Theme>
 }
 
-const componentName = 'OrderTotals' as const
+const componentName = 'OrderTotals'
 const parts = ['totalsContainer', 'totalsRow', 'totalsDivider', 'totalsVat'] as const
 const { classes } = extendableComponent(componentName, parts)
 
@@ -77,6 +78,7 @@ export function OrderTotals(props: OrderTotalsProps) {
       </Box>
       {total?.taxes?.map((tax) => (
         <Box
+          key={tax?.title}
           className={classes.totalsVat}
           sx={(theme) => ({
             display: 'flex',

package/components/OrderItem/OrderItem.tsx

@@ -2,17 +2,17 @@ import { Image } from '@graphcommerce/image'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useProductLink } from '@graphcommerce/magento-product/hooks/useProductLink'
 import { Money } from '@graphcommerce/magento-store'
-import { responsiveVal, extendableComponent, NextLink } from '@graphcommerce/next-ui'
+import { NextLink, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
 import { Box } from '@mui/material'
-import { OrderCardItemImageFragment } from '../../hooks/OrderCardItemImage.gql'
-import { OrderItemFragment } from './OrderItem.gql'
+import type { OrderCardItemImageFragment } from '../../hooks/OrderCardItemImage.gql'
+import type { OrderItemFragment } from './OrderItem.gql'
 
-type OrderItemProps = OrderItemFragment & Omit<OrderCardItemImageFragment, 'uid'>
+export type OrderItemProps = OrderItemFragment & Omit<OrderCardItemImageFragment, 'uid'>
 
 const rowImageSize = responsiveVal(70, 110)
 
 type OwnerState = { hasOptions: boolean }
-const componentName = 'OrderItem' as const
+const componentName = 'OrderItem'
 const parts = [
   'root',
   'itemWithoutOptions',

package/components/OrderItems/OrderItems.tsx

@@ -1,17 +1,18 @@
 import { SectionContainer, extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Button, Box, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Button } from '@mui/material'
 import { useState } from 'react'
-import { UseOrderCardItemImages } from '../../hooks/useOrderCardItemImages'
+import type { UseOrderCardItemImages } from '../../hooks/useOrderCardItemImages'
 import { OrderItem } from '../OrderItem/OrderItem'
-import { OrderItemsFragment } from './OrderItems.gql'
+import type { OrderItemsFragment } from './OrderItems.gql'
 
 export type OrderItemsProps = OrderItemsFragment & {
   images?: UseOrderCardItemImages
   sx?: SxProps<Theme>
 }
 
-const componentName = 'OrderItems' as const
+const componentName = 'OrderItems'
 const parts = ['root', 'orderItemsInnerContainer', 'skeletonOrderItem', 'viewAllButton'] as const
 const { classes } = extendableComponent(componentName, parts)
 

package/components/OrderStateLabel/OrderStateLabel.tsx

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

package/components/OrderStateLabel/OrderStateLabelInline.tsx

@@ -1,7 +1,8 @@
 import { alpha } from '@mui/material'
-import { OrderStateLabel, OrderStateLabelProps } from './OrderStateLabel'
+import type { OrderStateLabelProps } from './OrderStateLabel'
+import { OrderStateLabel } from './OrderStateLabel'
 
-type OrderStateLabelInlineProps = OrderStateLabelProps
+export type OrderStateLabelInlineProps = OrderStateLabelProps
 
 export function OrderStateLabelInline(props: OrderStateLabelInlineProps) {
   const { sx = [] } = props
@@ -14,7 +15,7 @@ export function OrderStateLabelInline(props: OrderStateLabelInlineProps) {
         (theme) => ({
           fontStyle: 'normal',
           display: 'inline-block',
-          padding: `0 6px`,
+          padding: '0 6px',
           borderRadius: '3px',
           fontWeight: 'normal',
           background: alpha(theme.palette.secondary.main, 0.125),

package/components/ReorderItems/ReorderItems.tsx

@@ -1,10 +1,10 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { AddProductsToCartSnackbarMessage } from '@graphcommerce/magento-product/components/AddProductsToCart/AddProductsToCartSnackbarMessage'
-import { iconChevronRight, IconSvg, LinkOrButton, nonNullable } from '@graphcommerce/next-ui'
+import { IconSvg, LinkOrButton, iconChevronRight, nonNullable } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/macro'
 import { Box } from '@mui/material'
-import { OrderItemsFragment } from '../OrderItems/OrderItems.gql'
+import type { OrderItemsFragment } from '../OrderItems/OrderItems.gql'
 import { ReorderItemsDocument } from './ReorderItems.gql'
 
 export type ReorderItemsProps = { order: OrderItemsFragment }

package/components/ResetPasswordForm/ResetPasswordForm.tsx

@@ -1,22 +1,20 @@
-import { EmailElement, PasswordRepeatElement, TextFieldElement } from '@graphcommerce/ecommerce-ui'
+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 { useRouter } from 'next/router'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import { ValidatedPasswordElement } from '../ValidatedPasswordElement/ValidatedPasswordElement'
-import {
-  ResetPasswordDocument,
-  ResetPasswordMutation,
-  ResetPasswordMutationVariables,
-} from './ResetPassword.gql'
+import type { ResetPasswordMutation, ResetPasswordMutationVariables } from './ResetPassword.gql'
+import { ResetPasswordDocument } from './ResetPassword.gql'
 
-type ResetPasswordFormProps = {
+export type ResetPasswordFormProps = {
   token: string
+  buttonProps?: React.ComponentProps<typeof Button>
 }
 
 export function ResetPasswordForm(props: ResetPasswordFormProps) {
-  const { token } = props
+  const { token, buttonProps } = props
 
   const form = useFormGqlMutation<
     ResetPasswordMutation,
@@ -83,6 +81,7 @@ export function ResetPasswordForm(props: ResetPasswordFormProps) {
           color='primary'
           variant='pill'
           size='large'
+          {...buttonProps}
         >
           <Trans id='Save new password' />
         </Button>

package/components/SignInForm/SignInForm.tsx

@@ -1,23 +1,44 @@
+import type { UseFormClearErrors, UseFormSetError } from '@graphcommerce/ecommerce-ui'
 import { PasswordElement } from '@graphcommerce/ecommerce-ui'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
-import { Button, FormRow, FormActions } from '@graphcommerce/next-ui'
+import { Button, FormActions, FormRow } from '@graphcommerce/next-ui'
+import { t } from '@lingui/macro'
 import { Trans } from '@lingui/react'
-import { Box, FormControl, Link, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, FormControl, Link } from '@mui/material'
 import { useSignInForm } from '../../hooks/useSignInForm'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 
-export type SignInFormProps = { email: string; sx?: SxProps<Theme> }
+export type SignInFormProps = {
+  email?: string
+  sx?: SxProps<Theme>
+  setError: UseFormSetError<{ email?: string; requestedMode?: 'signin' | 'signup' }>
+  clearErrors: UseFormClearErrors<{ email?: string; requestedMode?: 'signin' | 'signup' }>
+}
 
 export function SignInForm(props: SignInFormProps) {
-  const { email, sx } = props
+  const { email, sx, setError, clearErrors } = props
 
-  const form = useSignInForm({ email })
+  const form = useSignInForm({
+    email,
+    onBeforeSubmit(variables) {
+      if (!email) {
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        setError('email', { message: t`Please enter a valid email address` })
+        return false
+      }
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      clearErrors()
+      return variables
+    },
+  })
 
   const { handleSubmit, required, formState, error, control } = form
   const [remainingError, authError] = graphqlErrorByCategory({
     category: 'graphql-authentication',
     error,
   })
+
   const submitHandler = handleSubmit(() => {})
 
   return (

package/components/SignInForm/SignInFormInline.tsx

@@ -1,17 +1,19 @@
 import { PasswordElement } from '@graphcommerce/ecommerce-ui'
 import { Button, extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, Link, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Link } from '@mui/material'
 import { useSignInForm } from '../../hooks/useSignInForm'
-import { SignInMutationVariables } from './SignIn.gql'
+import type { SignInMutationVariables } from './SignIn.gql'
 
-type InlineSignInFormProps = Omit<SignInMutationVariables, 'password'> & {
+export type InlineSignInFormProps = Omit<SignInMutationVariables, 'password'> & {
   sx?: SxProps<Theme>
   children?: React.ReactNode
 }
 
 const { classes } = extendableComponent('SignInFormInline', ['form', 'button'] as const)
 
+/** @public */
 export function SignInFormInline(props: InlineSignInFormProps) {
   const { email, children, sx = [] } = props
   const form = useSignInForm({ email })

package/components/SignOutForm/SignOutForm.tsx

@@ -1,12 +1,13 @@
 import { useApolloClient } from '@graphcommerce/graphql'
-import { FormState, useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import type { FormState } from '@graphcommerce/react-hook-form'
+import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { useRouter } from 'next/router'
 import React from 'react'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import { SignOutFormDocument } from './SignOutForm.gql'
 import { signOut } from './signOut'
 
-type SignOutFormProps = {
+export type SignOutFormProps = {
   button: (props: { formState: FormState<Record<string, unknown>> }) => React.ReactNode
 }
 

package/components/SignOutForm/signOut.ts

@@ -1,8 +1,9 @@
-import { ApolloClient } from '@graphcommerce/graphql'
+import type { ApolloClient } from '@graphcommerce/graphql'
 import { removeCssFlag } from '@graphcommerce/next-ui'
 
 export function signOut(client: ApolloClient<object>) {
-  removeCssFlag('in-context')
+  removeCssFlag('private-query')
+  globalThis?.sessionStorage?.clear()
   client.cache.evict({ fieldName: 'currentCartId' })
   client.cache.evict({ fieldName: 'cart' })
   client.cache.evict({ fieldName: 'customerToken' })

package/components/SignUpForm/SignUpForm.tsx

@@ -3,19 +3,26 @@ import { useQuery } from '@graphcommerce/graphql'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { Button, FormActions, FormRow } from '@graphcommerce/next-ui'
+import type { UseFormClearErrors, UseFormSetError } from '@graphcommerce/react-hook-form'
 import { FormPersist, useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import { t } from '@lingui/macro'
 import { Trans } from '@lingui/react'
 import { Alert } from '@mui/material'
 import { useSignInForm } from '../../hooks/useSignInForm'
 import { ApolloCustomerErrorSnackbar } from '../ApolloCustomerError/ApolloCustomerErrorSnackbar'
 import { NameFields } from '../NameFields/NameFields'
 import { ValidatedPasswordElement } from '../ValidatedPasswordElement/ValidatedPasswordElement'
-import { SignUpDocument, SignUpMutation, SignUpMutationVariables } from './SignUp.gql'
+import type { SignUpMutation, SignUpMutationVariables } from './SignUp.gql'
+import { SignUpDocument } from './SignUp.gql'
 
-type SignUpFormProps = { email: string }
+type SignUpFormProps = {
+  email?: string
+  setError: UseFormSetError<{ email?: string; requestedMode?: 'signin' | 'signup' }>
+  clearErrors: UseFormClearErrors<{ email?: string; requestedMode?: 'signin' | 'signup' }>
+}
 
 export function SignUpForm(props: SignUpFormProps) {
-  const { email } = props
+  const { email, setError, clearErrors } = props
 
   const storeConfig = useQuery(StoreConfigDocument)
   const signIn = useSignInForm({ email })
@@ -26,7 +33,16 @@ export function SignUpForm(props: SignUpFormProps) {
     SignUpDocument,
     {
       defaultValues: { email },
-      onBeforeSubmit: (values) => ({ ...values, email }),
+      onBeforeSubmit: (values) => {
+        if (!email) {
+          // eslint-disable-next-line @typescript-eslint/no-use-before-define
+          setError('email', { message: t`Please enter a valid email address` })
+          return false
+        }
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        clearErrors()
+        return { ...values, email: email ?? '' }
+      },
       onComplete: async (result, variables) => {
         if (!result.errors && !storeConfig.data?.storeConfig?.create_account_confirmation) {
           signIn.setValue('email', variables.email)

package/components/SignUpForm/SignUpFormInline.tsx

@@ -2,16 +2,17 @@ import { ApolloErrorAlert, PasswordRepeatElement } from '@graphcommerce/ecommerc
 import { useQuery } from '@graphcommerce/graphql'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import { Button, extendableComponent, Form, FormRow } from '@graphcommerce/next-ui'
+import { Button, Form, FormRow, extendableComponent } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
 import { Alert, Box } from '@mui/material'
 import React from 'react'
 import { useSignInForm } from '../../hooks/useSignInForm'
 import { ValidatedPasswordElement } from '../ValidatedPasswordElement/ValidatedPasswordElement'
-import { SignUpMutationVariables, SignUpMutation, SignUpDocument } from './SignUp.gql'
+import type { SignUpMutation, SignUpMutationVariables } from './SignUp.gql'
+import { SignUpDocument } from './SignUp.gql'
 
-type SignUpFormInlineProps = Pick<SignUpMutationVariables, 'email'> & {
+export type SignUpFormInlineProps = Pick<SignUpMutationVariables, 'email'> & {
   children?: React.ReactNode
   firstname?: string
   lastname?: string