@meetelise/chat 1.20.32 → 1.20.34

package/src/WebComponent/Scheduler/tour-scheduler.ts

@@ -26,6 +26,8 @@ import { isNumber, isString, mapValues } from "lodash";
 import classnames from "classnames";
 import parseISO from "date-fns/parseISO";
 import compareAsc from "date-fns/compareAsc";
+import { InputStyles } from "../actions/InputStyles";
+import { classMap } from "lit/directives/class-map.js";
 
 const getHumanReadableLayout = (layout: string) => {
   if (layout == "studio") return "Studio";
@@ -371,400 +373,394 @@ export class TourScheduler extends LitElement {
     }
   };
 
-  static styles = css`
-    * {
-      box-sizing: border-box;
-    }
-
-    .tour-scheduler {
-      position: fixed;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      width: 1018px;
-      height: 573px;
-      background: #ffffff;
-      box-shadow: 0px 16px 18px 10px rgba(21, 21, 21, 0.4);
-      border-radius: 10px;
-      font-family: "Poppins";
-      color: #202020;
-      padding: 0 25px 0 27px;
-
-      /* grid stuff */
-      display: grid;
-      grid-template-columns: 229px 432px 305px;
-      grid-template-rows: 44px 54px 32px 195px 167px 1px;
-    }
+  static styles = [
+    css`
+      * {
+        box-sizing: border-box;
+      }
 
-    @media screen and (max-width: 1000px) {
       .tour-scheduler {
-        transform: translate(-50%, -50%) scale(0.8, 0.6);
+        position: fixed;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1018px;
+        height: 573px;
+        background: #ffffff;
+        box-shadow: 0px 16px 18px 10px rgba(21, 21, 21, 0.4);
+        border-radius: 10px;
+        font-family: "Poppins";
+        color: #202020;
+        padding: 0 25px 0 27px;
+
+        /* grid stuff */
+        display: grid;
+        grid-template-columns: 229px 432px 305px;
+        grid-template-rows: 44px 54px 32px 195px 167px 1px;
       }
-    }
 
-    h1,
-    h2 {
-      margin: 0;
-    }
+      @media screen and (max-width: 1000px) {
+        .tour-scheduler {
+          transform: translate(-50%, -50%) scale(0.8, 0.6);
+        }
+      }
 
-    .tour-scheduler > :is(h1, h2) {
-      align-self: end;
-    }
+      h1,
+      h2 {
+        margin: 0;
+      }
 
-    h1 {
-      font-size: 14px;
-      font-weight: 700;
-    }
+      .tour-scheduler > :is(h1, h2) {
+        align-self: end;
+      }
 
-    h1#scheduleATour {
-      grid-row: 1 / 2;
-      grid-column: 1;
-      align-self: end;
-      z-index: 1; // idk why, but it's invisible on the confirmation page otherwise
-    }
+      h1 {
+        font-size: 14px;
+        font-weight: 700;
+      }
 
-    button#closeButton {
-      grid-row: 1 / 2;
-      grid-column: 3;
-      background: none;
-      border: none;
-      align-self: end;
-      justify-self: end;
-      z-index: 1; // idk why, but it's invisible on the confirmation page otherwise
-    }
+      h1#scheduleATour {
+        grid-row: 1 / 2;
+        grid-column: 1;
+        align-self: end;
+        z-index: 1; // idk why, but it's invisible on the confirmation page otherwise
+      }
 
-    /*
+      button#closeButton {
+        grid-row: 1 / 2;
+        grid-column: 3;
+        background: none;
+        border: none;
+        align-self: end;
+        justify-self: end;
+        z-index: 1; // idk why, but it's invisible on the confirmation page otherwise
+      }
+
+      /*
     makes button fit size of SVG:
       https://stackoverflow.com/questions/45423874/button-height-is-greater-than-the-nested-contents-height
     otherwise there's some empty space at the bottom of the button, which interferes with vertical centering
     */
-    button#closeButton > svg {
-      vertical-align: middle;
-    }
-
-    #tourTypeMenu {
-      grid-row: 4 / 5;
-      grid-column: 1;
-      align-self: start;
-      display: flex;
-      flex-direction: column;
-      gap: 15px;
-    }
+      button#closeButton > svg {
+        vertical-align: middle;
+      }
 
-    h2 {
-      font-weight: 600;
-      font-size: 14px;
-      grid-row: label-row;
-    }
+      #tourTypeMenu {
+        grid-row: 4 / 5;
+        grid-column: 1;
+        align-self: start;
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+      }
 
-    h2#tourType {
-      grid-column: 1;
-      grid-row: 2;
-    }
+      h2 {
+        font-weight: 600;
+        font-size: 14px;
+        grid-row: label-row;
+      }
 
