refactor(perf): Update cart and order only if the address key has changed

Author: sveneberth

src/composables/address.js

@@ -52,7 +52,11 @@ export const useAddress = defineStore('useAddressStore', () => {
       let data = await resp.json();
 
       if (['addSuccess', 'editSuccess'].includes(data['action'])) {
-        state[`${type}Data`] = data['values'];
+        if (billingIsShipping) {
+          state.billingData = state.shippingData = data['values'];
+        } else {
+          state[`${type}Data`] = data['values'];
+        }
         await updateAddresses(type, billingIsShipping);
       }
       state[`${type}IsUpdating`] = undefined;
@@ -86,14 +90,22 @@ export const useAddress = defineStore('useAddressStore', () => {
   async function updateAddresses(type, billingIsShipping = false) {
     let key = state[`${type}Data`]['key'];
     if (type === 'shipping') {
-      const {updateCart} = useCart();
-      await updateCart({shipping_address_key: key});
+      const {updateCart, fetchCart, shippingAddressKey} = useCart();
+      if (key === shippingAddressKey.value) {
+        // The address skel is the same, we just need to reload the relation
+        fetchCart();
+      } else {
+        await updateCart({shipping_address_key: key});
+      }
     } else if (type === 'billing') {
-      const {addOrUpdateOrder} = useOrder();
-      await addOrUpdateOrder({billing_address_key: key});
+      const {addOrUpdateOrder, fetchOrder, billingAddressKey} = useOrder();
+      if (key === billingAddressKey.value) { // The address skel is the same, we just need to reload the relation
+        fetchOrder(shopStore.state.orderKey);
+      } else {
+        await addOrUpdateOrder({billing_address_key: key});
+      }
       if (billingIsShipping) {
-        const {updateCart} = useCart();
-        await updateCart({shipping_address_key: key});
+        await updateAddresses('shipping', false);
       }
     }
   }

src/composables/cart.js

@@ -1,4 +1,4 @@
-import {reactive} from 'vue'
+import {computed, reactive} from 'vue';
 import {Request} from '@viur/vue-utils'
 import { removeUndefinedValues} from '../utils'
 
@@ -93,7 +93,7 @@ export function useCart() {
             cart_type:cart_type?cart_type:shopStore.state.cartRoot['cart_type'],
             name:name?name:shopStore.state.cartRoot['name'],
             customer_comment:customer_comment?customer_comment:shopStore.state.cartRoot['customer_comment'],
-            shipping_address_key:shipping_address_key?shipping_address_key:shopStore.state.cartRoot?.['shipping_address']?.['dest']?.['key'],
+            shipping_address_key:shipping_address_key?shipping_address_key:shippingAddressKey.value,
             shipping_key:shipping_key?shipping_key:shopStore.state.cartRoot?.['shipping']?.['dest']?.['key'],
             discount_key:discount_key?discount_key:shopStore.state.cartRoot?.['discount']?.['dest']?.['key'],
             cart_key:cart_key ? cart_key : shopStore.state.cartRoot['key'],
@@ -174,7 +174,7 @@ export function useCart() {
     });
     }
 
-
+    const shippingAddressKey = computed(() => shopStore.state.cartRoot?.['shipping_address']?.['dest']?.['key']);
 
     return {
         state,
@@ -187,6 +187,7 @@ export function useCart() {
         createCart,
         getValue,
         addDiscount,
-        removeDiscount
+        removeDiscount,
+        shippingAddressKey,
     }
 }

src/composables/order.js

@@ -1,8 +1,8 @@
-import {reactive} from 'vue'
-import {Request} from '@viur/vue-utils'
-import { useViurShopStore } from '../shop'
-import { removeUndefinedValues} from '../utils'
-import { useUrlSearchParams } from '@vueuse/core'
+import {Request} from '@viur/vue-utils';
+import {useUrlSearchParams} from '@vueuse/core';
+import {computed, reactive} from 'vue';
+import {useViurShopStore} from '../shop';
+import {removeUndefinedValues} from '../utils';
 
 export function useOrder() {
     const state = reactive({
@@ -51,7 +51,7 @@ export function useOrder() {
       let url = shopStore.state.shopApiUrl+"/order_add"
       let data = {
           payment_provider:payment_provider?payment_provider:shopStore.state.order?.['payment_provider'],
-          billing_address_key:billing_address_key?billing_address_key:shopStore.state.order?.['billing_address_key']?.['dest']?.['key'],
+          billing_address_key:billing_address_key?billing_address_key:billingAddressKey.value,
           customer_key:customer_key?customer_key:shopStore.state.order?.['customer_key']?.['dest']?.['key'],
           state_ordered:state_ordered?state_ordered:shopStore.state.order?.['state_ordered'],
           state_paid:state_paid?state_paid:shopStore.state.order?.['state_paid'],
@@ -76,10 +76,12 @@ export function useOrder() {
       })
   }
 
+  const billingAddressKey = computed(() => shopStore.state.order?.['billing_address']?.['dest']?.['key']);
 
-    return {
-        state,
-        fetchOrder,
-        addOrUpdateOrder
-    }
+  return {
+    state,
+    fetchOrder,
+    addOrUpdateOrder,
+    billingAddressKey,
+  };
 }