@triptease/tt-navbar 0.0.35 → 0.0.36

package/dist/web/urlMappings.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.35
+* @triptease/tt-navbar v0.0.36
 */
 
 // 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.35",
+  "version": "0.0.36",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -27,6 +27,7 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && storybook build"
   },
   "dependencies": {
+    "@clerk/clerk-js": "^5.102.1",
     "@triptease/icons": "^1.1.1",
     "@triptease/tt-combobox": "^5.3.0",
     "lit": "^3.1.4"

package/src/NavbarController.ts

@@ -0,0 +1,40 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+
+export class NavbarController implements ReactiveController {
+  host: ReactiveControllerHost;
+
+  private _isOpen = true;
+
+  constructor(host: ReactiveControllerHost) {
+    (this.host = host).addController(this);
+  }
+
+  get isOpen() {
+    return this._isOpen;
+  }
+
+  hostConnected() {
+    if (window.Clerk) {
+      const userSetting =
+        window.Clerk.user?.unsafeMetadata?.preferences?.ui?.navigationOpen;
+
+      if (userSetting !== undefined) {
+        this._isOpen = userSetting;
+        this.host.requestUpdate();
+      }
+    }
+  }
+
+  async toggle() {
+    const newState = !this._isOpen;
+    this._isOpen = newState;
+
+    if (window.Clerk) {
+      await window.Clerk.user?.update({
+        unsafeMetadata: { preferences: { ui: { navigationOpen: newState } } },
+      });
+    }
+
+    this.host.requestUpdate();
+  }
+}

package/src/TtNavbar.ts

@@ -12,13 +12,14 @@ import {
   logout,
   sidebarCollapsed,
   user,
-  wallet
+  wallet,
 } from '@triptease/icons';
 import '@triptease/tt-combobox';
 import { styles } from './styles.js';
 import { tripteaseLogo } from './triptease-logo.js';
 import { urlMappings } from './urlMappings.js';
 import { Routes } from './Routes.js';
+import { NavbarController } from './NavbarController.js';
 
 const jsonArrayConverter = (value: string | null) => {
   if (!value) return [];
@@ -51,7 +52,7 @@ export class TtNavbar extends LitElement {
   clients: { clientKey: string; displayName: string }[] = [];
 
   @property({ type: Object })
-  onClientChange: ((clientKeySelected: string) => void ) | undefined;
+  onClientChange: ((clientKeySelected: string) => void) | undefined;
 
   @queryAll('details')
   protected allDetailsElements!: Array<HTMLDetailsElement>;
@@ -62,6 +63,8 @@ export class TtNavbar extends LitElement {
   @state()
   private sidebarOpen = true;
 
+  private navbarController = new NavbarController(this);
+
   protected firstUpdated() {
     this.setActiveState();
   }
@@ -169,7 +172,7 @@ export class TtNavbar extends LitElement {
 
   private toggleSidebar = () => {
     this.closeAllDetails();
-    this.sidebarOpen = !this.sidebarOpen;
+    this.navbarController.toggle();
   };
 
   private handleToggle = (e: ToggleEvent) => {
@@ -177,8 +180,8 @@ export class TtNavbar extends LitElement {
     const target = e.currentTarget as HTMLDetailsElement;
 
     if (newState === 'open') {
-      if (!this.sidebarOpen) {
-        this.sidebarOpen = true;
+      if (!this.navbarController.isOpen) {
+        this.navbarController.toggle();
       }
 
       this.closeAllDetails(target);
@@ -212,8 +215,8 @@ export class TtNavbar extends LitElement {
 
   render() {
     return html`
-      <nav id=${this.id} class="${this.sidebarOpen ? '' : 'sidebar-closed'}">
-        <div class="sidebar-header ${this.sidebarOpen ? '' : 'sidebar-closed'}">
+      <nav id=${this.id} class="${this.navbarController.isOpen ? '' : 'sidebar-closed'}">
+        <div class="sidebar-header ${this.navbarController.isOpen ? '' : 'sidebar-closed'}">
           <div class="logo">
             ${unsafeSVG(tripteaseLogo)}
           </div>
@@ -226,7 +229,7 @@ export class TtNavbar extends LitElement {
           </button>
         </div>
 
-        <div class="nav-items ${this.sidebarOpen ? '' : 'sidebar-closed'}">
+        <div class="nav-items ${this.navbarController.isOpen ? '' : 'sidebar-closed'}">
           <a
             class="nav-item"
             href=${this.buildUrl('/')}
@@ -340,7 +343,7 @@ export class TtNavbar extends LitElement {
             </div>
           </details>
         </div>
-        <div class="tertiary-nav ${this.sidebarOpen ? '' : 'sidebar-closed'}">
+        <div class="tertiary-nav ${this.navbarController.isOpen ? '' : 'sidebar-closed'}">
           <div id="external-links" class="nav-items">
             <a
               class="nav-item external-link"
@@ -373,23 +376,30 @@ export class TtNavbar extends LitElement {
           </div>
           <div class='nav-items'>
             <div id="client-selector">
-              ${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>
-              ` : html`
-                <div class="single-client-name">
-                  ${this.clients.find((m) => m.clientKey === this.clientKey)?.displayName}
-                </div>
-              `}
+              ${
+                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>
+                    `
+                  : html`
+                      <div class="single-client-name">
+                        ${this.clients.find(m => m.clientKey === this.clientKey)
+                          ?.displayName}
+                      </div>
+                    `
+              }
             </div>
             <a
               id="logout-link"

package/src/global.d.ts

@@ -0,0 +1,16 @@
+import { Clerk } from '@clerk/clerk-js';
+
+declare global {
+  interface Window {
+    Clerk?: typeof Clerk;
+  }
+
+  interface UserUnsafeMetadata {
+    preferences: {
+      ui?: {
+        navigationVersion?: 2;
+        navigationOpen?: boolean;
+      };
+    };
+  }
+}

package/test/tt-navbar.test.ts

@@ -1,5 +1,12 @@
+import { Clerk } from '@clerk/clerk-js';
 import '../src/tt-navbar.js';
-import { elementUpdated, expect, fixture, nextFrame, waitUntil } from '@open-wc/testing';
+import {
+  elementUpdated,
+  expect,
+  fixture,
+  nextFrame,
+  waitUntil,
+} from '@open-wc/testing';
 import { TtNavbar } from '../src/index.js';
 import { Routes } from '../src/Routes.js';
 
@@ -15,12 +22,16 @@ const getLinkByHref = (links: NodeListOf<HTMLAnchorElement>, href: string) => {
 };
 
 const selectComboboxOption = async (combobox: Element, value: string) => {
-  const input = combobox.shadowRoot!.querySelector('[role="combobox"]') as HTMLInputElement;
+  const input = combobox.shadowRoot!.querySelector(
+    '[role="combobox"]',
+  ) as HTMLInputElement;
   input.click();
 
   await elementUpdated(combobox);
 
-  const option = combobox.shadowRoot!.querySelector(`[role="option"][data-value="${value}"]`) as HTMLLIElement;
+  const option = combobox.shadowRoot!.querySelector(
+    `[role="option"][data-value="${value}"]`,
+  ) as HTMLLIElement;
   option.click();
 };
 
@@ -29,15 +40,15 @@ const isVisuallyHidden = (element: Element) => {
 
   return Boolean(
     style.position === 'absolute' &&
-    style.width === '1px' &&
-    style.height === '1px' &&
-    style.margin === '-1px' &&
-    style.padding === '0px' &&
-    style.borderWidth === '0px' &&
-    style.overflow === 'hidden' &&
-    style.clip === 'rect(0px, 0px, 0px, 0px)' &&
-    style.clipPath === 'inset(50%)' &&
-    style.whiteSpace === 'nowrap'
+      style.width === '1px' &&
+      style.height === '1px' &&
+      style.margin === '-1px' &&
+      style.padding === '0px' &&
+      style.borderWidth === '0px' &&
+      style.overflow === 'hidden' &&
+      style.clip === 'rect(0px, 0px, 0px, 0px)' &&
+      style.clipPath === 'inset(50%)' &&
+      style.whiteSpace === 'nowrap',
   );
 };
 
@@ -53,7 +64,7 @@ describe('TtNavbar', () => {
   });
   it('should render with the default links', async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
     );
     const links = navbar.shadowRoot?.querySelectorAll('a');
 
@@ -80,7 +91,7 @@ describe('TtNavbar', () => {
   it('should render platform URLs against the base URL when it is defined', async () => {
     const platformUrl = 'https://app.triptease.io';
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY} platform-url="${platformUrl}"></tt-navbar>`
+      `<tt-navbar client-key=${CLIENT_KEY} platform-url="${platformUrl}"></tt-navbar>`,
     );
     const links = navbar.shadowRoot?.querySelectorAll('a');
 
@@ -88,7 +99,8 @@ describe('TtNavbar', () => {
       expect(getLinkByHref(links, `${platformUrl}/`)).to.exist;
       expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io'))
         .to.exist; // This shouldn't change
-      expect(getLinkByHref(links, `${platformUrl}/${CLIENT_KEY}/channels`)).to.exist;
+      expect(getLinkByHref(links, `${platformUrl}/${CLIENT_KEY}/channels`)).to
+        .exist;
     }
   });
 
@@ -101,7 +113,7 @@ describe('TtNavbar', () => {
     };
 
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
     );
     navbar.navigate = onNavigate;
     await navbar.updateComplete;
@@ -111,22 +123,24 @@ describe('TtNavbar', () => {
 
     await waitUntil(
       () => expect(navigateEventCount).to.equal(13),
-      'navigate event did not fire'
+      'navigate event did not fire',
     );
   });
 
   it('should render a combobox when multiple clients are provided', async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
     );
     navbar.clients = [
       { clientKey: CLIENT_KEY, displayName: 'Client One' },
-      { clientKey: 'abc123', displayName: 'Client Two' }
+      { clientKey: 'abc123', displayName: 'Client Two' },
     ];
     await navbar.updateComplete;
 
     const combobox = navbar.shadowRoot?.querySelector('tt-combobox');
-    const singleClientName = navbar.shadowRoot?.querySelector('.single-client-name');
+    const singleClientName = navbar.shadowRoot?.querySelector(
+      '.single-client-name',
+    );
 
     expect(combobox).to.exist;
     expect(singleClientName).to.not.exist;
@@ -135,14 +149,14 @@ describe('TtNavbar', () => {
 
   it('should render the client name when only one client is provided', async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
     );
-    navbar.clients = [
-      { clientKey: CLIENT_KEY, displayName: 'Single Client' }
-    ];
+    navbar.clients = [{ clientKey: CLIENT_KEY, displayName: 'Single Client' }];
     await navbar.updateComplete;
 
-    const singleClientName = navbar.shadowRoot?.querySelector('.single-client-name');
+    const singleClientName = navbar.shadowRoot?.querySelector(
+      '.single-client-name',
+    );
     const combobox = navbar.shadowRoot?.querySelector('tt-combobox');
 
     expect(singleClientName).to.exist;
@@ -152,7 +166,7 @@ describe('TtNavbar', () => {
 
   it('should render the logout link', async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
     );
 
     const links = navbar.shadowRoot?.querySelectorAll('a');
@@ -163,7 +177,7 @@ describe('TtNavbar', () => {
 
   it('should close other details when one is being opened', async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
     );
 
     const allDetails = navbar.shadowRoot!.querySelectorAll('summary');
@@ -189,11 +203,11 @@ describe('TtNavbar', () => {
 
   it('should collapse the navbar when toggle clicked', async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
     );
 
     const navbarToggleBtn = navbar.shadowRoot!.querySelector(
-      '#navbar-toggle-btn'
+      '#navbar-toggle-btn',
     ) as HTMLButtonElement;
 
     navbarToggleBtn.click();
@@ -223,7 +237,7 @@ describe('TtNavbar', () => {
     for (const element of [
       ...rootLinksHiddenElements,
       ...summaryHiddenElements,
-      logoutLink!
+      logoutLink!,
     ]) {
       expect(isVisuallyHidden(element)).to.be.true;
     }
@@ -233,16 +247,16 @@ describe('TtNavbar', () => {
     'market-insights',
     'settings',
     'account',
-    'billing-routes'
+    'billing-routes',
   ];
   collapsibleIds.forEach(id => {
     it(`should open the nav bar when the ${id} collapsible is clicked`, async () => {
       const navbar = await fixture<TtNavbar>(
-        `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
+        `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
       );
 
       const navbarToggleBtn = navbar.shadowRoot!.querySelector(
-        '#navbar-toggle-btn'
+        '#navbar-toggle-btn',
       ) as HTMLButtonElement;
 
       navbarToggleBtn.click();
@@ -259,7 +273,7 @@ describe('TtNavbar', () => {
       element!.click();
 
       await waitUntil(() => logo?.checkVisibility(), 'navbar should be open', {
-        timeout: 500
+        timeout: 500,
       });
     });
   });
@@ -272,7 +286,7 @@ describe('TtNavbar', () => {
     [`/parity/${CLIENT_KEY}/foo`, 'Parity'],
     [`/meta/${CLIENT_KEY}/performance`, 'Channels'],
     [`/chat/insights/${CLIENT_KEY}`, 'Channels'],
-    [`/${CLIENT_KEY}/email`, 'Channels']
+    [`/${CLIENT_KEY}/email`, 'Channels'],
   ];
 
   URLs.forEach(([route, text]) => {
@@ -281,7 +295,7 @@ describe('TtNavbar', () => {
       history.pushState({}, '', route); // 👈 mock URL
 
       const navbar = await fixture<TtNavbar>(
-        `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
+        `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
       );
 
       const anchor = navbar.shadowRoot!.querySelector('a[aria-current="page"]');
@@ -296,7 +310,7 @@ describe('TtNavbar', () => {
     const campaignManagerUrl = 'http://localhost:8000';
 
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY} platform-url=${platformUrl} campaign-manager-url=${campaignManagerUrl} active-route="${Routes.CampaignManager}"></tt-navbar>`
+      `<tt-navbar client-key=${CLIENT_KEY} platform-url=${platformUrl} campaign-manager-url=${campaignManagerUrl} active-route="${Routes.CampaignManager}"></tt-navbar>`,
     );
     const anchor = navbar.shadowRoot!.querySelector('a[aria-current="page"]');
     expect(anchor).to.exist;
@@ -310,11 +324,11 @@ describe('TtNavbar', () => {
     };
 
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
     );
     navbar.clients = [
       { clientKey: CLIENT_KEY, displayName: 'Client One' },
-      { clientKey: 'abc123', displayName: 'Client Two' }
+      { clientKey: 'abc123', displayName: 'Client Two' },
     ];
     navbar.onClientChange = onClientChange;
 
@@ -330,20 +344,23 @@ describe('TtNavbar', () => {
 
   it('should set the --nav-bar-width css variable when collapsed', async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
     );
 
-    await expect(getComputedStyle(navbar).getPropertyValue('--nav-bar-width').trim()).to.equal('260px');
+    await expect(
+      getComputedStyle(navbar).getPropertyValue('--nav-bar-width').trim(),
+    ).to.equal('260px');
 
     const navbarToggleBtn = navbar.shadowRoot!.querySelector(
-      '#navbar-toggle-btn'
+      '#navbar-toggle-btn',
     ) as HTMLButtonElement;
 
     navbarToggleBtn.click();
     await elementUpdated(navbar);
 
-    await expect(getComputedStyle(navbar).getPropertyValue('--nav-bar-width').trim()).to.equal('fit-content');
-
+    await expect(
+      getComputedStyle(navbar).getPropertyValue('--nav-bar-width').trim(),
+    ).to.equal('fit-content');
   });
 
   it('should expand the details when the current page is within that section', async () => {
@@ -351,26 +368,26 @@ describe('TtNavbar', () => {
     history.pushState({}, '', `/parity/${CLIENT_KEY}`);
 
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
     );
 
-    const marketInsightsDetails = navbar.shadowRoot!.querySelector('#market-insights') as HTMLDetailsElement;
+    const marketInsightsDetails = navbar.shadowRoot!.querySelector(
+      '#market-insights',
+    ) as HTMLDetailsElement;
 
     expect(marketInsightsDetails).to.exist;
     expect(marketInsightsDetails.open).to.be.true;
-  })
+  });
 
   it('should set the active route when receives `tetris:navigate` event', async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
     );
     // eslint-disable-next-line no-restricted-globals
-    history.pushState({}, '', `/account/billing-management/${CLIENT_KEY}`)
-
+    history.pushState({}, '', `/account/billing-management/${CLIENT_KEY}`);
 
     // Dispatch the event to change to Channels route
-    const navigateEvent = new CustomEvent('tetris:navigate', {
-    });
+    const navigateEvent = new CustomEvent('tetris:navigate', {});
     window.dispatchEvent(navigateEvent);
 
     await elementUpdated(navbar);
@@ -378,6 +395,65 @@ describe('TtNavbar', () => {
 
     expect(anchor).to.exist;
     expect(anchor!.textContent).to.include('Booking reconciliation');
+  });
+
+  it('should default to open when Clerk is not available', async () => {
+    const navbar = await fixture<TtNavbar>(
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
+    );
+
+    const logo = navbar.shadowRoot!.querySelector('.logo');
+
+    expect(window.Clerk).to.be.undefined;
+    expect(logo).to.exist;
+    expect(logo!.checkVisibility()).to.be.true;
+  });
+
+  it('should default to state stored in Clerk when set', async () => {
+    window.Clerk = {
+      user: {
+        unsafeMetadata: { preferences: { ui: { navigationOpen: false } } },
+      },
+    } as Clerk;
+
+    const navbar = await fixture<TtNavbar>(
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
+    );
+
+    const logo = navbar.shadowRoot!.querySelector('.logo');
+
+    expect(logo).to.exist;
+    expect(logo!.checkVisibility()).to.be.false;
+
+    window.Clerk = undefined; // Cleanup
+  });
+
+  it('should update Clerk state when toggling if Clerk is available', async () => {
+    let timesCalled = 0;
+
+    const mockUpdate = () => {
+      timesCalled += 1;
+    };
+
+    window.Clerk = {
+      user: {
+        update: mockUpdate,
+        unsafeMetadata: { preferences: { ui: { navigationOpen: false } } },
+      },
+    } as unknown as Clerk;
 
-  })
+    const navbar = await fixture<TtNavbar>(
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
+    );
+
+    const navbarToggleBtn = navbar.shadowRoot!.querySelector(
+      '#navbar-toggle-btn',
+    ) as HTMLButtonElement;
+
+    navbarToggleBtn.click();
+
+    await expect(timesCalled).to.equal(1);
+
+    window.Clerk = undefined; // Cleanup
+  });
 });