refactor(checkout): simplify billing/checkout logic

packages/theme/helpers/checkout/address.ts

@@ -1,3 +1,4 @@
+import { isEqual } from 'lodash-es';
 import type { CustomerAddress, CartAddressInterface } from '~/modules/GraphQL/types';
 
 export const formatAddressReturnToData = (address: CartAddressInterface) => ({
@@ -53,3 +54,23 @@ export const getInitialCheckoutAddressForm = () : CheckoutAddressForm => ({
   postcode: '',
   telephone: '',
 });
+
+/**
+ * Try to find an address from the user's saved addresses that exactly matches the address that is bound to a cart.
+ *
+ * `useShipping().save()``sends an addressId to Magento to set the shipping address on the cart,
+ * but when you download the cart after that - the cart's endpoint response doesn't contain that addressId, just the address fields (street etc.)
+ * So the only choice left is to try to compare the fields of the addresses.
+ *
+ * This function exists because if a user returns to a cart whose shipping address was set before, we want the user address to be highlighted in the SfAddressPicker component.
+ *
+ * @param customerAddresses The addresses saved in a user's account
+ * @param cartAddress The address that is bound to the cart, @see Cart["billing_address"] Cart["shipping_addresses"]
+ *
+ */
+export const findUserAddressIdenticalToSavedCartAddress = (
+  customerAddresses: CustomerAddress[] | null,
+  cartAddress: CartAddressInterface,
+) : CustomerAddress => customerAddresses?.find(
+  (userAddress) => isEqual(addressFromApiToForm(userAddress), addressFromApiToForm(cartAddress)),
+) ?? null;

packages/theme/modules/checkout/components/UserBillingAddresses.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <SfAddressPicker
-      :selected="`${selectedAddress}`"
+      :selected="`${currentAddressId}`"
       class="addresses"
-      @change="setCurrentAddress($event)"
+      @change="emitSetCurrentAddress($event)"
     >
       <SfAddress
         v-for="billingAddress in addressesWithCountryName"
@@ -46,8 +46,8 @@ export default defineComponent({
   },
   props: {
     currentAddressId: {
-      type: [String, Number],
-      required: true,
+      type: Number,
+      default: null,
     },
     value: {
       type: Boolean,
@@ -65,21 +65,12 @@ export default defineComponent({
   },
   emits: ['setCurrentAddress'],
   setup(props, { emit }) {
-    const setCurrentAddress = (addressId: string) => {
-      const selectedAddress = props.billingAddresses.find((address) => address.id === Number(addressId));
-      if (!selectedAddress) {
-        return;
+    const emitSetCurrentAddress = (addressId: number) => {
+      const address = props.billingAddresses.find(({ id }) => id === Number(addressId));
+      if (address) {
+        emit('setCurrentAddress', address);
       }
-
-      emit('setCurrentAddress', selectedAddress);
     };
-
-    const selectedAddress = computed(() => (
-      props.currentAddressId
-        ? props.currentAddressId
-        : props.billingAddresses.find((address) => address.default_billing)?.id ?? ''
-    ));
-
     const addressesWithCountryName = computed(() => props.billingAddresses.map((address) => ({
       ...address,
       countryName: props.countries
@@ -89,8 +80,7 @@ export default defineComponent({
     })));
 
     return {
-      selectedAddress,
-      setCurrentAddress,
+      emitSetCurrentAddress,
       addressesWithCountryName,
       userBillingGetters,
     };

packages/theme/modules/checkout/components/UserShippingAddresses.vue

@@ -3,7 +3,7 @@
     <SfAddressPicker
       :selected="`${currentAddressId}`"
       class="addresses"
-      @change="setCurrentAddress($event)"
+      @change="emitSetCurrentAddress($event)"
     >
       <SfAddress
         v-for="shippingAddress in addressesWithCountryName"
@@ -49,8 +49,8 @@ export default defineComponent({
   },
   props: {
     currentAddressId: {
-      type: [String, Number],
-      required: true,
+      type: Number,
+      default: null,
     },
     value: {
       type: Boolean,
@@ -68,15 +68,12 @@ export default defineComponent({
   },
   emits: ['setCurrentAddress'],
   setup(props, { emit }) {
-    const setCurrentAddress = (addressId: string | number) => {
-      const selectedAddress = props.shippingAddresses.find((address) => address.id === Number(addressId));
-      if (!selectedAddress) {
-        return;
+    const emitSetCurrentAddress = (addressId: number) => {
+      const address = props.shippingAddresses.find(({ id }) => id === Number(addressId));
+      if (address) {
+        emit('setCurrentAddress', address);
       }
-
-      emit('setCurrentAddress', selectedAddress);
     };
-
     const addressesWithCountryName = computed(() => props.shippingAddresses.map((address) => ({
       ...address,
       countryName: props.countries
@@ -86,7 +83,7 @@ export default defineComponent({
     })));
 
     return {
-      setCurrentAddress,
+      emitSetCurrentAddress,
       addressesWithCountryName,
       userShippingGetters,
     };