@meetelise/chat 1.29.0 → 1.30.1

package/src/WebComponent/chat-additional-actions.ts

@@ -0,0 +1,135 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { BuildingWebchatView } from "../fetchBuildingWebchatView";
+import {
+  shouldUsePrimaryColorForChatFooter,
+  hexToAlmostWhite,
+  defaultPrimaryColor,
+} from "../themes";
+
+@customElement("chat-additional-actions")
+export class ChatAdditionalActions extends LitElement {
+  static styles = css`
+    .hideTab {
+      display: none;
+    }
+    .showTab {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 32px;
+    }
+  `;
+
+  @property({ type: String })
+  id = "";
+
+  @property({ type: Boolean })
+  showChatAdditionalActions = false;
+
+  @property({ type: Object })
+  buildingWebchatView: BuildingWebchatView | null = null;
+
+  @property({ type: String })
+  primaryColor: string | null = null;
+
+  @property({ type: String })
+  backgroundColor: string | null = null;
+
+  @property({ type: Object })
+  enabledChatWidgets: {
+    callDesktop: boolean;
+    chatDesktop: boolean;
+    emailDesktop: boolean;
+    textDesktop: boolean;
+    sstDesktop: boolean;
+  } = {
+    callDesktop: false,
+    chatDesktop: false,
+    emailDesktop: false,
+    textDesktop: false,
+    sstDesktop: false,
+  };
+
+  @property({ attribute: true })
+  onClickMinimize: () => void = () => {
+    return;
+  };
+
+  @property({ attribute: true })
+  onClickEmailOption: (e: MouseEvent) => void = () => {
+    return;
+  };
+
+  @property({ attribute: true })
+  onClickPhoneOption: (e: MouseEvent) => void = () => {
+    return;
+  };
+
+  @property({ attribute: true })
+  onClickSSTOption: (e: MouseEvent) => void = () => {
+    return;
+  };
+
+  @property({ attribute: true })
+  onClose: (e: MouseEvent) => void = () => {
+    return;
+  };
+
+  render(): TemplateResult {
+    const primaryColorValue = this.primaryColor || defaultPrimaryColor;
+    const backgroundColorValue = this.backgroundColor || "#ffffff";
+
+    const triangleDivColor =
+      this.buildingWebchatView &&
+      shouldUsePrimaryColorForChatFooter(
+        this.buildingWebchatView.orgId,
+        this.buildingWebchatView.id
+      ) &&
+      primaryColorValue !== defaultPrimaryColor
+        ? hexToAlmostWhite(primaryColorValue, 0.6)
+        : "black";
+
+    return html`
+      <style>
+        #${this.id}::after {
+          border-right-color: ${triangleDivColor} !important;
+        }
+      </style>
+      <div
+        id=${this.id}
+        class=${classMap({
+          ["showTab"]: this.showChatAdditionalActions,
+          ["hideTab"]: !this.showChatAdditionalActions,
+        })}
+      >
+        <mobile-launcher
+          .onClickMinimize=${this.onClickMinimize}
+          .onClickEmailOption=${this.onClickEmailOption}
+          .onClickPhoneOption=${this.onClickPhoneOption}
+          .onClickSSTOption=${this.onClickSSTOption}
+          .primaryColor=${primaryColorValue}
+          .backgroundColor=${backgroundColorValue}
+          .hideChat=${true}
+          .hasCallUsEnabled=${this.enabledChatWidgets.callDesktop}
+          .hasChatEnabled=${this.enabledChatWidgets.chatDesktop}
+          .hasEmailEnabled=${this.enabledChatWidgets.emailDesktop}
+          .hasTextUsEnabled=${this.enabledChatWidgets.textDesktop}
+          .hasSSTEnabled=${this.enabledChatWidgets.sstDesktop}
+        ></mobile-launcher>
+        <minimize-expand-button
+          .primaryColor=${primaryColorValue}
+          .backgroundColor=${backgroundColorValue}
+          .onClick=${this.onClose}
+        ></minimize-expand-button>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "chat-additional-actions": ChatAdditionalActions;
+  }
+}

package/src/WebComponent/health-chat.ts

@@ -0,0 +1,270 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { createRef, Ref } from "lit/directives/ref.js";
+import { Launcher } from "./launcher/Launcher";
+import "./Scheduler/tour-scheduler";
+import { installLauncher } from "./launcher/Launcher";
+
+import "./MEChat.css";
+import MyPubnub from "../MyPubnub";
+
+import "./actions/minimize-expand-button";
+import "./launcher/mobile-launcher";
+import "./pubnub-chat";
+import {
+  clearChatStorageKey,
+  createChatStorageKey,
+  getChatStorageKey,
+  isChatKeyValid,
+} from "../handleChatId";
+import { isMobile } from "../utils";
+import "./simple-launcher/simple-launcher";
+import { WidgetType } from "../main/MEChat";
+
+@customElement("health-chat")
+export class HealthChat extends LitElement {
+  static styles = css`
+    :host {
+      all: initial;
+    }
+
+    #__talkjs_launcher:not(.shouldBeVisible) {
+      display: none;
+    }
+
+    .launcherContainer.launcher__mobile {
+      width: 100%;
+      height: 100px;
+    }
+
+    #typeMobile-bttn {
+      position: fixed;
+      right: 24px;
+      bottom: 24px;
+      width: 80px;
+      height: 80px;
+
+      border: 2px solid #f3f6fc;
+      border-radius: 1000px;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-right: 40px;
+    }
+    #typeMobile-bttn:hover > #typeMobile-inner {
+      background: #eaecf4;
+      cursor: pointer;
+    }
+    #typeMobile-bttn > #typeMobile-inner {
+      width: 72px;
+      height: 72px;
+
+      background: #ffffff;
+      border: 2px solid #f3f6fc;
+      border-radius: 1000px;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 4px;
+    }
+    #typeMobile-txt {
+      font-family: Poppins, "Open Sans", "Helvetica", sans-serif;
+      box-sizing: border-box;
+      font-weight: 300;
+      line-height: 150%;
+      font-size: 16px;
+    }
+  `;
+
+  @property({ type: String })
+  private healthcareId = "";
+
+  @property({ type: Number })
+  private right = 0;
+
+  @property({ type: Number })
+  private bottom = 0;
+
+  @property({ type: Number })
+  private top = 0;
+
+  @property({ type: Number })
+  private left = 0;
+
+  @state()
+  private launcher: HTMLElement | null = null;
+
+  @state()
+  private currentLeadSource: string | null = null;
+
+  @state()
+  private displayPubnubChat = false;
+
+  @state()
+  private myPubnub: MyPubnub | null = null;
+
+  @state()
+  private requiresConsent = false;
+
+  @state()
+  private privacyPolicyUrl = "http://bit.ly/me_privacy_policy";
+
+  @state()
+  private isLoading = true;
+
+  launcherRef: Ref<Launcher> = createRef();
+
+  firstUpdated = async (): Promise<void> => {
+    const isInMaintenanceMode = false; // TODO: check
+    if (isInMaintenanceMode) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        "MeetElise Chat is in maintenance mode. Chat icon will not appear."
+      );
+      return;
+    }
+    await this.initializeChatVariables();
+  };
+
+  private initializeChatVariables = async (): Promise<void> => {
+    this.isLoading = true;
+
+    // important to distinguish between a user who has never opened the chat and a user who has opened the chat but closed it
+    const currentChatStorageKey = getChatStorageKey(this.healthcareId);
+    const updatedChatStorageKey = isChatKeyValid(
+      this.healthcareId,
+      currentChatStorageKey
+    )
+      ? currentChatStorageKey
+      : createChatStorageKey(this.healthcareId, false);
+
+    if (!updatedChatStorageKey.leadId) {
+      throw new Error("Lead ID is null");
+    }
+
+    this.myPubnub = new MyPubnub(
+      this.healthcareId,
+      null,
+      "",
+      this.currentLeadSource,
+      updatedChatStorageKey.leadId,
+      null,
+      WidgetType.Healthcare
+    );
+
+    if (updatedChatStorageKey.initiatedChat) {
+      await this.myPubnub.initializePubnub(currentChatStorageKey);
+    }
+
+    if (!isMobile()) {
+      this.displayPubnubChat = true;
+    }
+
+    this.attachOnClickToLauncher();
+
+    this.isLoading = false;
+  };
+
+  public async restartConversation(): Promise<void> {
+    this.myPubnub?.handleDisconnect();
+    clearChatStorageKey(this.healthcareId);
+    this.myPubnub = null;
+    this.displayPubnubChat = false;
+    await this.initializeChatVariables();
+  }
+
+  /** Show the chat button on the screen if it was previously hidden. */
+  show(): void {
+    if (!this.launcher) {
+      return;
+    }
+    this.launcher.style.display = "";
+  }
+
+  /** Hide the chat button from the screen (but don't remove from the DOM). */
+  hide(): void {
+    if (!this.launcher) {
+      return;
+    }
+    this.launcher.style.display = "none";
+  }
+
+  disconnectedCallback(): void {
+    this.myPubnub?.handleDisconnect();
+    super.disconnectedCallback();
+  }
+
+  private attachOnClickToLauncher = () => {
+    const launcher = this.launcherRef.value;
+    if (!launcher) {
+      return;
+    }
+    launcher.onChatTapped = async () => {
+      this.displayPubnubChat = true;
+    };
+  };
+
+  render(): TemplateResult {
+    installLauncher();
+
+    if (this.isLoading) return html``;
+    return html`
+   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+      <div id="aria-describe-info" style="display: none;">
+          EliseAI widget that allows you to chat with a virtual assistant, book
+          a tour, contact the leasing office, and more.
+      </div>
+        ${
+          this.displayPubnubChat
+            ? html`
+                <pubnub-chat
+                  id="pubnub-chat"
+                  .widgetType=${WidgetType.Healthcare}
+                  .channel=${this.myPubnub?.channel}
+                  .myPubnub=${this.myPubnub}
+                  .buildingSlug=${this.healthcareId}
+                  .onClickExit=${() => {
+                    this.displayPubnubChat = false;
+                  }}
+                  .requiresConsent=${this.requiresConsent}
+                  .privacyPolicyUrl=${this.privacyPolicyUrl}
+                  .top=${this.top}
+                  .bottom=${this.bottom}
+                  .left=${this.left}
+                  .right=${this.right}
+                ></pubnub-chat>
+              `
+            : html``
+        }
+        <simple-launcher
+          id="healthcare-launcher"
+          .top=${this.top}
+          .bottom=${this.bottom}
+          .left=${this.left}
+          .right=${this.right}
+          .isChatOpen=${this.displayPubnubChat}
+          .onClickCloseChat=${() => {
+            this.displayPubnubChat = false;
+          }}
+          .onClickOpenChat=${() => {
+            this.displayPubnubChat = true;
+          }}
+          
+        ></simple-launcher>
+
+      </meta>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "health-chat": HealthChat;
+  }
+
+  interface Window {
+    RCTPCampaign?: { CampaignDetails: { Source: string } };
+  }
+}

