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

package/lib/src/shared/page-navigation/store/page-navigation-store.js

@@ -0,0 +1,118 @@
+import { defineStore } from 'pinia';
+import { NavModel } from '@brand-page';
+import { getPageSlugFromPageTitle } from '@brand-page-maker/utils/slug.util';
+const findParentOrderByRouteId = (orders, routeId) => {
+    for (const order of orders) {
+        if (order.routeId === routeId) {
+            return order;
+        }
+        const found = findParentOrderByRouteId(order.subRoutes, routeId);
+        if (found) {
+            return found;
+        }
+    }
+    return undefined;
+};
+const removeOrderByRouteId = (orders, routeId) => {
+    return orders
+        .filter((order) => order.routeId !== routeId)
+        .map((order) => ({
+        ...order,
+        subRoutes: removeOrderByRouteId(order.subRoutes, routeId), // Recursively filter out the route
+    }));
+};
+export const usePageNavigationStore = defineStore('pageNavigation', {
+    state: () => ({
+        routes: [],
+        orders: [],
+    }),
+    getters: {
+        nav() {
+            return new NavModel({
+                routes: this.routes,
+                orders: this.orders,
+            });
+        },
+    },
+    actions: {
+        setNav({ nav }) {
+            this.routes = nav.routes;
+            this.orders = nav.orders;
+        },
+        addNavRoute(newRoute, parentRouteId) {
+            const newOrder = {
+                routeId: newRoute.id,
+                subRoutes: [],
+            };
+            if (parentRouteId) {
+                // Find where to insert the new route into order
+                const parentOrder = findParentOrderByRouteId(this.orders, parentRouteId);
+                if (parentOrder) {
+                    parentOrder.subRoutes.push(newOrder);
+                }
+                else {
+                    console.error(`Parent route with id ${parentRouteId} not found in nav orders.`);
+                }
+            }
+            else {
+                // Push to root of orders object as this is not a nested route
+                this.orders.push(newOrder);
+            }
+            this.routes.push(newRoute);
+            this.reorderVisibleAndHiddenRoutes();
+        },
+        removeNavRoute(routeId) {
+            this.routes = this.routes.filter((route) => route.id !== routeId);
+            this.orders = removeOrderByRouteId(this.orders, routeId);
+        },
+        onDisplayNameChange(routeId, newDisplayName) {
+            const route = this.routes.find((route) => route.id === routeId);
+            if (!route) {
+                console.warn(`No route found for routeId: ${routeId}`);
+                return;
+            }
+            route.displayName = newDisplayName;
+            const newSlug = getPageSlugFromPageTitle(newDisplayName, this.routes
+                .filter((route) => route.id !== routeId)
+                .map((route) => route.pageSlug));
+            route.pageSlug = newSlug;
+        },
+        updateRouteVisibility(routeId, isHidden) {
+            const route = this.routes.find((route) => route.id === routeId);
+            if (!route) {
+                console.warn(`No route found for routeId: ${routeId}`);
+                return;
+            }
+            route.isHidden = isHidden;
+            this.reorderVisibleAndHiddenRoutes();
+        },
+        // TODO(jyao): Below is a temporary fix for reordering visible/hidden routes to sync pages/orders.
+        // In future, hiding a page won't need reordering (Ticket for change - https://designcrowd.atlassian.net/browse/BP-4916)
+        reorderVisibleAndHiddenRoutes() {
+            const visibleOrders = this.orders.filter((order) => {
+                const route = this.routes.find((route) => route.id === order.routeId);
+                return !Boolean(route?.isHidden);
+            });
+            const hiddenOrders = this.orders.filter((order) => {
+                const route = this.routes.find((route) => route.id === order.routeId);
+                return Boolean(route?.isHidden);
+            });
+            this.orders = [...visibleOrders, ...hiddenOrders];
+        },
+        // TODO(jyao): Support nested reordering later
+        updateOrder(routeIdToReorder, newIndex) {
+            // Find the order to move
+            const orderIndex = this.orders.findIndex((order) => order.routeId === routeIdToReorder);
+            if (orderIndex === -1) {
+                console.log(`Route ${routeIdToReorder} not found at top level. Sub-page reordering not yet supported.`);
+                return;
+            }
+            const orders = [...this.orders];
+            const [orderToMove] = orders.splice(orderIndex, 1);
+            // Find the new index within the bounds of the array
+            const clampedIndex = Math.max(0, Math.min(newIndex, orders.length));
+            orders.splice(clampedIndex, 0, orderToMove);
+            this.orders = orders;
+        },
+    },
+});

package/lib/src/shared/page-settings/components/new-page-modal/NewPageModal.mixin.d.ts

@@ -1,3 +1,4 @@
+import type { NavRoute } from '@brand-page';
 declare const _default: import("vue").DefineComponent<{}, {
     isNewPageModalVisible: import("vue").ComputedRef<boolean>;
     pageSettingsStore: import("pinia").Store<"uiPageSettings", import("../../store").PageSettingsState, {
@@ -11,7 +12,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         setPageContents({ pageIndex, contents, }: {
             pageIndex: number;
-            contents: import("../../../content-settings/models").ContentItem<import("../../../../brand-page").Content>[];
+            contents: import("../../../content-settings/models").ContentItem<import("@brand-page").Content>[];
         }): void;
         setPages({ pages }: {
             pages: import("../../models").ContentPage[];
@@ -35,16 +36,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;
@@ -55,7 +56,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;
@@ -65,7 +66,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         addNewPage(payload: {
             title: string;
-        }): void;
+        }): import("../../models").ContentPage;
         setSelectedSectionName({ sectionName, }: {
             sectionName?: "footer" | "header" | "pages" | undefined;
         }): void;
@@ -76,6 +77,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: 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;
+    }>;
 }, {
     newPageTitle: string;
     isErrorVisible: boolean;

package/lib/src/shared/page-settings/components/new-page-modal/NewPageModal.mixin.js

@@ -1,13 +1,17 @@
 import { defineComponent, computed } from 'vue';
 import { getPageTitleError } from '../../utils';
 import { useUiPageSettingsStore } from '../../store';
-import { useEventTracker } from '../../../../brand-page-maker/composables/useEventTracker';
+import { useEventTracker } from '@brand-page-maker/composables/useEventTracker';
+import { usePageNavigationStore } from '../../../page-navigation/store/page-navigation-store';
+import { v4 as uuid } from 'uuid';
 export default defineComponent({
     setup() {
         const pageSettingsStore = useUiPageSettingsStore();
+        const pageNavigationStore = usePageNavigationStore();
         return {
             isNewPageModalVisible: computed(() => pageSettingsStore.isNewPageModalVisible),
             pageSettingsStore,
+            pageNavigationStore,
         };
     },
     data() {
@@ -40,7 +44,17 @@ export default defineComponent({
                 this.isErrorVisible = true;
                 return;
             }
-            this.pageSettingsStore.addNewPage({ title: this.newPageTitle });
+            const newPage = this.pageSettingsStore.addNewPage({
+                title: this.newPageTitle,
+            });
+            const newRoute = {
+                id: uuid(),
+                pageId: newPage.id,
+                pageSlug: newPage.slug,
+                isHidden: false,
+                displayName: newPage.title,
+            };
+            this.pageNavigationStore.addNavRoute(newRoute);
             const eventTracker = useEventTracker();
             eventTracker.sendWebsiteManageAddPageEvent(this.newPageTitle);
             await this.pageSettingsStore.setNewPageModalVisibilityAsync({