@useinsider/guido 1.0.3-beta.3dd93d0 → 1.0.3-beta.3e280d4

package/dist/node_modules/lodash-es/_arrayLikeKeys.js

@@ -1,20 +1,19 @@
-import a from "./_baseTimes.js";
+import p from "./_baseTimes.js";
 import g from "./isArguments.js";
 import h from "./isArray.js";
-import b from "./isBuffer.js";
-import A from "./_isIndex.js";
-import c from "./isTypedArray.js";
-var d = Object.prototype, O = d.hasOwnProperty;
-function l(t, p) {
-  var o = h(t), i = !o && g(t), s = !o && !i && b(t), e = !o && !i && !s && c(t), n = o || i || s || e, f = n ? a(t.length, String) : [], m = f.length;
-  for (var r in t)
-    (p || O.call(t, r)) && !(n && // Safari 9 has enumerable `arguments.length` in strict mode.
+import a from "./isBuffer.js";
+import d from "./_isIndex.js";
+import A from "./isTypedArray.js";
+function c(i, b) {
+  var t = h(i), f = !t && g(i), s = !t && !f && a(i), o = !t && !f && !s && A(i), n = t || f || s || o, e = n ? p(i.length, String) : [], m = e.length;
+  for (var r in i)
+    n && // Safari 9 has enumerable `arguments.length` in strict mode.
     (r == "length" || // Node.js 0.10 has enumerable non-index properties on buffers.
     s && (r == "offset" || r == "parent") || // PhantomJS 2 has enumerable non-index properties on typed arrays.
-    e && (r == "buffer" || r == "byteLength" || r == "byteOffset") || // Skip index properties.
-    A(r, m))) && f.push(r);
-  return f;
+    o && (r == "buffer" || r == "byteLength" || r == "byteOffset") || // Skip index properties.
+    d(r, m)) || e.push(r);
+  return e;
 }
 export {
-  l as default
+  c as default
 };

package/dist/node_modules/lodash-es/keysIn.js

@@ -1,9 +1,9 @@
 import e from "./_arrayLikeKeys.js";
 import i from "./_baseKeysIn.js";
 import a from "./isArrayLike.js";
