v5.0.3.0 - added video to sidebar; added CVAS contact workflow

components/TheSideBar.vue

@@ -235,7 +235,7 @@
             </li>
           </ul>
           <div class="company-footer">
-            ⎨&nbsp; FlyLocal v5.0.2.3 &nbsp;&nbsp;𐄙&nbsp;&nbsp; ©2021 FlyLocal, Inc &nbsp;⎬
+            ⎨&nbsp; FlyLocal v5.0.3.0 &nbsp;&nbsp;𐄙&nbsp;&nbsp; ©2021 FlyLocal, Inc &nbsp;⎬
           </div>
         </div>
         <ul class="contact">

nuxt.config.js

@@ -41,7 +41,9 @@ export default {
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
-    { src: '~/plugins/vue2-leaflet-markercluster.js', mode: 'client' }
+    { src: '~/plugins/vue2-leaflet-markercluster.js', mode: 'client' },
+    '~plugins/v-mask.js',
+    '~plugins/vue-phone-number-input.js'
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flylocal",
-  "version": "5.0.2.3",
+  "version": "5.0.3.0",
   "private": true,
   "scripts": {
     "dev": "nuxt",
@@ -26,6 +26,8 @@
     "nuxt-segment-analytics": "^0.0.1",
     "nuxt-vue-select": "^0.1.4",
     "tailwindcss": "^2.2.15",
+    "v-mask": "^2.3.0",
+    "vue-phone-number-input": "^1.1.12",
     "vue-select": "^3.13.0",
     "vue2-leaflet": "^2.7.1",
     "vue2-leaflet-markercluster": "^3.1.0",

pages/flights.vue

@@ -199,11 +199,11 @@
               <strong>Copper Valley Air Service</strong>,<br>a great local
               airline!
             </h3>
-            <p>
+            <!-- <p>
               Copper Valley is a small, family run airline that not only
               provides bi-weekly air-taxi flights, but also mail delivery,
               sight-seeing, and adventure flights to remote areas of Alaska.
-            </p>
+            </p> -->
             <p>
               To book with Copper Valley, enter your contact info below and they
               will contact you directly to finish your booking.
@@ -223,12 +223,16 @@
               name="firstName"
               placeholder="first name"
               v-model="firstName"
+              :class="[{'input--error': firstNameTouched && !firstName}]"
+              @focus="firstNameTouched = true"
             />
             <input
               type="text"
               name="lastName"
               placeholder="last name"
               v-model="lastName"
+              :class="[{'input--error': lastNameTouched && !lastName}]"
+              @focus="lastNameTouched = true"
             />
           </div>
           <div
@@ -242,10 +246,16 @@
           >
             <input
               type="email"
-              name="firstName"
+              name="email"
               placeholder="email address"
               v-model="email"
+              required
+              @input="validateEmail"
+              :class="[{'input--error': emailError}]"
             />
+            <span class="alert--error">
+              {{ emailError }}
+            </span>
           </div>
           <div
             v-if="
@@ -256,12 +266,23 @@
             "
             class="form-row"
           >
-            <input
+            <VuePhoneNumberInput 
+              v-model="phone" 
+              required
+              @update="validatePhone"
+              show-code-on-list
+              @phone-number-focused="phoneTouched = true" />
+            <!-- <input
               type="tel"
-              name="firstName"
+              name="tel"
               placeholder="phone number"
               v-model="phone"
-            />
+              required
+              @blur="validatePhone"
+            /> -->
+            <span v-if="phoneTouched" class="alert--error">
+              {{ phoneError }}
+            </span>
           </div>
           <button
             v-if="
@@ -282,6 +303,7 @@
               selectedSchedule.fields.Carrier_Name ===
               'Copper Valley Air Service'
             "
+            :disabled="(emailError + phoneError).length > 0 || !firstName || !lastName"
             class="btn btn--primary"
             @click="contactCarrier"
           >
@@ -291,6 +313,9 @@
               <path d="M21 3l-6.5 18a0.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a0.55 .55 0 0 1 0 -1l18 -6.5" />
             </svg>
           </button>
+          <div v-if="mailSent" class="alert--sent">
+            Thanks! You will be contacted shortly.
+          </div>
         </div>
       </div>
     </main>
@@ -312,7 +337,14 @@ export default {
       firstName: '',
       lastName: '',
       email: '',
-      phone: ''
+      phone: '',
+      firstNameTouched: false,
+      lastNameTouched: false,
+      emailTouched: false,
+      phoneTouched: false,
+      emailError: '',
+      phoneError: '',
+      mailSent: false
     }
   },
   async fetch () {
@@ -478,7 +510,17 @@ export default {
 
       const json = await res.json()
       //this.guests = { ...await json }
-      console.log(await json)
+      if(await json) {
+        this.mailSent = true
+        this.firstName = ''
+        this.lastName = ''
+        this.email = ''
+        this.phone = ''
+        this.firstNameTouched = false
+        this.lastNameTouched = false
+        this.emailTouched = false
+        this.phoneTouched = false
+      }
     },
     selectSchedule (schedule) {
       this.selectedSchedule = { ...schedule }
@@ -536,6 +578,31 @@ export default {
         default:
           break
       }
+    },
+    validateEmail() {
+      if (/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/.test(this.email)) {
+          const emailArray = this.email.split('@')
+          const name = emailArray[0]
+          const fullDomain = emailArray[1]
+          const domainArray = fullDomain.split('.')
+          const domain = domainArray.slice(-2)[0]
+          const tld = domainArray.slice(-1)[0]
+          if(tld.length < 2 || domain.length < 2) {
+            this.emailError = 'your email isn\'t valid';
+          } else {
+            this.emailError = '';
+          }
+      } else {
+          this.emailError = 'your email isn\'t valid';
+      }
+    },
+    validatePhone(data) {
+      this.phoneIsValid = data.isValid
+      if (data.isValid) {
+          this.phoneError = '';
+      } else {
+          this.phoneError = 'your phone number isn\'t valid';
+      }
     }
   }
 }
