@graphcommerce/magento-cart-shipping-address 3.0.20 → 3.0.23

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Change Log
 
+## 3.0.23
+
+### Patch Changes
+
+- Updated dependencies [[`238aa4d34`](https://github.com/graphcommerce-org/graphcommerce/commit/238aa4d3478773b8cb0973f4112c9829e59e16d6), [`afc67103d`](https://github.com/graphcommerce-org/graphcommerce/commit/afc67103d0e00583e274465036fd287537f95e79)]:
+  - @graphcommerce/magento-customer@4.4.1
+  - @graphcommerce/next-ui@4.8.3
+  - @graphcommerce/magento-cart@4.3.3
+  - @graphcommerce/magento-store@4.2.7
+
+## 3.0.22
+
+### Patch Changes
+
+- Updated dependencies [[`d6262de71`](https://github.com/graphcommerce-org/graphcommerce/commit/d6262de71d2254a2b0b492e1a60f9e141767470e), [`c8c246b8a`](https://github.com/graphcommerce-org/graphcommerce/commit/c8c246b8aaab0621b68a2fca2a1c529a56fad962), [`e3005fe63`](https://github.com/graphcommerce-org/graphcommerce/commit/e3005fe6306093d47b08c6756c21c8175649e30b)]:
+  - @graphcommerce/magento-customer@4.4.0
+  - @graphcommerce/magento-cart@4.3.2
+  - @graphcommerce/next-ui@4.8.2
+  - @graphcommerce/magento-store@4.2.6
+
+## 3.0.21
+
+### Patch Changes
+
+- Updated dependencies [[`a9df81310`](https://github.com/graphcommerce-org/graphcommerce/commit/a9df81310c051876dd82fb2819105dece47cc213), [`f167f9963`](https://github.com/graphcommerce-org/graphcommerce/commit/f167f99630966a7de43717937d43669e66132494)]:
+  - @graphcommerce/next-ui@4.8.1
+  - @graphcommerce/magento-cart@4.3.1
+  - @graphcommerce/magento-customer@4.3.2
+  - @graphcommerce/magento-store@4.2.5
+  - @graphcommerce/image@3.1.6
+
 ## 3.0.20
 
 ### Patch Changes

package/components/CustomerAddressForm/CustomerAddressActionCard.tsx

@@ -0,0 +1,96 @@
+import { useQuery } from '@graphcommerce/graphql'
+import { CustomerAddressFragment } from '@graphcommerce/magento-customer/components/CreateCustomerAddressForm/CustomerAddress.gql'
+import { CountryRegionsDocument, useFindCountry } from '@graphcommerce/magento-store'
+import { ActionCard, IconSvg, iconHome } from '@graphcommerce/next-ui'
+import { ActionCardItemRenderer } from '@graphcommerce/next-ui/ActionCard/ActionCardListForm'
+import { Trans } from '@lingui/react'
+import { Box, Button } from '@mui/material'
+import { useRouter } from 'next/router'
+
+type CustomerAddressActionCardProps = ActionCardItemRenderer<
+  CustomerAddressFragment | null | undefined
+>
+
+export function CustomerAddressActionCard(props: CustomerAddressActionCardProps) {
+  const {
+    onReset,
+    company,
+    firstname,
+    lastname,
+    street,
+    postcode,
+    city,
+    country_code,
+    region,
+    id,
+    ...cardProps
+  } = props
+  const { push } = useRouter()
+  const country = useFindCountry(country_code)
+
+  if (cardProps.value === -1) {
+    return (
+      <ActionCard
+        {...cardProps}
+        image={<IconSvg src={iconHome} size='large' />}
+        title={<Trans id='New address' />}
+        details={<Trans id='Add new address' />}
+        action={
+          <Button disableRipple variant='text' color='secondary'>
+            <Trans id='Select' />
+          </Button>
+        }
+        reset={
+          <Button disableRipple variant='text' color='secondary' onClick={onReset}>
+            <Trans id='Change' />
+          </Button>
+        }
+      />
+    )
+  }
+
+  return (
+    <ActionCard
+      {...cardProps}
+      image={<IconSvg src={iconHome} size='large' />}
+      title={
+        <>
+          {street?.join(' ')}, {city}
+        </>
+      }
+      details={
+        <>
+          {company} {firstname} {lastname} ({postcode}, {region?.region_code}{' '}
+          {country?.full_name_locale})
+        </>
+      }
+      action={
+        <Button disableRipple variant='text' color='secondary'>
+          <Trans id='Select' />
+        </Button>
+      }
+      reset={
+        <Button disableRipple variant='text' color='secondary' onClick={onReset}>
+          <Trans id='Change' />
+        </Button>
+      }
+      secondaryAction={
+        <Button
+          color='secondary'
+          variant='text'
+          onMouseDown={(e) => {
+            e.stopPropagation()
+          }}
+          onClick={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            push(`/checkout/customer/addresses/edit?addressId=${id}`)
+          }}
+        >
+          <Trans id='Edit address' />
+        </Button>
+      }
+    />
+  )
+}

package/components/CustomerAddressForm/CustomerAddressForm.tsx

@@ -1,24 +1,22 @@
-import { useQuery } from '@graphcommerce/graphql'
+import { fallbackHttpConfig, useQuery } from '@graphcommerce/graphql'
 import {
   ApolloCartErrorAlert,
   useCartQuery,
   useFormGqlMutationCart,
 } from '@graphcommerce/magento-cart'
 import { CustomerDocument } from '@graphcommerce/magento-customer'
-import { iconHome, IconSvg, ActionCardList, ActionCard, Form, Button } from '@graphcommerce/next-ui'
+import { Form } from '@graphcommerce/next-ui'
+import { ActionCardListForm } from '@graphcommerce/next-ui/ActionCard/ActionCardListForm'
 import {
   useFormPersist,
   useFormCompose,
   UseFormComposeOptions,
-  Controller,
+  useFormAutoSubmit,
 } from '@graphcommerce/react-hook-form'
-import { Trans } from '@lingui/react'
-import { Box, FormControl, NoSsr } from '@mui/material'
-import { useRouter } from 'next/router'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { isSameAddress } from '../../utils/isSameAddress'
 import { GetAddressesDocument } from '../ShippingAddressForm/GetAddresses.gql'
-import { SetCustomerBillingAddressOnCartDocument } from './SetCustomerBillingAddressOnCart.gql'
+import { CustomerAddressActionCard } from './CustomerAddressActionCard'
 import { SetCustomerShippingAddressOnCartDocument } from './SetCustomerShippingAddressOnCart.gql'
 import { SetCustomerShippingBillingAddressOnCartDocument } from './SetCustomerShippingBillingAddressOnCart.gql'
 
@@ -28,8 +26,6 @@ export function CustomerAddressForm(props: CustomerAddressListProps) {
   const customerAddresses = useQuery(CustomerDocument)
   const addresses = customerAddresses.data?.customer?.addresses
   const { step, children } = props
-  const router = useRouter()
-
   const { data: cartQuery } = useCartQuery(GetAddressesDocument)
 
   const shippingAddress = cartQuery?.cart?.shipping_addresses?.[0]
@@ -59,132 +55,55 @@ export function CustomerAddressForm(props: CustomerAddressListProps) {
   // }
 
   const form = useFormGqlMutationCart(Mutation, {
-    // defaultValues: { customerAddressId: defaultCustomerAddressId },
-    mode: 'onChange',
+    defaultValues: {
+      customerAddressId: found?.id ?? undefined,
+    },
+    onBeforeSubmit: (vars) => {
+      if (vars.customerAddressId === -1) return false
+      return vars
+    },
   })
-  const { handleSubmit, error, control, watch } = form
+
+  const { handleSubmit, error, control, watch, setValue } = form
 
   // If customer selects 'new address' then we do not have to submit anything so we provide an empty submit function.
   const customerAddressId = watch('customerAddressId')
 
-  const submit = customerAddressId === -1 ? async () => {} : handleSubmit(() => {})
+  const submit = handleSubmit(() => {})
 
+  // We want to persist the form because we can't send the 'new address' state to the server, but we do want to keep this selection.
   useFormPersist({ form, name: 'CustomerAddressForm' })
   useFormCompose({ form, step, submit, key: 'CustomerAddressForm' })
 
-  if (customerAddresses.loading || !addresses || addresses.length === 0) return null
+  // We want to autosubmit the CustomerAddressFrom because the shipping methods depend on it.
+  useFormAutoSubmit({ form, submit })
+
+  // When there is no address set on the cart set before
+  const defaultAddr =
+    (!shippingAddress && addresses?.find((a) => a?.default_shipping)?.id) || undefined
+
+  useEffect(() => {
+    if (defaultAddr) setValue('customerAddressId', defaultAddr)
+  }, [defaultAddr, setValue])
+
+  if (customerAddresses.loading || !addresses || addresses.length === 0) return <>{children}</>
 
   return (
     <>
-      {' '}
       <Form onSubmit={submit} noValidate>
-        <FormControl>
-          <Controller
-            control={control}
-            defaultValue={found && found.id ? found.id : 0}
-            name='customerAddressId'
-            rules={{ required: true }}
-            render={({ field: { onChange, value }, fieldState, formState }) => (
-              <NoSsr>
-                <ActionCardList
-                  required
-                  value={String(value)}
-                  onChange={(event, incomming) => {
-                    onChange(Number(incomming))
-                  }}
-                  error={formState.isSubmitted && !!fieldState.error}
-                >
-                  {addresses.map((address) => (
-                    <ActionCard
-                      value={String(address?.id)}
-                      key={address?.id}
-                      action={
-                        <Button disableRipple variant='text' color='secondary'>
-                          <Trans id='Select' />
-                        </Button>
-                      }
-                      image={<IconSvg src={iconHome} size='large' />}
-                      title={`${address?.firstname} ${address?.lastname}`}
-                      details={
-                        <Box>
-                          {address?.street?.join(' ')}, {address?.postcode}, {address?.city},{' '}
-                          {address?.country_code}
-                        </Box>
-                      }
-                      onClick={onChange}
-                      secondaryAction={
-                        <Button
-                          disableRipple
-                          color='secondary'
-                          variant='text'
-                          onClick={(e) => {
-                            e.stopPropagation()
-
-                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                            router.push(
-                              `/checkout/customer/addresses/edit?addressId=${address?.id}`,
-                            )
-                          }}
-                        >
-                          <Trans id='Edit address' />
-                        </Button>
-                      }
-                      selected={value === address?.id}
-                      hidden={!!value && value !== address?.id}
-                      reset={
-                        <Button
-                          disableRipple
-                          variant='text'
-                          color='secondary'
-                          onClick={(e) => {
-                            e.preventDefault()
-                            onChange(null)
-                          }}
-                        >
-                          <Trans id='Change' />
-                        </Button>
-                      }
-                    />
-                  ))}
-                  <ActionCard
-                    value='-1'
-                    key='new-address'
-                    title={<Trans id='New address' />}
-                    selected={value === -1}
-                    hidden={!!value && value !== -1}
-                    details={<Trans id='Add new address' />}
-                    image={<IconSvg src={iconHome} size='large' />}
-                    action={
-                      <Button
-                        disableRipple
-                        variant='text'
-                        color='secondary'
-                        onClick={(e) => {
-                          e.preventDefault()
-                        }}
-                      >
-                        <Trans id='Select' />
-                      </Button>
-                    }
-                    reset={
-                      <Button
-                        disableRipple
-                        variant='text'
-                        color='secondary'
-                        onClick={(e) => {
-                          e.preventDefault()
-                          onChange(null)
-                        }}
-                      >
-                        <Trans id='Change' />
-                      </Button>
-                    }
-                  />
-                </ActionCardList>
-              </NoSsr>
-            )}
-          />
-        </FormControl>
+        <ActionCardListForm
+          control={control}
+          name='customerAddressId'
+          errorMessage='Please select a shipping address'
+          items={[
+            ...(addresses ?? []).filter(Boolean).map((address) => ({
+              ...address,
+              value: Number(address?.id),
+            })),
+            { value: -1 },
+          ]}
+          render={CustomerAddressActionCard}
+        />
         <ApolloCartErrorAlert error={error} />
       </Form>
       {customerAddressId === -1 && children}

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.0.20",
+  "version": "3.0.23",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -19,11 +19,11 @@
   },
   "dependencies": {
     "@graphcommerce/graphql": "3.1.3",
-    "@graphcommerce/image": "3.1.5",
-    "@graphcommerce/magento-cart": "4.3.0",
-    "@graphcommerce/magento-customer": "4.3.1",
-    "@graphcommerce/magento-store": "4.2.4",
-    "@graphcommerce/next-ui": "4.8.0",
+    "@graphcommerce/image": "3.1.6",
+    "@graphcommerce/magento-cart": "4.3.3",
+    "@graphcommerce/magento-customer": "4.4.1",
+    "@graphcommerce/magento-store": "4.2.7",
+    "@graphcommerce/next-ui": "4.8.3",
     "@graphcommerce/react-hook-form": "3.1.3"
   },
   "peerDependencies": {