Submit forms with fetch with translations

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,24 @@ import '/public/vendor/statamic/frontend/js/helpers.js'
 Vue.prototype.Statamic = window.Statamic
 
 export default {
-    props: ['initialData'],
+    props: {
+        initialData: {
+            type: Object,
+            required: true,
+        },
+        callback: {
+            type: Function,
+        },
+    },
     data() {
         return {
             formData: this.initialData,
+            success: false,
+            error: false,
         };
     },
     render() {
-        return this.$scopedSlots.default({ formData: this.formData });
+        return this.$scopedSlots.default(this);
     },
     mounted() {
         let token = this.$root.csrfToken
@@ -19,6 +29,31 @@ 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),
+            })
+
+            let data = await response.json()
+
+            if (response.ok) {
+                this.success = true
+                Notify(window.config.statamic.translations.form.success, 'success')
+                if (this.callback) {
+                    await this.callback()
+                }
+            } else {
+                this.error = true
+                Notify(window.config.statamic.translations.form.error, 'error')
+                console.error(data?.errors)
+            }
+        },
+    },
 }
 </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 :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/Http/ViewComposers/ConfigComposer.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace Rapidez\Statamic\Http\ViewComposers;
+
+use Illuminate\Support\Facades\Config;
+use Illuminate\View\View;
+
+class ConfigComposer
+{
+    public function compose(View $view)
+    {
+        Config::set('frontend.statamic.translations', __('rapidez-statamic::frontend'));
+    }
+}

src/RapidezStatamicServiceProvider.php

@@ -16,6 +16,7 @@
 use Rapidez\Statamic\Commands\InvalidateCacheCommand;
 use Rapidez\Statamic\Extend\SitesLinkedToMagentoStores;
 use Rapidez\Statamic\Forms\JsDrivers\Vue;
+use Rapidez\Statamic\Http\ViewComposers\ConfigComposer;
 use Rapidez\Statamic\Http\ViewComposers\StatamicGlobalDataComposer;
 use Rapidez\Statamic\Listeners\ClearNavTreeCache;
 use Rapidez\Statamic\Listeners\SetCollectionsForNav;
@@ -77,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' => [
@@ -200,6 +209,8 @@ public function bootComposers() : self
             View::composer('*', StatamicGlobalDataComposer::class);
         }
 
+        View::composer('rapidez::layouts.app', ConfigComposer::class);
+
         return $this;
     }