@servicetitan/navigation 8.1.7 → 8.2.1

package/src/test/data.tsx

@@ -30,7 +30,7 @@ import SvgSchedule from '@servicetitan/anvil2/assets/icons/st/gnav_schedule_inac
 import SvgTasksActive from '@servicetitan/anvil2/assets/icons/st/gnav_tasks_active.svg';
 import SvgTasks from '@servicetitan/anvil2/assets/icons/st/gnav_tasks_inactive.svg';
 
-import { Popover } from '@servicetitan/design-system';
+import { BodyText, Popover } from '@servicetitan/design-system';
 
 import classNames from 'classnames';
 import { forwardRef, useState } from 'react';
@@ -38,7 +38,12 @@ import { forwardRef, useState } from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { MemoryRouter, useHistory, useLocation } from 'react-router-dom';
 import { HeaderNavigationTrigger } from '../components/links';
-import { HeaderNavigationItemData, NavLinkComponentProps } from '../utils/navigation';
+import {
+    HeaderNavigationItemData,
+    HeaderNavigationItemLinkProps,
+    HeaderNavigationItemSubmenuGroup,
+    NavLinkComponentProps,
+} from '../utils/navigation';
 import { NavigationComponentContext } from '../utils/navigation-context';
 import * as Styles from './data-stories.module.less';
 
