Merge pull request #2118 from graphcommerce-org/bug/GCOM-1280-persist…

…-address

removed ignorecache

.changeset/shaggy-singers-flash.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-cart-shipping-address': patch
+---
+
+Fixed bug where if the customer created a new address during checkout it would not be persisted when navigating back from the payment step.

packages/magento-cart-shipping-address/components/CustomerAddressForm/CustomerAddressForm.tsx

@@ -12,14 +12,15 @@ import {
 } from '@graphcommerce/magento-cart'
 import { CustomerDocument } from '@graphcommerce/magento-customer'
 import { ActionCardListForm } from '@graphcommerce/next-ui'
+import { i18n } from '@lingui/core'
 import { Box, SxProps, Theme } from '@mui/material'
 import React from 'react'
+import { findCustomerAddressFromCartAddress } from '../../utils/findCustomerAddressFromCartAddress'
 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'
-import { i18n } from '@lingui/core'
 
 type CustomerAddressListProps = Pick<UseFormComposeOptions, 'step'> & {
   children?: React.ReactNode
@@ -41,19 +42,9 @@ export function CustomerAddressForm(props: CustomerAddressListProps) {
   const shippingAddress = cartQuery?.cart?.shipping_addresses?.[0]
   const billingAddress = defaultBillingAddress || cartQuery?.cart?.billing_address
 
-  const found = customerAddresses.data?.customer?.addresses?.find(
-    (customerAddr) =>
-      [
-        customerAddr?.firstname === shippingAddress?.firstname,
-        customerAddr?.lastname === shippingAddress?.lastname,
-        customerAddr?.city === shippingAddress?.city,
-        customerAddr?.postcode === shippingAddress?.postcode,
-        customerAddr?.street?.[0] === shippingAddress?.street[0],
-        customerAddr?.street?.[1] === shippingAddress?.street[1],
-        customerAddr?.street?.[2] === shippingAddress?.street[2],
-        customerAddr?.country_code === shippingAddress?.country.code,
-        customerAddr?.region?.region_code === shippingAddress?.region?.code,
-      ].filter((v) => !v).length === 0,
+  const found = findCustomerAddressFromCartAddress(
+    customerAddresses.data?.customer?.addresses,
+    shippingAddress,
   )
 
   const Mutation = isSameAddress(shippingAddress, billingAddress)

packages/magento-cart-shipping-address/components/ShippingAddressForm/ShippingAddressForm.tsx

@@ -25,19 +25,26 @@ import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
 import { SxProps, Theme } from '@mui/material'
 import React from 'react'
+import {
+  findCustomerAddressFromCartAddress,
+  isCartAddressACustomerAddress,
+} from '../../utils/findCustomerAddressFromCartAddress'
 import { isSameAddress } from '../../utils/isSameAddress'
 import { GetAddressesDocument } from './GetAddresses.gql'
 import { SetBillingAddressDocument } from './SetBillingAddress.gql'
 import { SetShippingAddressDocument } from './SetShippingAddress.gql'
 import { SetShippingBillingAddressDocument } from './SetShippingBillingAddress.gql'
 
 export type ShippingAddressFormProps = Pick<UseFormComposeOptions, 'step'> & {
+  /**
+   * @deprecated This was used to make sure the form wasn't filled with a customer's address. However this also broke the checkout when navigating back from the checkout. This is now automatically handled.
+   */
   ignoreCache?: boolean
   sx?: SxProps<Theme>
 }
 
 export const ShippingAddressForm = React.memo<ShippingAddressFormProps>((props) => {
-  const { step, sx, ignoreCache = false } = props
+  const { step, sx } = props
   const { data: cartQuery } = useCartQuery(GetAddressesDocument)
   const { data: config } = useQuery(StoreConfigDocument)
   const countryQuery = useQuery(CountryRegionsDocument, { fetchPolicy: 'cache-and-network' })
@@ -78,7 +85,7 @@ export const ShippingAddressForm = React.memo<ShippingAddressFormProps>((props)
   }
 
   const form = useFormGqlMutationCart(Mutation, {
-    defaultValues: ignoreCache
+    defaultValues: isCartAddressACustomerAddress(customerQuery?.customer?.addresses, currentAddress)
       ? { saveInAddressBook: true }
       : {
           // todo(paales): change to something more sustainable

packages/magento-cart-shipping-address/utils/findCustomerAddressFromCartAddress.ts

@@ -0,0 +1,34 @@
+import { CartAddressFragment } from '@graphcommerce/magento-cart/components/CartAddress/CartAddress.gql'
+import { CustomerAddressFragment } from '@graphcommerce/magento-customer/components/CreateCustomerAddressForm/CustomerAddress.gql'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+
+export function findCustomerAddressFromCartAddress<CustomerAddress extends CustomerAddressFragment>(
+  customerAddresses: (CustomerAddress | null | undefined)[] | null | undefined,
+  cartAddress: CartAddressFragment | null | undefined,
+): CustomerAddress | undefined {
+  if (!customerAddresses || !cartAddress) return undefined
+
+  return filterNonNullableKeys(customerAddresses, [])?.find(
+    (customerAddr) =>
+      [
+        customerAddr.firstname === cartAddress.firstname,
+        customerAddr.lastname === cartAddress.lastname,
+        customerAddr.city === cartAddress.city,
+        customerAddr.postcode === cartAddress.postcode,
+        customerAddr.company === cartAddress.company,
+        customerAddr.street?.[0] === cartAddress.street[0],
+        customerAddr.street?.[1] === cartAddress.street[1],
+        customerAddr.street?.[2] === cartAddress.street[2],
+        customerAddr.country_code === cartAddress.country.code,
+        customerAddr.region?.region_code === cartAddress.region?.code,
+        customerAddr.telephone === cartAddress.telephone,
+      ].filter((v) => !v).length === 0,
+  )
+}
+
+export function isCartAddressACustomerAddress<CustomerAddress extends CustomerAddressFragment>(
+  customerAddresses: (CustomerAddress | null | undefined)[] | null | undefined,
+  cartAddress: CartAddressFragment | null | undefined,
+): boolean {
+  return !!findCustomerAddressFromCartAddress(customerAddresses, cartAddress)
+}