@servicetitan/navigation 8.2.0 → 9.0.0

package/src/components/profile-dropdown/profile-dropdown.tsx

@@ -192,7 +192,7 @@ export interface ProfileDropdownLinkPropsStrict {
     external?: boolean;
     target?: HTMLAttributeAnchorTarget;
     to?: string;
-    counter?: CounterTagPropsType;
+    tag?: CounterTagPropsType;
     onClick?: () => void;
 }
 
@@ -203,9 +203,9 @@ export interface ProfileDropdownLinkProps extends ProfileDropdownLinkPropsStrict
 export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
     children,
     className,
-    counter,
     external,
     id,
+    tag,
     target,
     to,
     onClick,
@@ -220,10 +220,7 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
 
     const isExternalLink = external ?? to?.startsWith('http');
 
-    const counterElement = useMemo(
-        () => <CounterTag data={counter} className={Styles.counter} />,
-        [counter]
-    );
+    const tagElement = useMemo(() => <CounterTag data={tag} className={Styles.counter} />, [tag]);
 
     return isExternalLink ? (
         <a
@@ -235,7 +232,7 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
             {...rest}
         >
             {children}
-            {counterElement}
+            {tagElement}
         </a>
     ) : to ? (
         <NavigationComponent
@@ -247,7 +244,7 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
             {...rest}
         >
             {children}
-            {counterElement}
+            {tagElement}
         </NavigationComponent>
     ) : (
         <a
@@ -258,7 +255,7 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
             {...rest}
         >
             {children}
-            {counterElement}
+            {tagElement}
         </a>
     );
 };

package/src/test/data.tsx

@@ -40,8 +40,8 @@ import { MemoryRouter, useHistory, useLocation } from 'react-router-dom';
 import { HeaderNavigationTrigger } from '../components/links';
 import {
     HeaderNavigationItemData,
-    HeaderNavigationItemLinkProps,
     HeaderNavigationItemSubmenuGroup,
+    HeaderNavigationItemSubmenuLink,
     NavLinkComponentProps,
 } from '../utils/navigation';
 import { NavigationComponentContext } from '../utils/navigation-context';
@@ -145,8 +145,8 @@ const getItem = (
 
 const getSubItem = (
     id: string,
-    data: Partial<HeaderNavigationItemLinkProps>
-): HeaderNavigationItemLinkProps => ({
+    data: Partial<HeaderNavigationItemSubmenuLink>
+): HeaderNavigationItemSubmenuLink => ({
     id,
     to: id,
     title: id[0].toUpperCase() + id.substring(1),
@@ -155,7 +155,7 @@ const getSubItem = (
 
 const getGroup = (
     title: string,
-    links: HeaderNavigationItemLinkProps[]
+    links: HeaderNavigationItemSubmenuLink[]
 ): HeaderNavigationItemSubmenuGroup => ({
     title,
     links,
@@ -176,7 +176,7 @@ export const items = {
         iconName: 'local_phone',
         icon: SvgCalls,
         iconActive: SvgCallsActive,
-        counter: 12,
+        tag: 12,
     }),
     dashboard: getItem('dashboard', {
         iconName: 'odometer',
@@ -187,7 +187,7 @@ export const items = {
         iconName: 'location_disabled',
         icon: SvgDispatch,
         iconActive: SvgDispatchActive,
-        counter: 1,
+        tag: 1,
     }),
     fleet: getItem('fleet', {
         iconName: 'fleet-pro',
@@ -201,6 +201,21 @@ 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,
@@ -226,6 +241,7 @@ export const items = {
         iconName: 'assignment',
         icon: SvgAccounting,
         iconActive: SvgAccountingActive,
+        tag: true,
     }),
     accountingWithSubmenu: getItem('accounting', {
         iconName: 'assignment',
@@ -235,9 +251,9 @@ export const items = {
             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('export', { title: 'Batch/Export Transactions', tag: true }),
+                    getSubItem('invoices', { title: 'Invoices', tag: 3 }),
+                    getSubItem('payments', { title: 'Customer Payments', tag: 2 }),
                     getSubItem('deposits', { title: 'Bank Deposits' }),
                 ]),
                 getGroup('Accounts Payable', [getSubItem('bills', { title: 'Bills' })]),
@@ -251,7 +267,7 @@ export const items = {
         icon: SvgMarketing,
         iconActive: SvgMarketingActive,
     }),
-    priceBook: getItem('priceBook', {
+    priceBook: getItem('pricebook', {
         iconName: 'book',
         icon: SvgPriceBook,
         iconActive: SvgPriceBookActive,
@@ -291,7 +307,7 @@ export const CallsNavigationTrigger = () => {
                 <HeaderNavigationTrigger
                     id="dialpad"
                     iconName="phone"
-                    counter={2}
+                    tag={2}
                     icon={SvgPhone}
                     iconActive={SvgPhoneActive}
                     onClick={() => setOpen(!open)}

package/src/utils/navigation.ts

@@ -25,8 +25,8 @@ export interface HeaderNavigationItemData extends HeaderNavigationItemLinkProps
     /** icon component of item (<svg />) */
     iconComponent?: FC;
 
-    /** item counter (optional). shown if it is set and greater than 0 */
-    counter?: CounterTagPropsType;
+    /** item tag (optional). shown if it is set and true or greater than 0 */
+    tag?: CounterTagPropsType;
 
     /** class name of link item */
     className?: string;
@@ -54,12 +54,17 @@ export interface HeaderNavigationItemSubmenu {
     groups: HeaderNavigationItemSubmenuGroup[];
 }
 
+export interface HeaderNavigationItemSubmenuLink extends HeaderNavigationItemLinkProps {
+    /** item tag (optional). shown if it is set and true or greater than 0 */
+    tag?: CounterTagPropsType;
+}
+
 export interface HeaderNavigationItemSubmenuGroup {
     /** submenu group title */
     title: string;
 
     /** submenu group links */
-    links: HeaderNavigationItemLinkProps[];
+    links: HeaderNavigationItemSubmenuLink[];
 }
 
 export interface NavLinkComponentPropsStrict {
@@ -91,8 +96,8 @@ export interface HeaderNavigationTriggerPropsStrict {
     labelClassName?: string;
     /** isActive */
     isActive?: boolean;
-    /** counter shown for item */
-    counter?: CounterTagPropsType;
+    /** counter tag shown for item */
+    tag?: CounterTagPropsType;
     /** counter component class name */
     counterClassName?: string;
     /** icon component class name */