@designcrowd/library.brand-page 6.0.3 → 6.0.4

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

@@ -15,12 +15,12 @@ export const contactCardDisplayTypeVisibilityAssessor: VisibilityAssessor<
   return (
     Boolean(
       content?.layoutStyle &&
-      [
-        ALIGN_CARD_CENTER_IMAGE,
-        ALIGN_CARD_CENTER,
-        ALIGN_LEFT_FULL_IMAGE,
-        ALIGN_RIGHT_FULL_IMAGE,
-      ].includes(content?.layoutStyle),
+        [
+          ALIGN_CARD_CENTER_IMAGE,
+          ALIGN_CARD_CENTER,
+          ALIGN_LEFT_FULL_IMAGE,
+          ALIGN_RIGHT_FULL_IMAGE,
+        ].includes(content?.layoutStyle),
     ) && context!.isBrandSite
   );
 };
@@ -37,11 +37,11 @@ export const imageUrlVisibilityAssessor: VisibilityAssessor<
   return (
     Boolean(
       content?.layoutStyle &&
-      [
-        ALIGN_CARD_CENTER_IMAGE,
-        ALIGN_LEFT_FULL_IMAGE,
-        ALIGN_RIGHT_FULL_IMAGE,
-      ].includes(content?.layoutStyle),
+        [
+          ALIGN_CARD_CENTER_IMAGE,
+          ALIGN_LEFT_FULL_IMAGE,
+          ALIGN_RIGHT_FULL_IMAGE,
+        ].includes(content?.layoutStyle),
     ) && context!.isBrandSite
   );
 };
@@ -52,9 +52,9 @@ export const contactBackgroundDisplayTypeVisibilityAssessor: VisibilityAssessor<
   return (
     Boolean(
       content?.layoutStyle &&
-      [ALIGN_CARD_CENTER, ALIGN_CENTERED, TEXT_ONLY].includes(
-        content?.layoutStyle,
-      ),
+        [ALIGN_CARD_CENTER, ALIGN_CENTERED, TEXT_ONLY].includes(
+          content?.layoutStyle,
+        ),
     ) && context!.isBrandSite
   );
 };

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