@@ -769,7 +836,7 @@ span.badge--avail {
 
 .form-row input {
   background: #eee;
-  border-radius: 999px;
+  border-radius: 0.5rem 3rem 3rem 3rem;
   transition: 0.3s all;
   padding: 0.5em 0.8em;
   font-size: min(1rem, 18px);
@@ -787,6 +854,10 @@ span.badge--avail {
   width: 50%;
 }
 
+.form-row input:focus {
+  border: 0;
+}
+
 .flyout {
   background: #007fff;
   border-radius: 3rem 3rem 0 0;
@@ -865,4 +936,33 @@ span.badge--avail {
 .flyout h3 strong {
   font-weight: 600;
 }
+
+.btn:disabled {
+  opacity: 0.2;
+  background: #ddd;
+  color: #222;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.input--error {
+  box-shadow: 0 0 0 0.2rem red;
+}
+
+.alert--error {
+  text-align: center;
+  color: white;
+  font-size: 0.75rem;
+  margin-top: 0.15rem;
+}
+
+.alert--sent {
+  text-align: center;
+  background-color: #00ca00;
+  margin: 0 -3rem -3rem -3rem;
+  text-transform: uppercase;
+  font-size: 0.9rem;
+  letter-spacing: 0.1rem;
+  padding: 1rem;
+}
 </style>

plugins/v-mask.js

@@ -0,0 +1,13 @@
+import Vue from 'vue'
+
+// Prefered: as a plugin (directive + filter) + custom placeholders support
+import VueMask from 'v-mask'
+Vue.use(VueMask);
+
+// const LeafletPlugin = {
+//   install (Vue) {
+//     Vue.prototype.$L = L
+//   }
+// }
+
+// Vue.use(LeafletPlugin)

plugins/vue-phone-number-input.js

@@ -0,0 +1,5 @@
+import Vue from 'vue'
+import VuePhoneNumberInput from 'vue-phone-number-input'
+import 'vue-phone-number-input/dist/vue-phone-number-input.css'
+
+Vue.component('VuePhoneNumberInput', VuePhoneNumberInput)

yarn.lock

@@ -6405,6 +6405,11 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+libphonenumber-js@^1.7.51:
+  version "1.9.41"
+  resolved "https://registry.yarnpkg.com/libphonenumber-js/-/libphonenumber-js-1.9.41.tgz#9bd7b7c7bf0246fa9a02f89de5654fdf61926190"
+  integrity sha512-AE4NLPwITwzra8mOJPtSbbjMO17Nv+6/tzUKa4AN6LY2Un97HfGOT8MATXmnNZsj5dkd/iOfN3MJA/6OKpJV0g==
+
 lilconfig@^2.0.3:
   version "2.0.3"
   resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.3.tgz"
@@ -7857,6 +7862,11 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
+picocolors@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
+  integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
+
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
   version "2.3.0"
   resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz"
@@ -8666,6 +8676,14 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
+postcss-sorting@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-sorting/-/postcss-sorting-5.0.1.tgz#10d5d0059eea8334dacc820c0121864035bc3f11"
+  integrity sha512-Y9fUFkIhfrm6i0Ta3n+89j56EFqaNRdUKqXyRp6kvTcSXnmgEjaVowCXH+JBe9+YKWqd4nc28r2sgwnzJalccA==
+  dependencies:
+    lodash "^4.17.14"
+    postcss "^7.0.17"
+
 postcss-svgo@^4.0.3:
   version "4.0.3"
   resolved "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-4.0.3.tgz"
@@ -8747,6 +8765,14 @@ postcss@7.x.x, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17,
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+postcss@^7.0.31:
+  version "7.0.39"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
+  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
+  dependencies:
+    picocolors "^0.2.1"
+    source-map "^0.6.1"
+
 postcss@^8.1.10, postcss@^8.1.6, postcss@^8.2.1, postcss@^8.2.15, postcss@^8.3.5, postcss@^8.3.6:
   version "8.3.6"
   resolved "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz"
@@ -9602,6 +9628,11 @@ scoped-regex@^1.0.0:
   resolved "https://registry.npmjs.org/scoped-regex/-/scoped-regex-1.0.0.tgz"
   integrity sha1-o0a7Gs1CB65wvXwMfKnlZra63bg=
 
+scrollparent@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/scrollparent/-/scrollparent-2.0.1.tgz#715d5b9cc57760fb22bdccc3befb5bfe06b1a317"
+  integrity sha1-cV1bnMV3YPsivczDvvtb/gaxoxc=
+
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@@ -10239,6 +10270,13 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
+style-helpers@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/style-helpers/-/style-helpers-1.0.2.tgz#3675e327c806a8f2edb56cde3d990dded25e8b31"
+  integrity sha512-1wDr4EsNepPWPWsbr0m7H+4saaJK7+/H+VQqoLTmoaS3A0zXFzoCk+16RLXevnzfunVByFCu7tmyR2tXwzmBGw==
+  dependencies:
+    stylelint-order "^4.0.0"
+
 style-resources-loader@^1.4.1:
   version "1.4.1"
   resolved "https://registry.npmjs.org/style-resources-loader/-/style-resources-loader-1.4.1.tgz"
@@ -10274,6 +10312,15 @@ stylelint-config-standard@^22.0.0:
   dependencies:
     stylelint-config-recommended "^5.0.0"
 
+stylelint-order@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/stylelint-order/-/stylelint-order-4.1.0.tgz#692d05b7d0c235ac66fcf5ea1d9e5f08a76747f6"
+  integrity sha512-sVTikaDvMqg2aJjh4r48jsdfmqLT+nqB1MOsaBnvM3OwLx4S+WXcsxsgk5w18h/OZoxZCxuyXMh61iBHcj9Qiw==
+  dependencies:
+    lodash "^4.17.15"
+    postcss "^7.0.31"
+    postcss-sorting "^5.0.1"
+
 stylelint-webpack-plugin@^2.0.0:
   version "2.2.2"
   resolved "https://registry.npmjs.org/stylelint-webpack-plugin/-/stylelint-webpack-plugin-2.2.2.tgz"
@@ -11041,6 +11088,11 @@ uuid@^3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
+v-mask@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/v-mask/-/v-mask-2.3.0.tgz#2329c352ce9997eb721d160cf3f0a8552c5c9e1c"
+  integrity sha512-ap7pTtCTvj25CqX4VYXqudCBd0+XvYyhiiLbzWQQR7AMQosJ2+DPu0a94P9stk0EGmGcmYxJaPkFkfjD8hquWQ==
+
 v8-compile-cache@^2.0.3, v8-compile-cache@^2.3.0:
   version "2.3.0"
   resolved "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz"
@@ -11142,6 +11194,26 @@ vue-no-ssr@^1.1.1:
   resolved "https://registry.npmjs.org/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz"
   integrity sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g==
 
+vue-observe-visibility@^0.4.4:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz#878cb8ebcf3078e40807af29774e97105ebd519e"
+  integrity sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q==
+
+vue-phone-number-input@^1.1.12:
+  version "1.1.12"
+  resolved "https://registry.yarnpkg.com/vue-phone-number-input/-/vue-phone-number-input-1.1.12.tgz#bb2c5fa453d0dbfe6d70a666f9db5fd54ce3f7df"
+  integrity sha512-PB2M35ACBczqkQN8d9XxylTt2BJf7A0yORnybNPBhPjgWP+sRAJqyGSFXjQ/byfacUKQn3TRRwEqRtlc1repEQ==
+  dependencies:
+    libphonenumber-js "^1.7.51"
+    style-helpers "^1.0.2"
+    vue "^2.6.11"
+    vue-virtual-scroller "^1.0.10"
+
+vue-resize@^0.4.5:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.5.tgz#4777a23042e3c05620d9cbda01c0b3cc5e32dcea"
+  integrity sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==
+
 vue-router@^3.5.1:
   version "3.5.2"
   resolved "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz"
@@ -11196,6 +11268,15 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue-virtual-scroller@^1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/vue-virtual-scroller/-/vue-virtual-scroller-1.0.10.tgz#fdf243240001f05bd79aa77f2e2e60403760e2fb"
+  integrity sha512-Hn4qSBDhRY4XdngPioYy/ykDjrLX/NMm1fQXm/4UQQ/Xv1x8JbHGFZNftQowTcfICgN7yc31AKnUk1UGLJ2ndA==
+  dependencies:
+    scrollparent "^2.0.1"
+    vue-observe-visibility "^0.4.4"
+    vue-resize "^0.4.5"
+
 vue2-leaflet-markercluster@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/vue2-leaflet-markercluster/-/vue2-leaflet-markercluster-3.1.0.tgz"
@@ -11225,7 +11306,7 @@ vue2-leaflet@^2.6.0, vue2-leaflet@^2.7.1:
   resolved "https://registry.npmjs.org/vue2-leaflet/-/vue2-leaflet-2.7.1.tgz"
   integrity sha512-K7HOlzRhjt3Z7+IvTqEavIBRbmCwSZSCVUlz9u4Rc+3xGCLsHKz4TAL4diAmfHElCQdPPVdZdJk8wPUt2fu6WQ==
 
-vue@^2.6.12:
+vue@^2.6.11, vue@^2.6.12:
   version "2.6.14"
   resolved "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz"
   integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==