@designcrowd/library.brand-page 5.19.0 → 5.19.1-error-html2canvas-2

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

@@ -23,6 +23,7 @@ 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,6 +27,7 @@ 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,6 +18,7 @@ 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,6 +12,7 @@ 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,6 +18,7 @@ export default defineComponent({
       default: false,
     },
   },
+  emits: ['toggle-should-play'],
   data() {
     return {
       visible: false,

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

@@ -40,6 +40,7 @@ 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,6 +552,7 @@ const availableTextFontFamilyOptions = computed(
   () => styleSettingsStore.availableTextFontFamilyOptions,
 );
 
+// eslint-disable-next-line vue/require-prop-types
 const model = defineModel();
 const emit = defineEmits([
   'focus',
@@ -709,7 +710,8 @@ watch(
   () =>
     contentSettingStore.getItem(props.rawId)?.settings?.content?.textItemsStyle
       ?.color,
-  (newColor) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  (_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, useTemplateRef } from 'vue';
+import { computed, reactive, nextTick } from 'vue';
 import {
   SENSITIVE_CONTENT_TYPES,
   type SensitiveContent,
@@ -109,9 +109,6 @@ 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;
 }
 
-const props = defineProps<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,6 +41,7 @@ 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 { tr, commonTr, seoSettingsTr } from '@src/composables/useTranslate';
+import { commonTr, seoSettingsTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

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

@@ -9,7 +9,6 @@ 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,7 +393,6 @@ 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,11 +178,7 @@ import {
   Loader,
 } from '@designcrowd/fe-shared-lib';
 import UseExistingDomainModalMixin from './UseExistingDomainModal.mixin.ts';
-import {
-  tr,
-  commonTr,
-  existingDomainModalTr,
-} from '@src/composables/useTranslate';
+import { 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);
 
-const emit = defineEmits(['update:modelValue']);
+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();
 
-const emit = defineEmits(['on-close', 'on-save']);
+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 { Button, Loader, TextInput } from '@designcrowd/fe-shared-lib';
+import { 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,10 +15,7 @@ import {
   getBrandPageViewModelFromBrandPageModel,
 } from '@brand-page/utils';
 import { STYLE_THEME_KEYS } from '@brand-page/constants';
-import {
-  TEMPLATE_TABS,
-  type TemplateSettingsTemplate,
-} from '@shared/template-settings/models';
+import 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';
@@ -74,7 +71,6 @@ export default defineComponent({
       isBrandSite: computed(
         () => brandPageMakerStore.brandPageType === BRAND_PAGE_TYPES.brandSite,
       ),
-      selectedTab: computed(() => templateSettingsStore.selectedTab.key),
       renderAsImage: computed(() => templateSettingsStore.renderAsImage),
       brandPageMakerUserStore,
       brandPageContainerStore,
@@ -241,10 +237,28 @@ export default defineComponent({
         return '';
       }
 
-      if (this.selectedTab === TEMPLATE_TABS.AI && this.template.contentKey) {
-        if (this.userToken) {
-          previewImageUrl += `&contentKey=${this.template.contentKey}&userToken=${this.userToken}`;
+      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}`;
+          }
         } 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"
+    class="template-preview-container hover:!tw-shadow-[0_0_0_3px] hover:!tw-shadow-info-500 tw-overflow-hidden tw-relative tw-isolate"
     :style="containerStyle"
     :class="{
       '!tw-shadow-[0_0_0_3px] !tw-shadow-info-500':
@@ -55,17 +55,10 @@
           />
         </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>
@@ -73,11 +66,13 @@ 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/template-preview/TemplatePreviewAiBadge.vue

@@ -0,0 +1,12 @@
+<template>
+  <div
+    data-test-ai-design
+    class="tw-flex tw-flex-row tw-absolute tw-top-2.5 tw-left-2.5 tw-rounded-full tw-py-1 tw-px-2 tw-text-white tw-text-xs tw-font-bold tw-z-[25] tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6]"
+  >
+    <Icon name="ai" class="tw-text-white tw-pr-1" size="sm" />
+    <span>AI</span>
+  </div>
+</template>
+<script setup lang="ts">
+import { Icon } from '@designcrowd/fe-shared-lib';
+</script>

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

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

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

@@ -1,4 +1,4 @@
-import { ref, computed, watch, nextTick, onUnmounted } from 'vue';
+import { ref, computed, watch, nextTick } from 'vue';
 import type { BrandPageModel } from '../../../brand-page/models';
 import {
   getInstance as getAiAssistantClient,

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

@@ -201,6 +201,34 @@ const SETTINGS_STYLE_FIElD_GROUPS = (): ContentSettingsFieldGroup[] => {
   ];
 };
 
+/**
+ * Shared Top/Bottom padding sliders (BP-5687). Reuses the same `slider` control
+ * as the Divider block (track + editable number box), range 0–100, continuous.
+ * Spread into a block's `fields` to expose the Padding Control on that block.
+ * Pass the Style field-group id for blocks that use grouped panels.
+ */
+const PADDING_CONTROL_FIELDS = (
+  groupId?: string,
+): {
+  topPadding: ContentSettingsField<Content>;
+  bottomPadding: ContentSettingsField<Content>;
+} => ({
+  topPadding: {
+    type: 'slider',
+    title: contentSettingsTr(`topPaddingTitle`),
+    minLength: 0,
+    maxLength: 100,
+    groupId,
+  },
+  bottomPadding: {
+    type: 'slider',
+    title: contentSettingsTr(`bottomPaddingTitle`),
+    minLength: 0,
+    maxLength: 100,
+    groupId,
+  },
+});
+
 const DEFAULT_TITLE_STYLE_SETTINGS_FILED =
   (): ContentSettingsField<Content> => ({
     type: 'text-style',
@@ -418,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,
@@ -1097,6 +1125,7 @@ export const IMAGE_GALLERY_CONTENT_SETTINGS_CONFIG = (): ContentSettingsConfig<
       defaultValue: false,
       visibilityAssessor: imageGalleryFieldVisibilityAssessor,
     },
+    ...PADDING_CONTROL_FIELDS(),
   },
   isEnabled: true,
   isLocked: (features) => !features.canAddImageContents,
@@ -1136,6 +1165,7 @@ export const VIDEO_CONTENT_SETTINGS_CONFIG = (): ContentSettingsConfig<
       label: contentSettingsTr(`muteLabel`),
       valueConvertor: videoContentStateConvertor,
     },
+    ...PADDING_CONTROL_FIELDS(),
   },
   isEnabled: true,
   isLocked: (features) => !features.canAddVideoContents,
@@ -1278,6 +1308,7 @@ export const TEXT_CONTENT_SETTINGS_CONFIG = (): ContentSettingsConfig<
       variant: 'icon',
       visibilityAssessor: brandSiteTypeVisibilityAssessor,
     },
+    ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     backgroundColor: {
       type: 'color',
       defaultValue: {},
@@ -1736,6 +1767,7 @@ export const MAP_CONTENT_SETTINGS_CONFIG =
         type: 'address',
         title: contentSettingsTr(`addressTitle`),
       },
+      ...PADDING_CONTROL_FIELDS(),
     },
     isEnabled: true,
     isLocked: (features) => !features.canAddMapContents,
@@ -1787,6 +1819,7 @@ export const MAILING_LIST_CONTENT_SETTINGS_CONFIG =
       },
       titleStyle: DEFAULT_TITLE_STYLE_SETTINGS_FILED_WITH_TITLE(),
       buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     },
     isEnabled: true,
     isLocked: false,
@@ -1971,6 +2004,7 @@ export const REQUEST_PAYMENT_CONTENT_SETTINGS_CONFIG =
         defaultValue: {},
         label: contentSettingsTr(`buttonTextStyleLabel`),
       },
+      ...PADDING_CONTROL_FIELDS(REQUEST_PAYMENT_GROUPS.style),
     },
     isEnabled: (features) => features.canAddRequestPaymentContents,
     isLocked: false,
@@ -2038,6 +2072,7 @@ export const SUPPORT_ME_CONTENT_SETTINGS_CONFIG =
         label: contentSettingsTr(`itemStyleLabel`),
       },
       buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     },
     isEnabled: (features) => features.canAddRequestPaymentContents,
     isLocked: false,
@@ -2170,6 +2205,7 @@ export const CONTACT_FORM_SETTINGS_CONFIG =
         variant: 'icon',
         visibilityAssessor: brandSiteTypeVisibilityAssessor,
       },
+      ...PADDING_CONTROL_FIELDS(CONTACT_FORM_GROUPS.style),
       titleStyle: DEFAULT_TITLE_STYLE_SETTINGS_FILED_WITH_TITLE(),
       descriptionStyle: DEFAULT_DESCRIPTION_STYLE_FILED(),
       buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
@@ -2229,6 +2265,7 @@ export const BANNER_SECTION_SETTINGS_CONFIG =
         groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
         variant: 'icon',
       },
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
       overlayColor: {
         type: 'color',
         title: contentSettingsTr(`overlayColorTitle`),
@@ -2507,6 +2544,7 @@ export const ABOUT_SECTION_SETTINGS_CONFIG =
         groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
         variant: 'icon',
       },
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
       titleStyle: DEFAULT_TITLE_STYLE_SETTINGS_FILED_WITH_TITLE(),
       paragraphStyle: {
         type: 'text-style',
@@ -2594,6 +2632,7 @@ export const IMAGES_SECTION_SETTINGS_CONFIG =
     ],
     fields: {
       displayStyle: TEXT_MEDIA_DISPLAY_STYLE_FIELD(MEDIA_TYPES.image),
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
       aspectRatio: {
         type: 'radio',
         role: 'multi',
@@ -2681,6 +2720,7 @@ export const TESTIMONIALS_SECTION_SETTINGS_CONFIG =
         groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
         variant: 'icon',
       },
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
       title: {
         type: 'text',
         placeholder: contentSettingsTr(`titlePlaceholder`),
@@ -2793,6 +2833,7 @@ export const SOCIAL_LINKS_SETTINGS_CONFIG =
         optionsConvertor: socialLinksIconDisplayStyleConvertor,
         variant: 'icon',
       },
+      ...PADDING_CONTROL_FIELDS(SOCIAL_LINKS_GROUPS.style),
       titleStyle: {
         type: 'text-style',
         groupId: SOCIAL_LINKS_GROUPS.style,
@@ -2905,6 +2946,7 @@ export const SHAPES_SECTION_SETTINGS_CONFIG =
     ],
     fields: {
       displayStyle: TEXT_MEDIA_DISPLAY_STYLE_FIELD(MEDIA_TYPES.shape),
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
       size: IMAGE_SIZE_FIELD(),
       title: TEXT_MEDIA_TITLE_FIELD(),
       description: TEXT_MEDIA_DESCRIPTION_FIELD(),
@@ -2942,6 +2984,7 @@ export const SHAPES_SECTION_SETTINGS_CONFIG =
             ? MAX_BS_MEDIA_AND_IMAGE_ITEMS
             : MAX_BP_MEDIA_AND_IMAGE_ITEMS,
       },
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     },
     isEnabled: true,
     isLocked: false,
@@ -3003,6 +3046,7 @@ export const SHOP_SECTION_SETTINGS_CONFIG = (): ContentSettingsConfig<
       optionsConvertor: shopAspectRatioConvertor,
       visibilityAssessor: shopImageOptionVisibilityAssessor,
     },
+    ...PADDING_CONTROL_FIELDS(REQUEST_PAYMENT_GROUPS.style),
     title: {
       type: 'title',
       groupId: REQUEST_PAYMENT_GROUPS.settings,
@@ -3166,6 +3210,7 @@ export const BOOKING_SECTION_SETTINGS_CONFIG =
         visibilityAssessor: (c, b) =>
           personalisationOverrideVisibility(c, b, 'buttonText'),
       },
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
       backgroundStyle: {
         type: 'color',
         groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,

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

@@ -6,6 +6,7 @@ import {
   ALIGN_RIGHT_ALIGNED,
   ALIGN_RIGHT_FULL_IMAGE,
   TEXT_ONLY,
+  ABOUT_DEFAULT_PADDING,
 } from '@brand-page/constants';
 
 import type { AboutSectionContent } from '@brand-page';
@@ -76,11 +77,18 @@ export const aboutDisplayStyleConvertor: ValueConvertor<
   convertBack(config: ButtonGroupConfig): Partial<AboutSectionContent> {
     const selectedOption = config.options.find((v) => v.isSelected);
 
+    // Switching display style adopts that style's canonical look — like the
+    // textAlign reset below — including its default block padding (a flat 32
+    // for every About style).
+    const padding = ABOUT_DEFAULT_PADDING;
+
     if (!selectedOption || selectedOption.value === ALIGN_CENTERED) {
       const textAlign = 'center';
 
       return {
         displayStyle: selectedOption?.value,
+        topPadding: padding,
+        bottomPadding: padding,
         titleStyle: {
           textAlign,
         },
@@ -94,6 +102,8 @@ export const aboutDisplayStyleConvertor: ValueConvertor<
 
     return {
       displayStyle: selectedOption?.value,
+      topPadding: padding,
+      bottomPadding: padding,
       titleStyle: {
         textAlign,
       },

package/src/brand-page-maker/convertors/banner-align-display-style.convertor.ts

@@ -15,6 +15,7 @@ import {
   ALIGN_TOP_FULL_IMAGE,
   ALIGN_BOTTOM_FULL_IMAGE,
   ALIGN_MIDDLE_FULL_IMAGE,
+  bannerDisplayStyleDefaultPadding,
 } from '@brand-page/constants';
 import type { BannerSectionContent } from '@brand-page';
 
@@ -172,8 +173,15 @@ export const bannerAlignDisplayStyleConvertor: ValueConvertor<
       textAlign = 'center';
     }
 
+    // Switching display style adopts that style's canonical look — like the
+    // textAlign resets above — including its default block padding. Full-bleed
+    // image styles default to 0 (image flush to the edges); the rest to 32.
+    const padding = bannerDisplayStyleDefaultPadding(selectedOption?.value);
+
     return {
       displayStyle: selectedOption?.value,
+      topPadding: padding,
+      bottomPadding: padding,
       titleStyle: {
         textAlign,
       },

package/src/brand-page-maker/convertors/contact-layout-style.convertor.test.ts

@@ -0,0 +1,50 @@
+import { describe, test, expect } from 'vitest';
+import { contactLayoutStyleConvertor } from './contact-layout-style.convertor';
+import {
+  ALIGN_CENTERED,
+  ALIGN_CARD_CENTER,
+  ALIGN_CARD_CENTER_IMAGE,
+  ALIGN_LEFT_FULL_IMAGE,
+  TEXT_ONLY,
+} from '@brand-page/constants';
+
+const configWithSelected = (selected: string) => ({
+  options: contactLayoutStyleConvertor
+    .convert(selected)
+    .options.map((option) => ({
+      ...option,
+      isSelected: option.value === selected,
+    })),
+});
+
+describe('contact-layout-style.convertor', () => {
+  test.each([
+    [ALIGN_CARD_CENTER, 32, 'center'],
+    [ALIGN_CENTERED, 32, 'center'],
+    [ALIGN_CARD_CENTER_IMAGE, 0, 'center'],
+    [TEXT_ONLY, 32, 'left'],
+    [ALIGN_LEFT_FULL_IMAGE, 0, 'left'],
+  ])(
+    'convertBack should apply the default padding and text alignment for %s',
+    (layoutStyle, padding, textAlign) => {
+      const result = contactLayoutStyleConvertor.convertBack(
+        configWithSelected(layoutStyle),
+      );
+
+      expect(result).toStrictEqual({
+        layoutStyle,
+        topPadding: padding,
+        bottomPadding: padding,
+        titleStyle: {
+          textAlign,
+        },
+        descriptionStyle: {
+          textAlign,
+        },
+        buttonTextStyle: {
+          textAlign: 'center',
+        },
+      });
+    },
+  );
+});

package/src/brand-page-maker/convertors/contact-layout-style.convertor.ts

@@ -6,6 +6,7 @@ import {
   ALIGN_CARD_CENTER_IMAGE,
   TEXT_ONLY,
   ALIGN_CARD_CENTER,
+  CONTACT_FORM_LAYOUT_DEFAULT_PADDING,
 } from '@brand-page/constants';
 import type { ContactFormContent } from '@brand-page';
 
@@ -84,8 +85,15 @@ export const contactLayoutStyleConvertor: ValueConvertor<
       textAlign = 'left';
     }
 
+    // Switching layout adopts that layout's canonical look — same as the
+    // textAlign resets below — including its default block padding.
+    const padding =
+      CONTACT_FORM_LAYOUT_DEFAULT_PADDING[selectedOption?.value ?? ''] ?? 0;
+
     return {
       layoutStyle: selectedOption?.value,
+      topPadding: padding,
+      bottomPadding: padding,
       titleStyle: {
         textAlign,
       },