@triptease/tt-navbar 0.0.39 → 0.0.41

package/dist/web/urlMappings.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.39
+* @triptease/tt-navbar v0.0.41
 */
 
 // src/urlMappings.ts

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent tt-navbar following open-wc recommendations",
   "license": "MIT",
   "author": "tt-navbar",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",

package/src/NavbarController.ts

@@ -5,6 +5,8 @@ export class NavbarController implements ReactiveController {
 
   private _isOpen = true;
 
+  private _hasInitialized = false;
+
   constructor(host: ReactiveControllerHost) {
     (this.host = host).addController(this);
   }
@@ -13,21 +15,21 @@ export class NavbarController implements ReactiveController {
     return this._isOpen;
   }
 
-  hostConnected() {
-    if (window.Clerk) {
+  hostUpdate() {
+    if (!this._hasInitialized && window.Clerk) {
       const userSetting =
         window.Clerk.user?.unsafeMetadata?.preferences?.ui?.navigationOpen;
 
       if (userSetting !== undefined) {
         this._isOpen = userSetting;
+        this._hasInitialized = true;
         this.host.requestUpdate();
       }
     }
   }
 
   async toggle() {
-    const newState = !this._isOpen;
-    this._isOpen = newState;
+    this._isOpen = !this._isOpen;
 
     if (window.Clerk) {
       await window.Clerk.user?.update({
@@ -37,7 +39,7 @@ export class NavbarController implements ReactiveController {
             ...window.Clerk.user?.unsafeMetadata?.preferences,
             ui: {
               ...window.Clerk.user?.unsafeMetadata?.preferences?.ui,
-              navigationOpen: newState,
+              navigationOpen: this.isOpen,
             },
           },
         },

package/src/TtNavbar.ts

@@ -12,7 +12,7 @@ import {
   logout,
   sidebarCollapsed,
   user,
-  wallet
+  wallet,
 } from '@triptease/icons';
 import '@triptease/tt-combobox';
 import { styles } from './styles.js';
@@ -121,10 +121,11 @@ export class TtNavbar extends LitElement {
       const parsedPath = currentPath.replace(this.clientKey, '$CLIENT_KEY');
       const mappedUrl = urlMappings[parsedPath];
       if (mappedUrl) {
-        const clientSpecificUrl = mappedUrl.includes('$CLIENT_KEY') ? mappedUrl.replace('$CLIENT_KEY', this.clientKey) : mappedUrl;
+        const clientSpecificUrl = mappedUrl.includes('$CLIENT_KEY')
+          ? mappedUrl.replace('$CLIENT_KEY', this.clientKey)
+          : mappedUrl;
         const links = Object.values(this.allNavLinks);
         bestMatch = links.find(link => link.href.includes(clientSpecificUrl));
-        console.log({ mappedUrl, clientSpecificUrl, bestMatch });
       }
     }
 
@@ -234,18 +235,21 @@ export class TtNavbar extends LitElement {
             class="nav-item"
             href=${this.buildUrl('/')}
             @click=${this.onAnchorClick}
+            data-intercom-target="dashboard"
           >${unsafeSVG(home)}<span>Dashboard</span></a
           >
           <a id="${Routes.CampaignManager}" class="nav-item" href=${this.campaignManagerUrl}
+             data-intercom-target="campaigns"
           >${unsafeSVG(campaigns)}<span>Campaigns</span></a
           >
           <a
             class="nav-item"
             href=${this.buildUrl('/$CLIENT_KEY/channels')}
             @click=${this.onAnchorClick}
+            data-intercom-target="channels"
           >${unsafeSVG(channels)}<span>Channels</span></a
           >
-          <details id="market-insights" @toggle=${this.handleToggle}>
+          <details id="market-insights" @toggle=${this.handleToggle} data-intercom-target="market-insights">
             <summary>
               ${unsafeSVG(graph)}
               <span>Market Insights</span>
@@ -256,17 +260,19 @@ export class TtNavbar extends LitElement {
                 class="sub-nav-item"
                 href=${this.buildUrl('/parity/$CLIENT_KEY')}
                 @click=${this.onAnchorClick}
+                data-intercom-target="parity-monitoring"
               >Parity monitoring</a
               >
               <a
                 class="sub-nav-item"
                 href=${this.buildUrl('/guest-insights/$CLIENT_KEY')}
                 @click=${this.onAnchorClick}
+                data-intercom-target="guest-insights"
               >Guest insights</a
               >
             </div>
           </details>
-          <details id="settings" @toggle=${this.handleToggle}>
+          <details id="settings" @toggle=${this.handleToggle} data-intercom-target="settings">
             <summary>
               ${unsafeSVG(gear)}
               <span>Settings</span>
@@ -277,30 +283,34 @@ export class TtNavbar extends LitElement {
                 class="sub-nav-item"
                 href=${this.buildUrl('/$CLIENT_KEY/guest-behavioural-data')}
                 @click=${this.onAnchorClick}
+                data-intercom-target="email-setup"
               >Email setup</a
               >
               <a
                 class="sub-nav-item"
                 href=${this.buildUrl('/$CLIENT_KEY/crm-config')}
                 @click=${this.onAnchorClick}
+                data-intercom-target="crm-connectivity"
               >CRM connectivity</a
               >
               <a
                 class="sub-nav-item"
                 href=${this.buildUrl('/settings/$CLIENT_KEY/guides')}
                 @click=${this.onAnchorClick}
+                data-intercom-target="group-settings"
               >Group settings</a
               >
               <a
                 class="sub-nav-item"
                 href=${this.buildUrl('/settings/$CLIENT_KEY/hotels')}
                 @click=${this.onAnchorClick}
+                data-intercom-target="property-settings"
               >Property settings</a
               >
             </div>
           </details>
           <hr />
-          <details id="account" @toggle=${this.handleToggle}>
+          <details id="account" @toggle=${this.handleToggle} data-intercom-target="account">
             <summary>
               ${unsafeSVG(user)}
               <span>Account</span>
@@ -311,17 +321,19 @@ export class TtNavbar extends LitElement {
                 class="sub-nav-item"
                 href=${this.buildUrl('/account')}
                 @click=${this.onAnchorClick}
+                data-intercom-target="user-settings"
               >User settings</a
               >
               <a
                 class="sub-nav-item"
                 href=${this.buildUrl('/account/team/$CLIENT_KEY')}
                 @click=${this.onAnchorClick}
+                data-intercom-target="team-permissions"
               >Team and permissions</a
               >
             </div>
           </details>
-          <details id="billing-routes" @toggle=${this.handleToggle}>
+          <details id="billing-routes" @toggle=${this.handleToggle} data-intercom-target="billing">
             <summary>
               ${unsafeSVG(wallet)}
               <span>Billing</span>
@@ -332,12 +344,14 @@ export class TtNavbar extends LitElement {
                 class="sub-nav-item"
                 href=${this.buildUrl('/account/billing-management/$CLIENT_KEY')}
                 @click=${this.onAnchorClick}
+                data-intercom-target="booking-reconciliation"
               >Booking reconciliation</a
               >
               <a
                 class="sub-nav-item"
                 href=${this.buildUrl('/subscriptions/$CLIENT_KEY')}
                 @click=${this.onAnchorClick}
+                data-intercom-target="subscriptions"
               >Subscriptions</a
               >
             </div>
@@ -379,26 +393,26 @@ export class TtNavbar extends LitElement {
               ${
                 this.clients.length > 1
                   ? html`
-                    <tt-combobox
-                      .openUpward=${true}
-                      .value=${this.clientKey ? [this.clientKey] : []}
-                      @change=${this.handleClientChange}
-                    >
-                      ${this.clients.map(
-                        client => html`
-                          <option slot="option" value=${client.clientKey}>
-                            ${client.displayName}
-                          </option>
-                        `
-                      )}
-                    </tt-combobox>
-                  `
+                      <tt-combobox
+                        .openUpward=${true}
+                        .value=${this.clientKey ? [this.clientKey] : []}
+                        @change=${this.handleClientChange}
+                      >
+                        ${this.clients.map(
+                          client => html`
+                            <option slot="option" value=${client.clientKey}>
+                              ${client.displayName}
+                            </option>
+                          `,
+                        )}
+                      </tt-combobox>
+                    `
                   : html`
-                    <div class="single-client-name">
-                      ${this.clients.find(m => m.clientKey === this.clientKey)
-                        ?.displayName}
-                    </div>
-                  `
+                      <div class="single-client-name">
+                        ${this.clients.find(m => m.clientKey === this.clientKey)
+                          ?.displayName}
+                      </div>
+                    `
               }
             </div>
             <a
@@ -406,6 +420,7 @@ export class TtNavbar extends LitElement {
               class="nav-item"
               href=${this.buildUrl('/logout')}
               @click=${this.onAnchorClick}
+              data-intercom-target="logout"
             >${unsafeSVG(logout)}<span>Logout</span></a>
           </div>
       </nav>

package/test/tt-navbar.test.ts

@@ -461,6 +461,7 @@ describe('TtNavbar', () => {
     ) as HTMLButtonElement;
 
     navbarToggleBtn.click();
+    await elementUpdated(navbar);
 
     await expect(timesCalled).to.equal(1);
     expect(calledWith).to.deep.equal({