@designcrowd/library.brand-page 5.16.48 → 5.16.49

package/src/shared/content-settings/components/image-field/ImageField.mixin.ts

@@ -1,12 +1,12 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import { Button, Icon } from '@designcrowd/fe-shared-lib';
-import BrandPageIcon from '../../../../brand-page/components/icon/Icon.vue';
+import BrandPageIcon from '@brand-page/components/icon/Icon.vue';
 import type { ContentItemFieldSettings } from '../../models';
 import { isURL } from '../../../../utils/validator.util';
-import { commonTr } from '../../../../composables/useTranslate';
-import { useVideoStore } from '../../../../brand-page-maker/stores/video/video-store';
-import { useEventTracker } from '../../../../brand-page-maker/composables/useEventTracker';
+import { commonTr } from '@src/composables/useTranslate';
+import { useVideoStore } from '@brand-page-maker/stores/video/video-store';
+import { useEventTracker } from '@brand-page-maker/composables/useEventTracker';
 
 const ACCEPTED_MIME_TYPES = 'image/png, image/jpeg, image/svg+xml';
 

package/src/shared/content-settings/components/image-field/ImageField.vue

@@ -63,7 +63,7 @@
 </template>
 <script>
 import ImageFieldMixin from './ImageField.mixin.ts';
