@triptease/tt-navbar 0.0.36 → 0.0.38

package/dist/web/urlMappings.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.36
+* @triptease/tt-navbar v0.0.38
 */
 
 // src/urlMappings.ts
@@ -10,7 +10,12 @@ var urlMappings = {
   "/messages/$CLIENT_KEY/messages": "/channels",
   "/$CLIENT_KEY/email": "/channels",
   "/pricematch/$CLIENT_KEY/performance": "/channels",
-  "/chat/insights/$CLIENT_KEY": "/channels"
+  "/chat/insights/$CLIENT_KEY": "/channels",
+  "/settings/$CLIENT_KEY/branding": "/settings/$CLIENT_KEY/guides",
+  "/settings/$CLIENT_KEY/price-check": "/settings/$CLIENT_KEY/guides",
+  "/settings/$CLIENT_KEY/price-config": "/settings/$CLIENT_KEY/guides",
+  "/settings/$CLIENT_KEY/hotel-details-finder": "/settings/$CLIENT_KEY/guides",
+  "/settings/$CLIENT_KEY/deactivation-center": "/settings/$CLIENT_KEY/guides"
 };
 export {
   urlMappings

package/dist/web/urlMappings.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/urlMappings.ts"],
-  "sourcesContent": ["type UrlMapping = Record<string, string>;\n\nconst urlMappings: UrlMapping = {\n  '/paidsearch/$CLIENT_KEY/performance': '/channels',\n  '/meta/$CLIENT_KEY/performance': '/channels',\n  '/retargeting/$CLIENT_KEY/performance': '/channels',\n  '/messages/$CLIENT_KEY/messages': '/channels',\n  '/$CLIENT_KEY/email': '/channels',\n  '/pricematch/$CLIENT_KEY/performance': '/channels',\n  '/chat/insights/$CLIENT_KEY': '/channels',\n};\n\nexport { urlMappings };\n"],
-  "mappings": ";;;;;AAEA,IAAM,cAA0B;AAAA,EAC9B,uCAAuC;AAAA,EACvC,iCAAiC;AAAA,EACjC,wCAAwC;AAAA,EACxC,kCAAkC;AAAA,EAClC,sBAAsB;AAAA,EACtB,uCAAuC;AAAA,EACvC,8BAA8B;AAChC;",
+  "sourcesContent": ["type UrlMapping = Record<string, string>;\n\nconst urlMappings: UrlMapping = {\n  '/paidsearch/$CLIENT_KEY/performance': '/channels',\n  '/meta/$CLIENT_KEY/performance': '/channels',\n  '/retargeting/$CLIENT_KEY/performance': '/channels',\n  '/messages/$CLIENT_KEY/messages': '/channels',\n  '/$CLIENT_KEY/email': '/channels',\n  '/pricematch/$CLIENT_KEY/performance': '/channels',\n  '/chat/insights/$CLIENT_KEY': '/channels',\n  '/settings/$CLIENT_KEY/branding': '/settings/$CLIENT_KEY/guides',\n  '/settings/$CLIENT_KEY/price-check': '/settings/$CLIENT_KEY/guides',\n  '/settings/$CLIENT_KEY/price-config': '/settings/$CLIENT_KEY/guides',\n  '/settings/$CLIENT_KEY/hotel-details-finder': '/settings/$CLIENT_KEY/guides',\n  '/settings/$CLIENT_KEY/deactivation-center': '/settings/$CLIENT_KEY/guides',\n};\n\nexport { urlMappings };\n"],
+  "mappings": ";;;;;AAEA,IAAM,cAA0B;AAAA,EAC9B,uCAAuC;AAAA,EACvC,iCAAiC;AAAA,EACjC,wCAAwC;AAAA,EACxC,kCAAkC;AAAA,EAClC,sBAAsB;AAAA,EACtB,uCAAuC;AAAA,EACvC,8BAA8B;AAAA,EAC9B,kCAAkC;AAAA,EAClC,qCAAqC;AAAA,EACrC,sCAAsC;AAAA,EACtC,8CAA8C;AAAA,EAC9C,6CAA6C;AAC/C;",
   "names": []
 }

