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

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

@@ -1,3 +1,4 @@
+import { vi } from 'vitest';
 import { migrateBrandPageModel } from './migration.util';
 import { migrateNewLogoLogic } from './migration/migration-01';
 import {
@@ -22,7 +23,7 @@ import {
   createInitialAboutSectionContent,
   createInitialBannerSectionContent,
   createInitialTestimonialSectionContent,
-} from '../../brand-page-maker/models';
+} from '@brand-page-maker/models';
 import {
   DEFAULT_LETTER_SPACING,
   LINE_HEIGHT_BODY,
@@ -31,7 +32,21 @@ import {
   TEXT_ONLY,
 } from '../constants';
 
+let indexForUuid = 0;
+
+vi.mock('uuid', () => ({
+  v4: () => {
+    indexForUuid += 1;
+
+    return `mocked-uuid-${indexForUuid}`;
+  },
+}));
+
 describe('migration.util', () => {
+  beforeEach(() => {
+    indexForUuid = 0;
+  });
+
   const getBsModel: () => BrandPageModel = () => {
     return {
       pages: [

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

@@ -13,6 +13,7 @@ import { migration08 } from './migration/migration-08';
 import { migration09 } from './migration/migration-09';
 import { migration10 } from './migration/migration-10';
 import { migration11 } from './migration/migration-11';
+import { migration12 } from './migration/migration-12';
 
 export interface MigrationData {
   brandPageModel: BrandPageModel;
@@ -110,6 +111,11 @@ const MIGRATION_TABLE = [
     migrateFn: migration11,
     description: 'Remove backgroundColorEnabled flag from page headers',
   },
+  {
+    version: 12,
+    migrateFn: migration12,
+    description: 'Migrating nav model to support sub nav feature',
+  },
 ] as MigrationTableItem[];
 
 export const GetLatestModelVersion = () =>

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

@@ -16,7 +16,7 @@ import { applyUserPersonalisationToBrandPageModelAsync } from './personalisation
 import {
   DIGITAL_CARD_PERSONALIZATION,
   PERSONALISATION,
-} from '../../brand-page-maker/components/brand-page-maker/__fixtures__';
+} from '@brand-page-maker/components/brand-page-maker/__fixtures__';
 import {
   createInitialBannerSectionContent,
   createInitialShapesSectionContent,
@@ -27,7 +27,7 @@ import {
   createInitialTestimonialSectionContent,
   createInitialProfileContent,
   createInitialButtonContent,
-} from '../../brand-page-maker/models';
+} from '@brand-page-maker/models';
 import { faker } from '@faker-js/faker';
 
 describe('personalisation.util', async () => {

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

@@ -1,9 +1,9 @@
-import { escapeContentText } from '../../brand-page/utils';
+import { escapeContentText } from '@brand-page/utils';
 import {
   DEFAULT_PERSONALISATION_MAPPING,
   PERSONALISATION_MAPPINGS,
   TEXT_MEDIA_CONTENT_TYPES,
-} from '../../brand-page-maker/constants/personalisation.constant';
+} from '@brand-page-maker/constants/personalisation.constant';
 import { BRAND_PAGE_TYPES, ShapeAspectRatioCategory } from '../models';
 import type {
   BrandPageModel,

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

@@ -12,7 +12,7 @@ export const getRouteParamsByPage = (
 
 export const getRouteNameByPageIndex = (
   isCustomDomain: boolean,
-  pageIndex: number,
+  pageIndex?: number,
 ) => {
   let routeName =
     pageIndex === 0

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

@@ -7,7 +7,7 @@ import {
 } from './style.util';
 import { logoWithFlatColorsTheme } from '../../__fixtures__';
 import { STYLE_THEME_KEYS } from '../constants';
-import { BRAND_SITE } from '../../brand-page-maker/components/brand-page-maker/__fixtures__';
+import { BRAND_SITE } from '@brand-page-maker/components/brand-page-maker/__fixtures__';
 import type { LogoTheme } from '../models';
 import {
   BrandPageModel,
@@ -22,7 +22,7 @@ import {
   createInitialProfileContent,
   createInitialShapesSectionContent,
   createInitialSocialLinksContent,
-} from '../../brand-page-maker/models';
+} from '@brand-page-maker/models';
 
 describe('style.util', () => {
   test('colorMatchCssKeyValue should return correct boxShadow css value when given a color matched theme key', () => {

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

@@ -20,18 +20,18 @@ import {
   linearGradientToArray,
   isColorLinearGradient,
   RGBAtoHex,
-} from '../../utils/helpers';
+} from '@src/utils/helpers';
 import {
   addTransparentAlphaChannelToHex,
   calculateLuminanceRatio,
   getNewColorBasedOnTargetColorTheme,
 } from './color.util';
-import { isRgbColor } from '../../utils/helpers';
+import { isRgbColor } from '@src/utils/helpers';
 import chroma from 'chroma-js';
 import {
   hasRTEContent,
   RTE_ALLOWED_SECTION_TYPES,
-} from '../../brand-page-maker/utils';
+} from '@brand-page-maker/utils';
 
 /**
  * Simple utility to convert any color format to hex for consistent comparison

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

@@ -3,7 +3,7 @@ import {
   MULTI_COLOR_SVG,
   MULTI_COLOR_WITH_MULTI_CSS_SELECTOR_SVG,
   SINGLE_COLOR_SVG,
-} from '../../brand-page-maker/components/brand-page-maker/__fixtures__';
+} from '@brand-page-maker/components/brand-page-maker/__fixtures__';
 import { getColorReplacementsFromSvgStringServer } from './svg-color.util';
 
 describe('svg-color.util', async () => {

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

@@ -1,4 +1,4 @@
-import { RGBAtoHex } from '../../utils/helpers';
+import { RGBAtoHex } from '@src/utils/helpers';
 import type { ColorReplacement } from '../models';
 import * as uuid from 'uuid';
 import {

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

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

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

@@ -1,6 +1,6 @@
 import { isValidUrl } from '../../helpers/url.helper';
-import { getPlainTextFromRTE } from '../../brand-page-maker/utils/rich-text-editor.util';
-import { isEmail, isTel } from '../../utils/validator.util';
+import { getPlainTextFromRTE } from '@brand-page-maker/utils/rich-text-editor.util';
+import { isEmail, isTel } from '@src/utils/validator.util';
 import type {
   ButtonViewModel,
   ContentViewModel,

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

@@ -19,7 +19,7 @@ import {
   LINE_HEIGHT_BODY,
   LINE_HEIGHT_HEADINGS,
 } from '../constants';
-import { createInitialBannerSectionContent } from '../../brand-page-maker/models';
+import { createInitialBannerSectionContent } from '@brand-page-maker/models';
 
 const createOldProfileContent = (): ProfileContent => {
   return {

package/src/brand-page/utils/view-model.util.ts

@@ -41,6 +41,9 @@ import type {
   GettyVideoMedia,
   AbstractMedia,
   BackgroundStyles,
+  NavModel,
+  NavRoute,
+  NavOrder,
 } from '../models';
 import { ButtonStyles, SENSITIVE_CONTENT_TYPES, VIEWPORTS } from '../models';
 import {
@@ -81,10 +84,12 @@ import type {
   GettyVideoViewModel,
   PageStylesViewModel,
   BackgroundStylesViewModel,
+  NavViewModel,
+  NavItemViewModel,
 } from '../view-models';
 import { isHexTransparent, setRgbAlpha } from './color.util';
 import type { ContentTextStylePropertyKey } from '../constants';
-import { isHexColor } from '../../utils/helpers';
+import { isHexColor } from '@src/utils/helpers';
 import {
   CONTENT_TEXT_STYLE_PROPERTY_KEYS,
   FALLBACK_DEFAULT_LINK_COLOR,
@@ -114,11 +119,14 @@ import { generateGoogleFontUrl } from './font-loader.util';
 import { isValidSvgUrl } from './image.util';
 import { isLogoContent } from './model.util';
 import { getBoxShadowValue } from './button.util';
+import { getRouteNameByPageIndex, getRouteParamsByPage } from './route.util';
 
 const BUTTON_BORDER_RADIUS = '9999px';
 const CONTENT_BORDER_RADIUS = '48px';
 const PROFILE_PADDING_TOP = '1rem';
 
+const MAX_SUB_NAV_DEPTH = 1;
+
 const applyContentBorderRadius = (styles: BrandPageCssStyle | undefined) => {
   return {
     ...styles,
@@ -988,6 +996,69 @@ export const mapToBookingSectionViewModel = (
   );
 };
 
+// Recursively build the nav item view model for each page/sub page in the nav
+const buildNavItemViewModel = (
+  order: NavOrder,
+  routes: NavRoute[],
+  parentPath: string,
+  isFirstPage: boolean,
+  brandPageSlug?: string,
+  isCustomDomain?: boolean,
+  depth = 0,
+): NavItemViewModel => {
+  const route = routes.find((r) => r.id === order.routeId);
+  const pageSlug = route?.pageSlug ?? '';
+  const relativePath = parentPath ? `${parentPath}/${pageSlug}` : pageSlug;
+
+  return {
+    displayName: route?.displayName ?? '',
+    routeName: getRouteNameByPageIndex(
+      Boolean(isCustomDomain),
+      isFirstPage ? 0 : 9999,
+    ),
+    routeParams: getRouteParamsByPage(
+      Boolean(isCustomDomain),
+      brandPageSlug ?? '',
+      pageSlug,
+    ),
+    relativePath,
+    isHidden: route?.isHidden ?? false,
+    nestedNavItems:
+      depth >= MAX_SUB_NAV_DEPTH
+        ? []
+        : order.subRoutes.map((subRoute) =>
+            buildNavItemViewModel(
+              subRoute,
+              routes,
+              relativePath,
+              false,
+              brandPageSlug,
+              isCustomDomain,
+              depth + 1,
+            ),
+          ),
+  };
+};
+
+export const mapToNavViewModel = (
+  nav: NavModel,
+  brandPageSlug?: string,
+  isCustomDomain?: boolean,
+): NavViewModel => {
+  return {
+    navItems: nav.orders.map((order, idx) =>
+      buildNavItemViewModel(
+        order,
+        nav.routes,
+        '',
+        idx === 0,
+        brandPageSlug,
+        isCustomDomain,
+      ),
+    ),
+  };
+};
+
 export const mapToPageStyleViewModel = (
   pageStyles: PageStyles,
   options: ViewModelMappingOptions,
@@ -1286,6 +1357,8 @@ export const mapToViewModel =
 
 interface ViewModelMappingOptions {
   useOldLogoRenderSize?: boolean;
+  isCustomDomain?: boolean;
+  brandPageSlug?: string;
   getVideoUrls?: (token: string) => {
     videoUrl: string;
     previewImageUrl: string;
@@ -1342,15 +1415,23 @@ export const getBrandPageViewModelFromBrandPageModel = (
     return {
       title: p.title,
       slug: p.slug,
+      id: p.id,
       contents,
       isHidden: Boolean(p?.isHidden),
     } as PageViewModel;
   });
 
+  const nav = mapToNavViewModel(
+    model.nav,
+    options.brandPageSlug,
+    options.isCustomDomain,
+  );
+
   return {
     brandPageToken,
     pages,
     showBrandCrowdLogo,
+    nav,
     styles: mapToPageStyleViewModel(model.styles, options),
     headerViewModelDesktop: mapToPageHeaderViewModel(
       model.pageHeaderDesktop,

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

@@ -77,6 +77,7 @@ export interface ContentViewModel {
 }
 
 export interface PageViewModel {
+  id: string;
   title: string;
   slug: string;
   contents: ContentViewModel[];
@@ -303,11 +304,43 @@ export interface PageStylesViewModel {
   galleryStyles: GalleryStyles; // TODO(jyao): Convert to view model
 }
 
+export interface NavRouteViewModel {
+  id: string;
+  pageId: string;
+  route: string;
+}
+
+export interface NavOrderViewModel {
+  routeId: string;
+  isHidden: boolean;
+  fullPath: string;
+  subRoutes: NavOrderViewModel[];
+}
+
+export interface NavItemRouteParams {
+  slug: string;
+  pageSlug?: string;
+}
+
+export interface NavItemViewModel {
+  displayName: string;
+  routeName: string;
+  routeParams: NavItemRouteParams;
+  isHidden: boolean;
+  relativePath: string;
+  nestedNavItems: NavItemViewModel[]; // For sub navigation
+}
+
+export interface NavViewModel {
+  navItems: NavItemViewModel[];
+}
+
 export interface BrandPageViewModel {
   brandPageToken?: string;
   showBrandCrowdLogo: boolean;
   styles: PageStylesViewModel;
   pages: PageViewModel[];
+  nav: NavViewModel;
   brandPageType: BrandPageType;
   headerViewModelDesktop: PageHeaderViewModel;
   headerViewModelMobile: PageHeaderViewModel;

package/src/brand-page-maker/assessors/banner-section-description-visibility.assessor.ts

@@ -1,15 +1,12 @@
-import type {
-  BannerSectionContent,
-  BookingSectionContent,
-} from '../../brand-page';
-import { BUTTON_LINK_TYPE } from '../../brand-page';
+import type { BannerSectionContent, BookingSectionContent } from '@brand-page';
+import { BUTTON_LINK_TYPE } from '@brand-page';
 import type { VisibilityAssessor } from '../models';
 import {
   ALIGN_CARD_CENTER_IMAGE,
   ALIGN_CARD_LEFT_IMAGE,
   ALIGN_LEFT_BIG_IMAGE,
   BIG_IMAGE,
-} from '../../brand-page/constants';
+} from '@brand-page/constants';
 
 export const bannerSectionUrlVisibilityAssessor: VisibilityAssessor<
   BannerSectionContent | BookingSectionContent | undefined

package/src/brand-page-maker/assessors/banner-section-field.assessor.ts

@@ -1,7 +1,4 @@
-import type {
-  BannerSectionContent,
-  BookingSectionContent,
-} from '../../brand-page';
+import type { BannerSectionContent, BookingSectionContent } from '@brand-page';
 import type {
   FieldTypeAssessor,
   ItemFieldType,

package/src/brand-page-maker/assessors/brand-page-type-visibility.assessor.ts

@@ -1,4 +1,4 @@
-import type { BrandPageContext } from '../../brand-page';
+import type { BrandPageContext } from '@brand-page';
 import type { VisibilityAssessor } from '../models';
 
 export const brandPageTypeVisibilityAssessor: VisibilityAssessor<

package/src/brand-page-maker/assessors/card-fill-visibility.assessor.ts

@@ -1,4 +1,4 @@
-import type { TestimonialSectionContent } from '../../brand-page';
+import type { TestimonialSectionContent } from '@brand-page';
 import type { VisibilityAssessor } from '../models';
 
 export const cardFillVisibilityAssessor: VisibilityAssessor<

package/src/brand-page-maker/assessors/color-replacement-icon-visibility.assessor.ts

@@ -1,4 +1,4 @@
-import type { ButtonContent } from '../../brand-page';
+import type { ButtonContent } from '@brand-page';
 import type { VisibilityAssessor } from '../models';
 
 export const colorReplacementIconVisibilityTypeAssessor: VisibilityAssessor<

package/src/brand-page-maker/assessors/color-replacement-profile-visibility.assessor.ts

@@ -1,4 +1,4 @@
-import type { ProfileContent } from '../../brand-page';
+import type { ProfileContent } from '@brand-page';
 import type { VisibilityAssessor } from '../models';
 
 export const colorReplacementProfileVisibilityTypeAssessor: VisibilityAssessor<

package/src/brand-page-maker/assessors/color-replacement-visibility.assessor.ts

@@ -2,7 +2,7 @@ import type {
   AboutSectionContent,
   BannerSectionContent,
   ContactFormContent,
-} from '../../brand-page';
+} from '@brand-page';
 import type { VisibilityAssessor } from '../models';
 
 export const colorReplacementVisibilityTypeAssessor: VisibilityAssessor<

package/src/brand-page-maker/assessors/contact-form-visibility.assessor.ts

@@ -1,4 +1,4 @@
-import { type ContactFormContent } from '../../brand-page';
+import { type ContactFormContent } from '@brand-page';
 import type { VisibilityAssessor } from '../models';
 import {
   ALIGN_CARD_CENTER,
@@ -7,7 +7,7 @@ import {
   ALIGN_LEFT_FULL_IMAGE,
   ALIGN_RIGHT_FULL_IMAGE,
   TEXT_ONLY,
-} from '../../brand-page/constants';
+} from '@brand-page/constants';
 
 export const contactCardDisplayTypeVisibilityAssessor: VisibilityAssessor<
   ContactFormContent | undefined

package/src/brand-page-maker/assessors/divider-toggle-field-visibility.assessor.ts

@@ -1,4 +1,4 @@
-import type { DividerSectionContent } from '../../brand-page';
+import type { DividerSectionContent } from '@brand-page';
 import type { VisibilityAssessor } from '../models';
 
 export const dividerToggleFieldVisibilityAssessor: VisibilityAssessor<

package/src/brand-page-maker/assessors/image-field-visability.assessor.ts

@@ -1,4 +1,4 @@
-import type { ImageContent } from '../../brand-page';
+import type { ImageContent } from '@brand-page';
 import type { VisibilityAssessor } from '../models';
 
 export const imageFieldVisibilityAssessor: VisibilityAssessor<

package/src/brand-page-maker/assessors/image-gallery-field-visibility.assessor.ts

@@ -1,4 +1,4 @@
-import type { ImageGalleryContent } from '../../brand-page';
+import type { ImageGalleryContent } from '@brand-page';
 import type { VisibilityAssessor } from '../models';
 
 export const imageGalleryFieldVisibilityAssessor: VisibilityAssessor<

package/src/brand-page-maker/assessors/image-option-visibility.assessor.ts

@@ -1,4 +1,4 @@
-import type { RequestPaymentContent, ShopContent } from '../../brand-page';
+import type { RequestPaymentContent, ShopContent } from '@brand-page';
 import type { VisibilityAssessor } from '../models';
 
 export const imageOptionVisibilityAssessor: VisibilityAssessor<

package/src/brand-page-maker/assessors/images-section-aspect-ratio-visibility.assessor.ts

@@ -1,7 +1,7 @@
-import type { ImagesSectionContent } from '../../brand-page';
-import { shouldShowAspectRatioByDisplayStyle } from '../../brand-page/utils';
+import type { ImagesSectionContent } from '@brand-page';
+import { shouldShowAspectRatioByDisplayStyle } from '@brand-page/utils';
 import type { VisibilityAssessor } from '../models';
-import { useBrandPageMakerStore } from '../../brand-page-maker/stores';
+import { useBrandPageMakerStore } from '@brand-page-maker/stores';
 
 export const imagesSectionAspectRatioVisibilityAssessor: VisibilityAssessor<
   ImagesSectionContent | undefined

package/src/brand-page-maker/assessors/images-section-card-style-visibility.assessor.ts

@@ -1,8 +1,5 @@
-import type {
-  ImagesSectionContent,
-  ShapesSectionContent,
-} from '../../brand-page';
-import { ALIGN_CARD_CENTER_IMAGE } from '../../brand-page';
+import type { ImagesSectionContent, ShapesSectionContent } from '@brand-page';
+import { ALIGN_CARD_CENTER_IMAGE } from '@brand-page';
 import type { VisibilityAssessor } from '../models';
 
 export const imagesSectionCardStyleVisibilityAssessor: VisibilityAssessor<

package/src/brand-page-maker/assessors/images-section-text-style-visibility.assessor.ts

@@ -2,8 +2,8 @@ import type {
   AboutSectionContent,
   ImagesSectionContent,
   ShapesSectionContent,
-} from '../../brand-page';
-import { MEDIA_ONLY } from '../../brand-page/constants';
+} from '@brand-page';
+import { MEDIA_ONLY } from '@brand-page/constants';
 import type { VisibilityAssessor } from '../models';
 
 export const imagesSectionTextStyleVisibilityAssessor: VisibilityAssessor<

package/src/brand-page-maker/assessors/logo-field-visibility.assessor.ts

@@ -1,4 +1,4 @@
-import type { LogoContent } from '../../brand-page';
+import type { LogoContent } from '@brand-page';
 import type { VisibilityAssessor } from '../models';
 
 export const logoFieldVisibilityAssessor: VisibilityAssessor<

package/src/brand-page-maker/assessors/media-section-items-field.assessor.ts

@@ -1,8 +1,5 @@
-import type {
-  ImagesSectionContent,
-  ShapesSectionContent,
-} from '../../brand-page';
-import { MEDIA_ONLY } from '../../brand-page/constants';
+import type { ImagesSectionContent, ShapesSectionContent } from '@brand-page';
+import { MEDIA_ONLY } from '@brand-page/constants';
 import type { FieldTypeAssessor, ItemFieldType } from '../models';
 
 export const mediaSectionItemsFieldTypeAssessor: FieldTypeAssessor<

package/src/brand-page-maker/assessors/personalisation-visibility.assessor.ts

@@ -1,5 +1,5 @@
-import { isTextContent } from '../../brand-page/utils';
-import { BRAND_PAGE_TYPES, type Content } from '../../brand-page';
+import { isTextContent } from '@brand-page/utils';
+import { BRAND_PAGE_TYPES, type Content } from '@brand-page';
 import type { VisibilityAssessor } from '../models';
 
 // Accepts an optional third parameter for the target property key

package/src/brand-page-maker/assessors/shape-section-items-field.assessor.ts

@@ -1,8 +1,5 @@
-import type {
-  ImagesSectionContent,
-  ShapesSectionContent,
-} from '../../brand-page';
-import { MEDIA_ONLY } from '../../brand-page/constants';
+import type { ImagesSectionContent, ShapesSectionContent } from '@brand-page';
+import { MEDIA_ONLY } from '@brand-page/constants';
 import type { FieldTypeAssessor, ItemFieldType } from '../models';
 
 export const shapeSectionItemsFieldTypeAssessor: FieldTypeAssessor<

package/src/brand-page-maker/assessors/shape-size-visibility.assessor.ts

@@ -1,4 +1,4 @@
-import type { AboutSectionContent } from '../../brand-page';
+import type { AboutSectionContent } from '@brand-page';
 import type { VisibilityAssessor } from '../models';
 
 export const shapeSizeVisibilityTypeAssessor: VisibilityAssessor<

package/src/brand-page-maker/assessors/shop-item-color-visibility.assessor.ts

@@ -1,4 +1,4 @@
-import type { ShopContent } from '../../brand-page';
+import type { ShopContent } from '@brand-page';
 import type { VisibilityAssessor } from '../models';
 
 export const shopItemColorVisibility: VisibilityAssessor<ShopContent> = (

package/src/brand-page-maker/components/action-bar/ActionBar.mixin.ts

@@ -2,7 +2,7 @@ import { EVENTS } from '../../../constants/brand-page-maker';
 import {
   useBrandPageMakerUserStore,
   useBrandPageMakerStore,
-} from '../../stores';
+} from '@brand-page-maker/stores';
 import { computed, defineComponent } from 'vue';
 import { UPGRADE_CTA_LOCATIONS } from './../../composables/useEventTracker';
 

package/src/brand-page-maker/components/action-bar/ActionBar.vue

@@ -23,7 +23,7 @@
 <script>
 import { Button } from '@designcrowd/fe-shared-lib';
 import ActionBarMixin from './ActionBar.mixin.ts';
-import { actionBarTr } from '../../../composables/useTranslate';
+import { actionBarTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/brand-page-maker/components/action-bar/ActionBarNavigation.vue

@@ -30,7 +30,7 @@
 <script>
 import { Button } from '@designcrowd/fe-shared-lib';
 import ActionBarMixin from './ActionBar.mixin.ts';
-import { actionBarTr } from '../../../composables/useTranslate';
+import { actionBarTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/brand-page-maker/components/admin-background-settings/AdminBackgroundSettings.mixin.ts

@@ -1,15 +1,15 @@
 import { computed, defineComponent } from 'vue';
-import type { BackgroundStylesConfigOption } from '../../models/background-styles-config';
-import { BackgroundStylesConfigOptions } from '../../models/background-styles-config';
-import { STYLE_THEME_KEYS } from '../../../brand-page/constants';
-import { useUiBackgroundSettingsStore } from '../../../shared/background-settings/store';
+import type { BackgroundStylesConfigOption } from '@brand-page-maker/models/background-styles-config';
+import { BackgroundStylesConfigOptions } from '@brand-page-maker/models/background-styles-config';
+import { STYLE_THEME_KEYS } from '@brand-page/constants';
+import { useUiBackgroundSettingsStore } from '@shared/background-settings/store';
 import { assertUnreachable, isAnEvent } from '../../../helpers/ts.helper';
-import { isColorMatched } from '../../utils';
+import { isColorMatched } from '@brand-page-maker/utils';
 import type {
   UserMediaItem,
   UserMediaItemWithDimensions,
 } from 'src/shared/my-uploads/models';
-import { useUiStore } from '../../stores';
+import { useUiStore } from '@brand-page-maker/stores';
 
 interface BackgroundShapePosition {
   name: string;