package/src/WebComponent/healthchat-styles.ts

@@ -0,0 +1,119 @@
+import { css } from "lit";
+
+export const healthChatStyles = css`
+  #healthchat-container {
+    position: fixed;
+
+    z-index: 100001;
+    display: flex;
+    align-items: center;
+
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    box-shadow: -10px 60px 60px 0px #bfbfbf4d;
+
+    box-shadow: 0px 1px 24px 0px #0000001a;
+
+    font-family: Poppins, "Open Sans", "Helvetica", sans-serif;
+  }
+  .healthchat-container__desktop {
+    width: 300px;
+    height: 420px;
+    border-radius: 10px;
+  }
+
+  #healthchat-header {
+    height: 60px;
+    width: 100%;
+    background: white;
+    overflow: hidden;
+
+    box-sizing: border-box;
+
+    display: flex;
+    align-items: center;
+    padding: 24px 16px;
+    justify-content: space-between;
+  }
+
+  #healthchat-header-subtext {
+    font-family: Helvetica;
+    font-size: 8px;
+    font-weight: 300;
+    line-height: 11px;
+    letter-spacing: 0em;
+    text-align: left;
+    color: #737373;
+  }
+
+  .healthcare-conversation-body-backdrop {
+    background: #f1f2f4;
+  }
+
+  @media screen and (max-width: 767px) {
+    #conversation-body {
+      background: #efefef;
+      backdrop-filter: none;
+    }
+  }
+
+  .healthcare-disclaimer-inner {
+    width: 190px;
+    margin: 0 auto;
+  }
+  .healthcare-disclaimer-message {
+    font-size: 10px;
+    color: #737373;
+    line-height: 12px;
+    font-weight: 400;
+    text-align: center;
+  }
+  .healthcare-disclaimer-inner > a {
+    color: #737373;
+  }
+
+  #healthcare-footer {
+    min-height: 60px;
+    width: 100%;
+    background: white;
+    z-index: 100001;
+  }
+  #healthcare-inner-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 16px;
+    gap: 0px;
+  }
+  #healthcare-inner-footer > #message-input {
+    width: 100%;
+    max-height: 100px;
+    overflowy: auto;
+
+    font-family: inherit;
+    box-sizing: border-box;
+    font-weight: light;
+    border: none;
+    color: black;
+    background: none;
+
+    padding-right: 6px; /* width of the scrollbar */
+    box-sizing: border-box;
+    z-index: 1000000000000000000000000001;
+  }
+  #healthcare-inner-footer > #message-input:focus {
+    outline: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+  #healthcare-send-message-bttn {
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+  .health-bttn-allow-access {
+    padding-right: 28px;
+  }
+`;

