@designcrowd/library.brand-page 5.16.3-background-7 → 5.16.3-background-9

package/lib/src/{CreatedOnBrandCrowd-de-de-YFZqI0x7.js → CreatedOnBrandCrowd-de-de--KpngFdf.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BdYJIcz_.js";
+import { _ as t } from "./lib-BIGyHbSf.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-oCydCj0r.js → CreatedOnBrandCrowd-en-us-DtxY4Z2d.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BdYJIcz_.js";
+import { _ as t } from "./lib-BIGyHbSf.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-8LWCIMUL.js → CreatedOnBrandCrowd-es-es-uDQh1CTo.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BdYJIcz_.js";
+import { _ as t } from "./lib-BIGyHbSf.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-HZ_V70no.js → CreatedOnBrandCrowd-fr-ca-BiB8cMX_.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BdYJIcz_.js";
+import { _ as t } from "./lib-BIGyHbSf.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-HZ_V70no.js → CreatedOnBrandCrowd-fr-fr-BiB8cMX_.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BdYJIcz_.js";
+import { _ as t } from "./lib-BIGyHbSf.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-7jPL-cgd.js → CreatedOnBrandCrowd-pt-br-D3sXSjw8.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BdYJIcz_.js";
+import { _ as t } from "./lib-BIGyHbSf.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-7jPL-cgd.js → CreatedOnBrandCrowd-pt-pt-D3sXSjw8.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BdYJIcz_.js";
+import { _ as t } from "./lib-BIGyHbSf.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-D-SliPlT.js → CreatedOnDcom-de-de-CMssXwxW.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-BdYJIcz_.js";
+import { _ as e } from "./lib-BIGyHbSf.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-DWB_vdQE.js → CreatedOnDcom-en-us-CagKWzBt.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-BdYJIcz_.js";
+import { _ as e } from "./lib-BIGyHbSf.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-DMuIffFr.js → CreatedOnDcom-es-es-DGmFkW7a.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-BdYJIcz_.js";
+import { _ as e } from "./lib-BIGyHbSf.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-DM8vq9tc.js → CreatedOnDcom-fr-ca-BEG1Lwj5.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-BdYJIcz_.js";
+import { _ as e } from "./lib-BIGyHbSf.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-8yITfFk9.js → CreatedOnDcom-fr-fr-o4G0x8pw.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-BdYJIcz_.js";
+import { _ as e } from "./lib-BIGyHbSf.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-BlTWg3Np.js → CreatedOnDcom-pt-br-iTLOgDpS.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-BdYJIcz_.js";
+import { _ as M } from "./lib-BIGyHbSf.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-L8gg-C55.js → CreatedOnDcom-pt-pt-D3-ovGCA.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-BdYJIcz_.js";
+import { _ as M } from "./lib-BIGyHbSf.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

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

@@ -37,6 +37,7 @@ export interface AbTestResult {
 export interface AbTest {
     bp_3926_freemium_watermark?: AbTestResult;
     bp_4092_rotating_upsells_at_publish?: AbTestResult;
+    bp_4572_ai_text_generation_post_purchase?: AbTestResult;
 }
 export declare const MEDIA_SIZES: {
     readonly size1x: "size1x";

package/lib/src/brand-page/models/brand-page-context.model.js

@@ -25,6 +25,7 @@ export const AB_TEST_FLAG = {
 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 const MEDIA_SIZES = {
     size1x: 'size1x',
@@ -46,5 +47,9 @@ export const getAbTestResults = (abtestKeyValues) => {
     if (abtestKeyValues[AB_TEST_KEYS.BP_3926_FREEMIUM_WATERMARK]) {
         abTests.bp_3926_freemium_watermark = getValueType(AB_TEST_KEYS.BP_3926_FREEMIUM_WATERMARK, abtestKeyValues[AB_TEST_KEYS.BP_3926_FREEMIUM_WATERMARK]);
     }
+    // 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/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.d.ts

@@ -1146,6 +1146,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         getProductModel(): import("../../../brand-page/models/shop.model").ProductModel;
     }>;
     router: import("vue-router").Router;
+    snapshotStore: import("pinia").Store<"snapshot", import("../../stores").SnapshotState, {
+        hasSnapshot: (state: {
+            snapshotBase64: string | null;
+            isCapturing: boolean;
+        } & import("pinia").PiniaCustomStateProperties<import("../../stores").SnapshotState>) => boolean;
+    }, {
+        setBase64Snapshot(base64: string | null): void;
+        setIsCapturing(isCapturing: boolean): void;
+        clearSnapshot(): void;
+    }>;
+    captureSnapshot: (element: HTMLElement | null) => Promise<string | null>;
     videoStore: import("pinia").Store<"video", import("../../stores").videoStoreState, {
         getVideoUrlsForToken: (state: {
             videoUrls: {
@@ -1186,8 +1197,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     showSaveSuccessMessage: boolean;
 }, {
     previewContainer(): any;
+    previewContent(): any;
 }, {
     getBrandPageFromFallback(viewModel: any): BrandPageData;
+    handleCaptureSnapshot(): Promise<void>;
     onResizeWithDebounce(): void;
     onResize(): void;
     setUiScreenSizeModeBasedOnDeviceWidth(): void;

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.js

@@ -10,7 +10,7 @@ import { createInitialBrandPage } from '../../models';
 import { navigateToPageBySlug } from '../../routing';
 import { useBrandPageContainerStore } from '../../stores';
 import { UI_DEVICE_MODES, UI_SCREENSIZE_MODES, } from '../../../shared/models';
-import { useBrandPageMakerStore, useBrandPageMakerUserStore, useLocalisedRouteStore, useUiStore, useVideoStore, } from '../../stores';
+import { useBrandPageMakerStore, useBrandPageMakerUserStore, useLocalisedRouteStore, useUiStore, useSnapshotStore, useVideoStore, } from '../../stores';
 import { useUiContentSettingsStore } from '../../../shared/content-settings/store';
 import { useUiTemplateSettingsStore } from '../../../shared/template-settings/store';
 import { useUiPageSettingsStore } from '../../../shared/page-settings/store';
@@ -21,6 +21,7 @@ import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/sho
 import { useProductConfigStore } from '../../../brand-page-maker/stores/product-config/product-config-store';
 import { UPGRADE_CTA_LOCATIONS } from '../../composables/useEventTracker';
 import { commonTr } from '../../../composables/useTranslate';
+import { useSnapshot } from '../../../composables/useSnapshot';
 const RESIZE_DEBOUNCE_WAIT_IN_MS = 100;
 export default defineComponent({
     props: {
@@ -42,6 +43,8 @@ export default defineComponent({
         const productSettingStore = useProductConfigStore();
         const router = useRouter();
         const localisedRouteStore = useLocalisedRouteStore();
+        const snapshotStore = useSnapshotStore();
+        const { captureSnapshot } = useSnapshot();
         const videoStore = useVideoStore();
         return {
             commonTr,
@@ -84,6 +87,8 @@ export default defineComponent({
             shopSettingStore,
             productSettingStore,
             router,
+            snapshotStore,
+            captureSnapshot,
             videoStore,
         };
     },
@@ -99,6 +104,9 @@ export default defineComponent({
         previewContainer() {
             return this.$refs.previewContainer;
         },
+        previewContent() {
+            return this.$refs.previewContent;
+        },
     },
     async created() {
         if (!this.viewModel?.logoDraftDesignAttributes?.logoTheme ||
@@ -213,6 +221,27 @@ export default defineComponent({
                 return createInitialBrandPage(viewModel.brandPageType);
             }
         },
+        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/lib/src/brand-page-maker/stores/index.d.ts

@@ -7,3 +7,4 @@ export * from './event-manager';
 export * from './route';
 export * from './logo-store';
 export * from './video';
+export * from './snapshot/snapshot-store';

package/lib/src/brand-page-maker/stores/index.js

@@ -6,3 +6,4 @@ export * from './event-manager';
 export * from './route';
 export * from './logo-store';
 export * from './video';
+export * from './snapshot/snapshot-store';

package/lib/src/brand-page-maker/stores/snapshot/snapshot-store.d.ts

@@ -0,0 +1,14 @@
+export interface SnapshotState {
+    snapshotBase64: string | null;
+    isCapturing: boolean;
+}
+export declare const useSnapshotStore: import("pinia").StoreDefinition<"snapshot", SnapshotState, {
+    hasSnapshot: (state: {
+        snapshotBase64: string | null;
+        isCapturing: boolean;
+    } & import("pinia").PiniaCustomStateProperties<SnapshotState>) => boolean;
+}, {
+    setBase64Snapshot(base64: string | null): void;
+    setIsCapturing(isCapturing: boolean): void;
+    clearSnapshot(): void;
+}>;

package/lib/src/brand-page-maker/stores/snapshot/snapshot-store.js

@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia';
+export const useSnapshotStore = defineStore('snapshot', {
+    state: () => ({
+        snapshotBase64: null,
+        isCapturing: false,
+    }),
+    actions: {
+        setBase64Snapshot(base64) {
+            this.snapshotBase64 = base64;
+        },
+        setIsCapturing(isCapturing) {
+            this.isCapturing = isCapturing;
+        },
+        clearSnapshot() {
+            this.snapshotBase64 = null;
+        },
+    },
+    getters: {
+        hasSnapshot: (state) => !!state.snapshotBase64,
+    },
+});

package/lib/src/brand-page-maker/utils/rich-text-editor.util.d.ts

@@ -8,6 +8,8 @@ import { type DOMPurify } from 'dompurify';
 export declare const isStyleChanged: (tr: Transaction) => boolean;
 export declare const skipStyleDetection: (chain: ChainedCommands, marks?: Mark[]) => ChainedCommands;
 export declare const hasRTEContent: (content: string) => boolean;
+export declare const getPlainTextFromRTE: (content: string) => string;
+export declare const replaceTextInRTE: (existingHtml: string, newText: string) => string;
 export declare const transformToRTE: (uiPageSettingStore: PageSettingsState, externalEditor: Editor, uiStyleSettingsStore?: StyleSettingsState, newContent?: Content, type?: TextStyleType, newStyle?: TextStyleDeclaration) => void;
 export declare const switchAllContentToRTE: (uiPageSettingStore: PageSettingsState, externalEditor: Editor, uiStyleSettingsStore?: StyleSettingsState) => void;
 export declare const getUpdatedHTMLFromEditor: (externalEditor: Editor, contentText: string, newContentStyle: TextStyleDeclaration) => string;

package/lib/src/brand-page-maker/utils/rich-text-editor.util.js

@@ -121,6 +121,123 @@ export const hasRTEContent = (content) => {
     const tagWrapRegex = /^<([A-Za-z][A-Za-z0-9-]*)\b[^>]*>[\s\S]*<\/\1>$/;
     return tagWrapRegex.test(trimmed);
 };
+export const getPlainTextFromRTE = (content) => {
+    if (typeof content !== 'string') {
+        return '';
+    }
+    // Only strip HTML tags if the value contains HTML
+    if (hasRTEContent(content)) {
+        return content.replace(/<[^>]*>/g, '').trim();
+    }
+    return content.trim();
+};
+export const replaceTextInRTE = (existingHtml, newText) => {
+    if (!hasRTEContent(existingHtml)) {
+        return `<p>${newText}</p>`;
+    }
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = existingHtml;
+    const blockElement = tempDiv.querySelector('p, div, h1, h2, h3, h4, h5, h6, blockquote');
+    if (!blockElement) {
+        return `<p>${newText}</p>`;
+    }
+    // Collect all spans and their styles
+    const spans = blockElement.querySelectorAll('span');
+    const mergedStyles = {};
+    const hasFormatting = {
+        bold: false,
+        italic: false,
+        underline: false,
+        strikethrough: false,
+        mark: false,
+        markColor: '',
+        markStyle: '',
+    };
+    // Iterate through all spans to collect and merge styles
+    spans.forEach((span) => {
+        // Collect inline styles
+        if (span.style.cssText) {
+            const styleDeclarations = span.style.cssText.split(';');
+            styleDeclarations.forEach((declaration) => {
+                const [property, value] = declaration.split(':').map((s) => s.trim());
+                if (property && value) {
+                    mergedStyles[property] = value; // Latest value overwrites previous
+                }
+            });
+        }
+        // Collect data attributes (like data-color for marks)
+        if (span.hasAttribute('data-color')) {
+            mergedStyles['data-color'] = span.getAttribute('data-color') || '';
+        }
+        // Check for formatting tags within this span
+        if (span.querySelector('strong, b'))
+            hasFormatting.bold = true;
+        if (span.querySelector('em, i'))
+            hasFormatting.italic = true;
+        if (span.querySelector('u'))
+            hasFormatting.underline = true;
+        if (span.querySelector('s, strike, del'))
+            hasFormatting.strikethrough = true;
+        // Check for mark/highlight tags
+        const markElement = span.querySelector('mark');
+        if (markElement) {
+            hasFormatting.mark = true;
+            if (markElement.hasAttribute('data-color')) {
+                hasFormatting.markColor = markElement.getAttribute('data-color') || '';
+            }
+            if (markElement.style.cssText) {
+                hasFormatting.markStyle = markElement.style.cssText;
+            }
+        }
+    });
+    // Create the new span with merged styles
+    const newSpan = document.createElement('span');
+    // Apply collected inline styles
+    Object.entries(mergedStyles).forEach(([property, value]) => {
+        if (property === 'data-color') {
+            newSpan.setAttribute('data-color', value);
+        }
+        else {
+            newSpan.style.setProperty(property, value);
+        }
+    });
+    // Build the formatted text with nested tags
+    let formattedText = newText;
+    // Apply mark/highlight if present
+    if (hasFormatting.mark) {
+        const markElement = document.createElement('mark');
+        if (hasFormatting.markColor) {
+            markElement.setAttribute('data-color', hasFormatting.markColor);
+        }
+        if (hasFormatting.markStyle) {
+            markElement.style.cssText = hasFormatting.markStyle;
+        }
+        markElement.textContent = formattedText;
+        formattedText = markElement.outerHTML;
+    }
+    // Apply underline
+    if (hasFormatting.underline) {
+        formattedText = `<u>${formattedText}</u>`;
+    }
+    // Apply strikethrough
+    if (hasFormatting.strikethrough) {
+        formattedText = `<s>${formattedText}</s>`;
+    }
+    // Apply italic
+    if (hasFormatting.italic) {
+        formattedText = `<em>${formattedText}</em>`;
+    }
+    // Apply bold
+    if (hasFormatting.bold) {
+        formattedText = `<strong>${formattedText}</strong>`;
+    }
+    // Set the formatted content to the span
+    newSpan.innerHTML = formattedText;
+    // Clear the block element and add the new span
+    blockElement.innerHTML = '';
+    blockElement.appendChild(newSpan);
+    return tempDiv.innerHTML;
+};
 export const transformToRTE = (uiPageSettingStore, externalEditor, uiStyleSettingsStore, newContent, type, newStyle) => {
     for (const page of uiPageSettingStore.pages) {
         for (const contentItem of page.contents) {