From 92de072db543e77beaf5ec709390fff2ac2b3458 Mon Sep 17 00:00:00 2001
From: Spencer Flagg <spencer@iflylocal.com>
Date: Mon, 1 Nov 2021 23:16:42 +0100
Subject: [PATCH] added sidebar video; started adding Copper Valley form - not
 finished;

---
 assets/css/main.css       |   8 +-
 components/TheSideBar.vue |  16 +++
 pages/flights.vue         | 276 +++++++++++++++++++++++++++++++++-----
 3 files changed, 263 insertions(+), 37 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index defd33a..84deae9 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -84,7 +84,8 @@ main {
   transition: 0.2s all;
   display: flex;
   align-items: center;
-  justify-content: space-around;
+  /* justify-content: space-around; what was this for? */
+  justify-content: center;
   gap: 0.25rem;
   line-height: 1;
   min-height: 1em;
@@ -94,6 +95,7 @@ main {
   height: min(1rem, 18px);
   display: inline-block;
   aspect-ratio: 1;
+  transition: 0.2s all;
 }
 
 .btn.btn--primary {
@@ -106,6 +108,10 @@ main {
   color: #fff;
 }
 
+.btn.btn--primary:hover svg {
+  stroke: #ffffff;
+}
+
 .btn.btn--cancel {
   background: red;
   color: #fff;
diff --git a/components/TheSideBar.vue b/components/TheSideBar.vue
index 4a34022..6d6a754 100644
--- a/components/TheSideBar.vue
+++ b/components/TheSideBar.vue
@@ -50,6 +50,8 @@
           <h1 class="h1--about">
             What is<br>FlyLocal Alaska?
           </h1>
+          <iframe id="lbry-iframe" src="https://odysee.com/$/embed/What-is-FlyLocal-%28fall%2C2021%2Cdesktop%29/4b6d3c94ef05cd3609a22df6b2b0d45c174957a8?r=29V3nQLvAKT88DXBMViaBRypn3iWW5WM" allowfullscreen></iframe>
+          <iframe v-if="false" id="lbry-iframe-mobile" src="https://odysee.com/$/embed/What-is-FlyLocal-%28fall%2C2021%2Cmobile%29/9af5d6ac694a83b95a5763dc74b87f76e6503b0e?r=Ct8Uk1dFJb5UoQzJN7ASdkypiqzkqqez" allowfullscreen></iframe>
           <div class="img-divider">
             <img
               class="img--about"
@@ -509,6 +511,20 @@ h1.h1--about {
   margin-bottom: 5rem;
 }
 
+#lbry-iframe {
+  width: calc(var(--sidebar-width) - 4rem);
+  aspect-ratio: 560/315;
+  margin-bottom: 2rem;
+  border-radius: 2rem;
+}
+
+#lbry-iframe-mobile {
+  width: calc(var(--sidebar-width) - 4rem);
+  aspect-ratio: 315/560;
+  margin-bottom: 2rem;
+  border-radius: 2rem;
+}
+
 .about-carriers {
   display: flex;
   flex-direction: row;
diff --git a/pages/flights.vue b/pages/flights.vue
index 3e67b45..2b86b4b 100644
--- a/pages/flights.vue
+++ b/pages/flights.vue
@@ -32,7 +32,11 @@
         :selected-orig="selectedOrig"
         :selected-dest="selectedDest"
         :departure="formattedDate($route.params.departure)"
-        :departure-time="selectedSchedule && selectedSchedule.fields && selectedSchedule.fields.Departure_TimeL"
+        :departure-time="
+          selectedSchedule &&
+          selectedSchedule.fields &&
+          selectedSchedule.fields.Departure_TimeL
+        "
         style="margin: 0 1rem;"
       />
       <div class="schedule-wrapper">
@@ -42,12 +46,12 @@
             :key="schedule.fields.Record_ID"
             :class="[
               'grid__row',
-              { 'grid__row--selected': selectedSchedule.id == schedule.id },
+              { grid__row: selectedSchedule.id == schedule.id },
             ]"
           >
             <div class="row__check">
               <label class="radio radio--sched" :for="schedule.id">
-                <input :id="schedule.id" type="radio" name="schedules">
+                <input :id="schedule.id" type="radio" name="schedules" />
                 <span @click="selectSchedule(schedule)">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -106,7 +110,10 @@
               <h2 class="text--carrier">
                 {{ schedule.fields.Carrier_Name }}
               </h2>
-              <span v-if="schedule.fields.Flight_Number" class="text--flight-num">
+              <span
+                v-if="schedule.fields.Flight_Number"
+                class="text--flight-num"
+              >
                 Flight No. {{ schedule.fields.Flight_Number }}
               </span>
               <span class="text--dow">
@@ -114,7 +121,9 @@
               </span>
               <span class="badge--avail">
                 Available until
-                <strong>{{ formattedDate(schedule.fields.Effective_End) }}</strong>
+                <strong>{{
+                  formattedDate(schedule.fields.Effective_End)
+                }}</strong>
               </span>
             </div>
           </li>
@@ -131,9 +140,11 @@
           <button
             v-if="
               selectedSchedule &&
-                selectedSchedule.fields &&
-                selectedSchedule.fields.IsExpedia &&
-                selectedSchedule.fields.IsExpedia[0] !== 'true'
+              selectedSchedule.fields &&
+              selectedSchedule.fields.IsExpedia &&
+              selectedSchedule.fields.IsExpedia[0] !== 'true' &&
+              selectedSchedule.fields.Carrier_Name !==
+                'Copper Valley Air Service'
             "
             class="btn btn--primary"
             @click="goToCarrier"
@@ -145,28 +156,141 @@
               selectedSchedule &&
                 selectedSchedule.fields &&
                 selectedSchedule.fields.IsExpedia &&
-                selectedSchedule.fields.IsExpedia[0] === 'true'
+                (selectedSchedule.fields.IsExpedia[0] === 'true' ||
+                selectedSchedule.fields.Carrier_Name ===
+                'Copper Valley Air Service')
             "
-            class="book-container"
+            class="form-row"
           >
-            <div>
-              <label for="">How Many Adults?</label>
-              <v-select
-                v-model="numAdult"
-                :options="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
-              />
-            </div>
-            <div>
-              <label for="">How Many Children?</label>
-              <v-select
-                v-model="numChild"
-                :options="[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
-              />
-            </div>
-            <button class="btn btn--primary" @click="book">
-              book now!
-            </button>
+            <label for="">How Many Adults?</label>
+            <v-select
+              v-model="numAdult"
+              :options="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
+            />
+          </div>
+          <div
+            v-if="
+              selectedSchedule &&
+                selectedSchedule.fields &&
+                selectedSchedule.fields.IsExpedia &&
+                (selectedSchedule.fields.IsExpedia[0] === 'true' ||
+                selectedSchedule.fields.Carrier_Name ===
+                'Copper Valley Air Service')
+            "
+            class="form-row"
+          >
+            <label for="">How Many Children?</label>
+            <v-select
+              v-model="numChild"
+              :options="[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
+            />
+          </div>
+          <div
+            v-if="
+              selectedSchedule &&
+              selectedSchedule.fields &&
+              selectedSchedule.fields.Carrier_Name ===
+              'Copper Valley Air Service'
+            "
+            class="alert--flights"
+          >
+            <h3>
+              You'll be flying with<br>
+              <strong>Copper Valley Air Service</strong>,<br>a great local
+              airline!
+            </h3>
+            <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>
+              To book with Copper Valley, enter your contact info below and they
+              will contact you directly to finish your booking.
+            </p>
+          </div>
+          <div
+            v-if="
+              selectedSchedule &&
+              selectedSchedule.fields &&
+              selectedSchedule.fields.Carrier_Name ===
+              'Copper Valley Air Service'
+            "
+            class="form-row form-row--two-columns"
+          >
+            <input
+              type="text"
+              name="firstName"
+              placeholder="first name"
+              v-model="firstName"
+            />
+            <input
+              type="text"
+              name="lastName"
+              placeholder="last name"
+              v-model="lastName"
+            />
+          </div>
+          <div
+            v-if="
+              selectedSchedule &&
+              selectedSchedule.fields &&
+              selectedSchedule.fields.Carrier_Name ===
+              'Copper Valley Air Service'
+            "
+            class="form-row"
+          >
+            <input
+              type="email"
+              name="firstName"
+              placeholder="email address"
+              v-model="email"
+            />
+          </div>
+          <div
+            v-if="
+              selectedSchedule &&
+              selectedSchedule.fields &&
+              selectedSchedule.fields.Carrier_Name ===
+              'Copper Valley Air Service'
+            "
+            class="form-row"
+          >
+            <input
+              type="tel"
+              name="firstName"
+              placeholder="phone number"
+              v-model="phone"
+            />
           </div>
+          <button
+            v-if="
+              selectedSchedule &&
+              selectedSchedule.fields &&
+              selectedSchedule.fields.IsExpedia &&
+              selectedSchedule.fields.IsExpedia[0] === 'true'
+            "
+            class="btn btn--primary"
+            @click="book"
+          >
+            book now!
+          </button>
+          <button
+            v-if="
+              selectedSchedule &&
+              selectedSchedule.fields &&
+              selectedSchedule.fields.Carrier_Name ===
+              'Copper Valley Air Service'
+            "
+            class="btn btn--primary"
+            @click="contactCarrier"
+          >
+            contact carrier <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-send" width="24" height="24" viewBox="0 0 24 24" stroke-width="3" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+              <line x1="10" y1="14" x2="21" y2="3" />
+              <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>
       </div>
     </main>
@@ -184,7 +308,11 @@ export default {
       selectedOrig: {},
       selectedDest: {},
       numAdult: 1,
-      numChild: 0
+      numChild: 0,
+      firstName: '',
+      lastName: '',
+      email: '',
+      phone: ''
     }
   },
   async fetch () {
@@ -319,6 +447,39 @@ export default {
 
       window.open(this.selectedSchedule.fields['BookingLink (from Carriers_Alaska)'][0])
     },
+    async contactCarrier () {
+      const newBooking =
+      {
+        fields: {
+          ArrivalTime: this.selectedSchedule.fields.Arrival_TimeL,
+          Carrier: this.selectedSchedule.fields.Carrier_Name,
+          DepartureTime: this.selectedSchedule.fields.Departure_TimeL,
+          Destination: this.selectedSchedule.fields.Destination_IATA[0],
+          Origin: this.selectedSchedule.fields.Origin_IATA[0],
+          CreatedDate: new Date(),
+          FirstName: this.firstName,
+          LastName: this.lastName,
+          Phone: this.phone,
+          Email: this.email,
+          DepartureDate: this.$route.params.departure,
+          NumAdult: this.numAdult,
+          NumChild: this.numChild,
+        }
+      }
+
+      const res = await fetch(`https://api.airtable.com/v0/appiQwfVZixRgRICe/CVAS_Booking/`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
+        },
+        body: JSON.stringify(newBooking)
+      })
+
+      const json = await res.json()
+      //this.guests = { ...await json }
+      console.log(await json)
+    },
     selectSchedule (schedule) {
       this.selectedSchedule = { ...schedule }
 
@@ -336,7 +497,7 @@ export default {
       this.startingDate = ''
       this.selectedSchedule = {}
     },
-    async fetchSingleAirport (iata, isOrig) {
+    async fetchSingleAirport(iata, isOrig) {
       const airportFetchFilterFormula =
         isOrig
           ? `AND(Is_Origin=1,{IsCurrent-AsOrigin}="Yes",Airport_IATA="${iata}")`
@@ -594,19 +755,38 @@ span.badge--avail {
   margin-left: -3rem;
 }
 
-.book-container {
+.form-row {
   display: flex;
   flex-direction: column;
   justify-content: stretch;
-  gap: 1rem;
 }
 
-.book-container label {
+.form-row label {
   text-transform: uppercase;
   font-size: 1rem;
   font-weight: 300;
 }
 
+.form-row input {
+  background: #eee;
+  border-radius: 999px;
+  transition: 0.3s all;
+  padding: 0.5em 0.8em;
+  font-size: min(1rem, 18px);
+  line-height: 1;
+}
+
+.form-row--two-columns {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  column-gap: 1rem;
+}
+
+.form-row--two-columns input {
+  width: 50%;
+}
+
 .flyout {
   background: #007fff;
   border-radius: 3rem 3rem 0 0;
@@ -615,6 +795,7 @@ span.badge--avail {
   width: clamp(450px, 50vw, 400px);
   display: flex;
   flex-direction: column;
+  gap: 1rem;
 }
 
 .flyout .btn.btn--primary {
@@ -627,10 +808,6 @@ span.badge--avail {
   color: #fff;
 }
 
-</style>
-
-<style>
-
 .flyout .v-select {
   font-size: 1.5rem;
 }
@@ -661,4 +838,31 @@ span.badge--avail {
   border-radius: 1.2rem 1.2rem 0 0;
 }
 
+.flyout p {
+  font-size: 1rem;
+  line-height: 1.2;
+  font-weight: 400;
+  color: #fff;
+  margin-bottom: 1rem;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.flyout p:last-child {
+  margin-bottom: 0;
+}
+
+.flyout h3 {
+  font-size: 1.5rem;
+  line-height: 1;
+  font-weight: 200;
+  margin-bottom: 1rem;
+  color: #fff;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.flyout h3 strong {
+  font-weight: 600;
+}
 </style>