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

package/components/AccountAddress/AccountAddress.tsx

@@ -1,10 +1,11 @@
 import { 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 { AddressMultiLine } from '../AddressMultiLine/AddressMultiLine'
 import { DeleteCustomerAddressForm } from '../DeleteCustomerAddressForm/DeleteCustomerAddressForm'
 import { UpdateDefaultAddressForm } from '../UpdateDefaultAddressForm/UpdateDefaultAddressForm'
-import { AccountAddressFragment } from './AccountAddress.gql'
+import type { AccountAddressFragment } from './AccountAddress.gql'
 
 export type AccountAddressProps = AccountAddressFragment & { sx?: SxProps<Theme> }
 

package/components/AccountAddresses/AccountAddresses.tsx

@@ -1,21 +1,22 @@
 import {
   FullPageMessage,
-  SectionContainer,
-  iconHome,
   IconSvg,
+  SectionContainer,
   extendableComponent,
+  iconHome,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Skeleton, Button, Box, Theme, SxProps } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Button, Skeleton } from '@mui/material'
 import { AccountAddress } from '../AccountAddress/AccountAddress'
-import { AccountAddressesFragment } from './AccountAddresses.gql'
+import type { AccountAddressesFragment } from './AccountAddresses.gql'
 
 export type AccountAddressesProps = AccountAddressesFragment & {
   loading: boolean
   sx?: SxProps<Theme>
 }
 
-const name = 'AccountAddresses' as const
+const name = 'AccountAddresses'
 const parts = ['root', 'addresses', 'button', 'link'] as const
 const { classes } = extendableComponent(name, parts)
 
