@meetelise/chat 1.22.56 → 1.22.57

package/src/WebComponent/launcher/Launcher.ts

@@ -12,17 +12,9 @@ import { StyleInfo, styleMap } from "lit/directives/style-map.js";
 import { installCallUsWindow } from "../actions/call-us-window";
 import { TourScheduler } from "../Scheduler/tour-scheduler";
 import { LabeledOption } from "../../fetchBuildingInfo";
-import {
-  EmailBlackOutlineIcon,
-  BookTourBlackOutlineIcon,
-  PhoneBlackOutlineIcon,
-  HeyThereEmoji,
-  ChatBlackOutlineIcon,
-  ContactResidentBlackOutlineIcon,
-} from "../../svgIcons";
 import {
   defaultBackgroundColor,
-  defaultBrandColor,
+  defaultPrimaryColor,
   hexToAlmostWhite,
 } from "../../themes";
 import "./mobile-launcher";
@@ -40,6 +32,11 @@ import {
 import noop from "lodash/noop";
 import { ChatOutlineIcon } from "../icons/ChatOutlineIcon";
 import { ChevronRightIcon } from "../icons/ChevronRightIcon";
+import { BookTourOutlineIcon } from "../icons/BookTourOutlineIcon";
+import { EmailOutlineIcon } from "../icons/EmailOutlineIcon";
+import { PhoneOutlineIcon } from "../icons/PhoneOutlineIcon";
+import { HeyThereEmoji } from "../icons/HeyThereEmojiIcon";
+import { ContactResidentIcon } from "../icons/ContactResidentIcon";
 
 @customElement("meetelise-launcher")
 export class Launcher extends LitElement {
@@ -157,13 +154,15 @@ export class Launcher extends LitElement {
   launcherStyles: StyleInfo = {};
 
   @property({ attribute: true })
-  brandColor: string = defaultBrandColor;
+  primaryColor: string = defaultPrimaryColor;
 
   @property({ attribute: true })
   backgroundColor: string = defaultBackgroundColor;
 
   @property({ attribute: true })
-  foregroundColorOnCustomBackground = "white";
+  foregroundColorOnPrimaryBackgroundColor = "white";
+  @property({ attribute: true })
+  foregroundColorOnSecondaryBackgroundColor = "black";
 
   @property({ attribute: true })
   private leadSourceClient: LeadSourceClient | null = null;
@@ -241,18 +240,6 @@ export class Launcher extends LitElement {
     this.isEmailWindowOpen = false;
   };
 
-  renderEmailOption = (): TemplateResult => {
-    const text = this.getNumCallToActions() > 2 ? "Email" : "Email us";
-    return html`
-      <div
-        @click=${this.onClickEmailOption}
-        class="launcher__call-to-action-option"
-      >
-        ${text}
-      </div>
-    `;
-  };
-
   onClickPhoneOption = (e: MouseEvent): void => {
     e.preventDefault();
     e.stopPropagation();
@@ -264,11 +251,6 @@ export class Launcher extends LitElement {
     this.isCallUsWindowOpen = false;
   };
 
-  renderCallUsOption = (): TemplateResult => {
-    const text = this.getNumCallToActions() > 2 ? "Phone" : "Hours/Phone";
-    return html` <div class="launcher__call-to-action-option">${text}</div> `;
-  };
-
   onClickSSTOption = (e: MouseEvent): void => {
     e.preventDefault();
     e.stopPropagation();
@@ -287,40 +269,12 @@ export class Launcher extends LitElement {
       );
     }
   };
-
-  renderSSTOption = (): TemplateResult => {
-    const text = this.getNumCallToActions() > 2 ? "Book" : "Book a tour";
-    return html`
-      <div
-        class="launcher__call-to-action-option"
-        @click=${this.onClickSSTOption}
-      >
-        ${text}
-      </div>
-    `;
-  };
-
   onClickTextUsOption = (e: MouseEvent): void => {
     e.preventDefault();
     e.stopPropagation();
     this.isTextUsWindowOpen = true;
   };
 
-  onCloseTextUsWindow = (): void => {
-    this.isTextUsWindowOpen = false;
-  };
-
-  renderTextUsOption = (): TemplateResult => {
-    return html`
-      <div
-        @click=${this.onClickTextUsOption}
-        class="launcher__call-to-action-option"
-      >
-        Text us
-      </div>
-    `;
-  };
-
   isCallToActionWindowOpen = (): boolean => {
     return (
       [
@@ -345,7 +299,7 @@ export class Launcher extends LitElement {
       return html` ${this.hasHideMobileFeatures && isMobile()
           ? html`<collapse-expand-button
               .toExpand=${this.isMobileFeaturesExpanded}
-              .brandColor=${this.backgroundColor}
+              .primaryColor=${this.primaryColor}
               .onClick=${this.toggleMobileFeatures}
             ></collapse-expand-button>`
           : ""}
@@ -358,7 +312,7 @@ export class Launcher extends LitElement {
           .overrideRentgrata=${this.overrideRentgrata}
           .isMobileDesign=${isMobile() ||
           this.designConcept === DesignConcepts.MINIMIZED}
-          .brandColor=${this.brandColor}
+          .primaryColor=${this.primaryColor}
           .backgroundColor=${this.backgroundColor}
           .hasChatEnabled=${!isMobile()
             ? this.hasChatEnabledDesktop
@@ -387,83 +341,76 @@ export class Launcher extends LitElement {
     }
 
     if (this.designConcept === DesignConcepts.EMOJI) {
-      return html`
-        <div
-          class="type-hey__list"
+      return this.emojiPillList();
+    }
+    return this.verticalPillList();
+  };
+
+  private emojiPillList = (): TemplateResult => {
+    const emojiPillListItems: {
+      pillKey: string;
+      pill: TemplateResult | null;
+    }[] = [
+      {
+        pillKey: "Email",
+        pill: this.hasEmailEnabledDesktop
+          ? html` <div
+          class="type-hey__pill"
+          @click=${this.onClickEmailOption}
           style=${styleMap({
-            background: this.brandColor,
+            background: this.backgroundColor,
           })}
         >
-          <div class="type-hey__chat-container">
-            ${this.hasChatEnabledDesktop
-              ? html`<minimize-expand-button
-                  .brandColor=${this.brandColor}
-                  .onClick=${this.onClickMinimize}
-                ></minimize-expand-button>`
-              : ""}
+          <div class="type-hey__pill-left">
+            <div class="type-hey__icon">${EmailOutlineIcon(
+              this.foregroundColorOnSecondaryBackgroundColor
+            )}</div>
+            <div style=${styleMap({
+              color: this.foregroundColorOnSecondaryBackgroundColor,
+            })}><span class="title-bold">Email</span> an agent</div>
           </div>
-
-          <div class="type-hey__top-section">
-            <div class="type-hey__ai-topic">
-              <p>AI Assistant</p>
-              <div class="type-hey__ai-topic-notch"></div>
-            </div>
-            <div class="type-hey__greeting">
-              <h1>Hey there!</h1>
-              <div>${HeyThereEmoji}</div>
-            </div>
-            ${this.hasChatEnabledDesktop
-              ? html`
-                  <div
-                    id="type-hey__ask-prompt"
-                    class="type-hey__pill"
-                    @click=${this.onChatTapped}
-                    style=${styleMap({
-                      background: hexToAlmostWhite(this.brandColor, 0.2),
-                    })}
-                  >
-                    <div class="type-hey__pill-left">
-                      <div class="type-hey__icon">
-                        ${ChatOutlineIcon(
-                          this.foregroundColorOnCustomBackground
-                        )}
-                      </div>
-                      <div><span class="title-bold">Chat</span> with us</div>
-                    </div>
-                    <div class="type-gradient__icon">
-                      ${ChevronRightIcon(
-                        this.foregroundColorOnCustomBackground
-                      )}
-                    </div>
-                  </div>
-                `
-              : ""}
+          <div class="type-gradient__icon">${ChevronRightIcon(
+            this.foregroundColorOnSecondaryBackgroundColor
+          )}</div>
           </div>
-
-          <div class="type-hey__bottom-section">
-            <div class="type-hey__botton-section-pills">
-              ${this.hasEmailEnabledDesktop
-                ? html` <div
-                    class="type-hey__pill"
-                    @click=${this.onClickEmailOption}
-                    style=${styleMap({
-                      background: this.backgroundColor,
-                    })}
-                  >
-                    <div class="type-hey__pill-left">
-                      <div class="type-hey__icon">${EmailBlackOutlineIcon}</div>
-                      <div><span class="title-bold">Email</span> an agent</div>
-                    </div>
-                    <div class="type-gradient__icon">${ChevronRightIcon(
-                      "black"
-                    )}</div>
+        </div>`
+          : null,
+      },
+      {
+        pillKey: "SST",
+        pill: this.hasSSTEnabledDesktop
+          ? html`
+             <div
+                class="type-hey__pill"
+                @click=${this.onClickSSTOption}
+                style=${styleMap({
+                  background: this.backgroundColor,
+                })}>
+                <div class="type-hey__pill-left">
+                  <div class="type-hey__icon">${BookTourOutlineIcon(
+                    this.foregroundColorOnSecondaryBackgroundColor
+                  )}</div>
+                    <div style=${styleMap({
+                      color: this.foregroundColorOnSecondaryBackgroundColor,
+                    })}>
+                      <span class="title-bold">Book</span> a tour
                     </div>
-                  </div>`
-                : ""}
-              ${this.phoneNumber &&
-              (this.hasCallUsEnabledDesktop || this.hasTextUsEnabledDesktop)
-                ? html`
-                    <div
+                </div>
+                <div class="type-gradient__icon">${ChevronRightIcon(
+                  this.foregroundColorOnSecondaryBackgroundColor
+                )}</div>
+                </div>
+              </div>
+            `
+          : null,
+      },
+      {
+        pillKey: "Phone",
+        pill:
+          this.phoneNumber &&
+          (this.hasCallUsEnabledDesktop || this.hasTextUsEnabledDesktop)
+            ? html`
+                <div
                       class="type-hey__pill"
                       @click=${this.onClickPhoneOption}
                       style=${styleMap({
@@ -471,8 +418,12 @@ export class Launcher extends LitElement {
                       })}
                       >
                     <div class="type-hey__pill-left">
-                      <div class="type-hey__icon">${PhoneBlackOutlineIcon}</div>
-                        <div>
+                      <div class="type-hey__icon">${PhoneOutlineIcon(
+                        this.foregroundColorOnSecondaryBackgroundColor
+                      )}</div>
+                        <div style=${styleMap({
+                          color: this.foregroundColorOnSecondaryBackgroundColor,
+                        })}>
                           ${
                             this.hasCallUsEnabledDesktop &&
                             this.hasTextUsEnabledDesktop
@@ -496,33 +447,79 @@ export class Launcher extends LitElement {
                         </div>
                       </div>
                       <div class="type-gradient__icon">${ChevronRightIcon(
-                        "black"
+                        this.foregroundColorOnSecondaryBackgroundColor
                       )}</div>
                     </div>
-                  </div>`
-                : ""}
-              ${this.hasSSTEnabledDesktop
-                ? html`
+                  </div>
+              `
+            : null,
+      },
+    ];
+    const pills = emojiPillListItems.filter((v) => !!v.pill);
+    return html`
+      <div
+        class="type-hey__list"
+        style=${styleMap({
+          background: this.primaryColor,
+        })}
+      >
+        <div class="type-hey__chat-container">
+          ${this.hasChatEnabledDesktop
+            ? html`<minimize-expand-button
+                .primaryColor=${this.primaryColor}
+                .onClick=${this.onClickMinimize}
+              ></minimize-expand-button>`
+            : ""}
+        </div>
+
+        <div class="type-hey__top-section">
+          <div class="type-hey__ai-topic">
+            <p>AI Assistant</p>
+            <div class="type-hey__ai-topic-notch"></div>
+          </div>
+          <div class="type-hey__greeting">
+            <h1>Hey there!</h1>
+            <div>${HeyThereEmoji()}</div>
+          </div>
+          ${this.hasChatEnabledDesktop
+            ? html`
+                <div
+                  id="type-hey__ask-prompt"
+                  class="type-hey__pill"
+                  @click=${this.onChatTapped}
+                  style=${styleMap({
+                    background: hexToAlmostWhite(this.primaryColor, 0.2),
+                  })}
+                >
+                  <div class="type-hey__pill-left">
+                    <div class="type-hey__icon">
+                      ${ChatOutlineIcon(
+                        this.foregroundColorOnPrimaryBackgroundColor
+                      )}
+                    </div>
                     <div
-                      class="type-hey__pill"
-                      @click=${this.onClickSSTOption}
                       style=${styleMap({
-                        background: this.backgroundColor,
-                      })}>
-                      <div class="type-hey__pill-left">
-                        <div class="type-hey__icon">${BookTourBlackOutlineIcon}</div>
-                          <div>
-                            <span class="title-bold">Book</span> a tour
-                          </div>
-                      </div>
-                      <div class="type-gradient__icon">${ChevronRightIcon(
-                        "black"
-                      )}</div>
-                      </div>
-                    </div>`
-                : ""}
-              ${this.overrideRentgrata && hasRentgrata()
-                ? html`
+                        color: this.foregroundColorOnPrimaryBackgroundColor,
+                      })}
+                    >
+                      <span class="title-bold">Chat</span> with us
+                    </div>
+                  </div>
+                  <div class="type-gradient__icon">
+                    ${ChevronRightIcon(
+                      this.foregroundColorOnPrimaryBackgroundColor
+                    )}
+                  </div>
+                </div>
+              `
+            : ""}
+        </div>
+
+        <div class="type-hey__bottom-section">
+          <div class="type-hey__botton-section-pills">
+            ${pills.map((p) => p.pill)}
+            ${this.overrideRentgrata && hasRentgrata()
+              ? html`
                     <div
                       class="type-hey__pill"
                       @click=${() => {
@@ -532,272 +529,278 @@ export class Launcher extends LitElement {
                         background: this.backgroundColor,
                       })}>
                       <div class="type-hey__pill-left">
-                        <div class="type-hey__icon">${ContactResidentBlackOutlineIcon}</div>
+                        <div class="type-hey__icon">${ContactResidentIcon(
+                          "black"
+                        )}</div>
                           <div>
                             <span class="title-bold">Contact</span> a resident
                           </div>
                       </div>
                       <div class="type-gradient__icon">${ChevronRightIcon(
-                        "black"
+                        this.foregroundColorOnSecondaryBackgroundColor
                       )}</div>
                       </div>
                     </div>`
-                : ""}
-            </div>
+              : ""}
+          </div>
 
-            <div class="type-hey__bottom-info">
-              <div class="type-hey__bottom-info-inner">
-                Online <span class="title-bold">24 hours</span> a day,
-                <span class="title-bold">7</span> days a week
-              </div>
+          <div class="type-hey__bottom-info">
+            <div class="type-hey__bottom-info-inner">
+              Online <span class="title-bold">24 hours</span> a day,
+              <span class="title-bold">7</span> days a week
             </div>
           </div>
         </div>
-      `;
-    }
+      </div>
+    `;
+  };
 
-    {
-      /* PUR is very insistent on the ordering of our launch statuses */
-    }
-    if (
+  private verticalPillList = (): TemplateResult => {
+    // Some clients are insisting on the tour pill being at the top
+    const showTourAtTop =
       this.orgSlug === "Pacific Urban Residential" ||
-      this.orgSlug === "cbc11aba-21c4-4571-bc43-ff9d86a029e3"
-    ) {
-      return html` <div class="vertical-pill-list">
-        ${this.hasChatEnabledDesktop
-          ? html`<button
-              @click=${this.onClickMinimize}
-              class="minimize-button"
-              aria-label="Minimize"
-            >
-              <div class="chevron-down">${ChevronRightIcon("black")}</div>
-            </button>`
-          : ""}
-        ${this.hasSSTEnabledDesktop
+      this.orgSlug === "cbc11aba-21c4-4571-bc43-ff9d86a029e3";
+
+    const verticalPillListItems: {
+      pillKey: string;
+      pill: TemplateResult | null;
+    }[] = [
+      {
+        pillKey: "Chat",
+        pill: this.hasChatEnabledDesktop
           ? html`
-              <div
-                @click=${this.onClickSSTOption}
+              <div class="inner-pill-wrapper"
                 style=${styleMap({
-                  background: this.brandColor,
+                  background: showTourAtTop
+                    ? this.backgroundColor
+                    : this.primaryColor,
                 })}
+                @click=${this.onChatTapped}>
+                  <div class="vertical-pill-left">
+                    <div class="vertical-pill-icon">${ChatOutlineIcon(
+                      showTourAtTop
+                        ? this.foregroundColorOnSecondaryBackgroundColor
+                        : this.foregroundColorOnPrimaryBackgroundColor
+                    )}</div>
+                    <div class="vertical-pill-title" style=${styleMap({
+                      color: showTourAtTop
+                        ? this.foregroundColorOnSecondaryBackgroundColor
+                        : this.foregroundColorOnPrimaryBackgroundColor,
+                    })}>
+                      <span class="vertical-pill-bold">Chat</span> with us
+                    </div>
+                  </div>
+                  <div class="chevron-right">${ChevronRightIcon(
+                    showTourAtTop
+                      ? this.foregroundColorOnSecondaryBackgroundColor
+                      : this.foregroundColorOnPrimaryBackgroundColor
+                  )}</div>
+              </div>
+            </div>
+          `
+          : null,
+      },
+      {
+        pillKey: "SST",
+        pill: this.hasSSTEnabledDesktop
+          ? html`
+              <div
+                @click=${this.onClickSSTOption}
                 id="overlay-inner-pill"
                 class="inner-pill-wrapper"
+                style=${styleMap({
+                  background: showTourAtTop
+                    ? this.primaryColor
+                    : this.backgroundColor,
+                })}
               >
                 <div class="vertical-pill-left">
                   <div class="vertical-pill-icon">
-                    ${BookTourBlackOutlineIcon}
+                    ${BookTourOutlineIcon(
+                      showTourAtTop
+                        ? this.foregroundColorOnPrimaryBackgroundColor
+                        : this.foregroundColorOnSecondaryBackgroundColor
+                    )}
                   </div>
-                  <div class="vertical-pill-title">
-                    <span class="vertical-pill-bold">Book</span> a tour
+                  <div
+                    class="vertical-pill-title"
+                    style=${styleMap({
+                      color: showTourAtTop
+                        ? this.foregroundColorOnPrimaryBackgroundColor
+                        : this.foregroundColorOnSecondaryBackgroundColor,
+                    })}
+                  >
+                    <span class="vertical-pill-bold">Book</span>
+                    a tour
                   </div>
                 </div>
                 <div class="chevron-right">
-                  ${ChevronRightIcon(this.foregroundColorOnCustomBackground)}
+                  ${ChevronRightIcon(
+                    showTourAtTop
+                      ? this.foregroundColorOnPrimaryBackgroundColor
+                      : this.foregroundColorOnSecondaryBackgroundColor
+                  )}
                 </div>
               </div>
             `
-          : ""}
-        ${this.hasChatEnabledDesktop
+          : null,
+      },
+      {
+        pillKey: "Email",
+        pill: this.hasEmailEnabledDesktop
           ? html`
-              <div class="inner-pill-wrapper"
-            @click=${this.onChatTapped}>
+              <div
+                @click=${this.onClickEmailOption}
+                class="inner-pill-wrapper"
+                style=${styleMap({
+                  background: this.backgroundColor,
+                })}
+              >
                 <div class="vertical-pill-left">
-                  <div class="vertical-pill-icon">${ChatBlackOutlineIcon}</div>
-                  <div class="vertical-pill-title">
-                    <span class="vertical-pill-bold">Chat</span> with us
+                  <div class="vertical-pill-icon">
+                    ${EmailOutlineIcon(
+                      this.foregroundColorOnSecondaryBackgroundColor
+                    )}
                   </div>
-                </div>
-                <div class="chevron-right">${ChevronRightIcon("black")}</div>
-              </div>
-            </div>
-          `
-          : ""}
-        ${this.hasEmailEnabledDesktop
-          ? html`
-              <div @click=${this.onClickEmailOption} class="inner-pill-wrapper">
-                <div class="vertical-pill-left">
-                  <div class="vertical-pill-icon">${EmailBlackOutlineIcon}</div>
-                  <div class="vertical-pill-title">
-                    <span class="vertical-pill-bold">Email</span> an agent
+                  <div
+                    class="vertical-pill-title"
+                    style=${styleMap({
+                      color: this.foregroundColorOnSecondaryBackgroundColor,
+                    })}
+                  >
+                    <span class="vertical-pill-bold">Email</span>
+                    an agent
                   </div>
                 </div>
-                <div class="chevron-right">${ChevronRightIcon("black")}</div>
-              </div>
-            `
-          : ""}
-        ${this.phoneNumber &&
-        (this.hasCallUsEnabledDesktop || this.hasTextUsEnabledDesktop)
-          ? html`
-              <div @click=${this.onClickPhoneOption} class="inner-pill-wrapper">
-                <div class="vertical-pill-left">
-                  <div class="vertical-pill-icon">${PhoneBlackOutlineIcon}</div>
-                  ${this.hasCallUsEnabledDesktop && this.hasTextUsEnabledDesktop
-                    ? html`
-                        <div class="vertical-pill-title">
-                          <span class="vertical-pill-bold">Call</span> or
-                          <span class="vertical-pill-bold">text</span> us
-                        </div>
-                      `
-                    : ""}
-                  ${this.hasCallUsEnabledDesktop &&
-                  !this.hasTextUsEnabledDesktop
-                    ? html`
-                        <div class="vertical-pill-title">
-                          <span class="vertical-pill-bold">Call</span> us
-                        </div>
-                      `
-                    : ""}
-                  ${!this.hasCallUsEnabledDesktop &&
-                  this.hasTextUsEnabledDesktop
-                    ? html`
-                        <div class="vertical-pill-title">
-                          <span class="vertical-pill-bold">Text</span> us
-                        </div>
-                      `
-                    : ""}
+                <div class="chevron-right">
+                  ${ChevronRightIcon(
+                    this.foregroundColorOnSecondaryBackgroundColor
+                  )}
                 </div>
-                <div class="chevron-right">${ChevronRightIcon("black")}</div>
               </div>
             `
-          : ""}
-      </div>`;
+          : null,
+      },
+      {
+        pillKey: "Phone",
+        pill:
+          this.phoneNumber &&
+          (this.hasCallUsEnabledDesktop || this.hasTextUsEnabledDesktop)
+            ? html`
+                <div
+                  @click=${this.onClickPhoneOption}
+                  class="inner-pill-wrapper"
+                  style=${styleMap({
+                    background: this.backgroundColor,
+                  })}
+                >
+                  <div class="vertical-pill-left">
+                    <div class="vertical-pill-icon">
+                      ${PhoneOutlineIcon(
+                        this.foregroundColorOnSecondaryBackgroundColor
+                      )}
+                    </div>
+                    ${this.hasCallUsEnabledDesktop &&
+                    this.hasTextUsEnabledDesktop
+                      ? html`
+                          <div
+                            class="vertical-pill-title"
+                            style=${styleMap({
+                              color:
+                                this.foregroundColorOnSecondaryBackgroundColor,
+                            })}
+                          >
+                            <span class="vertical-pill-bold">Call</span> or
+                            <span class="vertical-pill-bold">text</span> us
+                          </div>
+                        `
+                      : ""}
+                    ${this.hasCallUsEnabledDesktop &&
+                    !this.hasTextUsEnabledDesktop
+                      ? html`
+                          <div
+                            class="vertical-pill-title"
+                            style=${styleMap({
+                              color:
+                                this.foregroundColorOnSecondaryBackgroundColor,
+                            })}
+                          >
+                            <span class="vertical-pill-bold">Call</span> us
+                          </div>
+                        `
+                      : ""}
+                    ${!this.hasCallUsEnabledDesktop &&
+                    this.hasTextUsEnabledDesktop
+                      ? html`
+                          <div
+                            class="vertical-pill-title"
+                            style=${styleMap({
+                              color:
+                                this.foregroundColorOnSecondaryBackgroundColor,
+                            })}
+                          >
+                            <span class="vertical-pill-bold">Text</span> us
+                          </div>
+                        `
+                      : ""}
+                  </div>
+                  <div class="chevron-right">
+                    ${ChevronRightIcon(
+                      this.foregroundColorOnSecondaryBackgroundColor
+                    )}
+                  </div>
+                </div>
+              `
+            : null,
+      },
+    ];
+    const pills = verticalPillListItems.filter((v) => !!v.pill);
+    if (showTourAtTop) {
+      const sstIndex = pills.findIndex((p) => p.pillKey === "SST");
+      if (sstIndex !== -1) {
+        const [sstPill] = pills.splice(sstIndex, 1);
+        pills.unshift(sstPill);
+      }
     }
-    return html` <div class="vertical-pill-list">
-      ${this.hasChatEnabledDesktop
-        ? html`<button
-            @click=${this.onClickMinimize}
-            class="minimize-button"
-            aria-label="Minimize"
-          >
-            <div class="chevron-down">${ChevronRightIcon("black")}</div>
-          </button>`
-        : ""}
-      ${this.hasChatEnabledDesktop
-        ? html`
-              <div id="overlay-inner-pill" class="inner-pill-wrapper"
-              style=${styleMap({
-                background: this.brandColor,
-              })} @click=${this.onChatTapped}>
+    return html`
+      <div class="vertical-pill-list">
+        <div class="vertical-pill-list">
+          ${this.hasChatEnabledDesktop
+            ? html`<button
+                @click=${this.onClickMinimize}
+                class="minimize-button"
+                aria-label="Minimize"
+              >
+                <div class="chevron-down">${ChevronRightIcon("black")}</div>
+              </button>`
+            : ""}
+          ${pills.map((p) => p.pill)}
+          ${this.overrideRentgrata && hasRentgrata()
+            ? html`<div
+                @click=${() => {
+                  openRengrataWidget();
+                }}
+                class="inner-pill-wrapper"
+                style=${styleMap({
+                  background: this.backgroundColor,
+                })}
+              >
                 <div class="vertical-pill-left">
                   <div class="vertical-pill-icon">
-                    ${ChatOutlineIcon(this.foregroundColorOnCustomBackground)}
+                    ${ContactResidentIcon(
+                      this.foregroundColorOnSecondaryBackgroundColor
+                    )}
                   </div>
-                  <div class="vertical-pill-title" style=${styleMap({
-                    color: this.foregroundColorOnCustomBackground,
-                  })}>
-                    <span class="vertical-pill-bold">Chat</span> with us
+                  <div class="vertical-pill-title">
+                    <span class="vertical-pill-bold">Contact</span> a resident
                   </div>
                 </div>
-                <div class="chevron-right">${ChevronRightIcon(
-                  this.foregroundColorOnCustomBackground
-                )}</div>
-              </div>
-            </div>
-          `
-        : ""}
-      ${this.hasEmailEnabledDesktop
-        ? html`
-            <div
-              @click=${this.onClickEmailOption}
-              class="inner-pill-wrapper"
-              style=${styleMap({
-                background: this.backgroundColor,
-              })}
-            >
-              <div class="vertical-pill-left">
-                <div class="vertical-pill-icon">${EmailBlackOutlineIcon}</div>
-                <div class="vertical-pill-title">
-                  <span class="vertical-pill-bold">Email</span> an agent
-                </div>
-              </div>
-              <div class="chevron-right">${ChevronRightIcon("black")}</div>
-            </div>
-          `
-        : ""}
-      ${this.phoneNumber &&
-      (this.hasCallUsEnabledDesktop || this.hasTextUsEnabledDesktop)
-        ? html`
-            <div
-              @click=${this.onClickPhoneOption}
-              class="inner-pill-wrapper"
-              style=${styleMap({
-                background: this.backgroundColor,
-              })}
-            >
-              <div class="vertical-pill-left">
-                <div class="vertical-pill-icon">${PhoneBlackOutlineIcon}</div>
-                ${this.hasCallUsEnabledDesktop && this.hasTextUsEnabledDesktop
-                  ? html`
-                      <div class="vertical-pill-title">
-                        <span class="vertical-pill-bold">Call</span> or
-                        <span class="vertical-pill-bold">text</span> us
-                      </div>
-                    `
-                  : ""}
-                ${this.hasCallUsEnabledDesktop && !this.hasTextUsEnabledDesktop
-                  ? html`
-                      <div class="vertical-pill-title">
-                        <span class="vertical-pill-bold">Call</span> us
-                      </div>
-                    `
-                  : ""}
-                ${!this.hasCallUsEnabledDesktop && this.hasTextUsEnabledDesktop
-                  ? html`
-                      <div class="vertical-pill-title">
-                        <span class="vertical-pill-bold">Text</span> us
-                      </div>
-                    `
-                  : ""}
-              </div>
-              <div class="chevron-right">${ChevronRightIcon("black")}</div>
-            </div>
-          `
-        : ""}
-      ${this.hasSSTEnabledDesktop
-        ? html`
-            <div
-              @click=${this.onClickSSTOption}
-              class="inner-pill-wrapper"
-              style=${styleMap({
-                background: this.backgroundColor,
-              })}
-            >
-              <div class="vertical-pill-left">
-                <div class="vertical-pill-icon">
-                  ${BookTourBlackOutlineIcon}
-                </div>
-                <div class="vertical-pill-title">
-                  <span class="vertical-pill-bold">Book</span> a tour
-                </div>
-              </div>
-              <div class="chevron-right">${ChevronRightIcon("black")}</div>
-            </div>
-          `
-        : ""}
-      ${this.overrideRentgrata && hasRentgrata()
-        ? html`
-            <div
-              @click=${() => {
-                openRengrataWidget();
-              }}
-              class="inner-pill-wrapper"
-              style=${styleMap({
-                background: this.backgroundColor,
-              })}
-            >
-              <div class="vertical-pill-left">
-                <div class="vertical-pill-icon">
-                  ${ContactResidentBlackOutlineIcon}
-                </div>
-                <div class="vertical-pill-title">
-                  <span class="vertical-pill-bold">Contact</span> a resident
-                </div>
-              </div>
-              <div class="chevron-right">${ChevronRightIcon("black")}</div>
-            </div>
-          `
-        : ""}
-    </div>`;
+                <div class="chevron-right">${ChevronRightIcon("black")}</div>
+              </div>`
+            : ""}
+        </div>
+      </div>
+    `;
   };
 
   render(): TemplateResult {
@@ -852,6 +855,24 @@ export class Launcher extends LitElement {
       };
     }
 
+    const overrideStyleWindows = {
+      top:
+        !isMobile() && this.top !== undefined && !isNaN(this.top)
+          ? `${this.top}px`
+          : undefined,
+      bottom:
+        !isMobile() && this.bottom !== undefined && !isNaN(this.bottom)
+          ? `${this.bottom}px`
+          : undefined,
+      left:
+        !isMobile() && this.left !== undefined && !isNaN(this.left)
+          ? `${this.left}px`
+          : undefined,
+      right:
+        !isMobile() && this.right !== undefined && !isNaN(this.right)
+          ? `${this.right}px`
+          : undefined,
+    };
     return html`
       <div
         class=${classNames({
@@ -893,26 +914,7 @@ export class Launcher extends LitElement {
         ${this.isEmailWindowOpen
           ? html`<div
               class="launcher__window-wrapper"
-              style=${styleMap({
-                top:
-                  !isMobile() && this.top !== undefined && !isNaN(this.top)
-                    ? `${this.top}px`
-                    : undefined,
-                bottom:
-                  !isMobile() &&
-                  this.bottom !== undefined &&
-                  !isNaN(this.bottom)
-                    ? `${this.bottom}px`
-                    : undefined,
-                left:
-                  !isMobile() && this.left !== undefined && !isNaN(this.left)
-                    ? `${this.left}px`
-                    : undefined,
-                right:
-                  !isMobile() && this.right !== undefined && !isNaN(this.right)
-                    ? `${this.right}px`
-                    : undefined,
-              })}
+              style=${styleMap(overrideStyleWindows)}
             >
               <email-us-window
                 id="email-us-window"
@@ -934,26 +936,7 @@ export class Launcher extends LitElement {
         ${this.isSSTWindowOpen
           ? html`<div
               class="launcher__window-wrapper"
-              style=${styleMap({
-                top:
-                  !isMobile() && this.top !== undefined && !isNaN(this.top)
-                    ? `${this.top}px`
-                    : undefined,
-                bottom:
-                  !isMobile() &&
-                  this.bottom !== undefined &&
-                  !isNaN(this.bottom)
-                    ? `${this.bottom}px`
-                    : undefined,
-                left:
-                  !isMobile() && this.left !== undefined && !isNaN(this.left)
-                    ? `${this.left}px`
-                    : undefined,
-                right:
-                  !isMobile() && this.right !== undefined && !isNaN(this.right)
-                    ? `${this.right}px`
-                    : undefined,
-              })}
+              style=${styleMap(overrideStyleWindows)}
             >
               <tour-scheduler
                 id="tour-scheduler-window"
@@ -971,7 +954,11 @@ export class Launcher extends LitElement {
                 buildingId=${this.buildingId}
                 featureFlagShowDropdown="${this.featureFlagShowDropdown}"
                 .buildingName=${this.buildingName}
-                .brandColor=${this.brandColor}
+                .primaryColor=${this.primaryColor}
+                .foregroundColorOnPrimaryBackgroundColor=${this
+                  .foregroundColorOnPrimaryBackgroundColor}
+                .foregroundColorOnSecondaryBackgroundColor=${this
+                  .foregroundColorOnSecondaryBackgroundColor}
                 .compactDesign=${this.showTourNextToChat
                   ? this.showTourNextToChat
                   : ""}
@@ -984,28 +971,7 @@ export class Launcher extends LitElement {
           ? html`
               <div
                 class="launcher__window-wrapper"
-                style=${styleMap({
-                  top:
-                    !isMobile() && this.top !== undefined && !isNaN(this.top)
-                      ? `${this.top}px`
-                      : undefined,
-                  bottom:
-                    !isMobile() &&
-                    this.bottom !== undefined &&
-                    !isNaN(this.bottom)
-                      ? `${this.bottom}px`
-                      : undefined,
-                  left:
-                    !isMobile() && this.left !== undefined && !isNaN(this.left)
-                      ? `${this.left}px`
-                      : undefined,
-                  right:
-                    !isMobile() &&
-                    this.right !== undefined &&
-                    !isNaN(this.right)
-                      ? `${this.right}px`
-                      : undefined,
-                })}
+                style=${styleMap(overrideStyleWindows)}
               >
                 <call-us-window
                   id="call-us-window"