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

package/src/brand-page-maker/stores/brandpage-container/brand-page-container-store.ts

@@ -11,33 +11,36 @@ import {
   useVideoStore,
   type LogoDraftAsset,
   type LogoTemplateAsset,
-} from '../../stores';
-import { SIDE_BAR_TAB_NAMES } from '../../constants';
-import type { CustomDomainConfigModel, CustomDomainModel } from '../../models';
+} from '@brand-page-maker/stores';
+import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
+import type {
+  CustomDomainConfigModel,
+  CustomDomainModel,
+} from '@brand-page-maker/models';
 import {
   BRAND_PAGE_TYPES,
   SENSITIVE_CONTENT_TYPES,
   getAbTestResults,
   getValueType,
   type LogoContent,
-} from '../../../brand-page';
-import { isLogoContent } from '../../../brand-page/utils';
-import { useUiEditableLogoStore } from '../../../shared/logo-settings/store';
+} from '@brand-page';
+import { isLogoContent } from '@brand-page/utils';
+import { useUiEditableLogoStore } from '@shared/logo-settings/store';
 import uniq from 'lodash.uniq';
 import cloneDeep from 'lodash.clonedeep';
-import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/shop-settings-store';
+import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
 import {
   TRIGGER_TYPE,
   UPGRADE_CTA_LOCATIONS,
   useEventTracker,
   EVENTS,
-} from '../../composables/useEventTracker';
-import { navigationTr } from '../../../composables/useTranslate';
-import type { WebsiteSlugCheckResponse } from '../../../brand-page-maker/models/api.model';
-import { errorTr, constantsTr } from '../../../composables/useTranslate';
+} from '@brand-page-maker/composables/useEventTracker';
+import { navigationTr } from '@src/composables/useTranslate';
+import type { WebsiteSlugCheckResponse } from '@brand-page-maker/models/api.model';
+import { errorTr, constantsTr } from '@src/composables/useTranslate';
 import { findValuesByKey } from '../../../helpers/ts.helper';
 import { WEBSITE_UPGRADE_CONTEXT_TYPES } from '@designcrowd/fe-shared-lib';
-import { useUiTemplateSettingsStore } from '../../../shared/template-settings/store';
+import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
 
 export type WebsiteContextUpgradeType =
   keyof typeof WEBSITE_UPGRADE_CONTEXT_TYPES;

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store-utils.ts

@@ -1,7 +1,7 @@
-import { CONTENT_SETTINGS_CONFIGS } from '../../constants';
+import { CONTENT_SETTINGS_CONFIGS } from '@brand-page-maker/constants';
 import type { UIUserFeatures } from '../../../constants/ui';
-import { mapContentSettingsConfigToAddContentOption } from '../../utils';
-import { useUiContentSettingsStore } from '../../../shared/content-settings/store';
+import { mapContentSettingsConfigToAddContentOption } from '@brand-page-maker/utils';
+import { useUiContentSettingsStore } from '@shared/content-settings/store';
 import { useBrandPageMakerUserStore } from '../user';
 import { useBrandPageMakerStore } from './brandpage-maker-store';
 

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.test.ts

@@ -12,7 +12,7 @@ import {
   type LogoTheme,
   type PageStyles,
   VIEWPORTS,
-} from '../../../brand-page';
+} from '@brand-page';
 import {
   DEFAULT_LOGO_HEIGHT,
   DEFAULT_LOGO_WIDTH,
@@ -26,22 +26,22 @@ import {
   TEXT_STYLE_TYPES,
   TextStyleOption,
   TextStyles,
-} from '../../../brand-page';
-import { useUiStyleSettingsStore } from '../../../shared/style-settings/store';
+} from '@brand-page';
+import { useUiStyleSettingsStore } from '@shared/style-settings/store';
 import { faker } from '@faker-js/faker';
 import {
   applyLogoThemeToBrandPageStyles,
   getColorShades,
-} from '../../../brand-page/utils';
+} from '@brand-page/utils';
 import { createPinia, setActivePinia } from 'pinia';
 import { useBrandPageMakerStore } from './index';
-import { useUiBackgroundSettingsStore } from '../../../shared/background-settings/store';
+import { useUiBackgroundSettingsStore } from '@shared/background-settings/store';
 import { useBrandPageMakerUserStore } from '../user';
 import { useBrandPageContainerStore } from '../brandpage-container';