@@ -75,9 +76,7 @@ export function AccountAddresses(props: AccountAddressesProps) {
             className={classes.addresses}
             sx={(theme) => ({ '& > div': { borderBottom: `1px solid ${theme.palette.divider}` } })}
           >
-            {addresses?.map((address) => (
-              <AccountAddress key={address?.id} {...address} />
-            ))}
+            {addresses?.map((address) => <AccountAddress key={address?.id} {...address} />)}
           </Box>
 
           <Button

package/components/AccountDeleteForm/AccountDeleteForm.tsx

@@ -1,6 +1,6 @@
 import { CheckboxElement, EmailElement } from '@graphcommerce/ecommerce-ui'
 import { useApolloClient, useMutation } from '@graphcommerce/graphql'
-import { FormActions, FormRow, Button } from '@graphcommerce/next-ui'
+import { Button, FormActions, FormRow } from '@graphcommerce/next-ui'
 import { useForm } from '@graphcommerce/react-hook-form'
 import { Trans, t } from '@lingui/macro'
 import { Box, Typography } from '@mui/material'

package/components/AccountLatestOrder/AccountLatestOrder.tsx

@@ -1,7 +1,7 @@
 import { SectionContainer } from '@graphcommerce/next-ui'
 import React from 'react'
 import useOrderCardItemImages from '../../hooks/useOrderCardItemImages'
-import { AccountOrdersFragment } from '../AccountOrders/AccountOrders.gql'
+import type { AccountOrdersFragment } from '../AccountOrders/AccountOrders.gql'
 import { NoOrdersFound } from '../NoOrdersFound/NoOrdersFound'
 import { OrderCard } from '../OrderCard/OrderCard'
 
@@ -9,6 +9,10 @@ export type AccountLatestOrderProps = AccountOrdersFragment & {
   loading: boolean
 }
 
+/**
+ * @deprecated
+ * @public
+ */
 export function AccountLatestOrder(props: AccountLatestOrderProps) {
   const { orders, loading } = props
   const latestOrderCard = orders?.items?.[(orders?.items?.length ?? 1) - 1]

package/components/AccountMenu/AccountMenu.tsx

@@ -1,5 +1,6 @@
 import { extendableComponent } from '@graphcommerce/next-ui'
-import { List, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { List } from '@mui/material'
 import React from 'react'
 
 export type AccountMenuProps = { children: React.ReactNode; sx?: SxProps<Theme> }

package/components/AccountMenuItem/AccountMenuItem.tsx

@@ -1,13 +1,14 @@
-import { ImageProps } from '@graphcommerce/image'
+import type { ImageProps } from '@graphcommerce/image'
+import type { ButtonProps } from '@graphcommerce/next-ui'
 import {
-  responsiveVal,
-  iconChevronRight,
-  IconSvg,
   Button,
-  ButtonProps,
+  IconSvg,
   extendableComponent,
+  iconChevronRight,
+  responsiveVal,
 } from '@graphcommerce/next-ui'
-import { ListItem, ListItemIcon, ListItemText, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { ListItem, ListItemIcon, ListItemText } from '@mui/material'
 import React from 'react'
 
 export type AccountMenuItemProps = {

package/components/AccountOrders/AccountOrders.tsx

@@ -1,11 +1,12 @@
 import { Pagination, SectionContainer, 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 React from 'react'
 import useOrderCardItemImages from '../../hooks/useOrderCardItemImages'
 import { NoOrdersFound } from '../NoOrdersFound/NoOrdersFound'
 import { OrderCard } from '../OrderCard/OrderCard'
-import { AccountOrdersFragment } from './AccountOrders.gql'
+import type { AccountOrdersFragment } from './AccountOrders.gql'
 
 export type AccountOrdersProps = AccountOrdersFragment & { sx?: SxProps<Theme> }
 

package/components/AccountSignInUpForm/AccountSignInUpForm.tsx

@@ -3,16 +3,22 @@ import { useApolloClient } from '@graphcommerce/graphql'
 import {
   ActionCard,
   Button,
+  extendableComponent,
   FormActions,
   FormDiv,
   FormRow,
   LayoutTitle,
-  extendableComponent,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Alert, Box, CircularProgress, Link, SxProps, Theme, Typography } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Alert, Box, CircularProgress, Link, Typography } from '@mui/material'
 import { useRouter } from 'next/router'
-import { CustomerDocument, useAccountSignInUpForm, useCustomerAccountCanSignUp } from '../../hooks'
+import {
+  CustomerDocument,
+  useAccountSignInUpForm,
+  useCustomerAccountCanSignUp,
+  UseCustomerValidateTokenDocument,
+} from '../../hooks'
 import { useCustomerQuery } from '../../hooks/useCustomerQuery'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError'
 import { SignInForm } from '../SignInForm/SignInForm'
@@ -29,12 +35,14 @@ const { classes } = extendableComponent('AccountSignInUpForm', parts)
 
 export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
   const { sx = [], signUpDisabled } = props
+  const customerEmailQuery = useCustomerQuery(UseCustomerValidateTokenDocument)
   const customerQuery = useCustomerQuery(CustomerDocument)
 
-  const { email, firstname = '' } = customerQuery.data?.customer ?? {}
+  const { email } = customerEmailQuery.data?.customer ?? {}
+  const { firstname = '' } = customerQuery.data?.customer ?? {}
 
   const { mode, form, submit } = useAccountSignInUpForm()
-  const { formState, watch, control, error } = form
+  const { formState, control, error, setError, clearErrors, watch } = form
   const router = useRouter()
 
   const client = useApolloClient()
@@ -48,6 +56,8 @@ export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
     mode === 'signin' ||
     (mode === 'signup' && canSignUp)
 
+  const emailValue = watch('email')
+
   return (
     <FormDiv sx={sx} className={classes.root}>
       <Box
@@ -200,13 +210,13 @@ export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
 
       {(mode === 'signin' || mode === 'session-expired') && (
         <Box>
-          <SignInForm email={watch('email')} />
+          <SignInForm email={emailValue} setError={setError} clearErrors={clearErrors} />
         </Box>
       )}
 
       {mode === 'signup' && canSignUp && (
         <Box>
-          <SignUpForm email={watch('email')} />
+          <SignUpForm email={emailValue} setError={setError} clearErrors={clearErrors} />
         </Box>
       )}
       {mode === 'signup' && !canSignUp && (

package/components/AddressFields/AddressAddition.tsx

@@ -1,6 +1,8 @@
-import { TextFieldElement, FieldValues, FieldPath } from '@graphcommerce/ecommerce-ui'
+import type { FieldPath, FieldValues } from '@graphcommerce/ecommerce-ui'
+import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import { Trans } from '@lingui/react'
-import { AddressFieldsOptions, useAddressFieldsForm } from './useAddressFieldsForm'
+import type { AddressFieldsOptions } from './useAddressFieldsForm'
+import { useAddressFieldsForm } from './useAddressFieldsForm'
 
 export function AddressAddition<
   TFieldValues extends FieldValues = FieldValues,

package/components/AddressFields/AddressCity.tsx

@@ -1,6 +1,8 @@
-import { TextFieldElement, FieldValues, FieldPath } from '@graphcommerce/ecommerce-ui'
+import type { FieldPath, FieldValues } from '@graphcommerce/ecommerce-ui'
+import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import { Trans } from '@lingui/react'
-import { AddressFieldsOptions, useAddressFieldsForm } from './useAddressFieldsForm'
+import type { AddressFieldsOptions } from './useAddressFieldsForm'
+import { useAddressFieldsForm } from './useAddressFieldsForm'
 
 export function AddressCity<
   TFieldValues extends FieldValues = FieldValues,

package/components/AddressFields/AddressCountryRegion.tsx

@@ -1,17 +1,14 @@
-import {
-  SelectElement,
-  FieldValues,
-  FieldPath,
-  useWatch,
-  TextFieldElement,
-} from '@graphcommerce/ecommerce-ui'
+import type { FieldPath, FieldValues } from '@graphcommerce/ecommerce-ui'
+import { SelectElement, TextFieldElement, useWatch } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
 import { CountryRegionsDocument } from '@graphcommerce/magento-store'
-import { FormRow, filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { filterNonNullableKeys, FormRow } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { useMemo } from 'react'
-import { AddressFieldsOptions, useAddressFieldsForm } from './useAddressFieldsForm'
+import type { AddressFieldsOptions } from './useAddressFieldsForm'
+import { useAddressFieldsForm } from './useAddressFieldsForm'
 
+/** @public */
 export function useAddressCountryRegion<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,

package/components/AddressFields/AddressFields.tsx

@@ -1,4 +1,4 @@
-import { FieldPath, FieldValues } from '@graphcommerce/ecommerce-ui'
+import type { FieldPath, FieldValues } from '@graphcommerce/ecommerce-ui'
 import { FormRow } from '@graphcommerce/next-ui'
 import { AddressAddition } from './AddressAddition'
 import { AddressCity } from './AddressCity'
@@ -6,7 +6,7 @@ import { AddressCountryRegion } from './AddressCountryRegion'
 import { AddressHousenumber } from './AddressHouseNumber'
 import { AddressPostcode } from './AddressPostcode'
 import { AddressStreet } from './AddressStreet'
-import { AddressFieldsOptions } from './useAddressFieldsForm'
+import type { AddressFieldsOptions } from './useAddressFieldsForm'
 
 export type AddressFieldsProps<
   TFieldValues extends FieldValues = FieldValues,

package/components/AddressFields/AddressHouseNumber.tsx

@@ -1,12 +1,9 @@
-import {
-  TextFieldElement,
-  FieldValues,
-  FieldPath,
-  houseNumberPattern,
-} from '@graphcommerce/ecommerce-ui'
+import type { FieldPath, FieldValues } from '@graphcommerce/ecommerce-ui'
+import { TextFieldElement, houseNumberPattern } from '@graphcommerce/ecommerce-ui'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { AddressFieldsOptions, useAddressFieldsForm } from './useAddressFieldsForm'
+import type { AddressFieldsOptions } from './useAddressFieldsForm'
+import { useAddressFieldsForm } from './useAddressFieldsForm'
 
 export function AddressHousenumber<
   TFieldValues extends FieldValues = FieldValues,

package/components/AddressFields/AddressPostcode.tsx

@@ -1,6 +1,8 @@
-import { FieldPath, FieldValues, TextFieldElement } from '@graphcommerce/ecommerce-ui'
+import type { FieldPath, FieldValues } from '@graphcommerce/ecommerce-ui'
+import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import { Trans } from '@lingui/macro'
-import { AddressFieldsOptions, useAddressFieldsForm } from './useAddressFieldsForm'
+import type { AddressFieldsOptions } from './useAddressFieldsForm'
+import { useAddressFieldsForm } from './useAddressFieldsForm'
 
 export function AddressPostcode<
   TFieldValues extends FieldValues = FieldValues,

package/components/AddressFields/AddressStreet.tsx

@@ -1,7 +1,8 @@
 import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
-import { FieldValues, FieldPath } from '@graphcommerce/react-hook-form'
+import type { FieldPath, FieldValues } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
-import { AddressFieldsOptions, useAddressFieldsForm } from './useAddressFieldsForm'
+import type { AddressFieldsOptions } from './useAddressFieldsForm'
+import { useAddressFieldsForm } from './useAddressFieldsForm'
 
 export function AddressStreet<
   TFieldValues extends FieldValues = FieldValues,

package/components/AddressFields/useAddressFieldsForm.tsx

@@ -1,9 +1,5 @@
-import {
-  FieldValues,
-  FieldPath,
-  UseFormReturn,
-  assertFormGqlOperation,
-} from '@graphcommerce/react-hook-form'
+import type { FieldPath, FieldValues, UseFormReturn } from '@graphcommerce/react-hook-form'
+import { assertFormGqlOperation } from '@graphcommerce/react-hook-form'
 
 export type AddressFieldsOptions<
   TFieldValues extends FieldValues = FieldValues,

package/components/AddressMultiLine/AddressMultiLine.tsx

@@ -1,7 +1,8 @@
 import { useFindCountry } from '@graphcommerce/magento-store'
 import { extendableComponent } from '@graphcommerce/next-ui'
-import { SxProps, Theme, Typography } from '@mui/material'
-import { CustomerAddressFragment } from '../CreateCustomerAddressForm/CustomerAddress.gql'
+import type { SxProps, Theme } from '@mui/material'
+import { Typography } from '@mui/material'
+import type { CustomerAddressFragment } from '../CreateCustomerAddressForm/CustomerAddress.gql'
 
 // exports.getEuMembers = function()
 // {
@@ -12,7 +13,7 @@ import { CustomerAddressFragment } from '../CreateCustomerAddressForm/CustomerAd
 // 	return exports.getEuMembers().indexOf(code.toUpperCase()) != -1;
 // };
 
-type AddressMultiLineProps = CustomerAddressFragment & { sx?: SxProps<Theme> }
+export type AddressMultiLineProps = CustomerAddressFragment & { sx?: SxProps<Theme> }
 
 const name = 'AddressMultiLine'
 const parts = ['root', 'title'] as const

package/components/AddressSingleLine/AddressSingleLine.tsx

@@ -1,5 +1,5 @@
 import { useFindCountry } from '@graphcommerce/magento-store'
-import { CustomerAddressFragment } from '../CreateCustomerAddressForm/CustomerAddress.gql'
+import type { CustomerAddressFragment } from '../CreateCustomerAddressForm/CustomerAddress.gql'
 
 export function AddressSingleLine(props: CustomerAddressFragment) {
   const {

package/components/ApolloCustomerError/ApolloCustomerErrorAlert.tsx

@@ -1,4 +1,5 @@
-import { ApolloErrorAlert, ApolloErrorAlertProps } from '@graphcommerce/ecommerce-ui'
+import type { ApolloErrorAlertProps } from '@graphcommerce/ecommerce-ui'
+import { ApolloErrorAlert } from '@graphcommerce/ecommerce-ui'
 import { Button } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { useAuthorizationErrorMasked } from './useAuthorizationErrorMasked'

package/components/ApolloCustomerError/ApolloCustomerErrorFullPage.tsx

@@ -1,5 +1,6 @@
-import { ApolloErrorFullPage, ApolloErrorFullPageProps } from '@graphcommerce/ecommerce-ui'
-import { iconPerson, IconSvg } from '@graphcommerce/next-ui'
+import type { ApolloErrorFullPageProps } from '@graphcommerce/ecommerce-ui'
+import { ApolloErrorFullPage } from '@graphcommerce/ecommerce-ui'
+import { IconSvg, iconPerson } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Button } from '@mui/material'
 import type { SetOptional } from 'type-fest'

package/components/ApolloCustomerError/ApolloCustomerErrorSnackbar.tsx

@@ -1,4 +1,5 @@
-import { ApolloErrorSnackbar, ApolloErrorSnackbarProps } from '@graphcommerce/ecommerce-ui'
+import type { ApolloErrorSnackbarProps } from '@graphcommerce/ecommerce-ui'
+import { ApolloErrorSnackbar } from '@graphcommerce/ecommerce-ui'
 import { Trans } from '@lingui/react'
 import { Button } from '@mui/material'
 import { useCustomerSession } from '../../hooks/useCustomerSession'

package/components/ApolloCustomerError/useAuthorizationErrorMasked.ts

@@ -1,4 +1,4 @@
-import { ApolloError } from '@graphcommerce/graphql'
+import type { ApolloError } from '@graphcommerce/graphql'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import { i18n } from '@lingui/core'
 import { useCustomerSession } from '../../hooks/useCustomerSession'

package/components/CancelOrder/CancelOrderForm.tsx

@@ -1,46 +1,39 @@
 import { ApolloErrorSnackbar, CheckboxElement, SelectElement } from '@graphcommerce/ecommerce-ui'
+import { useQuery } from '@graphcommerce/graphql'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import {
-  breakpointVal,
   Button,
-  filterNonNullableKeys,
   FormRow,
-  iconChevronDown,
   IconSvg,
+  breakpointVal,
+  filterNonNullableKeys,
+  iconChevronDown,
 } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/macro'
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionProps,
-  AccordionSummary,
-  Alert,
-  Box,
-} from '@mui/material'
-import {
-  CancelOrderDocument,
-  CancelOrderMutation,
-  CancelOrderMutationVariables,
-} from './CancelOrder.gql'
-import { OrderDetailsFragment } from '../OrderDetails/OrderDetails.gql'
-import { useQuery } from '@graphcommerce/graphql'
-import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import type { AccordionProps } from '@mui/material'
+import { Accordion, AccordionDetails, AccordionSummary, Alert, Box } from '@mui/material'
 import { canCancelOrder } from '../../utils'
+import type { OrderDetailsFragment } from '../OrderDetails/OrderDetails.gql'
+import type { CancelOrderMutation, CancelOrderMutationVariables } from './CancelOrder.gql'
+import { CancelOrderDocument } from './CancelOrder.gql'
 
-type CancelOrderFormProps = {
+export type CancelOrderFormProps = {
   order: OrderDetailsFragment
 } & Omit<AccordionProps, 'children'>
 
 export function CancelOrderForm(props: CancelOrderFormProps) {
   const { order, sx, ...rest } = props
-  const { id: orderId, number: orderNumber } = order
+  const { id: orderId } = order
 
   const form = useFormGqlMutation<
     CancelOrderMutation,
     CancelOrderMutationVariables & { confirm: boolean }
   >(CancelOrderDocument, { defaultValues: { orderId: atob(orderId) } })
 
-  const options = useQuery(StoreConfigDocument).data?.storeConfig?.order_cancellation_reasons
+  const config = useQuery(StoreConfigDocument).data?.storeConfig
+  const options = config?.order_cancellation_reasons
+  const enabled = config?.order_cancellation_enabled
 
   const { control, formState, required, handleSubmit, error, data: cancelOrderData } = form
 
@@ -49,7 +42,7 @@ export function CancelOrderForm(props: CancelOrderFormProps) {
   const submittedWithoutErrors =
     formState.isSubmitSuccessful && !error && !cancelOrderData?.cancelOrder?.error
 
-  const visible = canCancelOrder(order) || submittedWithoutErrors
+  const visible = enabled && (canCancelOrder(order) || submittedWithoutErrors)
 
   if (!visible) return null
 

package/components/ChangeNameForm/ChangeNameForm.tsx

@@ -1,11 +1,11 @@
-import { Form, FormActions, FormDivider, MessageSnackbar, Button } from '@graphcommerce/next-ui'
+import { Button, Form, FormActions, FormDivider, MessageSnackbar } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import { NameFields } from '../NameFields/NameFields'
 import { UpdateCustomerNameDocument } from './UpdateCustomerName.gql'
 
-type ChangeNameFormProps = {
+export type ChangeNameFormProps = {
   prefix?: string
   firstname: string
   lastname: string

package/components/ChangePasswordForm/ChangePasswordForm.tsx

@@ -5,21 +5,18 @@ import {
 } from '@graphcommerce/ecommerce-ui'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import {
+  Button,
   Form,
   FormActions,
+  FormDivider,
   FormRow,
   MessageSnackbar,
-  FormDivider,
-  Button,
 } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
 import { ValidatedPasswordElement } from '../ValidatedPasswordElement/ValidatedPasswordElement'
-import {
-  ChangePasswordDocument,
-  ChangePasswordMutation,
-  ChangePasswordMutationVariables,
-} from './ChangePassword.gql'
+import type { ChangePasswordMutation, ChangePasswordMutationVariables } from './ChangePassword.gql'
+import { ChangePasswordDocument } from './ChangePassword.gql'
 
 export function ChangePasswordForm() {
   const form = useFormGqlMutation<

package/components/CompanyFields/CompanyFields.tsx

@@ -1,9 +1,12 @@
-import { ActionCardListForm, FieldPath, FieldValues, useWatch } from '@graphcommerce/ecommerce-ui'
-import { ActionCard, ActionCardProps, FormRow, useStorefrontConfig } from '@graphcommerce/next-ui'
+import type { FieldPath, FieldValues } from '@graphcommerce/ecommerce-ui'
+import { ActionCardListForm, useWatch } from '@graphcommerce/ecommerce-ui'
+import type { ActionCardProps } from '@graphcommerce/next-ui'
+import { ActionCard, FormRow, useStorefrontConfig } from '@graphcommerce/next-ui'
 import { t } from '@lingui/macro'
 import { CompanyName } from './CompanyName'
 import { CompanyVAT } from './CompanyVAT'
-import { CompanyFieldsOptions, useCompanyFieldsForm } from './useCompanyFieldsForm'
+import type { CompanyFieldsOptions } from './useCompanyFieldsForm'
+import { useCompanyFieldsForm } from './useCompanyFieldsForm'
 
 export type CompanyFieldsProps<
   TFieldValues extends FieldValues = FieldValues,

package/components/CompanyFields/CompanyName.tsx

@@ -1,6 +1,8 @@
-import { TextFieldElement, FieldValues, FieldPath } from '@graphcommerce/ecommerce-ui'
+import type { FieldPath, FieldValues } from '@graphcommerce/ecommerce-ui'
+import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import { Trans } from '@lingui/react'
-import { CompanyFieldsOptions, useCompanyFieldsForm } from './useCompanyFieldsForm'
+import type { CompanyFieldsOptions } from './useCompanyFieldsForm'
+import { useCompanyFieldsForm } from './useCompanyFieldsForm'
 
 export function CompanyName<
   TFieldValues extends FieldValues = FieldValues,

package/components/CompanyFields/CompanyVAT.tsx

@@ -1,7 +1,9 @@
-import { TextFieldElement, FieldValues, FieldPath, useWatch } from '@graphcommerce/ecommerce-ui'
-import { CountryCodeEnum } from '@graphcommerce/graphql-mesh'
+import type { FieldPath, FieldValues } from '@graphcommerce/ecommerce-ui'
+import { TextFieldElement, useWatch } from '@graphcommerce/ecommerce-ui'
+import type { CountryCodeEnum } from '@graphcommerce/graphql-mesh'
 import { Trans } from '@lingui/react'
-import { CompanyFieldsOptions, useCompanyFieldsForm } from './useCompanyFieldsForm'
+import type { CompanyFieldsOptions } from './useCompanyFieldsForm'
+import { useCompanyFieldsForm } from './useCompanyFieldsForm'
 
 export function CompanyVAT<
   TFieldValues extends FieldValues = FieldValues,

package/components/CompanyFields/useCompanyFieldsForm.tsx

@@ -1,9 +1,5 @@
-import {
-  FieldValues,
-  FieldPath,
-  UseFormReturn,
-  assertFormGqlOperation,
-} from '@graphcommerce/react-hook-form'
+import type { FieldPath, FieldValues, UseFormReturn } from '@graphcommerce/react-hook-form'
+import { assertFormGqlOperation } from '@graphcommerce/react-hook-form'
 
 export type CompanyFieldsOptions<
   TFieldValues extends FieldValues = FieldValues,

package/components/ConfirmCustomer/ConfirmCustomerForm.tsx

@@ -1,20 +1,7 @@
-import {
-  EmailElement,
-  TextFieldElement,
-  emailPattern,
-  useFormGqlMutation,
-} from '@graphcommerce/ecommerce-ui'
-import {
-  FormActions,
-  FormRow,
-  LayoutTitle,
-  Button,
-  FullPageMessage,
-  IconSvg,
-  iconPerson,
-} from '@graphcommerce/next-ui'
+import { EmailElement, useFormGqlMutation } from '@graphcommerce/ecommerce-ui'
+import { Button, FormRow, LayoutTitle, iconPerson } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Alert, Box, Container, Divider, FormControl, Typography } from '@mui/material'
+import { Alert, Box, Typography } from '@mui/material'
 import { useRouter } from 'next/router'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError'
 import { ConfirmCustomerDocument } from './ConfirmCustomer.gql'

package/components/ContactForm/ContactForm.tsx

@@ -7,7 +7,8 @@ import {
 import { Button, Form, FormRow, MessageSnackbar } from '@graphcommerce/next-ui'
 import { FormPersist, useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/macro'
-import { CustomerDocument, CustomerQuery, useCustomerQuery } from '../../hooks'
+import type { CustomerQuery } from '../../hooks'
+import { CustomerDocument, useCustomerQuery } from '../../hooks'
 import { ContactUsDocument } from './ContactUsMutation.gql'
 
 function findTelephone(data: CustomerQuery): string | undefined {

package/components/CreateCustomerAddressForm/CreateCustomerAddressForm.tsx

@@ -1,8 +1,8 @@
 import { ApolloErrorSnackbar, TelephoneElement } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
-import { CountryCodeEnum } from '@graphcommerce/graphql-mesh'
+import type { CountryCodeEnum } from '@graphcommerce/graphql-mesh'
 import { CountryRegionsDocument, StoreConfigDocument } from '@graphcommerce/magento-store'
-import { Form, FormActions, FormRow, Button, MessageSnackbar } from '@graphcommerce/next-ui'
+import { Button, Form, FormActions, FormRow, MessageSnackbar } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
 import { useRouter } from 'next/router'