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

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -1,7 +1,7 @@
 import { type ContentPage, type PageSettingsFontSettingsOption } from '../../models';
 import type { ContentItem } from '../../../content-settings/models';
-import { type Content } from '../../../../brand-page';
-import { type PageSectionStyleOption } from '../../../../brand-page-maker/models/page-section-style.model';
+import { type Content } from '@brand-page';
+import { type PageSectionStyleOption } from '@brand-page-maker/models/page-section-style.model';
 import { type PageSettingsSection } from '../../store';
 export interface PageField {
     pageTitle: string;
@@ -11,6 +11,7 @@ export interface PageField {
 declare const _default: import("vue").DefineComponent<{}, {
     pageFields: import("vue").WritableComputedRef<{
         page: {
+            id: string;
             title: string;
             slug: string;
             contents: {
@@ -74,9 +75,9 @@ declare const _default: import("vue").DefineComponent<{}, {
     sections: import("vue").ComputedRef<{
         header: {
             desktop: {
-                displayStyle: import("../../../../brand-page").PageSectionDisplayStyle;
+                displayStyle: import("@brand-page").PageSectionDisplayStyle;
                 navigationStyles?: {
-                    displayType: import("../../../../brand-page").NavigationDisplayType;
+                    displayType: import("@brand-page").NavigationDisplayType;
                     renderAfterLogo: boolean;
                     defaultButtonStyle: {
                         aspectRatio?: string | undefined;
@@ -355,9 +356,9 @@ declare const _default: import("vue").DefineComponent<{}, {
                             wordBreak?: string | undefined;
                         };
                     };
-                    viewport: import("../../../../brand-page").ViewportsType;
+                    viewport: import("@brand-page").ViewportsType;
                 } | {
-                    displayType: import("../../../../brand-page").NavigationDisplayType;
+                    displayType: import("@brand-page").NavigationDisplayType;
                     renderAfterLogo: boolean;
                     defaultButtonStyle: {
                         aspectRatio?: string | undefined;
@@ -636,10 +637,10 @@ declare const _default: import("vue").DefineComponent<{}, {
                             wordBreak?: string | undefined;
                         };
                     };
-                    viewport: import("../../../../brand-page").ViewportsType;
+                    viewport: import("@brand-page").ViewportsType;
                 } | undefined;
                 navigation: {
-                    displayType: import("../../../../brand-page").NavigationDisplayType;
+                    displayType: import("@brand-page").NavigationDisplayType;
                     renderAfterLogo: boolean;
                     defaultButtonStyle: {
                         aspectRatio?: string | undefined;
@@ -918,9 +919,9 @@ declare const _default: import("vue").DefineComponent<{}, {
                             wordBreak?: string | undefined;
                         };
                     };
-                    viewport: import("../../../../brand-page").ViewportsType;
+                    viewport: import("@brand-page").ViewportsType;
                 } | {
-                    displayType: import("../../../../brand-page").NavigationDisplayType;
+                    displayType: import("@brand-page").NavigationDisplayType;
                     renderAfterLogo: boolean;
                     defaultButtonStyle: {
                         aspectRatio?: string | undefined;
@@ -1199,7 +1200,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                             wordBreak?: string | undefined;
                         };
                     };
-                    viewport: import("../../../../brand-page").ViewportsType;
+                    viewport: import("@brand-page").ViewportsType;
                 };
                 isLogoOptional: boolean;
                 isLogoVisible: boolean;
@@ -1354,12 +1355,12 @@ declare const _default: import("vue").DefineComponent<{}, {
                     width?: string | undefined;
                     wordBreak?: string | undefined;
                 };
-                viewport: import("../../../../brand-page").ViewportsType;
+                viewport: import("@brand-page").ViewportsType;
             };
             mobile: {
-                displayStyle: import("../../../../brand-page").PageSectionDisplayStyle;
+                displayStyle: import("@brand-page").PageSectionDisplayStyle;
                 navigationStyles?: {
-                    displayType: import("../../../../brand-page").NavigationDisplayType;
+                    displayType: import("@brand-page").NavigationDisplayType;
                     renderAfterLogo: boolean;
                     defaultButtonStyle: {
                         aspectRatio?: string | undefined;
@@ -1638,9 +1639,9 @@ declare const _default: import("vue").DefineComponent<{}, {
                             wordBreak?: string | undefined;
                         };
                     };
-                    viewport: import("../../../../brand-page").ViewportsType;
+                    viewport: import("@brand-page").ViewportsType;
                 } | {
-                    displayType: import("../../../../brand-page").NavigationDisplayType;
+                    displayType: import("@brand-page").NavigationDisplayType;
                     renderAfterLogo: boolean;
                     defaultButtonStyle: {
                         aspectRatio?: string | undefined;
@@ -1919,10 +1920,10 @@ declare const _default: import("vue").DefineComponent<{}, {
                             wordBreak?: string | undefined;
                         };
                     };
-                    viewport: import("../../../../brand-page").ViewportsType;
+                    viewport: import("@brand-page").ViewportsType;
                 } | undefined;
                 navigation: {
-                    displayType: import("../../../../brand-page").NavigationDisplayType;
+                    displayType: import("@brand-page").NavigationDisplayType;
                     renderAfterLogo: boolean;
                     defaultButtonStyle: {
                         aspectRatio?: string | undefined;
@@ -2201,9 +2202,9 @@ declare const _default: import("vue").DefineComponent<{}, {
                             wordBreak?: string | undefined;
                         };
                     };
-                    viewport: import("../../../../brand-page").ViewportsType;
+                    viewport: import("@brand-page").ViewportsType;
                 } | {
-                    displayType: import("../../../../brand-page").NavigationDisplayType;
+                    displayType: import("@brand-page").NavigationDisplayType;
                     renderAfterLogo: boolean;
                     defaultButtonStyle: {
                         aspectRatio?: string | undefined;
@@ -2482,7 +2483,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                             wordBreak?: string | undefined;
                         };
                     };
-                    viewport: import("../../../../brand-page").ViewportsType;
+                    viewport: import("@brand-page").ViewportsType;
                 };
                 isLogoOptional: boolean;
                 isLogoVisible: boolean;
@@ -2637,7 +2638,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                     width?: string | undefined;
                     wordBreak?: string | undefined;
                 };
-                viewport: import("../../../../brand-page").ViewportsType;
+                viewport: import("@brand-page").ViewportsType;
             };
         };
         footer: {
@@ -2860,7 +2861,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                     imageTitleOverride?: string | undefined;
                 }[];
                 textFontFamily?: "lato" | "roboto" | "notoSans" | "openSans" | "arvo" | "bebasNeue" | "ptSerif" | "oswald" | "inter" | "montserrat" | "raleway" | "anton" | "antonSc" | "quicksand" | "pacifico" | "bioRhyme" | "playfairDisplay" | "mulish" | "telex" | "pridi" | "hindMadurai" | "kanit" | "libreBaskerville" | "amiko" | "neuton" | "tenorSans" | "jacquesFrancois" | "varela" | "quattrocentoSans" | "workSans" | "titilliumWeb" | "amaticSc" | "poiretOne" | "shantellSans" | "dancingScript" | "tangerine" | "cinzel" | "jost" | "exo2" | "ebGaramond" | "ubuntu" | "cabin" | "josefinSans" | "lobsterTwo" | "sacramento" | "nunito" | "aboreto" | "aleo" | "abhayaLibre" | "caladea" | "rokkitt" | "rubik" | "frankRuhlLibre" | "spectral" | "abrilFatface" | "courgette" | "kiteOne" | "amarante" | "satisfy" | "lilitaOne" | "lobster" | "titanOne" | "cookie" | "bungee" | "poppins" | "staatliches" | "patuaOne" | "calistoga" | "suezOne" | "caprasimo" | "rubikMonoOne" | "silkscreen" | "alfaSlabOne" | "orelegaOne" | "audiowide" | "redRose" | "kalnia" | "imbue" | "climateCrisis" | "gluten" | "madimiOne" | "anta" | "trykker" | "moul" | "bevan" | "wendyOne" | "lexendDeca" | "vinaSans" | "chango" | "changaOne" | "protestGuerrilla" | "londrinaShadow" | "candal" | "borel" | "rockNRollOne" | "bungeeInline" | "rampartOne" | "manrope" | "yuseiMagic" | "patrickHandSC" | "farsan" | "handlee" | "lemonada" | "arsenal" | "bakbakOne" | "belleza" | "blackHanSans" | "bowlbyOne" | "brunoAceSC" | "castoroTitling" | "contrailOne" | "delaGothicOne" | "dotGothic16" | "fahkwang" | "francoisOne" | "gloock" | "graduate" | "jersey10" | "kavoon" | "kronaOne" | "notable" | "pavanam" | "phudu" | "poetsenOne" | "pollerOne" | "questrial" | "racingSansOne" | "rammettoOne" | "rubikGlitch" | "shrikhand" | "spicyRice" | "syncopate" | "urbanist" | "yesevaOne" | "zenDots" | undefined;
-                viewport: import("../../../../brand-page").ViewportsType;
+                viewport: import("@brand-page").ViewportsType;
                 logoImageHeight: string | undefined;
                 logoImageWidth: string | undefined;
             };
@@ -3083,7 +3084,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                     imageTitleOverride?: string | undefined;
                 }[];
                 textFontFamily?: "lato" | "roboto" | "notoSans" | "openSans" | "arvo" | "bebasNeue" | "ptSerif" | "oswald" | "inter" | "montserrat" | "raleway" | "anton" | "antonSc" | "quicksand" | "pacifico" | "bioRhyme" | "playfairDisplay" | "mulish" | "telex" | "pridi" | "hindMadurai" | "kanit" | "libreBaskerville" | "amiko" | "neuton" | "tenorSans" | "jacquesFrancois" | "varela" | "quattrocentoSans" | "workSans" | "titilliumWeb" | "amaticSc" | "poiretOne" | "shantellSans" | "dancingScript" | "tangerine" | "cinzel" | "jost" | "exo2" | "ebGaramond" | "ubuntu" | "cabin" | "josefinSans" | "lobsterTwo" | "sacramento" | "nunito" | "aboreto" | "aleo" | "abhayaLibre" | "caladea" | "rokkitt" | "rubik" | "frankRuhlLibre" | "spectral" | "abrilFatface" | "courgette" | "kiteOne" | "amarante" | "satisfy" | "lilitaOne" | "lobster" | "titanOne" | "cookie" | "bungee" | "poppins" | "staatliches" | "patuaOne" | "calistoga" | "suezOne" | "caprasimo" | "rubikMonoOne" | "silkscreen" | "alfaSlabOne" | "orelegaOne" | "audiowide" | "redRose" | "kalnia" | "imbue" | "climateCrisis" | "gluten" | "madimiOne" | "anta" | "trykker" | "moul" | "bevan" | "wendyOne" | "lexendDeca" | "vinaSans" | "chango" | "changaOne" | "protestGuerrilla" | "londrinaShadow" | "candal" | "borel" | "rockNRollOne" | "bungeeInline" | "rampartOne" | "manrope" | "yuseiMagic" | "patrickHandSC" | "farsan" | "handlee" | "lemonada" | "arsenal" | "bakbakOne" | "belleza" | "blackHanSans" | "bowlbyOne" | "brunoAceSC" | "castoroTitling" | "contrailOne" | "delaGothicOne" | "dotGothic16" | "fahkwang" | "francoisOne" | "gloock" | "graduate" | "jersey10" | "kavoon" | "kronaOne" | "notable" | "pavanam" | "phudu" | "poetsenOne" | "pollerOne" | "questrial" | "racingSansOne" | "rammettoOne" | "rubikGlitch" | "shrikhand" | "spicyRice" | "syncopate" | "urbanist" | "yesevaOne" | "zenDots" | undefined;
-                viewport: import("../../../../brand-page").ViewportsType;
+                viewport: import("@brand-page").ViewportsType;
                 logoImageHeight: string | undefined;
                 logoImageWidth: string | undefined;
             };
@@ -3119,7 +3120,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         };
     }>;
     navigationStylesDesktop: import("vue").ComputedRef<{
-        displayType: import("../../../../brand-page").NavigationDisplayType;
+        displayType: import("@brand-page").NavigationDisplayType;
         renderAfterLogo: boolean;
         defaultButtonStyle: {
             aspectRatio?: string | undefined;
@@ -3398,10 +3399,10 @@ declare const _default: import("vue").DefineComponent<{}, {
                 wordBreak?: string | undefined;
             };
         };
-        viewport: import("../../../../brand-page").ViewportsType;
+        viewport: import("@brand-page").ViewportsType;
     }>;
     navigationStylesMobile: import("vue").ComputedRef<{
-        displayType: import("../../../../brand-page").NavigationDisplayType;
+        displayType: import("@brand-page").NavigationDisplayType;
         renderAfterLogo: boolean;
         defaultButtonStyle: {
             aspectRatio?: string | undefined;
@@ -3680,7 +3681,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                 wordBreak?: string | undefined;
             };
         };
