From 38eefd054a80a8ffc23aa61047033400a936b3cf Mon Sep 17 00:00:00 2001
From: Ben Pearey <bpearey@amplience.com>
Date: Thu, 10 Jul 2025 16:46:50 +0100
Subject: [PATCH 01/15] feat: using ecomm category placeholders to order
 navigation hierarchy

---
 .../cms-modern/Navigation/Navigation.tsx      |  79 +++++------
 .../core/Masthead/NavigationContext.tsx       |  12 --
 components/core/Masthead/walkNavigation.tsx   | 131 +++++++-----------
 3 files changed, 88 insertions(+), 134 deletions(-)

diff --git a/components/cms-modern/Navigation/Navigation.tsx b/components/cms-modern/Navigation/Navigation.tsx
index 345208d2..772598e7 100644
--- a/components/cms-modern/Navigation/Navigation.tsx
+++ b/components/cms-modern/Navigation/Navigation.tsx
@@ -64,49 +64,42 @@ const Navigation = ({ pages, style }: NavigationProps) => {
     return (
         <nav className="navigation" style={style}>
             <ul className="navigation__list">
-                {pages
-                    .sort((p1, p2) => {
-                        const menu1Priority = p1.content?.menu?.priority || 0;
-                        const menu2Priority = p2.content?.menu?.priority || 0;
-                        return menu1Priority > menu2Priority ? 1 : menu1Priority < menu2Priority ? -1 : 0;
-                    })
-                    .map(({ title, href = '', children = [], content, category }, index) => {
-                        return (
-                            <li
-                                key={index}
-                                className={clsx('navigation__list__item', {
-                                    ['navigation__list__item--active']: isRouteActive(href || '', category),
-                                    ['navigation__list__item--open']: isMenuOpen(index),
-                                })}
-                            >
-                                {title && href && (
-                                    <Link
-                                        href={href || ''}
-                                        onClick={(event) =>
-                                            children.length === 0 ? handleRouteChange() : handleClick(event, index)
-                                        }
-                                        className="navigation__list__item__link"
-                                        title={`priority: ${content?.menu?.priority}`}
-                                    >
-                                        {title}
-                                    </Link>
-                                )}
-                                {children.length > 0 ? (
-                                    <MegaMenu
-                                        content={content?.menu?.content}
-                                        handleRouteChange={handleRouteChange}
-                                        closeMenu={closeMenu}
-                                        title={title}
-                                        href={href || ''}
-                                    >
-                                        {children}
-                                    </MegaMenu>
-                                ) : (
-                                    <div></div>
-                                )}
-                            </li>
-                        );
-                    })}
+                {pages.map(({ title, href = '', children = [], content, category }, index) => {
+                    return (
+                        <li
+                            key={index}
+                            className={clsx('navigation__list__item', {
+                                ['navigation__list__item--active']: isRouteActive(href || '', category),
+                                ['navigation__list__item--open']: isMenuOpen(index),
+                            })}
+                        >
+                            {title && href && (
+                                <Link
+                                    href={href || ''}
+                                    onClick={(event) =>
+                                        children.length === 0 ? handleRouteChange() : handleClick(event, index)
+                                    }
+                                    className="navigation__list__item__link"
+                                >
+                                    {title}
+                                </Link>
+                            )}
+                            {children.length > 0 ? (
+                                <MegaMenu
+                                    content={content?.menu?.content}
+                                    handleRouteChange={handleRouteChange}
+                                    closeMenu={closeMenu}
+                                    title={title}
+                                    href={href || ''}
+                                >
+                                    {children}
+                                </MegaMenu>
+                            ) : (
+                                <div></div>
+                            )}
+                        </li>
+                    );
+                })}
             </ul>
             <ul className="navigation__list--search">
                 <li className="navigation__list__item navigation__list__item--search" key={pages.length}>
diff --git a/components/core/Masthead/NavigationContext.tsx b/components/core/Masthead/NavigationContext.tsx
index 2ed7dee4..65ceefa9 100644
--- a/components/core/Masthead/NavigationContext.tsx
+++ b/components/core/Masthead/NavigationContext.tsx
@@ -163,22 +163,10 @@ export const WithNavigationContext = ({ pages, categories, children }: WithNavig
                 case 'external-page':
                     return buildExternalPageItem(node);
             }
-
             return null;
         };
 
         const buildCmsEntries = (children: CmsHierarchyNode[] = []): NavigationItem[] => {
-            children.sort(function (a: any, b: any) {
-                const priorityA = a.menu?.priority || a.priority || a.title;
-                const priorityB = b.menu?.priority || b.priority || b.title;
-
-                if (priorityA < priorityB) {
-                    return 1;
-                } else if (priorityA > priorityB) {
-                    return -1;
-                }
-                return 0;
-            });
             return children.map(buildCmsItem).filter((x) => x != null) as NavigationItem[];
         };
 
diff --git a/components/core/Masthead/walkNavigation.tsx b/components/core/Masthead/walkNavigation.tsx
index c78d75ba..dfba9c62 100644
--- a/components/core/Masthead/walkNavigation.tsx
+++ b/components/core/Masthead/walkNavigation.tsx
@@ -4,7 +4,7 @@ import { NavigationItem } from './NavigationContext';
 export default function walkNavigation(
     current: NavigationItem,
     visitor: (item: NavigationItem, parents: NavigationItem[]) => void,
-    parents: NavigationItem[] = []
+    parents: NavigationItem[] = [],
 ) {
     visitor(current, parents);
     for (let child of current.children) {
@@ -14,7 +14,7 @@ export default function walkNavigation(
 
 export function walkNavigationItems(
     items: NavigationItem[],
-    visitor: (item: NavigationItem, parents: NavigationItem[]) => void
+    visitor: (item: NavigationItem, parents: NavigationItem[]) => void,
 ) {
     for (let item of items) {
         walkNavigation(item, visitor);
@@ -31,88 +31,61 @@ export function getTypeFromSchema(schema: string) {
             return 'group';
         case 'https://demostore.amplience.com/site/pages/category':
             return 'category';
+        case 'https://demostore.amplience.com/site/pages/ecomm-category-placeholder':
+            return 'ecomm-category-placeholder';
     }
     return null;
 }
 
-export function enrichCmsEntries(cmsEntry: CmsHierarchyNode, categoriesById: any, categories: any) {
-    // Generate fake cms entries for categories that exist on the backend,
-    // are flagged as being visible in menu, and don't have an existing cms entry.
-
-    const myType = getTypeFromSchema(cmsEntry.content?._meta?.schema);
-
-    if (!cmsEntry.content.ecommCategories) {
-        categories = null;
-    } else if (categories == null && myType === 'category') {
-        // Locate the category by ID.
-
-        categories = categoriesById[cmsEntry.content.name]?.children;
-    }
+export function generateEcommItem({ id, name, slug, children }: any) {
+    return {
+        content: {
+            _meta: {
+                name,
+                schema: 'https://demostore.amplience.com/site/pages/category',
+                deliveryKey: `category/${slug}`,
+                hierarchy: {
+                    parentId: 'generated',
+                    root: false,
+                },
+                deliveryId: id,
+            },
+            ecommCategories: true,
+            hideProductList: false,
+            components: [],
+            slots: [],
+            active: true,
+            menu: {
+                hidden: false,
+            },
+            name: id,
+        },
+        children: children.map(generateEcommItem),
+    };
+}
 
-    if (categories == null) {
-        for (const child of cmsEntry.children) {
+export function enrichCmsEntries(cmsEntry: CmsHierarchyNode, categoriesById: any, categories: any) {
+    let categoryPosition = 0;
+    const enrichedChildren = [];
+    cmsEntry?.children.forEach((child) => {
+        const childType = getTypeFromSchema(child.content?._meta?.schema);
+        if (cmsEntry.content?.ecommCategories && childType === 'ecomm-category-placeholder') {
+            categories
+                .filter((ecommCategory: any) => !cmsEntry.children.some((c) => c.content.name === ecommCategory.id))
+                .slice(categoryPosition, categoryPosition + child.content.categoryCount)
+                .forEach((ecommCategory: any) => {
+                    const ecommItem = generateEcommItem(ecommCategory);
+                    enrichCmsEntries(ecommItem, categoriesById, categoriesById[ecommItem.content.name]?.children);
+                    enrichedChildren.push(ecommItem);
+                });
+            categoryPosition += child.content.categoryCount;
+        } else if (child.content?.ecommCategories && childType === 'category') {
+            child.children = categoriesById[child.content.name]?.children.map(generateEcommItem);
+            enrichedChildren.push(child);
+        } else {
             enrichCmsEntries(child, categoriesById, null);
+            enrichedChildren.push(child);
         }
-    } else {
-        const children = cmsEntry.children;
-        const remainingChildren = [...children];
-
-        let generated = 0;
-        for (const category of categories) {
-            // Does a CMS category exist for this entry?
-
-            let cmsChild = children.find((child) => {
-                const type = getTypeFromSchema(child.content?._meta?.schema);
-                if (!type) {
-                    return false;
-                }
-
-                return type === 'category' && child.content.name === category.id;
-            });
-
-            let pushCount = 0;
-
-            if (!cmsChild && category.showInMenu) {
-                // Create a dummy one, if it's meant to be visible
-                generated++;
-                cmsChild = {
-                    content: {
-                        _meta: {
-                            name: category.name,
-                            schema: 'https://demostore.amplience.com/site/pages/category',
-                            deliveryKey: 'category/' + category.slug,
-                            hierarchy: {
-                                parentId: 'generated',
-                                root: false,
-                            },
-                            deliveryId: category.id,
-                        },
-                        ecommCategories: true,
-                        hideProductList: false,
-                        components: [],
-                        slots: [],
-                        active: true,
-                        menu: {
-                            hidden: false,
-                            priority: generated * 10,
-                        },
-                        name: category.id,
-                    },
-                    children: [],
-                };
-
-                children.splice(pushCount++, 0, cmsChild);
-            }
-
-            if (cmsChild) {
-                enrichCmsEntries(cmsChild, categoriesById, category.children);
-
-                remainingChildren.splice(remainingChildren.indexOf(cmsChild), 1);
-            }
-        }
-
-        for (const cmsChild of remainingChildren) {
-            enrichCmsEntries(cmsChild, categoriesById, null);
-        }
-    }
+    });
+    cmsEntry.children = enrichedChildren;
 }

From 8ec0307c5642c4245da233da0e53e45b274a9a8e Mon Sep 17 00:00:00 2001
From: Ben Pearey <bpearey@amplience.com>
Date: Fri, 11 Jul 2025 12:02:08 +0100
Subject: [PATCH 02/15] feat: adding stricter types and immutability when
 enriching hierarchy nodes

---
 .../core/Masthead/NavigationContext.tsx       | 23 +++----
 components/core/Masthead/walkNavigation.tsx   | 60 +++++++++++--------
 lib/variable-chunker/variable-chunker.ts      |  8 +++
 3 files changed, 55 insertions(+), 36 deletions(-)
 create mode 100644 lib/variable-chunker/variable-chunker.ts

diff --git a/components/core/Masthead/NavigationContext.tsx b/components/core/Masthead/NavigationContext.tsx
index 65ceefa9..ecf3e8f7 100644
--- a/components/core/Masthead/NavigationContext.tsx
+++ b/components/core/Masthead/NavigationContext.tsx
@@ -1,8 +1,9 @@
 import { createContext, useMemo, useContext, PropsWithChildren } from 'react';
 import { CmsHierarchyNode } from '@lib/cms/fetchHierarchy';
 import { CmsContent } from '@lib/cms/CmsContent';
-import walkNavigation, { enrichCmsEntries, getTypeFromSchema } from './walkNavigation';
+import walkNavigation, { enrichHierarchyNodes, getTypeFromSchema } from './walkNavigation';
 import { useUserContext } from '@lib/user/UserContext';
+import { Category } from '@amplience/dc-integration-middleware';
 
 export type NavigationItem = {
     type: 'page' | 'external-page' | 'category' | 'group';
@@ -12,7 +13,7 @@ export type NavigationItem = {
     parents: NavigationItem[];
 
     content?: CmsContent;
-    category?: any;
+    category?: Category;
 
     nodeContentItem?: CmsContent;
 };
@@ -22,18 +23,20 @@ export type NavigationState = {
     findByHref: (href: string) => NavigationItem | undefined;
 };
 
+export type CategoryById = Record<string, Category>;
+
 const NavigationContext = createContext<NavigationState | null>(null);
 
 interface WithNavigationContextProps extends PropsWithChildren {
     pages: CmsHierarchyNode;
-    categories: any;
+    categories: Category[];
 }
 
 export const WithNavigationContext = ({ pages, categories, children }: WithNavigationContextProps) => {
     const { language } = useUserContext();
-    const flattenCategories = (categories: any[]) => {
-        const allCategories: any[] = [];
-        const bulldozeCategories = (cat: any) => {
+    const flattenCategories = (categories: Category[]) => {
+        const allCategories: Category[] = [];
+        const bulldozeCategories = (cat: Category) => {
             allCategories.push(cat);
             cat.children && cat.children.forEach(bulldozeCategories);
         };
@@ -41,7 +44,7 @@ export const WithNavigationContext = ({ pages, categories, children }: WithNavig
         return allCategories;
     };
     const categoriesById = useMemo(() => {
-        const result: any = {};
+        const result: CategoryById = {};
         for (let item of flattenCategories(categories)) {
             result[item.id] = item;
         }
@@ -51,7 +54,7 @@ export const WithNavigationContext = ({ pages, categories, children }: WithNavig
     const rootItems = useMemo(() => {
         const buildCategoryItem = (
             cmsCategory: CmsHierarchyNode | undefined,
-            ecommerceCategory: any | undefined,
+            ecommerceCategory: Category | undefined,
         ): NavigationItem | null => {
             if (!cmsCategory && !ecommerceCategory) {
                 return null;
@@ -170,9 +173,9 @@ export const WithNavigationContext = ({ pages, categories, children }: WithNavig
             return children.map(buildCmsItem).filter((x) => x != null) as NavigationItem[];
         };
 
-        enrichCmsEntries(pages, categoriesById, categories);
+        const enrichedPages = enrichHierarchyNodes(pages, categoriesById, categories);
 
-        const rootEntries = buildCmsEntries(pages.children);
+        const rootEntries = buildCmsEntries(enrichedPages.children);
         rootEntries.forEach((rootEntry) => {
             walkNavigation(rootEntry, (node: NavigationItem, parents: NavigationItem[]) => {
                 node.parents = parents;
diff --git a/components/core/Masthead/walkNavigation.tsx b/components/core/Masthead/walkNavigation.tsx
index dfba9c62..90e23382 100644
--- a/components/core/Masthead/walkNavigation.tsx
+++ b/components/core/Masthead/walkNavigation.tsx
@@ -1,5 +1,7 @@
 import { CmsHierarchyNode } from '@lib/cms/fetchHierarchy';
-import { NavigationItem } from './NavigationContext';
+import { CategoryById, NavigationItem } from './NavigationContext';
+import { Category } from '@amplience/dc-integration-middleware';
+import { variableChunker } from '@lib/variable-chunker/variable-chunker';
 
 export default function walkNavigation(
     current: NavigationItem,
@@ -37,7 +39,7 @@ export function getTypeFromSchema(schema: string) {
     return null;
 }
 
-export function generateEcommItem({ id, name, slug, children }: any) {
+export function generateCmsCategory({ id, name, slug, children }: Category): CmsHierarchyNode {
     return {
         content: {
             _meta: {
@@ -60,32 +62,38 @@ export function generateEcommItem({ id, name, slug, children }: any) {
             },
             name: id,
         },
-        children: children.map(generateEcommItem),
+        children: children.map(generateCmsCategory),
     };
 }
 
-export function enrichCmsEntries(cmsEntry: CmsHierarchyNode, categoriesById: any, categories: any) {
-    let categoryPosition = 0;
-    const enrichedChildren = [];
-    cmsEntry?.children.forEach((child) => {
-        const childType = getTypeFromSchema(child.content?._meta?.schema);
-        if (cmsEntry.content?.ecommCategories && childType === 'ecomm-category-placeholder') {
-            categories
-                .filter((ecommCategory: any) => !cmsEntry.children.some((c) => c.content.name === ecommCategory.id))
-                .slice(categoryPosition, categoryPosition + child.content.categoryCount)
-                .forEach((ecommCategory: any) => {
-                    const ecommItem = generateEcommItem(ecommCategory);
-                    enrichCmsEntries(ecommItem, categoriesById, categoriesById[ecommItem.content.name]?.children);
-                    enrichedChildren.push(ecommItem);
-                });
-            categoryPosition += child.content.categoryCount;
-        } else if (child.content?.ecommCategories && childType === 'category') {
-            child.children = categoriesById[child.content.name]?.children.map(generateEcommItem);
-            enrichedChildren.push(child);
-        } else {
-            enrichCmsEntries(child, categoriesById, null);
-            enrichedChildren.push(child);
+export function enrichHierarchyNodes(
+    rootCmsNode: CmsHierarchyNode,
+    categoriesById: CategoryById,
+    categories: Category[],
+): CmsHierarchyNode {
+    const ecommCategoriesEnabled = Boolean(rootCmsNode.content?.ecommCategories);
+    const unusedCategories = categories.filter(
+        (ecommCategory: Category) => !rootCmsNode.children.some((c) => c.content.name === ecommCategory.id),
+    );
+    const nextCategoryChunk = variableChunker<Category>(unusedCategories);
+    const enrichedRootNodeChildren = rootCmsNode.children.reduce((cmsNodes: CmsHierarchyNode[], childNode) => {
+        const childNodeType = getTypeFromSchema(childNode.content?._meta?.schema);
+        if (ecommCategoriesEnabled && childNodeType === 'ecomm-category-placeholder') {
+            const enrichedChildNodes = nextCategoryChunk(childNode.content.categoryCount).map((category: Category) =>
+                enrichHierarchyNodes(
+                    generateCmsCategory(category),
+                    categoriesById,
+                    categoriesById[category.id]?.children,
+                ),
+            );
+            return [...cmsNodes, ...enrichedChildNodes];
         }
-    });
-    cmsEntry.children = enrichedChildren;
+        if (ecommCategoriesEnabled && childNodeType === 'category') {
+            childNode.children = categoriesById[childNode.content.name]?.children.map(generateCmsCategory);
+            return [...cmsNodes, childNode];
+        }
+        return [...cmsNodes, enrichHierarchyNodes(childNode, categoriesById, [])];
+    }, []);
+
+    return { content: rootCmsNode.content, children: enrichedRootNodeChildren };
 }
diff --git a/lib/variable-chunker/variable-chunker.ts b/lib/variable-chunker/variable-chunker.ts
new file mode 100644
index 00000000..16e9bcfc
--- /dev/null
+++ b/lib/variable-chunker/variable-chunker.ts
@@ -0,0 +1,8 @@
+export function variableChunker<T>(arr: T[]): (size: number) => T[] {
+    let offset = 0;
+    return (size: number) => {
+        const nextChunk = arr.slice(offset, offset + size);
+        offset += size;
+        return nextChunk;
+    };
+}

From 396a908929b16365d54556b43211798cb3e0513c Mon Sep 17 00:00:00 2001
From: Ben Pearey <bpearey@amplience.com>
Date: Wed, 16 Jul 2025 10:45:27 +0100
Subject: [PATCH 03/15] feat: only use selectable placeholder

---
 .../core/Masthead/NavigationContext.tsx       |  4 ++--
 components/core/Masthead/walkNavigation.tsx   | 23 ++++---------------
 lib/variable-chunker/variable-chunker.ts      |  8 -------
 3 files changed, 7 insertions(+), 28 deletions(-)
 delete mode 100644 lib/variable-chunker/variable-chunker.ts

diff --git a/components/core/Masthead/NavigationContext.tsx b/components/core/Masthead/NavigationContext.tsx
index ecf3e8f7..f0f947a6 100644
--- a/components/core/Masthead/NavigationContext.tsx
+++ b/components/core/Masthead/NavigationContext.tsx
@@ -173,7 +173,7 @@ export const WithNavigationContext = ({ pages, categories, children }: WithNavig
             return children.map(buildCmsItem).filter((x) => x != null) as NavigationItem[];
         };
 
-        const enrichedPages = enrichHierarchyNodes(pages, categoriesById, categories);
+        const enrichedPages = enrichHierarchyNodes(pages, categoriesById);
 
         const rootEntries = buildCmsEntries(enrichedPages.children);
         rootEntries.forEach((rootEntry) => {
@@ -182,7 +182,7 @@ export const WithNavigationContext = ({ pages, categories, children }: WithNavig
             });
         });
         return rootEntries as NavigationItem[];
-    }, [pages, categories, categoriesById, language]);
+    }, [pages, categoriesById, language]);
 
     const findByHref = (href: string) => {
         let result: NavigationItem | undefined;
diff --git a/components/core/Masthead/walkNavigation.tsx b/components/core/Masthead/walkNavigation.tsx
index 90e23382..2777b97d 100644
--- a/components/core/Masthead/walkNavigation.tsx
+++ b/components/core/Masthead/walkNavigation.tsx
@@ -1,7 +1,6 @@
 import { CmsHierarchyNode } from '@lib/cms/fetchHierarchy';
 import { CategoryById, NavigationItem } from './NavigationContext';
 import { Category } from '@amplience/dc-integration-middleware';
-import { variableChunker } from '@lib/variable-chunker/variable-chunker';
 
 export default function walkNavigation(
     current: NavigationItem,
@@ -66,33 +65,21 @@ export function generateCmsCategory({ id, name, slug, children }: Category): Cms
     };
 }
 
-export function enrichHierarchyNodes(
-    rootCmsNode: CmsHierarchyNode,
-    categoriesById: CategoryById,
-    categories: Category[],
-): CmsHierarchyNode {
+export function enrichHierarchyNodes(rootCmsNode: CmsHierarchyNode, categoriesById: CategoryById): CmsHierarchyNode {
     const ecommCategoriesEnabled = Boolean(rootCmsNode.content?.ecommCategories);
-    const unusedCategories = categories.filter(
-        (ecommCategory: Category) => !rootCmsNode.children.some((c) => c.content.name === ecommCategory.id),
-    );
-    const nextCategoryChunk = variableChunker<Category>(unusedCategories);
     const enrichedRootNodeChildren = rootCmsNode.children.reduce((cmsNodes: CmsHierarchyNode[], childNode) => {
         const childNodeType = getTypeFromSchema(childNode.content?._meta?.schema);
         if (ecommCategoriesEnabled && childNodeType === 'ecomm-category-placeholder') {
-            const enrichedChildNodes = nextCategoryChunk(childNode.content.categoryCount).map((category: Category) =>
-                enrichHierarchyNodes(
-                    generateCmsCategory(category),
-                    categoriesById,
-                    categoriesById[category.id]?.children,
-                ),
-            );
+            const enrichedChildNodes = childNode.content.name.map((n: string) => {
+                return enrichHierarchyNodes(generateCmsCategory(categoriesById[n]), categoriesById);
+            });
             return [...cmsNodes, ...enrichedChildNodes];
         }
         if (ecommCategoriesEnabled && childNodeType === 'category') {
             childNode.children = categoriesById[childNode.content.name]?.children.map(generateCmsCategory);
             return [...cmsNodes, childNode];
         }
-        return [...cmsNodes, enrichHierarchyNodes(childNode, categoriesById, [])];
+        return [...cmsNodes, enrichHierarchyNodes(childNode, categoriesById)];
     }, []);
 
     return { content: rootCmsNode.content, children: enrichedRootNodeChildren };
diff --git a/lib/variable-chunker/variable-chunker.ts b/lib/variable-chunker/variable-chunker.ts
deleted file mode 100644
index 16e9bcfc..00000000
--- a/lib/variable-chunker/variable-chunker.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export function variableChunker<T>(arr: T[]): (size: number) => T[] {
-    let offset = 0;
-    return (size: number) => {
-        const nextChunk = arr.slice(offset, offset + size);
-        offset += size;
-        return nextChunk;
-    };
-}

From dc419687d5e1b441bd37fbb3b29f8a3ea7b9c7db Mon Sep 17 00:00:00 2001
From: DB <dbhari@amplience.com>
Date: Mon, 21 Jul 2025 14:03:09 +0100
Subject: [PATCH 04/15] fix: hide placeholder if 'is active button' unchecked

---
 components/core/Masthead/walkNavigation.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/core/Masthead/walkNavigation.tsx b/components/core/Masthead/walkNavigation.tsx
index 2777b97d..fb2e2796 100644
--- a/components/core/Masthead/walkNavigation.tsx
+++ b/components/core/Masthead/walkNavigation.tsx
@@ -70,6 +70,9 @@ export function enrichHierarchyNodes(rootCmsNode: CmsHierarchyNode, categoriesBy
     const enrichedRootNodeChildren = rootCmsNode.children.reduce((cmsNodes: CmsHierarchyNode[], childNode) => {
         const childNodeType = getTypeFromSchema(childNode.content?._meta?.schema);
         if (ecommCategoriesEnabled && childNodeType === 'ecomm-category-placeholder') {
+            if (!childNode.content?.active) {
+                return [];
+            }
             const enrichedChildNodes = childNode.content.name.map((n: string) => {
                 return enrichHierarchyNodes(generateCmsCategory(categoriesById[n]), categoriesById);
             });

From e009c526109e303041920ee15f1dbdf387864154 Mon Sep 17 00:00:00 2001
From: Ben Pearey <bpearey@amplience.com>
Date: Tue, 22 Jul 2025 10:22:52 +0100
Subject: [PATCH 05/15] fix: pass child content active state when generating
 cms categories

---
 components/core/Masthead/walkNavigation.tsx | 23 ++++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/components/core/Masthead/walkNavigation.tsx b/components/core/Masthead/walkNavigation.tsx
index fb2e2796..e4e7aa80 100644
--- a/components/core/Masthead/walkNavigation.tsx
+++ b/components/core/Masthead/walkNavigation.tsx
@@ -38,7 +38,10 @@ export function getTypeFromSchema(schema: string) {
     return null;
 }
 
-export function generateCmsCategory({ id, name, slug, children }: Category): CmsHierarchyNode {
+export function generateCmsCategory(
+    { id, name, slug, children }: Category,
+    options?: { active: boolean },
+): CmsHierarchyNode {
     return {
         content: {
             _meta: {
@@ -55,13 +58,13 @@ export function generateCmsCategory({ id, name, slug, children }: Category): Cms
             hideProductList: false,
             components: [],
             slots: [],
-            active: true,
+            active: options?.active ?? true,
             menu: {
                 hidden: false,
             },
             name: id,
         },
-        children: children.map(generateCmsCategory),
+        children: children.map((child) => generateCmsCategory(child)),
     };
 }
 
@@ -70,16 +73,20 @@ export function enrichHierarchyNodes(rootCmsNode: CmsHierarchyNode, categoriesBy
     const enrichedRootNodeChildren = rootCmsNode.children.reduce((cmsNodes: CmsHierarchyNode[], childNode) => {
         const childNodeType = getTypeFromSchema(childNode.content?._meta?.schema);
         if (ecommCategoriesEnabled && childNodeType === 'ecomm-category-placeholder') {
-            if (!childNode.content?.active) {
-                return [];
-            }
             const enrichedChildNodes = childNode.content.name.map((n: string) => {
-                return enrichHierarchyNodes(generateCmsCategory(categoriesById[n]), categoriesById);
+                return enrichHierarchyNodes(
+                    generateCmsCategory(categoriesById[n], {
+                        active: childNode.content?.active,
+                    }),
+                    categoriesById,
+                );
             });
             return [...cmsNodes, ...enrichedChildNodes];
         }
         if (ecommCategoriesEnabled && childNodeType === 'category') {
-            childNode.children = categoriesById[childNode.content.name]?.children.map(generateCmsCategory);
+            childNode.children = categoriesById[childNode.content.name]?.children.map((child) =>
+                generateCmsCategory(child),
+            );
             return [...cmsNodes, childNode];
         }
         return [...cmsNodes, enrichHierarchyNodes(childNode, categoriesById)];

From 18e642c88f77e3b3eb9841df08cbcb8c0a43466f Mon Sep 17 00:00:00 2001
From: Ben Pearey <bpearey@amplience.com>
Date: Tue, 29 Jul 2025 17:14:18 +0100
Subject: [PATCH 06/15] feat: ecomm container renamed to match schemas

---
 components/core/Masthead/NavigationContext.tsx | 3 ++-
 components/core/Masthead/walkNavigation.tsx    | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/core/Masthead/NavigationContext.tsx b/components/core/Masthead/NavigationContext.tsx
index f0f947a6..d08811c2 100644
--- a/components/core/Masthead/NavigationContext.tsx
+++ b/components/core/Masthead/NavigationContext.tsx
@@ -157,7 +157,8 @@ export const WithNavigationContext = ({ pages, categories, children }: WithNavig
             }
             switch (type) {
                 case 'category':
-                    let category = categoriesById[node.content.name];
+                case 'ecommerce-container':
+                    const category = categoriesById[node.content.name];
                     return buildCategoryItem(node, category);
                 case 'group':
                     return buildGroupItem(node);
diff --git a/components/core/Masthead/walkNavigation.tsx b/components/core/Masthead/walkNavigation.tsx
index e4e7aa80..1e0aef1f 100644
--- a/components/core/Masthead/walkNavigation.tsx
+++ b/components/core/Masthead/walkNavigation.tsx
@@ -32,8 +32,8 @@ export function getTypeFromSchema(schema: string) {
             return 'group';
         case 'https://demostore.amplience.com/site/pages/category':
             return 'category';
-        case 'https://demostore.amplience.com/site/pages/ecomm-category-placeholder':
-            return 'ecomm-category-placeholder';
+        case 'https://demostore.amplience.com/site/pages/ecommerce-container':
+            return 'ecommerce-container';
     }
     return null;
 }
@@ -72,7 +72,7 @@ export function enrichHierarchyNodes(rootCmsNode: CmsHierarchyNode, categoriesBy
     const ecommCategoriesEnabled = Boolean(rootCmsNode.content?.ecommCategories);
     const enrichedRootNodeChildren = rootCmsNode.children.reduce((cmsNodes: CmsHierarchyNode[], childNode) => {
         const childNodeType = getTypeFromSchema(childNode.content?._meta?.schema);
-        if (ecommCategoriesEnabled && childNodeType === 'ecomm-category-placeholder') {
+        if (ecommCategoriesEnabled && childNodeType === 'ecommerce-container') {
             const enrichedChildNodes = childNode.content.name.map((n: string) => {
                 return enrichHierarchyNodes(
                     generateCmsCategory(categoriesById[n], {

From fd7287b7ae9c93221d59ab7d35e666615a100b7c Mon Sep 17 00:00:00 2001
From: Ben Pearey <bpearey@amplience.com>
Date: Wed, 30 Jul 2025 14:33:20 +0100
Subject: [PATCH 07/15] feat: removing need for autopopulate ecomm flag

---
 components/core/Masthead/NavigationContext.tsx |  6 +++---
 components/core/Masthead/walkNavigation.tsx    | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/core/Masthead/NavigationContext.tsx b/components/core/Masthead/NavigationContext.tsx
index d08811c2..acee38c9 100644
--- a/components/core/Masthead/NavigationContext.tsx
+++ b/components/core/Masthead/NavigationContext.tsx
@@ -6,7 +6,7 @@ import { useUserContext } from '@lib/user/UserContext';
 import { Category } from '@amplience/dc-integration-middleware';
 
 export type NavigationItem = {
-    type: 'page' | 'external-page' | 'category' | 'group';
+    type: 'page' | 'external-page' | 'category' | 'group' | 'ecommerce-container-generated';
     title: string;
     href?: string;
     children: NavigationItem[];
@@ -61,7 +61,7 @@ export const WithNavigationContext = ({ pages, categories, children }: WithNavig
             }
             const children: NavigationItem[] = [];
             const result = {
-                type: 'category',
+                type: getTypeFromSchema(cmsCategory?.content?._meta?.schema) || 'category',
                 title: ecommerceCategory?.name,
                 href: cmsCategory?.content?._meta?.deliveryKey
                     ? `/category/${cmsCategory?.content?._meta?.deliveryKey.split('/')[1]}`
@@ -157,7 +157,7 @@ export const WithNavigationContext = ({ pages, categories, children }: WithNavig
             }
             switch (type) {
                 case 'category':
-                case 'ecommerce-container':
+                case 'ecommerce-container-generated':
                     const category = categoriesById[node.content.name];
                     return buildCategoryItem(node, category);
                 case 'group':
diff --git a/components/core/Masthead/walkNavigation.tsx b/components/core/Masthead/walkNavigation.tsx
index 1e0aef1f..a3f77fc3 100644
--- a/components/core/Masthead/walkNavigation.tsx
+++ b/components/core/Masthead/walkNavigation.tsx
@@ -34,6 +34,8 @@ export function getTypeFromSchema(schema: string) {
             return 'category';
         case 'https://demostore.amplience.com/site/pages/ecommerce-container':
             return 'ecommerce-container';
+        case 'https://demostore.amplience.com/site/pages/ecommerce-container-generated':
+            return 'ecommerce-container-generated';
     }
     return null;
 }
@@ -46,7 +48,7 @@ export function generateCmsCategory(
         content: {
             _meta: {
                 name,
-                schema: 'https://demostore.amplience.com/site/pages/category',
+                schema: 'https://demostore.amplience.com/site/pages/ecommerce-container-generated',
                 deliveryKey: `category/${slug}`,
                 hierarchy: {
                     parentId: 'generated',
@@ -54,7 +56,6 @@ export function generateCmsCategory(
                 },
                 deliveryId: id,
             },
-            ecommCategories: true,
             hideProductList: false,
             components: [],
             slots: [],
@@ -69,10 +70,9 @@ export function generateCmsCategory(
 }
 
 export function enrichHierarchyNodes(rootCmsNode: CmsHierarchyNode, categoriesById: CategoryById): CmsHierarchyNode {
-    const ecommCategoriesEnabled = Boolean(rootCmsNode.content?.ecommCategories);
     const enrichedRootNodeChildren = rootCmsNode.children.reduce((cmsNodes: CmsHierarchyNode[], childNode) => {
         const childNodeType = getTypeFromSchema(childNode.content?._meta?.schema);
-        if (ecommCategoriesEnabled && childNodeType === 'ecommerce-container') {
+        if (childNodeType === 'ecommerce-container') {
             const enrichedChildNodes = childNode.content.name.map((n: string) => {
                 return enrichHierarchyNodes(
                     generateCmsCategory(categoriesById[n], {
@@ -83,7 +83,7 @@ export function enrichHierarchyNodes(rootCmsNode: CmsHierarchyNode, categoriesBy
             });
             return [...cmsNodes, ...enrichedChildNodes];
         }
-        if (ecommCategoriesEnabled && childNodeType === 'category') {
+        if (childNodeType === 'category') {
             childNode.children = categoriesById[childNode.content.name]?.children.map((child) =>
                 generateCmsCategory(child),
             );

From de13dddc1e7efb876973b9521eba8e0fda568e4e Mon Sep 17 00:00:00 2001
From: DB <dbhari@amplience.com>
Date: Wed, 30 Jul 2025 15:22:44 +0100
Subject: [PATCH 08/15] feat: add placeholder indication

---
 components/cms-modern/Navigation/Navigation.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/components/cms-modern/Navigation/Navigation.tsx b/components/cms-modern/Navigation/Navigation.tsx
index 772598e7..320b8214 100644
--- a/components/cms-modern/Navigation/Navigation.tsx
+++ b/components/cms-modern/Navigation/Navigation.tsx
@@ -16,6 +16,7 @@ const Navigation = ({ pages, style }: NavigationProps) => {
     const { navigationToggle, toggleNavigation } = useUI();
     const [selectedMenuKey, setSelectedMenuKey] = useState<number | null>(null);
     const router = useRouter();
+    const vse = router.query.vse;
     const isRouteActive = (href: string | undefined, category: any): boolean => {
         // !!using the first word in the category slug as the current category
         // => full path should be present in slugs, and 1st level category slug shouldn't contain '-'
@@ -61,10 +62,21 @@ const Navigation = ({ pages, style }: NavigationProps) => {
         setSelectedMenuKey(null);
     };
 
+    const itemType = (type: string) => {
+        switch (type) {
+            case 'ecommerce-container-generated':
+                return 'Commerce Item';
+            case 'category':
+                return 'CMS Override Item';
+            default:
+                return 'CMS Item';
+        }
+    };
+
     return (
         <nav className="navigation" style={style}>
             <ul className="navigation__list">
-                {pages.map(({ title, href = '', children = [], content, category }, index) => {
+                {pages.map(({ title, href = '', children = [], content, category, type }, index) => {
                     return (
                         <li
                             key={index}
@@ -80,6 +92,7 @@ const Navigation = ({ pages, style }: NavigationProps) => {
                                         children.length === 0 ? handleRouteChange() : handleClick(event, index)
                                     }
                                     className="navigation__list__item__link"
+                                    title={vse && itemType(type)}
                                 >
                                     {title}
                                 </Link>

From 98d175e89fa5daed2296603b25964f9d7c5bd047 Mon Sep 17 00:00:00 2001
From: DB <dbhari@amplience.com>
Date: Thu, 31 Jul 2025 16:44:17 +0100
Subject: [PATCH 09/15] feat: add show all ecomm categories switch

---
 .../core/Masthead/NavigationContext.tsx       |  4 +--
 components/core/Masthead/walkNavigation.tsx   | 32 ++++++++++++-------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/components/core/Masthead/NavigationContext.tsx b/components/core/Masthead/NavigationContext.tsx
index acee38c9..3b926ca9 100644
--- a/components/core/Masthead/NavigationContext.tsx
+++ b/components/core/Masthead/NavigationContext.tsx
@@ -174,7 +174,7 @@ export const WithNavigationContext = ({ pages, categories, children }: WithNavig
             return children.map(buildCmsItem).filter((x) => x != null) as NavigationItem[];
         };
 
-        const enrichedPages = enrichHierarchyNodes(pages, categoriesById);
+        const enrichedPages = enrichHierarchyNodes(pages, categoriesById, categories);
 
         const rootEntries = buildCmsEntries(enrichedPages.children);
         rootEntries.forEach((rootEntry) => {
@@ -183,7 +183,7 @@ export const WithNavigationContext = ({ pages, categories, children }: WithNavig
             });
         });
         return rootEntries as NavigationItem[];
-    }, [pages, categoriesById, language]);
+    }, [pages, categoriesById, categories, language]);
 
     const findByHref = (href: string) => {
         let result: NavigationItem | undefined;
diff --git a/components/core/Masthead/walkNavigation.tsx b/components/core/Masthead/walkNavigation.tsx
index a3f77fc3..d9dd82a8 100644
--- a/components/core/Masthead/walkNavigation.tsx
+++ b/components/core/Masthead/walkNavigation.tsx
@@ -69,19 +69,29 @@ export function generateCmsCategory(
     };
 }
 
-export function enrichHierarchyNodes(rootCmsNode: CmsHierarchyNode, categoriesById: CategoryById): CmsHierarchyNode {
+export function enrichHierarchyNodes(
+    rootCmsNode: CmsHierarchyNode,
+    categoriesById: CategoryById,
+    categories: Category[],
+): CmsHierarchyNode {
     const enrichedRootNodeChildren = rootCmsNode.children.reduce((cmsNodes: CmsHierarchyNode[], childNode) => {
         const childNodeType = getTypeFromSchema(childNode.content?._meta?.schema);
         if (childNodeType === 'ecommerce-container') {
-            const enrichedChildNodes = childNode.content.name.map((n: string) => {
-                return enrichHierarchyNodes(
-                    generateCmsCategory(categoriesById[n], {
-                        active: childNode.content?.active,
-                    }),
-                    categoriesById,
-                );
-            });
-            return [...cmsNodes, ...enrichedChildNodes];
+            const categoryIds = childNode.content.ecommerceConfiguration.showAll
+                ? categories.map((c) => c.id)
+                : childNode.content.ecommerceConfiguration.categoryIds;
+            if (categoryIds) {
+                const enrichedChildNodes = categoryIds.map((n: string) => {
+                    return enrichHierarchyNodes(
+                        generateCmsCategory(categoriesById[n], {
+                            active: childNode.content?.active,
+                        }),
+                        categoriesById,
+                        categories,
+                    );
+                });
+                return [...cmsNodes, ...enrichedChildNodes];
+            }
         }
         if (childNodeType === 'category') {
             childNode.children = categoriesById[childNode.content.name]?.children.map((child) =>
@@ -89,7 +99,7 @@ export function enrichHierarchyNodes(rootCmsNode: CmsHierarchyNode, categoriesBy
             );
             return [...cmsNodes, childNode];
         }
-        return [...cmsNodes, enrichHierarchyNodes(childNode, categoriesById)];
+        return [...cmsNodes, enrichHierarchyNodes(childNode, categoriesById, categories)];
     }, []);
 
     return { content: rootCmsNode.content, children: enrichedRootNodeChildren };

From 8b64883a278d7878c2822808d74d602e6c66b867 Mon Sep 17 00:00:00 2001
From: Ben Pearey <bpearey@amplience.com>
Date: Thu, 31 Jul 2025 17:19:02 +0100
Subject: [PATCH 10/15] feat: making sure the correct category id is passed

---
 .../core/Masthead/NavigationContext.tsx       |  7 ++--
 components/core/Masthead/walkNavigation.tsx   | 36 +++++++++----------
 2 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/components/core/Masthead/NavigationContext.tsx b/components/core/Masthead/NavigationContext.tsx
index 3b926ca9..75426caf 100644
--- a/components/core/Masthead/NavigationContext.tsx
+++ b/components/core/Masthead/NavigationContext.tsx
@@ -6,7 +6,7 @@ import { useUserContext } from '@lib/user/UserContext';
 import { Category } from '@amplience/dc-integration-middleware';
 
 export type NavigationItem = {
-    type: 'page' | 'external-page' | 'category' | 'group' | 'ecommerce-container-generated';
+    type: 'page' | 'external-page' | 'category' | 'group' | 'ecommerce-category-generated';
     title: string;
     href?: string;
     children: NavigationItem[];
@@ -157,9 +157,8 @@ export const WithNavigationContext = ({ pages, categories, children }: WithNavig
             }
             switch (type) {
                 case 'category':
-                case 'ecommerce-container-generated':
-                    const category = categoriesById[node.content.name];
-                    return buildCategoryItem(node, category);
+                case 'ecommerce-category-generated':
+                    return buildCategoryItem(node, categoriesById[node.content.categoryId]);
                 case 'group':
                     return buildGroupItem(node);
                 case 'page':
diff --git a/components/core/Masthead/walkNavigation.tsx b/components/core/Masthead/walkNavigation.tsx
index d9dd82a8..06dda2a9 100644
--- a/components/core/Masthead/walkNavigation.tsx
+++ b/components/core/Masthead/walkNavigation.tsx
@@ -34,8 +34,8 @@ export function getTypeFromSchema(schema: string) {
             return 'category';
         case 'https://demostore.amplience.com/site/pages/ecommerce-container':
             return 'ecommerce-container';
-        case 'https://demostore.amplience.com/site/pages/ecommerce-container-generated':
-            return 'ecommerce-container-generated';
+        case 'https://demostore.amplience.com/site/pages/ecommerce-category-generated':
+            return 'ecommerce-category-generated';
     }
     return null;
 }
@@ -48,7 +48,7 @@ export function generateCmsCategory(
         content: {
             _meta: {
                 name,
-                schema: 'https://demostore.amplience.com/site/pages/ecommerce-container-generated',
+                schema: 'https://demostore.amplience.com/site/pages/ecommerce-category-generated',
                 deliveryKey: `category/${slug}`,
                 hierarchy: {
                     parentId: 'generated',
@@ -63,7 +63,7 @@ export function generateCmsCategory(
             menu: {
                 hidden: false,
             },
-            name: id,
+            categoryId: id,
         },
         children: children.map((child) => generateCmsCategory(child)),
     };
@@ -77,24 +77,22 @@ export function enrichHierarchyNodes(
     const enrichedRootNodeChildren = rootCmsNode.children.reduce((cmsNodes: CmsHierarchyNode[], childNode) => {
         const childNodeType = getTypeFromSchema(childNode.content?._meta?.schema);
         if (childNodeType === 'ecommerce-container') {
-            const categoryIds = childNode.content.ecommerceConfiguration.showAll
+            const categoryIds = childNode.content?.ecommerceConfiguration?.showAll
                 ? categories.map((c) => c.id)
-                : childNode.content.ecommerceConfiguration.categoryIds;
-            if (categoryIds) {
-                const enrichedChildNodes = categoryIds.map((n: string) => {
-                    return enrichHierarchyNodes(
-                        generateCmsCategory(categoriesById[n], {
-                            active: childNode.content?.active,
-                        }),
-                        categoriesById,
-                        categories,
-                    );
-                });
-                return [...cmsNodes, ...enrichedChildNodes];
-            }
+                : childNode.content?.ecommerceConfiguration?.categoryIds;
+            const enrichedChildNodes = (categoryIds || []).map((n: string) => {
+                return enrichHierarchyNodes(
+                    generateCmsCategory(categoriesById[n], {
+                        active: childNode.content?.active,
+                    }),
+                    categoriesById,
+                    categories,
+                );
+            });
+            return [...cmsNodes, ...enrichedChildNodes];
         }
         if (childNodeType === 'category') {
-            childNode.children = categoriesById[childNode.content.name]?.children.map((child) =>
+            childNode.children = categoriesById[childNode.content.categoryId]?.children.map((child) =>
                 generateCmsCategory(child),
             );
             return [...cmsNodes, childNode];

From 25a92203220d15c11631559ff60dd60ff752dd77 Mon Sep 17 00:00:00 2001
From: Ben Pearey <bpearey@amplience.com>
Date: Thu, 31 Jul 2025 17:22:58 +0100
Subject: [PATCH 11/15] refactor: renaming properties for better visibility

---
 components/core/Masthead/walkNavigation.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/core/Masthead/walkNavigation.tsx b/components/core/Masthead/walkNavigation.tsx
index 06dda2a9..4f65376f 100644
--- a/components/core/Masthead/walkNavigation.tsx
+++ b/components/core/Masthead/walkNavigation.tsx
@@ -77,12 +77,12 @@ export function enrichHierarchyNodes(
     const enrichedRootNodeChildren = rootCmsNode.children.reduce((cmsNodes: CmsHierarchyNode[], childNode) => {
         const childNodeType = getTypeFromSchema(childNode.content?._meta?.schema);
         if (childNodeType === 'ecommerce-container') {
-            const categoryIds = childNode.content?.ecommerceConfiguration?.showAll
-                ? categories.map((c) => c.id)
+            const categoryIds: string[] = childNode.content?.ecommerceConfiguration?.showAll
+                ? categories.map((category) => category.id)
                 : childNode.content?.ecommerceConfiguration?.categoryIds;
-            const enrichedChildNodes = (categoryIds || []).map((n: string) => {
+            const enrichedChildNodes = (categoryIds || []).map((categoryId) => {
                 return enrichHierarchyNodes(
-                    generateCmsCategory(categoriesById[n], {
+                    generateCmsCategory(categoriesById[categoryId], {
                         active: childNode.content?.active,
                     }),
                     categoriesById,

From 78e38ae9f9f26713999d478987275d85995d0e29 Mon Sep 17 00:00:00 2001
From: Ben Pearey <bpearey@amplience.com>
Date: Thu, 31 Jul 2025 17:27:47 +0100
Subject: [PATCH 12/15] fix: moving empty array check earlier

---
 components/core/Masthead/walkNavigation.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/core/Masthead/walkNavigation.tsx b/components/core/Masthead/walkNavigation.tsx
index 4f65376f..4eb6a4fb 100644
--- a/components/core/Masthead/walkNavigation.tsx
+++ b/components/core/Masthead/walkNavigation.tsx
@@ -79,8 +79,8 @@ export function enrichHierarchyNodes(
         if (childNodeType === 'ecommerce-container') {
             const categoryIds: string[] = childNode.content?.ecommerceConfiguration?.showAll
                 ? categories.map((category) => category.id)
-                : childNode.content?.ecommerceConfiguration?.categoryIds;
-            const enrichedChildNodes = (categoryIds || []).map((categoryId) => {
+                : childNode.content?.ecommerceConfiguration?.categoryIds || [];
+            const enrichedChildNodes = categoryIds.map((categoryId) => {
                 return enrichHierarchyNodes(
                     generateCmsCategory(categoriesById[categoryId], {
                         active: childNode.content?.active,

From ea2fb04d7ff19c68891e5f7736d8980ba11b35d2 Mon Sep 17 00:00:00 2001
From: Ben Pearey <bpearey@amplience.com>
Date: Thu, 31 Jul 2025 17:30:21 +0100
Subject: [PATCH 13/15] refactor: removing unnecessary map return

---
 components/core/Masthead/walkNavigation.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/core/Masthead/walkNavigation.tsx b/components/core/Masthead/walkNavigation.tsx
index 4eb6a4fb..ed215afe 100644
--- a/components/core/Masthead/walkNavigation.tsx
+++ b/components/core/Masthead/walkNavigation.tsx
@@ -80,15 +80,15 @@ export function enrichHierarchyNodes(
             const categoryIds: string[] = childNode.content?.ecommerceConfiguration?.showAll
                 ? categories.map((category) => category.id)
                 : childNode.content?.ecommerceConfiguration?.categoryIds || [];
-            const enrichedChildNodes = categoryIds.map((categoryId) => {
-                return enrichHierarchyNodes(
+            const enrichedChildNodes = categoryIds.map((categoryId) =>
+                enrichHierarchyNodes(
                     generateCmsCategory(categoriesById[categoryId], {
                         active: childNode.content?.active,
                     }),
                     categoriesById,
                     categories,
-                );
-            });
+                ),
+            );
             return [...cmsNodes, ...enrichedChildNodes];
         }
         if (childNodeType === 'category') {

From dc8eb9c0ad099e666589250bb9d8a2a65c0fe9a9 Mon Sep 17 00:00:00 2001
From: Ben Pearey <bpearey@amplience.com>
Date: Tue, 5 Aug 2025 14:09:12 +0100
Subject: [PATCH 14/15] fix: rename item type to match refactor name change

---
 components/cms-modern/Navigation/Navigation.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/cms-modern/Navigation/Navigation.tsx b/components/cms-modern/Navigation/Navigation.tsx
index 320b8214..a9c37b3d 100644
--- a/components/cms-modern/Navigation/Navigation.tsx
+++ b/components/cms-modern/Navigation/Navigation.tsx
@@ -64,7 +64,7 @@ const Navigation = ({ pages, style }: NavigationProps) => {
 
     const itemType = (type: string) => {
         switch (type) {
-            case 'ecommerce-container-generated':
+            case 'ecommerce-category-generated':
                 return 'Commerce Item';
             case 'category':
                 return 'CMS Override Item';

From b47403845693f38afae5b8263cb22c544a890315 Mon Sep 17 00:00:00 2001
From: Ben Pearey <benpearey@gmail.com>
Date: Thu, 14 Aug 2025 15:35:07 +0100
Subject: [PATCH 15/15] feat: replace ecomm category with cms override (#97)

* feat: only display category node when not used as an override

* fix: category overrides ecomm category in hierarchy

* fix: update to use renamed categoryId property
---
 .../core/Masthead/NavigationContext.tsx       |  3 -
 components/core/Masthead/walkNavigation.tsx   | 90 ++++++++++++-------
 pages/category/[slug].tsx                     |  7 +-
 3 files changed, 61 insertions(+), 39 deletions(-)

diff --git a/components/core/Masthead/NavigationContext.tsx b/components/core/Masthead/NavigationContext.tsx
index 75426caf..fc85dc36 100644
--- a/components/core/Masthead/NavigationContext.tsx
+++ b/components/core/Masthead/NavigationContext.tsx
@@ -152,9 +152,6 @@ export const WithNavigationContext = ({ pages, categories, children }: WithNavig
             if (!type) {
                 return null;
             }
-            if (!node.content?.active) {
-                return null;
-            }
             switch (type) {
                 case 'category':
                 case 'ecommerce-category-generated':
diff --git a/components/core/Masthead/walkNavigation.tsx b/components/core/Masthead/walkNavigation.tsx
index ed215afe..5c995531 100644
--- a/components/core/Masthead/walkNavigation.tsx
+++ b/components/core/Masthead/walkNavigation.tsx
@@ -40,10 +40,7 @@ export function getTypeFromSchema(schema: string) {
     return null;
 }
 
-export function generateCmsCategory(
-    { id, name, slug, children }: Category,
-    options?: { active: boolean },
-): CmsHierarchyNode {
+export function generateCmsCategory({ id, name, slug, children }: Category): CmsHierarchyNode {
     return {
         content: {
             _meta: {
@@ -59,7 +56,7 @@ export function generateCmsCategory(
             hideProductList: false,
             components: [],
             slots: [],
-            active: options?.active ?? true,
+            active: true,
             menu: {
                 hidden: false,
             },
@@ -69,36 +66,65 @@ export function generateCmsCategory(
     };
 }
 
+export function enrichEcommerceContainer(node: CmsHierarchyNode, categoriesById: CategoryById, categories: Category[]) {
+    const { ecommerceConfiguration } = node.content;
+    const categoryIds: string[] = ecommerceConfiguration?.showAll
+        ? categories.map((category) => category.id)
+        : ecommerceConfiguration?.categoryIds || [];
+
+    return categoryIds.map((categoryId) => generateCmsCategory(categoriesById[categoryId]));
+}
+
+export function enrichCategory(node: CmsHierarchyNode, categoriesById: CategoryById) {
+    return {
+        ...node,
+        children: categoriesById[node.content.categoryId]?.children.map((child) => generateCmsCategory(child)),
+    };
+}
+
 export function enrichHierarchyNodes(
-    rootCmsNode: CmsHierarchyNode,
+    hierarchyNode: CmsHierarchyNode,
     categoriesById: CategoryById,
     categories: Category[],
 ): CmsHierarchyNode {
-    const enrichedRootNodeChildren = rootCmsNode.children.reduce((cmsNodes: CmsHierarchyNode[], childNode) => {
-        const childNodeType = getTypeFromSchema(childNode.content?._meta?.schema);
-        if (childNodeType === 'ecommerce-container') {
-            const categoryIds: string[] = childNode.content?.ecommerceConfiguration?.showAll
-                ? categories.map((category) => category.id)
-                : childNode.content?.ecommerceConfiguration?.categoryIds || [];
-            const enrichedChildNodes = categoryIds.map((categoryId) =>
-                enrichHierarchyNodes(
-                    generateCmsCategory(categoriesById[categoryId], {
-                        active: childNode.content?.active,
-                    }),
-                    categoriesById,
-                    categories,
-                ),
-            );
-            return [...cmsNodes, ...enrichedChildNodes];
-        }
-        if (childNodeType === 'category') {
-            childNode.children = categoriesById[childNode.content.categoryId]?.children.map((child) =>
-                generateCmsCategory(child),
-            );
-            return [...cmsNodes, childNode];
-        }
-        return [...cmsNodes, enrichHierarchyNodes(childNode, categoriesById, categories)];
-    }, []);
+    const overrideCategoryIds: string[] = [];
+
+    const enrichHierarchy = (node: CmsHierarchyNode): CmsHierarchyNode => {
+        const children = node.children
+            .filter((childNode) => childNode.content?.active)
+            .flatMap((childNode) => {
+                if (getTypeFromSchema(childNode.content?._meta?.schema) === 'ecommerce-container') {
+                    return enrichEcommerceContainer(childNode, categoriesById, categories);
+                }
+                if (getTypeFromSchema(childNode.content?._meta?.schema) === 'category') {
+                    overrideCategoryIds.push(childNode.content.categoryId);
+                    return enrichCategory(childNode, categoriesById);
+                }
+                return childNode;
+            })
+            .map((childNode) => enrichHierarchy(childNode));
+
+        return { ...node, children };
+    };
+
+    const filterOverridesFromHierarchy = (node: CmsHierarchyNode): CmsHierarchyNode => {
+        const children = node.children
+            .filter((childNode) => {
+                if (
+                    getTypeFromSchema(childNode.content?._meta?.schema) === 'ecommerce-category-generated' &&
+                    overrideCategoryIds.includes(childNode.content.categoryId)
+                ) {
+                    return false;
+                }
+                return true;
+            })
+            .map((childNode) => filterOverridesFromHierarchy(childNode));
+
+        return { ...node, children };
+    };
+
+    const enrichedHierarchy = enrichHierarchy(hierarchyNode);
+    const processedHierarchy = filterOverridesFromHierarchy(enrichedHierarchy);
 
-    return { content: rootCmsNode.content, children: enrichedRootNodeChildren };
+    return processedHierarchy;
 }
diff --git a/pages/category/[slug].tsx b/pages/category/[slug].tsx
index 7377670e..bcd52100 100644
--- a/pages/category/[slug].tsx
+++ b/pages/category/[slug].tsx
@@ -72,9 +72,8 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
     );
 
     let category;
-    if (data.content.page?.name) {
-        const cmsslug = data.content.page?.name;
-        category = findCategory(props.ecommerce.categories, (cat) => cat.id === cmsslug);
+    if (data.content.page?.categoryId) {
+        category = findCategory(props.ecommerce.categories, (cat) => cat.id === data.content.page?.categoryId);
     } else {
         category = findCategory(props.ecommerce.categories, (cat) => cat.slug === slug);
     }
@@ -118,7 +117,7 @@ function CategoryPage(props: InferGetServerSidePropsType<typeof getServerSidePro
                     <div>
                         <Breadcrumb />
                         <div style={{ marginBottom: '30px' }}>
-                            <Typography variant="h2">{category && category.name}</Typography>
+                            <Typography variant="h2">{category && category.categoryId}</Typography>
                         </div>
                     </div>
                 }