-import { useUiTemplateSettingsStore } from '../../../shared/template-settings/store';
-import { PAGE_SECTIONS } from '../../../shared/page-settings/models';
+import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
+import { PAGE_SECTIONS } from '@shared/page-settings/models';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
-import { setLocaleAsync } from '../../../../src/composables/useTranslate';
+import { setLocaleAsync } from '@src/composables/useTranslate';
 
 const createInitialisePayload = () => {
   const initialisePayload = {
@@ -147,7 +147,7 @@ describe('brand page maker store module', () => {
     };
 
     await store.initialisePages({
-      pages: [{ title: '', slug: '', contents: [contactFormContent] }],
+      pages: [{ id: '', title: '', slug: '', contents: [contactFormContent] }],
       sections: {
         [PAGE_SECTIONS.header]: {
           [VIEWPORTS.desktop]: new PageHeaderDesktop(),
@@ -190,7 +190,7 @@ describe('brand page maker store module', () => {
     };
 
     await store.initialisePages({
-      pages: [{ title: '', slug: '', contents: [contactFormContent] }],
+      pages: [{ id: '', title: '', slug: '', contents: [contactFormContent] }],
       sections: {
         [PAGE_SECTIONS.header]: {
           [VIEWPORTS.desktop]: new PageHeaderDesktop(),

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.ts

@@ -9,12 +9,12 @@ import type {
   ViewportsType,
   SensitiveContent,
   SaveContactOptions,
-} from '../../../brand-page';
+} from '@brand-page';
 import {
   EMPTY_LOGO_IMAGE_MODEL,
   SENSITIVE_CONTENT_TYPES,
   VIEWPORTS,
-} from '../../../brand-page';
+} from '@brand-page';
 import {
   BackgroundStyles,
   BRAND_PAGE_TYPES,
@@ -22,25 +22,27 @@ import {
   CONTENT_TYPES,
   NavigationDesktop,
   NavigationMobile,
-} from '../../../brand-page';
+  NavModel,
+} from '@brand-page';
 import type {
   DesignTemplateType,
   InitialCategories,
   TemplateCategory,
-} from '../../../shared/template-settings/models';
+} from '@shared/template-settings/models';
 import type { UserFeatures } from '../user';
 import { useBrandPageMakerUserStore } from '../user';
 import { defineStore } from 'pinia';
 import { useUiStore } from '../ui';
-import type { LogoSettingsState } from '../../../shared/logo-settings/store';
+import type { LogoSettingsState } from '@shared/logo-settings/store';
 import {
   useUiLogoSettingsStore,
   useUiEditableLogoStore,
-} from '../../../shared/logo-settings/store';
-import { useUiStyleSettingsStore } from '../../../shared/style-settings/store';
-import { useUiNavigationStyleSettingsStore } from '../../../shared/navigation-style-settings/store';
-import { useUiBackgroundSettingsStore } from '../../../shared/background-settings/store';
-import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/shop-settings-store';
+} from '@shared/logo-settings/store';
+import { useUiStyleSettingsStore } from '@shared/style-settings/store';
+import { useUiNavigationStyleSettingsStore } from '@shared/navigation-style-settings/store';
+import { useUiBackgroundSettingsStore } from '@shared/background-settings/store';
+import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
+import { usePageNavigationStore } from '@shared/page-navigation/store/page-navigation-store';
 import {
   applyLogoThemeToBrandPageModel,
   migrateBrandPageModel,
@@ -50,53 +52,53 @@ import {
   parseLogoThemeToCssStyles,
   logoUtil,
   GetLatestModelVersion,
-} from '../../../brand-page/utils';
+} from '@brand-page/utils';
 import { navigateToPageBySlug } from '../../routing';
 import {
   BRANDPAGE_DEFAULT_ERROR_MESSAGE_DESCRIPTION,
   BRANDPAGE_DEFAULT_SAVE_MESSAGE_DESCRIPTION,
   MAKER_MOBILE_BREAKPOINT,
   MESSAGE_VISIBLE_DURATION,
-} from '../../constants';
-import { useUiSideBarStore } from '../../../shared/side-bar/store';
+} from '@brand-page-maker/constants';
+import { useUiSideBarStore } from '@shared/side-bar/store';
 import { delayInMS } from '../../../utils/ui-util';
-import { useUiContentSettingsStore } from '../../../shared/content-settings/store';
+import { useUiContentSettingsStore } from '@shared/content-settings/store';
 import { setContentSettingsAddContentOptions } from './brandpage-maker-store-utils';
-import type { BackgroundSetStatePayload } from '../../../shared/background-settings/models';
+import type { BackgroundSetStatePayload } from '@shared/background-settings/models';
 import type { AdminPreviewLogoTemplateModel } from '../admin-logo-settings';
 import { useAdminLogoSettingsStore } from '../admin-logo-settings';
-import type { PageSettingsStateSections } from '../../../shared/page-settings/store';
-import { useUiPageSettingsStore } from '../../../shared/page-settings/store';
+import type { PageSettingsStateSections } from '@shared/page-settings/store';
+import { useUiPageSettingsStore } from '@shared/page-settings/store';
 import {
   mapBrandPageContentToContentSettingsItem,
   removeContentFieldValues,
   removeLogoTemplateModel,
   validateContents,
-} from '../../utils';
+} from '@brand-page-maker/utils';
 import type {
   ContentItem,
   FieldSettingsBase,
-} from '../../../shared/content-settings/models';
+} from '@shared/content-settings/models';
 import {
   type LogoDesignAttributesModel,
   UI_DEVICE_MODES,
   UI_SCREENSIZE_MODES,
-} from '../../../shared/models';
-import { PAGE_SECTIONS } from '../../../shared/page-settings/models';
-import { useUiTemplateSettingsStore } from '../../../shared/template-settings/store';
+} from '@shared/models';
+import { PAGE_SECTIONS } from '@shared/page-settings/models';
+import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
 import { useBrandPageContainerStore } from '../brandpage-container';
 import { useLocalisedRouteStore } from '../route/localised-route-store';
 import cloneDeep from 'lodash.clonedeep';
 import * as uuid from 'uuid';
-import { getAiContentIndexByTemplateTokenAndNumberOfVariations } from '../../utils/ai-content-selection.util';
+import { getAiContentIndexByTemplateTokenAndNumberOfVariations } from '@brand-page-maker/utils/ai-content-selection.util';
 import {
   applyLogoTemplateImageToBrandPageTemplateModel,
   recalculateLogoContentDimensions,
   recalculateHeaderLogoSizes,
-} from '../../../brand-page/utils/logo.util';
-import type { ShopConfigData } from '../../../brand-page/models/shop.model';
-import { useConsent } from '../../../brand-page/composables/consent.composable';
-import { commonTr, errorTr } from '../../../composables/useTranslate';
+} from '@brand-page/utils/logo.util';
+import type { ShopConfigData } from '@brand-page/models/shop.model';
+import { useConsent } from '@brand-page/composables/consent.composable';
+import { commonTr, errorTr } from '@src/composables/useTranslate';
 import { UPGRADE_CTA_LOCATIONS } from '../../composables/useEventTracker';
 import { useVideoStore } from '../video';
 import { findValuesByKey } from '../../../helpers/ts.helper';
@@ -531,6 +533,10 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       brandPageModel.pageFooterMobile = model.pageFooterMobile;
       brandPageModel.pages = model.pages;
 
+      const pageNavigationStore = usePageNavigationStore();
+
+      pageNavigationStore.setNav({ nav: brandPageModel.nav });
+
       navigationStyleSettingsStore.initialise({ reset: true });
 
       styleSettingsStore.initialise({
@@ -1021,6 +1027,10 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             brandPageModel.cookieOptions?.isCookiePreviewEnabled,
         });
 
+        const pageNavigationStore = usePageNavigationStore();
+
+        pageNavigationStore.setNav({ nav: brandPageModel.nav });
+
         this.setSavingEnabled({
           isSavingEnabled:
             brandPageModel.saveContactSettings?.isSavingEnabled ?? true,
@@ -1258,6 +1268,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const styleSettingsStore = useUiStyleSettingsStore();
       const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
       const shopStore = useShopConfigStore();
+      const pageNavigationStore = usePageNavigationStore();
 
       const pages = pageSettingsStore.pages.map((p) => ({
         ...p,
@@ -1271,7 +1282,9 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const buttonStyles = styleSettingsStore.buttonStyles;
       const textStyles = styleSettingsStore.textStyles;
       const galleryStyles = styleSettingsStore.galleryStyles;
-      const navigation = navigationStyleSettingsStore.navigation;
+      const navigation = navigationStyleSettingsStore.navigation; // This is not referring to the sub nav structure
+
+      const pageNavStructure = pageNavigationStore.nav;
 
       return {
         v: GetLatestModelVersion(),
@@ -1308,6 +1321,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
         cookieOptions: this.cookieOptions,
         saveContactSettings: this.saveContactSettings,
         paymentConfig: shopStore.paymentConfig,
+        nav: pageNavStructure,
       };
     },
     brandPageToken(): string | undefined {
@@ -1405,6 +1419,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const userStore = useBrandPageMakerUserStore();
       const uiStore = useUiStore();
       const videoStore = useVideoStore();
+      const brandPageContainerStore = useBrandPageContainerStore();
 
       if (userStore.isAdmin && uiStore.logoTheme) {
         const themedBrandPage = applyLogoThemeToBrandPageModel(
@@ -1421,6 +1436,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             getVideoUrls: videoStore.getVideoUrlsForToken,
             getS3VideoUrls: videoStore.getOptimisedS3VideoUrlsForToken,
             setVideoUrlsWithToken: videoStore.setVideoUrlsWithToken,
+            isCustomDomain: brandPageContainerStore.isCustomDomainEnabled,
+            brandPageSlug: brandPageContainerStore.brandPageSlug,
           },
         );
       }
@@ -1448,6 +1465,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             getVideoUrls: videoStore.getVideoUrlsForToken,
             getS3VideoUrls: videoStore.getOptimisedS3VideoUrlsForToken,
             setVideoUrlsWithToken: videoStore.setVideoUrlsWithToken,
+            isCustomDomain: brandPageContainerStore.isCustomDomainEnabled,
+            brandPageSlug: brandPageContainerStore.brandPageSlug,
           },
         );
       }
@@ -1461,6 +1480,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           getVideoUrls: videoStore.getVideoUrlsForToken,
           getS3VideoUrls: videoStore.getOptimisedS3VideoUrlsForToken,
           setVideoUrlsWithToken: videoStore.setVideoUrlsWithToken,
+          isCustomDomain: brandPageContainerStore.isCustomDomainEnabled,
+          brandPageSlug: brandPageContainerStore.brandPageSlug,
         },
       );
     },

package/src/brand-page-maker/stores/product-config/product-config-store.ts

@@ -4,9 +4,9 @@ import type {
   SkuModel,
   SkuVariantModel,
   VariantModel,
-} from '../../../brand-page/models/shop.model';
+} from '@brand-page/models/shop.model';
 import { v4 as uuid } from 'uuid';
