@designcrowd/library.brand-page 5.16.45 → 5.16.47-alias-1

package/lib/src/brand-page/components/page-footer/PageFooter.mixin.js

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import { getRenderText } from '../../utils';
+import { getRenderText } from '@brand-page/utils';
 import { FOOTER_DISPLAY } from '../../constants';
 export default defineComponent({
     props: {

package/lib/src/brand-page/components/page-header/PageHeader.mixin.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
-import type { BrandPageContext } from '../../models';
-import type { PageHeaderViewModel } from '../../view-models';
+import type { BrandPageContext } from '@brand-page/models';
+import type { PageHeaderViewModel } from '@brand-page/view-models';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     navId: {
         type: StringConstructor;

package/lib/src/brand-page/components/payment/Payment.mixin.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
-import type { BrandPageContext, CheckoutInformation, CreateCartResult, PaymentConfig, PaymentOption } from '../../models';
-import type { RequestPaymentViewModel, SupportMeViewModel } from '../../view-models';
+import type { BrandPageContext, CheckoutInformation, CreateCartResult, PaymentConfig, PaymentOption } from '@brand-page/models';
+import type { RequestPaymentViewModel, SupportMeViewModel } from '@brand-page/view-models';
 export declare const paymentState: {
     readonly CreatingCart: "creating-cart";
     readonly IncompleteConfig: "incomplete-config";

package/lib/src/brand-page/components/payment/Payment.mixin.js

@@ -1,8 +1,8 @@
 import { defineComponent } from 'vue';
 import brandPageClient from '../../clients/brand-page.client';
 import { DISPLAY_STYLE_COLLAPSED, DISPLAY_STYLE_PREVIEW, paymentProviders, } from '../../constants';
-import raygunUtil from '../../utils/raygun.util';
-import { paymentTr } from '../../../composables/useTranslate';
+import raygunUtil from '@brand-page/utils/raygun.util';
+import { paymentTr } from '@src/composables/useTranslate';
 const DEFAULT_PAYMENT_SUCCESS_MESSAGE = paymentTr(`defaultPaymentSuccessMessage`);
 const PAYMENT_CONFIG_ACTIVE = 'Active';
 export const paymentState = {

package/lib/src/brand-page/components/payment/RequestPaymentStripe.mixin.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { BrandPagePaymentConfig, ButtonStyles, CheckoutInformation, CreateCartResult, StripePaymentIntent } from '../../models';
+import type { BrandPagePaymentConfig, ButtonStyles, CheckoutInformation, CreateCartResult, StripePaymentIntent } from '@brand-page/models';
 declare global {
     interface Window {
         Stripe?: stripe.StripeStatic;

package/lib/src/brand-page/components/payment/RequestPaymentStripe.mixin.js

@@ -2,7 +2,7 @@ import { defineComponent } from 'vue';
 import validator from 'validator';
 import { debug, debugError } from '../../../utils/debug.util';
 import * as constants from '../../constants';
-import { requestPaymentStripeTr } from '../../../composables/useTranslate';
+import { requestPaymentStripeTr } from '@src/composables/useTranslate';
 import brandPageClient from '../../clients/brand-page.client';
 const INVALID_EMAIL_MESSAGE = () => requestPaymentStripeTr('invalidEmailMessage');
 const STRIPE_SCRIPT_URL = 'https://js.stripe.com/v3/';

package/lib/src/brand-page/components/payment/__fixtures__/request-payment.js

@@ -2,8 +2,8 @@ import { context as baseContext, logoTheme, } from '../../../__fixtures__/brand-
 import { faker } from '@faker-js/faker';
 import { DEFAULT_TEXT_ALIGN } from '../../../constants';
 import { applyLogoThemeToBrandPageStyles } from '../../../utils';
-import { BRAND_PAGE } from '../../../../brand-page-maker/components/brand-page-maker/__fixtures__';
-import { createInitialRequestPaymentContent } from '../../../../brand-page-maker/models';
+import { BRAND_PAGE } from '@brand-page-maker/components/brand-page-maker/__fixtures__';
+import { createInitialRequestPaymentContent } from '@brand-page-maker/models';
 import { BRAND_PAGE_PUBLISHABLE_KEY } from '../../../__fixtures__/stripe.fixture';
 export const context = {
     ...baseContext,

package/lib/src/brand-page/components/payment/__fixtures__/support-me.js

@@ -1,7 +1,7 @@
 import { context as baseContext, logoTheme, } from '../../../__fixtures__/brand-page-sample-data';
-import { createInitialSupportMeContent } from '../../../../brand-page-maker/models';
+import { createInitialSupportMeContent } from '@brand-page-maker/models';
 import { applyLogoThemeToBrandPageStyles } from '../../../utils';
-import { BRAND_PAGE } from '../../../../brand-page-maker/components/brand-page-maker/__fixtures__';
+import { BRAND_PAGE } from '@brand-page-maker/components/brand-page-maker/__fixtures__';
 import { faker } from '@faker-js/faker';
 import { DEFAULT_TEXT_ALIGN, SUPPORT_ME_CUSTOM_PRODUCT_NAME, SUPPORT_ME_PRODUCT_NAME, } from '../../../constants';
 import { BRAND_PAGE_PUBLISHABLE_KEY } from '../../../__fixtures__/stripe.fixture';

package/lib/src/brand-page/components/payment/request-payment/RequestPayment.mixin.js

@@ -2,7 +2,7 @@ import { defineComponent } from 'vue';
 import { PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, } from '../../../models';
 import { DEFAULT_CURRENCY_SYMBOL } from '../../../constants';
 import { addOpacityToHex } from '../../../utils/color.util';
-import { RGBAtoHex } from '../../../../utils/helpers';
+import { RGBAtoHex } from '@utils/helpers';
 const MAX_CUSTOM_REQUEST_CHARS = 500;
 export default defineComponent({
     props: {

package/lib/src/brand-page/components/payment/request-payment/RequestPayment.stories.js

@@ -1,7 +1,7 @@
 import RequestPayment from './RequestPayment.vue';
 import Payment from '../Payment.vue';
 import { viewModel, context } from '../__fixtures__/request-payment';
-import { setupStoryPinia } from '../../../../brand-page-maker/components/brand-page-maker/__fixtures__/store-fixture';
+import { setupStoryPinia } from '@brand-page-maker/components/brand-page-maker/__fixtures__/store-fixture';
 import { faker } from '@faker-js/faker';
 import DarkBackground from '../../../storybook-helpers/components/DarkBackground.vue';
 const meta = {

package/lib/src/brand-page/components/payment/support-me/SupportMe.mixin.js

@@ -2,7 +2,7 @@ import { defineComponent } from 'vue';
 import { SUPPORT_ME_CUSTOM_PRODUCT_NAME } from '../../../constants';
 import { isPaymentAmountValid } from '../../../utils';
 import { DEFAULT_CURRENCY_SYMBOL, DEFAULT_CURRENCY_CODE, } from '../../../constants';
-import { paymentTr } from '../../../../composables/useTranslate';
+import { paymentTr } from '@src/composables/useTranslate';
 const MAX_CUSTOM_MESSAGE_CHARS = 500;
 export default defineComponent({
     props: {

package/lib/src/brand-page/components/payment/support-me/SupportMe.stories.js

@@ -1,6 +1,6 @@
 import { context, viewModel } from '../__fixtures__/support-me';
 import SupportMe from './SupportMe.vue';
-import { setupStoryPinia } from '../../../../brand-page-maker/components/brand-page-maker/__fixtures__/store-fixture';
+import { setupStoryPinia } from '@brand-page-maker/components/brand-page-maker/__fixtures__/store-fixture';
 import DarkBackground from '../../../storybook-helpers/components/DarkBackground.vue';
 const meta = {
     title: 'BrandPage/Components/Payment/SupportMe',

package/lib/src/brand-page/components/profile/Profile.mixin.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
-import type { ProfileViewModel } from '../../view-models';
-import type { BrandPageContext } from '../../models';
+import type { ProfileViewModel } from '@brand-page/view-models';
+import type { BrandPageContext } from '@brand-page/models';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     viewModel: {
         type: PropType<ProfileViewModel>;

package/lib/src/brand-page/components/profile/Profile.mixin.js

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
-import { getRenderText, escapeContentText } from '../../utils';
-import { hasRTEContent } from '../../../brand-page-maker/utils/rich-text-editor.util';
+import { getRenderText, escapeContentText } from '@brand-page/utils';
+import { hasRTEContent } from '@brand-page-maker/utils/rich-text-editor.util';
 export default defineComponent({
     props: {
         viewModel: {

package/lib/src/brand-page/components/profile/Profile.stories.d.ts

@@ -1,5 +1,5 @@
-import type { ProfileViewModel } from '../../view-models';
-import { type BrandPageContext } from '../../models/brand-page-context.model';
+import type { ProfileViewModel } from '@brand-page/view-models';
+import { type BrandPageContext } from '@brand-page/models/brand-page-context.model';
 declare const _default: {
     title: string;
     component: import("vue").DefineComponent<{}, {}, any>;

package/lib/src/brand-page/components/profile/Profile.stories.js

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue';
 import Profile from './Profile.vue';
 import { DEFAULT_TEXT_ALIGN } from '../../constants';
-import { MEDIA_SIZES, } from '../../models/brand-page-context.model';
+import { MEDIA_SIZES, } from '@brand-page/models/brand-page-context.model';
 export default {
     title: 'Components/BrandPage/Profile',
     component: Profile,

package/lib/src/brand-page/components/shop/Cart.stories.js

@@ -1,9 +1,9 @@
 import CartModal from './CartModal.vue';
 import ProductDetailModal from './ProductDetailModal.vue';
 import PaymentModal from './PaymentModal.vue';
-import { setupStoryPinia } from '../../../brand-page-maker/components/brand-page-maker/__fixtures__/store-fixture';
-import { useCartStore } from '../../../shared/ecommerce-settings/store/cart-settings-store';
-import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/shop-settings-store';
+import { setupStoryPinia } from '@brand-page-maker/components/brand-page-maker/__fixtures__/store-fixture';
+import { useCartStore } from '@shared/ecommerce-settings/store/cart-settings-store';
+import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
 const InitialiseCartStores = () => {
     const shopStore = useShopConfigStore();
     shopStore.addProduct({

package/lib/src/brand-page/components/social-links/SocialLinks.stories.d.ts

@@ -1,4 +1,4 @@
-import type { SocialLinksViewModel } from '../../view-models';
+import type { SocialLinksViewModel } from '@brand-page/view-models';
 declare const _default: {
     title: string;
     component: import("vue").DefineComponent<{}, {}, any>;

package/lib/src/brand-page/components/testimonial-section/TestimonialSection.mixin.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="types/lodash-shims" />
 import type { PropType } from 'vue';
-import type { TestimonialSectionViewModel } from '../../view-models';
-import type { BrandPageContext } from '../../models';
+import type { TestimonialSectionViewModel } from '@brand-page/view-models';
+import type { BrandPageContext } from '@brand-page/models';
 import type { DebounceHandle } from 'lodash.debounce';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     viewModel: {

package/lib/src/brand-page/components/testimonial-section/TestimonialSection.mixin.js

@@ -1,8 +1,8 @@
 import { defineComponent } from 'vue';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
-import { getRenderText } from '../../utils';
+import { getRenderText } from '@brand-page/utils';
 import debounce from 'lodash.debounce';
-import { DEVICE_CSS_TRANSITION_DELAY } from '../../../brand-page-maker/constants';
+import { DEVICE_CSS_TRANSITION_DELAY } from '@brand-page-maker/constants';
 const DEBOUNCE_WAIT_MS = 100;
 export default defineComponent({
     mixins: [ComponentCommonMixin],

package/lib/src/brand-page/components/text/Text.stories.d.ts

@@ -1,4 +1,4 @@
-import type { TextViewModel } from '../../view-models';
+import type { TextViewModel } from '@brand-page/view-models';
 declare const _default: {
     title: string;
     component: import("vue").DefineComponent<{}, {}, any>;

package/lib/src/brand-page/components/video/Video.mixin.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { VideoViewModel } from '../../view-models';
+import type { VideoViewModel } from '@brand-page/view-models';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     viewModel: {
         type: PropType<VideoViewModel>;

package/lib/src/brand-page/constants/font.constants.js

@@ -1,4 +1,4 @@
-import { constantsTr, errorTr } from '../../composables/useTranslate';
+import { constantsTr, errorTr } from '@src/composables/useTranslate';
 export const DISPLAY_TEXT_TITLE = 'Titles';
 export const DISPLAY_TEXT_HEADINGS = 'Headings';
 export const DISPLAY_TEXT_BODY = 'Paragraphs';

package/lib/src/brand-page/constants/misc.constants.js

@@ -1,4 +1,4 @@
-import { errorTr } from '../../composables/useTranslate';
+import { errorTr } from '@src/composables/useTranslate';
 export const DEFAULT_CURRENCY_SYMBOL = '$';
 export const DEFAULT_CURRENCY_CODE = 'USD';
 export const DEFAULT_LOGO_TEXT_COLOR_RGB = 'rgb(0,0,0)';

package/lib/src/brand-page/constants/sections/footer-display.constants.d.ts

@@ -1,4 +1,4 @@
-import type { ButtonGroupOption } from '../../../brand-page-maker/models/button-group.model';
+import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
 export declare const FOOTER_DISPLAY: {
     /** @deprecated */
     ALIGN_CENTERED: string;

package/lib/src/brand-page/constants/sections/footer-display.constants.js

@@ -1,5 +1,5 @@
 import { ALIGN_CENTERED, ALIGN_JUSTIFIED } from '../misc.constants';
-import { tr, commonTr } from '../../../composables/useTranslate';
+import { tr, commonTr } from '@src/composables/useTranslate';
 export const FOOTER_DISPLAY = {
     /** @deprecated */
     ALIGN_CENTERED, // mapped to CENTERED

package/lib/src/brand-page/constants/sections/header-display.constants.d.ts

@@ -1,4 +1,4 @@
-import type { ButtonGroupOption } from '../../../brand-page-maker/models/button-group.model';
+import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
 export declare const HEADER_DISPLAY: {
     /** @deprecated */
     readonly ALIGN_CENTERED: "centered";

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/models/styles.model.js

@@ -1,5 +1,5 @@
 import { FONT_SIZE_HEADINGS, FONT_SIZE_TITLE, LINE_HEIGHT_HEADINGS, LINE_HEIGHT_TITLE, FONT_SIZE_BODY, LINE_HEIGHT_BODY, DISPLAY_TEXT_TITLE, DISPLAY_TEXT_HEADINGS, DISPLAY_TEXT_BODY, STYLE_THEME_KEYS, FONT_FAMILY_CONFIGS, DEFAULT_FONT_FAMILY_KEY, DISPlAY_TEXT_BUTTONS, } from '../constants';
-import { commonTr, styleSettingsTr } from '../../composables/useTranslate';
+import { commonTr, styleSettingsTr } from '@src/composables/useTranslate';
 export const TEXT_STYLE_TYPES = {
     titles: 'titles',
     headings: 'headings',

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

@@ -1,4 +1,4 @@
-import { isHexColor } from '../../utils/helpers';
+import { isHexColor } from '@src/utils/helpers';
 import { setRgbAlpha } from './color.util';
 import { ButtonSoftBoxShadowSize, ButtonBoxShadowSize, BoxShadowSpread, } from '../constants';
 /**

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

@@ -1,5 +1,5 @@
 import isHexColor from 'validator/lib/isHexColor';
-import { hexToRGBA, isColor } from '../../utils/helpers';
+import { hexToRGBA, isColor } from '@src/utils/helpers';
 import Color, {} from 'color';
 // function from https://stackoverflow.com/a/9733420/3695983
 export const luminance = (r, g, b) => {

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

@@ -11,7 +11,7 @@ export * from './context.util';
 export * from './color.util';
 export * from './personalisation.util';
 export * from './migration.util';
-export * from '../../utils/validator.util';
+export * from './validation.util';
 export * as logoUtil from './logo.util';
 export * as svgUtil from './svg.util';
 export * as svgShapeUtil from './svg-shape.util';

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

@@ -11,7 +11,7 @@ export * from './context.util';
 export * from './color.util';
 export * from './personalisation.util';
 export * from './migration.util';
-export * from '../../utils/validator.util';
+export * from './validation.util';
 export * as logoUtil from './logo.util';
 export * as svgUtil from './svg.util';
 export * as svgShapeUtil from './svg-shape.util';

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

@@ -1,5 +1,5 @@
 import type { BrandPageModel } from '../../';
-import { type MigrationData } from '../../utils';
+import { type MigrationData } from '@brand-page/utils';
 export declare const applyTextContentTextToTextItemsMigration: (brandPageModel: BrandPageModel) => void;
 export declare const migrateProfileContentToHaveTextStyles: (brandPageModel: BrandPageModel) => void;
 export declare const migrateMailingListContentToHaveTextStyles: (brandPageModel: BrandPageModel) => void;

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

@@ -1,8 +1,8 @@
 import { getLogoVariationIndexFromLogoImageUrl, getLogoDraftTokenFromLogoImageUrl, safeGetLogoImageFromLogoImageUrl, } from '../logo.util';
 import { DEFAULT_LETTER_SPACING, FOOTER_DISPLAY, NavigationDesktop, NavigationMobile, PageFooterDesktop, PageFooterMobile, PageHeaderDesktop, PageHeaderMobile, } from '../../';
 import { ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, ALIGN_CENTERED, ALIGN_LEFT_BIG_IMAGE, BIG_IMAGE, BRAND_PAGE_TYPES, DEFAULT_FONT_FAMILY_KEY, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, DEFAULT_TEXT_ALIGN, FONT_FAMILY_CONFIGS, HEADER_DISPLAY, NAVIGATION_DISPLAY, LINE_HEIGHT_BODY, LINE_HEIGHT_HEADINGS, LINE_HEIGHT_TITLE, PAYMENT_OPTION_DISPLAY_TYPES, } from '../../';
-import { isAboutContent, isBannerContent, isButtonContent, isContact, isImagesContent, isLogoContent, isMailingListContent, isPayment, isProfileContent, isShapesContent, isSocialLinks, isSupportMeContent, isTestimonialContent, isTextContent, } from '../../utils';
-import { createInitialLogoContent } from '../../../brand-page-maker/models';
+import { isAboutContent, isBannerContent, isButtonContent, isContact, isImagesContent, isLogoContent, isMailingListContent, isPayment, isProfileContent, isShapesContent, isSocialLinks, isSupportMeContent, isTestimonialContent, isTextContent, } from '@brand-page/utils';
+import { createInitialLogoContent } from '@brand-page-maker/models';
 export const applyTextContentTextToTextItemsMigration = (brandPageModel) => {
     const textContents = brandPageModel.pages.reduce((acc, cur) => {
         return [...acc, ...cur.contents.filter(isTextContent)];

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 '@brand-page/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/personalisation.util.js

@@ -1,5 +1,5 @@
-import { escapeContentText } from '../../brand-page/utils';
-import { DEFAULT_PERSONALISATION_MAPPING, PERSONALISATION_MAPPINGS, TEXT_MEDIA_CONTENT_TYPES, } from '../../brand-page-maker/constants/personalisation.constant';
+import { escapeContentText } from '@brand-page/utils';
+import { DEFAULT_PERSONALISATION_MAPPING, PERSONALISATION_MAPPINGS, TEXT_MEDIA_CONTENT_TYPES, } from '@brand-page-maker/constants/personalisation.constant';
 import { BRAND_PAGE_TYPES, ShapeAspectRatioCategory } from '../models';
 import { getColorReplacementsFromSvgString, getColorReplacementsFromSvgStringServer, } from './svg-color.util';
 const ASPECT_RATIO_LOWER_CUT_OFF = 0.5;

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/style.util.js

@@ -1,11 +1,11 @@
 import { VIEWPORTS, NavigationDesktop, NavigationMobile } from '../models';
 import { PageStyles, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, } from '../models';
 import { STYLE_THEME_KEYS } from '../constants';
-import { arrayToLinearGradient, linearGradientToArray, isColorLinearGradient, RGBAtoHex, } from '../../utils/helpers';
+import { arrayToLinearGradient, linearGradientToArray, isColorLinearGradient, RGBAtoHex, } from '@src/utils/helpers';
 import { addTransparentAlphaChannelToHex, calculateLuminanceRatio, getNewColorBasedOnTargetColorTheme, } from './color.util';
-import { isRgbColor } from '../../utils/helpers';
+import { isRgbColor } from '@src/utils/helpers';
 import chroma from 'chroma-js';
-import { hasRTEContent, RTE_ALLOWED_SECTION_TYPES, } from '../../brand-page-maker/utils';
+import { hasRTEContent, RTE_ALLOWED_SECTION_TYPES, } from '@brand-page-maker/utils';
 /**
  * Simple utility to convert any color format to hex for consistent comparison
  */

package/lib/src/brand-page/utils/svg-color.util.js

@@ -1,4 +1,4 @@
-import { RGBAtoHex } from '../../utils/helpers';
+import { RGBAtoHex } from '@src/utils/helpers';
 import * as uuid from 'uuid';
 import { getStyleDeclarations, getSvgConfig, handleAttributes, modifySvgMetadata, } from './svg-shape.util';
 import { parse, } from 'svg-parser';

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

@@ -1,5 +1,5 @@
-import { isEmail } from '../../utils/validator.util';
-import { errorTr } from '../../composables/useTranslate';
+import { isEmail } from '@src/utils/validator.util';
+import { errorTr } from '@src/composables/useTranslate';
 const MAX_EMAIL_LENGTH = 320;
 const MAX_PHONE_LENGTH = 50;
 const MAX_NAME_LENGTH = 250;

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

@@ -1,6 +1,6 @@
 import { isValidUrl } from '../../helpers/url.helper';
-import { getPlainTextFromRTE } from '../../brand-page-maker/utils/rich-text-editor.util';
-import { isEmail, isTel } from '../../utils/validator.util';
+import { getPlainTextFromRTE } from '@brand-page-maker/utils/rich-text-editor.util';
+import { isEmail, isTel } from '@src/utils/validator.util';
 // Constants
 const HTML_ENTITIES = {
     ' ': ' ',

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

@@ -3,16 +3,18 @@ import { assertUnreachable } from '../../helpers/ts.helper';
 import { ButtonStyles, SENSITIVE_CONTENT_TYPES, VIEWPORTS } from '../models';
 import { NavigationMobile, NavigationDesktop, BRAND_PAGE_TYPES, BUTTON_LINK_TYPE, NavigationMenuStyles, } from '../models';
 import { isHexTransparent, setRgbAlpha } from './color.util';
-import { isHexColor } from '../../utils/helpers';
+import { isHexColor } from '@src/utils/helpers';
 import { CONTENT_TEXT_STYLE_PROPERTY_KEYS, FALLBACK_DEFAULT_LINK_COLOR, FONT_SIZE_BODY, LINE_HEIGHT_BODY, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, ButtonSoftBoxShadowSize, ButtonBoxShadowSize, BoxShadowSpread, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH, FONT_FAMILY_CONFIGS, isGoogleType, LINE_HEIGHT_HEADINGS, FONT_SIZE_HEADINGS, DEFAULT_TEXT_ALIGN, IMAGE_RESOLUTION_PRESETS, BIG_IMAGE, ALIGN_LEFT_BIG_IMAGE, ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, } from '../constants';
 import uniq from 'lodash/uniq';
 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),