@retalia/sidebar-navigation 21.1.13 → 21.1.14

package/src/lib/models/cookie-names.ts

@@ -0,0 +1,12 @@
+export enum CookieNames {
+  groupId = 'groupId',
+  id = 'id',
+  languageCode = 'languageCode',
+  portalApiToken = 'portalApiToken',
+  portalRefreshToken = 'portalRefreshToken',
+  recentlyLoggedIn = 'recentlyLoggedIn',
+  shopId = 'shopId',
+  tenantId = 'tenantId',
+  clientId = 'client_id',
+  isSidebarOpen = 'isSidebarOpen',
+}

package/src/lib/models/environment.ts

@@ -0,0 +1,4 @@
+export interface Environment {
+  portalUrl: string;
+  apiRequestUrl: string;
+}

package/src/lib/models/http-response.ts

@@ -0,0 +1,3 @@
+export interface HttpResponse<T> extends Response {
+  parsedBody?: T;
+}

package/src/lib/models/module.ts

@@ -0,0 +1,39 @@
+export interface ModulesInfo {
+  modulesDetails: ModuleItem[];
+  shops: Shop[];
+  flags?: string[];
+}
+export interface ModuleItem {
+  id: number;
+  authorizationId: string;
+  name: string;
+  url: string;
+  relationName: string;
+  displayOrder: number;
+  entityAccess: number[]; // Shops
+  sidebarEntries: SidebarEntry[];
+
+  children?: SidebarEntry[]; // Remap sidebarEntries to children to allow for recursive fns
+  icon?: string;
+  translatedName?: string;
+  visible?: boolean; // to control visibility of sidebar items
+  active?: boolean; // to control active state on page load
+}
+
+export interface SidebarEntry {
+  moduleAuthorizationId: string;
+  authorizationId?: string;
+  name: string;
+  url: string;
+  children: SidebarEntry[];
+
+  icon?: string;
+  translatedName?: string;
+  visible?: boolean; // to control visibility of sidebar items
+  active?: boolean; // to control active state on page load
+}
+
+export interface Shop {
+  id: number;
+  description: string;
+}

package/src/lib/navigation-lib.component.html

@@ -0,0 +1,20 @@
+<div id="root">
+  <div id="main">
+    <sidebar [environment]="environment" (selectedRoute)="routeSelected($event)"></sidebar>
+    <topbar [environment]="environment"></topbar>
+    @if (!useCustomPage) {
+      <div class="page-container">
+        <div class="page-body">
+          <div class="content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    }
+    @if (useCustomPage) {
+      <div class="content">
+        <slot></slot>
+      </div>
+    }
+  </div>
+</div>

package/src/lib/navigation-lib.component.scss

@@ -0,0 +1,30 @@
+@import '../styles/app.scss';
+
+#root {
+  display: flex;
+  flex-flow: column;
+}
+
+#main {
+  display: flex;
+  height: 100%;
+}
+
+.page-container {
+  font-family: 'Effra';
+  padding: 0 24px;
+  margin: 0 auto;
+}
+
+.page-body {
+  padding-top: 25px;
+}
+
+.content {
+  margin-top: 90px;
+  flex-grow: 1;
+
+  @include responsive(mobileonly) {
+    padding: 0;
+  }
+}

package/src/lib/navigation-lib.component.ts

@@ -0,0 +1,26 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { Environment } from './models/environment';
+import { SidebarEntry } from './models/module';
+
+@Component({
+    selector: 'sidebar-navigation',
+    templateUrl: './navigation-lib.component.html',
+    styleUrls: ['./navigation-lib.component.scss'],
+    encapsulation: ViewEncapsulation.ShadowDom,
+    standalone: false
+})
+export class NavigationLibComponent {
+  @Output() selectedRoute: EventEmitter<SidebarEntry> = new EventEmitter();
+  @Input() useCustomPage = false;
+  @Input() environment: Environment = <Environment>{};
+
+  public routeSelected(selectedItem): void {
+    this.selectedRoute.emit(selectedItem);
+  }
+}

