@graphcommerce/magento-customer 9.0.4-canary.0 → 9.0.4-canary.2

package/CHANGELOG.md

@@ -1,18 +1,10 @@
 # Change Log
 
-## 9.0.4-canary.0
-
-## 9.0.3
-
-## 9.0.3-canary.0
+## 9.0.4-canary.2
 
-## 9.0.2
+## 9.0.4-canary.1
 
-## 9.0.2-canary.0
-
-## 9.0.1
-
-## 9.0.1-canary.1
+## 9.0.4-canary.0
 
 ## 9.0.0
 

package/components/AccountAddresses/AccountAddresses.tsx

@@ -1,9 +1,9 @@
 import {
+  extendableComponent,
   FullPageMessage,
+  iconHome,
   IconSvg,
   SectionContainer,
-  extendableComponent,
-  iconHome,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import type { SxProps, Theme } from '@mui/material'

package/components/AccountDeleteForm/AccountDeleteForm.tsx

@@ -2,7 +2,7 @@ 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, t } from '@lingui/macro'
+import { t, Trans } from '@lingui/macro'
 import { Box, Typography } from '@mui/material'
 import { CustomerDocument, useCustomerQuery } from '../../hooks'
 import { signOut } from '../SignOutForm/signOut'

package/components/AccountMenuItem/AccountMenuItem.tsx

@@ -2,9 +2,9 @@ import type { ImageProps } from '@graphcommerce/image'
 import type { ButtonProps } from '@graphcommerce/next-ui'
 import {
   Button,
-  IconSvg,
   extendableComponent,
   iconChevronRight,
+  IconSvg,
   responsiveVal,
 } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'

package/components/AccountOrders/AccountOrders.tsx

@@ -1,4 +1,4 @@
-import { Pagination, SectionContainer, extendableComponent } from '@graphcommerce/next-ui'
+import { extendableComponent, Pagination, SectionContainer } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Link } from '@mui/material'

package/components/AddressFields/AddressCountryRegion.tsx

@@ -8,12 +8,8 @@ import { useMemo } from 'react'
 import type { AddressFieldsOptions } from './useAddressFieldsForm'
 import { useAddressFieldsForm } from './useAddressFieldsForm'
 
