From 764c6ef69b1239f7f5ee4ae22b1776c60015f8b4 Mon Sep 17 00:00:00 2001 From: Jesse van der Poel Date: Mon, 20 Nov 2023 12:26:52 +0100 Subject: [PATCH 1/3] removed ignorecache --- examples/magento-graphcms/pages/checkout/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/magento-graphcms/pages/checkout/index.tsx b/examples/magento-graphcms/pages/checkout/index.tsx index 7aeae371ae..a8ffb0e45a 100644 --- a/examples/magento-graphcms/pages/checkout/index.tsx +++ b/examples/magento-graphcms/pages/checkout/index.tsx @@ -97,7 +97,7 @@ function ShippingPage() { <> {(customerAddresses.data?.customer?.addresses?.length ?? 0) >= 1 ? ( ({ mt: theme.spacings.lg })}> - + ) : ( <> From 41a3db22f9e4aa50c496b5ad959917cc3bbd2315 Mon Sep 17 00:00:00 2001 From: Jesse van der Poel Date: Mon, 20 Nov 2023 15:41:27 +0100 Subject: [PATCH 2/3] If customer and cart address are the same. Do not show address in form --- .../magento-graphcms/pages/checkout/index.tsx | 2 +- .../CustomerAddressForm.tsx | 19 +++-------- .../ShippingAddressForm.tsx | 11 ++++-- .../findCustomerAddressFromCartAddress.ts | 34 +++++++++++++++++++ 4 files changed, 49 insertions(+), 17 deletions(-) create mode 100644 packages/magento-cart-shipping-address/utils/findCustomerAddressFromCartAddress.ts diff --git a/examples/magento-graphcms/pages/checkout/index.tsx b/examples/magento-graphcms/pages/checkout/index.tsx index a8ffb0e45a..7aeae371ae 100644 --- a/examples/magento-graphcms/pages/checkout/index.tsx +++ b/examples/magento-graphcms/pages/checkout/index.tsx @@ -97,7 +97,7 @@ function ShippingPage() { <> {(customerAddresses.data?.customer?.addresses?.length ?? 0) >= 1 ? ( ({ mt: theme.spacings.lg })}> - + ) : ( <> diff --git a/packages/magento-cart-shipping-address/components/CustomerAddressForm/CustomerAddressForm.tsx b/packages/magento-cart-shipping-address/components/CustomerAddressForm/CustomerAddressForm.tsx index 28b6e8339f..9ed7ea30e8 100644 --- a/packages/magento-cart-shipping-address/components/CustomerAddressForm/CustomerAddressForm.tsx +++ b/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 & { 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) diff --git a/packages/magento-cart-shipping-address/components/ShippingAddressForm/ShippingAddressForm.tsx b/packages/magento-cart-shipping-address/components/ShippingAddressForm/ShippingAddressForm.tsx index 76a3ecf15a..ce37d4d508 100644 --- a/packages/magento-cart-shipping-address/components/ShippingAddressForm/ShippingAddressForm.tsx +++ b/packages/magento-cart-shipping-address/components/ShippingAddressForm/ShippingAddressForm.tsx @@ -25,6 +25,10 @@ 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' @@ -32,12 +36,15 @@ import { SetShippingAddressDocument } from './SetShippingAddress.gql' import { SetShippingBillingAddressDocument } from './SetShippingBillingAddress.gql' export type ShippingAddressFormProps = Pick & { + /** + * @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 } export const ShippingAddressForm = React.memo((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((props) } const form = useFormGqlMutationCart(Mutation, { - defaultValues: ignoreCache + defaultValues: isCartAddressACustomerAddress(customerQuery?.customer?.addresses, currentAddress) ? { saveInAddressBook: true } : { // todo(paales): change to something more sustainable diff --git a/packages/magento-cart-shipping-address/utils/findCustomerAddressFromCartAddress.ts b/packages/magento-cart-shipping-address/utils/findCustomerAddressFromCartAddress.ts new file mode 100644 index 0000000000..29a4658dd4 --- /dev/null +++ b/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( + 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( + customerAddresses: (CustomerAddress | null | undefined)[] | null | undefined, + cartAddress: CartAddressFragment | null | undefined, +): boolean { + return !!findCustomerAddressFromCartAddress(customerAddresses, cartAddress) +} From 0cdaad28fb9a20fb5b0b1d339f197b938aa3595a Mon Sep 17 00:00:00 2001 From: Jesse van der Poel Date: Mon, 20 Nov 2023 15:44:15 +0100 Subject: [PATCH 3/3] Added changeset --- .changeset/shaggy-singers-flash.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/shaggy-singers-flash.md diff --git a/.changeset/shaggy-singers-flash.md b/.changeset/shaggy-singers-flash.md new file mode 100644 index 0000000000..2abe2b9c90 --- /dev/null +++ b/.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.