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

package/src/brand-page/components/shop/ProductDetailModal.vue

@@ -163,15 +163,15 @@ import {
 import type {
   ProductModel,
   selectedVariantOption,
-} from '../../../brand-page/models/shop.model';
+} from '@brand-page/constantsmodels/shop.model';
 import { computed, reactive, watch } from 'vue';
 import {
   useCartStore,
   NOTES_MAX_LENGTH,
   type AddSkuItemToCartRequest,
-} from '../../../shared/ecommerce-settings/store/cart-settings-store';
-import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/shop-settings-store';
-import { productDetailModalTr } from '../../../composables/useTranslate';
+} from '@shared/ecommerce-settings/store/cart-settings-store';
+import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
+import { productDetailModalTr } from '@src/composables/useTranslate';
 
 interface Props {
   product: ProductModel;

package/src/brand-page/components/shop/Shop.vue

@@ -126,15 +126,15 @@ import {
   PAYMENT_OPTION_IMAGE_TYPES,
   type BrandPagePaymentConfig,
   type BrandPageContext,
-} from '../../models';
-import type { ProductModel } from '../../models/shop.model';
-import type { ShopViewModel } from '../../view-models';
-import { useCartStore } from '../../../shared/ecommerce-settings/store/cart-settings-store';
+} from '@brand-page/models';
+import type { ProductModel } from '@brand-page/models/shop.model';
+import type { ShopViewModel } from '@brand-page/view-models';
+import { useCartStore } from '@shared/ecommerce-settings/store/cart-settings-store';
 import PaymentModal from './PaymentModal.vue';
 import brandPageClient from '../../clients/brand-page.client';