-import { generateSku } from '../../../shared/ecommerce-settings/util/skuUtils';
+import { generateSku } from '@shared/ecommerce-settings/util/skuUtils';
 
 export interface ProductConfigState {
   productId: string;

package/src/brand-page-maker/stores/route/localised-route-store.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
-import { BRAND_PAGE_TYPES } from '../../../brand-page/models';
-import { interpolateUrl } from '../../utils/route.util';
+import { BRAND_PAGE_TYPES } from '@brand-page/models';
+import { interpolateUrl } from '@brand-page-maker/utils/route.util';
 import { useBrandPageContainerStore } from '../brandpage-container';
 
 const getLocalisedSlug = (defaultSlug: string, locale: string): string => {

package/src/brand-page-maker/stores/ui/ui-store.ts

@@ -5,21 +5,18 @@ import type {
   UIRootState,
   UIRootStateThirdPartySettings,
   UiScreenSizeMode,
-} from '../../../shared/models';
-import { UI_DEVICE_MODES, UI_SCREENSIZE_MODES } from '../../../shared/models';
+} from '@shared/models';
+import { UI_DEVICE_MODES, UI_SCREENSIZE_MODES } from '@shared/models';
 import {
   DEFAULT_LOGO_BACKGROUND_COLOR_RGB,
   DEFAULT_LOGO_TEXT_COLOR_RGB,
-} from '../../../brand-page/constants';
+} from '@brand-page/constants';
 import {
   useBrandPageMakerStore,
   type OnTemplateSelectedPayload,
 } from '../brandpage-maker';
 import { useBrandPageMakerUserStore } from '../user';
