@triptease/tt-navbar 0.0.4 → 0.0.6

package/package.json

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

package/src/TtNavbar.ts

@@ -5,18 +5,108 @@ import { styles } from './styles.js';
 export class TtNavbar extends LitElement {
   static styles = styles;
 
-  @property()
-  onNavigate: (e: MouseEvent) => void = () => {
-    // Do nothing by default
+  @property({ type: Function })
+  navigate: ((e: MouseEvent) => void) | undefined;
+
+  @property({ type: String })
+  baseUrl?: string;
+
+  @property({ type: String })
+  clientKey?: string;
+
+  private buildUrl = (path: string): string => {
+    if (!this.clientKey) throw new Error('clientKey is required');
+
+    const formattedPath = path.replace('$CLIENT_KEY', this.clientKey);
+    if (!this.baseUrl) return formattedPath;
+
+    return new URL(formattedPath, this.baseUrl).toString();
+  };
+
+  private onAnchorClick = (e: MouseEvent) => {
+    if (this.navigate) {
+      this.navigate(e);
+    }
   };
 
   render() {
     return html`
       <nav id=${this.id}>
-        <a href="/">Dashboard</a>
-        <a href="/campaigns">Campaigns</a>
-        <a href="/channels">Channels</a>
-        <a href="/guest-insights/zxd47KQGAP">Guest insights</a>
+        <a href=${this.buildUrl('/')} @click=${this.onAnchorClick}>Dashboard</a>
+        <a href="https://app.campaign-manager.triptease.io">Campaigns</a>
+        <a href=${this.buildUrl('/channels')} @click=${this.onAnchorClick}
+          >Channels</a
+        >
+        <details>
+          <summary>Market Insights</summary>
+          <div>
+            <a
+              href=${this.buildUrl('/parity/$CLIENT_KEY')}
+              @click=${this.onAnchorClick}
+              >Parity</a
+            >
+            <a
+              href=${this.buildUrl('/guest-insights/$CLIENT_KEY')}
+              @click=${this.onAnchorClick}
+              >Guest insights</a
+            >
+          </div>
+        </details>
+        <details>
+          <summary>Settings</summary>
+          <div>
+            <a
+              href=${this.buildUrl('/$CLIENT_KEY/guest-behavioural-data')}
+              @click=${this.onAnchorClick}
+              >Email setup</a
+            >
+            <a
+              href=${this.buildUrl('/$CLIENT_KEY/crm-config')}
+              @click=${this.onAnchorClick}
+              >CRM connectivity</a
+            >
+            <a
+              href=${this.buildUrl('/settings/group')}
+              @click=${this.onAnchorClick}
+              >Group settings</a
+            >
+            <a
+              href=${this.buildUrl('/settings/$CLIENT_KEY/hotels/')}
+              @click=${this.onAnchorClick}
+              >Property settings</a
+            >
+          </div>
+        </details>
+        <hr />
+        <details>
+          <summary>Account</summary>
+          <div>
+            <a href=${this.buildUrl('/account')} @click=${this.onAnchorClick}
+              >User settings</a
+            >
+            <a
+              href=${this.buildUrl('/account/team/$CLIENT_KEY')}
+              @click=${this.onAnchorClick}
+              >Team and permissions</a
+            >
+          </div>
+        </details>
+        <details>
+          <summary>Billing</summary>
+          <div>
+            <a
+              href=${this.buildUrl('/account/billing-management/$CLIENT_KEY')}
+              @click=${this.onAnchorClick}
+              >Booking reconciliation</a
+            >
+            <a
+              href=${this.buildUrl('/subscriptions/$CLIENT_KEY')}
+              @click=${this.onAnchorClick}
+              >Subscriptions</a
+            >
+          </div>
+        </details>
+        <slot name="clientSelector"></slot>
       </nav>
     `;
   }

package/src/styles.ts

@@ -1,3 +1,21 @@
 import { css } from 'lit';
 
-export const styles = css``;
+export const styles = css`
+  nav {
+    max-width: 260px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  nav details div {
+    display: flex;
+    flex-direction: column;
+  }
+
+  hr {
+    background: black;
+    width: 100%;
+    height: 1px;
+    border: none;
+  }
+`;

package/stories/index.stories.ts

@@ -1,60 +1,23 @@
-import { html, TemplateResult } from 'lit';
+import { html } from 'lit';
 import '../src/tt-navbar.js';
 
 export default {
   title: 'TtNavbar',
   component: 'tt-navbar',
-  argTypes: {
-    header: { control: 'text' },
-    counter: { control: 'number' },
-    textColor: { control: 'color' },
-  },
 };
 
-interface Story<T> {
-  (args: T): TemplateResult;
-  args?: Partial<T>;
-  argTypes?: Record<string, unknown>;
-}
 
-interface ArgTypes {
-  header?: string;
-  counter?: number;
-  textColor?: string;
-  slot?: TemplateResult;
-}
 
-const Template: Story<ArgTypes> = ({
-  header = 'Hello world',
-  counter = 5,
-  textColor,
-  slot,
-}: ArgTypes) => html`
-  <tt-navbar
-    style="--tt-navbar-text-color: ${textColor || 'black'}"
-    .header=${header}
-    .counter=${counter}
-  >
-    ${slot}
-  </tt-navbar>
-`;
 
-export const Regular = Template.bind({});
+const Template = () => html`
+  <div>
+    <tt-navbar clientKey="zxd47KQGAP">
+      <div slot="clientSelector">
+        <p>My Cool Client Selector</p>
+      </div>
+    </tt-navbar>
+  </div>
 
-export const CustomHeader = Template.bind({});
-CustomHeader.args = {
-  header: 'My header',
-};
-
-export const CustomCounter = Template.bind({});
-CustomCounter.args = {
-  counter: 123456,
-};
+`;
 
-export const SlottedContent = Template.bind({});
-SlottedContent.args = {
-  slot: html`<p>Slotted content</p>`,
-};
-SlottedContent.argTypes = {
-  slot: { table: { disable: true } },
-};
+export const Regular = Template.bind({});

package/test/tt-navbar.test.ts

@@ -1,5 +1,101 @@
 import '../src/tt-navbar.js';
+import { expect, fixture, waitUntil } from '@open-wc/testing';
+import { TtNavbar } from '../src/index.js';
+
+// eslint-disable-next-line no-undef
+const getLinkByHref = (links: NodeListOf<HTMLAnchorElement>, href: string) => {
+  for (const link of links) {
+    if (link.getAttribute('href') === href) {
+      return link;
+    }
+  }
+
+  return undefined;
+};
+
+const CLIENT_KEY = 'zxd47KQGAP';
 
 describe('TtNavbar', () => {
+  it('should throw an error if the clientKey is not provided', async () => {
+    try {
+      await fixture<TtNavbar>(`<tt-navbar></tt-navbar>`);
+    } catch (e) {
+      expect(e).to.match(/clientKey is required/);
+    }
+  });
+  it('should render with the default links', async () => {
+    const navbar = await fixture<TtNavbar>(
+      `<tt-navbar clientKey=${CLIENT_KEY}></tt-navbar>`,
+    );
+    const links = navbar.shadowRoot?.querySelectorAll('a');
+
+    expect(links?.length).to.equal(13);
+
+    if (links) {
+      expect(getLinkByHref(links, '/')).to.exist;
+      expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io'))
+        .to.exist;
+      expect(getLinkByHref(links, '/channels')).to.exist;
+      expect(getLinkByHref(links, `/parity/${CLIENT_KEY}`)).to.exist;
+      expect(getLinkByHref(links, `/guest-insights/${CLIENT_KEY}`)).to.exist;
+      expect(getLinkByHref(links, `/${CLIENT_KEY}/guest-behavioural-data`)).to
+        .exist;
+      expect(getLinkByHref(links, `/${CLIENT_KEY}/crm-config`)).to.exist;
+      expect(getLinkByHref(links, `/settings/group`)).to.exist;
+      expect(getLinkByHref(links, `/settings/${CLIENT_KEY}/hotels/`)).to.exist;
+      expect(getLinkByHref(links, `/account`)).to.exist;
+      expect(getLinkByHref(links, `/account/team/${CLIENT_KEY}`)).to.exist;
+      expect(getLinkByHref(links, `/account/billing-management/${CLIENT_KEY}`))
+        .to.exist;
+      expect(getLinkByHref(links, `/subscriptions/${CLIENT_KEY}`)).to.exist;
+    }
+  });
+
+  it('should render platform URLs against the base URL when it is defined', async () => {
+    const baseUrl = 'https://app.triptease.io';
+    const navbar = await fixture<TtNavbar>(
+      `<tt-navbar clientKey=${CLIENT_KEY} baseUrl="${baseUrl}"></tt-navbar>`,
+    );
+    const links = navbar.shadowRoot?.querySelectorAll('a');
+
+    if (links) {
+      expect(getLinkByHref(links, `${baseUrl}/`)).to.exist;
+      expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io'))
+        .to.exist; // This shouldn't change
+      expect(getLinkByHref(links, `${baseUrl}/channels`)).to.exist;
+    }
+  });
+
+  it('should allow navigation events to be handled externally', async () => {
+    let navigateEventCount = 0;
+
+    const onNavigate = (e: MouseEvent) => {
+      e.preventDefault();
+      navigateEventCount += 1;
+    };
+
+    const navbar = await fixture<TtNavbar>(
+      `<tt-navbar clientKey=${CLIENT_KEY}></tt-navbar>`,
+    );
+    navbar.navigate = onNavigate;
+    await navbar.updateComplete;
+
+    const links = navbar.shadowRoot?.querySelectorAll('a');
+    links?.forEach(l => l.click());
+
+    await waitUntil(
+      () => expect(navigateEventCount).to.equal(12),
+      'navigate event did not fire',
+    );
+  });
+
+  it('should render the given client selector', async () => {
+    const navbar = await fixture<TtNavbar>(
+      `<tt-navbar clientKey=${CLIENT_KEY}><div slot="clientSelector"><div id="myCoolClientSelector"></div></div></tt-navbar>`,
+    );
+
+    const clientSelector = navbar.querySelector('#myCoolClientSelector');
 
+    expect(clientSelector).to.exist;
+  });
 });