-import raygunUtil from '../../utils/raygun.util';
-import { shopTr } from '../../../composables/useTranslate';
-import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/shop-settings-store';
+import raygunUtil from '@brand-page/utils/raygun.util';
+import { shopTr } from '@src/composables/useTranslate';
+import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
 
 const props = withDefaults(
   defineProps<{

package/src/brand-page/components/shop/TextDisplay.vue

@@ -29,12 +29,12 @@
   </ul>
 </template>
 <script setup lang="ts">
-import type { BrandPageContext } from '../../models';
+import type { BrandPageContext } from '@brand-page/models';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import type { PropType } from 'vue';
-import type { ShopViewModel } from '../../view-models';
-import type { ProductModel } from '../../models/shop.model';
-import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/shop-settings-store';
+import type { ShopViewModel } from '@brand-page/view-models';
+import type { ProductModel } from '@brand-page/models/shop.model';
+import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
 import { computed } from 'vue';
 
 const shopSettingStore = useShopConfigStore();

package/src/brand-page/components/shop/ThumbnailDisplay.vue

@@ -45,13 +45,13 @@
   </ul>
 </template>
 <script setup lang="ts">
-import type { BrandPageContext, ShopContent } from '../../models';
+import type { BrandPageContext, ShopContent } from '@brand-page/models';
 import FallbackImage from '../fallback-image/FallbackImage.vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import type { PropType } from 'vue';
-import type { ShopViewModel } from '../../view-models';
-import type { ProductModel } from '../../models/shop.model';
-import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/shop-settings-store';
+import type { ShopViewModel } from '@brand-page/view-models';
+import type { ProductModel } from '@brand-page/models/shop.model';
+import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
 import { computed } from 'vue';
 
 const shopSettingStore = useShopConfigStore();

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

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import SocialLinks from './SocialLinks.vue';
-import type { SocialLinksViewModel } from '../../view-models';
+import type { SocialLinksViewModel } from '@brand-page/view-models';
 import { context } from '../../__fixtures__/brand-page-sample-data';
 
 export default {

package/src/brand-page/components/social-links/SocialLinks.vue

@@ -32,8 +32,8 @@
 import SocialLinksItems from './SocialLinksItems.vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import type { SocialLinksViewModel } from 'src/brand-page/view-models';
-import { SOCIAL_LINKS_ICON_DISPLAY_STYLES } from '../../models';
-import type { BrandPageContext, LinksItem } from '../../models';
+import { SOCIAL_LINKS_ICON_DISPLAY_STYLES } from '@brand-page/models';
+import type { BrandPageContext, LinksItem } from '@brand-page/models';
 import { computed } from 'vue';
 
 const props = withDefaults(

package/src/brand-page/components/social-links/SocialLinks.vue.test.ts

@@ -1,13 +1,13 @@
 import { shallowMount } from '@vue/test-utils';
 import { faker } from '@faker-js/faker';
 import SocialLinksItems from './SocialLinksItems.vue';
-import type { SocialLinksViewModel } from '../../view-models';
-import type { BrandPageContext } from '../../models';
+import type { SocialLinksViewModel } from '@brand-page/view-models';
+import type { BrandPageContext } from '@brand-page/models';
 import {
   BRAND_PAGE_TYPES,
   MEDIA_SIZES,
   SOCIAL_LINKS_ICON_DISPLAY_STYLES,
-} from '../../models';
+} from '@brand-page/models';
 import { createPinia, setActivePinia } from 'pinia';
 import { FONT_SIZE_TITLE } from '../../constants';
 
@@ -35,6 +35,7 @@ const createTestBrandPageContext = (): BrandPageContext => ({
   },
   pages: [
     {
+      id: '123',
       title: 'Home',
       slug: 'home',
       isHidden: false,

package/src/brand-page/components/social-links/SocialLinksItems.vue

@@ -34,7 +34,7 @@
 <script lang="ts" setup>
 import Icon from '../icon/Icon.vue';
 import Media from '../media/Media.vue';
-import type { BrandPageContext, LinksItem } from '../../models';
+import type { BrandPageContext, LinksItem } from '@brand-page/models';
 import { computed } from 'vue';
 import { isEmail, isTel, isURL } from '../../../utils/validator.util';
 

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

@@ -1,12 +1,12 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
-import type { TestimonialSectionViewModel } from '../../view-models';
-import type { BrandPageContext } from '../../models';
-import { getRenderText } from '../../utils';
+import type { TestimonialSectionViewModel } from '@brand-page/view-models';
+import type { BrandPageContext } from '@brand-page/models';
+import { getRenderText } from '@brand-page/utils';
 import type { DebounceHandle } from 'lodash.debounce';
 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;
 

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

@@ -1,7 +1,7 @@
 import TextSection from './Text.vue';
 import { context, BScontext } from '../../__fixtures__/brand-page-sample-data';
 import { defineComponent } from 'vue';
-import type { TextViewModel } from '../../view-models';
+import type { TextViewModel } from '@brand-page/view-models';
 
 export default {
   title: 'Components/BrandPage/Text',

package/src/brand-page/components/text/Text.vue

@@ -40,9 +40,9 @@
 <script setup lang="ts">
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import { computed } from 'vue';
-import type { TextViewModel } from '../../view-models';
-import { getRenderText } from '../../utils';
-import type { BrandPageContext } from '../../models';
+import type { TextViewModel } from '@brand-page/view-models';
+import { getRenderText } from '@brand-page/utils';
+import type { BrandPageContext } from '@brand-page/models';
 
 interface Props {
   viewModel: TextViewModel;

package/src/brand-page/components/text-media-section/TextMediaSection.test.ts

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import TextMediaSection from './TextMediaSection.vue';
-import type { TextImageSectionViewModel } from '../../view-models';
+import type { TextImageSectionViewModel } from '@brand-page/view-models';
 import { createPinia, setActivePinia } from 'pinia';
 import {
   ALIGN_CARD_CENTER_IMAGE,

package/src/brand-page/components/text-media-section/TextMediaSection.vue

@@ -140,9 +140,9 @@ import Button from '../button/Button.vue';
 import type {
   TextImageSectionViewModel,
   ButtonViewModel,
-} from '../../view-models';
-import type { BrandPageContext } from '../../models';
-import type { TextMediaItem } from '../../models';
+} from '@brand-page/view-models';
+import type { BrandPageContext } from '@brand-page/models';
+import type { TextMediaItem } from '@brand-page/models';
 import {
   ALIGN_CARD_CENTER_IMAGE,
   ALIGN_CENTERED,
@@ -151,8 +151,8 @@ import {
   ALTERNATE_IMAGE,
   MEDIA_ONLY,
 } from '../../constants';
-import { isHexTransparent } from '../../utils/color.util';
-import { escapeContentText, getRenderText } from '../../utils';
+import { isHexTransparent } from '@brand-page/utils/color.util';
+import { escapeContentText, getRenderText } from '@brand-page/utils';
 
 const props = defineProps({
   viewModel: {

package/src/brand-page/components/text-wrapper/TextWrapper.vue

@@ -15,8 +15,11 @@
   </div>
 </template>
 <script setup lang="ts">
-import { hasRTEContent } from '../../../brand-page-maker/utils';
-import { type FluidTextData, type TextStyleDeclaration } from '../../models';
+import { hasRTEContent } from '@brand-page-maker/utils';
+import {
+  type FluidTextData,
+  type TextStyleDeclaration,
+} from '@brand-page/models';
 import {
   computed,
   reactive,

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

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
-import type { VideoViewModel } from '../../view-models';
+import type { VideoViewModel } from '@brand-page/view-models';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import {
   DISPLAY_STYLE_PREVIEW,

package/src/brand-page/components/video/Video.vue

@@ -55,7 +55,7 @@
 import { Icon } from '@designcrowd/fe-shared-lib';
 import Placeholder from '../placeholder/Placeholder.vue';
 import VideoMixin from './Video.mixin.ts';
-import { videoTr } from '../../../composables/useTranslate';
+import { videoTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/brand-page/constants/font.constants.ts

@@ -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';

package/src/brand-page/constants/misc.constants.ts

@@ -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';

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

@@ -1,6 +1,6 @@
 import { ALIGN_CENTERED, ALIGN_JUSTIFIED } from '../misc.constants';
-import type { ButtonGroupOption } from '../../../brand-page-maker/models/button-group.model';
-import { tr, commonTr } from '../../../composables/useTranslate';
+import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
+import { tr, commonTr } from '@src/composables/useTranslate';
 
 export const FOOTER_DISPLAY = {
   /** @deprecated */

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

@@ -4,7 +4,7 @@ import {
   ALIGN_LEFT_ALIGNED,
   ALIGN_RIGHT_ALIGNED,
 } from '../misc.constants';
-import type { ButtonGroupOption } from '../../../brand-page-maker/models/button-group.model';
+import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
 import { NAVIGATION_DISPLAY } from './navigation-display.constants';
 
 export const HEADER_DISPLAY = {

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

@@ -609,6 +609,7 @@ export class PageModel {
   title: string;
   slug: string;
   contents: Content[];
+  id: string;
   isHidden?: boolean;
 
   constructor(
@@ -619,6 +620,31 @@ export class PageModel {
     this.slug = options.slug ?? '';
     this.contents = options.contents || [];
     this.isHidden = options.isHidden ?? false;
+    this.id = options.id || '';
+  }
+}
+
+// Navigation objects - Initially to support Sub-navigation, but to be extended for future use (E.g. Nested nav)
+export interface NavRoute {
+  id: string;
+  pageId: string;
+  pageSlug: string;
+  isHidden: boolean;
+  displayName: string;
+}
+
+export interface NavOrder {
+  routeId: string;
+  subRoutes: NavOrder[];
+}
+
+export class NavModel {
+  orders: NavOrder[];
+  routes: NavRoute[];
+
+  constructor(options: Partial<NavModel> = {}) {
+    this.orders = options.orders || [];
+    this.routes = options.routes || [];
   }
 }
 
@@ -923,6 +949,8 @@ export class BrandPageModel {
 
   pages: PageModel[];
 
+  nav: NavModel;
+
   isModifiedAfterTemplateApplied?: boolean;
 
   brandPageType?: BrandPageType;
@@ -1038,6 +1066,8 @@ export class BrandPageModel {
     this.saveContactSettings = options.saveContactSettings;
 
     this.paymentConfig = options.paymentConfig;
+
+    this.nav = new NavModel(options.nav);
   }
 }
 

package/src/brand-page/models/styles.model.ts

@@ -15,7 +15,7 @@ import {
   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',

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -11,6 +11,23 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
     "headerStyles": undefined,
     "isModifiedAfterTemplateApplied": undefined,
     "measurementID": undefined,
+    "nav": NavModel {
+      "orders": [
+        {
+          "routeId": "mocked-uuid-2",
+          "subRoutes": [],
+        },
+      ],
+      "routes": [
+        {
+          "displayName": "Home",
+          "id": "mocked-uuid-2",
+          "isHidden": false,
+          "pageId": "mocked-uuid-1",
+          "pageSlug": "home",
+        },
+      ],
+    },
     "ogDescription": undefined,
     "ogImageUrl": undefined,
     "ogTitle": undefined,
@@ -313,6 +330,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
             "url": "",
           },
         ],
+        "id": "mocked-uuid-1",
         "slug": "home",
         "title": "Home",
       },
@@ -428,7 +446,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
       },
     },
-    "v": 11,
+    "v": 12,
   },
   "useOldLogoRenderSize": true,
 }
@@ -445,6 +463,23 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
     "headerStyles": undefined,
     "isModifiedAfterTemplateApplied": undefined,
     "measurementID": undefined,
+    "nav": NavModel {
+      "orders": [
+        {
+          "routeId": "mocked-uuid-2",
+          "subRoutes": [],
+        },
+      ],
+      "routes": [
+        {
+          "displayName": "Home",
+          "id": "mocked-uuid-2",
+          "isHidden": false,
+          "pageId": "mocked-uuid-1",
+          "pageSlug": "home",
+        },
+      ],
+    },
     "ogDescription": undefined,
     "ogImageUrl": undefined,
     "ogTitle": undefined,
@@ -730,6 +765,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
             "type": "text",
           },
         ],
+        "id": "mocked-uuid-1",
         "slug": "home",
         "title": "Home",
       },
@@ -845,7 +881,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 11,
+    "v": 12,
   },
   "useOldLogoRenderSize": true,
 }
@@ -862,6 +898,23 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
     "headerStyles": undefined,
     "isModifiedAfterTemplateApplied": undefined,
     "measurementID": undefined,
+    "nav": NavModel {
+      "orders": [
+        {
+          "routeId": "mocked-uuid-2",
+          "subRoutes": [],
+        },
+      ],
+      "routes": [
+        {
+          "displayName": "Home",
+          "id": "mocked-uuid-2",
+          "isHidden": false,
+          "pageId": "mocked-uuid-1",
+          "pageSlug": "home",
+        },
+      ],
+    },
     "ogDescription": undefined,
     "ogImageUrl": undefined,
     "ogTitle": undefined,
@@ -1154,6 +1207,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
             "type": "text",
           },
         ],
+        "id": "mocked-uuid-1",
         "slug": "home",
         "title": "Home",
       },
@@ -1269,7 +1323,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 11,
+    "v": 12,
   },
   "useOldLogoRenderSize": true,
 }

package/src/brand-page/utils/__snapshots__/migration2.util.test.ts.snap

@@ -11,6 +11,10 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
     "headerStyles": undefined,
     "isModifiedAfterTemplateApplied": undefined,
     "measurementID": undefined,
+    "nav": NavModel {
+      "orders": [],
+      "routes": [],
+    },
     "ogDescription": undefined,
     "ogImageUrl": undefined,
     "ogTitle": undefined,

package/src/brand-page/utils/__snapshots__/model.util.test.ts.snap

@@ -10,6 +10,10 @@ BrandPageModel {
   "headerStyles": undefined,
   "isModifiedAfterTemplateApplied": undefined,
   "measurementID": undefined,
+  "nav": NavModel {
+    "orders": [],
+    "routes": [],
+  },
   "ogDescription": undefined,
   "ogImageUrl": undefined,
   "ogTitle": undefined,
@@ -451,6 +455,10 @@ BrandPageModel {
   "headerStyles": undefined,
   "isModifiedAfterTemplateApplied": undefined,
   "measurementID": undefined,
+  "nav": NavModel {
+    "orders": [],
+    "routes": [],
+  },
   "ogDescription": undefined,
   "ogImageUrl": undefined,
   "ogTitle": undefined,

package/src/brand-page/utils/button.util.ts

@@ -1,5 +1,5 @@
 import type { ButtonStyles } from '../models';
-import { isHexColor } from '../../utils/helpers';
+import { isHexColor } from '@src/utils/helpers';
 import { setRgbAlpha } from './color.util';
 import {
   ButtonSoftBoxShadowSize,

package/src/brand-page/utils/color.util.ts

@@ -1,5 +1,5 @@
 import isHexColor from 'validator/lib/isHexColor';
-import { hexToRGBA, isColor } from '../../utils/helpers';
+import { hexToRGBA, isColor } from '@src/utils/helpers';
 import type { LogoTheme, Theme } from '../models';
 import Color, { type ColorInstance } from 'color';
 

package/src/brand-page/utils/index.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';

package/src/brand-page/utils/logo.util.test.ts

@@ -44,6 +44,7 @@ const createTestBrandPageModel = (): BrandPageModel => {
 
   const pages: PageModel[] = [
     {
+      id: '123',
       title: '',
       slug: '',
       contents: [logoContent, { ...logoContent }],
@@ -59,6 +60,10 @@ const createTestBrandPageModel = (): BrandPageModel => {
     pages,
     brandPageType: BRAND_PAGE_TYPES.default,
     styles: new PageStyles(),
+    nav: {
+      orders: [],
+      routes: [],
+    },
   };
 };
 

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

@@ -66,8 +66,8 @@ import {
   isTestimonialContent,
   isTextContent,
   type MigrationData,
-} from '../../utils';
-import { createInitialLogoContent } from '../../../brand-page-maker/models';
+} from '@brand-page/utils';
+import { createInitialLogoContent } from '@brand-page-maker/models';
 
 export const applyTextContentTextToTextItemsMigration = (
   brandPageModel: BrandPageModel,

package/src/brand-page/utils/migration/migration-07.test.ts

@@ -1,4 +1,4 @@
-import { BrandPageModel, type BrandPageData } from '../../models';
+import { BrandPageModel, type BrandPageData } from '@brand-page/models';
 import { migration07 } from './migration-07';
 import type { MigrationData } from '../migration.util';
 

package/src/brand-page/utils/migration/migration-08.test.ts

@@ -1,7 +1,7 @@
 import { describe, test, expect, vi, beforeEach } from 'vitest';
 import { migration08 } from './migration-08';
 import type { MigrationData } from '../migration.util';
-import { BRAND_PAGE_TYPES, type LogoContent } from '../../models';
+import { BRAND_PAGE_TYPES, type LogoContent } from '@brand-page/models';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
 
 // Create a mock instance that will be reused

package/src/brand-page/utils/migration/migration-08.ts

@@ -6,7 +6,7 @@ import {
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
 import type { MigrationData, MigrationOptions } from '../migration.util';
 import { isLogoContent } from '../model.util';
-import type { LogoContent } from '../../models/logo.model';
+import type { LogoContent } from '@brand-page/models/logo.model';
 import { calculateLogoDimensions } from '../logo.util';
 
 export const migration08 = async (

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

@@ -0,0 +1,43 @@
+import type { MigrationData } from '../migration.util';
+import { v4 as uuid } from 'uuid';
+import type { NavRoute, NavOrder } from '@brand-page/models';
+import { NavModel } from '@brand-page/models';
+
+export const migration12 = async (
+  migrationResult: MigrationData,
+): Promise<MigrationData> => {
+  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: NavRoute[] = [];
+  const orders: NavOrder[] = [];
+
+  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;
+};