-/** @public */
-export function useAddressCountryRegion<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(props: AddressFieldsOptions<TFieldValues, TName>) {
-  const form = useAddressFieldsForm<TFieldValues, TName>(props)
+function useAddressCountryRegion(props: AddressFieldsOptions) {
+  const form = useAddressFieldsForm(props)
   const { control, name } = form
 
   const countryQuery = useQuery(CountryRegionsDocument)
@@ -41,11 +37,15 @@ export function useAddressCountryRegion<
   return { ...form, country, countryList, regionList, loading: countryQuery.loading }
 }
 
-export function AddressCountryRegion<
+type AddressCountryRegionComponent = <
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(props: AddressFieldsOptions<TFieldValues, TName>) {
-  const form = useAddressCountryRegion<TFieldValues, TName>(props)
+>(
+  props: AddressFieldsOptions<TFieldValues, TName>,
+) => React.ReactNode
+
+export function AddressCountryRegionBase(props: AddressFieldsOptions) {
+  const form = useAddressCountryRegion(props)
   const { control, name, readOnly, required, countryList, regionList, loading } = form
 
   if (loading) {
@@ -95,3 +95,5 @@ export function AddressCountryRegion<
     </FormRow>
   )
 }
+
+export const AddressCountryRegion = AddressCountryRegionBase as AddressCountryRegionComponent

package/components/AddressFields/AddressHouseNumber.tsx

@@ -1,5 +1,5 @@
 import type { FieldPath, FieldValues } from '@graphcommerce/ecommerce-ui'
-import { TextFieldElement, houseNumberPattern } from '@graphcommerce/ecommerce-ui'
+import { houseNumberPattern, TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
 import type { AddressFieldsOptions } from './useAddressFieldsForm'

package/components/ApolloCustomerError/ApolloCustomerErrorFullPage.tsx

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

package/components/CancelOrder/CancelOrderForm.tsx

@@ -2,12 +2,12 @@ import { ApolloErrorSnackbar, CheckboxElement, SelectElement } from '@graphcomme
 import { useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import {
-  Button,
-  FormRow,
-  IconSvg,
   breakpointVal,
+  Button,
   filterNonNullableKeys,
+  FormRow,
   iconChevronDown,
+  IconSvg,
 } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/macro'

package/components/ConfirmCustomer/ConfirmCustomerForm.tsx

@@ -1,5 +1,5 @@
 import { EmailElement, useFormGqlMutation } from '@graphcommerce/ecommerce-ui'
-import { Button, FormRow, LayoutTitle, iconPerson } from '@graphcommerce/next-ui'
+import { Button, FormRow, iconPerson, LayoutTitle } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Alert, Box, Typography } from '@mui/material'
 import { useRouter } from 'next/router'

package/components/ContactForm/ContactForm.tsx

@@ -9,6 +9,7 @@ import { FormPersist, useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/macro'
 import type { CustomerQuery } from '../../hooks'
 import { CustomerDocument, useCustomerQuery } from '../../hooks'
+import type { ContactUsMutationVariables } from './ContactUsMutation.gql'
 import { ContactUsDocument } from './ContactUsMutation.gql'
 
 function findTelephone(data: CustomerQuery): string | undefined {
@@ -129,7 +130,7 @@ export function ContactForm() {
         <Trans>Submit</Trans>
       </Button>
 
-      <FormPersist form={form} name='ContactUs' />
+      <FormPersist<ContactUsMutationVariables> form={form} name='ContactUs' />
       <MessageSnackbar
         open={submittedWithoutErrors}
         variant='pill'

package/components/CreateCustomerAddressForm/CreateCustomerAddressForm.tsx

@@ -9,6 +9,7 @@ import { useRouter } from 'next/router'
 import { AddressFields } from '../AddressFields/AddressFields'
 import { CompanyFields } from '../CompanyFields'
 import { NameFields } from '../NameFields/NameFields'
+import type { CreateCustomerAddressMutationVariables } from './CreateCustomerAddress.gql'
 import { CreateCustomerAddressDocument } from './CreateCustomerAddress.gql'
 
 export function CreateCustomerAddressForm() {
@@ -61,9 +62,12 @@ export function CreateCustomerAddressForm() {
   return (
     <>
       <Form onSubmit={submitHandler} noValidate>
-        <CompanyFields form={form} />
+        <CompanyFields<CreateCustomerAddressMutationVariables> form={form} />
         <NameFields form={form} prefix />
-        <AddressFields form={form} name={{ regionId: 'region.region_id' }} />
+        <AddressFields<CreateCustomerAddressMutationVariables>
+          form={form}
+          name={{ regionId: 'region.region_id' }}
+        />
 
         <FormRow>
           <TelephoneElement

package/components/CustomerFab/CustomerFab.tsx

@@ -1,8 +1,8 @@
 import {
   DesktopHeaderBadge,
-  IconSvg,
   extendableComponent,
   iconPerson,
+  IconSvg,
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import type { BadgeProps, FabProps as FabPropsType, SxProps, Theme } from '@mui/material'

package/components/CustomerMenuFabItem/CustomerMenuFabItem.tsx

@@ -1,4 +1,4 @@
-import { IconSvg, MenuFabSecondaryItem, iconPerson } from '@graphcommerce/next-ui'
+import { iconPerson, IconSvg, MenuFabSecondaryItem } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Badge, NoSsr } from '@mui/material'
 import type { MouseEventHandler } from 'react'

package/components/EditAddressForm/EditAddressForm.tsx

@@ -10,6 +10,7 @@ import type { AccountAddressFragment } from '../AccountAddress/AccountAddress.gq
 import { AddressFields } from '../AddressFields/AddressFields'
 import { CompanyFields } from '../CompanyFields'
 import { NameFields } from '../NameFields/NameFields'
+import type { UpdateCustomerAddressMutationVariables } from './UpdateCustomerAddress.gql'
 import { UpdateCustomerAddressDocument } from './UpdateCustomerAddress.gql'
 
 export type EditAddressFormProps = {
@@ -79,9 +80,12 @@ export function EditAddressForm(props: EditAddressFormProps) {
   return (
     <>
       <Form onSubmit={submitHandler} noValidate sx={sx}>
-        <CompanyFields form={form} />
+        <CompanyFields<UpdateCustomerAddressMutationVariables> form={form} />
         <NameFields form={form} prefix />
-        <AddressFields form={form} name={{ regionId: 'region.region_id' }} />
+        <AddressFields<UpdateCustomerAddressMutationVariables>
+          form={form}
+          name={{ regionId: 'region.region_id' }}
+        />
         <FormRow>
           <TelephoneElement
             variant='outlined'

package/components/NoOrdersFound/NoOrdersFound.tsx

@@ -1,4 +1,4 @@
-import { IconHeader, extendableComponent, iconBox } from '@graphcommerce/next-ui'
+import { extendableComponent, iconBox, IconHeader } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'

package/components/OrderCard/OrderCard.tsx

@@ -1,5 +1,5 @@
 import { Money } from '@graphcommerce/magento-store'
-import { DateTimeFormat, NextLink, extendableComponent } from '@graphcommerce/next-ui'
+import { DateTimeFormat, extendableComponent, NextLink } 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'

package/components/OrderDetails/OrderDetails.tsx

@@ -1,14 +1,14 @@
 import {
-  DateTimeFormat,
-  IconSvg,
-  SectionContainer,
   breakpointVal,
+  DateTimeFormat,
   extendableComponent,
   iconInvoice,
+  IconSvg,
+  SectionContainer,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { Box, Typography, lighten } from '@mui/material'
+import { Box, lighten, Typography } from '@mui/material'
 import { AddressMultiLine } from '../AddressMultiLine/AddressMultiLine'
 import { TrackingLink } from '../TrackingLink/TrackingLink'
 import type { OrderDetailsFragment } from './OrderDetails.gql'

package/components/OrderItem/OrderItem.tsx

@@ -2,7 +2,7 @@ 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 { NextLink, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
+import { extendableComponent, NextLink, responsiveVal } from '@graphcommerce/next-ui'
 import { Box } from '@mui/material'
 import type { OrderCardItemImageFragment } from '../../hooks/OrderCardItemImage.gql'
 import type { OrderItemFragment } from './OrderItem.gql'

package/components/OrderItems/OrderItems.tsx

@@ -1,4 +1,4 @@
-import { SectionContainer, extendableComponent } from '@graphcommerce/next-ui'
+import { extendableComponent, SectionContainer } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Button } from '@mui/material'

package/components/ReorderItems/ReorderItems.tsx

@@ -1,6 +1,6 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { AddProductsToCartSnackbarMessage } from '@graphcommerce/magento-product/components/AddProductsToCart/AddProductsToCartSnackbarMessage'
-import { IconSvg, LinkOrButton, iconChevronRight, nonNullable } from '@graphcommerce/next-ui'
+import { iconChevronRight, IconSvg, LinkOrButton, nonNullable } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/macro'
 import { Box } from '@mui/material'

package/components/SignOutForm/SignOutForm.tsx

@@ -4,8 +4,8 @@ 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'
+import { SignOutFormDocument } from './SignOutForm.gql'
 
 export type SignOutFormProps = {
   button: (props: { formState: FormState<Record<string, unknown>> }) => React.ReactNode

package/components/SignUpForm/SignUpForm.tsx

@@ -21,15 +21,14 @@ type SignUpFormProps = {
   clearErrors: UseFormClearErrors<{ email?: string; requestedMode?: 'signin' | 'signup' }>
 }
 
+type SignUpFormValues = SignUpMutationVariables & { confirmPassword?: string }
+
 export function SignUpForm(props: SignUpFormProps) {
   const { email, setError, clearErrors } = props
 
   const storeConfig = useQuery(StoreConfigDocument)
   const signIn = useSignInForm({ email })
-  const form = useFormGqlMutation<
-    SignUpMutation,
-    SignUpMutationVariables & { confirmPassword?: string }
-  >(
+  const form = useFormGqlMutation<SignUpMutation, SignUpFormValues>(
     SignUpDocument,
     {
       defaultValues: { email },
@@ -125,7 +124,11 @@ export function SignUpForm(props: SignUpFormProps) {
           <Trans id='Create Account' />
         </Button>
       </FormActions>
-      <FormPersist form={form} name='SignUp' exclude={['password', 'confirmPassword']} />
+      <FormPersist<SignUpFormValues>
+        form={form}
+        name='SignUp'
+        exclude={['password', 'confirmPassword']}
+      />
     </form>
   )
 }

package/components/SignUpForm/SignUpFormInline.tsx

@@ -2,7 +2,7 @@ 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, Form, FormRow, extendableComponent } from '@graphcommerce/next-ui'
+import { Button, extendableComponent, Form, FormRow } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
 import { Alert, Box } from '@mui/material'

package/components/TrackingLink/TrackingLink.tsx

@@ -1,4 +1,4 @@
-import { IconSvg, iconLocation } from '@graphcommerce/next-ui'
+import { iconLocation, IconSvg } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Link, Typography } from '@mui/material'

package/components/WaitForCustomer/WaitForCustomer.tsx

@@ -1,7 +1,7 @@
 import type { WaitForQueriesProps } from '@graphcommerce/ecommerce-ui'
-import { WaitForQueries, mergeErrors } from '@graphcommerce/ecommerce-ui'
+import { mergeErrors, WaitForQueries } from '@graphcommerce/ecommerce-ui'
 import type { FullPageMessageProps } from '@graphcommerce/next-ui'
-import { FullPageMessage, IconSvg, iconPerson } from '@graphcommerce/next-ui'
+import { FullPageMessage, iconPerson, IconSvg } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Button, CircularProgress } from '@mui/material'
 import React from 'react'

package/hooks/useAccountSignInUpForm.tsx

@@ -5,9 +5,9 @@ import { useFormGqlQuery } from '@graphcommerce/react-hook-form'
 import { useEffect } from 'react'
 import type { IsEmailAvailableQuery, IsEmailAvailableQueryVariables } from './IsEmailAvailable.gql'
 import { IsEmailAvailableDocument } from './IsEmailAvailable.gql'
-import { UseCustomerValidateTokenDocument } from './UseCustomerValidateToken.gql'
 import { useCustomerAccountCanSignUp } from './useCustomerPermissions'
 import { useCustomerSession } from './useCustomerSession'
+import { UseCustomerValidateTokenDocument } from './UseCustomerValidateToken.gql'
 
 export type UseFormIsEmailAvailableProps = {
   onSubmitted?: (data: { email: string }) => void

package/hooks/useSignInForm.ts

@@ -15,8 +15,7 @@ type UseSignInFormProps = {
  * To extend the actions that happen after a successful sign in, you can use the `onComplete`
  * option.
  *
- * @example
- *   @graphcommerce/magento-cart/plugins/useSignInFormMergeCart
+ * @graphcommerce/magento-cart/plugins/useSignInFormMergeCart
  */
 export function useSignInForm({ email, ...options }: UseSignInFormProps) {
   const client = useApolloClient()

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.4-canary.0",
+  "version": "9.0.4-canary.2",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,19 +12,19 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.4-canary.0",
-    "@graphcommerce/eslint-config-pwa": "^9.0.4-canary.0",
-    "@graphcommerce/framer-next-pages": "^9.0.4-canary.0",
-    "@graphcommerce/framer-utils": "^9.0.4-canary.0",
-    "@graphcommerce/graphql": "^9.0.4-canary.0",
-    "@graphcommerce/graphql-mesh": "^9.0.4-canary.0",
-    "@graphcommerce/image": "^9.0.4-canary.0",
-    "@graphcommerce/magento-graphql": "^9.0.4-canary.0",
-    "@graphcommerce/magento-store": "^9.0.4-canary.0",
-    "@graphcommerce/next-ui": "^9.0.4-canary.0",
-    "@graphcommerce/prettier-config-pwa": "^9.0.4-canary.0",
-    "@graphcommerce/react-hook-form": "^9.0.4-canary.0",
-    "@graphcommerce/typescript-config-pwa": "^9.0.4-canary.0",
+    "@graphcommerce/ecommerce-ui": "^9.0.4-canary.2",
+    "@graphcommerce/eslint-config-pwa": "^9.0.4-canary.2",
+    "@graphcommerce/framer-next-pages": "^9.0.4-canary.2",
+    "@graphcommerce/framer-utils": "^9.0.4-canary.2",
+    "@graphcommerce/graphql": "^9.0.4-canary.2",
+    "@graphcommerce/graphql-mesh": "^9.0.4-canary.2",
+    "@graphcommerce/image": "^9.0.4-canary.2",
+    "@graphcommerce/magento-graphql": "^9.0.4-canary.2",
+    "@graphcommerce/magento-store": "^9.0.4-canary.2",
+    "@graphcommerce/next-ui": "^9.0.4-canary.2",
+    "@graphcommerce/prettier-config-pwa": "^9.0.4-canary.2",
+    "@graphcommerce/react-hook-form": "^9.0.4-canary.2",
+    "@graphcommerce/typescript-config-pwa": "^9.0.4-canary.2",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/test/authentication.playwright.ts

@@ -1,7 +1,5 @@
-/* eslint-disable import/no-extraneous-dependencies */
-
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { waitForGraphQlResponse } from '@graphcommerce/graphql/test/apolloClient.fixture'
+import { waitForGraphQlResponse } from '@graphcommerce/graphql/__playwright__/apolloClient.fixture'
 import type { SignUpMutation } from '@graphcommerce/magento-customer/components'
 import { SignUpDocument } from '@graphcommerce/magento-customer/components'
 import type { SignUpConfirmMutation } from '@graphcommerce/magento-customer/components/SignUpForm/SignUpConfirm.gql'