@designcrowd/library.brand-page 5.16.48 → 5.16.49

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;

package/src/shared/background-settings/components/background-color/BackgroundColorSettings.vue

@@ -26,14 +26,10 @@ import { computed, type PropType } from 'vue';
 import { HelloBar } from '@designcrowd/fe-shared-lib';
 import { useUiBackgroundSettingsStore } from '../../store';
 import ColorField from '../../../content-settings/components/color-field/ColorField.vue';
-import { isColorMatched } from '../../../../brand-page-maker/utils';
-import {
-  arrayToLinearGradient,
-  hexToRGBA,
-  RGBAtoHex,
-} from '../../../../utils/helpers';
-import { useBrandPageMakerUserStore } from '../../../../brand-page-maker/stores';
-import { backgroundSettingsTr } from '../../../../composables/useTranslate';
+import { isColorMatched } from '@brand-page-maker/utils';
+import { arrayToLinearGradient, hexToRGBA, RGBAtoHex } from '@utils/helpers';
+import { useBrandPageMakerUserStore } from '@brand-page-maker/stores';
+import { backgroundSettingsTr } from '@src/composables/useTranslate';
 
 // Props
 interface Props {

package/src/shared/background-settings/components/background-shapes/BackgroundShapeSettings.mixin.ts

@@ -2,10 +2,10 @@ import { defineComponent, computed } from 'vue';
 import { HelloBar } from '@designcrowd/fe-shared-lib';
 import { useUiBackgroundSettingsStore } from '../../store';
 import StyleSettingsSection from '../../../style-settings/components/StyleSettingsSection.vue';
-import ColorPicker from '../../../../brand-page-maker/components/color-palette/BpColorPicker.vue';
-import { hexToRGBA } from '../../../../utils/helpers';
-import { isColorMatched } from '../../../../brand-page-maker/utils';
-import { useBrandPageMakerUserStore } from '../../../../brand-page-maker/stores';
+import ColorPicker from '@brand-page-maker/components/color-palette/BpColorPicker.vue';
+import { hexToRGBA } from '@utils/helpers';
+import { isColorMatched } from '@brand-page-maker/utils';
+import { useBrandPageMakerUserStore } from '@brand-page-maker/stores';
 
 export default defineComponent({
   components: {

package/src/shared/background-settings/store/background-settings-store.ts

@@ -3,12 +3,12 @@ import type {
   BackgroundStyle,
   BackgroundStyles,
   PersonalisationRole,
-} from '../../../brand-page';
-import { GettyVideoMedia, PageStyles } from '../../../brand-page';
+} from '@brand-page';
+import { GettyVideoMedia, PageStyles } from '@brand-page';
 import {
   BRANDPAGE_SETTINGS_MODES,
   type BrandPageSettingsMode,
-} from '../../../brand-page-maker/stores/brandpage-maker/brandpage-maker-store';
+} from '@brand-page-maker/stores/brandpage-maker/brandpage-maker-store';
 import type {
   SetBackgroundShapeSettingsPayload,
   SetLogoColorsPayload,
@@ -20,7 +20,7 @@ import type {
 } from '../models';
 import { backgroundSettingsTabId } from '../models';
 import { defineStore } from 'pinia';
-import { useUiStore, useVideoStore } from '../../../brand-page-maker/stores';
+import { useUiStore, useVideoStore } from '@brand-page-maker/stores';
 import type {
   GettyVideoMediaSelectedPayload,
   MediaBaseSelectedPayload,

package/src/shared/color-picker/components/ColorPicker.mixin.ts

@@ -8,12 +8,9 @@ import {
   hexToRGB,
   arrayToLinearGradient,
   isRgbColor,
-} from '../../../utils/helpers';
-import {
-  normalizeColorToHex,
-  colorsMatch,
-} from '../../../brand-page/utils/style.util';
-import { colorPickerTr } from '../../../composables/useTranslate';
+} from '@utils/helpers';
+import { normalizeColorToHex, colorsMatch } from '@brand-page/utils/style.util';
+import { colorPickerTr } from '@src/composables/useTranslate';
 import { useUiStyleSettingsStore } from '../../style-settings/store';
 
 // Simple session storage for newColors (persists during browser session, clears on refresh)

package/src/shared/color-picker/components/ColorPickerSwatch.vue

@@ -13,7 +13,7 @@
 </template>
 <script>
 import ColorPickerSwatchMixin from './ColorPickerSwatch.mixin.ts';
-import { colorPickerTr } from '../../../composables/useTranslate';
+import { colorPickerTr } from '@src/composables/useTranslate';
 
 export default {
   mixins: [ColorPickerSwatchMixin],

package/src/shared/color-picker/constants.ts

@@ -1,5 +1,5 @@
 import type { ColorValue } from './models';
-import { hexToRGB } from '../../utils/helpers';
+import { hexToRGB } from '@utils/helpers';
 
 export const DEFAULT_COLORS: ColorValue[] = [
   hexToRGB('#000000'),

package/src/shared/common/SideBarSettingsHeader.vue

@@ -32,7 +32,7 @@
 </template>
 <script setup lang="ts">
 import { Button } from '@designcrowd/fe-shared-lib';
-import { tr, commonTr } from '../../composables/useTranslate';
+import { tr, commonTr } from '@src/composables/useTranslate';
 
 const props = defineProps({
   showBackButton: {

package/src/shared/confirm-modal/ConfirmModal.mixin.ts

@@ -1,6 +1,6 @@
 import { defineComponent, computed } from 'vue';
-import { useBrandPageContainerStore } from '../../brand-page-maker/stores';
-import { confirmModalTr } from '../../composables/useTranslate';
+import { useBrandPageContainerStore } from '@brand-page-maker/stores';
+import { confirmModalTr } from '@src/composables/useTranslate';
 
 export default defineComponent({
   props: {

package/src/shared/content-settings/components/GenericTextInput.mixin.ts

@@ -4,11 +4,8 @@ import debounce from 'lodash.debounce';
 import type { PropType } from 'vue';
 import { TextInput, Textarea } from '@designcrowd/fe-shared-lib';
 import type { ContentItemFieldSettings } from '../models';
-import {
-  escapeContentText,
-  unescapeContentText,
-} from '../../../brand-page/utils';
-import { genericTextInputTr } from '../../../composables/useTranslate';
+import { escapeContentText, unescapeContentText } from '@brand-page/utils';
+import { genericTextInputTr } from '@src/composables/useTranslate';
 
 const DEBOUNCE_WAIT_MS = 100;
 

package/src/shared/content-settings/components/booking-url-field/BookingUrlField.mixin.ts

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import { EVENTS } from '../../../../brand-page-maker/composables/useEventTracker';
+import { EVENTS } from '@brand-page-maker/composables/useEventTracker';
 
 export default defineComponent({
   data(): Record<string, any> {

package/src/shared/content-settings/components/booking-url-field/BookingUrlField.vue

@@ -10,8 +10,8 @@
 </template>
 <script>
 import BookingUrlFieldMixin from './BookingUrlField.mixin.js';
-import { bookingUrlFieldTr } from '../../../../composables/useTranslate.js';
-import { useEventTracker } from '../../../../brand-page-maker/composables/useEventTracker.js';
+import { bookingUrlFieldTr } from '@src/composables/useTranslate.js';
+import { useEventTracker } from '@brand-page-maker/composables/useEventTracker.js';
 import UrlField from '../url-field/UrlField.vue';
 
 export default {

package/src/shared/content-settings/components/button-configuration-field/ButtonConfigurationField.vue

@@ -85,10 +85,10 @@
           <PageDropdownField
             :id="`page-dropdown-${id}-${index}`"
             :name="`pageSlug-${id}-${index}`"
-            :value="buttonConfig.pageSlug || ''"
+            :value="buttonConfig.buttonPageId || ''"
             :placeholder="buttonConfigurationFieldTr('selectPage')"
             :attrs="{ 'data-test-tag': `pageSlug-${id}-${index}` }"
-            @update:model-value="onPageSlugChange"
+            @update:model-value="onButtonPageIdChange"
           />
         </div>
       </div>
@@ -105,13 +105,13 @@ import {
   textImageFieldTr as buttonConfigurationFieldTr,
   validatorTr,
   contentSettingsTr,
-} from '../../../../composables/useTranslate';
-import type { ButtonLinkType } from '../../../../brand-page';
+} from '@src/composables/useTranslate';
+import type { ButtonLinkType } from '@brand-page';
 import {
   MAX_DESCRIPTION_LENGTH,
   MAX_TITLE_LENGTH,
   BUTTON_LINK_TYPE,
-} from '../../../../brand-page';
+} from '@brand-page';
 import { isURL, isEmail, isTel } from '../../../../utils/validator.util';
 import { useUiPageSettingsStore } from '../../../page-settings/store';
 
@@ -120,7 +120,7 @@ interface ButtonConfig {
   buttonText: string | boolean;
   buttonLinkType: ButtonLinkType;
   url: string;
-  pageSlug: string;
+  buttonPageId: string;
 }
 
 interface Props {
@@ -256,11 +256,11 @@ const onLinkTypeChange = (option: any): void => {
   emitUpdate({ buttonLinkType: linkType as ButtonLinkType, url: '' });
 };
 
-const onPageSlugChange = (
+const onButtonPageIdChange = (
   payload: string | { id: string; name: string; value: string },
 ): void => {
-  const pageSlug = typeof payload === 'string' ? payload : payload.value;
-  emitUpdate({ pageSlug });
+  const buttonPageId = typeof payload === 'string' ? payload : payload.value;
+  emitUpdate({ buttonPageId });
 };
 
 const onButtonUrlChange = (

package/src/shared/content-settings/components/color-field/ColorField.vue

@@ -82,19 +82,15 @@ import {
   addTransparentAlphaChannelToHex,
   isHexTransparent,
   removeAlphaFromHex,
-} from '../../../../brand-page/utils/color.util';
-import type { ValueConvertor } from '../../../../brand-page-maker/models';
-import { isColorMatched } from '../../../../brand-page-maker/utils';
-import { STYLE_THEME_KEYS } from '../../../../brand-page';
-import type { LogoTheme } from '../../../../brand-page';
+} from '@brand-page/utils/color.util';
+import type { ValueConvertor } from '@brand-page-maker/models';
+import { isColorMatched } from '@brand-page-maker/utils';
+import { STYLE_THEME_KEYS } from '@brand-page';
+import type { LogoTheme } from '@brand-page';
 import { useUiBackgroundSettingsStore } from '../../../background-settings/store';
-import {
-  RGBAtoHex,
-  isRgbColor,
-  arrayToLinearGradient,
-} from '../../../../utils/helpers';
-import { colorFieldTr } from '../../../../composables/useTranslate';
-import ColorPalette from '../../../../brand-page-maker/components/color-palette/BpColorPalette.vue';
+import { RGBAtoHex, isRgbColor, arrayToLinearGradient } from '@utils/helpers';
+import { colorFieldTr } from '@src/composables/useTranslate';
+import ColorPalette from '@brand-page-maker/components/color-palette/BpColorPalette.vue';
 import debounce from 'lodash.debounce';
 import type { DebounceHandle } from 'lodash.debounce';
 

package/src/shared/content-settings/components/color-replacements-field/ColorReplacementsField.vue

@@ -73,13 +73,13 @@
 <script setup lang="ts">
 import { Toggle } from '@designcrowd/fe-shared-lib';
 import ColorField from '../../../content-settings/components/color-field/ColorField.vue';
-import { colorReplacementFieldTr } from '../../../../composables/useTranslate';
-import type { ColorReplacement, LogoTheme } from '../../../../brand-page';
+import { colorReplacementFieldTr } from '@src/composables/useTranslate';
+import type { ColorReplacement, LogoTheme } from '@brand-page';
 import { reactive, watch, computed } from 'vue';
-import { STYLE_THEME_KEYS } from '../../../../brand-page/constants';
+import { STYLE_THEME_KEYS } from '@brand-page/constants';
 import cloneDeep from 'lodash.clonedeep';
 import debounce from 'lodash.debounce';
-import { isColorMatched } from '../../../../brand-page-maker/utils';
+import { isColorMatched } from '@brand-page-maker/utils';
 import type { DebounceHandle } from 'lodash.debounce';
 import type { UpdateItemValuePayload } from '../../../content-settings/models';
 

package/src/shared/content-settings/components/content-settings/ContentSettings.mixin.ts

@@ -1,11 +1,8 @@
 import { defineComponent, computed } from 'vue';
 import type { AddContentOption, ContentItem } from '../../models';
-import type { Content } from '../../../../brand-page';
-import type { ItemCategory } from '../../../../brand-page-maker/models';
-import {
-  ITEM_CATEGORIES,
-  ITEM_CATEGORY_NAMES,
-} from '../../../../brand-page-maker/models';
+import type { Content } from '@brand-page';
+import type { ItemCategory } from '@brand-page-maker/models';
+import { ITEM_CATEGORIES, ITEM_CATEGORY_NAMES } from '@brand-page-maker/models';
 import { UI_EVENT_SOURCES } from '../../../models';
 import {
   PAGE_SETTINGS_SECTIONS,
@@ -16,20 +13,20 @@ import { CONTENT_SETTINGS_MODES } from '../../store';
 import {
   useBrandPageMakerStore,
   useBrandPageMakerUserStore,
-} from '../../../../brand-page-maker/stores';
+} from '@brand-page-maker/stores';
 import { SIDE_BAR_CONTENT_ID } from '../../constants';
 import type { ComponentPublicInstance } from '@vue/runtime-core';
 import {
   EVENTS,
   SELECT_LOCATIONS,
   useEventTracker,
-} from '../../../../brand-page-maker/composables/useEventTracker';
-import { useExternalRichTextEditor } from '../../../../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
+} from '@brand-page-maker/composables/useEventTracker';
+import { useExternalRichTextEditor } from '@brand-page-maker/composables/rich-text-editor/useRichTextEditor';
 import {
   switchAllContentToRTE,
   transformToRTE,
   RTE_ALLOWED_SECTION_TYPES,
-} from '../../../../brand-page-maker/utils';
+} from '@brand-page-maker/utils';
 import { useUiStyleSettingsStore } from '../../../style-settings/store';
 
 interface CategoryTab {

package/src/shared/content-settings/components/content-settings/ContentSettings.stories.ts

@@ -1,14 +1,14 @@
 import { defineComponent } from 'vue';
 import * as uuid from 'uuid';
 import ContentSettings from './ContentSettings.vue';
-import { CONTENT_SETTINGS_CONFIGS } from '../../../../brand-page-maker/constants';
+import { CONTENT_SETTINGS_CONFIGS } from '@brand-page-maker/constants';
 import type { ContentItem, ContentItemFieldSettings } from '../../models';
-import { mapContentSettingsConfigToAddContentOption } from '../../../../brand-page-maker/utils';
+import { mapContentSettingsConfigToAddContentOption } from '@brand-page-maker/utils';
 import {
   DEFAULT_MAX_NUM_OF_PAGES,
   type UserFeatures,
-} from '../../../../brand-page-maker/stores';
-import { setupStoryPinia } from '../../../../brand-page-maker/components/brand-page-maker/__fixtures__/store-fixture';
+} from '@brand-page-maker/stores';
+import { setupStoryPinia } from '@brand-page-maker/components/brand-page-maker/__fixtures__/store-fixture';
 import { useUiContentSettingsStore } from '../../store';
 
 export default {

package/src/shared/content-settings/components/content-settings/ContentSettings.vue

@@ -152,7 +152,7 @@ import NewPageModal from '../../../page-settings/components/new-page-modal/NewPa
 import PageSettings from '../../../page-settings/components/page-settings/PageSettings.vue';
 import FocusedContentItemSettings from '../focused-content-item-settings/FocusedContentItemSettings.vue';
 import { CONTENT_SETTINGS_MODES } from '../../store';
-import { contentSettingsTr } from '../../../../composables/useTranslate';
+import { contentSettingsTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/shared/content-settings/components/content-settings/ReplaceImageSettingsForContent.mixin.ts

@@ -16,17 +16,17 @@ import {
   useBrandPageMakerStore,
   useVideoStore,
   GETTY_VIDEO_LIMIT_FOR_SITE,
-} from '../../../../brand-page-maker/stores';
+} from '@brand-page-maker/stores';
 import { UI_EVENT_SOURCES } from '../../../models';
 import type { PageSettingsStateSectionStyles } from '../../../page-settings/store';
 import { useUiPageSettingsStore } from '../../../page-settings/store';
 import type { PageSection } from '../../../page-settings/models';
-import { MEDIA_TYPES } from '../../../../brand-page';
+import { MEDIA_TYPES } from '@brand-page';
 import {
   contentSettingsTr,
   videoLibraryTr,
-} from '../../../../composables/useTranslate';
-import { useEventTracker } from '../../../../brand-page-maker/composables/useEventTracker';
+} from '@src/composables/useTranslate';
+import { useEventTracker } from '@brand-page-maker/composables/useEventTracker';
 
 export default defineComponent({
   setup() {

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItem.mixin.ts

@@ -1,14 +1,14 @@
 import type { PropType } from 'vue';
 import { defineComponent, computed } from 'vue';
-import type { ContentSettingsConfig } from '../../../../brand-page-maker/models';
-import { CONTENT_SETTINGS_DISPLAY_MODES } from '../../../../brand-page-maker/models';
+import type { ContentSettingsConfig } from '@brand-page-maker/models';
+import { CONTENT_SETTINGS_DISPLAY_MODES } from '@brand-page-maker/models';
 import { useUiSideBarStore } from '../../../side-bar/store';
 import type { Field, UpdateItemValuePayload } from '../../models';
 import {
   getContentSettingDisplayName,
   getContentSettingsFields,
   getContentSettingsTemplate,
-} from '../../utils';
+} from '@shared/content-settings/utils';
 import { UI_EVENT_SOURCES } from '../../../models';
 import { useUiContentSettingsStore, CONTENT_SETTINGS_MODES } from '../../store';
 import { SIDE_BAR_CONTENT_ID } from '../../constants';
@@ -17,7 +17,7 @@ import {
   useBrandPageMakerUserStore,
   useRouteStore,
   useUiStore,
-} from '../../../../brand-page-maker/stores';
+} from '@brand-page-maker/stores';
 import {
   BRAND_PAGE_TYPES,
   CONTENT_TYPES,
@@ -25,12 +25,12 @@ import {
   type BrandPageContext,
   type ContentType,
   type PersonalisationRole,
-} from '../../../../brand-page';
+} from '@brand-page';
 import {
   EVENTS,
   SELECT_LOCATIONS,
   useEventTracker,
-} from '../../../../brand-page-maker/composables/useEventTracker';
+} from '@brand-page-maker/composables/useEventTracker';
 import debounce from 'lodash.debounce';
 import type { DebounceHandle } from 'lodash.debounce';
 

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.ts

@@ -1,11 +1,7 @@
 import { defineComponent, computed } from 'vue';
 import type { PropType } from 'vue';
 import type { ContentItem, Field, UpdateItemValuePayload } from '../../models';
-import {
-  VIEWPORTS,
-  type Content,
-  type LogoContent,
-} from '../../../../brand-page';
+import { VIEWPORTS, type Content, type LogoContent } from '@brand-page';
 import { UI_EVENT_SOURCES } from '../../../models';
 import { useUiContentSettingsStore } from '../../store';
 import { useUiSideBarStore } from '../../../side-bar/store';
@@ -15,23 +11,20 @@ import {
   useBrandPageMakerUserStore,
   useUiStore,
   useSnapshotStore,
-} from '../../../../brand-page-maker/stores';
-import { SIDE_BAR_TAB_NAMES } from '../../../../brand-page-maker/constants';
-import {
-  ITEM_FIELD_TYPES,
-  type ItemFieldType,
-} from '../../../../brand-page-maker/models';
+} from '@brand-page-maker/stores';
+import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
+import { ITEM_FIELD_TYPES, type ItemFieldType } from '@brand-page-maker/models';
 import { useUiPageSettingsStore } from '../../../page-settings/store';
 import { PAGE_SECTIONS } from '../../../page-settings/models';
-import { commonTr } from '../../../../composables/useTranslate';
+import { commonTr } from '@src/composables/useTranslate';
 import {
   getPlainTextFromRTE,
   replaceTextInRTE,
   RTE_ALLOWED_SECTION_TYPES,
-} from '../../../../brand-page-maker/utils';
-import { isDefaultContentText } from '../../utils';
+} from '@brand-page-maker/utils';
+import { isDefaultContentText } from '@shared/content-settings/utils';
 import { useUiLogoSettingsStore } from '../../../logo-settings/store';
-import { getCtaLocationFromFieldType } from '../../../../brand-page-maker/utils/mixpanel.util';
+import { getCtaLocationFromFieldType } from '@brand-page-maker/utils/mixpanel.util';
 
 const AI_ALLOWED_SECTION_TYPES = [
   'banner-section',

package/src/shared/content-settings/components/draggable-item-list/DraggableItemList.mixin.ts

@@ -1,11 +1,11 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import type { DraggableItem } from './DraggableItemList.model';
-import BrandPageIcon from '../../../../brand-page/components/icon/Icon.vue';
+import BrandPageIcon from '@brand-page/components/icon/Icon.vue';
 import { URL_RE, URL_REG_EX } from '../../constants';
 import { isEmail, isTel, isURL } from '../../../../utils/validator.util';
 import type { UpdateItemValuePayload } from '../../models';
-import type { ColorReplacement, LogoTheme } from '../../../../brand-page';
+import type { ColorReplacement, LogoTheme } from '@brand-page';
 
 const INITIAL_SHOW_AMOUNT = 5;
 

package/src/shared/content-settings/components/draggable-item-list/DraggableItemList.vue

@@ -155,9 +155,9 @@
 import { Button, Icon, TextInput } from '@designcrowd/fe-shared-lib';
 import Draggable from 'vuedraggable';
 import DraggableItemListMixin from './DraggableItemList.mixin.ts';
-import BrandPageIcon from '../../../../brand-page/components/icon/Icon.vue';
+import BrandPageIcon from '@brand-page/components/icon/Icon.vue';
 import ColorReplacementsField from '../color-replacements-field/ColorReplacementsField.vue';
-import { commonTr } from '../../../../composables/useTranslate';
+import { commonTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/shared/content-settings/components/focused-content-item-settings/FocusedContentItemSettings.mixin.ts

@@ -5,11 +5,11 @@ import type {
   FieldGroup,
   UpdateItemValuePayload,
 } from '../../models';
-import type { ContentSettingsConfig } from '../../../../brand-page-maker/models';
+import type { ContentSettingsConfig } from '@brand-page-maker/models';
 import {
   getContentSettingsFields,
   getContentSettingsTemplate,
-} from '../../utils';
+} from '@shared/content-settings/utils';
 import { UI_EVENT_SOURCES } from '../../../models';
 import { useUiContentSettingsStore } from '../../store';
 import {
@@ -17,17 +17,17 @@ import {
   useBrandPageMakerUserStore,
   useRouteStore,
   useUiStore,
-} from '../../../../brand-page-maker/stores';
+} from '@brand-page-maker/stores';
 import {
   BRAND_PAGE_TYPES,
   MEDIA_SIZES,
   type BrandPageContext,
   type PersonalisationRole,
-} from '../../../../brand-page';
-import { switchAllContentToRTE } from '../../../../brand-page-maker/utils';
-import { useUiPageSettingsStore } from '../../../../shared/page-settings/store';
-import { useExternalRichTextEditor } from '../../../../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
-import { useUiStyleSettingsStore } from '../../../../shared/style-settings/store';
+} from '@brand-page';
+import { switchAllContentToRTE } from '@brand-page-maker/utils';
+import { useUiPageSettingsStore } from '@shared/page-settings/store';
+import { useExternalRichTextEditor } from '@brand-page-maker/composables/rich-text-editor/useRichTextEditor';
+import { useUiStyleSettingsStore } from '@shared/style-settings/store';
 
 export default defineComponent({
   setup() {

package/src/shared/content-settings/components/form-fields-field/FormFieldsField.mixin.ts

@@ -1,7 +1,7 @@
 import { defineComponent, ref } from 'vue';
 import type { PropType } from 'vue';
-import type { FormField } from '../../../../brand-page';
-import { formFieldsTr } from '../../../../composables/useTranslate';
+import type { FormField } from '@brand-page';
+import { formFieldsTr } from '@src/composables/useTranslate';
 
 export default defineComponent({
   props: {

package/src/shared/content-settings/components/generate-ai-button/GenerateAiButton.vue

@@ -28,18 +28,18 @@
 import { ref, computed } from 'vue';
 import { Icon } from '@designcrowd/fe-shared-lib';
 import GenerateAiModal from '../generate-ai-modal/GenerateAiModal.vue';
-import { commonTr } from '../../../../composables/useTranslate';
+import { commonTr } from '@src/composables/useTranslate';
 import {
   useBrandPageContainerStore,
   useBrandPageMakerUserStore,
   useSnapshotStore,
-} from '../../../../brand-page-maker/stores';
-import type { AbTestResult } from '../../../../brand-page/models/brand-page-context.model';
+} from '@brand-page-maker/stores';
+import type { AbTestResult } from '@brand-page/models/brand-page-context.model';
 import {
   EVENTS,
   GENERATE_TEXT_CONTINUATION_EVENTS,
   useEventTracker,
-} from '../../../../brand-page-maker/composables/useEventTracker';
+} from '@brand-page-maker/composables/useEventTracker';
 
 interface Props {
   id: string;

package/src/shared/content-settings/components/generate-ai-modal/GenerateAiModal.vue

@@ -207,16 +207,16 @@ import {
   generateAiModalTr,
   commonTr,
   contentSettingsTr,
-} from '../../../../composables/useTranslate';
+} from '@src/composables/useTranslate';
 import { getInstance as getDesignTemplateClient } from '../../../../clients/design-template-client';
 import {
   EVENTS,
   GENERATE_AI_SUGGESTED_PROMPT,
   GENERATE_TEXT_CONTINUATION_EVENTS,
   useEventTracker,
-} from '../../../../brand-page-maker/composables/useEventTracker';
-import { useSnapshotStore } from '../../../../brand-page-maker/stores';
-import { useBrandPageMakerStore } from '../../../../brand-page-maker/stores';
+} from '@brand-page-maker/composables/useEventTracker';
+import { useSnapshotStore } from '@brand-page-maker/stores';
+import { useBrandPageMakerStore } from '@brand-page-maker/stores';
 
 interface Props {
   id: string;

package/src/shared/content-settings/components/google-address-field/GoogleAddressField.mixin.ts

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import { PLACE_CHANGED } from '../../../../plugins/google-maps-plugin/google-maps-plugin';
-import type { Address } from '../../../../brand-page';
+import type { Address } from '@brand-page';
 import type { ContentItemFieldSettings } from '../../models';
 
 interface AddressFieldData {

package/src/shared/content-settings/components/google-address-field/GoogleAddressField.vue

@@ -12,7 +12,7 @@
 </template>
 <script>
 import AddressFieldMixin from './GoogleAddressField.mixin.ts';
-import { googleAddressFieldTr } from '../../../../composables/useTranslate';
+import { googleAddressFieldTr } from '@src/composables/useTranslate';
 
 export default {
   components: {},

package/src/shared/content-settings/components/icon-library/IconLibrary.mixin.ts

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import Icon from '../../../../brand-page/components/icon/Icon.vue';
+import Icon from '@brand-page/components/icon/Icon.vue';
 import { BRAND_PAGE_ICONS } from '../../../../constants/brand-page-maker';
 
 export default defineComponent({