package/src/WebComponent/icons/ApplyOutlineIcon.ts

@@ -0,0 +1,22 @@
+import { svg, SVGTemplateResult } from "lit";
+
+export const ApplyOutlineIcon = (
+  color = "white"
+): SVGTemplateResult => svg`<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_18382_27345)">
+<g clip-path="url(#clip1_18382_27345)">
+<path d="M9.91666 0.625V3.45833C9.91666 3.6462 9.99128 3.82636 10.1241 3.9592C10.257 4.09204 10.4371 4.16667 10.625 4.16667H13.4583" stroke="${color}" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.0417 13.375H4.95832C4.5826 13.375 4.22227 13.2257 3.95659 12.9601C3.69091 12.6944 3.54166 12.3341 3.54166 11.9583V2.04167C3.54166 1.66594 3.69091 1.30561 3.95659 1.03993C4.22227 0.774255 4.5826 0.625 4.95832 0.625H9.91666L13.4583 4.16667V11.9583C13.4583 12.3341 13.3091 12.6944 13.0434 12.9601C12.7777 13.2257 12.4174 13.375 12.0417 13.375Z" stroke="${color}" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.375 9.125L7.79167 10.5417L10.625 7.70833" stroke="${color}" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_18382_27345">
+<rect width="16" height="14" fill="white"/>
+</clipPath>
+<clipPath id="clip1_18382_27345">
+<rect width="17" height="17" fill="white" transform="translate(0 -1.5)"/>
+</clipPath>
+</defs>
+</svg>
+`;