package/src/lib/navigation-lib.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { NgxSmartModalModule } from 'ngx-smart-modal';
+
+import { NavigationLibComponent } from './navigation-lib.component';
+import { SidebarComponent } from './sidebar/sidebar.component';
+import { TopbarComponent } from './topbar/topbar.component';
+import { SubItemComponent } from './sidebar/sub-item/sub-item.component';
+import { SubItemService } from './services/sub-item.service';
+import { ShopModalComponent } from './sidebar/shop-modal/shop-modal.component';
+
+import { ModuleService } from './services/module.service';
+import { AuthService } from './services/auth.service';
+import { CookieService } from './services/cookie.service';
+
+@NgModule({ declarations: [
+        SidebarComponent,
+        SubItemComponent,
+        TopbarComponent,
+        NavigationLibComponent,
+        ShopModalComponent,
+    ],
+    exports: [NavigationLibComponent], imports: [CommonModule,
+        NgxSmartModalModule.forRoot()], providers: [SubItemService, ModuleService, AuthService, CookieService, provideHttpClient(withInterceptorsFromDi())] })
+export class NavigationLibModule {}

package/src/lib/navigation-lib.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NavigationLibService {
+
+  constructor() { }
+}

package/src/lib/services/auth.service.ts

@@ -0,0 +1,39 @@
+import { Inject, Injectable, DOCUMENT } from '@angular/core';
+
+
+// @dynamic
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthService {
+  environmentUrl: string;
+  _refreshTokenStore: string;
+  _tokenStore: string;
+
+  constructor(@Inject(DOCUMENT) private document: Document) {}
+
+  public logout(): void {
+    this.clearCookies();
+  }
+
+  clearCookies(): void {
+    let cookies = document.cookie.split('; ');
+    for (let c = 0; c < cookies.length; c++) {
+      let domain = window.location.hostname.split('.');
+      while (domain.length > 0) {
+        let cookieBase =
+          encodeURIComponent(cookies[c].split(';')[0].split('=')[0]) +
+          '=; expires=Thu, 01-Jan-1970 00:00:01 GMT; domain=' +
+          domain.join('.') +
+          ' ;path=';
+        let p = location.pathname.split('/');
+        document.cookie = cookieBase + '/';
+        while (p.length > 0) {
+          document.cookie = cookieBase + p.join('/');
+          p.pop();
+        }
+        domain.shift();
+      }
+    }
+  }
+}

package/src/lib/services/cookie.service.ts

@@ -0,0 +1,33 @@
+import { Injectable, Inject, DOCUMENT } from '@angular/core';
+
+import {
+  set as setCookie,
+  get as getCookie,
+  remove as removeCookie,
+} from 'es-cookie';
+import { CookieNames } from '../models/cookie-names';
+import { getDomain } from 'tldjs';
+
+// @dynamic
+@Injectable()
+export class CookieService {
+  constructor(@Inject(DOCUMENT) private document: Document) {}
+
+  private getDomain(): string {
+    let tld = getDomain(this.document.location.href);
+    tld = tld != null ? '.' + tld : '';
+    return tld;
+  }
+
+  getCookie(cookieName: CookieNames): string | undefined {
+    return getCookie(cookieName);
+  }
+
+  setCookie(cookieName: CookieNames, value: any): void {
+    setCookie(cookieName, value, { path: '/', domain: this.getDomain(), sameSite : 'none' , secure : true });
+  }
+
+  removeCookie(cookieName: CookieNames): void {
+    removeCookie(cookieName, { path: '/', domain: this.getDomain() });
+  }
+}

package/src/lib/services/http.service.ts

