Submit forms with fetch

lang/en/frontend.php

@@ -0,0 +1,8 @@
+<?php
+
+return [
+    'form' => [
+        'success' => 'Form submitted successfully',
+        'error' => 'Something went wrong, please try again later',
+    ],
+];

lang/nl/frontend.php

@@ -0,0 +1,8 @@
+<?php
+
+return [
+    'form' => [
+        'success' => 'Formulier verzonden',
+        'error' => 'Er ging iets fout, probeer het later opnieuw',
+    ],
+];

resources/js/components/FormConditions.vue

@@ -3,14 +3,28 @@ import '/public/vendor/statamic/frontend/js/helpers.js'
 Vue.prototype.Statamic = window.Statamic
 
 export default {
-    props: ['initialData'],
+    props: {
+        initialData: {
+            type: Object,
+            required: true,
+        },
+        translations: {
+            type: Object,
+            default: () => ({}),
+        },
+        callback: {
+            type: Function,
+        },
+    },
     data() {
         return {
             formData: this.initialData,
+            success: false,
+            error: false,
         };
     },
     render() {
-        return this.$scopedSlots.default({ formData: this.formData });
+        return this.$scopedSlots.default({ formData: this.formData, submit: this.submit });
     },
     mounted() {
         let token = this.$root.csrfToken
@@ -19,6 +33,28 @@ export default {
         if (csrfField && token && token !== 'STATAMIC_CSRF_TOKEN') {
             csrfField.value = token
         }
-    }
+    },
+
+    methods: {
+        async submit(event) {
+            event.preventDefault()
+
+            const response = await rapidezFetch(this.$el.action, {
+                method: this.$el.method,
+                body: new FormData(this.$el),
+            })
+
+            if (response.ok) {
+                this.success = true
+                Notify(this.translations.success, 'success')
+                if (this.callback) {
+                    await this.callback()
+                }
+            } else {
+                this.error = true
+                Notify(this.translations.error, 'error')
+            }
+        },
+    },
 }
 </script>

resources/views/page_builder/form.blade.php

@@ -5,8 +5,8 @@
     @return
 @endif
 
-<form-conditions :initial-data='@json(Arr::pluck($form['fields'], 'default', 'handle'))' v-slot="{ formData }">
-    <form @attributes($form['attrs'])>
+<form-conditions :translations="{{ json_encode(__('rapidez-statamic::frontend.form')) }}" :initial-data='@json(Arr::pluck($form['fields'], 'default', 'handle'))' v-slot="{ formData, submit }">
+    <form @submit.prevent="submit" @attributes($form['attrs'])>
         @foreach($form['params'] as $name => $value)
             <input type="hidden" name="{{ $name }}" value="{{ $value }}">
         @endforeach

src/RapidezStatamicServiceProvider.php

@@ -78,12 +78,20 @@ public function boot()
             ->bootBuilder()
             ->bootSitemaps()
             ->bootStaticCaching()
-            ->bootStack();
+            ->bootStack()
+            ->bootTranslations();
 
         Vue::register();
         Alternates::register();
     }
-
+
+    protected function bootTranslations(): self
+    {
+        $this->loadTranslationsFrom(__DIR__ . '/../lang', 'rapidez-statamic');
+
+        return $this;
+    }
+
     protected function bootBuilder(): self
     {
         config(['statamic.builder' => [