@designcrowd/library.brand-page 5.16.28 → 5.16.29-pre-temp-13

package/lib/src/lib.js

@@ -26,7 +26,7 @@ export { default as SensitiveContentModal } from './brand-page/components/sensit
 // functions
 export { getBrandPageViewModelFromBrandPageModel, migrateBrandPageModel, } from './brand-page/utils';
 export * as brandPageUtils from './brand-page/utils';
-export { getOptimalLogoSize, calculateOptimizedLogoDimensions, } from './brand-page/utils/logo.util';
+export { getOptimalLogoSize, calculateOptimizedLogoDimensions, applyLogoImageBase64UrlToBrandPageTemplateModel, } from './brand-page/utils/logo.util';
 export { sanitizeRTEHtml } from './brand-page-maker/utils';
 export { getPageSlugFromPageTitle } from './brand-page-maker/utils/slug.util';
 // stores

package/lib/src/shared/logo-settings/components/EditLogoSettings.mixin.d.ts

@@ -81,6 +81,14 @@ declare const _default: import("vue").DefineComponent<{}, {
                 variationType: string | undefined;
                 width: number;
                 height: number;
+                expiryDate?: string | undefined;
+                s3Token?: string | undefined;
+                logoTheme?: {
+                    backgroundColors: string[];
+                    textColors: string[];
+                    textOpacities: number[];
+                    textValues: any;
+                } | undefined;
             }[];
             logoTemplateMetadata: string;
             isLogoDraftSaved: boolean;
