@triptease/tt-navbar 0.0.19 → 0.0.21

package/dist/web/urlMappings.js

@@ -0,0 +1,18 @@
+/**
+* @triptease/tt-navbar v0.0.21
+*/
+
+// src/urlMappings.ts
+var urlMappings = {
+  "/paidsearch/$CLIENT_KEY/performance": "/channels",
+  "/meta/$CLIENT_KEY/performance": "/channels",
+  "/retargeting/$CLIENT_KEY/performance": "/channels",
+  "/messages/$CLIENT_KEY/messages": "/channels",
+  "/$CLIENT_KEY/email": "/channels",
+  "/pricematch/$CLIENT_KEY/performance": "/channels",
+  "/chat/insights/$CLIENT_KEY": "/channels"
+};
+export {
+  urlMappings
+};
+//# sourceMappingURL=urlMappings.js.map

package/dist/web/urlMappings.js.map

@@ -0,0 +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;",
+  "names": []
+}

package/package.json

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

package/src/Routes.ts

@@ -0,0 +1,5 @@
+const Routes = {
+  CampaignManager: 'CampaignManager',
+};
+
+export { Routes };

package/src/TtNavbar.ts

@@ -16,6 +16,8 @@ import {
 } from '@triptease/icons';
 import { styles } from './styles.js';
 import { tripteaseLogo } from './triptease-logo.js';
