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

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # 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

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,27 +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 {
-  ActionCardItem,
-  ActionCardListForm,
-} from '@graphcommerce/next-ui/ActionCard/ActionCardListForm'
+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, { useMemo } from 'react'
+import React, { useEffect } from 'react'
 import { isSameAddress } from '../../utils/isSameAddress'
 import { GetAddressesDocument } from '../ShippingAddressForm/GetAddresses.gql'
+import { CustomerAddressActionCard } from './CustomerAddressActionCard'
 import { SetCustomerShippingAddressOnCartDocument } from './SetCustomerShippingAddressOnCart.gql'
 import { SetCustomerShippingBillingAddressOnCartDocument } from './SetCustomerShippingBillingAddressOnCart.gql'
 
@@ -31,8 +26,6 @@ export function CustomerAddressForm(props: CustomerAddressListProps) {
   const customerAddresses = useQuery(CustomerDocument)
   const addresses = customerAddresses.data?.customer?.addresses
   const { step, children } = props
-  const { push } = useRouter()
-
   const { data: cartQuery } = useCartQuery(GetAddressesDocument)
 
   const shippingAddress = cartQuery?.cart?.shipping_addresses?.[0]
@@ -61,61 +54,56 @@ export function CustomerAddressForm(props: CustomerAddressListProps) {
   //   Mutation = SetCustomerBillingAddressOnCartDocument
   // }
 
-  const form = useFormGqlMutationCart(Mutation, { mode: 'onChange' })
-  const { handleSubmit, error, control, watch } = form
+  const form = useFormGqlMutationCart(Mutation, {
+    defaultValues: {
+      customerAddressId: found?.id ?? undefined,
+    },
+    onBeforeSubmit: (vars) => {
+      if (vars.customerAddressId === -1) return false
+      return vars
+    },
+  })
+
+  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>
-          <ActionCardListForm
-            control={control}
-            name='customerAddressId'
-            items={[
-              ...(addresses ?? []).map((address) => ({
-                value: Number(address?.id),
-                title: `${address?.firstname} ${address?.lastname}`,
-                image: <IconSvg src={iconHome} size='large' />,
-                details: (
-                  <Box>
-                    {address?.street?.join(' ')}, {address?.postcode}, {address?.city},{' '}
-                    {address?.country_code}
-                  </Box>
-                ),
-                secondaryAction: (
-                  <Button
-                    disableRipple
-                    color='secondary'
-                    variant='text'
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                      push(`/checkout/customer/addresses/edit?addressId=${address?.id}`)
-                    }}
-                  >
-                    <Trans id='Edit address' />
-                  </Button>
-                ),
-              })),
-              {
-                value: '-1',
-                title: <Trans id='New address' />,
-                details: <Trans id='Add new address' />,
-                image: <IconSvg src={iconHome} size='large' />,
-              },
-            ]}
-          />
-        </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.22",
+  "version": "3.0.23",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -20,10 +20,10 @@
   "dependencies": {
     "@graphcommerce/graphql": "3.1.3",
     "@graphcommerce/image": "3.1.6",
-    "@graphcommerce/magento-cart": "4.3.2",
-    "@graphcommerce/magento-customer": "4.4.0",
-    "@graphcommerce/magento-store": "4.2.6",
-    "@graphcommerce/next-ui": "4.8.2",
+    "@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": {