@meetelise/chat 1.51.10 → 1.51.12

package/src/WebComponent/Scheduler/tour-scheduler.ts

@@ -4,6 +4,7 @@ import { customElement, property, query, state } from "lit/decorators.js";
 import "../actions/international-phone-input";
 import type { InternationalPhoneChangeDetail } from "../actions/international-phone-input";
 import "./tour-type-option.ts";
+import { unselectedTourTypeForegroundColor } from "./tour-type-option";
 import "./date-picker.ts";
 import "./time-picker.ts";
 import "../me-select.ts";
@@ -43,7 +44,7 @@ import {
 import { pushGtmEvent } from "../../gtm";
 import formDisclaimer from "../../disclaimers";
 import { tourSchedulerStyles } from "./tourSchedulerStyles";
-import { defaultPrimaryColor, defaultBackgroundColor } from "../../themes";
+import { defaultPrimaryColor } from "../../themes";
 import { LogType, sendLoggingEvent } from "../../analytics";
 import LeadSourceClient, {
   getDefaultLeadSourceAttribution,
@@ -206,15 +207,9 @@ export class TourScheduler extends LitElement {
   @property({ attribute: true })
   primaryColor: string = defaultPrimaryColor;
 
-  @property({ attribute: true })
-  backgroundColor: string = defaultBackgroundColor;
-
   @property({ attribute: true })
   foregroundColorOnPrimaryBackgroundColor = "white";
 
-  @property({ attribute: true })
-  foregroundColorOnSecondaryBackgroundColor = "black";
-
   @query(".nameContainer#firstName input")
   firstNameInput!: HTMLInputElement;
   @query(".nameContainer#lastName input")
@@ -870,7 +865,8 @@ export class TourScheduler extends LitElement {
               heading="Take a tour"
               subtitle="on your own"
               .primaryColor=${this.primaryColor}
-              .backgroundColor=${this.backgroundColor}
+              .foregroundColorOnPrimaryBackgroundColor=${this
+                .foregroundColorOnPrimaryBackgroundColor}
               @click="${async () => {
                 this.tourType = TourType.Self;
                 pushGtmEvent("tourTypeSelected", {
@@ -905,7 +901,7 @@ export class TourScheduler extends LitElement {
               ${TourSelfGuidedIcon(
                 this.tourType === TourType.Self
                   ? this.foregroundColorOnPrimaryBackgroundColor
-                  : this.foregroundColorOnSecondaryBackgroundColor
+                  : unselectedTourTypeForegroundColor
               )}
             </tour-type-option>`
           : ""}
@@ -914,11 +910,8 @@ export class TourScheduler extends LitElement {
               heading="Guided tour"
               subtitle="with an agent"
               .primaryColor=${this.primaryColor}
-              .backgroundColor=${this.backgroundColor}
               .foregroundColorOnPrimaryBackgroundColor=${this
                 .foregroundColorOnPrimaryBackgroundColor}
-              .foregroundColorOnSecondaryBackgroundColor=${this
-                .foregroundColorOnSecondaryBackgroundColor}
               @click="${async () => {
                 this.tourType = TourType.Guided;
                 pushGtmEvent("tourTypeSelected", {
@@ -954,7 +947,7 @@ export class TourScheduler extends LitElement {
               ${TourWithAgentIcon(
                 this.tourType === TourType.Guided
                   ? this.foregroundColorOnPrimaryBackgroundColor
-                  : this.foregroundColorOnSecondaryBackgroundColor
+                  : unselectedTourTypeForegroundColor
               )}
             </tour-type-option>`
           : ""}
@@ -963,7 +956,8 @@ export class TourScheduler extends LitElement {
               heading="Virtual tour"
               subtitle="over video"
               .primaryColor=${this.primaryColor}
-              .backgroundColor=${this.backgroundColor}
+              .foregroundColorOnPrimaryBackgroundColor=${this
+                .foregroundColorOnPrimaryBackgroundColor}
               @click="${async () => {
                 this.tourType = TourType.Virtual;
                 pushGtmEvent("tourTypeSelected", {
@@ -998,7 +992,7 @@ export class TourScheduler extends LitElement {
               ${TourVirtuallyIcon(
                 this.tourType === TourType.Virtual
                   ? this.foregroundColorOnPrimaryBackgroundColor
-                  : this.foregroundColorOnSecondaryBackgroundColor
+                  : unselectedTourTypeForegroundColor
               )}
             </tour-type-option>`
           : ""}

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

@@ -1,7 +1,9 @@
 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";
+import { defaultPrimaryColor } from "../../themes";
+
+export const unselectedTourTypeForegroundColor = "#202020";
 
 @customElement("tour-type-option")
 export class TourTypeOption extends LitElement {
@@ -17,15 +19,9 @@ export class TourTypeOption extends LitElement {
   @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 {
@@ -103,7 +99,7 @@ export class TourTypeOption extends LitElement {
             style=${styleMap({
               color: this.selected
                 ? this.foregroundColorOnPrimaryBackgroundColor
-                : this.foregroundColorOnSecondaryBackgroundColor,
+                : undefined,
             })}
           >
             <span class="heading">${this.heading}</span>

package/src/WebComponent/actions/minimize-expand-button.ts

@@ -69,6 +69,9 @@ export class MinimizeExpandButton extends LitElement {
   @property({ attribute: true })
   primaryColor: string = defaultPrimaryColor;
 
+  @property({ attribute: true })
+  foregroundColorOnPrimaryBackgroundColor = "white";
+
   @property({ attribute: true })
   toExpand = false;
 
@@ -86,8 +89,14 @@ export class MinimizeExpandButton extends LitElement {
           })}
         >
           ${this.toExpand
-            ? html`<div class="chevron-up">${ChevronRightIcon("white")}</div>`
-            : html` <div class="x-icon">${XOutlineIcon("white")}</div>`}
+            ? html`<div class="chevron-up">
+                ${ChevronRightIcon(
+                  this.foregroundColorOnPrimaryBackgroundColor
+                )}
+              </div>`
+            : html` <div class="x-icon">
+                ${XOutlineIcon(this.foregroundColorOnPrimaryBackgroundColor)}
+              </div>`}
         </div>
       </button>
     `;

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

@@ -118,9 +118,9 @@ export class ChatAdditionalActions extends LitElement {
           .primaryColor=${primaryColorValue}
           .backgroundColor=${backgroundColorValue}
           .foregroundColorOnPrimaryBackgroundColor=${this
-            .foregroundColorOnPrimaryBackgroundColor}
+            .foregroundColorOnPrimaryBackgroundColor ?? "white"}
           .foregroundColorOnSecondaryBackgroundColor=${this
-            .foregroundColorOnSecondaryBackgroundColor}
+            .foregroundColorOnSecondaryBackgroundColor ?? "black"}
           .hideChat=${true}
           .hasCallUsEnabled=${this.enabledChatWidgets.callDesktop}
           .hasChatEnabled=${this.enabledChatWidgets.chatDesktop}
@@ -130,7 +130,8 @@ export class ChatAdditionalActions extends LitElement {
         ></mobile-launcher>
         <minimize-expand-button
           .primaryColor=${primaryColorValue}
-          .backgroundColor=${backgroundColorValue}
+          .foregroundColorOnPrimaryBackgroundColor=${this
+            .foregroundColorOnPrimaryBackgroundColor ?? "white"}
           .onClick=${this.onClose}
         ></minimize-expand-button>
       </div>

package/src/WebComponent/launcher/Launcher.ts

@@ -477,6 +477,8 @@ export class Launcher extends LitElement {
             : this.hasHideMobileFeatures && !this.isMobileFeaturesExpanded
             ? false
             : this.hasPricingCalculatorEnabledMobile}
+          .foregroundColorOnPrimaryBackgroundColor=${this
+            .foregroundColorOnPrimaryBackgroundColor}
           .foregroundColorOnSecondaryBackgroundColor=${this
             .foregroundColorOnSecondaryBackgroundColor}
         ></mobile-launcher>`;
@@ -703,18 +705,31 @@ export class Launcher extends LitElement {
           ${this.hasChatEnabledDesktop
             ? html`<minimize-expand-button
                 .primaryColor=${this.primaryColor}
+                .foregroundColorOnPrimaryBackgroundColor=${this
+                  .foregroundColorOnPrimaryBackgroundColor}
                 .onClick=${this.onClickMinimize}
               ></minimize-expand-button>`
             : ""}
         </div>
 
         <div class="type-hey__top-section">
-          <div class="type-hey__ai-topic">
+          <div
+            class="type-hey__ai-topic"
+            style=${styleMap({
+              color: this.foregroundColorOnPrimaryBackgroundColor,
+            })}
+          >
             <p>AI Assistant</p>
             <div class="type-hey__ai-topic-notch"></div>
           </div>
           <div class="type-hey__greeting">
-            <h1>Hey there!</h1>
+            <h1
+              style=${styleMap({
+                color: this.foregroundColorOnPrimaryBackgroundColor,
+              })}
+            >
+              Hey there!
+            </h1>
             <div>${HeyThereEmoji()}</div>
           </div>
           ${this.hasChatEnabledDesktop
@@ -773,9 +788,15 @@ export class Launcher extends LitElement {
                 >
                   <div class="type-hey__pill-left">
                     <div class="type-hey__icon">
-                      ${ContactResidentIcon("black")}
+                      ${ContactResidentIcon(
+                        this.foregroundColorOnSecondaryBackgroundColor
+                      )}
                     </div>
-                    <div>
+                    <div
+                      style=${styleMap({
+                        color: this.foregroundColorOnSecondaryBackgroundColor,
+                      })}
+                    >
                       <span class="title-bold">Contact</span> a resident
                     </div>
                   </div>
@@ -871,7 +892,13 @@ export class Launcher extends LitElement {
                       this.foregroundColorOnSecondaryBackgroundColor
                     )}
                   </div>
-                  <div class="vertical-pill-title" style="margin-left: -2px;">
+                  <div
+                    class="vertical-pill-title"
+                    style=${styleMap({
+                      marginLeft: "-2px",
+                      color: this.foregroundColorOnSecondaryBackgroundColor,
+                    })}
+                  >
                     <span class="vertical-pill-bold">Calculate</span> Cost
                   </div>
                 </div>
@@ -1115,13 +1142,20 @@ export class Launcher extends LitElement {
                           this.foregroundColorOnSecondaryBackgroundColor
                         )}
                       </div>
-                      <div class="vertical-pill-title">
+                      <div
+                        class="vertical-pill-title"
+                        style=${styleMap({
+                          color: this.foregroundColorOnSecondaryBackgroundColor,
+                        })}
+                      >
                         <span class="vertical-pill-bold">Contact</span> a
                         resident
                       </div>
                     </div>
                     <div class="chevron-right">
-                      ${ChevronRightIcon("black")}
+                      ${ChevronRightIcon(
+                        this.foregroundColorOnSecondaryBackgroundColor
+                      )}
                     </div>
                   </button>
                 </li>`
@@ -1331,8 +1365,6 @@ export class Launcher extends LitElement {
                 .primaryColor=${this.primaryColor}
                 .foregroundColorOnPrimaryBackgroundColor=${this
                   .foregroundColorOnPrimaryBackgroundColor}
-                .foregroundColorOnSecondaryBackgroundColor=${this
-                  .foregroundColorOnSecondaryBackgroundColor}
                 .compactDesign=${this.showTourNextToChat
                   ? this.showTourNextToChat
                   : ""}

package/src/WebComponent/launcher/mobile-launcher.ts

@@ -83,6 +83,9 @@ export class MobileLauncher extends LitElement {
   @property({ attribute: true })
   overrideRentgrata = false;
 
+  @property({ attribute: true })
+  foregroundColorOnPrimaryBackgroundColor = "white";
+
   @property({ attribute: true })
   foregroundColorOnSecondaryBackgroundColor = "black";
 
@@ -128,7 +131,7 @@ export class MobileLauncher extends LitElement {
         ${this.renderListElement(
           this.hasPricingCalculatorEnabled,
           this.onClickPriceCalculatorOption,
-          CalculatorOutlineIcon("black"),
+          CalculatorOutlineIcon(this.foregroundColorOnSecondaryBackgroundColor),
           "Price calculator"
         )}
         ${this.renderListElement(
@@ -161,6 +164,8 @@ export class MobileLauncher extends LitElement {
                 <minimize-expand-button
                   .onClick=${this.onClickMinimize}
                   .primaryColor=${this.primaryColor}
+                  .foregroundColorOnPrimaryBackgroundColor=${this
+                    .foregroundColorOnPrimaryBackgroundColor}
                   .toExpand=${true}
                 ></minimize-expand-button>
               </li>

package/src/WebComponent/launcher/typeEmojiStyles.ts

@@ -92,7 +92,6 @@ export const typeEmojiStyles = css`
 
     margin: auto;
     margin-top: 26px;
-    color: #ffffff;
     position: relative;
   }
   .type-hey__ai-topic p {
@@ -133,8 +132,6 @@ export const typeEmojiStyles = css`
     font-size: 20px;
     line-height: 22px;
     margin: 0;
-
-    color: #ffffff;
   }
 
   #type-hey__ask-prompt {