-function t(r) {
-  return a(r) ? e(r, !0) : i(r);
+function f(r) {
+  return a(r) ? e(r) : i(r);
 }
 export {
-  t as default
+  f as default
 };

package/dist/package.json.js

@@ -1,4 +1,4 @@
-const o = { stripo: { version: "2.47.0" } }, s = {
+const o = { stripo: { version: "2.42.0" } }, s = {
   guido: o
 };
 export {

package/dist/services/recommendationApi.js

@@ -1,13 +1,19 @@
 import { useHttp as c } from "../composables/useHttp.js";
 import { URLS as a } from "../enums/extensions/recommendationBlock.js";
-const R = () => {
+import { useEditorStore as m } from "../stores/editor.js";
+import { replaceString as s } from "../utils/genericUtil.js";
+const l = () => {
   const { get: o } = c();
   return {
     fetchRecommendationCreateData: async () => {
+      const e = m();
       try {
-        return (await o("/newsletter/recommendations/create-data")).data;
-      } catch (e) {
-        throw console.error("fetchUserModalState error:", e), e;
+        return (await o(s(
+          "/newsletter/{id}/recommendations/get-campaign-create-data",
+          { id: e.templateId }
+        ))).data;
+      } catch (t) {
+        throw console.error("fetchUserModalState error:", t), t;
       }
     },
     fetchRecommendationFilters: async () => {
@@ -18,20 +24,20 @@ const R = () => {
         throw console.error("fetchRecommendationFilters error:", e), e;
       }
     },
-    fetchRecommendationProducts: async (e, n) => {
+    fetchRecommendationProducts: async (e, t) => {
       try {
-        const t = decodeURIComponent(new URLSearchParams(Object.entries(n)).toString());
-        console.debug("🏁 Recommendation API Query:", t);
-        const r = await o(
-          `${a.RECOMMENDATION_API_URL}/v2/${e}?${t}`
+        const r = decodeURIComponent(new URLSearchParams(Object.entries(t)).toString());
+        console.debug("🏁 Recommendation API Query:", r);
+        const n = await o(
+          `${a.RECOMMENDATION_API_URL}/v2/${e}?${r}`
         );
-        return (r == null ? void 0 : r.data) ?? [];
-      } catch (t) {
-        throw console.error("fetchRecommendationProducts error:", t), t;
+        return (n == null ? void 0 : n.data) ?? [];
+      } catch (r) {
+        throw console.error("fetchRecommendationProducts error:", r), r;
       }
     }
   };
 };
 export {
-  R as useRecommendationApi
+  l as useRecommendationApi
 };

package/dist/services/stripoApi.js

@@ -1,61 +1,49 @@
-import { useHttp as m } from "../composables/useHttp.js";
-import { useToaster as p } from "../composables/useToaster.js";
-import { MAX_DEFAULT_TEMPLATE_ID as g } from "../enums/defaults.js";
-const y = () => {
-  const { get: s } = m(), { handleError: n } = p();
+import { useHttp as a } from "../composables/useHttp.js";
+import { useToaster as s } from "../composables/useToaster.js";
+const m = () => {
+  const { get: r } = a(), { handleError: o } = s();
   return {
     getToken: async () => {
       try {
-        const e = Number(localStorage.getItem("ins-guido-test-instance")), { data: a } = await s(`/stripo/get-user-token?test=${e}`);
-        return a.body.token;
-      } catch (e) {
-        return n(e, "Failed to fetch token"), "";
+        const t = Number(localStorage.getItem("ins-guido-test-instance")), { data: e } = await r(`/stripo/get-user-token?test=${t}`);
+        return e.body.token;
+      } catch (t) {
+        return o(t, "Failed to fetch token"), "";
       }
     },
     getCustomFonts: async () => {
       try {
-        const { data: e = [] } = await s("/stripo/get-partner-custom-fonts");
-        return e.map((a) => ({
-          ...a,
+        const { data: t = [] } = await r("/stripo/get-partner-custom-fonts");
+        return t.map((e) => ({
+          ...e,
           active: !0
         }));
-      } catch (e) {
-        return n(e, "Failed to fetch custom fonts"), [];
+      } catch (t) {
+        return o(t, "Failed to fetch custom fonts"), [];
       }
     },
     getDefaultTemplate: async () => {
-      var a;
-      const e = {
+      const t = {
         html: "",
         css: "",
         forceRecreate: !0
       };
       try {
-        const l = new URLSearchParams(window.location.search).get("default-template"), o = l ? parseInt(l) : 0, u = o >= 1 && o <= g ? o : 0;
-        console.debug("getDefaultTemplate: fetching template", { templateIdParam: l, templateId: o, validTemplateId: u });
-        const { data: r } = await s(
-          `/stripo/default-template/${u}`
-        );
-        console.debug("getDefaultTemplate: raw data type", typeof r);
-        const t = typeof r == "string" ? JSON.parse(r) : r;
-        return console.debug("getDefaultTemplate: parsed data", {
-          isObject: typeof t == "object",
-          hasHtml: t && typeof t == "object" && "html" in t,
-          hasCss: t && typeof t == "object" && "css" in t,
-          htmlLength: ((a = t == null ? void 0 : t.html) == null ? void 0 : a.length) || 0
-        }), !t || typeof t != "object" || !("html" in t) || !("css" in t) ? (console.debug("getDefaultTemplate: Invalid data, returning fallback"), e) : (console.debug("getDefaultTemplate: Returning valid template", {
-          htmlLength: t.html.length,
-          cssLength: t.css.length
-        }), {
-          ...t,
-          forceRecreate: !0
-        });
-      } catch (c) {
-        return console.debug("getDefaultTemplate: Error occurred", c), n(c, "Failed to fetch default template"), e;
+        const { data: e } = await r("/stripo/default-template");
+        try {
+          return {
+            ...JSON.parse(e),
+            forceRecreate: !0
+          };
+        } catch {
+          return t;
+        }
+      } catch (e) {
+        return o(e, "Failed to fetch default template"), t;
       }
     }
   };
 };
 export {
-  y as useStripoApi
+  m as useStripoApi
 };

package/dist/src/@types/generic.d.ts

@@ -6,71 +6,36 @@ type Features = {
     dynamicContent?: boolean;
     saveAsTemplate?: boolean;
     versionHistory?: boolean;
-    testMessage?: boolean;
-    displayConditions?: boolean;
 };
 type Partner = {
     partnerName: string;
     productType: number;
     messageType: number;
 };
-export type GuidoBlockType = 'amp-accordion' | 'amp-carousel' | 'amp-form-controls' | 'banner-block' | 'button-block' | 'html-block' | 'image-block' | 'menu-block' | 'social-block' | 'spacer-block' | 'text-block' | 'timer-block' | 'video-block';
-export type GuidoCustomBlockType = 'dynamic-content' | 'checkbox-block' | 'radio-button-block' | 'recommendation-block' | 'unsubscribe-block' | 'coupon-block' | 'items-block';
-type BlocksConfig = {
-    excludeDefaults?: GuidoBlockType[];
-    includeCustoms?: GuidoCustomBlockType[];
-};
 export type GuidoConfig = {
     translationsPath: string;
     htmlCompilerRules?: CompilerRule[];
     ignoreDefaultHtmlCompilerRules?: boolean;
     useHeader?: boolean;
     emailHeader: EmailHeader;
-    migrationDate: number;
     partner?: Partner;
     extensions?: Extensions;
     features?: Features;
-    blocks?: BlocksConfig;
-    backButtonLabel?: string;
 };
 export type TemplateConfig = {
     preselectedDynamicContentList?: DynamicContent[];
     selectedUnsubscribePages?: number[];
     variationId?: string;
 };
-export type BaseDynamicContent = {
+export type DynamicContent = {
     value: string;
+    text: string;
     fallback?: string;
     format?: {
         key: string;
         value: string;
     };
 };
-export type DynamicContent = BaseDynamicContent & {
-    text: string;
-};
-export type MergeTag = BaseDynamicContent & {
-    label: string;
-    selStart?: number;
-    selEnd?: number;
-    hidden?: boolean;
-};
-export type PositionData = {
-    x: number;
-    y: number;
-    width?: number;
-    height?: number;
-};
-export type DynamicContentEvent = {
-    attribute: DynamicContent;
-    position?: PositionData;
-};
-export type MergeTagClickEvent = {
-    position: PositionData;
-    element: HTMLElement;
-    tagValue: string | null;
-    tagLabel: string | null;
-};
 export interface EmailHeader {
     senderName: string;
     subject: string;
@@ -86,13 +51,12 @@ export interface TooltipOptions {
     };
     preventXss?: boolean;
 }
+export type MergeTag = {
+    label: string;
+    value: string;
+};
 export type TextValueObject = {
     text: string;
     value: string;
 };
-export interface L10n {
-    locale?: string;
-    timezone?: string;
-    time?: number;
-}
 export {};

package/dist/src/components/Guido.vue.d.ts

@@ -1,4 +1,4 @@
-import type { DynamicContent, GuidoConfig, PositionData, TemplateConfig } from '@@/Types/generic';
+import type { DynamicContent, GuidoConfig, TemplateConfig } from '@@/Types/generic';
 import type { SavedTemplateDetails } from '@@/Types/stripo';
 type __VLS_Props = {
     templateId: string;
@@ -20,14 +20,12 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__
     hasChanges: import("vue").ComputedRef<boolean>;
     saveSilent: () => Promise<SavedTemplateDetails | undefined> | undefined;
 }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
-    "dynamic-content:open": (detail: DynamicContent | null, position?: PositionData | undefined) => void;
+    "dynamic-content:open": (detail: DynamicContent | null) => void;
     back: () => void;
     "save:start": () => void;
     "save:complete": (data: Omit<SavedTemplateDetails, "forceRecreate">) => void;
     "on-change": (hasChanges: boolean) => void;
     ready: () => void;
-    "onboarding:finished": () => void;
-    "test-email:click": () => void;
 }, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>>, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/src/components/organisms/onboarding/NewVersionPopup.vue.d.ts

@@ -1,4 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
-    "onboarding-finished": () => void;
-}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/src/components/organisms/onboarding/OnboardingWrapper.vue.d.ts

@@ -1,4 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
-    "onboarding-finished": () => void;
-}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/src/components/wrappers/WpModal.vue.d.ts

@@ -32,8 +32,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<
     closeOnOutsideClick: boolean;
     footerStatus: boolean;
 }>>>, {
-    size: "small" | "medium" | "large";
     description: string;
+    size: "small" | "medium" | "large";
     closeOnOutsideClick: boolean;
     footerButtonOptions: FooterButtonGroup;
     closeButtonStatus: boolean;

package/dist/src/composables/useGuidoActions.d.ts

@@ -3,11 +3,9 @@ import type { InjectionKey } from 'vue';
 export type BackHandler = () => void;
 export type SaveStartHandler = () => void;
 export type SaveCompleteHandler = (template: Omit<SavedTemplateDetails, 'forceRecreate'>) => void;
-export type TestEmailClickHandler = () => void;
 export declare const BACK_KEY: InjectionKey<BackHandler>;
 export declare const SAVE_START_KEY: InjectionKey<SaveStartHandler>;
 export declare const SAVE_COMPLETE_KEY: InjectionKey<SaveCompleteHandler>;
-export declare const TEST_EMAIL_CLICK_KEY: InjectionKey<TestEmailClickHandler>;
 /**
  * Provides Guido action handlers to child components
  */
@@ -15,7 +13,6 @@ export declare const provideGuidoActions: (actions: {
     onBack: BackHandler;
     onSaveStart: SaveStartHandler;
     onSaveComplete: SaveCompleteHandler;
-    onTestEmailClick: TestEmailClickHandler;
 }) => void;
 /**
  * Provides individual Guido action handlers
@@ -38,11 +35,6 @@ export declare const useSaveStart: () => SaveStartHandler;
  * @returns Save complete function
  */
 export declare const useSaveComplete: () => SaveCompleteHandler;
-/**
- * Hook to use the test email click handler
- * @returns Test email click function
- */
-export declare const useTestEmailClick: () => TestEmailClickHandler;
 /**
  * Convenience hook to get all Guido actions
  * @returns Object containing all action handlers
@@ -51,5 +43,4 @@ export declare const useGuidoActions: () => {
     back: BackHandler;
     saveStart: SaveStartHandler;
     saveComplete: SaveCompleteHandler;
-    testEmailClick: TestEmailClickHandler;
 };

package/dist/src/enums/defaults.d.ts

@@ -8,6 +8,5 @@ export declare const DefaultProductType = "email";
 export declare const DefaultUsername = "Guido User";
 export declare const DefaultMessageType: number;
 export declare const EditorType: number;
-export declare const MAX_DEFAULT_TEMPLATE_ID = 13;
 export declare const ProductIds: Record<string, number>;
 export declare const TEST_PARTNER_LIST: string[];

package/dist/src/enums/onboarding.d.ts

@@ -1,6 +1 @@
 export declare const SERVICE_HOVER_SELECTORS: string[];
-export declare const UI_EDITOR_SELECTOR = "ui-editor";
-export declare const CARD_COMPOSITION_TAB_SELECTOR = "button[role=\"tab\"][aria-label=\"Card Composition\"]";
-export declare const SETTINGS_TAB_SELECTOR = "button[role=\"tab\"][aria-label=\"Settings\"]";
-export declare const RIBBON_SELECTOR = ".in-ribbons-wrapper";
-export declare const ACADEMY_LINK = "https://academy.useinsider.com/docs/email-drag-drop-editor";

package/dist/src/extensions/Blocks/Checkbox/block.d.ts

@@ -8,5 +8,4 @@ export declare class CheckboxBlock extends Block {
     getName(): string;
     getDescription(): string;
     getTemplate(): string;
-    allowInnerBlocksDND(): boolean;
 }

package/dist/src/extensions/Blocks/Checkbox/template.d.ts

@@ -1,4 +1,4 @@
-declare const migrationTemplate = "\n    <td\n        align=\"left\"\n        esd-extension-block-id=\"checkbox-block\"\n        class=\"\n            checkbox-block\n            checkbox-block-v2\n            esd-block-checkbox\n            esd-checkbox-block\n            esd-extension-block es-p20\"\n    >\n        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n            <tbody>\n            <tr>\n                <td align=\"left\" width=\"39\" style=\"vertical-align: top\">\n                <input type=\"checkbox\">\n                </td>\n                <td align=\"left\" width=\"816\" style=\"vertical-align: top\">\n                <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n                    <tbody>\n                    <tr>\n                        {-{-TITLE-}-}\n                    </tr>\n                    <tr>\n                        {-{-DESCRIPTION-}-}\n                    </tr>\n                    </tbody>\n                </table>\n                </td>\n            </tr>\n            </tbody>\n        </table>\n    </td>\n";
+declare const migrationTemplate = "\n    <td \n        align=\"left\" \n        esd-extension-block-id=\"checkbox-block\" \n        class=\"checkbox-block-v2 esd-block-checkbox esd-checkbox-block esd-extension-block es-p20\"\n    >\n        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n            <tbody>\n            <tr>\n                <td align=\"left\" width=\"39\" style=\"vertical-align: top\">\n                <input type=\"checkbox\">\n                </td>\n                <td align=\"left\" width=\"816\" style=\"vertical-align: top\">\n                <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n                    <tbody>\n                    <tr>\n                        {-{-TITLE-}-}\n                    </tr>\n                    <tr>\n                        {-{-DESCRIPTION-}-}\n                    </tr>\n                    </tbody>\n                </table>\n                </td>\n            </tr>\n            </tbody>\n        </table>\n    </td>\n";
 /**
  * @returns The template for the default checkbox block
  */

package/dist/src/extensions/Blocks/RadioButton/block.d.ts

@@ -8,5 +8,4 @@ export declare class RadioButtonCustomBlock extends Block {
     getName(): string;
     getDescription(): string;
     getTemplate(): string;
-    allowInnerBlocksDND(): boolean;
 }

package/dist/src/extensions/Blocks/RadioButton/template.d.ts

@@ -1,4 +1,4 @@
-declare const migrationTemplate = "\n    <td\n        align=\"left\"\n        esd-extension-block-id=\"radio-button-block\"\n        esd-handler-name=\"esd-extension-RadioButtonBlock\"\n        class=\"\n            radio-button\n            radio-button-v2\n            esd-block-ra\n            esd-radio-button-block\n            esd-extension-block\n            es-p10t\n            es-p10b\n            es-p30r\n            es-p30l\"\n    >\n        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n            <tbody>\n                <tr>\n                    <td align=\"left\" width=\"70%\" style=\"vertical-align: top;\">\n                        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n                            <tbody>\n                                <tr>\n                                    {-{-TITLE-}-}\n                                </tr>\n                                <tr>\n                                    {-{-DESCRIPTION-}-}\n                                </tr>\n                            </tbody>\n                        </table>\n                    </td>\n                    <td align=\"right\" width=\"30%\" style=\"vertical-align: middle;\">\n                        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n                            <tbody>\n                                <tr>\n                                    <td width=\"50%\">\n                                        <table width=\"100%\">\n                                            <tr>\n                                                <td width=\"24\">\n                                                    <input\n                                                        type=\"radio\"\n                                                        id=\"radioYes\"\n                                                        name=\"unsubscribe\"\n                                                        data-cke-editable=\"1\"\n                                                        style=\"margin: 0px; vertical-align: middle;>\n                                                    </td>\n                                                {-{-YES-}-}\n                                            </tr>\n                                        </table>\n                                    </td>\n                                    <td width=\"50%\">\n                                        <table width=\"100%\">\n                                            <tr>\n                                                <td width=\"24\">\n                                                    <input\n                                                        type=\"radio\"\n                                                        id=\"radioNo\"\n                                                        name=\"unsubscribe\"\n                                                        data-cke-editable=\"1\"\n                                                        style=\"margin: 0px; vertical-align: middle;\">\n                                                </td>\n                                                {-{-NO-}-}\n                                            </tr>\n                                        </table>\n                                    </td>\n                                </tr>\n                            </tbody>\n                        </table>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </td>\n";
+declare const migrationTemplate = "\n    <td \n        align=\"left\" \n        esd-extension-block-id=\"radio-button-block\" \n        esd-handler-name=\"esd-extension-RadioButtonBlock\"\n        class=\"radio-button-v2 esd-block-ra esd-radio-button-block esd-extension-block es-p10t es-p10b es-p30r es-p30l\"\n    >\n        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n            <tbody>\n                <tr>\n                    <td align=\"left\" width=\"70%\" style=\"vertical-align: top;\">\n                        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n                            <tbody>\n                                <tr>\n                                    {-{-TITLE-}-}\n                                </tr>\n                                <tr>\n                                    {-{-DESCRIPTION-}-}\n                                </tr>\n                            </tbody>\n                        </table>\n                    </td>\n                    <td align=\"right\" width=\"30%\" style=\"vertical-align: middle;\">\n                        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n                            <tbody>\n                                <tr>\n                                    <td width=\"50%\">\n                                        <table width=\"100%\">\n                                            <tr>\n                                                <td width=\"24\">\n                                                    <input\n                                                        type=\"radio\"\n                                                        id=\"radioYes\"\n                                                        name=\"unsubscribe\"\n                                                        data-cke-editable=\"1\"\n                                                        style=\"margin: 0px; vertical-align: middle;>\n                                                    </td>\n                                                {-{-YES-}-}\n                                            </tr>\n                                        </table>\n                                    </td>\n                                    <td width=\"50%\">\n                                        <table width=\"100%\">\n                                            <tr>\n                                                <td width=\"24\">\n                                                    <input\n                                                        type=\"radio\"\n                                                        id=\"radioNo\"\n                                                        name=\"unsubscribe\"\n                                                        data-cke-editable=\"1\"\n                                                        style=\"margin: 0px; vertical-align: middle;\">\n                                                </td>\n                                                {-{-NO-}-}\n                                            </tr>\n                                        </table>\n                                    </td>\n                                </tr>\n                            </tbody>\n                        </table>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </td>\n";
 /**
  * @returns The template for the default checkbox block
  */

package/dist/src/extensions/Blocks/Recommendation/cardCompositionControl.d.ts

@@ -4,17 +4,34 @@ export declare const COMPOSITION_CONTROL_BLOCK_ID = "ui-elements-recommendation-
 export interface CardCompositionItem {
     key: string;
     label: string;
-    visible: boolean;
 }
 export declare class RecommendationCardCompositionControl extends CommonControl {
     private currentComposition;
-    private currentVisibility;
+    private currentStyling;
     getId(): string;
     getTemplate(): string;
+    _getTextColor(label: string, name: string): string;
+    _getFontFamily(label: string, name: string): string;
+    /**
+     * Generate styling controls for Product Name element
+     */
+    private _getProductNameStylingControls;
+    /**
+     * Generate styling controls for Product Price element
+     */
+    private _getProductPriceStylingControls;
+    /**
+     * Generate styling controls for Product Original Price element
+     */
+    private _getProductOriginalPriceStylingControls;
+    /**
+     * Generate styling controls for Product Button element
+     */
+    private _getProductButtonStylingControls;
     onRender(): void;
     onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
     /**
-     * Initialize the composition order and visibility from the block or use defaults
+     * Initialize the composition order from the block or use defaults
      */
     private _initializeComposition;
     /**
@@ -22,7 +39,27 @@ export declare class RecommendationCardCompositionControl extends CommonControl
      */
     private _applyCompositionToBlock;
     /**
-     * Apply visibility changes to the block's HTML structure
+     * Initialize styling from stored block attributes
+     */
+    private _initializeStyling;
+    /**
+     * Load default styling values and populate controls
+     */
+    private _loadDefaultStyling;
+    /**
+     * Populate control values with current styling
+     */
+    private _populateControlsWithStyling;
+    /**
+     * Update styling object for a specific element and property
+     */
+    private _updateElementStyling;
+    /**
+     * Persist current styling to block attributes
+     */
+    private _persistStyling;
+    /**
+     * Apply styling to a specific element in the DOM
      */
-    private _applyVisibilityToBlock;
+    private _applyStylingToElement;
 }

package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts

@@ -34,7 +34,7 @@ interface StoreState {
     filterList: FiltersResponse;
     filterGroup: number;
 }
-export declare const useRecommendationExtensionStore: import("pinia").StoreDefinition<"guidoRecommendationExtension", StoreState, {
+export declare const useRecommendationExtensionStore: import("pinia").StoreDefinition<"recommendationExtension", StoreState, {
     hasFilters: (state: {
         recommendationCampaignUrls: Record<string, string>;
         recommendationConfigs: {

package/dist/src/extensions/Blocks/Recommendation/{templates/migrationTemplate.d.ts → template.d.ts}

@@ -1,16 +1,43 @@
 import type { RecommendationProduct } from '@@/Types/recommendation';
-import { DEFAULTS, getDefaultProducts } from './templateUtils';
+/**
+ * Migration template for converting old recommendation blocks (v1) to new format (v2)
+ *
+ * This template is used by Stripo to migrate existing emails with old recommendation blocks
+ * to the new block structure. It preserves user content while updating the HTML structure.
+ *
+ * Pattern:
+ * - Detects old blocks with class "ins-recommendation-v3-block-1"
+ * - Extracts title from ".ext-recommendation-title"
+ * - Extracts product cards and reconstructs them in new format
+ * - Preserves all product data variables ({{1_0_name}}, {{1_0_price}}, etc.)
+ */
 declare const migrationTemplate = "\n    <td\n        align=\"left\"\n        esd-extension-block-id=\"recommendation-block\"\n        esd-handler-name=\"esd-extension-RecommendationBlock\"\n        class=\"ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block esd-extension-block es-p20\"\n    >\n        <table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n            <tr>\n                <td align=\"center\">\n                    <table\n                        class=\"container\"\n                        width=\"100%\"\n                        cellpadding=\"0\"\n                        cellspacing=\"0\"\n                        border=\"0\">\n                        <tbody>\n                            <tr>\n                                <td>\n                                    <table\n                                        width=\"100%\"\n                                        cellpadding=\"0\"\n                                        cellspacing=\"0\"\n                                        border=\"0\">\n                                        <tbody>\n                                            <tr>\n                                                {-{-TITLE-}-}\n                                            </tr>\n                                        </tbody>\n                                    </table>\n                                </td>\n                            </tr>\n                            <tr>\n                                <td class=\"spacer\" style=\"height: 20px;\"></td>\n                            </tr>\n                            <tr>\n                                <td>\n                                    <table\n                                        class=\"ins-recommendation-product-container\"\n                                        width=\"100%\"\n                                        cellpadding=\"0\"\n                                        cellspacing=\"0\"\n                                        border=\"0\"\n                                    >\n                                        {-{-PRODUCT_ROWS-}-}\n                                    </table>\n                                </td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </td>\n            </tr>\n        </table>\n    </td>\n";
-export declare function getMigrationTemplate(): string;
 /**
- * Generates a custom migration template with specified products and layout
+ * Default card composition order
+ */
+export declare const DEFAULT_CARD_COMPOSITION: string[];
+/**
+ * Prepares product rows HTML with customizable composition order
  * @param products - Array of products to display
  * @param productsPerRow - Number of products per row
- * @param title - Optional title for the block
  * @param composition - Optional array defining order of card elements
- * @returns Complete HTML template
+ * @returns HTML string for product rows
  */
-export declare function generateMigrationTemplate(products: RecommendationProduct[], productsPerRow: number, title?: string, composition?: string[]): string;
 export declare function prepareProductRows(products: RecommendationProduct[], productsPerRow: number, composition?: string[]): string;
-export { DEFAULTS, getDefaultProducts };
+/**
+ * @returns The default mock products for initial template
+ */
+export declare function getDefaultProducts(): RecommendationProduct[];
+/**
+ * @returns The template for the default checkbox block
+ */
+export declare function getDefaultTemplate(): string;
+/**
+ * Generates the complete HTML template with dynamic products and layout
+ * @param products - Array of products to display
+ * @param productsPerRow - Number of products per row
+ * @param title - Optional title for the block
+ * @returns Complete HTML template
+ */
+export declare function generateTemplate(products: RecommendationProduct[], productsPerRow: number, title?: string): string;
 export default migrationTemplate;

package/dist/src/extensions/Blocks/Unsubscribe/block.d.ts

@@ -1,4 +1,4 @@
-import type { ImmutableHtmlElementNode } from '@stripoinc/ui-editor-extensions';
+import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
 import { Block, BlockCompositionType } from '@stripoinc/ui-editor-extensions';
 export declare const UNSUBSCRIBE_BLOCK_ID = "unsubscribe-block";
 export declare class UnsubscribeBlock extends Block {
@@ -12,8 +12,9 @@ export declare class UnsubscribeBlock extends Block {
     getName(): string;
     getDescription(): string;
     getTemplate(): string;
-    onSelect(node: ImmutableHtmlElementNode): void;
-    onDelete(node: ImmutableHtmlElementNode): void;
+    onCreated(node: ImmutableHtmlNode): void;
+    onSelect(node: ImmutableHtmlNode): undefined;
+    onDelete(node: ImmutableHtmlNode): undefined;
     onDestroy(): void;
     private _setupSelectEventListener;
     private _removeSelectEventListener;