-import { tr, commonTr } from '../../../../composables/useTranslate';
+import { tr, commonTr } from '@src/composables/useTranslate';
 
 export default {
   mixins: [ImageFieldMixin],

package/src/shared/content-settings/components/images-field/ImagesField.mixin.ts

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
-import type { ImageGalleryItem, LogoTheme } from '../../../../brand-page';
+import type { ImageGalleryItem, LogoTheme } from '@brand-page';
 import cloneDeep from 'lodash.clonedeep';
 
 const ACCEPTED_MIME_TYPES = 'image/png, image/jpeg, image/svg+xml';

package/src/shared/content-settings/components/images-field/ImagesField.vue

@@ -43,7 +43,7 @@
 import { Button } from '@designcrowd/fe-shared-lib';
 import ImagesFieldMixin from './ImagesField.mixin.ts';
 import DraggableItemList from '../draggable-item-list/DraggableItemList.vue';
-import { imagesFieldTr } from '../../../../composables/useTranslate';
+import { imagesFieldTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/shared/content-settings/components/links-field/LinksField.mixin.ts

@@ -5,7 +5,7 @@ import type {
   ImageGalleryItem,
   LinksItem,
   LogoTheme,
-} from '../../../../brand-page';
+} from '@brand-page';
 import type {
   ContentItemFieldSettings,
   UpdateItemValuePayload,

package/src/shared/content-settings/components/links-field/LinksField.vue

@@ -32,7 +32,7 @@
 import { Button } from '@designcrowd/fe-shared-lib';
 import LinksFieldMixin from './LinksField.mixin.ts';
 import DraggableItemList from '../draggable-item-list/DraggableItemList.vue';
-import { linksFieldTr } from '../../../../composables/useTranslate';
+import { linksFieldTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/shared/content-settings/components/logo-field/LogoField.mixin.ts

@@ -1,5 +1,5 @@
 import { defineComponent, type PropType } from 'vue';
-import { type LogoViewModel } from '../../../../brand-page';
+import { type LogoViewModel } from '@brand-page';
 
 export default defineComponent({
   props: {

package/src/shared/content-settings/components/logo-field/LogoField.vue

@@ -20,7 +20,7 @@
 </template>
 <script>
 import { Button } from '@designcrowd/fe-shared-lib';
-import LogoRender from '../../../../brand-page/components/logo/LogoRender.vue';
+import LogoRender from '@brand-page/components/logo/LogoRender.vue';
 import LogoFieldMixin from './LogoField.mixin.ts';
 
 export default {

package/src/shared/content-settings/components/logo-selection-field/LogoSelection.vue

@@ -112,36 +112,36 @@
 </template>
 <script setup lang="ts">
 import { Button, ButtonGroup, Icon, Toggle } from '@designcrowd/fe-shared-lib';
-import LogoVersions from '../../../../shared/logo-versions/LogoVersions.vue';
-import LogoVariations from '../../../../shared/logo-settings/components/LogoVariations.vue';
+import LogoVersions from '@shared/logo-versions/LogoVersions.vue';
+import LogoVariations from '@shared/logo-settings/components/LogoVariations.vue';
 import {
   useBrandPageContainerStore,
   useBrandPageMakerUserStore,
   useLogoStore,
-} from '../../../../brand-page-maker/stores/index';
+} from '@brand-page-maker/stores/index';
 import { computed, onMounted, reactive, watch } from 'vue';
 import {
   getLogoVariationIndexFromLogoImageUrl,
   getLogoVariationUrls,
-} from '../../../../brand-page/utils/logo.util';
-import type { ButtonGroupOption } from '../../../../brand-page-maker/models/button-group.model';
+} from '@brand-page/utils/logo.util';
+import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
 import type { DisplayLogoDraftAsset } from '../../../../clients/models';
-import LogoField from '../../../../shared/content-settings/components/logo-field/LogoField.vue';
+import LogoField from '@shared/content-settings/components/logo-field/LogoField.vue';
 import {
   useUiEditableLogoStore,
   useUiLogoSettingsStore,
-} from '../../../../shared/logo-settings/store';
+} from '@shared/logo-settings/store';
 import UploadLogoModal from '../../../upload-logo-modal/UploadLogoModal.vue';
-import { SIDE_BAR_TAB_NAMES } from '../../../../brand-page-maker/constants';
-import { useUiSideBarStore } from '../../../../shared/side-bar/store';
-import WebsiteByoUpload from '../../../../shared/website-byo-upload/WebsiteByoUpload.vue';
-import type { CreateWebsiteByoUploadResult } from '../../../../shared/website-byo-upload/WebsiteByoUploadModels';
-import { type LogoVariation, type LogoViewModel } from '../../../../brand-page';
+import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
+import { useUiSideBarStore } from '@shared/side-bar/store';
+import WebsiteByoUpload from '@shared/website-byo-upload/WebsiteByoUpload.vue';
+import type { CreateWebsiteByoUploadResult } from '@shared/website-byo-upload/WebsiteByoUploadModels';
+import { type LogoVariation, type LogoViewModel } from '@brand-page';
 import {
   logoSelectionTr,
   commonTr,
   getCurrentLocale,
-} from '../../../../composables/useTranslate';
+} from '@src/composables/useTranslate';
 
 interface Tab {
   id: 'VARIATIONS' | 'VERSIONS';

package/src/shared/content-settings/components/logo-selection-field/LogoSelectionField.vue

@@ -20,17 +20,17 @@ import {
   type LogoImageModel,
   type LogoTemplateImageModel,
   type LogoViewModel,
-} from '../../../../brand-page';
+} from '@brand-page';
 import {
   useLogoStore,
   useBrandPageMakerStore,
   useUiStore,
-} from '../../../../brand-page-maker/stores';
-import * as logoUtil from '../../../../brand-page/utils/logo.util';
-import { useUiEditableLogoStore } from '../../../../shared/logo-settings/store';
-import { parseLogoThemeToCssStyles } from '../../../../brand-page/utils';
+} from '@brand-page-maker/stores';
+import * as logoUtil from '@brand-page/utils/logo.util';
+import { useUiEditableLogoStore } from '@shared/logo-settings/store';
+import { parseLogoThemeToCssStyles } from '@brand-page/utils';
 import { FabricRenderClient } from './../../../../clients/fabric-render-client';
-import { useUiPageSettingsStore } from '../../../../shared/page-settings/store';
+import { useUiPageSettingsStore } from '@shared/page-settings/store';
 
 interface Props {
   id: string;

package/src/shared/content-settings/components/logo-size-field/LogoSizeSlider.vue

@@ -24,7 +24,7 @@ import {
   LOGO_SLIDER_MOBILE_MIN,
   VIEWPORTS,
   type ViewportsType,
-} from '../../../../brand-page';
+} from '@brand-page';
 import { reactive, onMounted, watch, ref } from 'vue';
 
 const REGEX_MATCH_NUMBER = /[\d.]+/;

package/src/shared/content-settings/components/logo-size-field/LogoSizeSliderField.vue

@@ -7,9 +7,9 @@
 </template>
 <script setup lang="ts">
 import LogoSizeSlider from './LogoSizeSlider.vue';
-import type { LogoContent } from '../../../../brand-page';
+import type { LogoContent } from '@brand-page';
 import { reactive, computed } from 'vue';
-import { VIEWPORTS } from '../../../../brand-page';
+import { VIEWPORTS } from '@brand-page';
 
 interface Data {
   suffix: string | null;

package/src/shared/content-settings/components/page-dropdown-field/PageDropdownField.mixin.ts

@@ -0,0 +1,115 @@
+import type { ContentPage } from 'src/shared/page-settings/models';
+import { useUiPageSettingsStore } from '../../../page-settings/store';
+import { defineComponent } from 'vue';
+import { useBrandPageMakerUserStore } from '@brand-page-maker/stores';
+import { pageSettingTr } from '@src/composables/useTranslate';
+
+export default defineComponent({
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    placeholder: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: String,
+      required: true,
+    },
+    showUpgradeBtn: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  setup() {
+    const pageSettingsStore = useUiPageSettingsStore();
+    const userStore = useBrandPageMakerUserStore();
+
+    return {
+      pageSettingsStore,
+      userStore,
+    };
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      dropdownValues: {},
+      selectedPage: '',
+    };
+  },
+  computed: {
+    canAddPages(): boolean {
+      return (
+        this.userStore.features.maxNumOfPages < 0 ||
+        this.pageSettingsStore.pages.length <
+          this.userStore.features.maxNumOfPages
+      );
+    },
+    onPagesUpdated(): boolean {
+      return (
+        this.userStore.features.maxNumOfPages < 0 ||
+        this.pageSettingsStore.pages.length <
+          this.userStore.features.maxNumOfPages
+      );
+    },
+    addPageButtonVariant(): string {
+      return this.canAddPages ? 'outline' : 'primary';
+    },
+    selectedPageName(): string {
+      return this.selectedPage;
+    },
+    addPageLabel(): string {
+      return this.canAddPages
+        ? pageSettingTr('addPage')
+        : pageSettingTr('upgradeBtn');
+    },
+  },
+  created() {
+    if (this.value) {
+      const page = this.pageSettingsStore.pages.find(
+        (page) => page.slug === this.value,
+      );
+
+      if (page) {
+        this.selectedPage = page.title;
+      } else {
+        this.$emit('update:modelValue', {
+          id: this.id,
+          name: this.name,
+          value: '',
+        });
+      }
+    }
+
+    this.addAndUpdateDropdownValues();
+  },
+  methods: {
+    onSelectPage(payload: ContentPage) {
+      this.selectedPage = payload.title;
+
+      if ((this.$refs.dropdown as any)?.hideMenu) {
+        (this.$refs.dropdown as any).hideMenu();
+      }
+
+      this.$emit('update:modelValue', {
+        id: this.id,
+        name: this.name,
+        value: payload.slug,
+      });
+    },
+    async onAddNewPageSelected() {
+      await this.pageSettingsStore.setNewPageModalVisibilityAsync({
+        isNewPageModalVisible: true,
+      });
+    },
+    addAndUpdateDropdownValues() {
+      this.dropdownValues = this.pageSettingsStore.pages;
+    },
+  },
+});

package/src/shared/content-settings/components/payment-config-field/PaymentConfigField.mixin.ts

@@ -5,16 +5,16 @@ import type {
   BrandPagePaymentConfigCurrency,
   PaymentConfig,
   RequestPaymentConfig,
-} from '../../../../brand-page';
+} from '@brand-page';
 import type { UpdateItemValuePayload } from '../../models';
 import {
   useBrandPageContainerStore,
   useEventManagerStore,
-} from '../../../../brand-page-maker/stores';
-import { useShopConfigStore } from '../../../../shared/ecommerce-settings/store/shop-settings-store';
-import { paymentConfigTr } from '../../../../composables/useTranslate';
+} from '@brand-page-maker/stores';
+import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
+import { paymentConfigTr } from '@src/composables/useTranslate';
 import brandPageClient from '../../../../clients/brand-page-client';
