feat: form submit error + styling

Author: tikagan

components/subfooter-form.vue

@@ -1,42 +1,46 @@
 <template>
   <div class="subfooter-form">
-    <div :class="['form-field-container', { error: fieldError}]">
 
-      <div class="detail-wrapper">
-        <svg
-          width="400"
-          viewBox="0 0 400 41"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          class="detail">
-          <path
-            :d="path"
-            stroke="#FFC582"
-            stroke-width="2"
-            shape-rendering="crispEdges"
-            class="stroke-path" />
-        </svg>
-      </div>
+    <div class="form-wrapper">
+      <div :class="['form-field-container', { error: fieldError}]">
+        <div class="detail-wrapper">
+          <svg
+            width="400"
+            viewBox="0 0 400 41"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            class="detail">
+            <path
+              :d="path"
+              stroke="#FFC582"
+              stroke-width="2"
+              shape-rendering="crispEdges"
+              class="stroke-path" />
+          </svg>
+        </div>
 
-      <div class="field-email">
-        <input
-          class="email"
-          :placeholder="placeholder"
-          type="email"
-          required="true"
-          @input="updateValue($event.target.value)" />
+        <div class="field-email">
+          <input
+            class="email"
+            :placeholder="placeholder"
+            type="email"
+            required="true"
+            @input="updateValue($event.target.value)" />
+        </div>
       </div>
+
+      <ButtonCtaWithLoader
+        :class="['submit-button', { submitted: formSubmitted }]"
+        theme="secondary"
+        loader="subfooter-card-newsletter-signup"
+        @clicked="submitForm">
+        <template #button-content>
+          <span class="button-label"> {{ buttonText }} </span>
+        </template>
+      </ButtonCtaWithLoader>
     </div>
 
-    <ButtonCtaWithLoader
-      :class="['submit-button', { submitted: formSubmitted }]"
-      theme="secondary"
-      loader="subfooter-card-newsletter-signup"
-      @clicked="submitForm">
-      <template #button-content>
-        <span class="button-label"> {{ buttonText }} </span>
-      </template>
-    </ButtonCtaWithLoader>
+    <span v-if="submitError" class="submit-error" v-html="errorMessage" />
 
   </div>
 </template>
@@ -60,6 +64,8 @@ const props = defineProps({
 
 // ======================================================================== Data
 const formSubmitted = ref(false)
+const submitError = ref(false)
+const errorMessage = "Uh oh, we were not able to send that data due to an error — please try again, or reach out to us via Slack"
 const fieldError = ref(false)
 const field = ref(false)
 // ==================================================================== Computed
@@ -89,8 +95,7 @@ const updateValue = (val) => {
  * @method submitForm
  */
 const submitForm = async () => {
-  // if (formSubmitted.value) {  $button('triple-line-loader').set({ loading: false }); return }
-  if (formSubmitted.value) { return }
+  if (formSubmitted.value) {  $button('triple-line-loader').set({ loading: false }); return }
   if (field.value) {
     const body = {
       records: [
@@ -105,16 +110,18 @@ const submitForm = async () => {
       'Content-Type': 'application/json',
       'Authorization': `Bearer ${config.public.airtableToken}`
     }
-    const res = await $fetch('https://api.airtable.com/v0/apphbQmrNLNNXiaqG/tblSB1NYasWQIDGlp', {
+    await $fetch('https://api.airtable.com/v0/apphbQmrNLNNXiaqG/tblSB1NYasWQIDGlp', {
       method: 'POST',
       body,
       headers
-    })
-    if (res) {
+    }).then(() => {
       buttonStore.set({id: 'subfooter-card-newsletter-signup', loading: false})
       formSubmitted.value = true
       return
-    }
+    }).catch(() => {
+      submitError.value = true
+      buttonStore.set({id: 'subfooter-card-newsletter-signup', loading: false})
+    })
   }
   if(!field.value) {
     fieldError.value = true
@@ -127,6 +134,11 @@ const submitForm = async () => {
 <style lang="scss" scoped>
 // ///////////////////////////////////////////////////////////////////// General
 .subfooter-form {
+  position: relative;
+}
+
+.form-wrapper {
+  position: relative;
   display: flex;
   white-space: nowrap;
   margin-left: 1.5625rem;
@@ -138,6 +150,19 @@ const submitForm = async () => {
   }
 }
 
+.submit-error {
+  display: block;
+  width: 66%;
+  margin-top: toRem(5);
+  word-break: break-word;
+  text-align: right;
+  @include formFieldErrorMessage;
+  color: var(--error);
+  @include mini {
+    width: calc(100% - toRem(2));
+  }
+}
+
 // ////////////////////////////////////////////////////////////// Detail Wrapper
 .detail-wrapper {
   position: absolute;