package/package.json

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

package/src/NavbarController.ts

@@ -31,7 +31,16 @@ export class NavbarController implements ReactiveController {
 
     if (window.Clerk) {
       await window.Clerk.user?.update({
-        unsafeMetadata: { preferences: { ui: { navigationOpen: newState } } },
+        unsafeMetadata: {
+          ...window.Clerk.user?.unsafeMetadata,
+          preferences: {
+            ...window.Clerk.user?.unsafeMetadata?.preferences,
+            ui: {
+              ...window.Clerk.user?.unsafeMetadata?.preferences?.ui,
+              navigationOpen: newState,
+            },
+          },
+        },
       });
     }
 

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';
@@ -117,14 +117,13 @@ export class TtNavbar extends LitElement {
       const links = Object.values(this.allNavLinks);
       bestMatch = links.find(link => link.id === Routes.CampaignManager);
     }
-
     if (!bestMatch && this.clientKey) {
       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 links = Object.values(this.allNavLinks);
-        bestMatch = links.find(link => link.href.includes(mappedUrl));
+        bestMatch = links.find(link => link.href.includes(clientSpecificUrl));
       }
     }
 
@@ -379,26 +378,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

package/src/urlMappings.ts

@@ -8,6 +8,11 @@ const urlMappings: UrlMapping = {
   '/$CLIENT_KEY/email': '/channels',
   '/pricematch/$CLIENT_KEY/performance': '/channels',
   '/chat/insights/$CLIENT_KEY': '/channels',
+  '/settings/$CLIENT_KEY/branding': '/settings/$CLIENT_KEY/guides',
+  '/settings/$CLIENT_KEY/price-check': '/settings/$CLIENT_KEY/guides',
+  '/settings/$CLIENT_KEY/price-config': '/settings/$CLIENT_KEY/guides',
+  '/settings/$CLIENT_KEY/hotel-details-finder': '/settings/$CLIENT_KEY/guides',
+  '/settings/$CLIENT_KEY/deactivation-center': '/settings/$CLIENT_KEY/guides',
 };
 
 export { urlMappings };

package/test/tt-navbar.test.ts

@@ -287,10 +287,11 @@ describe('TtNavbar', () => {
     [`/meta/${CLIENT_KEY}/performance`, 'Channels'],
     [`/chat/insights/${CLIENT_KEY}`, 'Channels'],
     [`/${CLIENT_KEY}/email`, 'Channels'],
+    [`/settings/${CLIENT_KEY}/branding`, 'Group settings'],
   ];
 
   URLs.forEach(([route, text]) => {
-    it(`should show the current page as active when link is ${route}`, async () => {
+    it.only(`should show the current page as active when link is ${route}`, async () => {
       // eslint-disable-next-line no-restricted-globals
       history.pushState({}, '', route); // 👈 mock URL
 
@@ -430,15 +431,23 @@ describe('TtNavbar', () => {
 
   it('should update Clerk state when toggling if Clerk is available', async () => {
     let timesCalled = 0;
+    let calledWith: unknown;
 
-    const mockUpdate = () => {
+    const mockUpdate = (args: unknown) => {
       timesCalled += 1;
+      calledWith = args;
     };
 
     window.Clerk = {
       user: {
         update: mockUpdate,
-        unsafeMetadata: { preferences: { ui: { navigationOpen: false } } },
+        unsafeMetadata: {
+          foo: 'foo',
+          preferences: {
+            bar: 'bar',
+            ui: { duck: 'duck', navigationOpen: false },
+          },
+        },
       },
     } as unknown as Clerk;
 
@@ -453,6 +462,18 @@ describe('TtNavbar', () => {
     navbarToggleBtn.click();
 
     await expect(timesCalled).to.equal(1);
+    expect(calledWith).to.deep.equal({
+      unsafeMetadata: {
+        foo: 'foo',
+        preferences: {
+          bar: 'bar',
+          ui: {
+            duck: 'duck',
+            navigationOpen: true,
+          },
+        },
+      },
+    });
 
     window.Clerk = undefined; // Cleanup
   });