@@ -105,6 +113,8 @@ declare const _default: import("vue").DefineComponent<{}, {
         updateEditableLogoImageByVariationAsync(editableLogoVariation: import("../store/editable-logo-store").EditableLogoVariation, defaultPrimaryText?: string | undefined): Promise<import("../../../clients/fabric-render-client").ModifyLogoDataResponse | null>;
         getDraftMetadata(logoDraftToken: string): string | undefined;
         upsertDraftMetadata(metadata: string): void;
+        isS3TokenExpired(expiryDate: string | undefined): boolean;
+        refreshS3TokenIfExpiredAsync(logoVariation: number): Promise<boolean>;
         postEditableLogoRequestAsync(payload: {
             returnJson: boolean;
             dimensionType: string;

package/lib/src/shared/logo-settings/components/LogoSettings.mixin.d.ts

@@ -253,6 +253,14 @@ declare const _default: import("vue").DefineComponent<{}, {
                 variationType: string | undefined;
                 width: number;
                 height: number;
+                expiryDate?: string | undefined;
+                s3Token?: string | undefined;
+                logoTheme?: {
+                    backgroundColors: string[];
+                    textColors: string[];
+                    textOpacities: number[];
+                    textValues: any;
+                } | undefined;
             }[];
             logoTemplateMetadata: string;
             isLogoDraftSaved: boolean;
@@ -277,6 +285,8 @@ declare const _default: import("vue").DefineComponent<{}, {
         updateEditableLogoImageByVariationAsync(editableLogoVariation: import("../store").EditableLogoVariation, defaultPrimaryText?: string | undefined): Promise<import("../../../clients/fabric-render-client").ModifyLogoDataResponse | null>;
         getDraftMetadata(logoDraftToken: string): string | undefined;
         upsertDraftMetadata(metadata: string): void;
+        isS3TokenExpired(expiryDate: string | undefined): boolean;
+        refreshS3TokenIfExpiredAsync(logoVariation: number): Promise<boolean>;
         postEditableLogoRequestAsync(payload: {
             returnJson: boolean;
             dimensionType: string;

package/lib/src/shared/logo-settings/store/editable-logo-store.d.ts

@@ -1,4 +1,5 @@
 import { type ModifyLogoDataResponse } from '../../../clients/fabric-render-client';
+import { type FabricLogoTheme } from '../../../brand-page';
 export interface GradientObject {
     type: string;
     angle: number | undefined;
@@ -60,6 +61,9 @@ export interface EditableLogoVariation {
     variationType: string | undefined;
     width: number;
     height: number;
+    expiryDate?: string;
+    s3Token?: string;
+    logoTheme?: FabricLogoTheme;
 }
 export interface EditableLogoState {
     enableEditMode: boolean;
@@ -151,6 +155,14 @@ export declare const useUiEditableLogoStore: import("pinia").StoreDefinition<"ui
             variationType: string | undefined;
             width: number;
             height: number;
+            expiryDate?: string | undefined;
+            s3Token?: string | undefined;
+            logoTheme?: {
+                backgroundColors: string[];
+                textColors: string[];
+                textOpacities: number[];
+                textValues: any;
+            } | undefined;
         }[];
         logoTemplateMetadata: string;
         isLogoDraftSaved: boolean;
@@ -175,6 +187,8 @@ export declare const useUiEditableLogoStore: import("pinia").StoreDefinition<"ui
     updateEditableLogoImageByVariationAsync(editableLogoVariation: EditableLogoVariation, defaultPrimaryText?: string): Promise<ModifyLogoDataResponse | null>;
     getDraftMetadata(logoDraftToken: string): string | undefined;
     upsertDraftMetadata(metadata: string): void;
+    isS3TokenExpired(expiryDate: string | undefined): boolean;
+    refreshS3TokenIfExpiredAsync(logoVariation: number): Promise<boolean>;
     postEditableLogoRequestAsync(payload: {
         returnJson: boolean;
         dimensionType: string;

package/lib/src/shared/logo-settings/store/editable-logo-store.js

@@ -19,6 +19,9 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
                 variationType: undefined,
                 width: 0,
                 height: 0,
+                expiryDate: undefined,
+                s3Token: undefined,
+                logoTheme: undefined,
             },
             {
                 variationId: LOGO_VARIATION.LOGO_WITH_BACKGROUND,
@@ -27,6 +30,9 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
                 variationType: undefined,
                 width: 0,
                 height: 0,
+                expiryDate: undefined,
+                s3Token: undefined,
+                logoTheme: undefined,
             },
             {
                 variationId: LOGO_VARIATION.LOGO_ONLY_WITH_TRANSPARENT_BACKGROUND,
@@ -35,6 +41,9 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
                 variationType: LOGO_VARIATION_TYPES.ICON_TRANSPARENT_BACKGROUND_ONLY,
                 width: 0,
                 height: 0,
+                expiryDate: undefined,
+                s3Token: undefined,
+                logoTheme: undefined,
             },
             {
                 variationId: LOGO_VARIATION.TEXT_ONLY_WITH_TRANSPARENT_BACKGROUND,
@@ -43,6 +52,9 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
                 variationType: LOGO_VARIATION_TYPES.TEXT_TRANSPARENT_BACKGROUND_ONLY,
                 width: 0,
                 height: 0,
+                expiryDate: undefined,
+                s3Token: undefined,
+                logoTheme: undefined,
             },
         ],
         logoEdits: {
@@ -254,6 +266,9 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
             editableLogoVariation.base64 = result.base64;
             editableLogoVariation.width = result.width;
             editableLogoVariation.height = result.height;
+            editableLogoVariation.expiryDate = result.expiryDate;
+            editableLogoVariation.s3Token = result.s3Token;
+            editableLogoVariation.logoTheme = result.logoTheme;
             return result;
         },
         getDraftMetadata(logoDraftToken) {
@@ -278,10 +293,41 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
                 });
             }
         },
+        isS3TokenExpired(expiryDate) {
+            if (!expiryDate) {
+                return true;
+            }
+            const expiryTime = new Date(expiryDate).getTime();
+            const currentTime = Date.now();
+            // Add a 5-minute buffer to refresh before actual expiry
+            const bufferMs = 5 * 60 * 1000;
+            return currentTime >= expiryTime - bufferMs;
+        },
+        async refreshS3TokenIfExpiredAsync(logoVariation) {
+            const editableLogoVariation = this.editableLogoVariations[logoVariation];
+            if (!editableLogoVariation) {
+                return false;
+            }
+            const isExpired = this.isS3TokenExpired(editableLogoVariation.expiryDate);
+            if (isExpired) {
+                const logoStore = useLogoStore();
+                // Only refresh if logo template asset is available
+                if (!logoStore.logoTemplateAsset?.token) {
+                    if (process.env.NODE_ENV !== 'production') {
+                        console.warn('Cannot refresh expired S3 token: logo template asset not available');
+                    }
+                    return false;
+                }
+                await this.updateEditableLogoImageUrlAsync();
+                return true;
+            }
+            return false;
+        },
         async postEditableLogoRequestAsync(payload) {
             const logoStore = useLogoStore();
             const body = {
                 returnJson: payload?.returnJson || false,
+                generateS3Url: true,
                 dimensionsType: payload?.dimensionType,
                 variation: payload?.variationType,
                 primaryText: payload?.defaultPrimaryText,

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.d.ts

@@ -4191,6 +4191,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 variationType: string | undefined;
                 width: number;
                 height: number;
+                expiryDate?: string | undefined;
+                s3Token?: string | undefined;
+                logoTheme?: {
+                    backgroundColors: string[];
+                    textColors: string[];
+                    textOpacities: number[];
+                    textValues: any;
+                } | undefined;
             }[];
             logoTemplateMetadata: string;
             isLogoDraftSaved: boolean;
@@ -4215,6 +4223,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         updateEditableLogoImageByVariationAsync(editableLogoVariation: import("../../../logo-settings/store/editable-logo-store").EditableLogoVariation, defaultPrimaryText?: string | undefined): Promise<import("../../../../clients/fabric-render-client").ModifyLogoDataResponse | null>;
         getDraftMetadata(logoDraftToken: string): string | undefined;
         upsertDraftMetadata(metadata: string): void;
+        isS3TokenExpired(expiryDate: string | undefined): boolean;
+        refreshS3TokenIfExpiredAsync(logoVariation: number): Promise<boolean>;
         postEditableLogoRequestAsync(payload: {
             returnJson: boolean;
             dimensionType: string;

package/lib/src/shared/template-settings/components/TemplatesSettings.mixin.d.ts

@@ -601,6 +601,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     tabMenuClasses(): string;
     visibleTabs(): any;
 }, {
+    checkAndRefreshS3TokenIfExpired(): Promise<void>;
     onNextClicked(): Promise<void>;
     onPreviousClicked(): Promise<void>;
     internalOnTemplateSelected(templateId: string): Promise<void>;

package/lib/src/shared/template-settings/components/TemplatesSettings.mixin.js

@@ -6,6 +6,8 @@ import { debounce } from '../../functions';
 import { useBrandPageContainerStore, useBrandPageMakerStore, useUiStore, } from '../../../brand-page-maker/stores';
 import { templateSettingsTr } from '../../../composables/useTranslate';
 import { useEventTracker } from '../../../brand-page-maker/composables/useEventTracker';
+import { useUiEditableLogoStore, useUiLogoSettingsStore, } from '../../logo-settings/store';
+import { useLogoStore } from '../../../brand-page-maker/stores/logo-store';
 export default defineComponent({
     props: {
         numColumns: {
@@ -107,6 +109,8 @@ export default defineComponent({
         },
     },
     async mounted() {
+        // Check and refresh S3 token if expired before loading templates
+        await this.checkAndRefreshS3TokenIfExpired();
         // load templates on mounted if it is not initialised
         if (!this.pageCount) {
             await this.templateSettingsStore.loadPageNo({
@@ -118,6 +122,35 @@ export default defineComponent({
         this.debounceOnSearch = debounce(this.setSearchText, 500);
     },
     methods: {
+        async checkAndRefreshS3TokenIfExpired() {
+            const brandPageMakerContainerStore = useBrandPageContainerStore();
+            const editableLogoStore = useUiEditableLogoStore();
+            const logoStore = useLogoStore();
+            const logoSettingsStore = useUiLogoSettingsStore();
+            // Only check for non-admin (pre-purchase) and non-BYO logos
+            if (brandPageMakerContainerStore.isAdmin) {
+                return;
+            }
+            const isByo = logoStore.logoTemplateAsset?.isByo ?? false;
+            if (isByo) {
+                return;
+            }
+            const logoVariation = logoSettingsStore.selectedLogoImage.logoVariation;
+            if (logoVariation === undefined) {
+                return;
+            }
+            try {
+                const wasRefreshed = await editableLogoStore.refreshS3TokenIfExpiredAsync(logoVariation);
+                if (wasRefreshed && process.env.NODE_ENV !== 'production') {
+                    console.log('S3 token was expired in TemplatesSettings and has been refreshed');
+                }
+            }
+            catch (error) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.error('Error checking/refreshing S3 token:', error);
+                }
+            }
+        },
         async onNextClicked() {
             if (!this.isLoadMoreBtnEnabled) {
                 return;

package/lib/src/shared/template-settings/store/template-settings-store.js

@@ -3,12 +3,12 @@ import * as DesignTemplateClient from '../../../clients/design-template-client';
 import {} from '../../../clients/models';
 import { BP_DEFAULT_TEMPLATE_TYPE_NAME, SIDE_BAR_TAB_NAMES, } from '../../../brand-page-maker/constants';
 import { defineStore, storeToRefs } from 'pinia';
-import { useBrandPageContainerStore, useBrandPageMakerStore, useBrandPageMakerUserStore, useUiStore, } from '../../../brand-page-maker/stores';
+import { useBrandPageContainerStore, useBrandPageMakerStore, useBrandPageMakerUserStore, useLogoStore, useUiStore, } from '../../../brand-page-maker/stores';
 import { useUiSideBarStore } from '../../side-bar/store';
 import { BrandPageModel } from '../../../brand-page/models';
 import { migrateBrandPageModel } from '../../../brand-page/utils';
 import { getAiContentIndexByTemplateTokenAndNumberOfVariations } from '../../../brand-page-maker/utils/ai-content-selection.util';
-import { useUiLogoSettingsStore } from '../../logo-settings/store';
+import { useUiEditableLogoStore, useUiLogoSettingsStore, } from '../../logo-settings/store';
 import { templateSettingsTr, getCurrentLocale, } from '../../../composables/useTranslate';
 import { watch } from 'vue';
 export const DEFAULT_PAGE_SIZE = 6;
@@ -18,8 +18,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
         const brandPageContainerStore = useBrandPageContainerStore();
         const brandPageMakerUserStore = useBrandPageMakerUserStore();
         // Set renderAsImage to true if not admin AND not pre-purchase
-        const renderAsImage = !brandPageMakerUserStore.isAdmin &&
-            !brandPageContainerStore.isPrePurchase;
+        const renderAsImage = !brandPageMakerUserStore.isAdmin;
         return {
             isBusy: false,
             pageCount: 0,
@@ -144,6 +143,8 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
             const brandPageContainerStore = useBrandPageContainerStore();
             const brandPageMakerUserStore = useBrandPageMakerUserStore();
             const logoSettingsStore = useUiLogoSettingsStore();
+            const logoStore = useLogoStore();
+            const editableLogoStore = useUiEditableLogoStore();
             const designTemplateToken = brandPageContainerStore.designTemplateToken;
             if (brandPageMakerStore.isInitialising) {
                 setTimeout(() => {
@@ -168,6 +169,20 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
             try {
                 const designTemplateClient = DesignTemplateClient.getInstance();
                 const currentLocale = getCurrentLocale();
+                const isByo = logoStore.logoTemplateAsset?.isByo ?? false;
+                const logoTemplateToken = logoStore.logoTemplateAsset?.token ?? undefined;
+                const logoVariation = logoSettingsStore.selectedLogoImage.logoVariation;
+                // Check if S3 token is expired and refresh if needed
+                if (!isByo) {
+                    const wasRefreshed = await editableLogoStore.refreshS3TokenIfExpiredAsync(logoVariation);
+                    if (wasRefreshed) {
+                        setTimeout(() => {
+                            this.loadPageNo({ pageNo });
+                        }, LOAD_PAGE_RETRY_DELAY);
+                        return;
+                    }
+                }
+                const editableLogoVariation = editableLogoStore.editableLogoVariations[logoVariation];
                 const result = await designTemplateClient.getTemplateItemsByTemplateType(this.templateType, {
                     page: pageNo,
                     pageSize: DEFAULT_PAGE_SIZE,
@@ -178,6 +193,8 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                     personalisable: this.selectedTab.key === TEMPLATE_TABS.AI,
                     selectedTemplateToken: designTemplateToken,
                     locale: currentLocale,
+                    logoS3Token: !isByo ? editableLogoVariation.s3Token : undefined,
+                    logoTemplateToken: isByo ? logoTemplateToken : undefined,
                 });
                 if (!result) {
                     return;
@@ -185,8 +202,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                 this._setPageCount({ pageCount: result.pageCount });
                 const templates = await Promise.all(result.paginatedItems.map(async (item) => {
                     try {
-                        if (brandPageContainerStore.isPrePurchase ||
-                            brandPageMakerUserStore.isAdmin) {
+                        if (brandPageMakerUserStore.isAdmin) {
                             // Pre-purchase: full template with brandPageModel for live rendering
                             const template = await designTemplateClient.getTemplateByTemplateToken(item.designTemplateToken);
                             return this.safeMapToTemplateSettingsTemplate(template);
@@ -245,6 +261,13 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                 templateId: payload.templateId,
                 forceApply: payload.forceApply,
             });
+            if (payload.forceApply) {
+                await this._setTemplates({
+                    templates: [],
+                });
+                await this._setPageNoLoaded({ pageNoLoaded: 0 });
+                await this.loadPageNo({ pageNo: 1 });
+            }
         },
         async onCategorySelected(payload) {
             await this._setTemplates({
@@ -319,9 +342,11 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
          */
         setupLogoChangeWatcher() {
             const logoSettingsStore = useUiLogoSettingsStore();
-            const brandPageContainerStore = useBrandPageContainerStore();
+            const editableLogoStore = useUiEditableLogoStore();
             const brandPageMakerUserStore = useBrandPageMakerUserStore();
             const { selectedLogoImage } = storeToRefs(logoSettingsStore);
+            const { editableLogoVariations } = storeToRefs(editableLogoStore);
+            let s3TokenDebounceTimer = null;
             // Watch for changes to logoImage (token or variation changes)
             watch(() => selectedLogoImage.value, async (newLogoImage, oldLogoImage) => {
                 // Skip initial load when oldLogoImage is undefined
@@ -331,8 +356,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                 // Only refetch for post-purchase users and when logo actually changes
                 const hasLogoChanged = newLogoImage.logoDraftToken !== oldLogoImage.logoDraftToken ||
                     newLogoImage.logoVariation !== oldLogoImage.logoVariation;
-                if (!brandPageContainerStore.isPrePurchase &&
-                    !brandPageMakerUserStore.isAdmin &&
+                if (!brandPageMakerUserStore.isAdmin &&
                     newLogoImage.logoDraftToken &&
                     hasLogoChanged) {
                     // Reset templates state and reload with new logo
@@ -343,6 +367,30 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                     await this.loadPageNo({ pageNo: 1 });
                 }
             }, { deep: true });
+            // Watch for S3 token changes (when user edits logo colors, text, etc.)
+            // Debounced to avoid excessive reloads during rapid edits
+            watch(() => editableLogoVariations.value[selectedLogoImage.value.logoVariation]
+                ?.s3Token, async (newS3Token, oldS3Token) => {
+                if (s3TokenDebounceTimer) {
+                    clearTimeout(s3TokenDebounceTimer);
+                }
+                if (!oldS3Token) {
+                    return;
+                }
+                if (newS3Token === oldS3Token) {
+                    return;
+                }
+                if (brandPageMakerUserStore.isAdmin) {
+                    return;
+                }
+                // Debounce the reload by 500ms to avoid rapid successive reloads
+                s3TokenDebounceTimer = setTimeout(async () => {
+                    await this._setTemplates({ templates: [] });
+                    await this._setPageNoLoaded({ pageNoLoaded: 0 });
+                    await this._setPageNo({ pageNo: 1 });
+                    await this.loadPageNo({ pageNo: 1 });
+                }, 500);
+            });
         },
     },
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.16.28",
+  "version": "5.16.29-pre-temp-13",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -12,7 +12,7 @@
     "src"
   ],
   "scripts": {
-    "dev": "nuxt dev nuxtapp",
+    "dev": "export NODE_TLS_REJECT_UNAUTHORIZED=0 && nuxt dev nuxtapp",
     "dev:dcom": "export tailwindTheme=designCom && nuxt dev nuxtapp",
     "docker:publish": "docker build -t bp-maker:latest . --file ./build/Dockerfile.brand-page-lib-publish --build-arg NPM_TOKEN=$NPM_TOKEN --no-cache && cross-env NPM_TOKEN=",
     "lint": "eslint . && tsc --project tsconfig.lint.json --noEmit",

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

@@ -4,7 +4,6 @@ import {
   DESKTOP_WIDTH,
   MOBILE_HEIGHT,
   MOBILE_WIDTH,
-  MOBILE_HEIGHT_POST_PURCHASE,
 } from '../../constants';
 import {
   useBrandPageMakerStore,
@@ -36,11 +35,7 @@ export default defineComponent({
     },
 
     height(): number {
-      if (this.isBrandSite) {
-        return DESKTOP_HEIGHT;
-      }
-
-      return this.isPrePurchase ? MOBILE_HEIGHT : MOBILE_HEIGHT_POST_PURCHASE;
+      return this.isBrandSite ? DESKTOP_HEIGHT : MOBILE_HEIGHT;
     },
   },
 });

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

@@ -265,7 +265,7 @@ export default defineComponent({
   },
   watch: {
     template() {
-      if (this.isAdmin || this.isPrePurchase) {
+      if (this.isAdmin) {
         this.updateViewModel();
       } else {
         // Reset loading state when template changes for image-based previews
@@ -275,7 +275,7 @@ export default defineComponent({
     },
     logoTheme: {
       handler() {
-        if (this.isAdmin || this.isPrePurchase) {
+        if (this.isAdmin) {
           this.updateViewModel();
         }
       },
@@ -283,7 +283,7 @@ export default defineComponent({
     },
     previewImageUrl() {
       // Reset loading state whenever the preview URL changes
-      if (!this.isAdmin && !this.isPrePurchase) {
+      if (!this.isAdmin) {
         this.imageLoading = true;
         this.imageLoadError = false;
       }
@@ -353,7 +353,7 @@ export default defineComponent({
 
     async updateViewModel(forceUpdate = true) {
       // Only update view model for admin or pre-purchase mode
-      if (!this.isAdmin && !this.isPrePurchase) {
+      if (!this.isAdmin) {
         return;
       }
 

package/src/brand-page-maker/composables/useEventTracker.ts

@@ -60,6 +60,8 @@ export const EVENTS = {
   WEBSITE_MAKER_AI_STOP_GENERATION: 'website_maker_ai_stop_generation',
   WEBSITE_SAVE_CONTACT: 'website_save_contact',
   WEBSITE_START_FOR_FREE: 'website_start_for_free',
+  WEBSITE_MAKER_AI_CLICK_SUGGESTED_PROMPT:
+    'website_maker_ai_click_suggested_prompt',
 };
 
 export const SELECT_LOCATIONS = {
@@ -92,6 +94,12 @@ export const GENERATE_AI_TEXT_CTA_LOCATIONS = {
   TESTIMONIAL_ITEM: 'testimonial_item',
 };
 
+export const GENERATE_AI_SUGGESTED_PROMPT = {
+  GENERATE_TEXT: 'generate_text',
+  IMPROVE_TEXT: 'improve_text',
+  SPELL_CHECK: 'spell_check',
+};
+
 export const TRIGGER_TYPE = {
   AUTOMATIC: 'automatic',
   USER_TRIGGERED: 'user_triggered',

package/src/brand-page-maker/constants/template-constants.ts

@@ -1,5 +1,4 @@
-export const MOBILE_HEIGHT = 734;
-export const MOBILE_HEIGHT_POST_PURCHASE = 636;
+export const MOBILE_HEIGHT = 636;
 export const MOBILE_WIDTH = 358;
 
 export const DESKTOP_HEIGHT = 600;

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.ts

@@ -100,6 +100,7 @@ import { commonTr, errorTr } from '../../../composables/useTranslate';
 import { UPGRADE_CTA_LOCATIONS } from '../../composables/useEventTracker';
 import { useVideoStore } from '../video';
 import { findValuesByKey } from '../../../helpers/ts.helper';
+import { useLogoStore } from '../logo-store';
 
 export interface NotificationMessage {
   type: 'success' | 'warning' | 'error';
@@ -358,6 +359,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const userStore = useBrandPageMakerUserStore();
       const containerStore = useBrandPageContainerStore();
       const uiContentSettings = useUiContentSettingsStore();
+      const editableLogoStore = useUiEditableLogoStore();
+      const logoStore = useLogoStore();
 
       if (!this.selectedTemplateId) {
         return;
@@ -409,6 +412,27 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           );
         }
       } else {
+        if (containerStore.isPrePurchase) {
+          if (logoStore.logoTemplateAsset?.isByo) {
+            if (uiStore.logoTheme)
+              uiStore.setLogoTheme({
+                logoTheme: uiStore.logoTheme,
+              });
+          } else {
+            const logoVariation =
+              logoSettingsStore.selectedLogoTemplateImage
+                ?.logoTemplateVersion ?? 0;
+            const logoTheme =
+              editableLogoStore.editableLogoVariations[logoVariation]
+                ?.logoTheme;
+
+            if (logoTheme)
+              uiStore.setLogoTheme({
+                logoTheme: parseLogoThemeToCssStyles(logoTheme),
+              });
+          }
+        }
+
         const logoImage =
           logoUtil.safeGetLogoImageFromLogoImageUrl(logoImageUrl);
 

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

@@ -171,12 +171,21 @@ export const getPlainTextFromRTE = (content: string): string => {
     return '';
   }
 
+  let plainText = content;
+
   // Only strip HTML tags if the value contains HTML
   if (hasRTEContent(content)) {
-    return content.replace(/<[^>]*>/g, '').trim();
+    plainText = content.replace(/<[^>]*>/g, '');
+  }
+
+  // Decode URL-encoded characters (like %0A for line breaks)
+  try {
+    plainText = decodeURIComponent(plainText);
+  } catch (e) {
+    // If decoding fails, use the text as-is
   }
 
-  return content.trim();
+  return plainText.trim();
 };
 
 export const replaceTextInRTE = (

package/src/bundles/bundled-translations.de-DE.json

@@ -638,7 +638,19 @@
     "generateInputPlaceholder": "Geben Sie Ihre Eingabeaufforderung ein, um den Text zu beschreiben ...",
     "stopGeneration": "Generierung anhalten",
     "useText": "Text verwenden",
-    "promptTooLong": "Der Prompt darf maximal {{maxLength}} Zeichen lang sein ({{currentLength}})"
+    "promptTooLong": "Der Prompt darf maximal {{maxLength}} Zeichen lang sein ({{currentLength}})",
+    "generateText": "Erstellen Sie {{ location }}",
+    "improveText": "Meinen Text verbessern",
+    "spellCheck": "Rechtschreibprüfung",
+    "generateTextPrompt": "Schreiben Sie ein einprägsames {{fieldName}} für {{businessName}}, ein {{industry}} Unternehmen. Gestalten Sie es freundlich und einladend.",
+    "generateTextPromptWithIndustry": "Ein einprägsames {{fieldName}} schreiben für ein Unternehmen in der folgenden Branche: {{industry}}. Freundlich und einladend gestalten.",
+    "generateTextPromptWithBusinessName": "Ein einprägsames {{fieldName}} schreiben für {{businessName}}. Freundlich und einladend gestalten.",
+    "generateTextPromptSimple": "Ein einprägsames {{fieldName}} schreiben. Freundlich und einladend gestalten.",
+    "improveTextPrompt": "Diesen Text für {{businessName}} verbessern, ein Unternehmen in der folgenden Branche: {{industry}}. Natürlicher, klarer und professioneller formulieren.",
+    "improveTextPromptWithIndustry": "Diesen Text für {{industry}} verbessern. Natürlicher, klarer und professioneller formulieren.",
+    "improveTextPromptWithBusinessName": "Diesen Text für {{businessName}} verbessern. Natürlicher, klarer und professioneller formulieren.",
+    "improveTextPromptSimple": "Diesen Text verbessern. Natürlicher, klarer und professioneller formulieren.",
+    "spellCheckPrompt": "Rechtschreibung und Grammatik für diesen Text prüfen."
   },
   "googleAddressField": {
     "addressPlaceholder": "Geben Sie einen Ort ein"

package/src/bundles/bundled-translations.es-ES.json

@@ -638,7 +638,19 @@
     "generateInputPlaceholder": "Introduce tu mensaje para describir el texto...",
     "stopGeneration": "Detén la generación",
     "useText": "Usa texto",
-    "promptTooLong": "El mensaje debe tener {{maxLength}} caracteres como máximo ({{currentLength}})"
+    "promptTooLong": "El mensaje debe tener {{maxLength}} caracteres como máximo ({{currentLength}})",
+    "generateText": "Genera {{ location }}",
+    "improveText": "Mejora mi texto",
+    "spellCheck": "Comprueba la ortografía",
+    "generateTextPrompt": "Escribe un {{fieldName}} pegadizo para {{businessName}}, un negocio {{industry}}. Hazlo amigable y acogedor.",
+    "generateTextPromptWithIndustry": "Escribe una {{fieldName}} que llame la atención para un negocio en el sector de {{industry}}. Haz que resulte cordial y agradable.",
+    "generateTextPromptWithBusinessName": "Escribe una {{fieldName}} que llame la atención para {{businessName}}. Haz que resulte cordial y agradable.",
+    "generateTextPromptSimple": "Escribe una {{fieldName}} que llame la atención. Haz que resulte cordial y agradable.",
+    "improveTextPrompt": "Mejora este texto para {{businessName}}, un negocio de {{industry}}. Haz que suene más natural, claro y profesional.",
+    "improveTextPromptWithIndustry": "Mejora este texto para un negocio de {{industry}}. Haz que suene más natural, claro y profesional.",
+    "improveTextPromptWithBusinessName": "Mejora este texto para {{businessName}}. Haz que suene más natural, claro y profesional.",
+    "improveTextPromptSimple": "Mejora este texto. Haz que suene más natural, claro y profesional.",
+    "spellCheckPrompt": "Verifica la ortografía y la gramática de este texto."
   },
   "googleAddressField": {
     "addressPlaceholder": "Introduce una ubicación"