[4.x] Listen to all changes on address data instead of only manual input

resources/js/components/GraphqlMutation.vue

@@ -77,6 +77,7 @@ export default {
         running: false,
         initialVariables: {},
         data: {},
+        prevData: {},
         mutate: () => null,
     }),
 
@@ -117,6 +118,23 @@ export default {
                 deepMerge(this.data, diff)
             }
         },
+
+        data: {
+            handler() {
+                let diff = objectDiff(this.prevData, this.data)
+
+                // Remove ignored variables
+                diff = Object.fromEntries(Object.entries(diff).filter(([key, _]) => !['uid'].includes(key)))
+
+                // Only send event when changes are detected
+                if (Object.keys(diff).length > 0) {
+                    this.changeFn(this)
+                }
+
+                deepMerge(this.prevData, JSON.parse(JSON.stringify(diff)))
+            },
+            deep: true,
+        },
     },
 
     mounted() {
@@ -130,6 +148,10 @@ export default {
     },
 
     methods: {
+        changeFn: useDebounceFn((self) => {
+            self.$emit('change', { target: self.$el, mutate: self.mutate, variables: self.variables })
+        }, 500),
+
         async mutateFn() {
             if (this.running) {
                 return

resources/js/stores/useCart.js

@@ -158,7 +158,7 @@ function addCustomerAddressId(address) {
         return address
     }
     const customerAddress = user.value?.addresses?.find((customerAddress) => areAddressesSame(customerAddress, address))
-    address.customer_address_id = address.customer_address_id || customerAddress?.id
+    address.customer_address_id = (address.customer_address_id || customerAddress?.id) ?? null
 
     return address
 }

resources/views/checkout/partials/address.blade.php

@@ -41,7 +41,7 @@
                                 <x-rapidez::label>@lang('Company')</x-rapidez::label>
                                 <x-rapidez::input
                                     name="{{ $type }}_company"
-                                    v-model="variables.company"
+                                    v-model.lazy="variables.company"
                                     :required="Rapidez::config('customer/address/company_show') == 'req'"
                                 />
                             </label>
@@ -53,7 +53,7 @@
                                 <x-rapidez::label>@lang('Tax ID')</x-rapidez::label>
                                 <x-rapidez::input
                                     name="{{ $type }}_vat_id"
-                                    v-model="variables.vat_id"
+                                    v-model.lazy="variables.vat_id"
                                     v-on:change="window.app.$emit('vat-change', $event)"
                                     :required="Rapidez::config('customer/address/taxvat_show') == 'req'"
                                 />
@@ -89,7 +89,7 @@
                 <x-rapidez::label>@lang('Firstname')</x-rapidez::label>
                 <x-rapidez::input
                     name="{{ $type }}_firstname"
-                    v-model="variables.firstname"
+                    v-model.lazy="variables.firstname"
                     required
                 />
             </label>
@@ -100,7 +100,7 @@
                     <x-rapidez::label>@lang('Middlename')</x-rapidez::label>
                     <x-rapidez::input
                         name="{{ $type }}_middlename"
-                        v-model="variables.middlename"
+                        v-model.lazy="variables.middlename"
                     />
                 </label>
             </div>
@@ -110,7 +110,7 @@
                 <x-rapidez::label>@lang('Lastname')</x-rapidez::label>
                 <x-rapidez::input
                     name="{{ $type }}_lastname"
-                    v-model="variables.lastname"
+                    v-model.lazy="variables.lastname"
                     required
                 />
             </label>
@@ -167,7 +167,7 @@ class="region exists"
                     <x-rapidez::label>@lang('Telephone')</x-rapidez::label>
                     <x-rapidez::input
                         name="{{ $type }}_telephone"
-                        v-model="variables.telephone"
+                        v-model.lazy="variables.telephone"
                         :required="Rapidez::config('customer/address/telephone_show') == 'req'"
                     />
                 </label>
@@ -178,7 +178,7 @@ class="region exists"
                 <x-rapidez::label>@lang('Postcode')</x-rapidez::label>
                 <x-rapidez::input
                     name="{{ $type }}_postcode"
-                    v-model="variables.postcode"
+                    v-model.lazy="variables.postcode"
                     v-on:change="$root.$nextTick(() => window.app.$emit('postcode-change', variables))"
                     required
                 />
@@ -190,7 +190,7 @@ class="region exists"
                     <x-rapidez::label>@lang('Housenumber')</x-rapidez::label>
                     <x-rapidez::input
                         name="{{ $type }}_housenumber"
-                        v-model="variables.street[1]"
+                        v-model.lazy="variables.street[1]"
                         v-on:change="$root.$nextTick(() => window.app.$emit('postcode-change', variables))"
                         required
                     />
@@ -203,7 +203,7 @@ class="region exists"
                     <x-rapidez::label>@lang('Addition')</x-rapidez::label>
                     <x-rapidez::input
                         name="{{ $type }}_addition"
-                        v-model="variables.street[2]"
+                        v-model.lazy="variables.street[2]"
                     />
                 </label>
             </div>
@@ -213,7 +213,7 @@ class="region exists"
                 <x-rapidez::label>@lang('Street')</x-rapidez::label>
                 <x-rapidez::input
                     name="{{ $type }}_street"
-                    v-model="variables.street[0]"
+                    v-model.lazy="variables.street[0]"
                     required
                 />
             </label>
@@ -223,7 +223,7 @@ class="region exists"
                 <x-rapidez::label>@lang('City')</x-rapidez::label>
                 <x-rapidez::input
                     name="{{ $type }}_city"
-                    v-model="variables.city"
+                    v-model.lazy="variables.city"
                     required
                 />
             </label>
@@ -234,7 +234,7 @@ class="region exists"
                     <x-rapidez::label>@lang('Fax')</x-rapidez::label>
                     <x-rapidez::input
                         name="{{ $type }}_fax"
-                        v-model="variables.fax"
+                        v-model.lazy="variables.fax"
                         :required="Rapidez::config('customer/address/fax_show') === 'req'"
                     />
                 </label>

resources/views/checkout/steps/billing-address.blade.php

@@ -14,22 +14,21 @@
     :error-callback="checkResponseForExpiredCart"
     group="billing"
     mutate-event="setBillingAddressOnCart"
+    v-on:change="function (e) {
+        e.target.closest('fieldset').querySelector(':invalid') === null
+        && (!e.variables.same_as_shipping || !!cart?.shipping_addresses?.[0]?.postcode)
+        && window.app.$emit('setBillingAddressOnCart')
+    }"
     v-slot="{ mutate, variables }"
 >
-    <div partial-submit="mutate">
-        <fieldset v-on:change="function (e) {
-            e.target.closest('fieldset').querySelector(':invalid') === null
-            && (!variables.same_as_shipping || !!cart?.shipping_addresses?.[0]?.postcode)
-            && window.app.$emit('setBillingAddressOnCart')
-        }">
-            <template v-if="!cart.is_virtual">
-                <x-rapidez::input.checkbox v-model="variables.same_as_shipping">
-                    @lang('My billing and shipping address are the same')
-                </x-rapidez::input.checkbox>
-            </template>
-            <template v-if="!variables.same_as_shipping">
-                @include('rapidez::checkout.partials.address', ['type' => 'billing'])
-            </template>
-        </fieldset>
-    </div>
+    <fieldset partial-submit="mutate">
+        <template v-if="!cart.is_virtual">
+            <x-rapidez::input.checkbox v-model="variables.same_as_shipping">
+                @lang('My billing and shipping address are the same')
+            </x-rapidez::input.checkbox>
+        </template>
+        <template v-if="!variables.same_as_shipping">
+            @include('rapidez::checkout.partials.address', ['type' => 'billing'])
+        </template>
+    </fieldset>
 </graphql-mutation>

resources/views/checkout/steps/shipping-address.blade.php

@@ -7,15 +7,20 @@
         country_code: cart.shipping_addresses[0]?.country.code || window.address_defaults.country_code,
         region_id: cart.shipping_addresses[0]?.region.region_id || window.address_defaults.region_id,
     }))"
-    group="shipping"
     :before-request="(query, variables, options) => [variables.customer_address_id ? config.queries.setExistingShippingAddressesOnCart : query, variables, options]"
     :callback="updateCart"
     :error-callback="checkResponseForExpiredCart"
+    group="shipping"
     mutate-event="setShippingAddressesOnCart"
+    v-on:change="function (e) {
+        e.target.closest('fieldset').querySelector(':invalid') === null
+        && e.mutate().then(() => (cart?.billing_address?.same_as_shipping ?? true)
+        && window.app.$emit('setBillingAddressOnCart'))
+    }"
     v-slot="{ mutate, variables }"
     v-if="!cart.is_virtual"
 >
-    <fieldset partial-submit="mutate" v-on:change="function (e) {e.target.closest('fieldset').querySelector(':invalid') === null && mutate().then(() => (cart?.billing_address?.same_as_shipping ?? true) && window.app.$emit('setBillingAddressOnCart'))}">
+    <fieldset partial-submit="mutate">
         @include('rapidez::checkout.partials.address', ['type' => 'shipping'])
     </fieldset>
 </graphql-mutation>