Utilise DOM events to fix broken partial-submit on prod

Author: indykoning

resources/js/callbacks.js

@@ -23,16 +23,27 @@ document.addEventListener('vue:loaded', function (event) {
     vue.config.globalProperties.submitPartials = async function (form, sequential = false) {
         let promises = []
         for (const element of form.querySelectorAll('[partial-submit]')) {
-            if (!element.__vnode.props.onPartialSubmit) {
-                continue
+            let resolveFn, rejectFn;
+            const createdPromise = new Promise((res, rej) => { resolveFn = res; rejectFn = rej; })
+                .then((result) => {
+                    if (result === false) {
+                        throw new Error('Result was false')
+                    }
+                }).catch((error) => {
+                    throw error
+                });
+
+            const ev = new CustomEvent('partial-submit', {
+                detail: { resolve: resolveFn, reject: rejectFn },
+                bubbles: false,
+                cancelable: true
+            });
+
+            const dispatched = element.dispatchEvent(ev);
+            if (!dispatched) {
+                resolveFn();
             }
 
-            const createdPromise = element.__vnode.props.onPartialSubmit().then((result) => {
-                if (result === false) {
-                    throw new Error()
-                }
-            })
-
             if (sequential) {
                 await createdPromise
             }

resources/js/components/Graphql.vue

@@ -103,9 +103,12 @@ export default {
                 if (this.cache) {
                     useLocalStorage(this.cachePrefix + this.cache, null, { serializer: StorageSerializers.object }).value = this.data
                 }
+
+                return this.data;
             } catch (error) {
                 console.error(error)
                 this.errorCallback(this.dataVariables, await error?.response?.json())
+                return false
             } finally {
                 this.running = false
             }

resources/js/components/GraphqlMutation.vue

@@ -185,7 +185,7 @@ export default {
                 })
 
                 if (response.errors) {
-                    return
+                    return false
                 }
 
                 if (this.callback) {
@@ -218,6 +218,8 @@ export default {
                     }
                     Turbo.visit(window.url(this.redirect))
                 }
+
+                return response;
             } catch (error) {
                 console.error(error)
                 this.error = error.message

resources/views/checkout/pages/credentials.blade.php

@@ -16,7 +16,7 @@
                                 .then((result) =>
                                     window.$emit('checkout-credentials-saved')
                                     && window.Turbo.visit(window.url('{{ route('checkout', ['step' => 'payment']) }}'))
-                                ).catch();
+                                ).catch(() => {});
                         }"
                         class="flex flex-col gap-5"
                     >

resources/views/checkout/pages/login.blade.php

@@ -13,7 +13,7 @@
                 window.app.config.globalProperties.submitPartials(e.target?.form ?? e.target)
                     .then((result) =>
                         window.Turbo.visit(window.url('{{ route('checkout', ['step' => 'credentials']) }}'))
-                    ).catch();
+                    ).catch(() => {});
             }"
             class="max-w-md mx-auto"
             v-cloak

resources/views/checkout/pages/onestep.blade.php

@@ -14,7 +14,7 @@
                             window.$emit('checkout-credentials-saved')
                             && window.$emit('checkout-payment-saved')
                             && window.$emit('placeOrder')
-                        ).catch();
+                        ).catch(() => {});
                 }">
                     <div class="lg:w-1/2 lg:pr-2.5 lg:col-span-2">
                         @include('rapidez::checkout.steps.login')

resources/views/checkout/pages/payment.blade.php

@@ -14,7 +14,7 @@
                             .then((result) =>
                                 window.$emit('checkout-payment-saved')
                                 && window.$emit('placeOrder')
-                            ).catch();
+                            ).catch(() => {});
                     }">
                     @include('rapidez::checkout.steps.payment-method')
                     <div class="mt-3">@include('rapidez::checkout.steps.agreements')</div>

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

@@ -16,7 +16,7 @@
     mutate-event="setBillingAddressOnCart"
     v-slot="{ mutate, variables }"
 >
-    <div partial-submit="mutate">
+    <div partial-submit v-on:partial-submit="(ev) => mutate().then(ev.detail.resolve).catch(ev.detail.reject)">
         <fieldset v-on:change="function (e) {
             e.target.closest('fieldset').querySelector(':invalid') === null
             && (!variables.same_as_shipping || !!cart?.shipping_addresses?.[0]?.postcode)

resources/views/checkout/steps/login.blade.php

@@ -3,7 +3,7 @@
     v-bind:allow-passwordless="Boolean({{ (int)(config('rapidez.frontend.allow_guest_on_existing_account')) }})"
     v-bind:allow-guest="Boolean({{ (int)(Rapidez::config('checkout/options/guest_checkout')) }})"
 >
-    <fieldset partial-submit v-on:partial-submit="async () => await checkoutLogin.go()" class="flex flex-col gap-3" v-cloak>
+    <fieldset partial-submit v-on:partial-submit="(ev) => checkoutLogin.go().then(ev.detail.resolve).catch(ev.detail.reject)" class="flex flex-col gap-3" v-cloak>
         <label>
             <x-rapidez::label>@lang('Email')</x-rapidez::label>
             <x-rapidez::input

resources/views/checkout/steps/payment-method.blade.php

@@ -11,7 +11,7 @@
     mutate-event="setPaymentMethodOnCart"
     v-slot="{ mutate, variables }"
 >
-    <div class="flex flex-col gap-3" partial-submit v-on:partial-submit="async () => await mutate()">
+    <div class="flex flex-col gap-3" partial-submit v-on:partial-submit="(ev) => mutate().then(ev.detail.resolve).catch(ev.detail.reject)">
         <label class="flex items-center p-5 border rounded relative bg-white" v-if="!cart.value.is_virtual && !cart.value.shipping_addresses?.[0]?.uid">
             <span>@lang('Please enter a shipping address first')</span>
         </label>