@graphcommerce/magento-cart-shipping-address 3.4.4 → 3.4.5

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Change Log
 
+## 3.4.5
+
+### Patch Changes
+
+- [#1579](https://github.com/graphcommerce-org/graphcommerce/pull/1579) [`e8639ec5f`](https://github.com/graphcommerce-org/graphcommerce/commit/e8639ec5f6759504211d70a966f5c348c6b3a7f6) Thanks [@paales](https://github.com/paales)! - New FormComponents added which combines react-hook-form and mui's form components for easier form handling
+
+- Updated dependencies [[`e8639ec5f`](https://github.com/graphcommerce-org/graphcommerce/commit/e8639ec5f6759504211d70a966f5c348c6b3a7f6)]:
+  - @graphcommerce/ecommerce-ui@1.3.0
+  - @graphcommerce/magento-customer@4.10.5
+  - @graphcommerce/magento-cart@4.7.5
+
 ## 3.4.4
 
 ### Patch Changes

package/components/ShippingAddressForm/ShippingAddressForm.tsx

@@ -1,3 +1,11 @@
+import {
+  phonePattern,
+  useFormAutoSubmit,
+  useFormCompose,
+  UseFormComposeOptions,
+  useFormPersist,
+  TextFieldElement,
+} from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
 import {
   ApolloCartErrorAlert,
@@ -5,19 +13,17 @@ import {
   useFormGqlMutationCart,
 } from '@graphcommerce/magento-cart'
 import { CartAddressFragment } from '@graphcommerce/magento-cart/components/CartAddress/CartAddress.gql'
-import { AddressFields, CustomerDocument, NameFields } from '@graphcommerce/magento-customer'
+import {
+  AddressFields,
+  CustomerDocument,
+  NameFields,
+  useCustomerQuery,
+} from '@graphcommerce/magento-customer'
 import { CountryRegionsDocument, StoreConfigDocument } from '@graphcommerce/magento-store'
 import { Form, FormRow, InputCheckmark } from '@graphcommerce/next-ui'
-import {
-  phonePattern,
-  useFormAutoSubmit,
-  useFormCompose,
-  UseFormComposeOptions,
-  useFormPersist,
-} from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { SxProps, TextField, Theme } from '@mui/material'
+import { SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { isSameAddress } from '../../utils/isSameAddress'
 import { GetAddressesDocument } from './GetAddresses.gql'
@@ -35,7 +41,7 @@ export const ShippingAddressForm = React.memo<ShippingAddressFormProps>((props)
   const { data: cartQuery } = useCartQuery(GetAddressesDocument)
   const { data: config } = useQuery(StoreConfigDocument)
   const { data: countriesData } = useQuery(CountryRegionsDocument)
-  const { data: customerQuery } = useQuery(CustomerDocument, { fetchPolicy: 'cache-only' })
+  const { data: customerQuery } = useCustomerQuery(CustomerDocument)
 
   const shopCountry = config?.storeConfig?.locale?.split('_')?.[1].toUpperCase()
 
@@ -103,7 +109,7 @@ export const ShippingAddressForm = React.memo<ShippingAddressFormProps>((props)
       }
     },
   })
-  const { muiRegister, handleSubmit, valid, formState, required, error } = form
+  const { handleSubmit, valid, formState, required, error } = form
   const submit = handleSubmit(() => {})
 
   useFormPersist({ form, name: 'ShippingAddressForm' })
@@ -121,17 +127,16 @@ export const ShippingAddressForm = React.memo<ShippingAddressFormProps>((props)
       <NameFields form={form} key='name' readOnly={readOnly} />
       <AddressFields form={form} key='addressfields' readOnly={readOnly} />
       <FormRow key='telephone'>
-        <TextField
+        <TextFieldElement
+          control={form.control}
+          name='telephone'
           variant='outlined'
           type='text'
-          error={!!formState.errors.telephone}
           required={required.telephone}
-          label={<Trans id='Telephone' />}
-          {...muiRegister('telephone', {
-            required: required.telephone,
+          validation={{
             pattern: { value: phonePattern, message: i18n._(/* i18n */ 'Invalid phone number') },
-          })}
-          helperText={formState.isSubmitted && formState.errors.telephone?.message}
+          }}
+          label={<Trans id='Telephone' />}
           InputProps={{
             readOnly,
             endAdornment: <InputCheckmark show={valid.telephone} />,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart-shipping-address",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.4.4",
+  "version": "3.4.5",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,13 +18,13 @@
     "@playwright/test": "^1.21.1"
   },
   "dependencies": {
+    "@graphcommerce/ecommerce-ui": "1.3.0",
     "@graphcommerce/graphql": "3.4.8",
     "@graphcommerce/image": "3.1.9",
-    "@graphcommerce/magento-cart": "4.7.4",
-    "@graphcommerce/magento-customer": "4.10.4",
+    "@graphcommerce/magento-cart": "4.7.5",
+    "@graphcommerce/magento-customer": "4.10.5",
     "@graphcommerce/magento-store": "4.2.32",
-    "@graphcommerce/next-ui": "4.23.1",
-    "@graphcommerce/react-hook-form": "3.3.2"
+    "@graphcommerce/next-ui": "4.23.1"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",