@meetelise/chat 1.20.32 → 1.20.33

package/src/WebComponent/actions/InputStyles.ts

@@ -2,27 +2,33 @@ import { css } from "lit";
 
 export const InputStyles = css`
   .webchat-input {
-    border: 1px solid #83818e;
     outline: none;
     color: #202020;
     font-weight: 400;
-    font-size: 16px;
-    line-height: 22px;
+    font-size: 14px;
+    line-height: 14px;
     font-family: "Poppins";
-    padding-left: 12px;
-    padding-right: 12px;
+
+    background: #ffffff;
+    border-radius: 20px;
+    border: none;
+    padding: 0px 20px;
+    border: 1px solid #ffffff;
+  }
+  .webchat-textarea {
+    padding: 20px 20px;
   }
 
   .webchat-input:active {
-    border: 1px solid #202020;
+    border: 1px solid #000000;
   }
 
   .webchat-input:focus-within {
-    border: 1px solid #202020;
+    border: 1px solid #000000;
   }
 
   .webchat-input::placeholder {
-    color: #202020;
+    opacity: 0.5;
     font-family: "Poppins";
     font-size: 16px;
   }

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

@@ -13,17 +13,16 @@ export class ActionConfirmButton extends LitElement {
         background: #1e1e1e;
         border: 2px solid #ffffff;
         box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
-        border-radius: 10px;
-        color: #ffffff;
+        border-radius: 20px;
+
         font-family: "Poppins";
         font-style: normal;
-        font-weight: 700;
+        font-weight: 400;
         font-size: 14px;
         line-height: 22px;
-        padding-left: 20px;
-        padding-right: 20px;
-        padding-top: 12px;
-        padding-bottom: 12px;
+
+        color: #ffffff;
+        padding: 5px 15px;
         cursor: pointer;
       }
 

package/src/WebComponent/actions/call-us-window.ts

@@ -1,5 +1,6 @@
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { SimplePhoneIcon } from "../../svgIcons";
 
 import { getOfficeHourText } from "../OfficeHours";
 
@@ -13,22 +14,35 @@ export class CallUsWindow extends LitElement {
       }
 
       .call-us-window__call-us-text {
-        margin-top: 54px;
-        margin-bottom: 28px;
-        font-family: "Poppins";
-        font-size: 18px;
+        font-family: "Helvetica";
+        font-style: normal;
+        font-weight: 700;
+        font-size: 16px;
         line-height: 24px;
+        color: #202020;
       }
 
-      .call-us-window__call-us-text > a {
+      .call-us-window__phone-redirect {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        margin-bottom: 28px;
+        gap: 5px;
+      }
+      .call-us-window__phone-redirect > a {
         color: unset;
-        text-decoration: none;
+        text-decoration: underline;
       }
 
-      .call-us-window__office-hours-header {
-        text-decoration: underline;
-        font-size: 12px;
-        margin-bottom: 10px;
+      .call-us-window__office-hours-header,
+      .call-us-window__day-of-week,
+      .call-us-window__day-of-week-wrapper {
+        font-family: "Helvetica";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        color: #202020;
       }
 
       .call-us-window__day-of-week {
@@ -39,8 +53,7 @@ export class CallUsWindow extends LitElement {
       .call-us-window__day-of-week-wrapper {
         display: flex;
         align-items: center;
-        margin-bottom: 10px;
-        font-size: 12px;
+        margin-bottom: 5px;
       }
 
       .call-us-window__open-times {
@@ -57,7 +70,9 @@ export class CallUsWindow extends LitElement {
   @property({ attribute: false })
   buildingId = 0;
   @property({ attribute: true })
-  chatCallUsHeader = "Call Us";
+  chatCallUsHeader = "";
+  @property({ attribute: true })
+  hasTextUsEnabled = "";
 
   firstUpdated = async (): Promise<void> => {
     if (!this.buildingId) {
@@ -90,15 +105,17 @@ export class CallUsWindow extends LitElement {
   render = (): TemplateResult => {
     return html`
       <details-window
-        height="443px"
+        height=${this.hasTextUsEnabled ? "600px" : "443px"}
         headerText="${this.chatCallUsHeader}"
         .onCloseClick=${this.onCloseClicked}
+        useGradientDesign="true"
       >
         <div class="call-us-window__content-wrapper">
           <div class="call-us-window__call-us-text">