package/src/WebComponent/icons/BookTourOutlineIcon.ts

@@ -0,0 +1,13 @@
+import { svg, SVGTemplateResult } from "lit";
+
+export const BookTourOutlineIcon = (
+  color = "black"
+): SVGTemplateResult => svg`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 16 18" fill="none">
+<path d="M15.6825 6.11855H0.00653076C0.0588276 4.00052 1.79117 2.30087 3.92226 2.30087H4.41255V3.6083C4.41255 3.88285 4.63481 4.09858 4.90283 4.09858C5.17085 4.09858 5.39311 3.88285 5.39311 3.6083V2.30087H10.2959V3.6083C10.2959 3.88285 10.5182 4.09858 10.7862 4.09858C11.0542 4.09858 11.2765 3.88285 11.2765 3.6083V2.30087H11.7668C13.8979 2.30087 15.6302 4.00052 15.6825 6.11855Z" fill="${color}"/>
+<path d="M15.0641 7.39731V14.0677C15.0641 15.8922 13.5861 17.365 11.7668 17.365H3.92227C2.10298 17.365 0.625 15.8922 0.625 14.0677V7.39731H15.0641Z" fill="transparent" stroke="${color}" stroke-width="1.25"/>
+<path d="M4.90283 1V2.30742" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.7863 1V2.30742" stroke="${color}" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M0 6.11862H0.00653352C-3.5908e-06 6.15131 0 6.19053 0 6.22322V6.11862Z" fill="white"/>
+<path d="M15.689 6.11862V6.22322C15.689 6.19053 15.689 6.15131 15.6825 6.11862H15.689Z" fill="white"/>
+<path d="M4.74594 11.9562L6.56326 13.7735C6.8182 14.0285 7.23004 14.0285 7.48499 13.7735L10.9366 10.3219" stroke="${color}" stroke-miterlimit="10" stroke-linecap="round"/>
+</svg>`;