-        viewport: import("../../../../brand-page").ViewportsType;
+        viewport: import("@brand-page").ViewportsType;
     }>;
     logoTheme: import("vue").ComputedRef<{
         logoTextColor: {
@@ -3720,17 +3721,17 @@ declare const _default: import("vue").DefineComponent<{}, {
     isPrePurchase: import("vue").ComputedRef<boolean>;
     isDesignCom: import("vue").ComputedRef<boolean>;
     updatePages: (pageFields: PageField[]) => void;
-    brandPageMakerStore: import("pinia").Store<"brandPageMaker", import("../../../../brand-page-maker/stores").BrandPageMakerState, {
+    brandPageMakerStore: import("pinia").Store<"brandPageMaker", import("@brand-page-maker/stores").BrandPageMakerState, {
         contentErrorCount(): number;
         brandPageBaseUrl(): string;
         brandPageContentTypes(): string[];
-        brandPageData(): import("../../../../brand-page").BrandPageModel;
+        brandPageData(): import("@brand-page").BrandPageModel;
         brandPageToken(): string | undefined;
         brandPageDescription(): string;
         brandPageSlug(): string;
         brandPageTemplate(): any;
         brandPageTitle(): string;
-        brandPageViewModel(): import("../../../../brand-page").BrandPageViewModel;
+        brandPageViewModel(): import("@brand-page").BrandPageViewModel;
         gettyVideoIds(): string[];
         isInteractivePreviewEnabled(): boolean;
         isProduction(): boolean;
@@ -3782,14 +3783,14 @@ declare const _default: import("vue").DefineComponent<{}, {
             settings: import("../../../content-settings/models").FieldSettingsBase;
         }): void;
         enqueueNotificationMessage({ message, }: {
-            message: import("../../../../brand-page-maker/stores").NotificationMessage;
+            message: import("@brand-page-maker/stores").NotificationMessage;
         }): void;
         enqueueContentErrorMessage(): void;
         dequeueNotificationMessageQueue(): void;
         setCurrentNotificationMessage(payload: {
-            message: false | import("../../../../brand-page-maker/stores").NotificationMessage;
+            message: false | import("@brand-page-maker/stores").NotificationMessage;
         }): void;
-        setIsApplyingTemplate(payload: import("../../../../brand-page-maker/stores").IsApplyingTemplatePayload): void;
+        setIsApplyingTemplate(payload: import("@brand-page-maker/stores").IsApplyingTemplatePayload): void;
         setIsPageNavigating(isPageNavigating: boolean): void;
         setIsChangeTemplateConfirmModalVisible(payload: {
             isVisible: boolean;
@@ -3798,7 +3799,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             isInitialising: boolean;
         }): void;
         setIsBrandPageLoaded(isLoaded: boolean): void;
-        setIsModifiedAfterTemplateApplied({ isModified, }?: import("../../../../brand-page-maker/stores").SetIsModifiedPayload): void;
+        setIsModifiedAfterTemplateApplied({ isModified, }?: import("@brand-page-maker/stores").SetIsModifiedPayload): void;
         setSelectedTemplateId(payload: {
             templateId: string | false;
         }): void;
@@ -3816,29 +3817,29 @@ declare const _default: import("vue").DefineComponent<{}, {
         onChangeTemplateConfirmModalConfirm(): void;
         onContentChanged(): void;
         onStyleChanged(): void;
-        onTemplateSelected(payload: import("../../../../brand-page-maker/stores").OnTemplateSelectedPayload): void;
+        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): void;
         setSelectedTabName(payload: any): void;
         showNextNotificationMessage(): Promise<void>;
         updateContent<TContent extends Content, P extends {
             id: string;
             content: TContent;
         }>(payload: P): Promise<void>;
-        export(): import("../../../../brand-page").BrandPageModel;
+        export(): import("@brand-page").BrandPageModel;
         setBrandPageType({ brandPageType }: {
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("../../../../brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
-            pages: import("../../../../brand-page").PageModel[];
+            pages: import("@brand-page").PageModel[];
             sections: import("../../store").PageSettingsStateSections;
         }): void;
         initialiseAdminMaker(payload: {
             models: import("../../../../brand-page-maker/stores/admin-logo-settings").AdminPreviewLogoTemplateModel[];
         }): void;
-        setIsSaving(payload: import("../../../../brand-page-maker/stores").SetIsSavingPayload): Promise<void>;
+        setIsSaving(payload: import("@brand-page-maker/stores").SetIsSavingPayload): Promise<void>;
         showBrandPageSlugEditModal(): Promise<void>;
-        updateBrandPageSettings(payload: import("../../../../brand-page-maker/stores").UpdateBrandPageSettingsPayload): Promise<void>;
-        updateSensitiveContentSettings(payload: import("../../../../brand-page-maker/stores").UpdateSensitiveContentPayload): Promise<void>;
+        updateBrandPageSettings(payload: import("@brand-page-maker/stores").UpdateBrandPageSettingsPayload): Promise<void>;
+        updateSensitiveContentSettings(payload: import("@brand-page-maker/stores").UpdateSensitiveContentPayload): Promise<void>;
         updateAndSaveMeasurementID(payload: {
             measurementID: string | undefined;
         }): Promise<void>;
@@ -3848,7 +3849,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         validateContentItems(): Promise<void>;
         validateBrandPageData(): Promise<void>;
         setViewport(payload: {
-            viewport: import("../../../../brand-page").ViewportsType;
+            viewport: import("@brand-page").ViewportsType;
         }): void;
         showStripeOnboardingModal(): Promise<void>;
         selectInitialCategories(payload: import("../../../template-settings/models").InitialCategories): void;
@@ -3857,7 +3858,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         endpoints: () => import("../../../models").Endpoints;
     }, {
         setLogoTheme(payload: {
-            logoTheme: import("../../../../brand-page").LogoTheme;
+            logoTheme: import("@brand-page").LogoTheme;
         }): void;
         setIsDefaultTextColorRequired(payload: {
             isDefaultTextColorRequired: boolean;
@@ -3872,7 +3873,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             mode: "desktop" | "mobile";
         }): void;
         setUserPersonalisationData({ personalisationData, }: {
-            personalisationData: import("../../../../brand-page").UserPersonalisationContent[];
+            personalisationData: import("@brand-page").UserPersonalisationContent[];
         }): void;
         onBackgroundChanged(): void;
         onContentChanged(): void;
@@ -3885,13 +3886,13 @@ declare const _default: import("vue").DefineComponent<{}, {
         triggerLockedContentClickedEvent(payload: {
             type: string;
         }): Promise<void>;
-        onTemplateSelected(payload: import("../../../../brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
+        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
         showUpgradeModalAndSaveAsync(contextualUpgradeType?: string | number | symbol | undefined): Promise<void>;
         setIsPersonalisationEnabled({ isPersonalisationEnabled, }: {
             isPersonalisationEnabled: boolean;
         }): void;
     }>;
-    userStore: import("pinia").Store<"brandPageMakerUser", import("../../../../brand-page-maker/stores").UserState, {}, {
+    userStore: import("pinia").Store<"brandPageMakerUser", import("@brand-page-maker/stores").UserState, {}, {
         setUserState(payload: {
             emailAddress?: string | undefined;
             userToken?: string | undefined;
@@ -3936,16 +3937,16 @@ declare const _default: import("vue").DefineComponent<{}, {
             sectionName: "footer" | "header" | "pages";
             propName: "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "navigation" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "copyrightText" | "socialLinks" | "textFontFamily";
             index?: number | undefined;
-            value: string | number | boolean | BrandPageCssStyle | import("../../../../brand-page").LinksItem[] | Partial<import("../../../../brand-page").ImageItem> | null | undefined;
+            value: string | number | boolean | BrandPageCssStyle | import("@brand-page").LinksItem[] | Partial<import("@brand-page").ImageItem> | null | undefined;
             merge?: boolean | undefined;
-            viewport: import("../../../../brand-page").ViewportsType;
+            viewport: import("@brand-page").ViewportsType;
         }): void;
         setPageSettingsSectionLogoImage({ sectionName, logoImage, logoTemplateImage, logoImageBase64Url, viewport, keepLogoVariation, logoImageHeight, logoImageWidth, }: {
-            logoImage: import("../../../../brand-page").LogoImageModel;
-            logoTemplateImage?: import("../../../../brand-page").LogoTemplateImageModel | undefined;
+            logoImage: import("@brand-page").LogoImageModel;
+            logoTemplateImage?: import("@brand-page").LogoTemplateImageModel | undefined;
             logoImageBase64Url: string | undefined;
             sectionName: "footer" | "header" | "pages";
-            viewport: import("../../../../brand-page").ViewportsType;
+            viewport: import("@brand-page").ViewportsType;
             keepLogoVariation?: boolean | undefined;
             logoImageHeight?: string | undefined;
             logoImageWidth?: string | undefined;
@@ -3956,7 +3957,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             logoImageHeight: string | undefined;
             logoImageWidth: string | undefined;
         }): void;
-        updatePaymentConfigCurrency(updatedPaymentConfig: import("../../../../brand-page").BrandPagePaymentConfig, newCurrency: import("../../../../brand-page").BrandPagePaymentConfigCurrency): void;
+        updatePaymentConfigCurrency(updatedPaymentConfig: import("@brand-page").BrandPagePaymentConfig, newCurrency: import("@brand-page").BrandPagePaymentConfigCurrency): void;
         setPageTitle({ pageTitle, pageIndex, }: {
             pageTitle: string;
             pageIndex: number;
@@ -3966,7 +3967,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         addNewPage(payload: {
             title: string;
-        }): void;
+        }): ContentPage;
         setSelectedSectionName({ sectionName, }: {
             sectionName?: "footer" | "header" | "pages" | undefined;
         }): void;
@@ -3977,6 +3978,19 @@ declare const _default: import("vue").DefineComponent<{}, {
         collapseAllSections(): void;
         setPreviousSelectedDisplayStyle(viewport: string, displayStyle: string): void;
     }>;
+    pageNavigationStore: import("pinia").Store<"pageNavigation", import("../../../page-navigation/store/page-navigation-store").PageNavigationState, {
+        nav(): import("@brand-page").NavModel;
+    }, {
+        setNav({ nav }: {
+            nav: import("@brand-page").NavModel;
+        }): void;
+        addNavRoute(newRoute: import("@brand-page").NavRoute, parentRouteId?: string | undefined): void;
+        removeNavRoute(routeId: string): void;
+        onDisplayNameChange(routeId: string, newDisplayName: string): void;
+        updateRouteVisibility(routeId: string, isHidden: boolean): void;
+        reorderVisibleAndHiddenRoutes(): void;
+        updateOrder(routeIdToReorder: string, newIndex: number): void;
+    }>;
     contentSettingsStore: import("pinia").Store<"uiContentSettings", import("../../../content-settings/store").ContentSettingsState, {
         contentErrorCount(): number;
         getContent(state: {
@@ -4313,7 +4327,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             imageUrl: string;
             width?: number | undefined;
             height?: number | undefined;
-            colorReplacements?: import("../../../../brand-page").ColorReplacement[] | undefined;
+            colorReplacements?: import("@brand-page").ColorReplacement[] | undefined;
             aspectRatio?: number | null | undefined;
         }): void;
         _setSelectedItemMedia(selectedItemId: string | null, mediaPayload: import("../../../my-uploads/models").MediaBaseSelectedPayload): void;
@@ -4389,7 +4403,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             imageUrl: string;
             width?: number | undefined;
             height?: number | undefined;
-            colorReplacements?: import("../../../../brand-page").ColorReplacement[] | undefined;
+            colorReplacements?: import("@brand-page").ColorReplacement[] | undefined;
             aspectRatio?: number | null | undefined;
         }): void;
         setSelectedItemMedia(selectedItemId: string | null, mediaPayload: import("../../../my-uploads/models").MediaBaseSelectedPayload): void;
@@ -4427,46 +4441,46 @@ declare const _default: import("vue").DefineComponent<{}, {
         setNavigationOrder({ section, renderAfterLogo, viewport, }: {
             section: "footer" | "header";
             renderAfterLogo: boolean;
-            viewport: import("../../../../brand-page").ViewportsType;
+            viewport: import("@brand-page").ViewportsType;
         }): void;
         _setDefaultButtonStyle({ displayType, section, style, viewport, }: {
-            displayType: import("../../../../brand-page").NavigationDisplayType;
+            displayType: import("@brand-page").NavigationDisplayType;
             section: "footer" | "header";
             style: BrandPageCssStyle;
-            viewport: import("../../../../brand-page").ViewportsType;
+            viewport: import("@brand-page").ViewportsType;
         }): void;
         _setSelectedButtonStyle({ displayType, section, style, viewport, }: {
-            displayType: import("../../../../brand-page").NavigationDisplayType;
+            displayType: import("@brand-page").NavigationDisplayType;
             section: "footer" | "header";
             style: BrandPageCssStyle;
-            viewport: import("../../../../brand-page").ViewportsType;
+            viewport: import("@brand-page").ViewportsType;
         }): void;
         _setIconStyle({ displayType, section, style, viewport, }: {
-            displayType?: import("../../../../brand-page").NavigationDisplayType | undefined;
+            displayType?: import("@brand-page").NavigationDisplayType | undefined;
             section: "footer" | "header";
             style: BrandPageCssStyle;
-            viewport: import("../../../../brand-page").ViewportsType;
+            viewport: import("@brand-page").ViewportsType;
         }): void;
         _setButtonStyles({ section, defaultButtonStyle, selectedButtonStyle, iconStyle, viewport, }: {
             section: "footer" | "header";
-            defaultButtonStyle: import("../../../../brand-page").TextStyleDeclaration;
+            defaultButtonStyle: import("@brand-page").TextStyleDeclaration;
             selectedButtonStyle: BrandPageCssStyle;
             iconStyle: BrandPageCssStyle;
-            viewport: import("../../../../brand-page").ViewportsType;
+            viewport: import("@brand-page").ViewportsType;
         }): void;
         setDisplayType({ section, displayType, viewport, }: {
             section: "footer" | "header";
-            displayType: import("../../../../brand-page").NavigationDisplayType;
-            viewport: import("../../../../brand-page").ViewportsType;
+            displayType: import("@brand-page").NavigationDisplayType;
+            viewport: import("@brand-page").ViewportsType;
         }): void;
         setNavigationStyleOptionValue({ section, option, value, viewport, }: {
             section: "footer" | "header";
             option: "defaultBorderColor" | "selectedBorderColor" | "defaultTextStyle" | "defaultBackgroundColor" | "selectedTextColor" | "selectedBackgroundColor" | "iconColor" | "iconBackgroundColor";
             value: any;
-            viewport: import("../../../../brand-page").ViewportsType;
+            viewport: import("@brand-page").ViewportsType;
         }): void;
     }>;
-    brandPageContainerStore: import("pinia").Store<"brandPageContainer", import("../../../../brand-page-maker/stores").BrandPageContainerState, {
+    brandPageContainerStore: import("pinia").Store<"brandPageContainer", import("@brand-page-maker/stores").BrandPageContainerState, {
         brandPageContentTypes(): string[];
         isAdmin(): boolean;
         isPublished: (state: {
@@ -4530,7 +4544,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             isContextualUpgradeModalVisible: boolean;
             contextualUpgradeType: string | number | symbol | undefined;
             requestVerificationToken?: string | undefined;
-        } & import("pinia").PiniaCustomStateProperties<import("../../../../brand-page-maker/stores").BrandPageContainerState>) => boolean;
+        } & import("pinia").PiniaCustomStateProperties<import("@brand-page-maker/stores").BrandPageContainerState>) => boolean;
         isUserDraft: (state: {
             availableTaxes: any[];
             brandPageBaseUrl: string;
@@ -4592,7 +4606,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             isContextualUpgradeModalVisible: boolean;
             contextualUpgradeType: string | number | symbol | undefined;
             requestVerificationToken?: string | undefined;
-        } & import("pinia").PiniaCustomStateProperties<import("../../../../brand-page-maker/stores").BrandPageContainerState>) => boolean;
+        } & import("pinia").PiniaCustomStateProperties<import("@brand-page-maker/stores").BrandPageContainerState>) => boolean;
     }, {
         initialise(payload: import("../../../../brand-page-maker/stores/brandpage-container").InitialisePayload): void;
         setDesignTemplateToken(payload: any): void;
@@ -4693,7 +4707,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             isCustomDomainEnabled: any;
         }): Promise<void>;
     }>;
-    viewport: import("vue").ComputedRef<import("../../../../brand-page").ViewportsType>;
+    viewport: import("vue").ComputedRef<import("@brand-page").ViewportsType>;
     isDraggingPage: import("vue").Ref<boolean, boolean>;
     onDraggingStart: () => void;
     onDraggingEnd: (ev: any) => void;
@@ -4702,11 +4716,11 @@ declare const _default: import("vue").DefineComponent<{}, {
         sendGettyVideoReplaceEvent: () => void;
         sendGettyVideoRemoveEvent: () => void;
         sendExperimentStartedEvent: (abTestKey: string, abTestValue: string) => void;
-        setGlobalEventProps: (props: Omit<import("../../../../brand-page-maker/composables/useEventTracker").BpGlobalEventProps, "template_category">) => void;
-        setUpsellBridgeState: (props: import("../../../../brand-page-maker/composables/useEventTracker").BpUpsellEventProps) => void;
-        setDomainUpsellBridgeState: (props: import("../../../../brand-page-maker/composables/useEventTracker").BpUpsellEventProps) => void;
-        subscribe: (callbackFn: (event: import("../../../../brand-page-maker/composables/useEventTracker").BpEventTrackerEvent) => void) => void;
-        sendWebsiteEvent: (event: import("../../../../brand-page-maker/composables/useEventTracker").BpEventTrackerEvent) => void;
+        setGlobalEventProps: (props: Omit<import("@brand-page-maker/composables/useEventTracker").BpGlobalEventProps, "template_category">) => void;
+        setUpsellBridgeState: (props: import("@brand-page-maker/composables/useEventTracker").BpUpsellEventProps) => void;
+        setDomainUpsellBridgeState: (props: import("@brand-page-maker/composables/useEventTracker").BpUpsellEventProps) => void;
+        subscribe: (callbackFn: (event: import("@brand-page-maker/composables/useEventTracker").BpEventTrackerEvent) => void) => void;
+        sendWebsiteEvent: (event: import("@brand-page-maker/composables/useEventTracker").BpEventTrackerEvent) => void;
         sendWebsiteMakerOpenEvent: (location: string) => void;
         sendUpsellOpenEvent: (cta_location?: string | undefined) => void;
         sendDomainUpsellOpenEvent: () => void;

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.js

@@ -1,16 +1,17 @@
 import { defineComponent, computed, ref } from 'vue';
 import {} from '../../models';
 import { getPageTitleError } from '../../utils';
-import { ALIGN_CENTERED, ALIGN_JUSTIFIED, ALIGN_LEFT_ALIGNED, } from '../../../../brand-page';
-import { PAGE_SECTION_STYLE_OPTIONS, } from '../../../../brand-page-maker/models/page-section-style.model';
+import { ALIGN_CENTERED, ALIGN_JUSTIFIED, ALIGN_LEFT_ALIGNED, } from '@brand-page';
+import { PAGE_SECTION_STYLE_OPTIONS, } from '@brand-page-maker/models/page-section-style.model';
 import { useUiContentSettingsStore } from '../../../content-settings/store';
 import { PAGE_SETTINGS_SECTIONS, useUiPageSettingsStore, } from '../../store';
 import { useUiNavigationStyleSettingsStore } from '../../../navigation-style-settings/store';
-import { useBrandPageMakerStore, useBrandPageMakerUserStore, useUiStore, useBrandPageContainerStore, } from '../../../../brand-page-maker/stores';
+import { useBrandPageMakerStore, useBrandPageMakerUserStore, useUiStore, useBrandPageContainerStore, } from '@brand-page-maker/stores';
 import { SIDE_BAR_CONTENT_ID } from '../../../content-settings/constants';
-import { TRIGGER_TYPE, UPGRADE_CTA_LOCATIONS, useEventTracker, } from '../../../../brand-page-maker/composables/useEventTracker';
-import { pageSettingTr, styleSettingsTr, } from '../../../../composables/useTranslate';
+import { TRIGGER_TYPE, UPGRADE_CTA_LOCATIONS, useEventTracker, } from '@brand-page-maker/composables/useEventTracker';
+import { pageSettingTr, styleSettingsTr } from '@src/composables/useTranslate';
 import { WEBSITE_UPGRADE_CONTEXT_TYPES } from '@designcrowd/fe-shared-lib';
+import { usePageNavigationStore } from '../../../page-navigation/store/page-navigation-store';
 const PAGE_SETTINGS_PAGES = {
     page: 'page',
     logo: 'logo',
@@ -25,6 +26,7 @@ export default defineComponent({
         const navigationSettingsStore = useUiNavigationStyleSettingsStore();
         const brandPageContainerStore = useBrandPageContainerStore();
         const eventTracker = useEventTracker();
+        const pageNavigationStore = usePageNavigationStore();
         const updatePages = (pageFields) => {
             pageSettingsStore.setPages({ pages: pageFields.map((p) => p.page) });
         };
@@ -50,6 +52,12 @@ export default defineComponent({
         const onDraggingEnd = (ev) => {
             if (ev && ev.oldIndex !== ev.newIndex) {
                 eventTracker.sendWebsiteManageReorderPageEvent(pageSettingsStore.pages[ev.newIndex].title);
+                // After drag, the moved page is now at newIndex
+                const pageId = pageSettingsStore.pages[ev.newIndex].id;
+                const navRouteId = pageNavigationStore.routes.find((route) => route.pageId === pageId)?.id;
+                if (navRouteId) {
+                    pageNavigationStore.updateOrder(navRouteId, ev.newIndex);
+                }
             }
             isDraggingPage.value = false;
         };
@@ -76,6 +84,7 @@ export default defineComponent({
             uiStore,
             userStore,
             pageSettingsStore,
+            pageNavigationStore,
             contentSettingsStore,
             navigationSettingsStore,
             brandPageContainerStore,
@@ -172,6 +181,14 @@ export default defineComponent({
         },
         onChangePageVisibility(index) {
             const currentPageVisibility = Boolean(this.pageSettingsStore.pages[index]?.isHidden);
+            const pageId = this.pageSettingsStore.pages[index]?.id;
+            // TODO(jyao): Remove this later since we won't be using page id anymore!
+            if (pageId) {
+                const navRouteId = this.pageNavigationStore.routes.find((route) => route.pageId === pageId)?.id;
+                if (navRouteId) {
+                    this.pageNavigationStore.updateRouteVisibility(navRouteId, !currentPageVisibility);
+                }
+            }
             this.pageSettingsStore.setPageVisibility({
                 isHidden: !currentPageVisibility,
                 index: index,
@@ -184,6 +201,14 @@ export default defineComponent({
         },
         onConfirmDeletePage(pageIndex) {
             this.pageFields.splice(pageIndex, 1);
+            const pageId = this.pageSettingsStore.pages[pageIndex]?.id;
+            // TODO(jyao): Remove this later since we won't be using page id anymore!
+            if (pageId) {
+                const navRouteId = this.pageNavigationStore.routes.find((route) => route.pageId === pageId)?.id;
+                if (navRouteId) {
+                    this.pageNavigationStore.removeNavRoute(navRouteId);
+                }
+            }
             this.updatePages(this.pageFields);
             this.eventTracker.sendWebsiteManageRemovePageEvent(this.deleteModalPageTitle);
             this.isDeleteModalVisible = false;
@@ -206,10 +231,16 @@ export default defineComponent({
             this.pageSettingsStore.setSelectedSectionName({ sectionName });
         },
         onPageTitleInput(index, title) {
+            const page = this.pageSettingsStore.pages[index];
             this.pageSettingsStore.setPageTitle({
                 pageIndex: index,
                 pageTitle: title,
             });
+            if (page) {
+                // TODO(jyao): Remove this later since we won't be using page id anymore!
+                const routeId = this.pageNavigationStore.routes.find((route) => route.pageId === page.id)?.id;
+                this.pageNavigationStore.onDisplayNameChange(routeId, title);
+            }
         },
         onBackButtonClick() {
             this.contentSettingsStore.popMode();