@designcrowd/library.brand-page 5.17.28 → 5.18.0

package/lib/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.js

@@ -280,10 +280,10 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
             fontSettings.selectedFont = 'Lato';
         }
         if (textStyleAttributes && textStyleAttributes.fontSize) {
-            fontSettings.selectedFontSizePx = parseInt(emToPx(textStyleAttributes.fontSize));
+            fontSettings.selectedFontSizePx = Math.ceil(parseFloat(emToPx(textStyleAttributes.fontSize)));
         }
         else {
-            fontSettings.selectedFontSizePx = parseInt(emToPx(fontSettings.selectedFontSize));
+            fontSettings.selectedFontSizePx = Math.ceil(parseFloat(emToPx(fontSettings.selectedFontSize)));
         }
         if (textStyleAttributes && textStyleAttributes.color) {
             if (!hasLogoColorVar(textStyleAttributes.color))
@@ -345,7 +345,7 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
             // sync toolbar editor styles
             fontSettings.selectedFont = globalStyles?.fontFamily ?? 'Lato';
             fontSettings.selectedFontSize = globalStyles?.fontSize ?? '2.25em';
-            fontSettings.selectedFontSizePx = parseInt(emToPx(globalStyles?.fontSize ?? '2.25em'));
+            fontSettings.selectedFontSizePx = Math.ceil(parseFloat(emToPx(globalStyles?.fontSize ?? '2.25em')));
             fontSettings.selectedTextColor = hasLogoColorVar(globalStyles.color ?? '')
                 ? '#000000'
                 : globalStyles?.color ?? '#000000';
@@ -365,7 +365,7 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
             // copy the content settings styles to the editor
             fontSettings.selectedFont = props.styles?.fontFamily ?? 'Lato';
             fontSettings.selectedFontSize = props.styles?.fontSize ?? '2.25em';
-            fontSettings.selectedFontSizePx = parseInt(emToPx(props.styles?.fontSize ?? '2.25em'));
+            fontSettings.selectedFontSizePx = Math.ceil(parseFloat(emToPx(props.styles?.fontSize ?? '2.25em')));
             fontSettings.selectedTextColor = hasLogoColorVar(props.styles?.color ?? '#000000')
                 ? '#000000'
                 : props.styles?.color ?? '#000000';
@@ -421,7 +421,7 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
             case 'fontSize':
                 const size = editorOption.value;
                 fontSettings.selectedFontSizePx = size.includes('em')
-                    ? parseInt(emToPx(size))
+                    ? Math.ceil(parseFloat(emToPx(size)))
                     : parseInt(size);
                 toggleFontSize(size);
                 fontStyleChanges.fontSize = size.includes('em') ? size : pxToEm(size);

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

@@ -44,10 +44,7 @@ export declare const EVENTS: {
     WEBSITE_MAKER_UPSELL_ACTION: string;
     WEBSITE_MAKER_SWITCH_LOGO: string;
     WEBSITE_MAKER_SWITCH_LOGO_MODAL: string;
-    WEBSITE_MAKER_AI_GENERATE_TEXT: string;
-    WEBSITE_MAKER_AI_REGENERATE_TEXT: string;
     WEBSITE_MAKER_AI_SEND_PROMPT: string;
-    WEBSITE_MAKER_AI_COPY_RESPONSE: string;
     WEBSITE_MAKER_AI_STOP_GENERATION: string;
     WEBSITE_SAVE_CONTACT: string;
     WEBSITE_START_FOR_FREE: string;
@@ -82,22 +79,13 @@ export declare const UPGRADE_CTA_LOCATIONS: {
     NAV_TOP: string;
     NAV_BOTTOM: string;
 };
-export declare const GENERATE_AI_TEXT_CTA_LOCATIONS: {
-    BANNER_DESCRIPTION: string;
-    BANNER_TITLE: string;
-    ABOUT_TITLE: string;
-    ABOUT_PARAGRAPH: string;
-    TEXT_ITEM: string;
-    TESTIMONIAL_ITEM: string;
-};
-export declare const GENERATE_AI_SUGGESTED_PROMPT: {
-    GENERATE_TEXT: string;
-    IMPROVE_TEXT: string;
-    SPELL_CHECK: string;
+export declare const AI_CTA_LOCATIONS: {
+    AI_BUILDER_TAB: string;
 };
 export declare const TRIGGER_TYPE: {
     AUTOMATIC: string;
     USER_TRIGGERED: string;
+    AI_BUILDER: string;
 };
 export declare const PUBLISH_MODAL_CONTINUATION_EVENTS: {
     PUBLISH: string;
@@ -150,11 +138,13 @@ declare const useEventTracker: () => {
     sendTemplateSelectEvent: (templateId: string) => void;
     sendTemplateCategorySelectEvent: (category: string) => void;
     sendSidebarCategoryClickedEvent: (tabName: string) => void;
+    sendAddContentEvent: (contentType: string, selectLocation?: string, contentCategory?: string, triggerType?: string) => void;
+    sendRemoveContentEvent: (contentType: string, selectLocation?: string, contentCategory?: string, triggerType?: string) => void;
     sendAddContentContinuationEvent: (continuation: string) => void;
     sendUpsellOfferEvent: (upsellType: string) => void;
     sendUpsellOfferActionEvent: (upsellType: string, action: string) => void;
-    sendGenerateTextContinuationEvent: (cta_location: string, continuation: string | null) => void;
     sendAiSendPromptEvent: (ctaLocation: string) => void;
     sendAiStopGenerationEvent: (ctaLocation: string) => void;
 };
+export type EventTracker = ReturnType<typeof useEventTracker>;
 export { useEventTracker };

package/lib/src/brand-page-maker/composables/useEventTracker.js

@@ -25,10 +25,7 @@ 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',
     WEBSITE_SAVE_CONTACT: 'website_save_contact',
     WEBSITE_START_FOR_FREE: 'website_start_for_free',
@@ -63,22 +60,13 @@ export const UPGRADE_CTA_LOCATIONS = {
     NAV_TOP: 'nav_top',
     NAV_BOTTOM: 'nav_bottom',
 };
-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 GENERATE_AI_SUGGESTED_PROMPT = {
-    GENERATE_TEXT: 'generate_text',
-    IMPROVE_TEXT: 'improve_text',
-    SPELL_CHECK: 'spell_check',
+export const AI_CTA_LOCATIONS = {
+    AI_BUILDER_TAB: 'ai_builder_tab',
 };
 export const TRIGGER_TYPE = {
     AUTOMATIC: 'automatic',
     USER_TRIGGERED: 'user_triggered',
+    AI_BUILDER: 'ai_builder',
 };
 export const PUBLISH_MODAL_CONTINUATION_EVENTS = {
     PUBLISH: 'publish',
@@ -284,6 +272,22 @@ const useEventTracker = () => {
                 sidebar_category_tab_name: tabName,
             });
         },
+        sendAddContentEvent: (contentType, selectLocation, contentCategory, triggerType = TRIGGER_TYPE.USER_TRIGGERED) => {
+            _publishEvent(EVENTS.WEBSITE_MAKER_ADD_CONTENT, {
+                content_type: contentType,
+                trigger_type: triggerType,
+                select_location: selectLocation,
+                content_category: contentCategory,
+            });
+        },
+        sendRemoveContentEvent: (contentType, selectLocation, contentCategory, triggerType = TRIGGER_TYPE.USER_TRIGGERED) => {
+            _publishEvent(EVENTS.WEBSITE_MAKER_REMOVE_CONTENT, {
+                content_type: contentType,
+                trigger_type: triggerType,
+                select_location: selectLocation,
+                content_category: contentCategory,
+            });
+        },
         sendAddContentContinuationEvent: (continuation) => {
             _publishEvent(EVENTS.WEBSITE_MAKER_ADD_CONTENT, {
                 continuation,
@@ -300,12 +304,6 @@ const useEventTracker = () => {
                 action,
             });
         },
-        sendGenerateTextContinuationEvent: (cta_location, continuation) => {
-            _publishEvent(EVENTS.WEBSITE_MAKER_AI_GENERATE_TEXT, {
-                cta_location,
-                continuation,
-            });
-        },
         sendAiSendPromptEvent: (ctaLocation) => {
             _publishEvent(EVENTS.WEBSITE_MAKER_AI_SEND_PROMPT, {
                 cta_location: ctaLocation,

package/lib/src/brand-page-maker/constants/sidebar-constant.d.ts

@@ -9,7 +9,6 @@ export declare const SIDE_BAR_TAB_NAMES: {
     ADMIN_LOGO_SETTINGS: string;
     STYLE_SETTINGS: string;
     BRANDPAGE_SETTINGS: string;
-    AI_TEXT_EDIT: string;
     AI_WEBSITE_BUILDER: string;
 };
 export declare const DEFAULT_SIDE_BAR_TABS: () => SideBarTab[];

package/lib/src/brand-page-maker/constants/sidebar-constant.js

@@ -9,7 +9,6 @@ export const SIDE_BAR_TAB_NAMES = {
     ADMIN_LOGO_SETTINGS: 'AdminLogoSettings',
     STYLE_SETTINGS: 'StyleSettings',
     BRANDPAGE_SETTINGS: 'BrandPageSettings',
-    AI_TEXT_EDIT: 'AiTextEdit',
     AI_WEBSITE_BUILDER: 'AiWebsiteBuilder',
 };
 export const DEFAULT_SIDE_BAR_TABS = () => [
@@ -36,20 +35,6 @@ export const DEFAULT_SIDE_BAR_TABS = () => [
         accessibleDisplayName: 'Content',
         isVisible: true,
     },
-    {
-        name: SIDE_BAR_TAB_NAMES.AI_TEXT_EDIT,
-        displayName: 'AI Text',
-        iconName: 'sparkles',
-        accessibleDisplayName: 'AI Text Edit',
-        isVisible: false,
-    },
-    {
-        name: SIDE_BAR_TAB_NAMES.AI_WEBSITE_BUILDER,
-        displayName: 'AI Builder',
-        iconName: 'ai',
-        accessibleDisplayName: 'AI Website Builder',
-        isVisible: true,
-    },
     {
         name: SIDE_BAR_TAB_NAMES.BACKGROUND_SETTINGS,
         displayName: constantsTr(`backgroundDisplayName`),
@@ -98,4 +83,11 @@ export const DEFAULT_SIDE_BAR_TABS = () => [
         accessibleDisplayName: 'Settings',
         isVisible: true,
     },
+    {
+        name: SIDE_BAR_TAB_NAMES.AI_WEBSITE_BUILDER,
+        displayName: 'AI',
+        iconName: 'ai',
+        accessibleDisplayName: 'AI Website Builder',
+        isVisible: true,
+    },
 ];

package/lib/src/brand-page-maker/convertors/image-aspect-ratio.convertor.js

@@ -15,7 +15,7 @@ export const imageAspectRatioConvertor = {
                         dataAttribute: 'data-test-btn-left-aligned',
                         label: converterTr(`original`),
                         value: ASPECT_RATIOS['Default'],
-                        isSelected: !value,
+                        isSelected: !value || value === 'original',
                     },
                     {
                         iconName: 'aspect-ratio1_1',
@@ -91,7 +91,7 @@ export const imageAspectRatioConvertor = {
                     {
                         label: converterTr(`default`),
                         value: ASPECT_RATIOS['Default'],
-                        isSelected: !value,
+                        isSelected: !value || value === 'original',
                     },
                     {
                         label: '1:1',

package/lib/src/brand-page-maker/convertors/text-size-value.convertor.js

@@ -3,7 +3,9 @@ import { pxToEm, emToPx } from '../utils/text.util';
 export const textSizeValueConvertor = {
     convertBackToMultipleValues: false,
     convert(value) {
-        return (value.fontSize ? emToPx(value.fontSize) : DEFAULT_FONT_SIZE).toString();
+        if (!value.fontSize)
+            return DEFAULT_FONT_SIZE.toString();
+        return Math.ceil(parseFloat(emToPx(value.fontSize))).toString();
     },
     convertBack(valuePx) {
         return {