package/src/WebComponent/icons/CalculatorOutlineIcon.ts

@@ -0,0 +1,22 @@
+import { svg, SVGTemplateResult } from "lit";
+
+export const CalculatorOutlineIcon = (
+  color = "white"
+): SVGTemplateResult => svg`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame" clip-path="url(#clip0_14068_170001)">
+<path id="Vector" d="M3.33301 4.16667C3.33301 3.72464 3.5086 3.30072 3.82116 2.98816C4.13372 2.67559 4.55765 2.5 4.99967 2.5H14.9997C15.4417 2.5 15.8656 2.67559 16.1782 2.98816C16.4907 3.30072 16.6663 3.72464 16.6663 4.16667V15.8333C16.6663 16.2754 16.4907 16.6993 16.1782 17.0118C15.8656 17.3244 15.4417 17.5 14.9997 17.5H4.99967C4.55765 17.5 4.13372 17.3244 3.82116 17.0118C3.5086 16.6993 3.33301 16.2754 3.33301 15.8333V4.16667Z" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M6.66699 6.66634C6.66699 6.44533 6.75479 6.23337 6.91107 6.07709C7.06735 5.92081 7.27931 5.83301 7.50033 5.83301H12.5003C12.7213 5.83301 12.9333 5.92081 13.0896 6.07709C13.2459 6.23337 13.3337 6.44533 13.3337 6.66634V7.49967C13.3337 7.72069 13.2459 7.93265 13.0896 8.08893C12.9333 8.24521 12.7213 8.33301 12.5003 8.33301H7.50033C7.27931 8.33301 7.06735 8.24521 6.91107 8.08893C6.75479 7.93265 6.66699 7.72069 6.66699 7.49967V6.66634Z" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M6.66699 11.667V11.6753" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M10 11.667V11.6753" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_5" d="M13.333 11.667V11.6753" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_6" d="M6.66699 14.167V14.1753" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_7" d="M10 14.167V14.1753" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_8" d="M13.333 14.167V14.1753" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_14068_170001">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+`;

package/src/WebComponent/icons/ChatOutlineIcon.ts