-import type {
-  LogoTheme,
-  UserPersonalisationContent,
-} from '../../../brand-page';
+import type { LogoTheme, UserPersonalisationContent } from '@brand-page';
 import {
   useBrandPageContainerStore,
   type WebsiteContextUpgradeType,
@@ -27,8 +24,8 @@ import {
 import {
   DEFAULT_ADMIN_ENDPOINTS,
   DEFAULT_USER_ENDPOINTS,
-} from '../../constants';
-import { getColorShades } from '../../../brand-page/utils';
+} from '@brand-page-maker/constants';
+import { getColorShades } from '@brand-page/utils';
 
 export const useUiStore = defineStore('ui', {
   state: (): UIRootState => ({

package/src/brand-page-maker/stores/user/user-store.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import type { UIUserState } from '../../../shared/models';
+import type { UIUserState } from '@shared/models';
 import type { UIUserFeatures } from '../../../constants/ui';
 
 export type UserFeatures = UIUserFeatures;

package/src/brand-page-maker/utils/content-settings.util.ts

@@ -2,15 +2,15 @@ import type {
   AddContentOption,
   ContentItem,
   ContentItemFieldSettings,
-} from '../../shared/content-settings/models';
+} from '@shared/content-settings/models';
 import type {
   ContentSettingsConfig,
   CreateInitialContentOptions,
 } from '../models';
-import { SENSITIVE_CONTENT_TYPES, type Content } from '../../brand-page';
-import { RESERVED_FIELD_NAMES } from '../../shared/content-settings/constants';
+import { SENSITIVE_CONTENT_TYPES, type Content } from '@brand-page';
+import { RESERVED_FIELD_NAMES } from '@shared/content-settings/constants';
 import { CONTENT_SETTINGS_CONFIGS } from '../constants';
-import type { UIUserFeatures } from '../../constants/ui';
+import type { UIUserFeatures } from '@src/constants/ui';
 
 export const mapContentSettingsConfigToAddContentOption =
   (features: UIUserFeatures) =>

package/src/brand-page-maker/utils/content.util.test.ts

@@ -9,7 +9,7 @@ describe('content.util', () => {
 //   validateBannerInternalPage,
 //   validateGeneralLinkInternalPage,
 // } from './content.util';
-// import type { ContentPage } from '../../shared/page-settings/models';
+// import type { ContentPage } from '@shared/page-settings/models';
 // import type { BannerSectionContent, GeneralLinkContent } from '../../lib';
 // import { BUTTON_LINK_TYPE } from '../../lib';
 // import {

package/src/brand-page-maker/utils/content.util.ts

@@ -1,12 +1,12 @@
-import type { ContentPage } from '../../shared/page-settings/models';
+import type { ContentPage } from '@shared/page-settings/models';
 import type {
   BannerSectionContent,
   Content,
   GeneralLinkContent,
-} from '../../brand-page';
-import { BUTTON_LINK_TYPE } from '../../brand-page';
-import { ADMIN_DISALLOWED_FIELD_NAMES } from '../../shared/content-settings/constants';
-import { isLogoContent } from '../../brand-page/utils';
+} from '@brand-page';
+import { BUTTON_LINK_TYPE } from '@brand-page';
+import { ADMIN_DISALLOWED_FIELD_NAMES } from '@shared/content-settings/constants';
+import { isLogoContent } from '@brand-page/utils';
 
 export const removeContentFieldValues = (content: Content): Content => {
   const result = JSON.parse(JSON.stringify(content)) as Content;

package/src/brand-page-maker/utils/index.ts

@@ -1,4 +1,4 @@
-import { STYLE_THEME_KEYS } from '../../brand-page/constants';
+import { STYLE_THEME_KEYS } from '@brand-page/constants';
 
 export * from './content-settings.util';
 export * from './brandpage-meta.util';

package/src/brand-page-maker/utils/rich-text-editor.util.test.ts

@@ -9,7 +9,7 @@ import {
   sanitiseClientSideRTE,
   getRTEColor,
 } from './rich-text-editor.util';
-import type { TextStyleDeclaration } from '../../brand-page';
+import type { TextStyleDeclaration } from '@brand-page';
 
 describe('isStyleChanged', () => {
   it('returns false if skipStyleDetection meta is true', () => {

package/src/brand-page-maker/utils/rich-text-editor.util.ts

@@ -12,11 +12,11 @@ import {
   type TextContent,
   type TextStyleDeclaration,
   type TextStyleType,
-} from '../../brand-page';
-import type { PageSettingsState } from '../../shared/page-settings/store';
-import type { StyleSettingsState } from '../../shared/style-settings/store';
-import { ESCAPED_NEWLINE_CHARACTER } from '../../constants/ui';
-import { getRenderText } from '../../brand-page/utils';
+} from '@brand-page';
+import type { PageSettingsState } from '@shared/page-settings/store';
+import type { StyleSettingsState } from '@shared/style-settings/store';
+import { ESCAPED_NEWLINE_CHARACTER } from '@src/constants/ui';
+import { getRenderText } from '@brand-page/utils';
 import type { Mark } from 'prosemirror-model';
 import createDomPurify, { type DOMPurify } from 'dompurify';
 

package/src/brand-page-maker/validators/field.validator.ts

@@ -1,7 +1,7 @@
-import { isURL, isEmail, isTel } from '../../utils/validator.util';
-import type { ItemFieldType, Validator } from '../../brand-page-maker/models';
-import { YOUTUBE_URL_RE } from '../../brand-page-maker/utils';
-import { validatorTr } from '../../composables/useTranslate';
+import { isURL, isEmail, isTel } from '@utils/validator.util';
+import type { ItemFieldType, Validator } from '@brand-page-maker/models';
+import { YOUTUBE_URL_RE } from '@brand-page-maker/utils';
+import { validatorTr } from '@src/composables/useTranslate';
 
 const addressValueValidator: Validator = {
   validate: (name, value) => {

package/src/brand-page-maker/validators/section-button.validator.ts

@@ -1,11 +1,11 @@
-import { isEmail, isTel, isURL } from '../../utils/validator.util';
+import { isEmail, isTel, isURL } from '@utils/validator.util';
 import {
   BUTTON_LINK_TYPE,
   type BannerSectionContent,
   type BookingSectionContent,
-} from '../../brand-page/models';
+} from '@brand-page/models';
 import type { ContentValidator, ValidateResult } from '../models';
-import { validatorTr } from '../../composables/useTranslate';
+import { validatorTr } from '@src/composables/useTranslate';
 
 const MISSING_BUTTON_TEXT_MESSAGE = () => validatorTr('emptyStringMessage');
 const MISSING_BUTTON_URL_MESSAGE = () => validatorTr('invalidUrlMessage');

package/src/clients/ai-assistant-client.ts

@@ -1,5 +1,5 @@
 import axios, { type AxiosError } from 'axios';
-import { useBrandPageContainerStore } from '../brand-page-maker/stores/brandpage-container/brand-page-container-store';
+import { useBrandPageContainerStore } from '@brand-page-maker/stores/brandpage-container/brand-page-container-store';
 
 // Request types
 export interface AiAssistantMessage {

package/src/clients/asset-library-clients.ts

@@ -4,7 +4,7 @@ import type {
   ShapeCategoryModel,
   ShapeSearchResponseModel,
 } from '../models/shapeModels';
-import type { BrandPageData } from '../brand-page';
+import type { BrandPageData } from '@brand-page';
 
 export default class AssetLibraryClient {
   baseUrl: string;

package/src/clients/brand-page-client.ts

@@ -1,7 +1,7 @@
 import axios, { type AxiosInstance } from 'axios';
-import type { BrandPageType } from '../brand-page';
-import { BRAND_PAGE_TYPES } from '../brand-page';
-import type { WebsiteSlugCheckResponse } from '../brand-page-maker/models/api.model';
+import type { BrandPageType } from '@brand-page';
+import { BRAND_PAGE_TYPES } from '@brand-page';
+import type { WebsiteSlugCheckResponse } from '@brand-page-maker/models/api.model';
 import { getCurrentLocale } from '../composables/useTranslate';
 import type { BrandPageLogoDesignAttributesModel } from './fabric-render-client';
 

package/src/clients/user-media-client.test.ts

@@ -10,10 +10,10 @@ describe('user-media-client', () => {
 //   DELETE_USER_MEDIA_ENDPOINT,
 //   GET_ALL_USER_MEDIA_ENDPOINT,
 //   USER_POLICY_DATA_ENDPOINT,
-// } from '../brand-page-maker/constants';
-// import { mockApiCalls } from '../brand-page-maker/components/brand-page-maker/mock-api-calls';
+// } from '@brand-page-maker/constants';
+// import { mockApiCalls } from '@brand-page-maker/components/brand-page-maker/mock-api-calls';
 // import { getInstance } from './user-media-client';
-// import type { Endpoints } from '../shared/models';
+// import type { Endpoints } from '@shared/models';
 // import type { MediaFile } from './models';
 // import { MOCK_POLICY_DATA_RESPONSE } from '../__fixtures__/fixtures';
 //

package/src/clients/user-media-client.ts

@@ -1,9 +1,9 @@
 import axios from 'axios';
-import { getExtensionFromMimeType } from '../brand-page-maker/utils/file-extension.util';
+import { getExtensionFromMimeType } from '@brand-page-maker/utils/file-extension.util';
 import { v4 as uuidV4 } from 'uuid';
-import type { Endpoints } from '../shared/models';
+import type { Endpoints } from '@shared/models';
 import type { MediaFile, PolicyData } from './models';
-import type { UserMediaItem } from '../shared/my-uploads/models';
+import type { UserMediaItem } from '@shared/my-uploads/models';
 
 interface DeleteUserMediaResponse {
   success: boolean;

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

@@ -1,7 +1,7 @@
 export {
   DEFAULT_LOGO_TEXT_COLOR_RGB,
   DEFAULT_LOGO_BACKGROUND_COLOR_RGB,
-} from '../brand-page/constants';
+} from '@brand-page/constants';
 
 export const EVENTS = {
   Save: 'save',

package/src/shared/background-settings/components/BackgroundSettings.vue

@@ -102,7 +102,7 @@ import {
   useBrandPageMakerUserStore,
   useUiStore,
   useVideoStore,
-} from '../../../brand-page-maker/stores';
+} from '@brand-page-maker/stores';
 import { useUiBackgroundSettingsStore } from '../store';
 import SideBarSettingsHeader from '../../common/SideBarSettingsHeader.vue';
 import ShapeLibrary from '../../shape-library/ShapeLibrary.vue';
@@ -114,10 +114,10 @@ import {
   type GettyVideoMedia,
   MEDIA_TYPES,
   type PersonalisationRole,
-} from '../../../brand-page';
-import { backgroundSettingsTr } from '../../../composables/useTranslate';
+} from '@brand-page';
+import { backgroundSettingsTr } from '@src/composables/useTranslate';
 import ReplaceImageSettingsForBackgroundSettings from './ReplaceImageSettingsForBackgroundSettings.vue';
-import { useEventTracker } from '../../../brand-page-maker/composables/useEventTracker';
+import { useEventTracker } from '@brand-page-maker/composables/useEventTracker';
 
 const backgroundSettingsStore = useUiBackgroundSettingsStore();
 const userStore = useBrandPageMakerUserStore();

package/src/shared/background-settings/components/ReplaceImageSettingsForBackgroundSettings.vue

@@ -18,15 +18,15 @@
 </template>
 <script setup lang="ts">
 import { computed } from 'vue';
-import ReplaceImageBaseSettings from '../../../shared/content-settings/components/replace-image-base-settings/ReplaceImageBaseSettings.vue';
+import ReplaceImageBaseSettings from '@shared/content-settings/components/replace-image-base-settings/ReplaceImageBaseSettings.vue';
 import {
   GETTY_VIDEO_LIMIT_FOR_SITE,
   useBrandPageMakerStore,
   useBrandPageMakerUserStore,
   useVideoStore,
-} from '../../../brand-page-maker/stores';
+} from '@brand-page-maker/stores';
 import { useUiBackgroundSettingsStore } from '../store';
-import { BRANDPAGE_SETTINGS_MODES } from '../../../brand-page-maker/stores/brandpage-maker/brandpage-maker-store';
+import { BRANDPAGE_SETTINGS_MODES } from '@brand-page-maker/stores/brandpage-maker/brandpage-maker-store';
 import type {
   ReplaceImageSettingsBase,
   ReplaceImageSettingsTabId,
@@ -35,10 +35,10 @@ import type {
   MediaBaseSelectedPayload,
   UserMediaItemWithDimensions,
 } from '../../my-uploads/models';
-import { MEDIA_TYPES } from '../../../brand-page/models/brand-page-context.model';
-import { useUiContentSettingsStore } from '../../../shared/content-settings/store';
-import { videoLibraryTr } from '../../../composables/useTranslate';
-import { useEventTracker } from '../../../brand-page-maker/composables/useEventTracker';
+import { MEDIA_TYPES } from '@brand-page/models/brand-page-context.model';
+import { useUiContentSettingsStore } from '@shared/content-settings/store';
+import { videoLibraryTr } from '@src/composables/useTranslate';
+import { useEventTracker } from '@brand-page-maker/composables/useEventTracker';
 
 interface Props {
   mediaType?: string;