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

package/src/shared/navigation-style-settings/store/index.ts

@@ -1,30 +1,26 @@
-import {
-  NavigationDesktop,
-  NavigationMobile,
-  VIEWPORTS,
-} from '../../../brand-page';
+import { NavigationDesktop, NavigationMobile, VIEWPORTS } from '@brand-page';
 import type {
   ViewportsType,
   NavigationDisplayType,
   TextStyleDeclaration,
-} from '../../../brand-page';
-import { NAVIGATION_DISPLAY, DEFAULT_TEXT_ALIGN } from '../../../brand-page';
-import { getThemeByTextStyleAndLogoTheme } from '../../../brand-page/utils/color.util';
+} from '@brand-page';
+import { NAVIGATION_DISPLAY, DEFAULT_TEXT_ALIGN } from '@brand-page';
+import { getThemeByTextStyleAndLogoTheme } from '@brand-page/utils/color.util';
 import type {
   NavigationStyleConfig,
   NavigationStyleConfigOption,
-} from '../../../brand-page-maker/models/navigation-style-configs';
+} from '@brand-page-maker/models/navigation-style-configs';
 import {
   availableNavigationStyleConfigs,
   navigationStyleTypeConfigs,
-} from '../../../brand-page-maker/models/navigation-style-configs';
+} from '@brand-page-maker/models/navigation-style-configs';
 import { assertUnreachable } from '../../../helpers/ts.helper';
 import { defineStore } from 'pinia';
 import type {
   ContentSettingsItemGroupState,
   ContentSettingsItemState,
 } from '../../content-settings/models';
-import { useUiStore } from '../../../brand-page-maker/stores';
+import { useUiStore } from '@brand-page-maker/stores';
 import { useUiStyleSettingsStore } from '../../style-settings/store';
 import type { PageSection } from '../../page-settings/models';
 import { PAGE_SECTIONS } from '../../page-settings/models';

package/src/shared/page-navigation/store/page-navigation-store.ts