@@ -0,0 +1,10 @@
+import { svg, SVGTemplateResult } from "lit";
+
+export const ChatOutlineIcon = (color = "white"): SVGTemplateResult => svg`
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M6.64026 0.25H8.8598C10.0157 0.249995 10.9219 0.249992 11.6459 0.318826C12.3838 0.388987 12.988 0.534458 13.5206 0.860861C14.0784 1.20267 14.5474 1.67164 14.8892 2.22942C15.2156 2.76206 15.3611 3.36627 15.4312 4.10419C15.5001 4.82813 15.5001 5.73432 15.5001 6.89025V7.65964C15.5001 8.48243 15.5001 9.12755 15.4645 9.64868C15.4283 10.1789 15.3535 10.6202 15.1845 11.0283C14.7638 12.044 13.9568 12.851 12.9411 13.2717C12.3607 13.5121 11.6997 13.5654 10.7947 13.581C10.4782 13.5865 10.2777 13.5905 10.1248 13.6074C9.98202 13.6232 9.92665 13.6464 9.89426 13.6652C9.86008 13.6851 9.81351 13.7213 9.73267 13.8323C9.64518 13.9523 9.54632 14.1182 9.38955 14.3831L8.99874 15.0433C8.44104 15.9856 7.05899 15.9856 6.5013 15.0433L6.11048 14.3831C5.95371 14.1182 5.85485 13.9523 5.76736 13.8323C5.68652 13.7213 5.63995 13.6851 5.60577 13.6652C5.57338 13.6464 5.51801 13.6232 5.37519 13.6074C5.22235 13.5905 5.02184 13.5865 4.70528 13.581C3.80031 13.5654 3.13933 13.5121 2.559 13.2717C1.54327 12.851 0.736277 12.044 0.315547 11.0283C0.146515 10.6202 0.0717299 10.1789 0.0355529 9.64868C-4.05001e-06 9.12754 -2.20251e-06 8.48243 1.60891e-07 7.65963L7.4949e-08 6.89026C-4.52294e-06 5.73432 -8.08928e-06 4.82814 0.0688256 4.10419C0.138987 3.36627 0.284458 2.76206 0.610861 2.22942C0.95267 1.67164 1.42164 1.20267 1.97942 0.860861C2.51206 0.534458 3.11627 0.388987 3.85419 0.318826C4.57814 0.249992 5.48432 0.249995 6.64026 0.25ZM3.95654 1.39537C3.29779 1.458 2.87862 1.57812 2.54445 1.78291C2.13217 2.03555 1.78555 2.38217 1.53291 2.79445C1.32812 3.12862 1.208 3.54779 1.14537 4.20654C1.08197 4.87334 1.0814 5.7282 1.0814 6.91863V7.63956C1.0814 8.48674 1.08169 9.09505 1.11444 9.57507C1.14686 10.0502 1.20927 10.3601 1.31463 10.6144C1.6256 11.3652 2.22208 11.9617 2.97284 12.2726C3.34458 12.4266 3.81883 12.4842 4.72391 12.4998L4.74685 12.5002C5.03378 12.5051 5.28522 12.5094 5.49421 12.5326C5.71878 12.5574 5.9384 12.6077 6.14946 12.7304C6.35874 12.8522 6.50969 13.0148 6.64128 13.1953C6.76287 13.3622 6.88783 13.5733 7.02936 13.8124L7.4319 14.4925C7.57086 14.7273 7.92917 14.7273 8.06813 14.4925L8.47067 13.8124C8.6122 13.5733 8.73716 13.3622 8.85875 13.1953C8.99034 13.0148 9.14129 12.8522 9.35057 12.7304C9.56163 12.6077 9.78126 12.5574 10.0058 12.5326C10.2148 12.5094 10.4662 12.5051 10.7532 12.5002L10.7761 12.4998C11.6812 12.4842 12.1555 12.4266 12.5272 12.2726C13.278 11.9617 13.8745 11.3652 14.1854 10.6144C14.2908 10.3601 14.3532 10.0502 14.3856 9.57507C14.4184 9.09505 14.4187 8.48674 14.4187 7.63956V6.91863C14.4187 5.7282 14.4181 4.87334 14.3547 4.20654C14.2921 3.54779 14.1719 3.12862 13.9672 2.79445C13.7145 2.38217 13.3679 2.03555 12.9556 1.78291C12.6214 1.57812 12.2023 1.458 11.5435 1.39537C10.8767 1.33197 10.0219 1.3314 8.83143 1.3314H6.66863C5.4782 1.3314 4.62334 1.33197 3.95654 1.39537ZM7.75003 3.85467C8.04865 3.85467 8.29073 4.09674 8.29073 4.39536V10.1628C8.29073 10.4614 8.04865 10.7035 7.75003 10.7035C7.45141 10.7035 7.20933 10.4614 7.20933 10.1628V4.39536C7.20933 4.09674 7.45141 3.85467 7.75003 3.85467ZM4.8663 5.29653C5.16492 5.29653 5.407 5.53861 5.407 5.83723V8.72096C5.407 9.01958 5.16492 9.26166 4.8663 9.26166C4.56768 9.26166 4.3256 9.01958 4.3256 8.72096V5.83723C4.3256 5.53861 4.56768 5.29653 4.8663 5.29653ZM10.6338 5.29653C10.9324 5.29653 11.1745 5.53861 11.1745 5.83723V8.72096C11.1745 9.01958 10.9324 9.26166 10.6338 9.26166C10.3351 9.26166 10.0931 9.01958 10.0931 8.72096V5.83723C10.0931 5.53861 10.3351 5.29653 10.6338 5.29653Z" 
+    fill="${color}"/>
+</svg>`;

package/src/WebComponent/icons/ChevronLeftIcon.ts

