@designcrowd/library.brand-page 5.16.7 → 5.16.9

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

@@ -772,6 +772,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         sendAddContentContinuationEvent: (continuation: string) => void;
         sendUpsellOfferEvent: (upsellType: string) => void;
         sendUpsellOfferActionEvent: (upsellType: string, action: string) => void;
+        sendGenerateTextContinuationEvent: (cta_location: string, continuation: string | null) => void;
     };
     externalEditor: import("@tiptap/vue-3").Editor;
 }, {

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

@@ -494,6 +494,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         sendAddContentContinuationEvent: (continuation: string) => void;
         sendUpsellOfferEvent: (upsellType: string) => void;
         sendUpsellOfferActionEvent: (upsellType: string, action: string) => void;
+        sendGenerateTextContinuationEvent: (cta_location: string, continuation: string | null) => void;
     };
 }, {
     selectEventDebounceHandler: DebounceHandle | undefined;

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

@@ -811,6 +811,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     generateText(): string;
     showGenerateText(): boolean;
     plainTextValue(): string;
+    ctaLocation(): string;
 }, {
     onFieldChanged(payload: UpdateItemValuePayload<unknown>): void;
     onFieldChangeLogo(): void;

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

@@ -12,6 +12,7 @@ import { commonTr } from '../../../../composables/useTranslate';
 import { getPlainTextFromRTE, replaceTextInRTE, } from '../../../../brand-page-maker/utils';
 import { isDefaultContentText } from '../../utils';
 import { useUiLogoSettingsStore } from '../../../logo-settings/store';
+import { getCtaLocationFromFieldType } from '../../../../brand-page-maker/utils/mixpanel.util';
 const RTE_ALLOWED_SECTION_TYPES = [
     'banner-section',
     'text',
@@ -203,6 +204,9 @@ export default defineComponent({
                 return '';
             return plainText;
         },
+        ctaLocation() {
+            return getCtaLocationFromFieldType(this.field.name, this.type);
+        },
     },
     watch: {
         fieldType() {

package/lib/src/shared/content-settings/components/image-field/ImageField.mixin.js

@@ -109,7 +109,9 @@ export default defineComponent({
             });
         },
         onRemove() {
-            this.content.media = undefined;
+            if (this.content?.media) {
+                this.content.media = undefined;
+            }
             this.imgValue = '';
             this.imageUrl = '';
         },

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

@@ -198,6 +198,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         sendAddContentContinuationEvent: (continuation: string) => void;
         sendUpsellOfferEvent: (upsellType: string) => void;
         sendUpsellOfferActionEvent: (upsellType: string, action: string) => void;
+        sendGenerateTextContinuationEvent: (cta_location: string, continuation: string | null) => void;
     };
     makerFonts: import("vue").ComputedRef<{
         id: string;

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -4709,6 +4709,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         sendAddContentContinuationEvent: (continuation: string) => void;
         sendUpsellOfferEvent: (upsellType: string) => void;
         sendUpsellOfferActionEvent: (upsellType: string, action: string) => void;
+        sendGenerateTextContinuationEvent: (cta_location: string, continuation: string | null) => void;
     };
 }, {
     isDeleteModalVisible: boolean;

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

@@ -434,6 +434,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         sendAddContentContinuationEvent: (continuation: string) => void;
         sendUpsellOfferEvent: (upsellType: string) => void;
         sendUpsellOfferActionEvent: (upsellType: string, action: string) => void;
+        sendGenerateTextContinuationEvent: (cta_location: string, continuation: string | null) => void;
     };
 }, {
     purchasedDomains: UserDomainName[];

package/lib/src/shared/side-bar/components/SideBarTabButton.mixin.d.ts

@@ -37,6 +37,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         sendAddContentContinuationEvent: (continuation: string) => void;
         sendUpsellOfferEvent: (upsellType: string) => void;
         sendUpsellOfferActionEvent: (upsellType: string, action: string) => void;
+        sendGenerateTextContinuationEvent: (cta_location: string, continuation: string | null) => void;
     };
 }, {}, {}, {
     onTabSelected(tabName: string): void;

package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts

@@ -879,6 +879,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         sendAddContentContinuationEvent: (continuation: string) => void;
         sendUpsellOfferEvent: (upsellType: string) => void;
         sendUpsellOfferActionEvent: (upsellType: string, action: string) => void;
+        sendGenerateTextContinuationEvent: (cta_location: string, continuation: string | null) => void;
     };
 }, {
     styleThemeKeys: Readonly<{

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

@@ -580,6 +580,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         sendAddContentContinuationEvent: (continuation: string) => void;
         sendUpsellOfferEvent: (upsellType: string) => void;
         sendUpsellOfferActionEvent: (upsellType: string, action: string) => void;
+        sendGenerateTextContinuationEvent: (cta_location: string, continuation: string | null) => void;
     };
 }, {
     tabs: string[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.16.7",
+  "version": "5.16.9",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

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

@@ -53,6 +53,11 @@ export const EVENTS = {
   WEBSITE_MAKER_UPSELL_ACTION: 'website_maker_upsell_action',
   WEBSITE_MAKER_SWITCH_LOGO: 'website_maker_switch_logo',
   WEBSITE_MAKER_SWITCH_LOGO_MODAL: 'website_maker_switch_logo_modal',
+  WEBSITE_MAKER_AI_GENERATE_TEXT: 'website_maker_ai_generate_text',
+  WEBSITE_MAKER_AI_REGENERATE_TEXT: 'website_maker_ai_regenerate_text',
+  WEBSITE_MAKER_AI_SEND_PROMPT: 'website_maker_ai_send_prompt',
+  WEBSITE_MAKER_AI_COPY_RESPONSE: 'website_maker_ai_copy_response',
+  WEBSITE_MAKER_AI_STOP_GENERATION: 'website_maker_ai_stop_generation',
 };
 
 export const SELECT_LOCATIONS = {
@@ -76,6 +81,15 @@ export const UPGRADE_CTA_LOCATIONS = {
   GOOGLE_ADSENSE: 'google_adsense',
 };
 
+export const GENERATE_AI_TEXT_CTA_LOCATIONS = {
+  BANNER_DESCRIPTION: 'banner_description',
+  BANNER_TITLE: 'banner_title',
+  ABOUT_TITLE: 'about_title',
+  ABOUT_PARAGRAPH: 'about_paragraph',
+  TEXT_ITEM: 'text_item',
+  TESTIMONIAL_ITEM: 'testimonial_item',
+};
+
 export const TRIGGER_TYPE = {
   AUTOMATIC: 'automatic',
   USER_TRIGGERED: 'user_triggered',
@@ -90,6 +104,11 @@ export const PUBLISH_MODAL_CONTINUATION_EVENTS = {
   VIEW_WEBSITE: 'view_website',
 };
 
+export const GENERATE_TEXT_CONTINUATION_EVENTS = {
+  USE_TEXT: 'use_text',
+  EXIT: 'exit',
+};
+
 export const PUBLISH_OPTION_MODAL_CONTINUATION_EVENTS = {
   PREMIUM: 'premium',
   EXIT: 'exit',
@@ -266,6 +285,15 @@ const useEventTracker = () => {
         action,
       });
     },
+    sendGenerateTextContinuationEvent: (
+      cta_location: string,
+      continuation: string | null,
+    ) => {
+      _publishEvent(EVENTS.WEBSITE_MAKER_AI_GENERATE_TEXT, {
+        cta_location,
+        continuation,
+      });
+    },
   };
 };
 

package/src/brand-page-maker/utils/mixpanel.util.ts

@@ -0,0 +1,42 @@
+import { GENERATE_AI_TEXT_CTA_LOCATIONS } from '../composables/useEventTracker';
+
+export const getCtaLocationFromFieldType = (
+  fieldType: string,
+  sectionType?: string,
+): string => {
+  if (fieldType === 'text') {
+    return GENERATE_AI_TEXT_CTA_LOCATIONS.TEXT_ITEM;
+  }
+
+  if (fieldType === 'testimonials') {
+    return GENERATE_AI_TEXT_CTA_LOCATIONS.TESTIMONIAL_ITEM;
+  }
+
+  if (sectionType === 'banner-section') {
+    if (fieldType === 'description') {
+      return GENERATE_AI_TEXT_CTA_LOCATIONS.BANNER_DESCRIPTION;
+    }
+
+    if (fieldType === 'title') {
+      return GENERATE_AI_TEXT_CTA_LOCATIONS.BANNER_TITLE;
+    }
+  }
+
+  if (sectionType === 'about-section') {
+    if (fieldType === 'title') {
+      return GENERATE_AI_TEXT_CTA_LOCATIONS.ABOUT_TITLE;
+    }
+
+    if (fieldType === 'paragraph') {
+      return GENERATE_AI_TEXT_CTA_LOCATIONS.ABOUT_PARAGRAPH;
+    }
+  }
+
+  // Fallback: try to match directly with field type
+  // This handles cases where fieldType might already be in the correct format
+  const matchingLocation = Object.values(GENERATE_AI_TEXT_CTA_LOCATIONS).find(
+    (location) => location === fieldType,
+  );
+
+  return matchingLocation || fieldType;
+};

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

@@ -30,6 +30,7 @@ import {
 } from '../../../../brand-page-maker/utils';
 import { isDefaultContentText } from '../../utils';
 import { useUiLogoSettingsStore } from '../../../logo-settings/store';
+import { getCtaLocationFromFieldType } from '../../../../brand-page-maker/utils/mixpanel.util';
 
 const RTE_ALLOWED_SECTION_TYPES = [
   'banner-section',
@@ -252,6 +253,9 @@ export default defineComponent({
 
       return plainText;
     },
+    ctaLocation(): string {
+      return getCtaLocationFromFieldType(this.field.name, this.type);
+    },
   },
   watch: {
     fieldType() {

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.vue

@@ -28,7 +28,7 @@
             :id="`${id}-${field.name}`"
             :existing-text="plainTextValue"
             :is-design-com="isDesignCom"
-            :field-type="field.name"
+            :cta-location="ctaLocation"
             @capture-snapshot="onCaptureSnapshot"
             @on-use-text="onUseGeneratedText"
           />

package/src/shared/content-settings/components/generate-ai-button/GenerateAiButton.vue

@@ -15,8 +15,7 @@
       :is-visible="generateTextModalVisible"
       :existing-text="props.existingText"
       :is-design-com="props.isDesignCom"
-      :snapshot-base64="snapshotBase64"
-      :field-type="props.fieldType"
+      :cta-location="props.ctaLocation"
       @on-close="onCloseGenerateTextModal"
       @on-use-text="handleUseGeneratedText"
     />
@@ -33,18 +32,22 @@ import {
   useSnapshotStore,
 } from '../../../../brand-page-maker/stores';
 import type { AbTestResult } from '../../../../brand-page/models/brand-page-context.model';
+import {
+  EVENTS,
+  GENERATE_TEXT_CONTINUATION_EVENTS,
+  useEventTracker,
+} from '../../../../brand-page-maker/composables/useEventTracker';
 
 interface Props {
   id: string;
   existingText: string;
   isDesignCom?: boolean;
   captureSnapshotDelay?: number;
-  fieldType?: string;
+  ctaLocation: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   isDesignCom: false,
-  fieldType: 'text',
 });
 
 const emit = defineEmits<{
@@ -52,10 +55,10 @@ const emit = defineEmits<{
   'capture-snapshot': [];
 }>();
 
-const snapshotStore = useSnapshotStore();
 const brandPageContainerStore = useBrandPageContainerStore();
+const eventTracker = useEventTracker();
+const snapshotStore = useSnapshotStore();
 
-const snapshotBase64 = computed(() => snapshotStore.snapshotBase64);
 const abTests = computed(() => brandPageContainerStore.abTests);
 
 const showButton = computed(() => {
@@ -69,27 +72,35 @@ const showButton = computed(() => {
 const generateTextModalVisible = ref(false);
 const generateText = commonTr('generateText');
 
-const onShowGenerateModal = async () => {
-  emit('capture-snapshot');
+const onShowGenerateModal = () => {
+  generateTextModalVisible.value = true;
 
-  const maxWaitTime = 5000; // 5 seconds max
-  const pollInterval = 50; // Check every 50ms
-  let elapsedTime = 0;
+  eventTracker.sendWebsiteEvent({
+    eventName: EVENTS.WEBSITE_MAKER_AI_GENERATE_TEXT,
+    eventProps: {
+      cta_location: props.ctaLocation,
+      continuation: null,
+    },
+  });
 
-  while (!snapshotBase64.value && elapsedTime < maxWaitTime) {
-    await new Promise((resolve) => setTimeout(resolve, pollInterval));
-    elapsedTime += pollInterval;
-  }
+  snapshotStore.clearSnapshot();
 
-  generateTextModalVisible.value = true;
+  setTimeout(() => {
+    emit('capture-snapshot');
+  }, 50);
 };
 
 const onCloseGenerateTextModal = () => {
   generateTextModalVisible.value = false;
+
+  eventTracker.sendGenerateTextContinuationEvent(
+    props.ctaLocation,
+    GENERATE_TEXT_CONTINUATION_EVENTS.EXIT,
+  );
 };
 
 const handleUseGeneratedText = (generatedText: string) => {
   emit('on-use-text', generatedText);
-  onCloseGenerateTextModal();
+  generateTextModalVisible.value = false;
 };
 </script>

package/src/shared/content-settings/components/generate-ai-modal/GenerateAiModal.vue

@@ -162,13 +162,18 @@ import {
   commonTr,
 } from '../../../../composables/useTranslate';
 import { getInstance as getDesignTemplateClient } from '../../../../clients/design-template-client';
+import {
+  EVENTS,
+  GENERATE_TEXT_CONTINUATION_EVENTS,
+  useEventTracker,
+} from '../../../../brand-page-maker/composables/useEventTracker';
+import { useSnapshotStore } from '../../../../brand-page-maker/stores';
 
 interface Props {
   isVisible: boolean;
   existingText?: string;
-  snapshotBase64?: string | null;
   isDesignCom?: boolean;
-  fieldType?: string;
+  ctaLocation: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -190,9 +195,13 @@ const data = reactive({
   promptError: '',
 });
 
+const eventTracker = useEventTracker();
 const textareaRef = ref<HTMLTextAreaElement | null>(null);
 const MAX_PROMPT_LENGTH = 500;
 
+const snapshotStore = useSnapshotStore();
+const snapshotBase64 = computed(() => snapshotStore.snapshotBase64);
+
 // Auto-resize textarea
 const resizeTextarea = () => {
   if (textareaRef.value) {
@@ -301,6 +310,13 @@ const typeText = (fullText: string) => {
 const copyToClipboard = async () => {
   if (!data.response) return;
 
+  eventTracker.sendWebsiteEvent({
+    eventName: EVENTS.WEBSITE_MAKER_AI_COPY_RESPONSE,
+    eventProps: {
+      cta_location: props.ctaLocation,
+    },
+  });
+
   try {
     await navigator.clipboard.writeText(data.response);
     data.isCopied = true;
@@ -317,21 +333,44 @@ const copyToClipboard = async () => {
 const onUseText = () => {
   if (!data.response) return;
 
+  eventTracker.sendGenerateTextContinuationEvent(
+    props.ctaLocation,
+    GENERATE_TEXT_CONTINUATION_EVENTS.USE_TEXT,
+  );
+
   emit('on-use-text', data.response);
   onClose();
 };
 
 const onStopGeneration = () => {
+  eventTracker.sendWebsiteEvent({
+    eventName: EVENTS.WEBSITE_MAKER_AI_STOP_GENERATION,
+    eventProps: {
+      cta_location: props.ctaLocation,
+    },
+  });
   stopGeneration();
   data.response = generateAiModalTr('generationStopped');
 };
 const onRegeneratePrompt = () => {
   if (data.lastPromptSent) {
+    eventTracker.sendWebsiteEvent({
+      eventName: EVENTS.WEBSITE_MAKER_AI_REGENERATE_TEXT,
+      eventProps: {
+        cta_location: props.ctaLocation,
+      },
+    });
     onSendPrompt(data.lastPromptSent);
   }
 };
 
 const onSendButtonClick = () => {
+  eventTracker.sendWebsiteEvent({
+    eventName: EVENTS.WEBSITE_MAKER_AI_SEND_PROMPT,
+    eventProps: {
+      cta_location: props.ctaLocation,
+    },
+  });
   onSendPrompt();
 };
 
@@ -354,11 +393,21 @@ const onSendPrompt = async (customPrompt?: string) => {
   clearTypingInterval();
 
   try {
+    const maxWaitTime = 5000;
+    const pollInterval = 50;
+    let elapsedTime = 0;
+
+    // Wait for snapshot to be captured (triggered by button component)
+    while (!snapshotBase64.value && elapsedTime < maxWaitTime) {
+      await new Promise((resolve) => setTimeout(resolve, pollInterval));
+      elapsedTime += pollInterval;
+    }
+
     const client = getDesignTemplateClient();
     const result = await client.generateText(
       promptToSend,
       props.existingText ?? '',
-      props.snapshotBase64 || undefined,
+      snapshotBase64.value || undefined,
     );
 
     // Check if generation was stopped before setting response
@@ -387,10 +436,10 @@ const onSendPrompt = async (customPrompt?: string) => {
   }
 };
 
-// Generate default prompt based on field type
+// Generate default prompt based on CTA location
 const getDefaultPrompt = (): string => {
-  const fieldType = props.fieldType || 'text';
-  return `Improve this ${fieldType}`;
+  const locationLabel = props.ctaLocation.replace(/_/g, ' ');
+  return `Improve this ${locationLabel}`;
 };
 
 // Auto-generate text when modal opens if there's existing text
@@ -404,6 +453,12 @@ watch(
       data.lastPromptSent = '';
 
       if (props.existingText && props.existingText.trim()) {
+        eventTracker.sendWebsiteEvent({
+          eventName: EVENTS.WEBSITE_MAKER_AI_SEND_PROMPT,
+          eventProps: {
+            cta_location: props.ctaLocation,
+          },
+        });
         const defaultPrompt = getDefaultPrompt();
         onSendPrompt(defaultPrompt);
       }
@@ -415,7 +470,7 @@ watch(
       data.isTyping = false;
     }
   },
-  { flush: 'sync' }, // Execute synchronously to prevent race conditions
+  { flush: 'sync' },
 );
 
 onUnmounted(clearTypingInterval);

package/src/shared/content-settings/components/image-field/ImageField.mixin.ts

@@ -122,7 +122,10 @@ export default defineComponent({
     },
 
     onRemove() {
-      this.content.media = undefined;
+      if (this.content?.media) {
+        this.content.media = undefined;
+      }
+
       this.imgValue = '';
       this.imageUrl = '';
     },

package/src/shared/content-settings/components/testimonial-items-field/TestimonialItemsField.vue

@@ -21,7 +21,7 @@
             :id="`${id}-${option.index}`"
             :existing-text="getPlainTextValue(option.index)"
             :is-design-com="isDesignCom"
-            field-type="testimonials"
+            :cta-location="getCtaLocationFromFieldType('testimonials')"
             @capture-snapshot="onCaptureSnapshot"
             @on-use-text="(text) => onUseGeneratedText(text, option.index)"
           />
@@ -204,6 +204,7 @@ import TextareaField from '../../../content-settings/components/textarea-field/T
 import ColorReplacementsField from '../color-replacements-field/ColorReplacementsField.vue';
 import GenerateAiButton from '../generate-ai-button/GenerateAiButton.vue';
 import { testimonialItemsFieldTr } from '../../../../composables/useTranslate';
+import { getCtaLocationFromFieldType } from '../../../../brand-page-maker/utils/mixpanel.util';
 import PersonalisationOverrideField from '../../../content-settings/components/personalisation-override-field/PersonalisationOverrideField.vue';
 
 export default {
@@ -221,6 +222,7 @@ export default {
   setup() {
     return {
       testimonialItemsFieldTr,
+      getCtaLocationFromFieldType,
     };
   },
 };

package/src/shared/content-settings/components/text-items-field/TextItemsField.vue

@@ -21,7 +21,7 @@
             :id="`${id}-${option.index}`"
             :existing-text="getPlainTextValue(option.index)"
             :is-design-com="isDesignCom"
-            field-type="text"
+            :cta-location="getCtaLocationFromFieldType('text')"
             @capture-snapshot="onCaptureSnapshot"
             @on-use-text="(text) => onUseGeneratedText(text, option.index)"
           />
@@ -97,6 +97,7 @@ import {
   textItemsFieldTr,
 } from '../../../../composables/useTranslate';
 import PersonalisationOverrideField from '../../../content-settings/components/personalisation-override-field/PersonalisationOverrideField.vue';
+import { getCtaLocationFromFieldType } from '../../../../brand-page-maker/utils/mixpanel.util';
 
 export default {
   components: {
@@ -112,6 +113,7 @@ export default {
     return {
       commonTr,
       textItemsFieldTr,
+      getCtaLocationFromFieldType,
     };
   },
 };