Merge pull request #33 from data-preservation-programs/refactor-http-requests-axios

orvn · web-flow · commit 9d4aea809f0f · 2023-09-27T23:32:58.000-04:00
feat: polish + refactor tweaks
diff --git a/assets/scss/theme/utilities.scss b/assets/scss/theme/utilities.scss
@@ -35,7 +35,7 @@ $gray900: #212121;
 $codGray: #060606; // black
 $sageGreen: #CBDDBB; // light soft green
 $alto: #D3D3D3; // light gray
-$burntSienna: #E8655D; // red
+$burntSienna: #FD835D; // red
 $chardonnay: #FFC582; // peachy orange
 $codeBlack: #191919; // black
 $tundora: #414141; // gray
diff --git a/components/signup-card.vue b/components/signup-card.vue
@@ -21,7 +21,7 @@
       <div class="signup-form">
 
         <div class="name-fields">
-          <div class="field-wrapper">
+          <div class="field-wrapper row">
             <input
               :class="['first-name input-field form-field', { error: fieldError.firstName }]"
               type="text"
@@ -31,7 +31,7 @@
             <span v-if="fieldError.firstName" class="error message" v-html="errorMessage" />
           </div>
 
-          <div class="field-wrapper">
+          <div class="field-wrapper row">
             <input
               :class="['last-name input-field form-field', { error: fieldError.lastName }]"
               type="text"
@@ -93,15 +93,21 @@
           <span v-if="fieldError.country" class="error message" v-html="errorMessage" />
         </div>
 
-        <ButtonCtaWithLoader
-          :class="['submit-button', { submitted: !loading && formSubmitted }]"
-          theme="primary"
-          loader="signup-card-form"
-          @clicked="submitForm">
-          <template #button-content>
-            <span class="button-label"> {{ submitButtonLabel }} </span>
-          </template>
-        </ButtonCtaWithLoader>
+        <div class="button-row">
+          <div v-if="submitError" class="submit-error">
+            Uh oh, we were not able to send that data due to an error — please try again, or reach out to us via Slack
+          </div>
+
+          <ButtonCtaWithLoader
+            :class="['submit-button', { submitted: formSubmitted }]"
+            theme="primary"
+            loader="signup-card-form"
+            @clicked="submitForm">
+            <template #button-content>
+              <span class="button-label"> {{ submitButtonLabel }} </span>
+            </template>
+          </ButtonCtaWithLoader>
+        </div>
 
       </div>
 
@@ -110,7 +116,7 @@
 </template>
 
 <script setup>
