@meetelise/chat 1.20.48 → 1.20.50

package/src/WebComponent/actions/InputStyles.ts

@@ -3,20 +3,22 @@ import { css } from "lit";
 export const InputStyles = css`
   .webchat-input {
     outline: none;
+
     color: #202020;
+    font-family: "Helvetica Neue";
+    font-style: normal;
     font-weight: 400;
-    font-size: 16px;
-    line-height: 16px;
-    font-family: "Poppins";
+    font-size: 14px;
+    line-height: 22px;
 
-    background: #ffffff;
-    border-radius: 20px;
-    border: none;
-    padding: 0px 20px;
-    border: 1px solid #83818e;
+    background: #d9d9d9;
+    border: 1px solid #efefef;
+    border-radius: 100px;
+    padding: 10px 16px;
   }
   .webchat-textarea {
-    padding: 20px 20px;
+    border-radius: 8px;
+    padding: 8px 16px;
   }
 
   .webchat-input:active {
@@ -29,7 +31,7 @@ export const InputStyles = css`
 
   .webchat-input::placeholder {
     color: rgba(32, 32, 32, 0.5);
-    font-family: "Poppins";
-    font-size: 16px;
+    font-family: "Helvetica Neue";
+    font-size: 14px;
   }
 `;

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

@@ -10,16 +10,17 @@ export class ActionConfirmButton extends LitElement {
         display: flex;
         justify-content: center;
         align-items: center;
-        background: #1e1e1e;
-        border: 2px solid #ffffff;
-        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+
+        background: #000000;
+        border: none;
+
         border-radius: 20px;
 
-        font-family: "Poppins";
+        font-family: "Helvetica Neue";
         font-style: normal;
         font-weight: 400;
-        font-size: 14px;
-        line-height: 22px;
+        font-size: 12px;
+        line-height: 20px;
 
         color: #ffffff;
         padding: 5px 15px;

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

@@ -1,6 +1,6 @@
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { SimplePhoneIcon } from "../../svgIcons";
+import { PhoneBlackStrokeIcon } from "../../svgIcons";
 
 import { getOfficeHourText } from "../OfficeHours";
 
@@ -8,18 +8,23 @@ import { getOfficeHourText } from "../OfficeHours";
 export class CallUsWindow extends LitElement {
   static styles = [
     css`
-      .call-us-window__content-wrapper {
-        font-family: Poppins;
+      #call-us-window__content-wrapper {
+        font-family: "Helvetica Neue";
+        font-style: normal;
         color: 11ee1e;
+        font-size: 14px;
       }