-    h2#dateAndTime {
-      grid-column: 2;
-      grid-row: 2;
-    }
+      h2#tourType {
+        grid-column: 1;
+        grid-row: 2;
+      }
 
-    h2#yourInformation {
-      grid-column: 3;
-      grid-row: 2;
-    }
+      h2#dateAndTime {
+        grid-column: 2;
+        grid-row: 2;
+      }
 
-    #datePicker {
-      display: flex;
-    }
+      h2#yourInformation {
+        grid-column: 3;
+        grid-row: 2;
+      }
 
-    #dateAndTimeMenu {
-      grid-row: 4 / 5;
-      grid-column: 2;
-      align-self: start;
-      display: flex;
-      flex-direction: column;
-    }
+      #datePicker {
+        display: flex;
+      }
 
-    #yourInformationMenu {
-      grid-row: 4 / 5;
-      grid-column: 3;
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    }
+      #dateAndTimeMenu {
+        grid-row: 4 / 5;
+        grid-column: 2;
+        align-self: start;
+        display: flex;
+        flex-direction: column;
+      }
 
-    #yourInformationMenu input {
-      width: 100%;
-      height: 49px;
-      border: 1px solid #83818e;
-      padding: 13px 11px 14px 11px;
-      font-family: "Poppins";
-      font-style: normal;
-      font-weight: 400;
-      font-size: 14px;
-      color: #202020;
-    }
+      #yourInformationMenu {
+        grid-row: 4 / 5;
+        grid-column: 3;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
 
-    #yourInformationMenu input::placeholder {
-      color: #202020;
-    }
+      #yourInformationMenu input {
+        width: 100%;
+        height: 49px;
+        border: 1px solid #83818e;
+        padding: 13px 11px 14px 11px;
+      }
 
-    .unitLayoutChoices {
-      grid-row: 5 / 6;
-      grid-column: 3;
-      align-self: start;
-      display: flex;
-      flex-direction: column;
-    }
+      .unitLayoutChoices {
+        grid-row: 5 / 6;
+        grid-column: 3;
+        align-self: start;
+        display: flex;
+        flex-direction: column;
+      }
 
-    .unitLayoutChoice {
-      margin-bottom: 12px;
-    }
+      .unitLayoutChoice {
+        margin-bottom: 12px;
+      }
 
-    h2.unitLayoutChoice {
-      margin-bottom: 7px;
-    }
+      h2.unitLayoutChoice {
+        margin-bottom: 7px;
+      }
 
-    .unitLayoutOptions {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-    }
+      .unitLayoutOptions {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
 
-    hr {
-      grid-row: 6;
-      grid-column: 1 / 5;
-      /* remove side margins because of this
+      hr {
+        grid-row: 6;
+        grid-column: 1 / 5;
+        /* remove side margins because of this
        * (https://stackoverflow.com/questions/34365271/hr-inside-container-with-display-flex-become-corrupted)
        * and top/bottom margins to position the line exactly at the gridline
        */
-      margin: 0;
-    }
-
-    p {
-      font-weight: 400;
-      font-size: 12px;
-      grid-row: 7;
-      grid-column: 1 / 3;
-      align-self: start;
-      margin: 0;
-      padding-top: 32px;
-    }
-
-    #schedule {
-      width: 145px;
-      height: 50px;
-      grid-row: 7;
-      grid-column: 3;
-      justify-self: end;
-      align-self: start;
-      margin-top: 18px;
-    }
-
-    #confirmationMessage {
-      grid-row: 3;
-      width: 625px;
-    }
-
-    #confirmationMessage > p {
-      font-size: 18px;
-    }
-
-    /* Loading styles: pulsing gray overlay on all the form elements */
-
-    @keyframes spin {
-      0% {
-        transform: none;
-      }
-      50% {
-        transform: rotateZ(180deg);
-      }
-      100% {
-        transform: rotateZ(360deg);
+        margin: 0;
       }
-    }
-
-    svg#loadingIcon {
-      animation: spin 2s infinite linear;
-    }
-
-    .tour-scheduler.loading #scheduleATour {
-      display: flex;
-      gap: 10px;
-    }
 
-    @keyframes loadingPulse {
-      0% {
-        background-color: #e7e7e7;
+      p {
+        font-weight: 400;
+        font-size: 12px;
+        grid-row: 7;
+        grid-column: 1 / 3;
+        align-self: start;
+        margin: 0;
+        padding-top: 32px;
       }
-      50% {
-        background-color: white;
-      }
-      100% {
-        background-color: #e7e7e7;
-      }
-    }
-
-    tour-type-option,
-    date-picker,
-    #yourInformationMenu .inputContainer {
-      position: relative;
-    }
 
