@designcrowd/library.brand-page 5.16.3 → 5.16.4-abtest-1

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

@@ -784,6 +784,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     visibleContentOptions(): AddContentOption<any>[];
     contentListItems(): ContentItem<Content>[];
 }, {
+    onCapturePreviewSnapshot(): void;
     onAddContentOptionClicked(option: AddContentOption<any>): Promise<void>;
     onLockedContentClicked(type: string): Promise<void>;
     getCategoryLabel(category: string): string;

package/lib/src/shared/content-settings/components/content-settings/ContentSettings.mixin.js

@@ -75,6 +75,9 @@ export default defineComponent({
         },
     },
     methods: {
+        onCapturePreviewSnapshot() {
+            this.$emit('capture-preview-snapshot');
+        },
         async onAddContentOptionClicked(option) {
             const newItem = await this.contentSettingsStore.addItemByType({
                 type: option.type,

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

@@ -510,6 +510,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     personalisationRole(): PersonalisationRole | undefined;
 }, {
     onDelete(): void;
+    captureSnapshotBeforeModal(): void;
+    onCaptureSnapshot(): void;
     toggleButtonClick(): void;
     sendSelectContentEvent(): void;
     onPersonalisationRoleChange(payload: UpdateItemValuePayload<PersonalisationRole | undefined>): void;

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

@@ -134,6 +134,12 @@ export default defineComponent({
         onDelete() {
             this.$emit('on-delete');
         },
+        captureSnapshotBeforeModal() {
+            this.$emit('capture-snapshot-before-modal');
+        },
+        onCaptureSnapshot() {
+            this.$emit('capture-preview-snapshot');
+        },
         toggleButtonClick() {
             const $sideBarContent = document.querySelector(`#${SIDE_BAR_CONTENT_ID}`);
             if (!$sideBarContent) {

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

@@ -27,6 +27,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     getValue: import("vue").ComputedRef<(id: string, fieldName: string) => string | Content | undefined>;
     brandPageData: import("vue").ComputedRef<import("../../../../brand-page").BrandPageModel>;
     isAdmin: import("vue").ComputedRef<boolean>;
+    isDesignCom: import("vue").ComputedRef<boolean>;
     canUseRichTextEditor: import("vue").ComputedRef<boolean>;
     brandPageType: import("vue").ComputedRef<"default" | "brandSite" | "brandContact">;
     isBrandPageOrIsBrandContact: import("vue").ComputedRef<boolean>;
@@ -62,6 +63,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             950?: string | undefined;
         };
     }>;
+    snapshotBase64: import("vue").ComputedRef<string | null>;
     contentSettingsStore: import("pinia").Store<"uiContentSettings", import("../../store").ContentSettingsState, {
         contentErrorCount(): number;
         getContent(state: {
@@ -785,6 +787,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>;
 }, {
     isToggled: boolean;
+    richTextEditorKey: number;
 }, {
     content(): Content;
     contentType(): string;
@@ -805,6 +808,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     showTextBg(): boolean;
     showToggle(): boolean | undefined;
     disableTransparent(): boolean;
+    generateText(): string;
+    showGenerateText(): boolean;
+    plainTextValue(): string;
 }, {
     onFieldChanged(payload: UpdateItemValuePayload<unknown>): void;
     onFieldChangeLogo(): void;
@@ -816,7 +822,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }): void;
     onToggleInput(isToggled: boolean): void;
     onToggleStateChange(isToggled: boolean): void;
+    onUseGeneratedText(generatedText: string): void;
     clearFieldValue(): void;
+    onCaptureSnapshot(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
         type: StringConstructor;

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

@@ -3,11 +3,14 @@ import { VIEWPORTS, } from '../../../../brand-page';
 import { UI_EVENT_SOURCES } from '../../../models';
 import { useUiContentSettingsStore } from '../../store';
 import { useUiSideBarStore } from '../../../side-bar/store';
-import { useBrandPageMakerStore, useBrandPageMakerUserStore, useUiStore, } from '../../../../brand-page-maker/stores';
+import { useBrandPageContainerStore, useBrandPageMakerStore, useBrandPageMakerUserStore, useUiStore, useSnapshotStore, } from '../../../../brand-page-maker/stores';
 import { SIDE_BAR_TAB_NAMES } from '../../../../brand-page-maker/constants';
 import { ITEM_FIELD_TYPES, } from '../../../../brand-page-maker/models';
 import { useUiPageSettingsStore } from '../../../page-settings/store';
 import { PAGE_SECTIONS } from '../../../page-settings/models';
+import { commonTr } from '../../../../composables/useTranslate';
+import { getPlainTextFromRTE, replaceTextInRTE, } from '../../../../brand-page-maker/utils';
+import { isDefaultContentText } from '../../utils';
 import { useUiLogoSettingsStore } from '../../../logo-settings/store';
 const RTE_ALLOWED_SECTION_TYPES = [
     'banner-section',
@@ -16,11 +19,18 @@ const RTE_ALLOWED_SECTION_TYPES = [
     'images-section',
     'shapes-section',
 ];
+const AI_ALLOWED_SECTION_TYPES = [
+    'banner-section',
+    'text',
+    'about-section',
+    'testimonials-section',
+];
 const RTE_DISALLOWED_STYLE_FIELD_NAMES = [
     'descriptionStyle',
     'titleStyle',
     'textStyle',
 ];
+const AI_ALLOWED_FIELD_NAMES = ['description', 'title', 'text', 'paragraph'];
 const RTE_DISALLOWED_FIELD_NAMES = ['buttonText'];
 export default defineComponent({
     props: {
@@ -50,6 +60,8 @@ export default defineComponent({
         const uiStore = useUiStore();
         const sideBarStore = useUiSideBarStore();
         const pageSettingsStore = useUiPageSettingsStore();
+        const brandPageContainerStore = useBrandPageContainerStore();
+        const snapshotStore = useSnapshotStore();
         const uiLogoSettingsStore = useUiLogoSettingsStore();
         return {
             getFieldSettings: computed(() => contentSettingsStore.getFieldSettings),
@@ -57,10 +69,12 @@ export default defineComponent({
             getValue: computed(() => contentSettingsStore.getValue),
             brandPageData: computed(() => brandPageMakerStore.brandPageData),
             isAdmin: computed(() => userStore.isAdmin),
+            isDesignCom: computed(() => brandPageContainerStore.isDesignCom),
             canUseRichTextEditor: computed(() => userStore.features.canUseRichTextEditor),
             brandPageType: computed(() => brandPageMakerStore.brandPageType),
             isBrandPageOrIsBrandContact: computed(() => brandPageMakerStore.isBrandPageOrIsBrandContact),
             logoTheme: computed(() => uiStore.logoTheme),
+            snapshotBase64: computed(() => snapshotStore.snapshotBase64),
             contentSettingsStore,
             brandPageMakerStore,
             userStore,
@@ -72,6 +86,7 @@ export default defineComponent({
     },
     data: () => ({
         isToggled: true,
+        richTextEditorKey: 0,
     }),
     computed: {
         content() {
@@ -175,6 +190,19 @@ export default defineComponent({
         disableTransparent() {
             return this.field.disableTransparent || false;
         },
+        generateText() {
+            return commonTr('generateText');
+        },
+        showGenerateText() {
+            return (AI_ALLOWED_SECTION_TYPES.includes(this.type) &&
+                AI_ALLOWED_FIELD_NAMES.includes(this.fieldName));
+        },
+        plainTextValue() {
+            const plainText = getPlainTextFromRTE(this.value);
+            if (isDefaultContentText(plainText))
+                return '';
+            return plainText;
+        },
     },
     watch: {
         fieldType() {
@@ -242,6 +270,18 @@ export default defineComponent({
         onToggleStateChange(isToggled) {
             this.isToggled = isToggled;
         },
+        onUseGeneratedText(generatedText) {
+            let formattedText = generatedText;
+            if (this.showRichTextEditor && typeof this.value === 'string') {
+                formattedText = replaceTextInRTE(this.value, generatedText);
+            }
+            this.contentSettingsStore.updateItemValue({
+                id: this.id,
+                name: this.fieldName,
+                value: formattedText,
+            });
+            this.richTextEditorKey = this.richTextEditorKey + 1;
+        },
         clearFieldValue() {
             const fieldType = this.field.defaultValue;
             if (typeof fieldType === 'string') {
@@ -252,5 +292,8 @@ export default defineComponent({
                 });
             }
         },
+        onCaptureSnapshot() {
+            this.$emit('capture-preview-snapshot');
+        },
     },
 });

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

@@ -469,6 +469,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     personalisationRole(): PersonalisationRole | undefined;
 }, {
     onBackClick(): void;
+    onCaptureSnapshotBeforeModal(): void;
     onToggleGroupCollapseClick(groupId: string): void;
     onPersonalisationRoleChange(payload: UpdateItemValuePayload<PersonalisationRole | undefined>): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -164,6 +164,9 @@ export default defineComponent({
                 eventSource: UI_EVENT_SOURCES.contentSettings,
             });
         },
+        onCaptureSnapshotBeforeModal() {
+            this.$emit('capture-preview-snapshot');
+        },
         onToggleGroupCollapseClick(groupId) {
             if (!this.id) {
                 return;

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

@@ -28,7 +28,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<Content>;
         required: true;
     };
-}>, {}, {
+    isDesignCom: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+}>, {
+    snapshotBase64: import("vue").ComputedRef<string | null>;
+}, {
     changeDebounce: DebounceHandle | undefined;
     options: TestimonialItems[];
     isEmpty: boolean[];
@@ -58,7 +65,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         name: string;
         value: string;
     }, index: number): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "on-intent-image-replace")[], "update:modelValue" | "on-intent-image-replace", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    getPlainTextValue(index: number): string;
+    onUseGeneratedText(generatedText: string, index: number): void;
+    onCaptureSnapshot(): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "capture-preview-snapshot" | "on-intent-image-replace")[], "update:modelValue" | "capture-preview-snapshot" | "on-intent-image-replace", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
         type: StringConstructor;
         required: true;
@@ -83,8 +93,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<Content>;
         required: true;
     };
+    isDesignCom: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onOn-intent-image-replace"?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    "onCapture-preview-snapshot"?: ((...args: any[]) => any) | undefined;
+}>, {
+    isDesignCom: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -1,7 +1,10 @@
-import { defineComponent } from 'vue';
+import { defineComponent, computed } from 'vue';
 import { EMPTY_TESTIMONIAL, MAX_DESCRIPTION_LENGTH, MAX_LENGTH_ERROR_MESSAGE, MAX_TITLE_LENGTH, } from '../../../../brand-page';
 import debounce from 'lodash.debounce';
 import cloneDeep from 'lodash.clonedeep';
+import { useSnapshotStore } from '../../../../brand-page-maker/stores';
+import { getPlainTextFromRTE } from '../../../../brand-page-maker/utils';
+import { isDefaultContentText } from '../../utils';
 const DEBOUNCE_IN_MS = 250;
 export default defineComponent({
     props: {
@@ -29,8 +32,23 @@ export default defineComponent({
             type: Object,
             required: true,
         },
+        isDesignCom: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    },
+    setup() {
+        const snapshotStore = useSnapshotStore();
+        return {
+            snapshotBase64: computed(() => snapshotStore.snapshotBase64),
+        };
     },
-    emits: ['update:modelValue', 'on-intent-image-replace'],
+    emits: [
+        'update:modelValue',
+        'on-intent-image-replace',
+        'capture-preview-snapshot',
+    ],
     data: () => ({
         changeDebounce: undefined,
         options: [],
@@ -139,5 +157,24 @@ export default defineComponent({
             this.options[index][payload.name] = payload.value;
             this.emitChange();
         },
+        getPlainTextValue(index) {
+            const text = this.options[index]?.testimonials || '';
+            const plainText = getPlainTextFromRTE(text);
+            if (isDefaultContentText(plainText)) {
+                return '';
+            }
+            return plainText;
+        },
+        onUseGeneratedText(generatedText, index) {
+            // Update the testimonial text
+            this.options[index].testimonials = generatedText;
+            this.isModified[index] = true;
+            this.isEmpty[index] = false;
+            // Emit the change
+            this.emitChange();
+        },
+        onCaptureSnapshot() {
+            this.$emit('capture-preview-snapshot');
+        },
     },
 });

package/lib/src/shared/content-settings/components/text-items-field/TextItemsField.mixin.d.ts

@@ -37,11 +37,19 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
         default: undefined;
     };
-}>, {}, {
+    isDesignCom: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+}>, {
+    snapshotBase64: import("vue").ComputedRef<string | null>;
+}, {
     changeDebounce: DebounceHandle | undefined;
     options: TextItem[];
     isEmpty: boolean[];
     isModified: boolean[];
+    textAreaKeys: number[];
     maxTextLength: number;
     textEmptyErrorMessage: any;
     textMaxLengthErrorMessage: any;
@@ -70,7 +78,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         name: string;
         value: string;
     }, index: number): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:model-value"[], "update:model-value", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    onUseGeneratedText(generatedText: string, index: number): void;
+    getPlainTextValue(index: number): string;
+    onCaptureSnapshot(): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("capture-preview-snapshot" | "update:model-value")[], "capture-preview-snapshot" | "update:model-value", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
         type: StringConstructor;
         required: true;
@@ -105,9 +116,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
         default: undefined;
     };
+    isDesignCom: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
 }>> & Readonly<{
     "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
+    "onCapture-preview-snapshot"?: ((...args: any[]) => any) | undefined;
 }>, {
+    isDesignCom: boolean;
     contentType: string;
     showRichTextEditor: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/lib/src/shared/content-settings/components/text-items-field/TextItemsField.mixin.js

@@ -1,8 +1,11 @@
-import { defineComponent } from 'vue';
+import { defineComponent, computed } from 'vue';
 import { FONT_SIZE_BODY, MAX_LENGTH_ERROR_MESSAGE, MAX_TEXT_LENGTH, TEXT_EMPTY, TEXT_STYLE_TYPES, } from '../../../../brand-page';
 import debounce from 'lodash.debounce';
 import cloneDeep from 'lodash.clonedeep';
 import { escapeContentText } from '../../../../brand-page/utils';
+import { useSnapshotStore } from '../../../../brand-page-maker/stores';
+import { getPlainTextFromRTE, replaceTextInRTE, } from '../../../../brand-page-maker/utils';
+import { isDefaultContentText } from '../../utils';
 const DEBOUNCE_IN_MS = 250;
 export default defineComponent({
     props: {
@@ -40,13 +43,25 @@ export default defineComponent({
             required: false,
             default: undefined,
         },
+        isDesignCom: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    },
+    setup() {
+        const snapshotStore = useSnapshotStore();
+        return {
+            snapshotBase64: computed(() => snapshotStore.snapshotBase64),
+        };
     },
-    emits: ['update:model-value'],
+    emits: ['update:model-value', 'capture-preview-snapshot'],
     data: () => ({
         changeDebounce: undefined,
         options: [],
         isEmpty: [],
         isModified: [],
+        textAreaKeys: [],
         maxTextLength: MAX_TEXT_LENGTH,
         textEmptyErrorMessage: TEXT_EMPTY(),
         textMaxLengthErrorMessage: MAX_LENGTH_ERROR_MESSAGE(),
@@ -54,6 +69,7 @@ export default defineComponent({
     }),
     async created() {
         this.options = cloneDeep(this.value);
+        this.textAreaKeys = new Array(this.options.length).fill(0);
         if (!this.changeDebounce) {
             this.changeDebounce = debounce(this.emitChange, DEBOUNCE_IN_MS);
         }
@@ -137,6 +153,29 @@ export default defineComponent({
             this.options[index][payload.name] = payload.value;
             this.emitChange();
         },
+        onUseGeneratedText(generatedText, index) {
+            // Format text for rich text editor if enabled
+            const formattedText = this.showRichTextEditor
+                ? replaceTextInRTE(this.options[index].text, generatedText)
+                : generatedText;
+            // Update data
+            this.options[index].text = formattedText;
+            this.isModified[index] = true;
+            this.textAreaKeys[index] = (this.textAreaKeys[index] || 0) + 1;
+            // Notify parent
+            this.emitChange();
+        },
+        getPlainTextValue(index) {
+            const text = this.options[index]?.text || '';
+            const plainText = getPlainTextFromRTE(text);
+            if (isDefaultContentText(plainText)) {
+                return '';
+            }
+            return plainText;
+        },
+        onCaptureSnapshot() {
+            this.$emit('capture-preview-snapshot');
+        },
     },
     watch: {
         options: {

package/lib/src/shared/content-settings/utils.d.ts

@@ -5,3 +5,4 @@ export declare function isUpdateItemValuePayload<T>(payload: UpdateItemValuePayl
 export declare const getContentSettingsTemplate: (type: ContentType) => ContentSettingsConfig<any> | null;
 export declare const getContentSettingDisplayName: (template: ContentSettingsConfig<any> | null | undefined) => string;
 export declare const getContentSettingsFields: (id: string, template: ContentSettingsConfig<any>, getValue: (id: string, fieldName: string) => Content | string | undefined) => Field[];
+export declare const isDefaultContentText: (text: string) => boolean;

package/lib/src/shared/content-settings/utils.js

@@ -1,5 +1,6 @@
 import { ESCAPED_NEWLINE_CHARACTER } from '../../constants/ui';
 import { CONTENT_SETTINGS_CONFIGS } from '../../brand-page-maker/constants';
+import { contentSettingsTr } from '../../composables/useTranslate';
 export function isUpdateItemValuePayload(payload) {
     return !(!payload || !payload.id || !payload.name || !payload.value);
 }
@@ -41,3 +42,8 @@ export const getContentSettingsFields = (id, template, getValue) => {
         .filter((field) => field.shouldRender !== false)
         .filter((field) => !hiddenFields.find((f) => f == field.name));
 };
+export const isDefaultContentText = (text) => {
+    return (text === contentSettingsTr(`thisIsABannerTitle`) ||
+        text === contentSettingsTr(`aboutSectionTitle`) ||
+        text === contentSettingsTr(`defaultTextValue`));
+};

package/lib/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.d.ts

@@ -457,7 +457,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     getBusinessName(): string | undefined;
     hasPurchasedDomains(): boolean;
     isActiveDomain(): boolean;
-    showUpsellRotation(): boolean;
 }, {
     closeModal(): void;
     onCopyUrlClicked(): void;

package/lib/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.js

@@ -133,10 +133,6 @@ export default defineComponent({
                 this.brandPageContainerStore.customDomain.status ===
                     CUSTOM_DOMAIN_STATUSES.active);
         },
-        showUpsellRotation() {
-            return (this.abTests.bp_4092_rotating_upsells_at_publish &&
-                this.abTests.bp_4092_rotating_upsells_at_publish.isVariation);
-        },
     },
     watch: {
         customDomain(newCustomDomain) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.16.3",
+  "version": "5.16.4-abtest-1",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "@ckpack/vue-color": "1.4.1",
-    "@designcrowd/fe-shared-lib": "1.4.3",
+    "@designcrowd/fe-shared-lib": "1.5.0",
     "@pinia/nuxt": "0.11.0",
     "@storybook/react": "9.0.4",
     "@tiptap/extension-bubble-menu": "^2.14.0",

package/src/brand-page/models/brand-page-context.model.ts

@@ -48,14 +48,15 @@ export interface AbTestResult {
 
 const AB_TEST_KEYS = {
   BP_3926_FREEMIUM_WATERMARK: 'bc-bp-3926-freemium-cta-in-website-editor',
-  BP_4092_ROTATING_UPSELLS_AT_PUBLISH:
-    'bc-bp-4092-rotating-upsells-at-website-publish',
+  BP_4572_AI_TEXT_GENERATION_POST_PURCHASE:
+    'bc-bp-4572-ai-text-generation-post-purchase',
 };
 
 export interface AbTest {
   bp_3926_freemium_watermark?: AbTestResult;
-  bp_4092_rotating_upsells_at_publish?: AbTestResult;
+  bp_4572_ai_text_generation_post_purchase?: AbTestResult;
 }
+
 export const MEDIA_SIZES = {
   size1x: 'size1x',
   size2x: 'size2x',
@@ -125,5 +126,14 @@ export const getAbTestResults = (
     );
   }
 
+  // AB Test for BP-4572 - AI Text Generation Post Purchase
+
+  if (abtestKeyValues[AB_TEST_KEYS.BP_4572_AI_TEXT_GENERATION_POST_PURCHASE]) {
+    abTests.bp_4572_ai_text_generation_post_purchase = getValueType(
+      AB_TEST_KEYS.BP_4572_AI_TEXT_GENERATION_POST_PURCHASE,
+      abtestKeyValues[AB_TEST_KEYS.BP_4572_AI_TEXT_GENERATION_POST_PURCHASE],
+    );
+  }
+
   return abTests;
 };

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

@@ -32,6 +32,7 @@ import {
   useBrandPageMakerUserStore,
   useLocalisedRouteStore,
   useUiStore,
+  useSnapshotStore,
   useVideoStore,
 } from '../../stores';
 import type { AdminPreviewLogoTemplateModel } from '../../stores/admin-logo-settings';
@@ -47,6 +48,7 @@ import { useProductConfigStore } from '../../../brand-page-maker/stores/product-
 import type { UpdateItemValuePayload } from '../../../shared/content-settings/models';
 import { UPGRADE_CTA_LOCATIONS } from '../../composables/useEventTracker';
 import { commonTr } from '../../../composables/useTranslate';
+import { useSnapshot } from '../../../composables/useSnapshot';
 
 export interface BrandPageMakerViewModel {
   adminPreviewLogoTemplateModels?: AdminPreviewLogoTemplateModel[];
@@ -87,6 +89,8 @@ export default defineComponent({
     const productSettingStore = useProductConfigStore();
     const router = useRouter();
     const localisedRouteStore = useLocalisedRouteStore();
+    const snapshotStore = useSnapshotStore();
+    const { captureSnapshot } = useSnapshot();
     const videoStore = useVideoStore();
 
     return {
@@ -145,6 +149,8 @@ export default defineComponent({
       shopSettingStore,
       productSettingStore,
       router,
+      snapshotStore,
+      captureSnapshot,
       videoStore,
     };
   },
@@ -160,6 +166,9 @@ export default defineComponent({
     previewContainer(): any {
       return this.$refs.previewContainer;
     },
+    previewContent(): any {
+      return this.$refs.previewContent;
+    },
   },
   async created() {
     if (
@@ -305,6 +314,28 @@ export default defineComponent({
       }
     },
 
+    async handleCaptureSnapshot() {
+      if (!this.previewContent) {
+        return;
+      }
+
+      this.snapshotStore.setIsCapturing(true);
+
+      try {
+        const snapshot = await this.captureSnapshot(this.previewContent);
+
+        if (snapshot) {
+          this.snapshotStore.setBase64Snapshot(snapshot);
+        } else {
+          console.warn('⚠️ Snapshot capture returned null');
+        }
+      } catch (error) {
+        console.error('❌ Failed to capture snapshot:', error);
+      } finally {
+        this.snapshotStore.setIsCapturing(false);
+      }
+    },
+
     onResizeWithDebounce() {
       if (this.debounceOnResize) {
         this.debounceOnResize();

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.vue

@@ -61,7 +61,7 @@
             :has-quick-links="isPublished"
             :container="previewContainer"
           >
-            <div class="tw-h-full">
+            <div ref="previewContent" class="tw-h-full">
               <PreviewWithState :device-mode="deviceMode" />
             </div>
           </Device>
@@ -101,6 +101,7 @@
           <component
             :is="selectedTabName"
             v-if="selectedTabName !== 'Preview'"
+            @capture-preview-snapshot="handleCaptureSnapshot"
           />
         </template>
       </SideBar>