@@ -0,0 +1,7 @@
+import { svg, SVGTemplateResult } from "lit";
+
+export const ChevronLeftIcon = (
+  color = "white"
+): SVGTemplateResult => svg`<svg xmlns="http://www.w3.org/2000/svg" width="5" height="8" viewBox="0 0 5 8" fill="none">
+<path d="M3.68188 7L0.681885 4L3.68188 1" stroke="${color}" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;

package/src/WebComponent/icons/ChevronRightIcon.ts

@@ -0,0 +1,7 @@
+import { svg, SVGTemplateResult } from "lit";
+
+export const ChevronRightIcon = (
+  color = "white"
+): SVGTemplateResult => svg`<svg xmlns="http://www.w3.org/2000/svg" width="5" height="8" viewBox="0 0 5 8" fill="none">
+<path d="M1.31812 7L4.31812 4L1.31811 1" stroke="${color}" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;

package/src/WebComponent/icons/ContactResidentIcon.ts

@@ -0,0 +1,9 @@
+import { svg, SVGTemplateResult } from "lit";
+
+export const ContactResidentIcon = (
+  color = "black"
+): SVGTemplateResult => svg`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 6C7.65685 6 9 4.65685 9 3C9 1.34315 7.65685 0 6 0C4.34315 0 3 1.34315 3 3C3 4.65685 4.34315 6 6 6ZM8 3C8 4.10457 7.10457 5 6 5C4.89543 5 4 4.10457 4 3C4 1.89543 4.89543 1 6 1C7.10457 1 8 1.89543 8 3Z" fill="${color}"/>
+<path d="M12 11C12 12 11 12 11 12H1C1 12 0 12 0 11C0 10 1 7 6 7C11 7 12 10 12 11ZM11 10.9965C10.9986 10.7497 10.8462 10.0104 10.1679 9.33211C9.51563 8.67985 8.2891 8 5.99999 8C3.71088 8 2.48435 8.67985 1.8321 9.33211C1.15375 10.0104 1.00142 10.7497 1 10.9965H11Z" fill="${color}"/>
+</svg>
+`;

package/src/WebComponent/icons/DollarOutlineIcon.ts

@@ -0,0 +1,18 @@
+import { svg, SVGTemplateResult } from "lit";
+
+const DollarOutlineIcon = (color = "#347FF7"): SVGTemplateResult => svg`
+  <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="Frame" clip-path="url(#clip0_18718_332018)">
+      <path id="Vector" d="M3 12.5C3 13.6819 3.23279 14.8522 3.68508 15.9442C4.13738 17.0361 4.80031 18.0282 5.63604 18.864C6.47177 19.6997 7.46392 20.3626 8.55585 20.8149C9.64778 21.2672 10.8181 21.5 12 21.5C13.1819 21.5 14.3522 21.2672 15.4442 20.8149C16.5361 20.3626 17.5282 19.6997 18.364 18.864C19.1997 18.0282 19.8626 17.0361 20.3149 15.9442C20.7672 14.8522 21 13.6819 21 12.5C21 11.3181 20.7672 10.1478 20.3149 9.05585C19.8626 7.96392 19.1997 6.97177 18.364 6.13604C17.5282 5.30031 16.5361 4.63738 15.4442 4.18508C14.3522 3.73279 13.1819 3.5 12 3.5C10.8181 3.5 9.64778 3.73279 8.55585 4.18508C7.46392 4.63738 6.47177 5.30031 5.63604 6.13604C4.80031 6.97177 4.13738 7.96392 3.68508 9.05585C3.23279 10.1478 3 11.3181 3 12.5Z" stroke="${color}" stroke-linecap="round" stroke-linejoin="round"/>
+      <path id="Vector_2" d="M14.8 9.50016C14.6188 9.18592 14.3557 8.92686 14.0386 8.75071C13.7215 8.57456 13.3625 8.48795 13 8.50016H11C10.4696 8.50016 9.96086 8.71087 9.58579 9.08594C9.21071 9.46102 9 9.96972 9 10.5002C9 11.0306 9.21071 11.5393 9.58579 11.9144C9.96086 12.2894 10.4696 12.5002 11 12.5002H13C13.5304 12.5002 14.0391 12.7109 14.4142 13.0859C14.7893 13.461 15 13.9697 15 14.5002C15 15.0306 14.7893 15.5393 14.4142 15.9144C14.0391 16.2894 13.5304 16.5002 13 16.5002H11C10.6375 16.5124 10.2785 16.4258 9.96142 16.2496C9.64435 16.0735 9.38115 15.8144 9.2 15.5002" stroke="${color}" stroke-linecap="round" stroke-linejoin="round"/>
+      <path id="Vector_3" d="M12 7.5V17.5" stroke="${color}" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_18718_332018">
+        <rect width="24" height="24" fill="white" transform="translate(0 0.5)"/>
+      </clipPath>
+    </defs>
+  </svg>
+`;
+
+export default DollarOutlineIcon;

