@graphcommerce/address-fields-nl 8.0.3-canary.4 → 8.0.3-canary.6

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @graphcommerce/address-fields-nl
 
+## 8.0.3-canary.6
+
+## 8.0.3-canary.5
+
+### Patch Changes
+
+- [#2212](https://github.com/graphcommerce-org/graphcommerce/pull/2212) [`b9d92c8`](https://github.com/graphcommerce-org/graphcommerce/commit/b9d92c8bcdb9c3d0fdbd9c004b864b97bc52fcb1) - Refactor the AddressFields and use FormAutoSubmit and separate AddressField components
+  ([@paales](https://github.com/paales))
+
 ## 8.0.3-canary.4
 
 ## 8.0.3-canary.3

package/components/PostcodeNLAutoFill.tsx

@@ -0,0 +1,53 @@
+import { FieldPath, FieldValues, FormAutoSubmit, PathValue } from '@graphcommerce/ecommerce-ui'
+import { useApolloClient } from '@graphcommerce/graphql'
+import { AddressFieldsOptions, useAddressFieldsForm } from '@graphcommerce/magento-customer'
+import { useEventCallback } from '@mui/material'
+import { PostCodeNLDocument } from '../graphql/PostcodeNL.gql'
+
+const postCodeRegex = /^[1-9][0-9]{3}[a-z]{2}$/i
+
+export function PostcodeNLAutoFill<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(options: AddressFieldsOptions<TFieldValues, TName>) {
+  const { control, name, getValues, setValue } = useAddressFieldsForm(options)
+
+  const client = useApolloClient()
+
+  const submit = useEventCallback(async () => {
+    const postcodeRaw = getValues(name.postcode) as string
+    const housenumber = getValues(name.houseNumber) as string
+    const addition = getValues(name.addition) as string
+    const country = getValues(name.countryCode) as string
+
+    if (!housenumber || !postcodeRaw || country !== 'NL') return
+
+    const postcode = postcodeRaw.trim().replace(/ /g, '')
+    if (!postCodeRegex.test(postcode)) return
+
+    const result = await client.query({
+      query: PostCodeNLDocument,
+      variables: { postcode, housenumber: `${housenumber}${addition ?? ''}` },
+      // fetchPolicy: process.env.NODE_ENV !== 'production' ? 'no-cache' : 'cache-first',
+    })
+
+    const { street, city } = result.data?.postcodeNL ?? {}
+    if (street && city) {
+      setValue(name.street, street as PathValue<TFieldValues, TName>)
+      setValue(name.city, city as PathValue<TFieldValues, TName>)
+    } else {
+      setValue(name.street, '' as PathValue<TFieldValues, TName>)
+      setValue(name.city, '' as PathValue<TFieldValues, TName>)
+    }
+  })
+
+  return (
+    <FormAutoSubmit
+      initialWait={0}
+      control={control}
+      submit={submit}
+      noValidate
+      name={[name.postcode, name.houseNumber, name.addition, name.countryCode]}
+    />
+  )
+}

package/graphql/PostcodeNL.graphql

@@ -1,6 +1,6 @@
-query postcodeNL($postcode: String!, $housenumber: String!){
-  postcodeNL(postcode: $postcode, housenumber: $housenumber){
+query PostCodeNL($postcode: String!, $housenumber: String!) {
+  postcodeNL(postcode: $postcode, housenumber: $housenumber) {
     street
     city
   }
-} 
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/address-fields-nl",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.0.3-canary.4",
+  "version": "8.0.3-canary.6",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,14 +12,14 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^8.0.3-canary.4",
-    "@graphcommerce/eslint-config-pwa": "^8.0.3-canary.4",
-    "@graphcommerce/graphql": "^8.0.3-canary.4",
-    "@graphcommerce/magento-customer": "^8.0.3-canary.4",
-    "@graphcommerce/magento-store": "^8.0.3-canary.4",
-    "@graphcommerce/next-ui": "^8.0.3-canary.4",
-    "@graphcommerce/prettier-config-pwa": "^8.0.3-canary.4",
-    "@graphcommerce/typescript-config-pwa": "^8.0.3-canary.4",
+    "@graphcommerce/ecommerce-ui": "^8.0.3-canary.6",
+    "@graphcommerce/eslint-config-pwa": "^8.0.3-canary.6",
+    "@graphcommerce/graphql": "^8.0.3-canary.6",
+    "@graphcommerce/magento-customer": "^8.0.3-canary.6",
+    "@graphcommerce/magento-store": "^8.0.3-canary.6",
+    "@graphcommerce/next-ui": "^8.0.3-canary.6",
+    "@graphcommerce/prettier-config-pwa": "^8.0.3-canary.6",
+    "@graphcommerce/typescript-config-pwa": "^8.0.3-canary.6",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/plugins/AddPostcodeNLAddressFields.tsx

@@ -1,18 +1,49 @@
-import { AddressFieldsProps } from '@graphcommerce/magento-customer'
+import { FieldPath, FieldValues, useWatch } from '@graphcommerce/ecommerce-ui'
+import {
+  useAddressFieldsForm,
+  AddressAddition,
+  AddressCity,
+  AddressCountryRegion,
+  AddressFieldsProps,
+  AddressHousenumber,
+  AddressPostcode,
+  AddressStreet,
+} from '@graphcommerce/magento-customer'
 import type { PluginProps } from '@graphcommerce/next-config'
-import { PostcodeNLAddressFields } from '../components/PostcodeNLAddressFields'
+import { FormRow } from '@graphcommerce/next-ui'
+import { PostcodeNLAutoFill } from '../components/PostcodeNLAutoFill'
 
 export const component = 'AddressFields'
-
 export const exported = '@graphcommerce/magento-customer/components/AddressFields/AddressFields'
 
-function AddPostcodeNLAddressFields(props: PluginProps<AddressFieldsProps>) {
-  const { form, Prev } = props
-  const country = form.watch('countryCode')
-  return country === 'NL' ? (
-    <PostcodeNLAddressFields countryFirst {...props} />
-  ) : (
-    <Prev countryFirst {...props} />
+function AddPostcodeNLAddressFields<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(props: PluginProps<AddressFieldsProps<TFieldValues, TName>>) {
+  const { Prev } = props
+  const { control, name } = useAddressFieldsForm(props)
+  const country = useWatch({ control, name: name.countryCode })
+
+  return (
+    <>
+      {country === 'NL' ? (
+        <>
+          <AddressCountryRegion {...props} />
+          <FormRow>
+            <AddressPostcode {...props} />
+            <AddressHousenumber {...props} />
+            <AddressAddition {...props} />
+          </FormRow>
+          <FormRow>
+            <AddressStreet {...props} />
+            <AddressCity {...props} />
+          </FormRow>
+        </>
+      ) : (
+        <Prev countryFirst {...props} />
+      )}
+      <PostcodeNLAutoFill {...props} />
+    </>
   )
 }
 

package/components/PostcodeNLAddressFields.tsx

@@ -1,167 +0,0 @@
-import {
-  TextFieldElement,
-  SelectElement,
-  assertFormGqlOperation,
-  houseNumberPattern,
-} from '@graphcommerce/ecommerce-ui'
-import { useQuery } from '@graphcommerce/graphql'
-import { AddressFieldsProps, AddressFieldValues } from '@graphcommerce/magento-customer'
-import { CountryRegionsDocument } from '@graphcommerce/magento-store'
-import { FormRow, InputCheckmark, filterNonNullableKeys } from '@graphcommerce/next-ui'
-import { i18n } from '@lingui/core'
-import { Trans } from '@lingui/react'
-import { useMemo } from 'react'
-import { usePostcodeService } from '../helpers/usePostcodeService'
-
-export function PostcodeNLAddressFields(props: AddressFieldsProps) {
-  const { form, readOnly, countryFirst } = props
-
-  const countryQuery = useQuery(CountryRegionsDocument, { fetchPolicy: 'cache-and-network' })
-  const countries = countryQuery.data?.countries ?? countryQuery.previousData?.countries
-
-  assertFormGqlOperation<AddressFieldValues>(form)
-  const { watch, required, valid, control } = form
-
-  const country = watch('countryCode')
-
-  usePostcodeService(form)
-
-  const countryList = useMemo(() => {
-    const countriesWithLocale = (countries ?? [])?.filter((c) => c?.full_name_locale)
-    return countriesWithLocale.sort((a, b) =>
-      (a?.full_name_locale ?? '')?.localeCompare(b?.full_name_locale ?? ''),
-    )
-  }, [countries])
-
-  const regionList = useMemo(() => {
-    const availableRegions = Object.values(
-      countryList.find((c) => c?.two_letter_abbreviation === country)?.available_regions ?? {},
-    )
-    type Region = (typeof availableRegions)[0]
-
-    const compare: (a: Region, b: Region) => number = (a, b) =>
-      (a?.name ?? '')?.localeCompare(b?.name ?? '')
-
-    return availableRegions?.sort(compare)
-  }, [country, countryList])
-
-  const countryFields = (
-    <FormRow>
-      <SelectElement
-        control={control}
-        name='countryCode'
-        SelectProps={{ autoWidth: true }}
-        variant='outlined'
-        label={<Trans id='Country' />}
-        required={required.countryCode}
-        InputProps={{
-          readOnly,
-          endAdornment: <InputCheckmark show={valid.countryCode} select />,
-        }}
-        options={filterNonNullableKeys(countryList, [
-          'two_letter_abbreviation',
-          'full_name_locale',
-        ]).map(({ two_letter_abbreviation: id, full_name_locale: label }) => ({ id, label }))}
-      />
-
-      {regionList.length > 0 && (
-        <SelectElement
-          control={control}
-          name='regionId'
-          // SelectProps={{ native: true, displayEmpty: true }}
-          variant='outlined'
-          label={<Trans id='Region' />}
-          required
-          InputProps={{
-            readOnly,
-            endAdornment: <InputCheckmark show={valid.regionId} select />,
-          }}
-          options={filterNonNullableKeys(regionList, ['id', 'name']).map(({ id, name: label }) => ({
-            id,
-            label,
-          }))}
-        />
-      )}
-    </FormRow>
-  )
-
-  return (
-    <>
-      {countryFirst && countryFields}
-      <FormRow>
-        <TextFieldElement
-          control={control}
-          name='postcode'
-          variant='outlined'
-          type='text'
-          required={required.postcode}
-          label={<Trans id='Postcode' />}
-          InputProps={{
-            readOnly,
-            endAdornment: <InputCheckmark show={valid.postcode} />,
-          }}
-        />
-        <TextFieldElement
-          control={control}
-          name='houseNumber'
-          required={required.houseNumber}
-          validation={{
-            pattern: {
-              value: houseNumberPattern,
-              message: i18n._(/* i18n */ 'Please provide a valid house number'),
-            },
-          }}
-          variant='outlined'
-          type='text'
-          label={<Trans id='Housenumber' />}
-          autoComplete='address-line2'
-          InputProps={{
-            readOnly,
-            endAdornment: <InputCheckmark show={valid.houseNumber} />,
-          }}
-        />
-        <TextFieldElement
-          control={control}
-          name='addition'
-          variant='outlined'
-          type='text'
-          required={required.addition}
-          label={<Trans id='Addition' />}
-          autoComplete='address-line3'
-          InputProps={{
-            readOnly,
-            endAdornment: <InputCheckmark show={valid.addition} />,
-          }}
-        />
-      </FormRow>
-      <FormRow>
-        <TextFieldElement
-          variant='outlined'
-          control={control}
-          required={required.street}
-          name='street'
-          type='text'
-          label={<Trans id='Street' />}
-          autoComplete='address-line1'
-          InputProps={{
-            readOnly,
-            endAdornment: <InputCheckmark show={valid.street} />,
-          }}
-        />
-        <TextFieldElement
-          control={control}
-          name='city'
-          variant='outlined'
-          type='text'
-          required={required.city}
-          label={<Trans id='City' />}
-          InputProps={{
-            readOnly,
-            endAdornment: <InputCheckmark show={valid.city} />,
-          }}
-        />
-      </FormRow>
-      {!countryFirst && countryFields}
-    </>
-  )
-}

package/helpers/usePostcodeService.ts

@@ -1,61 +0,0 @@
-import { UseFormReturn } from '@graphcommerce/ecommerce-ui'
-import { useLazyQuery } from '@graphcommerce/graphql'
-import { AddressFieldValues } from '@graphcommerce/magento-customer'
-import { useEffect } from 'react'
-import { postcodeNLDocument } from '../graphql/PostcodeNL.gql'
-
-const postCodeRegex = /^[1-9][0-9]{3}[a-z]{2}$/i
-
-const defaultPostcodeFieldnames = {
-  postcode: 'postcode',
-  houseNumber: 'houseNumber',
-  addition: 'addition',
-  street: 'street',
-  city: 'city',
-}
-
-export function usePostcodeService(
-  form: UseFormReturn<any>,
-  fieldNames: AddressFieldValues = defaultPostcodeFieldnames,
-) {
-  const { watch, setValue, resetField } = form
-
-  const postcode = watch(fieldNames.postcode ?? '', '') as string
-  const houseNumber = watch(fieldNames.houseNumber ?? '', '') as string
-  const addition = watch(fieldNames.addition ?? '', '') as string
-  const [execute, result] = useLazyQuery(postcodeNLDocument)
-
-  useEffect(() => {
-    if (!houseNumber || !postcode || !postCodeRegex.test(postcode.trim().replace(/ /g, '')))
-      return () => {}
-
-    const handler = () =>
-      execute({
-        variables: {
-          postcode: postcode.trim().replace(/ /g, ''),
-          housenumber: addition ? houseNumber + addition : houseNumber,
-        },
-      })
-    const clear = setTimeout(handler, 300)
-
-    return () => clearInterval(clear)
-  }, [execute, houseNumber, postcode, addition])
-
-  if (process.env.NODE_ENV !== 'production') {
-    if (result.error) {
-      console.warn(result.error)
-    }
-  }
-
-  useEffect(() => {
-    const { street, city } = result.data?.postcodeNL ?? {}
-    if (street && city) {
-      setValue(fieldNames.street ?? '', street, { shouldValidate: true })
-      setValue(fieldNames.city ?? '', city, { shouldValidate: true })
-    } else {
-      resetField(fieldNames.street ?? '')
-      resetField(fieldNames.city ?? '')
-    }
-  }, [result.data?.postcodeNL, setValue, resetField, fieldNames.street, fieldNames.city])
-  return [result.data?.postcodeNL, result.loading] as const
-}