@meetelise/chat 1.25.0 → 1.25.2

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

@@ -1,112 +0,0 @@
-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

@@ -1,418 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,125 +0,0 @@
-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);
-  }
-};