-import { useUiPageSettingsStore } from '../../../../shared/page-settings/store';
+import { useUiPageSettingsStore } from '@shared/page-settings/store';
 
 export default defineComponent({
   props: {

package/src/shared/content-settings/components/payment-config-field/PaymentConfigField.vue

@@ -66,7 +66,7 @@ import {
   Loader,
 } from '@designcrowd/fe-shared-lib';
 import PaymentConfigFieldMixin from './PaymentConfigField.mixin.ts';
-import { paymentConfigTr } from '../../../../composables/useTranslate';
+import { paymentConfigTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/shared/content-settings/components/payment-config-field/PaymentConfigOptionField.mixin.ts

@@ -4,16 +4,16 @@ import type {
   PaymentOption,
   PaymentOptionDisplayType,
   PaymentOptionImageType,
-} from '../../../../brand-page';
+} from '@brand-page';
 import {
   PAYMENT_OPTION_DISPLAY_TYPES,
   PAYMENT_OPTION_IMAGE_TYPES,
-} from '../../../../brand-page';
-import { isPaymentAmountValid } from '../../../../brand-page/utils';
+} from '@brand-page';
+import { isPaymentAmountValid } from '@brand-page/utils';
 import { v4 as uuid } from 'uuid';
 import type { DebounceHandle } from 'lodash.debounce';
 import debounce from 'lodash.debounce';
-import { errorTr } from '../../../../composables/useTranslate';
+import { errorTr } from '@src/composables/useTranslate';
 
 const MAX_PAYMENT_DESCRIPTION_LENGTH = 100;
 const DEBOUNCE_IN_MS = 250;

package/src/shared/content-settings/components/payment-config-field/PaymentConfigOptionField.vue

@@ -120,10 +120,7 @@ import { Button, Icon, TextInput } from '@designcrowd/fe-shared-lib';
 import PaymentConfigOptionFieldMixin from './PaymentConfigOptionField.mixin.ts';
 import ImageField from '../image-field/ImageField.vue';
 import ItemsField from '../items-field/ItemsField.vue';
-import {
-  commonTr,
-  paymentConfigTr,
-} from '../../../../composables/useTranslate';
+import { commonTr, paymentConfigTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/shared/content-settings/components/payment-config-field/PaymentConfigOptionFieldAdaptor.mixin.ts

@@ -5,7 +5,7 @@ import type {
   PaymentOption,
   PaymentOptionDisplayType,
   RequestPaymentConfig,
-} from '../../../../brand-page';
+} from '@brand-page';
 import paymentConfigFieldUtils from './payment-config-field-utils';
 import type { UpdateItemValuePayload } from '../../models';
 

package/src/shared/content-settings/components/payment-config-field/payment-config-field-utils.ts

@@ -1,5 +1,5 @@
-import { DEFAULT_CURRENCY_SYMBOL } from '../../../../brand-page/constants';
-import type { PaymentConfig } from '../../../../brand-page';
+import { DEFAULT_CURRENCY_SYMBOL } from '@brand-page/constants';
+import type { PaymentConfig } from '@brand-page';
 
 const getCurrencySymbolByRequestPaymentConfig = (
   value: PaymentConfig,

package/src/shared/content-settings/components/payment-config-field/payment-link-display-style-field/PaymentImageStyleField.mixin.ts

@@ -1,10 +1,7 @@
 import { defineComponent } from 'vue';
-import type { ButtonGroupOption } from '../../../../../brand-page-maker/models/button-group.model';
-import type {
-  PaymentOptionImageType,
-  RequestPaymentConfig,
-} from '../../../../../brand-page';
-import { PAYMENT_OPTION_IMAGE_TYPES } from '../../../../../brand-page';
+import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
+import type { PaymentOptionImageType, RequestPaymentConfig } from '@brand-page';
+import { PAYMENT_OPTION_IMAGE_TYPES } from '@brand-page';
 import type { PropType } from 'vue';
 import type { UpdateItemValuePayload } from '../../../models';
 

package/src/shared/content-settings/components/payment-config-field/payment-link-display-style-field/PaymentImageStyleField.vue

@@ -17,7 +17,7 @@
 <script>
 import { ButtonGroup } from '@designcrowd/fe-shared-lib';
 import ImageStyleFieldMixin from './PaymentImageStyleField.mixin.ts';
-import { paymentConfigTr } from '../../../../../composables/useTranslate';
+import { paymentConfigTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/shared/content-settings/components/payment-config-field/payment-toggle-field/PaymentToggleField.mixin.ts

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
-import type { RequestPaymentConfig } from '../../../../../brand-page';
+import type { RequestPaymentConfig } from '@brand-page';
 import type { UpdateItemValuePayload } from '../../../models';
 
 export default defineComponent({

package/src/shared/content-settings/components/payment-config-field/request-payment-config-field/RequestPaymentConfigField.mixin.ts

@@ -5,10 +5,10 @@ import type {
   RequestPaymentConfig,
   PaymentOption,
   PaymentOptionDisplayType,
-} from '../../../../../brand-page';
-import { PAYMENT_OPTION_DISPLAY_TYPES } from '../../../../../brand-page';
+} from '@brand-page';
+import { PAYMENT_OPTION_DISPLAY_TYPES } from '@brand-page';
 import type { UpdateItemValuePayload } from '../../../models';
-import type { ButtonGroupOption } from '../../../../../brand-page-maker/models/button-group.model';
+import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
 import paymentConfigFieldUtils from '../payment-config-field-utils';
 
 export default defineComponent({

package/src/shared/content-settings/components/payment-config-field/support-me-config-field/SupportMeConfigField.mixin.ts

@@ -4,8 +4,8 @@ import type {
   PaymentConfig,
   PaymentOption,
   SupportMeConfig,
-} from '../../../../../brand-page';
-import { SUPPORT_ME_CUSTOM_PRODUCT_NAME } from '../../../../../brand-page/constants';
+} from '@brand-page';
+import { SUPPORT_ME_CUSTOM_PRODUCT_NAME } from '@brand-page/constants';
 import type { UpdateItemValuePayload } from '../../../models';
 import { v4 as uuid } from 'uuid';
 import paymentConfigFieldUtils from '../payment-config-field-utils';

package/src/shared/content-settings/components/payment-config-field/support-me-config-field/SupportMeConfigField.vue

@@ -51,7 +51,7 @@ import { Toggle } from '@designcrowd/fe-shared-lib';
 import RequestPaymentConfigFieldMixin from './SupportMeConfigField.mixin.ts';
 import PaymentConfigField from '../PaymentConfigField.vue';
 import PaymentConfigOptionField from '../PaymentConfigOptionField.vue';
-import { paymentConfigTr } from '../../../../../composables/useTranslate';
+import { paymentConfigTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/shared/content-settings/components/personalisation-override-field/PersonalisationOverrideField.vue

@@ -42,19 +42,19 @@
 </template>
 <script setup lang="ts">
 import { Dropdown, DropdownItem, Icon } from '@designcrowd/fe-shared-lib';
-import type { Content } from '../../../../brand-page/models/content.model';
+import type { Content } from '@brand-page/models/content.model';
 import { computed, ref, reactive } from 'vue';
 import { directive as vClickOutside } from 'click-outside-vue3';
 import {
   getModifiedPersonalisationPropertyKeyBasedOnCondition,
   getPersonalisationMappingForContentType,
-} from '../../../../brand-page/utils/personalisation.util';
+} from '@brand-page/utils/personalisation.util';
 import {
   useBrandPageMakerStore,
   useBrandPageMakerUserStore,
-} from '../../../../brand-page-maker/stores';
-import type { PersonalisationMappingType } from '../../../../brand-page/models/user-personalisation.model';
-import { personalisationOverrideTr } from '../../../../composables/useTranslate';
+} from '@brand-page-maker/stores';
+import type { PersonalisationMappingType } from '@brand-page/models/user-personalisation.model';
+import { personalisationOverrideTr } from '@src/composables/useTranslate';
 
 const userStore = useBrandPageMakerUserStore();
 const brandPageMakerStore = useBrandPageMakerStore();

package/src/shared/content-settings/components/personalisation-role-field/PersonalisationRoleField.vue

@@ -34,8 +34,8 @@
 import { Dropdown, DropdownItem } from '@designcrowd/fe-shared-lib';
 import FieldSubHeader from '../field-sub-header/FieldSubHeader.vue';
 import { computed, reactive, ref } from 'vue';
-import type { Content, PersonalisationRole } from '../../../../brand-page';
-import { PERSONALISATION_ROLES } from '../../../../brand-page';
+import type { Content, PersonalisationRole } from '@brand-page';
+import { PERSONALISATION_ROLES } from '@brand-page';
 import { directive as vClickOutside } from 'click-outside-vue3';
 
 const personalisationRoleDropdown = ref(null);

package/src/shared/content-settings/components/radio-field/RadioField.mixin.ts

@@ -4,21 +4,21 @@ import FieldSubHeader from '../field-sub-header/FieldSubHeader.vue';
 import type {
   MultiFieldOption,
   OptionsConvertor,
-} from '../../../../brand-page-maker/models';
+} from '@brand-page-maker/models';
 import { Button } from '@designcrowd/fe-shared-lib';
 import type {
   ButtonGroupBasicOption,
   ButtonGroupOption,
-} from '../../../../brand-page-maker/models/button-group.model';
+} from '@brand-page-maker/models/button-group.model';
 import {
   useBrandPageMakerStore,
   useRouteStore,
-} from '../../../../brand-page-maker/stores';
+} from '@brand-page-maker/stores';
 import {
   BRAND_PAGE_TYPES,
   MEDIA_SIZES,
   type BrandPageContext,
-} from '../../../../brand-page';
+} from '@brand-page';
 
 export default defineComponent({
   components: {

package/src/shared/content-settings/components/replace-image-base-settings/ReplaceImageBaseSettings.vue

@@ -105,10 +105,10 @@ import {
   useBrandPageContainerStore,
   useBrandPageMakerUserStore,
   type BrandPageSettingsMode,
-} from '../../../../brand-page-maker/stores';
+} from '@brand-page-maker/stores';
 import axios from 'axios';
-import { getColorReplacementsFromSvgString } from '../../../../brand-page/utils/svg-color.util';
-import { commonTr, tr } from '../../../../composables/useTranslate';
+import { getColorReplacementsFromSvgString } from '@brand-page/utils/svg-color.util';
+import { commonTr, tr } from '@src/composables/useTranslate';
 
 const imageSettingTr = (key: string) => tr(`replaceImageSetting.${key}`);
 

package/src/shared/content-settings/components/shape-field/ShapeField.mixin.ts

@@ -1,15 +1,11 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
-import type {
-  ColorReplacement,
-  LogoTheme,
-  ShapeItem,
-} from '../../../../brand-page';
+import type { ColorReplacement, LogoTheme, ShapeItem } from '@brand-page';
 import type { DebounceHandle } from 'lodash.debounce';
 import debounce from 'lodash.debounce';
 import type { UpdateItemValuePayload } from '../../models';
 import cloneDeep from 'lodash.clonedeep';
-import { errorTr } from '../../../../composables/useTranslate';
+import { errorTr } from '@src/composables/useTranslate';
 
 const DEBOUNCE_IN_MS = 250;
 const SHAPE_FIELD_MAX_LENGTH = () => errorTr('maxCharacters');

package/src/shared/content-settings/components/shape-field/ShapeField.vue

@@ -81,7 +81,7 @@ import ShapeFieldMixin from './ShapeField.mixin';
 import ImageField from '../image-field/ImageField.vue';
 import ItemsField from '../items-field/ItemsField.vue';
 import ColorReplacementsField from '../color-replacements-field/ColorReplacementsField.vue';
-import { shapeFieldTr } from '../../../../composables/useTranslate';
+import { shapeFieldTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/shared/content-settings/components/slider-field/SliderField.mixin.ts

@@ -1,8 +1,8 @@
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 import type { UpdateItemValuePayload } from '../../models';
-import type { DividerSectionContent } from '../../../../brand-page';
-import type { ValueConvertor } from '../../../../brand-page-maker/models';
+import type { DividerSectionContent } from '@brand-page';
+import type { ValueConvertor } from '@brand-page-maker/models';
 
 export default defineComponent({
   props: {

package/src/shared/content-settings/components/testimonial-items-field/TestimonialItemsField.mixin.ts

@@ -5,19 +5,19 @@ import type {
   Content,
   LogoTheme,
   TestimonialItems,
-} from '../../../../brand-page';
+} from '@brand-page';
 import {
   EMPTY_TESTIMONIAL,
   MAX_DESCRIPTION_LENGTH,
   MAX_LENGTH_ERROR_MESSAGE,
   MAX_TITLE_LENGTH,
-} from '../../../../brand-page';
+} from '@brand-page';
 import type { DebounceHandle } from 'lodash.debounce';
 import debounce from 'lodash.debounce';
 import type { UpdateItemValuePayload } from '../../models';
 import cloneDeep from 'lodash.clonedeep';
-import { useSnapshotStore } from '../../../../brand-page-maker/stores';
-import { getPlainTextFromRTE } from '../../../../brand-page-maker/utils';
+import { useSnapshotStore } from '@brand-page-maker/stores';
+import { getPlainTextFromRTE } from '@brand-page-maker/utils';
 import { isDefaultContentText } from '../../utils';
 
 const DEBOUNCE_IN_MS = 250;

package/src/shared/content-settings/components/testimonial-items-field/TestimonialItemsField.vue

@@ -203,8 +203,8 @@ import ItemsField from '../items-field/ItemsField.vue';
 import TextareaField from '../../../content-settings/components/textarea-field/TextareaField.vue';
 import ColorReplacementsField from '../color-replacements-field/ColorReplacementsField.vue';
 import GenerateAiButton from '../generate-ai-button/GenerateAiButton.vue';
-import { testimonialItemsFieldTr } from '../../../../composables/useTranslate';
-import { getCtaLocationFromFieldType } from '../../../../brand-page-maker/utils/mixpanel.util';
+import { testimonialItemsFieldTr } from '@src/composables/useTranslate';
+import { getCtaLocationFromFieldType } from '@brand-page-maker/utils/mixpanel.util';
 import PersonalisationOverrideField from '../../../content-settings/components/personalisation-override-field/PersonalisationOverrideField.vue';
 
 export default {

package/src/shared/content-settings/components/text-field/TextField.vue

@@ -43,8 +43,8 @@
 </template>
 <script>
 import TextFieldMixin from './TextField.mixin.ts';
-import RichTextEditor from '../../../../brand-page-maker/components/rich-text-editor/RichTextEditor.vue';
-import { textFieldTr } from '../../../../composables/useTranslate';
+import RichTextEditor from '@brand-page-maker/components/rich-text-editor/RichTextEditor.vue';
+import { textFieldTr } from '@src/composables/useTranslate';
 
 export default {
   components: {