@meetelise/chat 1.35.0 → 1.35.1

package/src/WebComponent/Scheduler/tour-type-option.ts

@@ -0,0 +1,112 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { defaultPrimaryColor, defaultBackgroundColor } from "../../themes";
+
+@customElement("tour-type-option")
+export class TourTypeOption extends LitElement {
+  @property({ type: String })
+  heading = "";
+  @property({ type: String })
+  subtitle = "";
+  @property({ type: Boolean })
+  selected = false;
+  @property({ attribute: false })
+  onClick?: () => void;
+
+  @property({ attribute: true })
+  primaryColor: string = defaultPrimaryColor;
+
+  @property({ attribute: true })
+  backgroundColor: string = defaultBackgroundColor;
+
+  @property({ attribute: true })
+  foregroundColorOnPrimaryBackgroundColor = "white";
+
+  @property({ attribute: true })
+  foregroundColorOnSecondaryBackgroundColor = "black";
+
+  static styles = [
+    css`
+      .tour-type-option {
+        height: 90px;
+        width: 100%;
+        background: #e7e7e7;
+        border: 1px solid #ffffff;
+        border-radius: 10px;
+        position: relative;
+        user-select: none;
+        box-sizing: border-box;
+      }
+
+      :host([selected]) .tour-type-option {
+        background: #202020;
+        border: 3px solid #83818e;
+      }
+
+      .content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 15px;
+        width: 100%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      .text {
+        display: flex;
+        flex-direction: column;
+        color: #202020;
+        font-family: "Helvetica Neue", Arial;
+      }
+
+      :host([selected]) .text {
+        color: #ffffff;
+      }
+
+      h1,
+      h2 {
+        font-size: 15px;
+        margin: 0;
+      }
+
+      h1 {
+        font-weight: 600;
+      }
+
+      h2 {
+        font-weight: 400;
+      }
+    `,
+  ];
+
+  render(): TemplateResult {
+    return html`
+      <div
+        class="tour-type-option"
+        tabindex="0"
+        style=${styleMap({
+          background: this.selected ? this.primaryColor : undefined,
+        })}
+      >
+        <div class="content">
+          <slot name="icon"></slot>
+          <div
+            class="text"
+            style=${styleMap({
+              color: this.selected
+                ? this.foregroundColorOnPrimaryBackgroundColor
+                : this.foregroundColorOnSecondaryBackgroundColor,
+            })}
+          >
+            <h1>${this.heading}</h1>
+            <h2>${this.subtitle}</h2>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/WebComponent/Scheduler/tourSchedulerStyles.ts

@@ -0,0 +1,418 @@
+import { css } from "lit";
+
+// the entire tourScheduler needs a complete rework - it's a mess
+export const tourSchedulerStyles = css`
+  * {
+    box-sizing: border-box;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+    padding: 0;
+  }
+
+  .tour-scheduler-full,
+  .tour-scheduler-compact,
+  .tour-scheduler-mobile {
+    background: #ffffff;
+    box-shadow: 0px 16px 18px 10px rgba(21, 21, 21, 0.4);
+    border-radius: 10px;
+    font-family: "Helvetica Neue", Arial;
+    color: #202020;
+
+    max-width: 1000px;
+  }
+  .tour-scheduler-full {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    max-width: 1018px;
+  }
+  .tour-scheduler-compact {
+    position: fixed;
+    left: 5%;
+    top: 50%;
+    transform: translate(0%, -50%);
+    width: 100%;
+    max-width: calc(90% - 340px); /* 340px is width of chat popup */
+  }
+  .tour-scheduler-mobile {
+    position: fixed;
+    left: 6px;
+    right: 0;
+    bottom: 0;
+    top: 6px;
+    height: calc(100% - 12px);
+    width: calc(100% - 12px);
+    box-sizing: border-box;
+
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  #mobile-body-container {
+    flex: 1;
+    box-sizing: border-box;
+    padding: 24px;
+  }
+
+  #mobile-next-bttn {
+    height: 50px;
+    padding: 13px 22px 14px 22px;
+    float: right;
+    background: #202020;
+    border: 1px solid #ffffff;
+    border-radius: 10px;
+    font-family: "Helvetica Neue", Arial;
+    font-weight: 700;
+    font-size: 14px;
+    color: #ffffff;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+    margin-top: 22px;
+    cursor: pointer;
+  }
+  #mobile-next-bttn:disabled {
+    background: #e7e7e7;
+    box-shadow: none;
+  }
+  #schedule-bttn {
+    float: right;
+    margin-top: 4px;
+    margin-bottom: 4px;
+    cursor: pointer;
+  }
+  #top-header {
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 64px;
+
+    box-sizing: border-box;
+    padding-left: 24px;
+    padding-right: 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    border-bottom: 1px solid #e7e7e7;
+  }
+  #tour-header-title {
+    font-size: 14px;
+    font-weight: 600;
+  }
+  #close-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+  }
+  #scheduler-container {
+    padding: 24px;
+    height: 500px;
+    overflow-y: auto;
+    position: relative;
+  }
+
+  #book-tour-journey-items {
+    display: flex;
+    justify-content: space-between;
+    gap: 24px;
+  }
+  .journey-header {
+    font-size: 14px;
+    font-weight: 600;
+    padding-bottom: 12px;
+  }
+
+  #tour-type-menu-outer-container {
+    width: 220px;
+  }
+  #date-and-time-menu-outer-container {
+    width: calc(70% - 220px);
+  }
+  #user-info-and-layout-menu-outer-container {
+    width: 30%;
+  }
+
+  #tour-type-menu {
+    align-self: start;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  @media screen and (max-width: 1200px) {
+    #book-tour-journey-items {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    #tour-type-menu-outer-container {
+      width: 320px;
+      padding-bottom: 24px;
+      border-bottom: 1px solid #e7e7e7;
+    }
+    #date-and-time-menu-outer-container {
+      width: 320px;
+      padding-bottom: 24px;
+      border-bottom: 1px solid #e7e7e7;
+    }
+    #user-info-and-layout-menu-outer-container {
+      width: 320px;
+      padding-bottom: 64px;
+    }
+
+    #datePicker {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+    }
+  }
+
+  /*
+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;
+  }
+
+  h2 {
+    font-weight: 600;
+    font-size: 14px;
+    grid-row: label-row;
+  }
+
+  h2#tourType {
+    grid-column: 1;
+    grid-row: 2;
+  }
+
+  h2#dateAndTime {
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  h2#yourInformation {
+    grid-column: 3;
+    grid-row: 2;
+  }
+
+  #datePicker {
+    display: flex;
+    gap: 8px;
+  }
+
+  #dateAndTimeMenu {
+    grid-row: 4 / 5;
+    grid-column: 2;
+    align-self: start;
+    display: flex;
+    flex-direction: column;
+  }
+
+  #yourInformationMenu {
+    grid-row: 4 / 5;
+    grid-column: 3;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  #yourInformationMenu input {
+    width: 100%;
+    height: 49px;
+  }
+
+  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;
+  }
+
+  #tour-scheduler-footer {
+    height: 100px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top: 1px solid #e7e7e7;
+
+    padding-left: 24px;
+    padding-right: 24px;
+    box-sizing: border-box;
+  }
+
+  .explanation {
+    font-weight: 400;
+    font-size: 14px;
+    padding-right: 24px;
+  }
+  #schedule {
+    width: 145px;
+    height: 50px;
+    justify-self: end;
+  }
+
+  #confirmationMessage {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 24px;
+    box-sizing: border-box;
+    gap: 12px;
+  }
+
+  #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);
+    }
+  }
+
+  svg#loadingIcon {
+    animation: spin 2s infinite linear;
+  }
+
+  .tour-scheduler.loading #scheduleATour {
+    display: flex;
+    gap: 10px;
+  }
+
+  @keyframes loadingPulse {
+    0% {
+      background-color: #e7e7e7;
+    }
+    50% {
+      background-color: white;
+    }
+    100% {
+      background-color: #e7e7e7;
+    }
+  }
+
+  tour-type-option,
+  date-picker,
+  #yourInformationMenu .inputContainer {
+    position: relative;
+  }
+
+  #self-guided-redirect-bttn {
+    height: 50px;
+    width: 240px;
+    background: #d4d4d4;
+    border: 1px solid #ffffff;
+    border-radius: 10px;
+    font-family: "Helvetica Neue", Arial;
+    font-weight: 500;
+    font-size: 14px;
+    color: #000000;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+  }
+
+  .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;
+  }
+
+  .nameContainer {
+    width: 48%;
+  }
+
+  .nameInput {
+    width: 100%;
+  }
+
+  .center-tour-not-avail {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    height: 320px;
+    box-sizing: border-box;
+    text-align: center;
+
+    width: 100%;
+    padding: 24px;
+    max-width: 440px;
+    margin: auto;
+  }
+  .center-tour-not-avail > h1 {
+    font-size: 18px;
+    font-weight: 400;
+    text-align: center;
+    margin: 0;
+  }
+  .center-tour-not-avail > p {
+    font-size: 14px;
+    text-align: left;
+  }
+  .loading-entire-tour-icon {
+    padding: 24px;
+  }
+
+  .reschedule-buttons-wrapper {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+  }
+`;

package/src/WebComponent/actions/InputStyles.ts

@@ -0,0 +1,57 @@
+import { css } from "lit";
+
+export const InputStyles = css`
+  .webchat-input {
+    outline: none;
+
+    color: #202020;
+    font-family: "Helvetica Neue", Arial;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+
+    background: #d9d9d9;
+    border: 1px solid #efefef;
+    border-radius: 100px;
+    padding: 10px 16px;
+
+    font-size: 14px;
+  }
+
+  .webchat-input__error {
+    border-color: #ff0000;
+  }
+
+  .error-message {
+    color: #ff0000;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+    margin-top: 4px;
+  }
+
+  .webchat-font__desktop {
+    font-size: 14px;
+  }
+  .webchat-font__mobile {
+    font-size: 16px;
+  }
+  .webchat-textarea {
+    border-radius: 8px;
+    padding: 8px 16px;
+  }
+
+  .webchat-input:active {
+    border: 1px solid #000000;
+  }
+
+  .webchat-input:focus-within {
+    border: 1px solid #000000;
+  }
+
+  .webchat-input::placeholder {
+    color: rgba(32, 32, 32, 0.5);
+    font-family: "Helvetica Neue", Arial;
+    font-size: 14px;
+  }
+`;

package/src/WebComponent/actions/action-confirm-button.ts

@@ -0,0 +1,125 @@
+import classnames from "classnames";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("action-confirm-button")
+export class ActionConfirmButton extends LitElement {
+  static styles = [
+    css`
+      .action-confirm-button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        background: #000000;
+        border: none;
+
+        border-radius: 20px;
+
+        font-family: "Helvetica Neue", Arial;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 20px;
+
+        color: #ffffff;
+        padding: 5px 15px;
+        cursor: pointer;
+      }
+
+      .action-confirm-button:disabled {
+        background: #e7e7e7;
+        box-shadow: none;
+        cursor: initial;
+      }
+      .action-confirm-button:not(:is(:disabled, .loading)):active {
+        transform: translateY(2px);
+        box-shadow: 0px 0px 0px rgba(36, 53, 141, 0.25);
+      }
+
+      .action-confirm-button:not(:is(:active, :disabled, .loading)):hover {
+        opacity: 0.7;
+      }
+
+      .loading {
+        cursor: initial;
+      }
+
+      .lds-ring {
+        display: inline-block;
+        position: relative;
+        width: 28px;
+        height: 28px;
+      }
+      .lds-ring div {
+        box-sizing: border-box;
+        display: block;
+        position: absolute;
+        width: 28px;
+        height: 28px;
+        border: 8px solid #fff;
+        border-radius: 50%;
+        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+        border-color: #fff transparent transparent transparent;
+      }
+      .lds-ring div:nth-child(1) {
+        animation-delay: -0.45s;
+      }
+      .lds-ring div:nth-child(2) {
+        animation-delay: -0.3s;
+      }
+      .lds-ring div:nth-child(3) {
+        animation-delay: -0.15s;
+      }
+      @keyframes lds-ring {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    `,
+  ];
+  @property()
+  onClick?: () => void;
+  @property()
+  text = "Submit";
+  @property({ attribute: false })
+  isLoading = false;
+  @property({ type: Boolean })
+  disabled = false;
+  @property({ type: String })
+  height = "initial";
+  @property({ type: String })
+  width = "initial";
+
+  focus = (): void => {
+    this.shadowRoot?.querySelector("button")?.focus();
+  };
+
+  render = (): TemplateResult => {
+    return html`<button
+      class=${classnames("action-confirm-button", { loading: this.isLoading })}
+      @click=${!this.isLoading ? this.onClick : null}
+      ?disabled=${this.disabled}
+      style=${`height: ${this.height}; width: ${this.width};`}
+      tabindex="0"
+    >
+      ${!this.isLoading
+        ? this.text
+        : html`<div class="lds-ring">
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+          </div>`}
+    </button>`;
+  };
+}
+
+export const installActionConfirmButton = (): void => {
+  if (!window.customElements.get("action-confirm-button")) {
+    window.customElements.define("action-confirm-button", ActionConfirmButton);
+  }
+};