-    .tour-scheduler.loading
-      :is(tour-type-option, date-picker, #yourInformationMenu
-        .inputContainer)::after {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 100%;
-      z-index: 1;
-      animation: loadingPulse 2s infinite;
-    }
-
-    .tour-scheduler.loading tour-type-option::after {
-      border-radius: 10px;
-      width: 200px;
-    }
-
-    .tour-scheduler.loading date-picker::after {
-      border-radius: 10px;
-      width: 205px;
-    }
-
-    .tour-scheduler.loading #yourInformationMenu .inputContainer input {
-      visibility: hidden;
-    }
-
-    .tour-scheduler.loading time-picker {
-      display: none;
-    }
-
-    #namesWrapper {
-      display: flex;
-      justify-content: space-between;
-    }
+      #schedule {
+        width: 145px;
+        height: 50px;
+        grid-row: 7;
+        grid-column: 3;
+        justify-self: end;
+        align-self: start;
+        margin-top: 18px;
+      }
 
-    .nameContainer {
-      width: 48%;
-    }
+      #confirmationMessage {
+        grid-row: 3;
+        width: 625px;
+      }
 
-    .nameInput {
-      width: 100%;
-    }
+      #confirmationMessage > p {
+        font-size: 18px;
+      }
 
-    @media (max-width: 767px) {
-      /* TODO: separate styles into general, desktop-specific, and mobile-specific.
-      basically everything I have "unset" or "initial" on should become desktop-specific. the grid layout is only for desktop.
-      */
-      .tour-scheduler {
-        position: fixed;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        top: initial;
-        height: 93vh;
-        width: 100vw;
-        background: #ffffff;
-        transform: none;
-        box-shadow: none;
-        border-radius: 0;
-        padding: 25px 20px 0 22px;
-        display: flex;
-        flex-direction: column;
+      /* Loading styles: pulsing gray overlay on all the form elements */
+
+      @keyframes spin {
+        0% {
+          transform: none;
+        }
+        50% {
+          transform: rotateZ(180deg);
+        }
+        100% {
+          transform: rotateZ(360deg);
+        }
       }
 
-      #topControls {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+      svg#loadingIcon {
+        animation: spin 2s infinite linear;
       }
 
-      .tour-scheduler > :is(h1, h2) {
-        align-self: unset;
+      .tour-scheduler.loading #scheduleATour {
+        display: flex;
+        gap: 10px;
       }
 
-      /* TODO: this and :disabled is duplicated from Schedule button. make a class,
-      or better a component, for the button styles
-      */
-      button#next {
-        height: 50px;
-        /* width: 74px; */
-        padding: 13px 22px 14px 22px;
-        align-self: flex-start;
-        background: #202020;
-        border: 1px solid #ffffff;
-        border-radius: 10px;
-        font-family: "Poppins";
-        font-weight: 700;
-        font-size: 14px;
-        color: #ffffff;
-        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
-        margin-top: 22px;
+      @keyframes loadingPulse {
+        0% {
+          background-color: #e7e7e7;
+        }
+        50% {
+          background-color: white;
+        }
+        100% {
+          background-color: #e7e7e7;
+        }
       }
 
-      button#next:disabled {
-        background: #e7e7e7;
-        box-shadow: none;
+      tour-type-option,
+      date-picker,
+      #yourInformationMenu .inputContainer {
+        position: relative;
       }
 
-      h1#scheduleATour {
-        grid-row: unset;
-        grid-column: unset;
-        align-self: unset;
+      .tour-scheduler.loading
+        :is(tour-type-option, date-picker, #yourInformationMenu
+          .inputContainer)::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        z-index: 1;
+        animation: loadingPulse 2s infinite;
       }
 
-      button#closeButton {
-        grid-row: unset;
-        grid-column: unset;
-        align-self: unset;
-        justify-self: unset;
+      .tour-scheduler.loading tour-type-option::after {
+        border-radius: 10px;
+        width: 200px;
       }
 
-      h2 {
-        grid-row: unset;
-        margin-top: 37px;
-        margin-bottom: 25px;
+      .tour-scheduler.loading date-picker::after {
+        border-radius: 10px;
+        width: 205px;
       }
 
-      #tourTypeMenu {
-        display: flex;
-        flex-direction: column;
-        gap: 15px;
-        margin-bottom: 36px;
+      .tour-scheduler.loading #yourInformationMenu .inputContainer input {
+        visibility: hidden;
       }
 
-      h2#tourType {
-        grid-column: unset;
-        grid-row: unset;
+      .tour-scheduler.loading time-picker {
+        display: none;
       }
 