+import { urlMappings } from './urlMappings.js';
+import { Routes } from './Routes.js';
 
 export class TtNavbar extends LitElement {
   static styles = styles;
@@ -23,12 +25,18 @@ export class TtNavbar extends LitElement {
   @property({ type: Function })
   navigate: ((e: MouseEvent) => void) | undefined;
 
-  @property({ type: String, attribute: 'base-url' })
-  baseUrl?: string;
+  @property({ type: String, attribute: 'campaign-manager-url' })
+  campaignManagerUrl: string = 'https://app.campaign-manager.triptease.io';
+
+  @property({ type: String, attribute: 'platform-url' })
+  platformUrl?: string;
 
   @property({ type: String, attribute: 'client-key' })
   clientKey?: string;
 
+  @property({ type: String, attribute: 'active-route' })
+  activeRoute?: keyof typeof Routes;
+
   @queryAll('details')
   protected allDetailsElements!: Array<HTMLDetailsElement>;
 
@@ -68,18 +76,36 @@ export class TtNavbar extends LitElement {
     let bestMatch: HTMLAnchorElement | undefined;
     let bestMatchLength = 0;
 
-    for (const link of this.allNavLinks) {
-      link.classList.remove('current-page');
-      if (link.hasAttribute('aria-current')) {
-        link.attributes.removeNamedItem('aria-current');
+    // Check special cases first, as everything will always match on / and return Dashboard
+    if (this.activeRoute === Routes.CampaignManager) {
+      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 links = Object.values(this.allNavLinks);
+        bestMatch = links.find(link => link.href.includes(mappedUrl));
       }
+    }
+
+    if (!bestMatch) {
+      for (const link of this.allNavLinks) {
+        link.classList.remove('current-page');
+        if (link.hasAttribute('aria-current')) {
+          link.attributes.removeNamedItem('aria-current');
+        }
 
-      const linkPath = new URL(link.href).pathname;
+        const linkPath = new URL(link.href).pathname;
 
-      if (currentPath.startsWith(linkPath)) {
-        if (linkPath.length > bestMatchLength) {
-          bestMatch = link;
-          bestMatchLength = linkPath.length;
+        if (currentPath.startsWith(linkPath)) {
+          if (linkPath.length > bestMatchLength) {
+            bestMatch = link;
+            bestMatchLength = linkPath.length;
+          }
         }
       }
     }
@@ -87,6 +113,8 @@ export class TtNavbar extends LitElement {
     if (bestMatch) {
       bestMatch.classList.add('current-page');
       bestMatch.setAttribute('aria-current', 'page');
+    } else {
+      console.error(`No matching nav link found for path: ${currentPath}`);
     }
   };
 
@@ -122,9 +150,9 @@ export class TtNavbar extends LitElement {
     if (!this.clientKey) throw new Error('clientKey is required');
 
     const formattedPath = path.replace('$CLIENT_KEY', this.clientKey);
-    if (!this.baseUrl) return formattedPath;
+    if (!this.platformUrl) return formattedPath;
 
-    return new URL(formattedPath, this.baseUrl).toString();
+    return new URL(formattedPath, this.platformUrl).toString();
   };
 
   private onAnchorClick = (e: MouseEvent) => {
@@ -157,7 +185,7 @@ export class TtNavbar extends LitElement {
             @click=${this.onAnchorClick}
           >${unsafeSVG(home)}<span>Dashboard</span></a
           >
-          <a class="nav-item" href="https://app.campaign-manager.triptease.io"
+          <a id="${Routes.CampaignManager}" class="nav-item" href=${this.campaignManagerUrl}
           >${unsafeSVG(campaigns)}<span>Campaigns</span></a
           >
           <a

package/src/index.ts

@@ -1 +1,2 @@
 export { TtNavbar } from './TtNavbar.js';
+export { Routes } from './Routes.js';

package/src/urlMappings.ts

@@ -0,0 +1,13 @@
+type UrlMapping = Record<string, string>;
+
+const urlMappings: UrlMapping = {
+  '/paidsearch/$CLIENT_KEY/performance': '/channels',
+  '/meta/$CLIENT_KEY/performance': '/channels',
+  '/retargeting/$CLIENT_KEY/performance': '/channels',
+  '/messages/$CLIENT_KEY/messages': '/channels',
+  '/$CLIENT_KEY/email': '/channels',
+  '/pricematch/$CLIENT_KEY/performance': '/channels',
+  '/chat/insights/$CLIENT_KEY': '/channels',
+};
+
+export { urlMappings };

package/stories/index.stories.ts

@@ -8,7 +8,10 @@ export default {
 
 const Template = () => html`
   <div>
-    <tt-navbar client-key="zxd47KQGAP">
+    <tt-navbar
+      client-key="zxd47KQGAP"
+      campaign-manager-url="https://app.campaign-manager.triptease.io"
+    >
       <div slot="clientSelector">
         <p>My Cool Client Selector</p>
       </div>

package/test/tt-navbar.test.ts

@@ -7,6 +7,7 @@ import {
   waitUntil,
 } from '@open-wc/testing';
 import { TtNavbar } from '../src/index.js';
+import { Routes } from '../src/Routes.js';
 
 // eslint-disable-next-line no-undef
 const getLinkByHref = (links: NodeListOf<HTMLAnchorElement>, href: string) => {
@@ -74,17 +75,17 @@ describe('TtNavbar', () => {
   });
 
   it('should render platform URLs against the base URL when it is defined', async () => {
-    const baseUrl = 'https://app.triptease.io';
+    const platformUrl = 'https://app.triptease.io';
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY} base-url="${baseUrl}"></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY} platform-url="${platformUrl}"></tt-navbar>`,
     );
     const links = navbar.shadowRoot?.querySelectorAll('a');
 
     if (links) {
-      expect(getLinkByHref(links, `${baseUrl}/`)).to.exist;
+      expect(getLinkByHref(links, `${platformUrl}/`)).to.exist;
       expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io'))
         .to.exist; // This shouldn't change
-      expect(getLinkByHref(links, `${baseUrl}/channels`)).to.exist;
+      expect(getLinkByHref(links, `${platformUrl}/channels`)).to.exist;
     }
   });
 
@@ -241,6 +242,9 @@ describe('TtNavbar', () => {
     [`/parity/${CLIENT_KEY}`, 'Parity'],
     [`/parity/${CLIENT_KEY}`, 'Parity'],
     [`/parity/${CLIENT_KEY}/foo`, 'Parity'],
+    [`/meta/${CLIENT_KEY}/performance`, 'Channels'],
+    [`/chat/insights/${CLIENT_KEY}`, 'Channels'],
+    [`/${CLIENT_KEY}/email`, 'Channels'],
   ];
 
   URLs.forEach(([route, text]) => {
@@ -258,4 +262,16 @@ describe('TtNavbar', () => {
       expect(anchor!.textContent).to.include(text);
     });
   });
+
+  it('should show the current page as campaign manager when on the given campaign manager url', async () => {
+    const platformUrl = 'https://app.triptease.io';
+    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>`,
+    );
+    const anchor = navbar.shadowRoot!.querySelector('a[aria-current="page"]');
+    expect(anchor).to.exist;
+    expect(anchor!.textContent).to.include('Campaigns');
+  });
 });