@graphcommerce/magento-customer 4.10.4 → 4.10.5

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Change Log
 
+## 4.10.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
+
 ## 4.10.4
 
 ### Patch Changes

package/components/AddressFields/AddressFields.tsx

@@ -1,6 +1,7 @@
+import { SelectElement, TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
 import { CountryRegionsDocument } from '@graphcommerce/magento-store'
-import { FormRow, InputCheckmark } from '@graphcommerce/next-ui'
+import { filterNonNullableKeys, FormRow, InputCheckmark } from '@graphcommerce/next-ui'
 import {
   assertFormGqlOperation,
   houseNumberPattern,
@@ -8,7 +9,6 @@ import {
 } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { TextField } from '@mui/material'
 import React, { useMemo } from 'react'
 
 type AddressFieldValues = {
@@ -26,9 +26,10 @@ type AddressFieldsProps = { form: UseFormReturn<any>; readOnly?: boolean }
 
 export function AddressFields(props: AddressFieldsProps) {
   const { form, readOnly } = props
+
   const countries = useQuery(CountryRegionsDocument).data?.countries
   assertFormGqlOperation<AddressFieldValues>(form)
-  const { watch, formState, required, muiRegister, valid } = form
+  const { watch, required, valid, control } = form
 
   const country = watch('countryCode')
 
@@ -48,56 +49,52 @@ export function AddressFields(props: AddressFieldsProps) {
     const compare: (a: Region, b: Region) => number = (a, b) =>
       (a?.name ?? '')?.localeCompare(b?.name ?? '')
 
-    const regions = availableRegions?.sort(compare)
-    return regions
+    return availableRegions?.sort(compare)
   }, [country, countryList])
 
   return (
     <>
       <FormRow>
-        <TextField
+        <TextFieldElement
           variant='outlined'
+          control={control}
+          required={required.street}
+          name='street'
           type='text'
-          error={!!formState.errors.street}
           label={<Trans id='Street' />}
           autoComplete='address-line1'
-          required={!!required?.street}
-          {...muiRegister('street', { required: required?.street })}
-          helperText={formState.isSubmitted && formState.errors.street?.message}
           InputProps={{
             readOnly,
             endAdornment: <InputCheckmark show={valid.street} />,
           }}
         />
-        <TextField
-          variant='outlined'
-          type='text'
-          error={!!formState.errors.houseNumber}
-          label={<Trans id='Housenumber' />}
-          autoComplete='address-line2'
-          required={!!required?.houseNumber}
-          {...muiRegister('houseNumber', {
-            required: required?.houseNumber,
+        <TextFieldElement
+          control={control}
+          name='houseNumber'
+          required={required.houseNumber}
+          validation={{
             pattern: {
               value: houseNumberPattern,
               message: i18n._(/* i18n */ 'Please provide a valid house number'),
             },
-          })}
-          helperText={formState.isSubmitted && formState.errors.houseNumber?.message}
+          }}
+          variant='outlined'
+          type='text'
+          label={<Trans id='Housenumber' />}
+          autoComplete='address-line2'
           InputProps={{
             readOnly,
             endAdornment: <InputCheckmark show={valid.houseNumber} />,
           }}
         />
-        <TextField
+        <TextFieldElement
+          control={control}
+          name='addition'
           variant='outlined'
           type='text'
-          error={!!formState.errors.addition}
-          required={!!required?.addition}
+          required={required.addition}
           label={<Trans id='Addition' />}
           autoComplete='address-line3'
-          {...muiRegister('addition', { required: required?.addition })}
-          helperText={formState.isSubmitted && formState.errors.addition?.message}
           InputProps={{
             readOnly,
             endAdornment: <InputCheckmark show={valid.addition} />,
@@ -105,27 +102,25 @@ export function AddressFields(props: AddressFieldsProps) {
         />
       </FormRow>
       <FormRow>
-        <TextField
+        <TextFieldElement
+          control={control}
+          name='postcode'
           variant='outlined'
           type='text'
-          error={!!formState.errors.postcode}
-          required={!!required?.postcode}
+          required={required.postcode}
           label={<Trans id='Postcode' />}
-          {...muiRegister('postcode', { required: required?.postcode })}
-          helperText={formState.isSubmitted && formState.errors.postcode?.message}
           InputProps={{
             readOnly,
             endAdornment: <InputCheckmark show={valid.postcode} />,
           }}
         />
-        <TextField
+        <TextFieldElement
+          control={control}
+          name='city'
           variant='outlined'
           type='text'
-          error={!!formState.errors.city}
-          required={!!required?.city}
+          required={required.city}
           label={<Trans id='City' />}
-          {...muiRegister('city', { required: required?.city })}
-          helperText={formState.isSubmitted && formState.errors.city?.message}
           InputProps={{
             readOnly,
             endAdornment: <InputCheckmark show={valid.city} />,
@@ -133,63 +128,39 @@ export function AddressFields(props: AddressFieldsProps) {
         />
       </FormRow>
       <FormRow>
-        <TextField
-          select
-          SelectProps={{ native: true, displayEmpty: true }}
-          {...muiRegister('countryCode', { required: required.countryCode })}
+        <SelectElement
+          control={control}
+          name='countryCode'
+          SelectProps={{ autoWidth: true }}
           variant='outlined'
-          error={!!formState.errors.countryCode}
           label={<Trans id='Country' />}
-          required={!!required?.countryCode}
-          helperText={formState.errors.countryCode?.message}
-          // onBlur={onBlur}
+          required={required.countryCode}
           InputProps={{
             readOnly,
             endAdornment: <InputCheckmark show={valid.countryCode} select />,
           }}
-        >
-          {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-          <option value='' />
-          {countryList.map((c) => {
-            if (!c?.two_letter_abbreviation) return null
-            return (
-              <option key={c.two_letter_abbreviation} value={c.two_letter_abbreviation}>
-                {c.full_name_locale}
-              </option>
-            )
-          })}
-        </TextField>
+          options={filterNonNullableKeys(countryList, [
+            'two_letter_abbreviation',
+            'full_name_locale',
+          ]).map(({ two_letter_abbreviation: id, full_name_locale: label }) => ({ id, label }))}
+        />
 
         {regionList.length > 0 && (
-          <TextField
-            select
-            SelectProps={{ native: true, displayEmpty: true }}
+          <SelectElement
+            control={control}
+            name='regionId'
+            // SelectProps={{ native: true, displayEmpty: true }}
             variant='outlined'
-            error={!!formState.errors.regionId}
             label={<Trans id='Region' />}
-            {...muiRegister('regionId', {
-              required: true,
-              shouldUnregister: true,
-              valueAsNumber: true,
-            })}
             required
-            helperText={formState.errors.regionId?.message}
             InputProps={{
               readOnly,
               endAdornment: <InputCheckmark show={valid.regionId} select />,
             }}
-          >
-            {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-            <option value='' />
-            {regionList.map((r) => {
-              if (!r?.id) return null
-              return (
-                <option key={r.id} value={r.id}>
-                  {r.name}
-                </option>
-              )
-            })}
-          </TextField>
+            options={filterNonNullableKeys(regionList, ['id', 'name']).map(
+              ({ id, name: label }) => ({ id, label }),
+            )}
+          />
         )}
       </FormRow>
     </>

package/components/NameFields/NameFields.tsx

@@ -1,3 +1,4 @@
+import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import { FormRow, InputCheckmark } from '@graphcommerce/next-ui'
 import { assertFormGqlOperation, Controller, UseFormReturn } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
@@ -65,31 +66,29 @@ export function NameFields(props: NameFieldProps) {
       )}
 
       <FormRow>
-        <TextField
+        <TextFieldElement
+          control={form.control}
+          name='firstname'
+          required={required.firstname}
           variant='outlined'
           type='text'
           label={<Trans id='First Name' />}
-          required={!!required}
-          error={!!formState.errors.firstname}
-          helperText={formState.isSubmitted && formState.errors.firstname?.message}
           InputProps={{
             readOnly,
             endAdornment: <InputCheckmark show={valid.firstname} />,
           }}
-          {...muiRegister('firstname', { required: required?.firstname })}
         />
-        <TextField
+        <TextFieldElement
+          control={form.control}
+          name='lastname'
+          required={required.lastname}
           variant='outlined'
           type='text'
-          error={!!formState.errors.lastname}
           label={<Trans id='Last Name' />}
-          required={!!required?.lastname}
-          helperText={formState.isSubmitted && formState.errors.lastname?.message}
           InputProps={{
             readOnly,
             endAdornment: <InputCheckmark show={valid.lastname} />,
           }}
-          {...muiRegister('lastname', { required: required?.lastname })}
         />
       </FormRow>
     </>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.10.4",
+  "version": "4.10.5",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -19,7 +19,7 @@
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "1.2.3",
+    "@graphcommerce/ecommerce-ui": "1.3.0",
     "@graphcommerce/framer-utils": "3.2.0",
     "@graphcommerce/graphql": "3.4.8",
     "@graphcommerce/graphql-mesh": "4.1.9",