@designcrowd/library.brand-page 5.16.46 → 5.16.47-ast-fix-ai

package/lib/src/{CreatedOnBrandCrowd-de-de-uiIr5kLt.js → CreatedOnBrandCrowd-de-de-DQnxSq9A.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CBpRmget.js";
+import { _ as t } from "./lib-NoqvEZWV.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-ZxmDyB2L.js → CreatedOnBrandCrowd-en-us-43F2UnHe.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CBpRmget.js";
+import { _ as t } from "./lib-NoqvEZWV.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-Dy0prqYb.js → CreatedOnBrandCrowd-es-es-DW1Kbbym.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CBpRmget.js";
+import { _ as t } from "./lib-NoqvEZWV.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-ptYivmhP.js → CreatedOnBrandCrowd-fr-ca-DpRHXw-1.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CBpRmget.js";
+import { _ as t } from "./lib-NoqvEZWV.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-ptYivmhP.js → CreatedOnBrandCrowd-fr-fr-DpRHXw-1.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CBpRmget.js";
+import { _ as t } from "./lib-NoqvEZWV.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-CJ2KmyN9.js → CreatedOnBrandCrowd-pt-br-CfD26nfp.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CBpRmget.js";
+import { _ as t } from "./lib-NoqvEZWV.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-CJ2KmyN9.js → CreatedOnBrandCrowd-pt-pt-CfD26nfp.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CBpRmget.js";
+import { _ as t } from "./lib-NoqvEZWV.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-BOKzyd7W.js → CreatedOnDcom-de-de-eVxceN_d.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-CBpRmget.js";
+import { _ as e } from "./lib-NoqvEZWV.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-DUn1EGFC.js → CreatedOnDcom-en-us-CfFzixTM.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-CBpRmget.js";
+import { _ as e } from "./lib-NoqvEZWV.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-CWmC3YRV.js → CreatedOnDcom-es-es-CSWR2SlN.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-CBpRmget.js";
+import { _ as e } from "./lib-NoqvEZWV.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-_UTCwQgn.js → CreatedOnDcom-fr-ca-DUwe4G8i.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-CBpRmget.js";
+import { _ as e } from "./lib-NoqvEZWV.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-DYUvSYKz.js → CreatedOnDcom-fr-fr-qx_WdTOY.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-CBpRmget.js";
+import { _ as e } from "./lib-NoqvEZWV.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-o2kCzJWH.js → CreatedOnDcom-pt-br-Dplb7Q_I.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-CBpRmget.js";
+import { _ as M } from "./lib-NoqvEZWV.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-JLuH_BY3.js → CreatedOnDcom-pt-pt-DxR8BYYd.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-CBpRmget.js";
+import { _ as M } from "./lib-NoqvEZWV.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/brand-page/components/page/Page.stories.js

@@ -32,6 +32,9 @@ const viewModel = {
         isSavingEnabled: true,
         hideBranding: false,
     },
+    nav: {
+        navItems: [],
+    },
 };
 const defaultSampleArgs = {
     viewModel,

package/lib/src/brand-page/models/index.d.ts

@@ -434,9 +434,26 @@ export declare class PageModel {
     title: string;
     slug: string;
     contents: Content[];
+    id: string;
     isHidden?: boolean;
     constructor(options: Partial<Omit<PageModel, 'contents'>> & Partial<Pick<PageModel, 'contents'>>);
 }
+export interface NavRoute {
+    id: string;
+    pageId: string;
+    pageSlug: string;
+    isHidden: boolean;
+    displayName: string;
+}
+export interface NavOrder {
+    routeId: string;
+    subRoutes: NavOrder[];
+}
+export declare class NavModel {
+    orders: NavOrder[];
+    routes: NavRoute[];
+    constructor(options?: Partial<NavModel>);
+}
 type AbstractPageHeaderStylesType = Partial<AbstractPageHeaderStyles>;
 export declare abstract class AbstractPageHeaderStyles {
     displayStyle: HeaderDisplayStyle;
@@ -538,6 +555,7 @@ export declare class BrandPageModel {
     pageFooterMobile: PageFooterMobile;
     pageFooterDesktop: PageFooterDesktop;
     pages: PageModel[];
+    nav: NavModel;
     isModifiedAfterTemplateApplied?: boolean;
     brandPageType?: BrandPageType;
     faviconUrl?: string;

package/lib/src/brand-page/models/index.js

@@ -168,12 +168,22 @@ export class PageModel {
     title;
     slug;
     contents;
+    id;
     isHidden;
     constructor(options) {
         this.title = options.title ?? '';
         this.slug = options.slug ?? '';
         this.contents = options.contents || [];
         this.isHidden = options.isHidden ?? false;
+        this.id = options.id || '';
+    }
+}
+export class NavModel {
+    orders;
+    routes;
+    constructor(options = {}) {
+        this.orders = options.orders || [];
+        this.routes = options.routes || [];
     }
 }
 export class AbstractPageHeaderStyles {
@@ -403,6 +413,7 @@ export class BrandPageModel {
     // @ts-expect-error should be initialised in constructor
     pageFooterDesktop;
     pages;
+    nav;
     isModifiedAfterTemplateApplied;
     brandPageType;
     faviconUrl;
@@ -476,5 +487,6 @@ export class BrandPageModel {
         this.cookieOptions = options.cookieOptions;
         this.saveContactSettings = options.saveContactSettings;
         this.paymentConfig = options.paymentConfig;
+        this.nav = new NavModel(options.nav);
     }
 }

package/lib/src/brand-page/utils/migration/migration-12.d.ts

@@ -0,0 +1,2 @@
+import type { MigrationData } from '../migration.util';
+export declare const migration12: (migrationResult: MigrationData) => Promise<MigrationData>;

package/lib/src/brand-page/utils/migration/migration-12.js

@@ -0,0 +1,30 @@
+import { v4 as uuid } from 'uuid';
+import { NavModel } from '../../models';
+export const migration12 = async (migrationResult) => {
+    const { brandPageModel } = migrationResult;
+    const pages = brandPageModel.pages;
+    // Add uuid to each page as id
+    pages.forEach((page) => {
+        if (!page.id) {
+            page.id = uuid();
+        }
+    });
+    const routes = [];
+    const orders = [];
+    pages.forEach((page) => {
+        const routeId = uuid();
+        routes.push({
+            id: routeId,
+            pageId: page.id,
+            pageSlug: page.slug,
+            isHidden: page.isHidden ?? false,
+            displayName: page.title,
+        });
+        orders.push({
+            routeId,
+            subRoutes: [],
+        });
+    });
+    brandPageModel.nav = new NavModel({ routes, orders });
+    return migrationResult;
+};

package/lib/src/brand-page/utils/migration.util.js

@@ -13,6 +13,7 @@ import { migration08 } from './migration/migration-08';
 import { migration09 } from './migration/migration-09';
 import { migration10 } from './migration/migration-10';
 import { migration11 } from './migration/migration-11';
+import { migration12 } from './migration/migration-12';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -85,6 +86,11 @@ const MIGRATION_TABLE = [
         migrateFn: migration11,
         description: 'Remove backgroundColorEnabled flag from page headers',
     },
+    {
+        version: 12,
+        migrateFn: migration12,
+        description: 'Migrating nav model to support sub nav feature',
+    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
 export const migrateBrandPageModel = async (brandPageModel, options) => {

package/lib/src/brand-page/utils/route.util.d.ts

@@ -5,4 +5,4 @@ export declare const getRouteParamsByPage: (isCustomDomain: boolean, brandPageSl
     slug: string;
     pageSlug: string;
 };
-export declare const getRouteNameByPageIndex: (isCustomDomain: boolean, pageIndex: number) => string;
+export declare const getRouteNameByPageIndex: (isCustomDomain: boolean, pageIndex?: number) => string;

package/lib/src/brand-page/utils/view-model.util.d.ts

@@ -1,5 +1,5 @@
-import type { ImageContent, ProfileContent, TextContent, PageStyles, Content, BrandPageModel, ImageGalleryContent, GalleryStyles, BannerSectionContent, ImagesSectionContent, BrandPageType, PageHeaderDesktop, PageFooterDesktop, PageFooterMobile, PageHeaderMobile, LogoImageModel, LogoTemplateImageModel, BookingSectionContent } from '../models';
-import type { ImageViewModel, LogoViewModel, ProfileViewModel, TextViewModel, ContentViewModel, BrandPageViewModel, ImageGalleryViewModel, PageViewModel, BannerSectionViewModel, PageHeaderViewModel, PageFooterViewModel, TextImageSectionViewModel, BookingSectionViewModel, PageStylesViewModel } from '../view-models';
+import type { ImageContent, ProfileContent, TextContent, PageStyles, Content, BrandPageModel, ImageGalleryContent, GalleryStyles, BannerSectionContent, ImagesSectionContent, BrandPageType, PageHeaderDesktop, PageFooterDesktop, PageFooterMobile, PageHeaderMobile, LogoImageModel, LogoTemplateImageModel, BookingSectionContent, NavModel } from '../models';
+import type { ImageViewModel, LogoViewModel, ProfileViewModel, TextViewModel, ContentViewModel, BrandPageViewModel, ImageGalleryViewModel, PageViewModel, BannerSectionViewModel, PageHeaderViewModel, PageFooterViewModel, TextImageSectionViewModel, BookingSectionViewModel, PageStylesViewModel, NavViewModel } from '../view-models';
 export declare const applyViewModelTextStyles: <T extends ContentViewModel>(content: T, styles: PageStyles) => T;
 export declare const mapToImageViewModel: (content: ImageContent) => ImageViewModel;
 export declare const mapToImageGalleryViewModel: (content: ImageGalleryContent, globalStyles: GalleryStyles) => ImageGalleryViewModel;
@@ -8,12 +8,15 @@ export declare const mapToTextViewModel: (content: TextContent, styles: PageStyl
 export declare const mapToBannerSectionViewModel: (content: BannerSectionContent, styles: PageStyles, options: ViewModelMappingOptions) => BannerSectionViewModel;
 export declare const mapToImagesSectionViewModel: (content: ImagesSectionContent, styles: PageStyles, brandPageType: BrandPageType) => TextImageSectionViewModel;
 export declare const mapToBookingSectionViewModel: (content: BookingSectionContent, styles: PageStyles) => BookingSectionViewModel;
+export declare const mapToNavViewModel: (nav: NavModel, brandPageSlug?: string, isCustomDomain?: boolean) => NavViewModel;
 export declare const mapToPageStyleViewModel: (pageStyles: PageStyles, options: ViewModelMappingOptions) => PageStylesViewModel;
 export declare const mapToPageHeaderViewModel: (pageHeader: PageHeaderDesktop | PageHeaderMobile, pageStyles: PageStyles, pages: PageViewModel[], useOldLogoRenderSize?: boolean) => PageHeaderViewModel;
 export declare const mapToPageFooterViewModel: (pageFooter: PageFooterDesktop | PageFooterMobile, pageStyles: PageStyles, useOldLogoRenderSize?: boolean) => PageFooterViewModel;
 export declare const mapToViewModel: (styles: PageStyles, brandPageType: BrandPageType, options: ViewModelMappingOptions) => (content: Content) => ContentViewModel | undefined;
 interface ViewModelMappingOptions {
     useOldLogoRenderSize?: boolean;
+    isCustomDomain?: boolean;
+    brandPageSlug?: string;
     getVideoUrls?: (token: string) => {
         videoUrl: string;
         previewImageUrl: string;

package/lib/src/brand-page/utils/view-model.util.js

@@ -10,9 +10,11 @@ import { generateGoogleFontUrl } from './font-loader.util';
 import { isValidSvgUrl } from './image.util';
 import { isLogoContent } from './model.util';
 import { getBoxShadowValue } from './button.util';
+import { getRouteNameByPageIndex, getRouteParamsByPage } from './route.util';
 const BUTTON_BORDER_RADIUS = '9999px';
 const CONTENT_BORDER_RADIUS = '48px';
 const PROFILE_PADDING_TOP = '1rem';
+const MAX_SUB_NAV_DEPTH = 1;
 const applyContentBorderRadius = (styles) => {
     return {
         ...styles,
@@ -604,6 +606,27 @@ export const mapToBookingSectionViewModel = (content, styles) => {
         isFullWidth: true,
     }, styles);
 };
+// Recursively build the nav item view model for each page/sub page in the nav
+const buildNavItemViewModel = (order, routes, parentPath, isFirstPage, brandPageSlug, isCustomDomain, depth = 0) => {
+    const route = routes.find((r) => r.id === order.routeId);
+    const pageSlug = route?.pageSlug ?? '';
+    const relativePath = parentPath ? `${parentPath}/${pageSlug}` : pageSlug;
+    return {
+        displayName: route?.displayName ?? '',
+        routeName: getRouteNameByPageIndex(Boolean(isCustomDomain), isFirstPage ? 0 : 9999),
+        routeParams: getRouteParamsByPage(Boolean(isCustomDomain), brandPageSlug ?? '', pageSlug),
+        relativePath,
+        isHidden: route?.isHidden ?? false,
+        nestedNavItems: depth >= MAX_SUB_NAV_DEPTH
+            ? []
+            : order.subRoutes.map((subRoute) => buildNavItemViewModel(subRoute, routes, relativePath, false, brandPageSlug, isCustomDomain, depth + 1)),
+    };
+};
+export const mapToNavViewModel = (nav, brandPageSlug, isCustomDomain) => {
+    return {
+        navItems: nav.orders.map((order, idx) => buildNavItemViewModel(order, nav.routes, '', idx === 0, brandPageSlug, isCustomDomain)),
+    };
+};
 export const mapToPageStyleViewModel = (pageStyles, options) => {
     return {
         backgroundStylesViewModel: mapBackgroundStylesToViewModel(pageStyles.backgroundStyles, options),
@@ -781,14 +804,17 @@ export const getBrandPageViewModelFromBrandPageModel = (model, brandPageToken, s
         return {
             title: p.title,
             slug: p.slug,
+            id: p.id,
             contents,
             isHidden: Boolean(p?.isHidden),
         };
     });
+    const nav = mapToNavViewModel(model.nav, options.brandPageSlug, options.isCustomDomain);
     return {
         brandPageToken,
         pages,
         showBrandCrowdLogo,
+        nav,
         styles: mapToPageStyleViewModel(model.styles, options),
         headerViewModelDesktop: mapToPageHeaderViewModel(model.pageHeaderDesktop, model.styles, pages, options.useOldLogoRenderSize),
         headerViewModelMobile: mapToPageHeaderViewModel(model.pageHeaderMobile, model.styles, pages, options.useOldLogoRenderSize),

package/lib/src/brand-page/view-models.d.ts

@@ -7,6 +7,7 @@ export interface ContentViewModel {
     role: ContentType;
 }
 export interface PageViewModel {
+    id: string;
     title: string;
     slug: string;
     contents: ContentViewModel[];
@@ -149,11 +150,38 @@ export interface PageStylesViewModel {
     textStyles: TextStyles;
     galleryStyles: GalleryStyles;
 }
+export interface NavRouteViewModel {
+    id: string;
+    pageId: string;
+    route: string;
+}
+export interface NavOrderViewModel {
+    routeId: string;
+    isHidden: boolean;
+    fullPath: string;
+    subRoutes: NavOrderViewModel[];
+}
+export interface NavItemRouteParams {
+    slug: string;
+    pageSlug?: string;
+}
+export interface NavItemViewModel {
+    displayName: string;
+    routeName: string;
+    routeParams: NavItemRouteParams;
+    isHidden: boolean;
+    relativePath: string;
+    nestedNavItems: NavItemViewModel[];
+}
+export interface NavViewModel {
+    navItems: NavItemViewModel[];
+}
 export interface BrandPageViewModel {
     brandPageToken?: string;
     showBrandCrowdLogo: boolean;
     styles: PageStylesViewModel;
     pages: PageViewModel[];
+    nav: NavViewModel;
     brandPageType: BrandPageType;
     headerViewModelDesktop: PageHeaderViewModel;
     headerViewModelMobile: PageHeaderViewModel;

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.d.ts

@@ -980,7 +980,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }): void;
         addNewPage(payload: {
             title: string;
-        }): void;
+        }): import("../../../shared/page-settings/models").ContentPage;
         setSelectedSectionName({ sectionName, }: {
             sectionName?: "footer" | "header" | "pages" | undefined;
         }): void;

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts

@@ -992,7 +992,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         addNewPage(payload: {
             title: string;
-        }): void;
+        }): import("../../../shared/page-settings/models").ContentPage;
         setSelectedSectionName({ sectionName, }: {
             sectionName?: "footer" | "header" | "pages" | undefined;
         }): void;

package/lib/src/brand-page-maker/components/preview/Preview.stories.js

@@ -12,6 +12,7 @@ const pageStyles = new PageStyles();
 const pages = [
     {
         title: '',
+        id: '',
         slug: '',
         isHidden: false,
         contents: brandPageData
@@ -36,6 +37,9 @@ const viewModel = {
         isSavingEnabled: true,
         hideBranding: false,
     },
+    nav: {
+        navItems: [],
+    },
 };
 export const SampleDesktop = () => {
     const pinia = setupStoryPinia();

package/lib/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.js

@@ -1,5 +1,5 @@
 import { EMPTY_LOGO_IMAGE_MODEL, SENSITIVE_CONTENT_TYPES, VIEWPORTS, } from '../../../brand-page';
-import { BackgroundStyles, BRAND_PAGE_TYPES, BrandPageModel, CONTENT_TYPES, NavigationDesktop, NavigationMobile, } from '../../../brand-page';
+import { BackgroundStyles, BRAND_PAGE_TYPES, BrandPageModel, CONTENT_TYPES, NavigationDesktop, NavigationMobile, NavModel, } from '../../../brand-page';
 import { useBrandPageMakerUserStore } from '../user';
 import { defineStore } from 'pinia';
 import { useUiStore } from '../ui';
@@ -8,6 +8,7 @@ import { useUiStyleSettingsStore } from '../../../shared/style-settings/store';
 import { useUiNavigationStyleSettingsStore } from '../../../shared/navigation-style-settings/store';
 import { useUiBackgroundSettingsStore } from '../../../shared/background-settings/store';
 import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/shop-settings-store';
+import { usePageNavigationStore } from '../../../shared/page-navigation/store/page-navigation-store';
 import { applyLogoThemeToBrandPageModel, migrateBrandPageModel, applyUserPersonalisationToBrandPageModelAsync, getBrandPageViewModelFromBrandPageModel, isLogoContent, parseLogoThemeToCssStyles, logoUtil, GetLatestModelVersion, } from '../../../brand-page/utils';
 import { navigateToPageBySlug } from '../../routing';
 import { BRANDPAGE_DEFAULT_ERROR_MESSAGE_DESCRIPTION, BRANDPAGE_DEFAULT_SAVE_MESSAGE_DESCRIPTION, MAKER_MOBILE_BREAKPOINT, MESSAGE_VISIBLE_DURATION, } from '../../constants';
@@ -291,6 +292,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             brandPageModel.pageFooterDesktop = model.pageFooterDesktop;
             brandPageModel.pageFooterMobile = model.pageFooterMobile;
             brandPageModel.pages = model.pages;
+            const pageNavigationStore = usePageNavigationStore();
+            pageNavigationStore.setNav({ nav: brandPageModel.nav });
             navigationStyleSettingsStore.initialise({ reset: true });
             styleSettingsStore.initialise({
                 reset: true,
@@ -646,6 +649,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                 this.setCookiePreviewEnabled({
                     isCookiePreviewEnabled: brandPageModel.cookieOptions?.isCookiePreviewEnabled,
                 });
+                const pageNavigationStore = usePageNavigationStore();
+                pageNavigationStore.setNav({ nav: brandPageModel.nav });
                 this.setSavingEnabled({
                     isSavingEnabled: brandPageModel.saveContactSettings?.isSavingEnabled ?? true,
                 });
@@ -814,6 +819,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             const styleSettingsStore = useUiStyleSettingsStore();
             const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
             const shopStore = useShopConfigStore();
+            const pageNavigationStore = usePageNavigationStore();
             const pages = pageSettingsStore.pages.map((p) => ({
                 ...p,
                 contents: p.contents
@@ -825,7 +831,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             const buttonStyles = styleSettingsStore.buttonStyles;
             const textStyles = styleSettingsStore.textStyles;
             const galleryStyles = styleSettingsStore.galleryStyles;
-            const navigation = navigationStyleSettingsStore.navigation;
+            const navigation = navigationStyleSettingsStore.navigation; // This is not referring to the sub nav structure
+            const pageNavStructure = pageNavigationStore.nav;
             return {
                 v: GetLatestModelVersion(),
                 pages,
@@ -851,6 +858,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                 cookieOptions: this.cookieOptions,
                 saveContactSettings: this.saveContactSettings,
                 paymentConfig: shopStore.paymentConfig,
+                nav: pageNavStructure,
             };
         },
         brandPageToken() {
@@ -926,6 +934,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             const userStore = useBrandPageMakerUserStore();
             const uiStore = useUiStore();
             const videoStore = useVideoStore();
+            const brandPageContainerStore = useBrandPageContainerStore();
             if (userStore.isAdmin && uiStore.logoTheme) {
                 const themedBrandPage = applyLogoThemeToBrandPageModel(uiStore.logoTheme, this.brandPageData).model;
                 return getBrandPageViewModelFromBrandPageModel(themedBrandPage, this.brandPageToken, undefined, {
@@ -933,6 +942,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                     getVideoUrls: videoStore.getVideoUrlsForToken,
                     getS3VideoUrls: videoStore.getOptimisedS3VideoUrlsForToken,
                     setVideoUrlsWithToken: videoStore.setVideoUrlsWithToken,
+                    isCustomDomain: brandPageContainerStore.isCustomDomainEnabled,
+                    brandPageSlug: brandPageContainerStore.brandPageSlug,
                 });
             }
             const showBrandCrowdLogo = userStore.features.showBrandCrowdLogo;
@@ -946,6 +957,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                     getVideoUrls: videoStore.getVideoUrlsForToken,
                     getS3VideoUrls: videoStore.getOptimisedS3VideoUrlsForToken,
                     setVideoUrlsWithToken: videoStore.setVideoUrlsWithToken,
+                    isCustomDomain: brandPageContainerStore.isCustomDomainEnabled,
+                    brandPageSlug: brandPageContainerStore.brandPageSlug,
                 });
             }
             return getBrandPageViewModelFromBrandPageModel(this.brandPageData, this.brandPageToken, showBrandCrowdLogo, {
@@ -953,6 +966,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                 getVideoUrls: videoStore.getVideoUrlsForToken,
                 getS3VideoUrls: videoStore.getOptimisedS3VideoUrlsForToken,
                 setVideoUrlsWithToken: videoStore.setVideoUrlsWithToken,
+                isCustomDomain: brandPageContainerStore.isCustomDomainEnabled,
+                brandPageSlug: brandPageContainerStore.brandPageSlug,
             });
         },
         gettyVideoIds() {