@@ -0,0 +1,168 @@
+import { defineStore } from 'pinia';
+import { NavModel, type NavOrder, type NavRoute } from '@brand-page';
+import { getPageSlugFromPageTitle } from '@brand-page-maker/utils/slug.util';
+
+export interface PageNavigationState {
+  routes: NavRoute[];
+  orders: NavOrder[];
+}
+
+const findParentOrderByRouteId = (
+  orders: NavOrder[],
+  routeId: string,
+): NavOrder | undefined => {
+  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: NavOrder[],
+  routeId: string,
+): NavOrder[] => {
+  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: (): PageNavigationState => ({
+    routes: [],
+    orders: [],
+  }),
+  getters: {
+    nav(): NavModel {
+      return new NavModel({
+        routes: this.routes,
+        orders: this.orders,
+      });
+    },
+  },
+  actions: {
+    setNav({ nav }: { nav: NavModel }): void {
+      this.routes = nav.routes;
+      this.orders = nav.orders;
+    },
+    addNavRoute(newRoute: NavRoute, parentRouteId?: string): void {
+      const newOrder: NavOrder = {
+        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: string): void {
+      this.routes = this.routes.filter((route) => route.id !== routeId);
+      this.orders = removeOrderByRouteId(this.orders, routeId);
+    },
+    onDisplayNameChange(routeId: string, newDisplayName: string): void {
+      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: string, isHidden: boolean): void {
+      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(): void {
+      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: string, newIndex: number): void {
+      // 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/src/shared/page-settings/components/delete-page-modal/DeletePageModal.vue

@@ -46,7 +46,7 @@
 <script>
 import { Modal, Button } from '@designcrowd/fe-shared-lib';
 import DeletePageModalMixin from './DeletePageModal.mixin.ts';
-import { deletePageModalTr } from '../../../../composables/useTranslate';
+import { deletePageModalTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

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

@@ -1,17 +1,22 @@
 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 type { NavRoute } from '@brand-page';
+import { v4 as uuid } from 'uuid';
 
 export default defineComponent({
   setup() {
     const pageSettingsStore = useUiPageSettingsStore();
+    const pageNavigationStore = usePageNavigationStore();
 
     return {
       isNewPageModalVisible: computed(
         () => pageSettingsStore.isNewPageModalVisible,
       ),
       pageSettingsStore,
+      pageNavigationStore,
     };
   },
   data() {
@@ -48,7 +53,19 @@ export default defineComponent({
         return;
       }
 
-      this.pageSettingsStore.addNewPage({ title: this.newPageTitle });
+      const newPage = this.pageSettingsStore.addNewPage({
+        title: this.newPageTitle,
+      });
+
+      const newRoute: NavRoute = {
+        id: uuid(),
+        pageId: newPage.id,
+        pageSlug: newPage.slug,
+        isHidden: false,
+        displayName: newPage.title,
+      };
+
+      this.pageNavigationStore.addNavRoute(newRoute);
 
       const eventTracker = useEventTracker();
 

package/src/shared/page-settings/components/new-page-modal/NewPageModal.vue

@@ -56,7 +56,7 @@
 <script>
 import { Modal, Button, TextInput } from '@designcrowd/fe-shared-lib';
 import NewPageModalMixin from './NewPageModal.mixin.ts';
-import { newPageModalTr } from '../../../../composables/useTranslate';
+import { newPageModalTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/shared/page-settings/components/page-settings/PageElement.vue

@@ -51,7 +51,7 @@
 <script setup lang="ts">
 import { Icon, TextInput } from '@designcrowd/fe-shared-lib';
 import PageSettingMenu from './PageSettingMenu.vue';
-import { pageSettingsTr } from '../../../../composables/useTranslate';
+import { pageSettingsTr } from '@src/composables/useTranslate';
 
 interface Props {
   isHidden: boolean;

package/src/shared/page-settings/components/page-settings/PageSettingMenu.vue

@@ -40,7 +40,7 @@
 import { ref, computed } from 'vue';
 import { Icon } from '@designcrowd/fe-shared-lib';
 import { directive as vClickOutside } from 'click-outside-vue3'; // import to fix click outside handling
-import { pageSettingsTr } from '../../../../composables/useTranslate';
+import { pageSettingsTr } from '@src/composables/useTranslate';
 
 interface Props {
   index: number;

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

@@ -10,11 +10,11 @@ import {
   ALIGN_JUSTIFIED,
   ALIGN_LEFT_ALIGNED,
   type Content,
-} from '../../../../brand-page';
+} from '@brand-page';
 import {
   PAGE_SECTION_STYLE_OPTIONS,
   type PageSectionStyleOption,
-} from '../../../../brand-page-maker/models/page-section-style.model';
+} from '@brand-page-maker/models/page-section-style.model';
 import { useUiContentSettingsStore } from '../../../content-settings/store';
 import {
   PAGE_SETTINGS_SECTIONS,
@@ -27,19 +27,17 @@ import {
   useBrandPageMakerUserStore,
   useUiStore,
   useBrandPageContainerStore,
-} from '../../../../brand-page-maker/stores';
+} from '@brand-page-maker/stores';
 import { SIDE_BAR_CONTENT_ID } from '../../../content-settings/constants';
 import type { ComponentPublicInstance } from '@vue/runtime-core';
 import {
   TRIGGER_TYPE,
   UPGRADE_CTA_LOCATIONS,
   useEventTracker,
-} from '../../../../brand-page-maker/composables/useEventTracker';
-import {
-  pageSettingTr,
-  styleSettingsTr,
-} from '../../../../composables/useTranslate';
+} 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';
 
 export interface PageField {
   pageTitle: string;
@@ -64,6 +62,7 @@ export default defineComponent({
     const navigationSettingsStore = useUiNavigationStyleSettingsStore();
     const brandPageContainerStore = useBrandPageContainerStore();
     const eventTracker = useEventTracker();
+    const pageNavigationStore = usePageNavigationStore();
 
     const updatePages = (pageFields: PageField[]) => {
       pageSettingsStore.setPages({ pages: pageFields.map((p) => p.page) });
@@ -97,6 +96,17 @@ export default defineComponent({
         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;
@@ -137,9 +147,11 @@ export default defineComponent({
       uiStore,
       userStore,
       pageSettingsStore,
+      pageNavigationStore,
       contentSettingsStore,
       navigationSettingsStore,
       brandPageContainerStore,
+
       viewport: computed(() => brandPageMakerStore.viewport),
       isDraggingPage,
       onDraggingStart,
@@ -239,6 +251,22 @@ export default defineComponent({
         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,
@@ -252,6 +280,19 @@ export default defineComponent({
     onConfirmDeletePage(pageIndex: number) {
       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(
@@ -282,10 +323,21 @@ export default defineComponent({
       this.pageSettingsStore.setSelectedSectionName({ sectionName });
     },
     onPageTitleInput(index: number, title: string) {
+      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();

package/src/shared/page-settings/components/page-settings/PageSettings.vue

@@ -139,12 +139,9 @@ import SideBarSectionTitle from '../../../common/SideBarSectionTitle.vue';
 import DeletePageModal from '../delete-page-modal/DeletePageModal.vue';
 import PageElement from './PageElement.vue';
 import PageSettingsSectionStyles from '../page-settings-section-styles/PageSettingsSectionStyles.vue';
-import { useBrandPageContainerStore } from '../../../../brand-page-maker/stores';
+import { useBrandPageContainerStore } from '@brand-page-maker/stores';
 
-import {
-  pageSettingsTr,
-  styleSettingsTr,
-} from '../../../../composables/useTranslate';
+import { pageSettingsTr, styleSettingsTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/shared/page-settings/components/page-settings-section-styles/FooterDisplayStyle.vue

@@ -18,10 +18,10 @@
 </template>
 <script setup lang="ts">
 import { ButtonGroup } from '@designcrowd/fe-shared-lib';
-import type { ButtonGroupOption } from '../../../../brand-page-maker/models/button-group.model';
+import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
 import { computed } from 'vue';
-import { FOOTER_DISPLAY_STYLE_CONFIGS } from '../../../../brand-page';
-import { tr } from '../../../../composables/useTranslate';
+import { FOOTER_DISPLAY_STYLE_CONFIGS } from '@brand-page';
+import { tr } from '@src/composables/useTranslate';
 
 interface Props {
   displayStyle: string;

package/src/shared/page-settings/components/page-settings-section-styles/HeaderDisplayStyle.vue

@@ -19,16 +19,16 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { ButtonGroup } from '@designcrowd/fe-shared-lib';
-import { HEADER_DISPLAY_STYLE_CONFIGS } from '../../../../brand-page';
+import { HEADER_DISPLAY_STYLE_CONFIGS } from '@brand-page';
 import {
   HEADER_DISPLAY,
   NAVIGATION_DISPLAY,
   type ViewportsType,
-} from '../../../../brand-page';
-import type { ButtonGroupOption } from '../../../../brand-page-maker/models/button-group.model';
-import { useBrandPageMakerStore } from '../../../../brand-page-maker/stores';
+} from '@brand-page';
+import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
+import { useBrandPageMakerStore } from '@brand-page-maker/stores';
 import { useUiPageSettingsStore } from '../../store';
-import { tr } from '../../../../composables/useTranslate';
+import { tr } from '@src/composables/useTranslate';
 
 interface Props {
   displayStyle: string;

package/src/shared/page-settings/components/page-settings-section-styles/HeaderNavigationType.vue

@@ -18,9 +18,9 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { ButtonGroup } from '@designcrowd/fe-shared-lib';
-import type { NavigationStyleConfig } from '../../../../brand-page-maker/models/navigation-style-configs';
-import type { ButtonGroupOption } from '../../../../brand-page-maker/models/button-group.model';
-import { tr } from '../../../../composables/useTranslate';
+import type { NavigationStyleConfig } from '@brand-page-maker/models/navigation-style-configs';
+import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
+import { tr } from '@src/composables/useTranslate';
 
 interface Props {
   availableNavigationStyleConfigs: NavigationStyleConfig[];

package/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.ts

@@ -1,7 +1,7 @@
 import { defineComponent, computed } from 'vue';
 import type { PropType } from 'vue';
-import type { PageSectionStyleOption } from '../../../../brand-page-maker/models/page-section-style.model';
-import { PAGE_SECTION_STYLE_OPTIONS } from '../../../../brand-page-maker/models/page-section-style.model';
+import type { PageSectionStyleOption } from '@brand-page-maker/models/page-section-style.model';
+import { PAGE_SECTION_STYLE_OPTIONS } from '@brand-page-maker/models/page-section-style.model';
 import { PAGE_SECTIONS } from '../../models';
 import type {
   NavigationStyleOptionValueChangeEvent,
@@ -23,14 +23,14 @@ import type {
   PageFooterMobile,
   LogoImageModel,
   LogoViewModel,
-} from '../../../../brand-page';
+} from '@brand-page';
 import {
   LOGO_SLIDER_DESKTOP_MAX,
   LOGO_SLIDER_DESKTOP_MIN,
   LOGO_SLIDER_MOBILE_MAX,
   LOGO_SLIDER_MOBILE_MIN,
   VIEWPORTS,
-} from '../../../../brand-page';
+} from '@brand-page';
 import type {
   ContentItemFieldSettings,
   UpdateItemValuePayload,
@@ -47,15 +47,15 @@ import {
   useBrandPageMakerStore,
   useLogoStore,
   useUiStore,
-} from '../../../../brand-page-maker/stores';
+} from '@brand-page-maker/stores';
 import type { DisplayLogoDraftAsset } from '../../../../clients/models';
 import {
   useUiEditableLogoStore,
   useUiLogoSettingsStore,
-} from '../../../../shared/logo-settings/store';
+} from '@shared/logo-settings/store';
 import { FabricRenderClient } from '../../../../clients/fabric-render-client';
-import { parseLogoThemeToCssStyles } from '../../../../brand-page/utils';
-import { commonTr } from '../../../../composables/useTranslate';
+import { parseLogoThemeToCssStyles } from '@brand-page/utils';
+import { commonTr } from '@src/composables/useTranslate';
 
 const viewportsWithTr = () => [
   {

package/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.vue

@@ -222,9 +222,9 @@ import ColorField from '../../../content-settings/components/color-field/ColorFi
 import HeaderDisplayStyle from './HeaderDisplayStyle.vue';
 import HeaderNavigationType from './HeaderNavigationType.vue';
 import FooterDisplayStyle from './FooterDisplayStyle.vue';
-import LogoSelection from '../../../../shared/content-settings/components/logo-selection-field/LogoSelection.vue';
-import LogoSizeSlider from '../../../../shared/content-settings/components/logo-size-field/LogoSizeSlider.vue';
-import { tr, commonTr } from '../../../../composables/useTranslate';
+import LogoSelection from '@shared/content-settings/components/logo-selection-field/LogoSelection.vue';
+import LogoSizeSlider from '@shared/content-settings/components/logo-size-field/LogoSizeSlider.vue';
+import { tr, commonTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/shared/page-settings/models.ts

@@ -1,9 +1,10 @@
-import type { Content, TextStyleDeclaration } from '../../brand-page';
+import type { Content, TextStyleDeclaration } from '@brand-page';
 import type { ContentItem } from '../content-settings/models';
 import type { PageSettingsStateSectionStyles } from './store';
-import type { NavigationStyleConfigOption } from '../../brand-page-maker/models/navigation-style-configs';
+import type { NavigationStyleConfigOption } from '@brand-page-maker/models/navigation-style-configs';
 
 export interface ContentPage {
+  id: string;
   title: string;
   slug: string;
   contents: ContentItem<Content>[];

package/src/shared/page-settings/store/page-settings-store.test.ts

@@ -3,22 +3,22 @@ import type Vue from 'vue';
 import { createApp } from 'vue';
 import { createPinia, setActivePinia } from 'pinia';
 import type { ContentPage } from '../models';
-import type { PageModel, TextContent } from '../../../brand-page';
+import type { PageModel, TextContent } from '@brand-page';
 import type { ContentItem } from '../../content-settings/models';
 import {
   UNLIMITED_MAX_NUM_OF_PAGES,
   useBrandPageMakerStore,
   useBrandPageMakerUserStore,
-} from '../../../brand-page-maker/stores';
+} from '@brand-page-maker/stores';
 import {
   INITIALISE_PAYLOAD,
   USER_FEATURES,
   brandPageEmpty,
-} from '../../../brand-page-maker/components/brand-page-maker/__fixtures__';
+} from '@brand-page-maker/components/brand-page-maker/__fixtures__';
 import { useUiPageSettingsStore } from './index';
 import { useUiContentSettingsStore } from '../../content-settings/store';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
-import { setLocaleAsync } from '../../../../src/composables/useTranslate';
+import { setLocaleAsync } from '@src/composables/useTranslate';
 
 vi.mock('../../../clients/brand-page-client', () => ({
   default: {
@@ -30,6 +30,7 @@ vi.mock('../../../clients/brand-page-client', () => ({
 
 function createPage(pageNo): ContentPage {
   return {
+    id: `page-${pageNo}`,
     title: `Page ${pageNo}`,
     slug: `page${pageNo}`,
     contents: [