-const SINGULARITY_DEMO_SIGNUPS_TOKEN = import.meta.env.VITE_AIRTABLE_SINGULARITY_DEMO_TOKEN
+const config = useRuntimeConfig()
 const buttonStore = useZeroButtonStore()
 // ======================================================================= Props
 const props = defineProps({
@@ -123,6 +129,7 @@ const props = defineProps({
 
 // ======================================================================== Data
 const formSubmitted = ref(false)
+const submitError = ref(false)
 const errorMessage = '[ Field is required ]'
 const fieldError = ref({
   firstName: false,
@@ -220,18 +227,21 @@ const submitForm = async () => {
       }
       const headers = {
         'Content-Type': 'application/json',
-        'Authorization': `Bearer ${SINGULARITY_DEMO_SIGNUPS_TOKEN}`
+        'Authorization': `Bearer ${config.public.airtableToken}`
       }
-    const res = await $fetch('https://api.airtable.com/v0/apphbQmrNLNNXiaqG/tblDUSr66nczukX9Y', {
+
+    await $fetch('https://api.airtable.com/v0/apphbQmrNLNNXiaqG/tblDUSr66nczukX9Y', {
       method: 'POST',
       body,
       headers
-    })
-  if (res) {
-    buttonStore.set({id: 'signup-card-form', loading: false})
-    formSubmitted.value = true
-    return
-    }
+    }).then(() => {
+      buttonStore.set({id: 'signup-card-form', loading: false})
+      formSubmitted.value = true
+      return
+    }).catch(() => {
+      submitError.value = true
+      buttonStore.set({id: 'signup-card-form', loading: false})
+      })
   }
   if(!firstName.value) { fieldError.value.firstName = true}
   if(!lastName.value) { fieldError.value.lastName = true}
@@ -314,8 +324,28 @@ const submitForm = async () => {
   color: var(--error);
 }
 
+
+.button-row {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  @include mini {
+    flex-direction: column;
+  }
+}
+.submit-error {
+  @include formFieldErrorMessage;
+  color: var(--error);
+  margin: 0 toRem(94) 0 toRem(5);
+  @include mini {
+    margin: 0 toRem(10) 1rem;
+  }
+}
 .submit-button {
-  align-self: flex-end;
+  height: fit-content;
+  @include mini {
+    align-self: flex-end;
+  }
   &.submitted,
   &.submitted:hover {
     cursor: default;
@@ -341,6 +371,9 @@ const submitForm = async () => {
 .name-fields {
   display: flex;
   justify-content: space-between;
+  .field-wrapper.row {
+    margin-bottom: toRem(24);
+  }
   @include medium {
     flex-flow: row wrap;
     .field-wrapper {
diff --git a/components/site-footer.vue b/components/site-footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <footer id="site-footer">
+  <footer id="site-footer" :class="{ 'no-background-image': pageSignup }">
 
     <div class="content">
       <div class="grid-bottom-noBottom-noGutter">
@@ -52,8 +52,11 @@
 <script setup>
 // ======================================================================== Data
 const generalStore = useGeneralStore()
+const route = useRoute()
 
 // ==================================================================== Computed
+const pageSignup = computed(() => { return route.name === 'signup' })
+
 const authors = computed(() => {
   return generalStore.siteContent.general?.footer.authors
 })
@@ -87,6 +90,11 @@ const scrollToTop = async () => {
     padding-top: toRem(72);
     height: unset;
   }
+  &.no-background-image {
+    &::before {
+      display: none;
+    }
+  }
   &:before {
     content: '';
     position: absolute;
diff --git a/components/site-header.vue b/components/site-header.vue
@@ -227,7 +227,7 @@ const handleNavClick = () => {
   display: flex;
   width: fit-content;
   transition: 250ms ease;
-  padding-top: .5rem;
+  margin-top: .5rem;
   &:hover,
   &:focus-visible {
     transform: scale(1.08);
diff --git a/components/subfooter-form.vue b/components/subfooter-form.vue
@@ -1,48 +1,52 @@
 <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>
 
 <script setup>
-const SINGULARITY_DEMO_SIGNUPS_TOKEN = import.meta.env.VITE_AIRTABLE_SINGULARITY_DEMO_TOKEN
+const config = useRuntimeConfig()
 const buttonStore = useZeroButtonStore()
 // ======================================================================= Props
 const props = defineProps({
@@ -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,32 +95,33 @@ 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: [
-          {
-            fields: {
-              email: field.value
-            }
+      records: [
+        {
+          fields: {
+            email: field.value
           }
-        ]
-      }
-      const headers = {
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${SINGULARITY_DEMO_SIGNUPS_TOKEN}`
-      }
-    const res = await $fetch('https://api.airtable.com/v0/apphbQmrNLNNXiaqG/tblSB1NYasWQIDGlp', {
+        }
+      ]
+    }
+    const headers = {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${config.public.airtableToken}`
+    }
+    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;
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -26,7 +26,8 @@ export default defineNuxtConfig({
       serverFlag: env,
       seo: {
         siteName: seo.siteName
-      }
+      },
+      airtableToken: process.env.AIRTABLE_SINGULARITY_ACCESS_TOKEN
     }
   },
   // ////////////////////////////////////////////////////////// Server & Bundler
diff --git a/pages/signup.vue b/pages/signup.vue