@@ -0,0 +1,26 @@
+import { HttpResponse } from '../models/http-response';
+
+export async function httpGet<T>(
+  requestUrl: string,
+  tokenIn: string
+): Promise<HttpResponse<T>> {
+  const token = getCookieValue('portalApiToken');
+  const response: HttpResponse<T> = await fetch(requestUrl, {
+    method: 'get',
+    headers: new Headers({
+      Authorization: 'Bearer ' + token,
+      'Content-Type': 'application/x-www-form-urlencoded',
+    }),
+  });
+  response.parsedBody = response.ok
+    ? (response.parsedBody = await response.json())
+    : [];
+  return response;
+}
+
+function getCookieValue(cookieName: string) {
+  const b = document.cookie.match(
+    '(^|[^;]+)\\s*' + cookieName + '\\s*=\\s*([^;]+)'
+  );
+  return b ? b.pop() : '';
+}

package/src/lib/services/module.service.ts

@@ -0,0 +1,153 @@
+import { Injectable } from '@angular/core';
+import { ModuleItem, ModulesInfo, SidebarEntry } from '../models/module';
+import { httpGet } from './http.service';
+import { Subject } from 'rxjs';
+import { testModuleDetails } from '../data/test-data';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ModuleService {
+  storedModuleFlags: string[] = [];
+  storedModuleFlagsChange: Subject<string[]> = new Subject<string[]>();
+  currentRouteName: Subject<string> = new Subject<string>();
+  currentModule;
+  modules: ModuleItem[];
+
+  constructor() {
+    this.storedModuleFlagsChange.subscribe((value) => {
+      this.storedModuleFlags = value;
+    });
+  }
+
+  public async getUserModules(
+    gatewayUrl: string,
+    token: string
+  ): Promise<ModulesInfo> {
+    if (gatewayUrl === 'TEST') {
+      this.storedModuleFlagsChange.next(testModuleDetails.flags);
+      return Promise.resolve(testModuleDetails);
+    }
+
+    const requestUrl = gatewayUrl + '/Module';
+    const response = await httpGet<ModulesInfo>(requestUrl, token);
+    this.storedModuleFlagsChange.next(response.parsedBody.flags);
+    return Promise.resolve(response.parsedBody);
+  }
+
+  public setNavigationTitle(selectedItem?: ModuleItem | SidebarEntry) {
+    var pathArray = window.location.pathname.split('/');
+    let translatedModuleName = '';
+    let item = selectedItem;
+    if (pathArray.length > 1 && !item) {
+      let currentPath = window.location.pathname;
+      item = this.findNestedUrlMatch(this.modules, currentPath);
+      item
+        ? (translatedModuleName = item.translatedName || item.name)
+        : (translatedModuleName = pathArray[pathArray.length - 1]);
+    } else if (item) {
+      translatedModuleName = item.translatedName || item.name;
+    }
+    translatedModuleName === 'main' ? (translatedModuleName = '') : '';
+    this.currentRouteName.next(translatedModuleName);
+
+    if (item) {
+      this.setItemVisbility(item);
+    } else {
+      this.currentModule = this.modules.find(
+        (m) =>
+          m.url.toLowerCase().replace(/\//g, '') ===
+          pathArray[1].toLowerCase().replace(/\//g, '')
+      );
+    }
+  }
+
+  public findNestedUrlMatch(subItems, urlPath: string) {
+    let nameMatch;
+    subItems.forEach((i: ModuleItem | SidebarEntry) => {
+      if (
+        i.url &&
+        i.url.replace(/\//g, '') &&
+        i.url.toLowerCase().replace(/\//g, '') ===
+          urlPath.toLowerCase().replace(/\//g, '')
+      ) {
+        nameMatch = i;
+        i.active = true;
+      } else {
+        i.active = false;
+        const childMatch = this.findNestedUrlMatch(i.children, urlPath);
+        if (childMatch) {
+          nameMatch = childMatch;
+        }
+      }
+    });
+
+    return nameMatch;
+  }
+
+  public setItemVisbility(item): void {
+    let activeModule: ModuleItem = this.modules.find(
+      (m: ModuleItem) =>
+        m.authorizationId ===
+        (item.authorizationId || item.moduleAuthorizationId)
+    );
+
+    this.currentModule ? '' : (this.currentModule = activeModule);
+    activeModule.children.map((se: SidebarEntry) => {
+      se.visible = true;
+      if (item.name !== se.name) {
+        let isCurrent = se.children.some((sec) => sec.name === item.name);
+        se.children.map((sec) => {
+          sec.visible = isCurrent;
+        });
+      }
+    });
+  }
+
+  public mapModuleItems(modules: ModuleItem[]): ModuleItem[] {
+    modules.sort(
+      (a, b) => a.displayOrder - b.displayOrder || a.name.localeCompare(b.name)
+    ); // Alphabetically if modules share a displayOrder
+    const isSupportAdmin = this.storedModuleFlags.includes('SupportAdmin');
+    const isTenantAdmin = this.storedModuleFlags.includes('TenantAdmin');
+    let portalModule = modules.find((m) => m.authorizationId === 'portal');
+    isTenantAdmin ? '' : (modules = modules.filter((m) => m !== portalModule));
+
+    // modules = this.mapAdminItems(modules, isSupportAdmin); // Pending support for individual item flags
+    this.modules = modules.map((m) => {
+      if (m && m.sidebarEntries) {
+        m.children = JSON.parse(JSON.stringify(m.sidebarEntries));
+        m.sidebarEntries = [];
+      } else {
+        m.children = [];
+      }
+      m.visible = true;
+      m.sidebarEntries ? `` : (m.children = []);
+      m.url ? `` : (m.url = '/');
+      return m;
+    });
+    this.setNavigationTitle();
+
+    return this.modules;
+  }
+
+  public mapAdminItems(modules, isSupportAdmin: boolean): ModuleItem[] {
+    modules.forEach((m) => {
+      if (!isSupportAdmin && m.isAdminOnly) {
+        modules = modules.filter((i) => i.name !== m.name);
+      }
+      if (m.children) {
+        m.children = this.mapAdminItems(m.children, isSupportAdmin);
+      }
+    });
+
+    return modules;
+  }
+
+  public getCurrentModule(selectedItem: ModuleItem | SidebarEntry): ModuleItem {
+    var moduleRoute = window.location.pathname.split('/')[1];
+    if (!moduleRoute) return null;
+    this.setNavigationTitle(selectedItem);
+    return this.modules.filter(m => m.url.indexOf(moduleRoute) > 0)[0];
+  }
+}

package/src/lib/services/sub-item.service.ts

@@ -0,0 +1,56 @@
+import { EventEmitter, Injectable } from '@angular/core';
+import { ModuleItem } from '../models/module';
+import { getDomain } from 'tldjs';
+import { set as setCookie } from 'es-cookie';
+
+@Injectable()
+export class SubItemService {
+  subItemClickEvent = new EventEmitter();
+  _storage: Storage;
+
+  constructor() {
+    this._storage = window.localStorage;
+  }
+
+  public saveItemInfo(selectedModule: ModuleItem, shopId: number): void {
+    let moduleKey = `context${selectedModule.relationName}Id`;
+    let entity: any = selectedModule;
+
+    // The POS module is a special case and we dont want to change the shopId context when
+    // changing for the other modules. We only change the shopId context for the POS when
+    // explicitly clicking a new shopId on the POS module.
+    // For legacy reasons the POS uses the generic key 'shopId' and modules use 'contextShopId'.
+    if (selectedModule.authorizationId === 'pos') {
+      moduleKey = 'shopId';
+      entity = shopId;
+    }
+
+    if (
+      (selectedModule.authorizationId !== 'pos' &&
+        selectedModule.entityAccess.length > 0) ||
+      selectedModule.name === 'orb'
+    ) {
+      entity = shopId;
+    }
+
+    let tld = getDomain(window.location.href);
+    tld = tld !== null ? `.${tld}` : '';
+
+    // ? Sets the new data into storage, with a formatted domain
+    this._storage.setItem(moduleKey, entity.toString());
+
+    // ? TEMP: Sets the new cookie, with a formatted domain
+    setCookie(moduleKey, entity.toString(), {
+      path: '/',
+      domain: tld,
+      sameSite : 'none', 
+      secure : true
+    });
+  }
+
+  subItemclicked(item) {
+    this.subItemClickEvent.emit(item);
+  }
+}
+
+// This service exists to allow the EventEmitter to bubble up from the recursive subItem component to the parent sidebar component.

package/src/lib/sidebar/shop-modal/shop-modal.component.html

@@ -0,0 +1,17 @@
+<ngx-smart-modal #shopModal identifier="shopModal">
+  <h1 class="shopSelect">Shop Select</h1>
+  @if (availableShops) {
+    @if (availableShops.length > 8 || copyAvailableShops.length > 8) {
+      <input class="shopSearchInput" type="search" autocomplete="off" id="search" [value]="shopSearchValue"
+        required="false" [placeholder]="shopSearchPlaceholder" (keyup)="handleShopSearch($event)"
+        (click)="handleShopSearch($event)" />
+      }
+      <div class="shopButtons">
+        @for (shop of availableShops; track shop) {
+          <button class="shopButton"
+            [attr.data-testid]="'nav-shop' + shop.id"
+          (click)="shopSelected(shop)">{{shop.description}}</button>
+        }
+      </div>
+    }
+  </ngx-smart-modal>

package/src/lib/sidebar/shop-modal/shop-modal.component.scss

@@ -0,0 +1,73 @@
+@import "../../../styles/app.scss";
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('../../../assets/fonts/Poppins-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('../../../assets/fonts/Poppins-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('../../../assets/fonts/Poppins-Italic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('../../../assets/fonts/Poppins-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+#shopModal {
+  direction: ltr;
+}
+
+.shopButtons {
+  display: block;
+  padding: 10px 0px;
+  margin: auto;
+  width: 100%;
+  text-align: center;
+}
+
+.shopButton {
+  cursor: pointer;
+  min-width: 90px;
+  border-radius: 5px;
+  border: none;
+  outline: none;
+  padding: 5px 10px;
+}
+
+.shopButton + .shopButton {
+  margin-left: 10px;
+  margin-bottom: 10px;
+}
+
+.shopSearchInput {
+  display: block;
+  direction: ltr;
+  width: 90%;
+  height: inherit;
+  margin: auto;
+}
+
+input:invalid {
+  box-shadow: none; /* prevent Mozilla Firefox from creating a red border */
+}
+
+.shopSelect {
+  font-size: 18px;
+  font-family: "Poppins", sans-serif;
+  text-align: center;
+}

package/src/lib/sidebar/shop-modal/shop-modal.component.ts

@@ -0,0 +1,36 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { NgxSmartModalService } from 'ngx-smart-modal';
+import { Shop } from '../../models/module';
+
+@Component({
+    selector: 'shop-modal',
+    templateUrl: './shop-modal.component.html',
+    styleUrls: ['./shop-modal.component.scss'],
+    standalone: false
+})
+export class ShopModalComponent {
+  @Input() availableShops: Shop[] = [];
+  copyAvailableShops: Shop[] = [];
+  @Output() selectedShop: EventEmitter<Shop> = new EventEmitter();
+  @Input() shopSearchValue: any = '';
+  shopSearchPlaceholder = 'Search for a Shop ...';
+
+  constructor(public ngxSmartModalService: NgxSmartModalService) {}
+
+  shopSelected(shop): void {
+    this.selectedShop.emit(shop);
+    this.ngxSmartModalService.getModal('shopModal').close();
+  }
+
+  handleShopSearch(e): void {
+    if (this.copyAvailableShops.length < 1) {
+      this.copyAvailableShops = [...this.availableShops];
+    }
+    this.shopSearchValue = e && e.target ? e.target.value : '';
+    this.availableShops = this.copyAvailableShops.filter((shop) =>
+      shop.description
+        .toLowerCase()
+        .includes(this.shopSearchValue.toLowerCase())
+    );
+  }
+}