@@ -46,20 +51,21 @@ export const NavLinkMock = forwardRef<any, NavLinkComponentProps>(
     ({ to, children, activeClassName, className, isActive, ...rest }, ref) => {
         const history = useHistory();
         const location = useLocation();
-        const linkActive = location.pathname.replace('/', '') === to;
+        const linkActive = location.pathname.startsWith(to);
 
         return (
             <a
                 {...rest}
-                className={classNames(className, linkActive ? activeClassName : '')}
-                href={to}
                 onClick={e => {
                     e.preventDefault();
+                    e.stopPropagation();
 
                     if (!to.startsWith('http')) {
-                        history.push(to);
+                        history.replace(to);
                     }
                 }}
+                className={classNames(className, linkActive ? activeClassName : '')}
+                href={to}
                 ref={ref}
             >
                 {children}
@@ -68,6 +74,12 @@ export const NavLinkMock = forwardRef<any, NavLinkComponentProps>(
     }
 );
 
+export const LocationInfo = () => {
+    const location = useLocation();
+
+    return <BodyText>current location - {location.pathname}</BodyText>;
+};
+
 export const withMemoryRouter = (Story: any) => (
     <MemoryRouter>
         <NavigationComponentContext.Provider value={NavLinkMock}>
@@ -111,12 +123,42 @@ const getItem = (
     data: Partial<HeaderNavigationItemData>
 ): HeaderNavigationItemData => ({
     id,
-    to: id,
+    to: '/' + id,
     title: id[0].toUpperCase() + id.substring(1),
     hint: id,
     icon: undefined,
     iconActive: undefined,
     ...(data ?? {}),
+    submenu: data.submenu
+        ? {
+              ...data.submenu,
+              groups: data.submenu.groups.map(group => ({
+                  ...group,
+                  links: group.links.map(link => ({
+                      ...link,
+                      to: `/${id}/${link.to}`,
+                  })),
+              })),
+          }
+        : undefined,
+});
+
+const getSubItem = (
+    id: string,
+    data: Partial<HeaderNavigationItemLinkProps>
+): HeaderNavigationItemLinkProps => ({
+    id,
+    to: id,
+    title: id[0].toUpperCase() + id.substring(1),
+    ...(data ?? {}),
+});
+
+const getGroup = (
+    title: string,
+    links: HeaderNavigationItemLinkProps[]
+): HeaderNavigationItemSubmenuGroup => ({
+    title,
+    links,
 });
 
 export const items = {
@@ -159,23 +201,72 @@ export const items = {
         iconActive: SvgFollowUpActive,
         title: 'Follow Up',
     }),
+    followUpsWithSubmenu: getItem('followUps', {
+        iconName: 'flag',
+        icon: SvgFollowUp,
+        iconActive: SvgFollowUpActive,
+        title: 'Follow Up',
+        submenu: {
+            groups: [
+                getGroup('', [
+                    getSubItem('estimates', { title: 'Unsold Estimates' }),
+                    getSubItem('sold', { title: 'Sold Estimates' }),
+                    getSubItem('surveys', { title: 'Surveys' }),
+                ]),
+            ],
+        },
+    }),
     inventory: getItem('inventory', {
         iconName: 'toys',
         icon: SvgInventory,
         iconActive: SvgInventoryActive,
     }),
     purchasing: getItem('purchasing', { iconComponent: InventoryIcon }),
+    purchasingWithSubmenu: getItem('purchasing', {
+        iconName: 'toys',
+        icon: SvgInventory,
+        iconActive: SvgInventoryActive,
+        submenu: {
+            groups: [
+                getGroup('Purchase', [
+                    getSubItem('repl', { title: 'Replenishment' }),
+                    getSubItem('orders', { title: 'Purchase Orders' }),
+                    getSubItem('receipts', { title: 'Receipts' }),
+                    getSubItem('returns', { title: 'Returns' }),
+                ]),
+            ],
+        },
+    }),
     accounting: getItem('accounting', {
         iconName: 'assignment',
         icon: SvgAccounting,
         iconActive: SvgAccountingActive,
     }),
+    accountingWithSubmenu: getItem('accounting', {
+        iconName: 'assignment',
+        icon: SvgAccounting,
+        iconActive: SvgAccountingActive,
+        submenu: {
+            groups: [
+                getGroup('Accounts Receivable', [
+                    getSubItem('ar', { title: 'AR Management' }),
+                    getSubItem('export', { title: 'Batch/Export Transactions' }),
+                    getSubItem('invoices', { title: 'Invoices' }),
+                    getSubItem('payments', { title: 'Customer Payments' }),
+                    getSubItem('deposits', { title: 'Bank Deposits' }),
+                ]),
+                getGroup('Accounts Payable', [getSubItem('bills', { title: 'Bills' })]),
+                getGroup('Financing', [getSubItem('dashboard', { title: 'Dashboard' })]),
+                getGroup('Others', [getSubItem('at', { title: 'Accounting Audit Trail' })]),
+            ],
+        },
+    }),
     marketing: getItem('marketing', {
         iconName: 'bullhorn',
         icon: SvgMarketing,
         iconActive: SvgMarketingActive,
     }),
-    priceBook: getItem('priceBook', {
+    priceBook: getItem('pricebook', {
         iconName: 'book',
         icon: SvgPriceBook,
         iconActive: SvgPriceBookActive,

package/src/utils/navigation.ts

@@ -3,22 +3,10 @@ import { IconPropsStrict } from '@servicetitan/design-system';
 import { FC, HTMLAttributeAnchorTarget, ReactNode } from 'react';
 import { CounterTagPropsType } from '../components/counter-tag';
 
-export interface HeaderNavigationItemData {
-    /** link id */
-    id: string;
-
-    /** link href */
-    to: string;
-
-    /** link title */
-    title: string;
-
+export interface HeaderNavigationItemData extends HeaderNavigationItemLinkProps {
     /** link description */
     hint: string;
 
-    /** callback to return active state. By default, it compares link href with current pathname */
-    isActive?: boolean | ((pathname: string) => boolean);
-
     /** flag if the link is not shown (based on FG and/or user permissions) */
     isHidden?: boolean;
 
@@ -42,6 +30,36 @@ export interface HeaderNavigationItemData {
 
     /** class name of link item */
     className?: string;
+
+    /** optional submenu of link item */
+    submenu?: HeaderNavigationItemSubmenu;
+}
+
+export interface HeaderNavigationItemLinkProps {
+    /** link id */
+    id: string;
+
+    /** link href */
+    to: string;
+
+    /** link title */
+    title: string;
+
+    /** callback to return active state. By default, it compares link href with current pathname */
+    isActive?: boolean | ((pathname: string) => boolean);
+}
+
+export interface HeaderNavigationItemSubmenu {
+    /** submenu groups */
+    groups: HeaderNavigationItemSubmenuGroup[];
+}
+
+export interface HeaderNavigationItemSubmenuGroup {
+    /** submenu group title */
+    title: string;
+
+    /** submenu group links */
+    links: HeaderNavigationItemLinkProps[];
 }
 
 export interface NavLinkComponentPropsStrict {