package/src/WebComponent/icons/EmailOutlineIcon.ts

@@ -0,0 +1,7 @@
+import { svg, SVGTemplateResult } from "lit";
+
+export const EmailOutlineIcon = (
+  color = "white"
+): SVGTemplateResult => svg`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" viewBox="0 0 16 14" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.46964 0.488343H9.53036C10.898 0.488331 11.9813 0.488321 12.829 0.602304C13.7015 0.719609 14.4077 0.966767 14.9647 1.52369C15.5216 2.08061 15.7687 2.78681 15.886 3.65932C16 4.50711 16 5.59038 16 6.95802V7.04198C16 8.40962 16 9.49289 15.886 10.3407C15.7687 11.2132 15.5216 11.9194 14.9647 12.4763C14.4077 13.0332 13.7015 13.2804 12.829 13.3977C11.9813 13.5117 10.898 13.5117 9.53035 13.5117H6.46965C5.10201 13.5117 4.01875 13.5117 3.17096 13.3977C2.29846 13.2804 1.59227 13.0332 1.03534 12.4763C0.478423 11.9194 0.231266 11.2132 0.113961 10.3407C-2.09587e-05 9.49289 -1.15596e-05 8.40962 2.39342e-07 7.04198V6.95801C-1.15596e-05 5.59037 -2.09587e-05 4.50711 0.113961 3.65932C0.231266 2.78681 0.478423 2.08061 1.03534 1.52369C1.59227 0.966767 2.29846 0.719609 3.17096 0.602304C4.01875 0.488321 5.10201 0.488331 6.46964 0.488343ZM3.3197 1.70863C2.57098 1.8093 2.13962 1.99807 1.82467 2.31302C1.50973 2.62797 1.32095 3.05934 1.22029 3.80806C1.11746 4.57283 1.11628 5.58096 1.11628 7C1.11628 8.41903 1.11746 9.42716 1.22029 10.1919C1.32095 10.9407 1.50973 11.372 1.82467 11.687C2.13962 12.0019 2.57098 12.1907 3.3197 12.2914C4.08447 12.3942 5.0926 12.3954 6.51163 12.3954H9.48837C10.9074 12.3954 11.9155 12.3942 12.6803 12.2914C13.429 12.1907 13.8604 12.0019 14.1753 11.687C14.4903 11.372 14.6791 10.9407 14.7797 10.1919C14.8825 9.42716 14.8837 8.41903 14.8837 7C14.8837 5.58096 14.8825 4.57283 14.7797 3.80806C14.6791 3.05934 14.4903 2.62797 14.1753 2.31302C13.8604 1.99807 13.429 1.8093 12.6803 1.70863C11.9155 1.60581 10.9074 1.60463 9.48837 1.60463H6.51163C5.0926 1.60463 4.08448 1.60581 3.3197 1.70863ZM3.10611 3.66593C3.30345 3.42912 3.65539 3.39713 3.8922 3.59446L5.49882 4.93332C6.19311 5.5119 6.67515 5.9123 7.08211 6.17404C7.47605 6.42741 7.7432 6.51246 8 6.51246C8.2568 6.51246 8.52395 6.42741 8.91789 6.17404C9.32485 5.9123 9.80689 5.5119 10.5012 4.93332L12.1078 3.59446C12.3446 3.39713 12.6966 3.42912 12.8939 3.66593C13.0912 3.90273 13.0592 4.25468 12.8224 4.45202L11.1878 5.81419C10.5282 6.36389 9.99359 6.80943 9.52173 7.11291C9.0302 7.42904 8.5515 7.62875 8 7.62875C7.4485 7.62875 6.9698 7.42904 6.47827 7.11291C6.00641 6.80943 5.47179 6.36389 4.81218 5.81419L3.17757 4.45202C2.94077 4.25468 2.90877 3.90273 3.10611 3.66593Z" fill="${color}"/>
+</svg>`;