@graphcommerce/magento-customer 9.0.4-canary.9 → 9.0.4

package/CHANGELOG.md

@@ -1,28 +1,18 @@
 # Change Log
 
-## 9.0.4-canary.9
+## 9.0.4
 
-## 9.0.4-canary.8
+## 9.0.3
 
-## 9.0.4-canary.7
+## 9.0.3-canary.0
 
-## 9.0.4-canary.6
+## 9.0.2
 
-## 9.0.4-canary.5
+## 9.0.2-canary.0
 
-## 9.0.4-canary.4
+## 9.0.1
 
-### Patch Changes
-
-- [`5ca6fb9`](https://github.com/graphcommerce-org/graphcommerce/commit/5ca6fb94f6f275210c77493d05bad7c1620ff5a3) - When a user reorders their cart without interacting with their cart previously a new cart wouldn't be created. ([@paales](https://github.com/paales))
-
-## 9.0.4-canary.3
-
-## 9.0.4-canary.2
-
-## 9.0.4-canary.1
-
-## 9.0.4-canary.0
+## 9.0.1-canary.1
 
 ## 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 { t, Trans } from '@lingui/macro'
+import { Trans, t } 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 { extendableComponent, Pagination, SectionContainer } from '@graphcommerce/next-ui'
+import { Pagination, SectionContainer, extendableComponent } 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,8 +8,12 @@ import { useMemo } from 'react'
 import type { AddressFieldsOptions } from './useAddressFieldsForm'
 import { useAddressFieldsForm } from './useAddressFieldsForm'
 
-function useAddressCountryRegion(props: AddressFieldsOptions) {
-  const form = useAddressFieldsForm(props)
+/** @public */
+export function useAddressCountryRegion<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(props: AddressFieldsOptions<TFieldValues, TName>) {
+  const form = useAddressFieldsForm<TFieldValues, TName>(props)
   const { control, name } = form
 
   const countryQuery = useQuery(CountryRegionsDocument)
@@ -37,15 +41,11 @@ function useAddressCountryRegion(props: AddressFieldsOptions) {
   return { ...form, country, countryList, regionList, loading: countryQuery.loading }
 }
 
-type AddressCountryRegionComponent = <
+export function AddressCountryRegion<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(
-  props: AddressFieldsOptions<TFieldValues, TName>,
-) => React.ReactNode
-
-export function AddressCountryRegionBase(props: AddressFieldsOptions) {
-  const form = useAddressCountryRegion(props)
+>(props: AddressFieldsOptions<TFieldValues, TName>) {
+  const form = useAddressCountryRegion<TFieldValues, TName>(props)
   const { control, name, readOnly, required, countryList, regionList, loading } = form
 
   if (loading) {
@@ -95,5 +95,3 @@ export function AddressCountryRegionBase(props: AddressFieldsOptions) {
     </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 { houseNumberPattern, TextFieldElement } from '@graphcommerce/ecommerce-ui'
+import { TextFieldElement, houseNumberPattern } 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 { iconPerson, IconSvg } from '@graphcommerce/next-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/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 {
-  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'

package/components/ConfirmCustomer/ConfirmCustomerForm.tsx

@@ -1,5 +1,5 @@
 import { EmailElement, useFormGqlMutation } from '@graphcommerce/ecommerce-ui'
-import { Button, FormRow, iconPerson, LayoutTitle } from '@graphcommerce/next-ui'
+import { Button, FormRow, LayoutTitle, iconPerson } 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,7 +9,6 @@ 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 {
@@ -130,7 +129,7 @@ export function ContactForm() {
         <Trans>Submit</Trans>
       </Button>
 
-      <FormPersist<ContactUsMutationVariables> form={form} name='ContactUs' />
+      <FormPersist form={form} name='ContactUs' />
       <MessageSnackbar
         open={submittedWithoutErrors}
         variant='pill'

package/components/CreateCustomerAddressForm/CreateCustomerAddressForm.tsx

@@ -9,7 +9,6 @@ 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() {
@@ -62,12 +61,9 @@ export function CreateCustomerAddressForm() {
   return (
     <>
       <Form onSubmit={submitHandler} noValidate>
-        <CompanyFields<CreateCustomerAddressMutationVariables> form={form} />
+        <CompanyFields form={form} />
         <NameFields form={form} prefix />
-        <AddressFields<CreateCustomerAddressMutationVariables>
-          form={form}
-          name={{ regionId: 'region.region_id' }}
-        />
+        <AddressFields 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 { iconPerson, IconSvg, MenuFabSecondaryItem } from '@graphcommerce/next-ui'
+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'

package/components/EditAddressForm/EditAddressForm.tsx

@@ -10,7 +10,6 @@ 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 = {
@@ -80,12 +79,9 @@ export function EditAddressForm(props: EditAddressFormProps) {
   return (
     <>
       <Form onSubmit={submitHandler} noValidate sx={sx}>
-        <CompanyFields<UpdateCustomerAddressMutationVariables> form={form} />
+        <CompanyFields form={form} />
         <NameFields form={form} prefix />
-        <AddressFields<UpdateCustomerAddressMutationVariables>
-          form={form}
-          name={{ regionId: 'region.region_id' }}
-        />
+        <AddressFields form={form} name={{ regionId: 'region.region_id' }} />
         <FormRow>
           <TelephoneElement
             variant='outlined'

package/components/NoOrdersFound/NoOrdersFound.tsx

@@ -1,4 +1,4 @@
-import { extendableComponent, iconBox, IconHeader } from '@graphcommerce/next-ui'
+import { IconHeader, extendableComponent, iconBox } 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, extendableComponent, NextLink } from '@graphcommerce/next-ui'
+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'

package/components/OrderDetails/OrderDetails.tsx

@@ -1,14 +1,14 @@
 import {
-  breakpointVal,
   DateTimeFormat,
-  extendableComponent,
-  iconInvoice,
   IconSvg,
   SectionContainer,
+  breakpointVal,
+  extendableComponent,
+  iconInvoice,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { Box, lighten, Typography } from '@mui/material'
+import { Box, Typography, lighten } 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 { extendableComponent, NextLink, responsiveVal } from '@graphcommerce/next-ui'
+import { NextLink, extendableComponent, 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 { extendableComponent, SectionContainer } from '@graphcommerce/next-ui'
+import { SectionContainer, extendableComponent } 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,11 +1,10 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-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 { 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 type { OrderItemsFragment } from '../OrderItems/OrderItems.gql'
-import type { ReorderItemsMutation, ReorderItemsMutationVariables } from './ReorderItems.gql'
 import { ReorderItemsDocument } from './ReorderItems.gql'
 
 export type ReorderItemsProps = { order: OrderItemsFragment }
@@ -13,10 +12,7 @@ export type ReorderItemsProps = { order: OrderItemsFragment }
 export function ReorderItems(props: ReorderItemsProps) {
   const { order } = props
 
-  const form = useFormGqlMutationCart<
-    ReorderItemsMutation,
-    ReorderItemsMutationVariables & { cartId: string }
-  >(ReorderItemsDocument, {
+  const form = useFormGqlMutation(ReorderItemsDocument, {
     defaultValues: { orderNumber: order.number },
   })
   const { formState, handleSubmit, error, data: cartData } = form

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

package/components/SignUpForm/SignUpForm.tsx

@@ -21,14 +21,15 @@ 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, SignUpFormValues>(
+  const form = useFormGqlMutation<
+    SignUpMutation,
+    SignUpMutationVariables & { confirmPassword?: string }
+  >(
     SignUpDocument,
     {
       defaultValues: { email },
@@ -124,11 +125,7 @@ export function SignUpForm(props: SignUpFormProps) {
           <Trans id='Create Account' />
         </Button>
       </FormActions>
-      <FormPersist<SignUpFormValues>
-        form={form}
-        name='SignUp'
-        exclude={['password', 'confirmPassword']}
-      />
+      <FormPersist 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, 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'

package/components/TrackingLink/TrackingLink.tsx

@@ -1,4 +1,4 @@
-import { iconLocation, IconSvg } from '@graphcommerce/next-ui'
+import { IconSvg, iconLocation } 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 { mergeErrors, WaitForQueries } from '@graphcommerce/ecommerce-ui'
+import { WaitForQueries, mergeErrors } from '@graphcommerce/ecommerce-ui'
 import type { FullPageMessageProps } from '@graphcommerce/next-ui'
-import { FullPageMessage, iconPerson, IconSvg } from '@graphcommerce/next-ui'
+import { FullPageMessage, IconSvg, iconPerson } 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,7 +15,8 @@ type UseSignInFormProps = {
  * To extend the actions that happen after a successful sign in, you can use the `onComplete`
  * option.
  *
- * @graphcommerce/magento-cart/plugins/useSignInFormMergeCart
+ * @example
+ *   @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.9",
+  "version": "9.0.4",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,19 +12,19 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.4-canary.9",
-    "@graphcommerce/eslint-config-pwa": "^9.0.4-canary.9",
-    "@graphcommerce/framer-next-pages": "^9.0.4-canary.9",
-    "@graphcommerce/framer-utils": "^9.0.4-canary.9",
-    "@graphcommerce/graphql": "^9.0.4-canary.9",
-    "@graphcommerce/graphql-mesh": "^9.0.4-canary.9",
-    "@graphcommerce/image": "^9.0.4-canary.9",
-    "@graphcommerce/magento-graphql": "^9.0.4-canary.9",
-    "@graphcommerce/magento-store": "^9.0.4-canary.9",
-    "@graphcommerce/next-ui": "^9.0.4-canary.9",
-    "@graphcommerce/prettier-config-pwa": "^9.0.4-canary.9",
-    "@graphcommerce/react-hook-form": "^9.0.4-canary.9",
-    "@graphcommerce/typescript-config-pwa": "^9.0.4-canary.9",
+    "@graphcommerce/ecommerce-ui": "^9.0.4",
+    "@graphcommerce/eslint-config-pwa": "^9.0.4",
+    "@graphcommerce/framer-next-pages": "^9.0.4",
+    "@graphcommerce/framer-utils": "^9.0.4",
+    "@graphcommerce/graphql": "^9.0.4",
+    "@graphcommerce/graphql-mesh": "^9.0.4",
+    "@graphcommerce/image": "^9.0.4",
+    "@graphcommerce/magento-graphql": "^9.0.4",
+    "@graphcommerce/magento-store": "^9.0.4",
+    "@graphcommerce/next-ui": "^9.0.4",
+    "@graphcommerce/prettier-config-pwa": "^9.0.4",
+    "@graphcommerce/react-hook-form": "^9.0.4",
+    "@graphcommerce/typescript-config-pwa": "^9.0.4",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/test/authentication.playwright.ts

@@ -1,5 +1,7 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { waitForGraphQlResponse } from '@graphcommerce/graphql/__playwright__/apolloClient.fixture'
+import { waitForGraphQlResponse } from '@graphcommerce/graphql/test/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'