-            Contact our leasing team at <br />${this.getCallLink(
-              this.phoneNumber
-            )}
+            Contact our leasing team
+          </div>
+          <div class="call-us-window__phone-redirect">
+            ${SimplePhoneIcon} ${this.getCallLink(this.phoneNumber)}
           </div>
           <div class="call-us-window__office-hours-wrapper">
             <div class="call-us-window__office-hours-header">Office hours</div>
@@ -122,6 +139,12 @@ export class CallUsWindow extends LitElement {
             `;
           })}
         </div>
+        ${this.hasTextUsEnabled
+          ? html` <text-us-window
+              .buildingId=${this.buildingId}
+              inPopup=${!this.hasTextUsEnabled}
+            ></text-us-window>`
+          : ""}
       </details-window>
     `;
   };

package/src/WebComponent/actions/details-window.ts

@@ -1,5 +1,6 @@
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { isMobile } from "../../utils";
 
@@ -16,13 +17,39 @@ export class DetailsWindow extends LitElement {
       border-radius: 10px 0px 0px 10px;
     }
 
+    .gradient-window-wrapper {
+      background: rgba(0, 0, 0 0.75);
+      border-width: 3px 0px 3px 3px;
+      border-style: solid;
+      border-color: #ffffff;
+      box-shadow: 0px 0px 14px 5px rgba(0, 0, 0, 0.25);
+      border-radius: 10px 0px 0px 10px;
+      padding: 16px;
+      display: block;
+      background: linear-gradient(
+        154.34deg,
+        rgba(255, 255, 255, 1) 0.55%,
+        rgba(0, 0, 0, 1) 160.1%
+      );
+    }
     .details-window-header {
       display: flex;
       justify-content: space-between;
+    }
+    .header-text {
       font-weight: 700;
       font-size: 14px;
       line-height: 22px;
-      margin-bottom: 25px;
+
+      font-family: "Helvetica";
+      font-style: normal;
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 24px;
+
+      color: #202020;
+      margin-top: 20px;
+      margin-bottom: 14px;
     }
 
     @media screen and (max-width: 767px) {
@@ -49,6 +76,9 @@ export class DetailsWindow extends LitElement {
   @state()
   isMobileSized = false;
 
+  @property({ attribute: true })
+  useGradientDesign = false;
+
   async firstUpdated(): Promise<void> {
     // Give the browser a chance to paint
     await new Promise((resolve) => setTimeout(resolve, 0));
@@ -61,14 +91,17 @@ export class DetailsWindow extends LitElement {
   render(): TemplateResult {
     return html`
       <div
-        class="details-window-wrapper"
+        class=${classMap({
+          ["gradient-window-wrapper"]: this.useGradientDesign,
+          ["details-window-wrapper"]: !this.useGradientDesign,
+        })}
         style=${styleMap({
           height: this.height,
           width: this.isMobileSized ? "-webkit-fill-available" : this.width,
         })}
       >
         <div class="details-window-header">
-          <div>${this.headerText}</div>
+          <div class="header-text">${this.headerText}</div>
           ${this.onCloseClick
             ? html`<div @click=${this.onCloseClick}>
                 <svg

package/src/WebComponent/actions/email-us-window.ts

@@ -16,6 +16,13 @@ import axios from "axios";
 export class EmailUsWindow extends LitElement {
   static styles = [
     css`
+      .email-us__name-input,
+      .email-us__contact_input,
+      .email-us_message-input {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
       .email-us__name-input {
         width: 134px;
         height: 49px;
@@ -26,8 +33,8 @@ export class EmailUsWindow extends LitElement {
       }
 
       .email-us__horizontal-spacer {
-        margin-left: 2.5px;
-        margin-right: 2.5px;
+        margin-left: 6px;
+        margin-right: 6px;
       }
 
       .email-us__contact-input {
@@ -40,6 +47,11 @@ export class EmailUsWindow extends LitElement {
         margin-bottom: 15px;
       }
 
+      .action-bttn-container {
+        display: flex;
+        justify-content: flex-end;
+      }
+
       .email-us__message-input {
         resize: none;
         width: -webkit-fill-available;
@@ -47,19 +59,6 @@ export class EmailUsWindow extends LitElement {
         padding: 8px;
       }
 
-      .email-us__legal-terms {
-        color: #202020;
-        font-family: "Poppins";
-        font-style: normal;
-        font-weight: 400;
-        font-size: 12px;
-        line-height: 22px;
-      }
-
-      .email-us__legal-term-action {
-        color: #202020;
-      }
-
       .email-us__submitted-info {
         font-size: 18px;
         line-height: 24px;
@@ -67,16 +66,24 @@ export class EmailUsWindow extends LitElement {
       }
 
       .email-us__error-text {
-        color: #202020;
-        font-family: "Poppins";
-        font-size: 10px;
-        line-height: 22px;
-        margin-top: 8px;
+        margin-top: 4px;
+        font-family: "Helvetica";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 14px;
+
+        color: rgb(235, 64, 52);
+      }
+
+      .email-us__center_icon {
+        display: flex;
+        justify-content: center;
       }
 
       @media screen and (max-width: 767px) {
         .email-us__name-input {
-          width: -webkit-fill-available;
+          width: 50%;
         }
       }
     `,
@@ -257,23 +264,26 @@ export class EmailUsWindow extends LitElement {
     if (this.hasSubmittedForm) {
       return html`
         <details-window
-          headerText="Email us"
+          headerText=""
+          useGradientDesign="true"
           .onCloseClick=${this.onCloseClicked}
         >
           <div class="email-us-wrapper">
             <div class="email-us__vertical-spacer"></div>
-            <svg
-              width="22"
-              height="18"
-              viewBox="0 0 22 18"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M22 17.007C21.9982 17.2696 21.8931 17.521 21.7075 17.7068C21.5219 17.8926 21.2706 17.9979 21.008 18H2.992C2.72881 17.9997 2.4765 17.895 2.29049 17.7088C2.10448 17.5226 2 17.2702 2 17.007V16H20V4.3L12 11.5L2 2.5V1C2 0.734784 2.10536 0.48043 2.29289 0.292893C2.48043 0.105357 2.73478 0 3 0H21C21.2652 0 21.5196 0.105357 21.7071 0.292893C21.8946 0.48043 22 0.734784 22 1V17.007ZM4.434 2L12 8.81L19.566 2H4.434ZM0 12H8V14H0V12ZM0 7H5V9H0V7Z"
-                fill="#202020"
-              />
-            </svg>
+            <div class="email-us__center_icon">
+              <svg
+                width="22"
+                height="18"
+                viewBox="0 0 22 18"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M22 17.007C21.9982 17.2696 21.8931 17.521 21.7075 17.7068C21.5219 17.8926 21.2706 17.9979 21.008 18H2.992C2.72881 17.9997 2.4765 17.895 2.29049 17.7088C2.10448 17.5226 2 17.2702 2 17.007V16H20V4.3L12 11.5L2 2.5V1C2 0.734784 2.10536 0.48043 2.29289 0.292893C2.48043 0.105357 2.73478 0 3 0H21C21.2652 0 21.5196 0.105357 21.7071 0.292893C21.8946 0.48043 22 0.734784 22 1V17.007ZM4.434 2L12 8.81L19.566 2H4.434ZM0 12H8V14H0V12ZM0 7H5V9H0V7Z"
+                  fill="#202020"
+                />
+              </svg>
+            </div>
             <div class="email-us__vertical-spacer"></div>
             <div class="email-us__submitted-info">
               Thank you for your message. A member of our leasing team will
@@ -286,9 +296,10 @@ export class EmailUsWindow extends LitElement {
 
     return html`
       <details-window
-        headerText="Email us"
+        headerText="Email our leasing team"
         .onCloseClick=${this.onCloseClicked}
         height="${this.windowHeight}px"
+        useGradientDesign="true"
       >
         <div class="email-us-wrapper">
           <div class="email-us__name-wrapper">
@@ -366,6 +377,7 @@ export class EmailUsWindow extends LitElement {
             class=${classMap({
               ["email-us__message-input"]: true,
               ["webchat-input"]: true,
+              ["webchat-textarea"]: true,
             })}
             @keyup=${this.onChangeMessage}
           ></textarea>
@@ -373,24 +385,19 @@ export class EmailUsWindow extends LitElement {
             ? html` <div class="email-us__error-text">Include a message</div> `
             : ""}
           <div class="email-us__vertical-spacer"></div>
-          <action-confirm-button
-            .onClick=${this.onClick}
-            .isLoading=${this.isSubmitting}
-            text="Send message"
-          ></action-confirm-button>
+          <div class="action-bttn-container">
+            <action-confirm-button
+              .onClick=${this.onClick}
+              .isLoading=${this.isSubmitting}
+              text="SEND"
+            ></action-confirm-button>
+          </div>
           ${this.hasSubmissionError
             ? html`
                 <div class="email-us__error-text">Error submitting message</div>
               `
             : ""}
           <div class="email-us__vertical-spacer"></div>
-          <div class="email-us__legal-terms">
-            <a
-              class="email-us__legal-term-action"
-              href="${this.privatePolicyUrl}"
-              >Privacy Policy</a
-            >
-          </div>
         </div>
       </details-window>
     `;

package/src/WebComponent/actions/text-us-window.ts

@@ -22,16 +22,32 @@ export class TextUsWindow extends LitElement {
       }
 
       .text-us-window__description {
-        font-size: 18px;
+        font-family: "Helvetica";
+        font-style: normal;
+        font-weight: 700;
+        font-size: 16px;
         line-height: 24px;
+        color: #202020;
+
         margin-top: 32px;
       }
 
+      .text-us-window__input-container {
+        width: -webkit-fill-available;
+        height: 49px;
+        position: relative;
+      }
+
       .text-us-window__phone-input {
         width: -webkit-fill-available;
         height: 49px;
       }
 
+      .text-us-window__submit-text {
+        position: absolute;
+        top: 6px;
+        right: 6px;
+      }
       .text-us-window__vertical-spacer {
         height: 20px;
       }
@@ -59,6 +75,8 @@ export class TextUsWindow extends LitElement {
   buildingSlug = "";
   @property({ attribute: true })
   orgSlug = "";
+  @property({ attribute: true })
+  inPopup = false;
 
   phoneNumberInputRef: Ref<HTMLInputElement> = createRef();
 
@@ -122,84 +140,96 @@ export class TextUsWindow extends LitElement {
     }
   };
 
+  renderTextUs = (): TemplateResult => {
+    return html` <div class="text-us-wrapper">
+      <div class="text-us-window__description">Send us a text</div>
+      <div class="text-us-window__vertical-spacer"></div>
+      <div class="text-us-window__input-container">
+        <input
+          ${ref(this.phoneNumberInputRef)}
+          maxlength="14"
+          type="text"
+          placeholder="Phone number"
+          inputmode="tel"
+          class=${classMap({
+            ["webchat-input"]: true,
+            ["text-us-window__phone-input"]: true,
+          })}
+          .value=${this.phoneNumber}
+          @keydown=${this.enforceFormat}
+          @keyup=${this.onChangePhoneNumber}
+        />
+        <div class="text-us-window__submit-text">
+          <action-confirm-button
+            .onClick=${this.onClick}
+            .isLoading=${this.isSubmitting}
+            text="SEND"
+          ></action-confirm-button>
+        </div>
+      </div>
+      ${this.hasPhoneNumberError
+        ? html`
+            <div class="text-us-window__error">Enter a valid phone number</div>
+          `
+        : ""}
+
+      <div class="text-us-window__vertical-spacer"></div>
+      <div class="text-us-window__subtext">
+        By entering your number, you consent to be contacted by our AI Leasing
+        Assistant. Your consent to this process is not a requirement for leasing
+        at our property. Message and data rates may apply.
+      </div>
+    </div>`;
+  };
+
+  renderSubmitted = (): TemplateResult => {
+    return html`
+      <div class="text-us-wrapper">
+        <div class="text-us-window__vertical-spacer"></div>
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M4.455 16L0 19.5V1C0 0.734784 0.105357 0.48043 0.292893 0.292893C0.48043 0.105357 0.734784 0 1 0H19C19.2652 0 19.5196 0.105357 19.7071 0.292893C19.8946 0.48043 20 0.734784 20 1V15C20 15.2652 19.8946 15.5196 19.7071 15.7071C19.5196 15.8946 19.2652 16 19 16H4.455ZM2 15.385L3.763 14H18V2H2V15.385ZM10 7V4L14 8L10 12V9H6V7H10Z"
+            fill="#202020"
+          />
+        </svg>
+        <div class="text-us-window__description">
+          Thank you!<br />Look for a text message from our team. We can answer
+          questions and help you book a tour through text.
+        </div>
+        <div class="text-us-window__vertical-spacer"></div>
+        <div class="text-us-window__subtext">
+          Opt out at anytime by texting “Stop”
+        </div>
+      </div>
+    `;
+  };
+
   render = (): TemplateResult => {
     installDetailsWindow();
     installActionConfirmButton();
+    if (this.inPopup) {
+      if (this.hasSubmittedForm) return this.renderSubmitted();
+      else return this.renderTextUs();
+    }
     if (this.hasSubmittedForm) {
       return html`
         <details-window
           headerText="Text us"
           .onCloseClick=${this.onCloseClicked}
         >
-          <div class="text-us-wrapper">
-            <div class="text-us-window__vertical-spacer"></div>
-            <svg
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M4.455 16L0 19.5V1C0 0.734784 0.105357 0.48043 0.292893 0.292893C0.48043 0.105357 0.734784 0 1 0H19C19.2652 0 19.5196 0.105357 19.7071 0.292893C19.8946 0.48043 20 0.734784 20 1V15C20 15.2652 19.8946 15.5196 19.7071 15.7071C19.5196 15.8946 19.2652 16 19 16H4.455ZM2 15.385L3.763 14H18V2H2V15.385ZM10 7V4L14 8L10 12V9H6V7H10Z"
-                fill="#202020"
-              />
-            </svg>
-            <div class="text-us-window__description">
-              Thank you!<br />Look for a text message from our team. We can
-              answer questions and help you book a tour through text.
-            </div>
-            <div class="text-us-window__vertical-spacer"></div>
-            <div class="text-us-window__subtext">
-              Opt out at anytime by texting “Stop”
-            </div>
-          </div>
+          ${this.renderSubmitted}
         </details-window>
       `;
     }
-
     return html`
       <details-window headerText="Text us" .onCloseClick=${this.onCloseClicked}>
-        <div class="text-us-wrapper">
-          <div class="text-us-window__description">
-            Have questions? <br />
-            Our team can answer via <br />text message.
-          </div>
-          <div class="text-us-window__vertical-spacer"></div>
-          <input
-            ${ref(this.phoneNumberInputRef)}
-            maxlength="14"
-            type="text"
-            placeholder="Phone number"
-            inputmode="tel"
-            class=${classMap({
-              ["webchat-input"]: true,
-              ["text-us-window__phone-input"]: true,
-            })}
-            .value=${this.phoneNumber}
-            @keydown=${this.enforceFormat}
-            @keyup=${this.onChangePhoneNumber}
-          />
-          ${this.hasPhoneNumberError
-            ? html`
-                <div class="text-us-window__error">
-                  Enter a valid phone number
-                </div>
-              `
-            : ""}
-          <div class="text-us-window__vertical-spacer"></div>
-          <action-confirm-button
-            .onClick=${this.onClick}
-            .isLoading=${this.isSubmitting}
-            text="Send"
-          ></action-confirm-button>
-          <div class="text-us-window__vertical-spacer"></div>
-          <div class="text-us-window__subtext">
-            By entering your number, you consent to be contacted by our AI
-            Leasing Assistant. Your consent to this process is not a requirement
-            for leasing at our property. Message and data rates may apply.
-          </div>
-        </div>
+        ${this.renderTextUs}
       </details-window>
     `;
   };

package/src/WebComponent/launcherStyles.ts

@@ -310,7 +310,7 @@ export const launcherStyles = css`
   }
   .inner-pill-wrapper {
     background: #353535;
-    border-width: 4px 0px 4px 4px;
+    border-width: 2px 0px 2px 2px;
     border-style: solid;
     border-color: #ffffff;
     box-shadow: 0px 34px 34px 14px rgba(0, 0, 0, 0.35);
@@ -348,4 +348,14 @@ export const launcherStyles = css`
       bottom: 0;
     }
   }
+  @media screen and (min-width: 1000px) {
+    .inner-pill-wrapper {
+      font-size: 24px;
+      line-height: 28px;
+    }
+    .vertical-pill-icon {
+      transform: scale(1.5);
+      width: 42px;
+    }
+  }
 `;