-
-      .call-us-window__call-us-text {
-        font-family: "Helvetica";
+      .call-us-window__header {
+        font-family: "Helvetica Neue";
         font-style: normal;
         font-weight: 700;
-        font-size: 16px;
-        line-height: 24px;
-        color: #202020;
+        line-height: 140%;
+        font-size: 14px;
+        margin: 0;
+      }
+
+      .call-us-window__call-us-text {
+        margin: 0 0 10px;
       }
 
       .call-us-window__phone-redirect {
@@ -27,26 +32,33 @@ export class CallUsWindow extends LitElement {
         justify-content: flex-start;
         align-items: center;
         margin-bottom: 28px;
-        gap: 5px;
+        gap: 8px;
+
+        color: #202020;
+        font-size: 18px;
+        line-height: 24px;
       }
       .call-us-window__phone-redirect > a {
         color: unset;
         text-decoration: underline;
       }
 
-      .call-us-window__office-hours-header,
-      .call-us-window__day-of-week,
+      .call-us-window__office-hours-wrapper {
+        margin: 0 0 16px;
+      }
+
+      .call-us-window__oh-header {
+        line-height: 32px;
+        font-weight: 400;
+      }
       .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 {
-        width: 112px;
+        width: 100px;
         text-transform: Capitalize;
       }
 
@@ -57,7 +69,9 @@ export class CallUsWindow extends LitElement {
       }
 
       .call-us-window__open-times {
+        width: 123px;
         text-transform: lowercase;
+        text-align: right;
       }
     `,
   ];
@@ -111,36 +125,37 @@ export class CallUsWindow extends LitElement {
         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
-          </div>
+        <div id="call-us-window__content-wrapper">
+          <h1 class="call-us-window__call-us-text call-us-window__header">
+            Contact Our Leasing Team
+          </h1>
           <div class="call-us-window__phone-redirect">
-            ${SimplePhoneIcon} ${this.getCallLink(this.phoneNumber)}
+            ${PhoneBlackStrokeIcon} ${this.getCallLink(this.phoneNumber)}
           </div>
           <div class="call-us-window__office-hours-wrapper">
-            <div class="call-us-window__office-hours-header">Office hours</div>
-          </div>
-          ${this.officeHoursTextInfo.map((oh) => {
-            if (typeof oh === "string") {
+            <h1 class="call-us-window__oh-header call-us-window__header">
+              Office Hours
+            </h1>
+            ${this.officeHoursTextInfo.map((oh) => {
+              if (typeof oh === "string") {
+                return html`
+                  <div class="call-us-window__day-of-week-wrapper">
+                    <div class="call-us-window__day-of-week">${oh}</div>
+                    <div class="call-us-window__closed">Closed</div>
+                  </div>
+                `;
+              }
               return html`
                 <div class="call-us-window__day-of-week-wrapper">
-                  <div class="call-us-window__day-of-week">${oh}</div>
-                  <div class="call-us-window__closed">Closed</div>
+                  <div class="call-us-window__day-of-week">${oh.dayOfWeek}</div>
+                  <div class="call-us-window__open-times">
+                    ${oh.startTime}&nbsp;&ndash;&nbsp;${oh.endTime}
+                  </div>
                 </div>
               `;
-            }
-            return html`
-              <div class="call-us-window__day-of-week-wrapper">
-                <div class="call-us-window__day-of-week">${oh.dayOfWeek}</div>
-                <div class="call-us-window__open-times">
-                  ${oh.startTime}&nbsp;&ndash;&nbsp;${oh.endTime}
-                </div>
-              </div>
-            `;
-          })}
+            })}
+          </div>
         </div>
         ${this.hasTextUsEnabled
           ? html` <text-us-window

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

@@ -1,6 +1,5 @@
 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";
 
@@ -8,13 +7,25 @@ import { isMobile } from "../../utils";
 export class DetailsWindow extends LitElement {
   static styles = css`
     .details-window-wrapper {
-      background: rgba(255, 255, 255, 0.75);
+      background: rgba(255, 255, 255, 0.9);
       box-shadow: 0px 0px 14px 5px rgba(0, 0, 0, 0.25);
-      backdrop-filter: blur(10px);
-      font-family: "Poppins";
-      color: #202020;
-      padding: 20px;
+      backdrop-filter: blur(5px);
+      /* Note: backdrop-filter has minimal browser support */
+
       border-radius: 10px 0px 0px 10px;
+      padding: 49px 18px 24px;
+    }
+
+    .close-window-button {
+      position: absolute;
+      top: 22px;
+      right: 20px;
+      cursor: pointer;
+      width: 20px;
+      height: 20px;
+    }
+    .close-window-button:hover {
+      filter: brightness(90%);
     }
 
     .gradient-window-wrapper {
@@ -37,14 +48,17 @@ export class DetailsWindow extends LitElement {
       justify-content: space-between;
     }
     .header-text {
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 22px;
+
       font-family: "Helvetica";
       font-style: normal;
       font-weight: 700;
-      font-size: 16px;
-      line-height: 24px;
+      font-size: 14px;
+      line-height: 140%;
 
       color: #202020;
-      margin-top: 20px;
       margin-bottom: 14px;
     }
 
@@ -87,18 +101,17 @@ export class DetailsWindow extends LitElement {
   render(): TemplateResult {
     return html`
       <div
-        class=${classMap({
-          ["gradient-window-wrapper"]: this.useGradientDesign,
-          ["details-window-wrapper"]: !this.useGradientDesign,
-        })}
+        class="details-window-wrapper"
         style=${styleMap({
           width: this.isMobileSized ? "-webkit-fill-available" : this.width,
         })}
       >
         <div class="details-window-header">
-          <div class="header-text">${this.headerText}</div>
+          ${this.headerText
+            ? html` <div class="header-text">${this.headerText}</div>`
+            : ""}
           ${this.onCloseClick
-            ? html`<div @click=${this.onCloseClick}>
+            ? html`<div @click=${this.onCloseClick} class="close-window-button">
                 <svg
                   width="19"
                   height="19"

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

@@ -26,31 +26,23 @@ export class EmailUsWindow extends LitElement {
         overflow: hidden;
         text-overflow: ellipsis;
       }
-      .email-us__name-input {
-        width: 134px;
-        height: 49px;
-      }
 
       .email-us__name-wrapper {
         display: flex;
-      }
-
-      .email-us__horizontal-spacer {
-        margin-left: 6px;
-        margin-right: 6px;
+        gap: 4px;
       }
 
       .email-us__contact-input {
         width: -webkit-fill-available;
-        height: 49px;
       }
 
       .email-us__vertical-spacer {
-        margin-top: 15px;
-        margin-bottom: 15px;
+        margin-top: 8px;
+        margin-bottom: 8px;
       }
 
       .action-bttn-container {
+        margin-top: 19px;
         display: flex;
         justify-content: flex-end;
       }
@@ -59,7 +51,6 @@ export class EmailUsWindow extends LitElement {
         resize: none;
         width: -webkit-fill-available;
         height: 159px;
-        padding: 8px;
       }
 
       .email-us__submitted-info {
@@ -323,9 +314,9 @@ export class EmailUsWindow extends LitElement {
 
     return html`
       <details-window
-        headerText="Email our leasing team"
+        headerText="Email Our Leasing Team"
         .onCloseClick=${this.onCloseClicked}
-        useGradientDesign="true"
+        height="${this.windowHeight}px"
       >
         <div class="email-us-wrapper">
           <div class="email-us__name-wrapper">
@@ -378,7 +369,7 @@ export class EmailUsWindow extends LitElement {
           <input
             ${ref(this.phoneNumberInputRef)}
             type="text"
-            placeholder="Phone number"
+            placeholder="Phone"
             inputmode="tel"
             class=${classMap({
               ["webchat-input"]: true,
@@ -416,7 +407,7 @@ export class EmailUsWindow extends LitElement {
             : ""}
           <div class="email-us__vertical-spacer"></div>
           <textarea
-            placeholder="Message"
+            placeholder="Your message..."
             .value=${this.message}
             class=${classMap({
               ["email-us__message-input"]: true,
@@ -428,7 +419,6 @@ export class EmailUsWindow extends LitElement {
           ${this.hasMessageError
             ? html` <div class="email-us__error-text">Include a message</div> `
             : ""}
-          <div class="email-us__vertical-spacer"></div>
           <div class="action-bttn-container">
             <action-confirm-button
               .onClick=${this.onClick}
@@ -441,7 +431,6 @@ export class EmailUsWindow extends LitElement {
                 <div class="email-us__error-text">Error submitting message</div>
               `
             : ""}
-          <div class="email-us__vertical-spacer"></div>
         </div>
       </details-window>
     `;

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

@@ -1,6 +1,5 @@
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
 import { createRef, ref, Ref } from "lit/directives/ref.js";
 import { installActionConfirmButton } from "./action-confirm-button";
 import { installDetailsWindow } from "./details-window";
@@ -17,50 +16,43 @@ export class TextUsWindow extends LitElement {
   static styles = [
     css`
       .text-us-wrapper {
-        font-family: "Poppins";
+        margin-top: 33px;
         color: #202020;
       }
-
-      .text-us-window__description {
-        font-family: "Helvetica";
+      .text-us-window__header {
+        font-family: "Helvetica Neue";
         font-style: normal;
         font-weight: 700;
-        font-size: 16px;
-        line-height: 24px;
-        color: #202020;
-
-        margin-top: 32px;
+        line-height: 140%;
+        font-size: 14px;
+        margin: 0;
       }
 
       .text-us-window__input-container {
+        margin-top: 8px;
+        margin-bottom: 8px;
         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;
+        top: 14px;
         right: 6px;
       }
       .text-us-window__vertical-spacer {
         height: 20px;
       }
-
-      .text-us-window__subtext {
-        font-size: 12px;
-        line-height: 22px;
+      .text-us-window__description,
+      .text-us-window__error {
+        font-family: "Helvetica";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 10px;
+        line-height: 14px;
       }
 
       .text-us-window__error {
-        font-size: 10px;
-        line-height: 22px;
-        margin-top: 8px;
+        color: rgb(255, 49, 3);
       }
     `,
     InputStyles,
@@ -148,19 +140,15 @@ 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>
+      <h1 class="text-us-window__header">Send Us a Text</h1>
       <div class="text-us-window__input-container">
         <input
           ${ref(this.phoneNumberInputRef)}
           maxlength="14"
           type="text"
-          placeholder="Phone number"
+          placeholder="Enter phone"
           inputmode="tel"
-          class=${classMap({
-            ["webchat-input"]: true,
-            ["text-us-window__phone-input"]: true,
-          })}
+          class="webchat-input text-us-window__input-container"
           .value=${this.phoneNumber}
           @keydown=${this.enforceFormat}
           @keyup=${this.onChangePhoneNumber}
@@ -172,18 +160,22 @@ export class TextUsWindow extends LitElement {
             text="SEND"
           ></action-confirm-button>
         </div>
+        ${this.hasPhoneNumberError
+          ? html`
+              <div class="text-us-window__error">
+                Enter a valid phone number
+              </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 class="text-us-window__description">
+        By entering your number and selecting Send, you consent to be contacted
+        by our AI Leasing Assistant. Your consent to this process is not a
+        requirement for leasing at our property.
+        <div class="text-us-window__description">
+          Message and data rates may apply.
+        </div>
       </div>
     </div>`;
   };
@@ -208,8 +200,7 @@ export class TextUsWindow extends LitElement {
           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">
+        <div class="text-us-window__description">
           Opt out at anytime by texting “Stop”
         </div>
       </div>