-      #datePicker {
+      #namesWrapper {
         display: flex;
-        flex-direction: column;
-        gap: 18px;
+        justify-content: space-between;
       }
 
-      time-picker {
-        /* so the Next button doesn't jump when the date is selected and the time slots appear */
-        height: 93px;
+      .nameContainer {
+        width: 48%;
       }
 
-      #dateAndTimeMenu {
-        grid-row: unset;
-        grid-column: unset;
-        align-self: unset;
-        display: unset;
-        flex-direction: unset;
+      .nameInput {
+        width: 100%;
       }
 
-      #confirmationMessage {
-        grid-row: unset;
-        width: 90%;
-        margin-top: 37px;
+      @media (max-width: 767px) {
+        /* TODO: separate styles into general, desktop-specific, and mobile-specific.
+      basically everything I have "unset" or "initial" on should become desktop-specific. the grid layout is only for desktop.
+      */
+        .tour-scheduler {
+          position: fixed;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          top: initial;
+          height: 93vh;
+          width: 100vw;
+          background: #ffffff;
+          transform: none;
+          box-shadow: none;
+          border-radius: 0;
+          padding: 25px 20px 0 22px;
+          display: flex;
+          flex-direction: column;
+        }
+
+        #topControls {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+
+        .tour-scheduler > :is(h1, h2) {
+          align-self: unset;
+        }
+
+        /* TODO: this and :disabled is duplicated from Schedule button. make a class,
+      or better a component, for the button styles
+      */
+        button#next {
+          height: 50px;
+          /* width: 74px; */
+          padding: 13px 22px 14px 22px;
+          align-self: flex-start;
+          background: #202020;
+          border: 1px solid #ffffff;
+          border-radius: 10px;
+          font-family: "Poppins";
+          font-weight: 700;
+          font-size: 14px;
+          color: #ffffff;
+          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+          margin-top: 22px;
+        }
+
+        button#next:disabled {
+          background: #e7e7e7;
+          box-shadow: none;
+        }
+
+        h1#scheduleATour {
+          grid-row: unset;
+          grid-column: unset;
+          align-self: unset;
+        }
+
+        button#closeButton {
+          grid-row: unset;
+          grid-column: unset;
+          align-self: unset;
+          justify-self: unset;
+        }
+
+        h2 {
+          grid-row: unset;
+          margin-top: 37px;
+          margin-bottom: 25px;
+        }
+
+        #tourTypeMenu {
+          display: flex;
+          flex-direction: column;
+          gap: 15px;
+          margin-bottom: 36px;
+        }
+
+        h2#tourType {
+          grid-column: unset;
+          grid-row: unset;
+        }
+
+        #datePicker {
+          display: flex;
+          flex-direction: column;
+          gap: 18px;
+        }
+
+        time-picker {
+          /* so the Next button doesn't jump when the date is selected and the time slots appear */
+          height: 93px;
+        }
+
+        #dateAndTimeMenu {
+          grid-row: unset;
+          grid-column: unset;
+          align-self: unset;
+          display: unset;
+          flex-direction: unset;
+        }
+
+        #confirmationMessage {
+          grid-row: unset;
+          width: 90%;
+          margin-top: 37px;
+        }
       }
-    }
-  `;
+    `,
+    InputStyles,
+  ];
 
   tourTypeMenu(): TemplateResult {
     return html`<h2 id="tourType">Tour Type</h2>
@@ -1019,7 +1015,10 @@ export class TourScheduler extends LitElement {
         <div id="namesWrapper">
           <div class="nameContainer" id="firstName">
             <input
-              class="nameInput"
+              class=${classMap({
+                ["webchat-input"]: true,
+                ["nameInput"]: true,
+              })}
               type="text"
               placeholder="First name"
               name="firstName"
@@ -1029,7 +1028,10 @@ export class TourScheduler extends LitElement {
           </div>
           <div class="nameContainer" id="lastName">
             <input
-              class="nameInput"
+              class=${classMap({
+                ["webchat-input"]: true,
+                ["nameInput"]: true,
+              })}
               type="text"
               placeholder="Last name"
               name="lastName"
@@ -1041,6 +1043,7 @@ export class TourScheduler extends LitElement {
 
         <div class="inputContainer" id="email">
           <input
+            class="webchat-input"
             type="email"
             inputmode="email"
             placeholder="Email"
@@ -1052,6 +1055,7 @@ export class TourScheduler extends LitElement {
         </div>
         <div class="inputContainer" id="phone">
           <input
+            class="webchat-input"
             type="tel"
             inputmode="tel"
             placeholder="Phone"