@@ -8,7 +8,6 @@ import { UPGRADE_CTA_LOCATIONS } from './../../composables/useEventTracker';
 import { BRAND_PAGE_TYPES } from '@brand-page/models';
 
 export default defineComponent({
-  emits: ['create-team-cards'],
   setup() {
     const userStore = useBrandPageMakerUserStore();
     const brandPageMakerStore = useBrandPageMakerStore();

package/src/brand-page-maker/components/ai-text-edit/TextBubble.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/no-v-html -->
 <template>
   <div class="tw-mb-4" :class="containerClass">
     <div class="tw-flex" :class="containerClass">

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.ts

@@ -47,6 +47,7 @@ import AssetLibraryClient from '../../../clients/asset-library-clients';
 import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
 import type { ShopConfigData } from '@brand-page/models/shop.model';
 import { useProductConfigStore } from '@brand-page-maker/stores/product-config/product-config-store';
+import type { UpdateItemValuePayload } from '@shared/content-settings/models';
 import { UPGRADE_CTA_LOCATIONS } from '../../composables/useEventTracker';
 import { commonTr } from '@src/composables/useTranslate';
 import { useSnapshot } from '../../../composables/useSnapshot';
@@ -69,8 +70,6 @@ export interface BrandPageMakerViewModel {
   initialCategories: InitialCategories;
   personalisation?: UserPersonalisationContent[];
   isPersonalisationEnabled?: boolean;
-  userPromptContentKey?: string;
-  showAiTemplatesTab?: boolean;
   brandPageType?: BrandPageType;
   businessName?: string;
   industry?: string;
@@ -86,7 +85,6 @@ export default defineComponent({
       required: true,
     },
   },
-  emits: ['create-team-cards'],
   setup() {
     const brandPageMakerStore = useBrandPageMakerStore();
     const sideBarStore = useUiSideBarStore();
@@ -229,8 +227,6 @@ export default defineComponent({
       personalisationData: this.viewModel.personalisation,
       isPersonalisationEnabled:
         this.viewModel.isPersonalisationEnabled || false,
-      userPromptContentKey: this.viewModel.userPromptContentKey,
-      showAiTemplatesTab: this.viewModel.showAiTemplatesTab || false,
       brandPageType: this.viewModel.brandPageType,
       businessName: this.viewModel.businessName,
       industry: this.viewModel.industry,

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.stories.ts

@@ -270,7 +270,6 @@ const InitialiseMakerStores = (options: {
     isContextualUpgradeModalVisible: false,
     gettyVideos: [],
     templateSearchTerm: undefined,
-    aiTemplateKeywords: undefined,
   });
 
   userStore.setUserState({

package/src/brand-page-maker/components/brand-page-maker/BrandPageMakerTemplateSettings.stories.ts

@@ -5,9 +5,12 @@ import type { Component } from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import { mockDesignTemplateTypeApi } from '@shared/template-settings/components/TemplatesSettings.test-helper';
 import BrandPageMakerTemplateSettings from './BrandPageMakerTemplateSettings.vue';
-import { createMemoryHistory, createRouter } from 'vue-router';
+import VueRouter, { createMemoryHistory, createRouter } from 'vue-router';
 import { hexToRGB } from '@utils/helpers';
-import { BRAND_PAGE_TEMPLATE_BP_909 } from '../../../__fixtures__';
+import {
+  BRAND_PAGE_TEMPLATE_BP_909,
+  LOGO_IMAGE_URL,
+} from '../../../__fixtures__';
 import { setupStoryPinia } from './__fixtures__/store-fixture';
 import { useUiLogoSettingsStore } from '@shared/logo-settings/store';
 import { useUiStore } from '@brand-page-maker/stores';

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.ts

@@ -13,8 +13,13 @@ import type {
   TextContent,
   UserPersonalisation,
   ImageContent,
+  ImageGalleryContent,
   ProfileContent,
+  WebsiteContent,
+  ImagesSectionContent,
   UserPersonalisationContent,
+  EmailContent,
+  PhoneContent,
   ShapesSectionContent,
   BannerSectionContent,
 } from '@brand-page';

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-payment.ts

@@ -56,6 +56,14 @@ export const brandPagePaymentConfigsResponse: BrandPagePaymentConfig[] = [
   },
 ];
 
+const stripePaymentIntent: StripePaymentIntent = {
+  id: faker.datatype.uuid(),
+  object: 'payment_intent',
+  amount: 500,
+  client_secret: faker.internet.password(),
+  currency: 'USD',
+} as const;
+
 export const brandPageCreateCartResult: CreateCartResult<StripePaymentIntent> =
   {
     cartId: faker.datatype.uuid(),

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-site-template.examples.ts

@@ -1,3 +1,5 @@
+import type { PageModel } from '@brand-page';
+
 export const BRAND_SITE_TEMPLATE_SAMPLE: any[] = [
   {
     title: 'HOME',

package/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/no-v-html -->
 <template>
   <Page
     data-component="brand-page-maker-page"

package/src/brand-page-maker/components/brandpage-settings/ReplaceImageSettingsForBrandPageSettings.mixin.ts

@@ -130,7 +130,7 @@ export default defineComponent({
         mode: BRANDPAGE_SETTINGS_MODES.edit,
       });
     },
-    onDesignSelected() {
+    onDesignSelected(image: UserMediaItemWithDimensions) {
       this.brandPageMakerStore.setMode({ mode: BRANDPAGE_SETTINGS_MODES.edit });
     },
   },

package/src/brand-page-maker/components/color-palette/BpColorPalette.vue

@@ -68,7 +68,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, type PropType } from 'vue';
 import type { ColorValue } from 'src/shared/color-picker/models';
 import ClickOutside from 'click-outside-vue3';
 import ColorPicker from './BpColorPicker.vue';
@@ -106,6 +106,7 @@ const emit = defineEmits<{
 const pickerIdRef = ref<HTMLElement>();
 
 const popupTop = ref(0);
+const popupLeft = ref(0);
 
 const vClickOutside = ClickOutside.directive;
 

package/src/brand-page-maker/components/color-picker/components/ColorModeSelect.mixin.ts

@@ -23,7 +23,6 @@ export default defineComponent({
       default: COLOR_PICKER_MODE.SOLID,
     },
   },
-  emits: ['update:modelValue'],
   data() {
     return {
       colorPickerModes: COLOR_PICKER_MODE_OPTIONS,

package/src/brand-page-maker/components/color-picker/components/GradientColorSlider.mixin.ts

@@ -27,7 +27,6 @@ export default defineComponent({
       default: 5,
     },
   },
-  emits: ['update:activeHandlerId'],
   data() {
     return {
       internalActiveHandlerId: 0,

package/src/brand-page-maker/components/color-picker/components/GradientColorSliderHandler.mixin.ts

@@ -18,7 +18,6 @@ export default defineComponent({
       default: false,
     },
   },
-  emits: ['on-selected', 'on-position-changed'],
   data() {
     return {
       startPosInPixel,

package/src/brand-page-maker/components/color-picker/components/GradientTypeSelector.mixin.ts

@@ -12,7 +12,6 @@ export default defineComponent({
       default: GRADIENT_COLOR_TYPE.LINEAR,
     },
   },
-  emits: ['update:modelValue'],
   data() {
     return {
       isLinear: true,

package/src/brand-page-maker/components/device/Device.mixin.ts

@@ -18,7 +18,6 @@ export default defineComponent({
       default: false,
     },
   },
-  emits: ['toggle-should-play'],
   data() {
     return {
       visible: false,

package/src/brand-page-maker/components/navigation/Navigation.mixin.ts

@@ -40,7 +40,6 @@ export default defineComponent({
       default: false,
     },
   },
-  emits: ['create-team-cards'],
   methods: {
     saveBrandPage() {
       this.$emit(EVENTS.Save);

package/src/brand-page-maker/components/rich-text-editor/RichTextEditor.vue

@@ -552,7 +552,6 @@ const availableTextFontFamilyOptions = computed(
   () => styleSettingsStore.availableTextFontFamilyOptions,
 );
 
-// eslint-disable-next-line vue/require-prop-types
 const model = defineModel();
 const emit = defineEmits([
   'focus',
@@ -710,8 +709,7 @@ watch(
   () =>
     contentSettingStore.getItem(props.rawId)?.settings?.content?.textItemsStyle
       ?.color,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  (_newColor) => {
+  (newColor) => {
     if (isAdmin.value) {
       if (props.textItemIndex !== undefined && selectedGlobalTextStyles) {
         toggleTextColor.value =

package/src/brand-page-maker/components/sensitive-content/SensitiveContent.vue

@@ -92,7 +92,7 @@
 </template>
 <script setup lang="ts">
 import { Button } from '@designcrowd/fe-shared-lib';
-import { computed, reactive, nextTick } from 'vue';
+import { computed, reactive, nextTick, useTemplateRef } from 'vue';
 import {
   SENSITIVE_CONTENT_TYPES,
   type SensitiveContent,
@@ -109,6 +109,9 @@ const brandPageMakerStore = useBrandPageMakerStore();
 
 const props = defineProps<Props>();
 
+const isBrandPage = computed(() => brandPageMakerStore.isBrandPage);
+const isBrandContact = computed(() => brandPageMakerStore.isBrandContact);
+
 const data = reactive({
   sensitiveSettings: [
     {

package/src/brand-page-maker/components/seo-settings/DeleteDomainModal.vue

@@ -59,7 +59,7 @@ interface Props {
   isCustomDomainRequestFailed?: boolean;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
 const emit = defineEmits<{ (e: 'on-confirm'): void; (e: 'on-cancel'): void }>();
 
 const emitConfirm = () => emit('on-confirm');

package/src/brand-page-maker/components/seo-settings/SeoPageSettings.mixin.ts

@@ -41,7 +41,6 @@ export default defineComponent({
       default: undefined,
     },
   },
-  emits: ['update-settings'],
   setup() {
     const brandPageMakerStore = useBrandPageMakerStore();
     const localisedRouteStore = useLocalisedRouteStore();

package/src/brand-page-maker/components/seo-settings/SeoPageSettings.vue

@@ -106,7 +106,7 @@
 <script>
 import { Button, TextInput, Textarea } from '@designcrowd/fe-shared-lib';
 import SeoPageSettingsMixin from './SeoPageSettings.mixin.ts';
-import { commonTr, seoSettingsTr } from '@src/composables/useTranslate';
+import { tr, commonTr, seoSettingsTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/brand-page-maker/components/seo-settings/UrlSettings.mixin.ts

@@ -9,6 +9,7 @@ import {
   useBrandPageContainerStore,
   useBrandPageMakerStore,
   useLocalisedRouteStore,
+  useBrandPageMakerUserStore,
 } from '@brand-page-maker/stores';
 import { defaultUSDCurrency } from '@brand-page-maker/constants/currency-constants';
 import { validateCustomDomainName } from '@brand-page-maker/utils';

package/src/brand-page-maker/components/seo-settings/UrlSettings.vue

@@ -393,6 +393,7 @@ import { Button, Loader, TextInput } from '@designcrowd/fe-shared-lib';
 import { SellDomainNameWidget } from '@designcrowd/fe-shared-lib';
 import UrlSettingsMixin from './UrlSettings.mixin.ts';
 import DeleteDomainModal from './DeleteDomainModal.vue';
+import ConfirmModal from '@shared/confirm-modal/ConfirmModal.vue';
 import UseExistingDomainModal from './UseExistingDomainModal.vue';
 import { commonTr, seoSettingsTr } from '@src/composables/useTranslate';
 

package/src/brand-page-maker/components/seo-settings/UseExistingDomainModal.vue

@@ -178,7 +178,11 @@ import {
   Loader,
 } from '@designcrowd/fe-shared-lib';
 import UseExistingDomainModalMixin from './UseExistingDomainModal.mixin.ts';
-import { commonTr, existingDomainModalTr } from '@src/composables/useTranslate';
+import {
+  tr,
+  commonTr,
+  existingDomainModalTr,
+} from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/brand-page-maker/components/shop/AddOrEditProductContainer.vue

@@ -172,7 +172,7 @@ const enableNotes = computed(() => productSettingStore.productEnableNotes);
 const hasVariants = computed(() => productSettingStore.productHasVariants);
 const currencySymbol = computed(() => shopConfigStore.currencySymbol);
 
-defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue']);
 
 const onImageUpload = () => {
   productSettingStore.setImageUpload(true);

package/src/brand-page-maker/components/shop/ReplaceImageSettingsForShop.vue

@@ -25,7 +25,7 @@ import {
 import type { UserMediaItemWithDimensions } from 'src/shared/my-uploads/models';
 const productSettingStore = useProductConfigStore();
 
-defineEmits(['on-close', 'on-save']);
+const emit = defineEmits(['on-close', 'on-save']);
 
 const onBack = () => {
   productSettingStore.setImageUpload(false);

package/src/brand-page-maker/components/social-share/SocialShare.vue

@@ -55,7 +55,7 @@
   <!-- End Loader Overlay -->
 </template>
 <script>
-import { Loader, TextInput } from '@designcrowd/fe-shared-lib';
+import { Button, Loader, TextInput } from '@designcrowd/fe-shared-lib';
 import SocialShareMixin from './SocialShare.mixin';
 import ImageField from '@shared/content-settings/components/image-field/ImageField.vue';
 import { socialShareTr, commonTr } from '@src/composables/useTranslate';

package/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.ts

@@ -15,7 +15,10 @@ import {
   getBrandPageViewModelFromBrandPageModel,
 } from '@brand-page/utils';
 import { STYLE_THEME_KEYS } from '@brand-page/constants';
-import type { TemplateSettingsTemplate } from '@shared/template-settings/models';
+import {
+  TEMPLATE_TABS,
+  type TemplateSettingsTemplate,
+} from '@shared/template-settings/models';
 import type { DebounceHandle } from 'lodash.debounce';
 import debounce from 'lodash.debounce';
 import { MOBILE_HEIGHT, MOBILE_WIDTH } from '@brand-page-maker/constants';
@@ -71,6 +74,7 @@ export default defineComponent({
       isBrandSite: computed(
         () => brandPageMakerStore.brandPageType === BRAND_PAGE_TYPES.brandSite,
       ),
+      selectedTab: computed(() => templateSettingsStore.selectedTab.key),
       renderAsImage: computed(() => templateSettingsStore.renderAsImage),
       brandPageMakerUserStore,
       brandPageContainerStore,
@@ -237,28 +241,10 @@ export default defineComponent({
         return '';
       }
 
-      const isAlreadyPersonalised =
-        previewImageUrl.includes('contentKey=') ||
-        previewImageUrl.includes('userPromptContentKey=');
-
-      if (
-        this.isPersonalisable &&
-        this.template.contentKey &&
-        !isAlreadyPersonalised
-      ) {
-        if (this.userToken && !this.template.usesUserPromptContentKey) {
-          previewImageUrl += `&contentKey=${this.template.contentKey}`;
-
-          // The backend already bakes userToken into brand-site preview URLs. Only add
-          // it when missing - two userToken params parse as an array and the preview
-          // renderer rejects it ("userToken must be a string type") (bp-5765).
-          if (!previewImageUrl.includes('userToken=')) {
-            previewImageUrl += `&userToken=${this.userToken}`;
-          }
+      if (this.selectedTab === TEMPLATE_TABS.AI && this.template.contentKey) {
+        if (this.userToken) {
+          previewImageUrl += `&contentKey=${this.template.contentKey}&userToken=${this.userToken}`;
         } else {
-          // userPromptContentKey resolves from the userPrompt S3 bucket (real AI images).
-          // Post-purchase designs with a userPrompt key route here too, NOT through the
-          // userToken/regular-bucket branch above which holds placeholders (bp-5454).
           previewImageUrl += `&userPromptContentKey=${this.template.contentKey}`;
         }
       }

package/src/brand-page-maker/components/template-preview/TemplatePreview.vue

@@ -2,7 +2,7 @@
   <div
     ref="container"
     data-component="template-preview"
-    class="template-preview-container hover:!tw-shadow-[0_0_0_3px] hover:!tw-shadow-info-500 tw-overflow-hidden tw-relative tw-isolate"
+    class="template-preview-container hover:!tw-shadow-[0_0_0_3px] hover:!tw-shadow-info-500 tw-overflow-hidden"
     :style="containerStyle"
     :class="{
       '!tw-shadow-[0_0_0_3px] !tw-shadow-info-500':
@@ -55,10 +55,17 @@
           />
         </div>
         <!-- End Preview Image -->
+        <!-- Start personalisation tag -->
+        <div
+          v-if="isPersonalisable"
+          class="tw-absolute tw-bottom-0 tw-right-0 tw-p-2 tw-z-50 tw-text-white"
+          style="background: lightgreen"
+        >
+          <span>Personalisable</span>
+        </div>
+        <!-- End personalisation tag -->
       </div>
     </div>
-    <!-- AI badge outside scaled container so it renders at natural size -->
-    <TemplatePreviewAiBadge v-if="isPersonalisable" />
   </div>
 </template>
 <script>
@@ -66,13 +73,11 @@ import { defineComponent } from 'vue';
 import TemplatePreviewMixin from './TemplatePreview.mixin.ts';
 import Page from '@brand-page/components/page/Page.vue';
 import { Loader } from '@designcrowd/fe-shared-lib';
-import TemplatePreviewAiBadge from './TemplatePreviewAiBadge.vue';
 
 export default defineComponent({
   components: {
     Page,
     Loader,
-    TemplatePreviewAiBadge,
   },
   mixins: [TemplatePreviewMixin],
   setup(props, context) {

package/src/brand-page-maker/components/video-play/VideoPlayButton.vue

@@ -28,5 +28,5 @@ interface Props {
   iconColor?: string;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
 </script>

package/src/brand-page-maker/composables/ai-chat/useAiWebsiteBuilderChat.ts

@@ -1,4 +1,4 @@
-import { ref, computed, watch, nextTick } from 'vue';
+import { ref, computed, watch, nextTick, onUnmounted } from 'vue';
 import type { BrandPageModel } from '../../../brand-page/models';
 import {
   getInstance as getAiAssistantClient,
@@ -18,8 +18,8 @@ import {
   type PlanItem,
 } from '../../../clients/websocket-gateway-client';
 import { minifyBrandPageMetadata } from '../../../utils/minify-brand-page-metadata';
+import { ensureBrandPageItemIds } from '../../../metadata-builder/builders/item-id-utils';
 import { buildAssetManifest } from '../../../utils/build-asset-manifest';
-import cloneDeep from 'lodash.clonedeep';
 import { usePageNavigationStore } from '../../../shared/page-navigation/store/page-navigation-store';
 import { navigateToPageByPageId } from '../../routing';
 import {
@@ -257,6 +257,11 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
 
   const buildMessagePayload = async (userPrompt: string) => {
     const brandPageData = brandPageMakerStore.brandPageData;
+
+    // BP-5603: stamp stable uuid ids onto every nested item BEFORE minifying,
+    // so the id the AI is shown (and returns as `item_id`) is the exact id the
+    // executor matches when applying tool calls to this same live model.
+    ensureBrandPageItemIds(brandPageData);
     const headerLogoDraftToken =
       brandPageData.pageHeaderDesktop?.logoImage?.logoDraftToken ??
       uiStore.logoDraftToken;
@@ -269,7 +274,6 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
 
     const websiteContext = {
       metadata: minifyBrandPageMetadata(brandPageData, assets),
-      metadataFull: cloneDeep(brandPageData),
       ...(assets.length > 0 && { assets }),
       websiteTemplateToken: containerStore.designTemplateToken,
       ...(containerStore.designDraftToken && {

package/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.ts

@@ -628,15 +628,15 @@ export const useRichTextEditor = (
       );
       fontSettings.selectedTextColor = hasLogoColorVar(globalStyles.color ?? '')
         ? '#000000'
-        : (globalStyles?.color ?? '#000000');
+        : globalStyles?.color ?? '#000000';
       fontSettings.selectedBackgroundColor = hasLogoColorVar(
         globalStyles?.backgroundColor ?? '',
       )
         ? 'transparent'
-        : (globalStyles?.backgroundColor ?? 'transparent');
+        : globalStyles?.backgroundColor ?? 'transparent';
       lineHeight.value = globalStyles?.lineHeight?.includes('em')
         ? emToPx(globalStyles?.lineHeight ?? '1em')
-        : (globalStyles?.lineHeight ?? '1');
+        : globalStyles?.lineHeight ?? '1';
       letterSpacing.value = letterSpacingValueConvertor.convert(
         globalStyles ?? {},
       );
@@ -658,15 +658,15 @@ export const useRichTextEditor = (
         props.styles?.color ?? '#000000',
       )
         ? '#000000'
-        : (props.styles?.color ?? '#000000');
+        : props.styles?.color ?? '#000000';
       fontSettings.selectedBackgroundColor = hasLogoColorVar(
         props.styles?.backgroundColor ?? '',
       )
         ? 'transparent'
-        : (props.styles?.backgroundColor ?? 'transparent');
+        : props.styles?.backgroundColor ?? 'transparent';
       lineHeight.value = props.styles?.lineHeight?.includes('em')
         ? emToPx(props.styles?.lineHeight ?? '1em')
-        : (props.styles?.lineHeight ?? '1');
+        : props.styles?.lineHeight ?? '1';
       letterSpacing.value = letterSpacingValueConvertor.convert(
         props.styles ?? {},
       );

package/src/brand-page-maker/constants/config-settings-constant.ts

@@ -217,14 +217,14 @@ const PADDING_CONTROL_FIELDS = (
     type: 'slider',
     title: contentSettingsTr(`topPaddingTitle`),
     minLength: 0,
-    maxLength: 200,
+    maxLength: 100,
     groupId,
   },
   bottomPadding: {
     type: 'slider',
     title: contentSettingsTr(`bottomPaddingTitle`),
     minLength: 0,
-    maxLength: 200,
+    maxLength: 100,
     groupId,
   },
 });
@@ -446,9 +446,9 @@ const shopReplaceImageSettings =
     titleReplace: contentSettingsTr(`imageReplaceTitle`),
     contentMediaFieldName: MediaFieldNames.requestPaymentConfig,
     setContentMedia: (
-      _content: ShopContent,
-      _value: SetContentMediaPayload,
-      _index?: number,
+      content: ShopContent,
+      value: SetContentMediaPayload,
+      index?: number,
     ) => '',
     openByDefault: false,
     mediaType: null,

package/src/brand-page-maker/convertors/text-image-display-style.convertor.ts

@@ -11,7 +11,7 @@ import {
 import type { ImagesSectionContent, MediaType } from '@brand-page';
 
 export const getTextMediaOptionsConverterByMediaType = (
-  _mediaType: MediaType,
+  mediaType: MediaType,
 ): ValueConvertor<
   string | null,
   ButtonGroupConfig,

package/src/brand-page-maker/models/button-styles-config.ts

@@ -15,10 +15,8 @@ export const ButtonStyleConfigOptions = [
 
 export type ButtonStyleConfigOption = (typeof ButtonStyleConfigOptions)[number];
 
-export interface ButtonStyleConfig extends Omit<
-  ButtonStyles,
-  'style' | 'template' | 'selectedButtonStyleId'
-> {
+export interface ButtonStyleConfig
+  extends Omit<ButtonStyles, 'style' | 'template' | 'selectedButtonStyleId'> {
   readonly id: string;
   readonly hasShadow: boolean;
   readonly hasSoftShadow?: boolean;

package/src/brand-page-maker/models/content-settings-configs.ts

@@ -156,10 +156,8 @@ export interface ContentSettingsField<TContent> {
   styleName?: string;
 }
 
-export interface ContentSettingsMultiField<TContent, TField> extends Omit<
-  ContentSettingsField<TContent>,
-  'type' | 'role'
-> {
+export interface ContentSettingsMultiField<TContent, TField>
+  extends Omit<ContentSettingsField<TContent>, 'type' | 'role'> {
   type: ItemMultiFieldType;
   role: 'multi';
   fields?: {