@useinsider/guido 2.1.0-beta.7d0f92a → 2.1.0-beta.860ef21

package/dist/src/extensions/Blocks/Recommendation/templates/blockTemplate.d.ts

@@ -0,0 +1,16 @@
+import type { RecommendationProduct } from '@@/Types/recommendation';
+import { DEFAULTS, getDefaultProducts, DEFAULT_CARD_COMPOSITION, DEFAULT_CARD_VISIBILITY } from './templateUtils';
+declare const blockTemplate = "\n    <td align=\"left\" class=\"ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block es-p20\">\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                                            <BLOCK_TEXT\n                                                class=\"es-p10t es-p10b es-p20l es-p20r\"\n                                                align=\"center\">\n                                                <p path=\"1\" style=\"font-size: 28px; color: #333333;\">\n                                                    <strong path=\"1,0\">{-{-TITLE-}-}</strong>\n                                                </p>\n                                            </BLOCK_TEXT>\n                                        </tbody>\n                                    </table>\n                                </td>\n                            </tr>\n                            \n    <tr>\n        <td class=\"spacer\" style=\"height: 10px;\"></td>\n    </tr>\n\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 getDefaultTemplate(): string;
+/**
+ * Generates a custom template with specified products and layout
+ * @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
+ */
+export declare function generateBlockTemplate(products: RecommendationProduct[], productsPerRow: number, title?: string, composition?: string[]): string;
+export declare function prepareProductRows(products: RecommendationProduct[], productsPerRow: number, composition?: string[]): string;
+export { DEFAULTS, DEFAULT_CARD_COMPOSITION, DEFAULT_CARD_VISIBILITY, getDefaultProducts, };
+export default blockTemplate;

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

@@ -1,17 +1,9 @@
 import type { RecommendationProduct } from '@@/Types/recommendation';
-import { DEFAULTS, getDefaultProducts, DEFAULT_CARD_COMPOSITION, DEFAULT_CARD_VISIBILITY } from '../utils';
+import { DEFAULTS, getDefaultProducts } from './templateUtils';
 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";
-/**
- * Prepares migration product rows with attribute-aligned structure.
- * @param products - Array of products to display
- * @param productsPerRow - Number of products per row
- * @param composition - Array defining element order
- * @returns HTML string for product rows
- */
-export declare function prepareProductRows(products: RecommendationProduct[], productsPerRow: number, composition?: string[]): string;
 export declare function getMigrationTemplate(): string;
 /**
- * Generates a custom migration template with specified products and layout.
+ * Generates a custom migration template with specified products and layout
  * @param products - Array of products to display
  * @param productsPerRow - Number of products per row
  * @param title - Optional title for the block
@@ -19,5 +11,6 @@ export declare function getMigrationTemplate(): string;
  * @returns Complete HTML template
  */
 export declare function generateMigrationTemplate(products: RecommendationProduct[], productsPerRow: number, title?: string, composition?: string[]): string;
-export { DEFAULTS, DEFAULT_CARD_COMPOSITION, DEFAULT_CARD_VISIBILITY, getDefaultProducts, };
+export declare function prepareProductRows(products: RecommendationProduct[], productsPerRow: number, composition?: string[]): string;
+export { DEFAULTS, getDefaultProducts };
 export default migrationTemplate;

package/dist/src/extensions/Blocks/Recommendation/templates/templateUtils.d.ts

@@ -0,0 +1,52 @@
+import type { RecommendationProduct } from '@@/Types/recommendation';
+import { ATTR_PRODUCT_IMAGE, ATTR_PRODUCT_NAME, ATTR_PRODUCT_PRICE, ATTR_PRODUCT_OLD_PRICE, ATTR_PRODUCT_OMNIBUS_PRICE, ATTR_PRODUCT_OMNIBUS_DISCOUNT, ATTR_PRODUCT_BUTTON } from '../constants';
+export interface ElementRenderer {
+    [ATTR_PRODUCT_IMAGE]: (product: RecommendationProduct) => string;
+    [ATTR_PRODUCT_NAME]: (product: RecommendationProduct) => string;
+    [ATTR_PRODUCT_PRICE]: (product: RecommendationProduct) => string;
+    [ATTR_PRODUCT_OLD_PRICE]: (product: RecommendationProduct) => string;
+    [ATTR_PRODUCT_OMNIBUS_PRICE]: (product: RecommendationProduct) => string;
+    [ATTR_PRODUCT_OMNIBUS_DISCOUNT]: (product: RecommendationProduct) => string;
+    [ATTR_PRODUCT_BUTTON]: (product: RecommendationProduct) => string;
+}
+export interface TemplateConfig {
+    spacer: string;
+    blockTemplate: string;
+    productRow: string;
+    productCardWrapper: string;
+    elementRenderer: ElementRenderer;
+}
+export declare const DEFAULTS: {
+    TITLE: string;
+    DESCRIPTION: string;
+};
+export declare const spacer = "\n    <tr>\n        <td class=\"spacer\" style=\"height: 10px;\"></td>\n    </tr>\n";
+export declare const productRow = "\n    <tr class=\"recommendation-product-row\">\n        <td>\n            <table width=\"100%\" height=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n                {-{-PRODUCTS-}-}\n            </table>\n        </td>\n    </tr>\n";
+export declare const productCardWrapper = "\n    <td width=\"{-{-COLUMN_WIDTH-}-}\" style=\"padding: 0 5px;\" valign=\"top\" height=\"100%\">\n        <table\n            width=\"100%\"\n            height=\"100%\"\n            cellpadding=\"0\"\n            cellspacing=\"0\"\n            border=\"0\"\n            class=\"product-card-wrapper\">\n            <tr>\n                <td\n                    class=\"product-attribute-cell\"\n                    valign=\"top\">\n                    <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n                        <tbody>\n                            {-{-PRODUCT_CONTENT-}-}\n                        </tbody>\n                    </table>\n                </td>\n            </tr>\n        </table>\n    </td>\n";
+export declare const DEFAULT_CARD_COMPOSITION: string[];
+/**
+ * Default visibility settings for card composition elements
+ * Omnibus Price and Omnibus Discount are hidden by default
+ */
+export declare const DEFAULT_CARD_VISIBILITY: Record<string, boolean>;
+export declare function getDefaultProducts(): RecommendationProduct[];
+/**
+ * Core template generation logic that works with any element renderer
+ * @param products - Array of products to display
+ * @param productsPerRow - Number of products per row
+ * @param elementRenderer - Object with methods to render each product element
+ * @param composition - Optional array defining order of card elements
+ * @returns HTML string for product rows
+ */
+export declare function prepareProductRows(products: RecommendationProduct[], productsPerRow: number, elementRenderer: ElementRenderer, composition?: string[]): string;
+/**
+ * Generates complete HTML template with dynamic products and layout
+ * @param blockTemplate - The base block template string
+ * @param products - Array of products to display
+ * @param productsPerRow - Number of products per row
+ * @param elementRenderer - Element renderer for generating product HTML
+ * @param title - Title for the block
+ * @param composition - Optional array defining order of card elements
+ * @returns Complete HTML template
+ */
+export declare function generateTemplate(blockTemplate: string, products: RecommendationProduct[], productsPerRow: number, elementRenderer: ElementRenderer, title?: string, composition?: string[]): string;

package/dist/static/styles/components/notification.css.js

@@ -4,6 +4,7 @@ const n = `ue-notifications-container {
     bottom: 32px;
     top: unset;
     width: unset;
+    position: fixed;
 }
 
 ue-notifications-container ue-message + ue-message {

package/dist/static/styles/components/wide-panel.css.js

@@ -133,6 +133,21 @@ ue-label.accent-dot:after {
     font-size: 13px;
 }
 
+ .e2e-container-video-size {
+    grid-template-columns: 1fr !important;
+ }
+
+ .e2e-container-video-size .control-shadow-wrapper:not(ue-button) {
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+    background-color: transparent !important;
+ }
+
+ .e2e-container-video-size .control-shadow-wrapper input {
+    background-color: var(--guido-color-gray-0);
+ }
+
 .e2e-size,
 .e2e-timer-size {
     grid-auto-flow: row;

package/dist/static/styles/customEditorStyle.css.js

@@ -19,31 +19,8 @@ const n = `.esd-x,
     box-shadow: none;
 }
 .ins-product-cart ue-node-actions,
-/* Horizontal layout - hide for info, image, and button cells */
-.ins-recommendation-v3-block-v2 .product-info-cell ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-info-cell ue-node-panel,
-.ins-recommendation-v3-block-v2 .product-image-cell ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-image-cell ue-node-panel,
-.ins-recommendation-v3-block-v2 .button-cell ue-node-actions,
-.ins-recommendation-v3-block-v2 .button-cell ue-node-panel,
-/* Vertical layout - hide for product-card-segment inner cells */
-.ins-recommendation-v3-block-v2 .product-card-segment ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-card-segment ue-node-panel,
-/* Hide for specific product attribute cells in both layouts */
-.ins-recommendation-v3-block-v2 .product-image ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-image ue-node-panel,
-.ins-recommendation-v3-block-v2 .product-name ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-name ue-node-panel,
-.ins-recommendation-v3-block-v2 .product-price ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-price ue-node-panel,
-.ins-recommendation-v3-block-v2 .product-old-price ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-old-price ue-node-panel,
-.ins-recommendation-v3-block-v2 .product-omnibus-price ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-omnibus-price ue-node-panel,
-.ins-recommendation-v3-block-v2 .product-omnibus-discount ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-omnibus-discount ue-node-panel,
-.ins-recommendation-v3-block-v2 .product-button ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-button ue-node-panel {
+.ins-recommendation-v3-block-v2 .product-attribute-cell ue-node-actions,
+.ins-recommendation-v3-block-v2 .product-attribute-cell ue-node-panel {
     display: none !important;
 }
 

package/dist/utils/pairProductVariables.js

@@ -1,77 +1,77 @@
-import { productPairs as P } from "../extensions/Blocks/Items/enums/productEnums.js";
-function L(F) {
-  const R = F.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), $ = new DOMParser().parseFromString(R, "text/html"), y = P.PAIRS_FOR_EXTENSION;
-  Object.entries(y).forEach(([n, l]) => {
-    $.querySelectorAll(".ins-product-td").forEach((c) => {
-      const E = c.getAttribute("data-number") || "1", T = c.getAttribute("data-type") || "CART_ITEMS";
-      c.querySelectorAll(`[product-attr="${n}"]`).forEach((e) => {
-        var H;
-        const b = e.getAttribute("data-type") || T, u = e.getAttribute("data-number") || E, p = l[b];
+import { productPairs as w } from "../extensions/Blocks/Items/enums/productEnums.js";
+function P(k) {
+  const m = k.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), $ = new DOMParser().parseFromString(m, "text/html"), R = w.PAIRS_FOR_EXTENSION;
+  Object.entries(R).forEach(([n, l]) => {
+    $.querySelectorAll(".ins-product-td").forEach((o) => {
+      const E = o.getAttribute("data-number") || "1", b = o.getAttribute("data-type") || "CART_ITEMS";
+      o.querySelectorAll(`[product-attr="${n}"]`).forEach((e) => {
+        var y;
+        const T = e.getAttribute("data-type") || b, u = e.getAttribute("data-number") || E, p = l[T];
         if (p)
           switch (n) {
             case "imageSrc": {
-              let t = null, o = null;
-              if (e.tagName === "IMG" ? (t = e, o = t.closest("a")) : (t = e.querySelector("img"), o = e.querySelector("a") || e.closest("a")), !t)
+              let t = null, c = null;
+              if (e.tagName === "IMG" ? (t = e, c = t.closest("a")) : (t = e.querySelector("img"), c = e.querySelector("a") || e.closest("a")), !t)
                 break;
               const i = p.DEFAULT, a = p.ATTR;
               if (i && t.src) {
                 const r = t.src;
-                i.some((f) => {
-                  const s = f.split("/").pop() || "", _ = r.split("/").pop() || "";
-                  return r.includes(f) || r.includes(s) || _ === s;
+                i.some((d) => {
+                  const s = d.split("/").pop() || "", _ = r.split("/").pop() || "";
+                  return r.includes(d) || r.includes(s) || _ === s;
                 }) && (t.src = `{{${a}_${u}}}`);
               }
-              if (o) {
-                const r = (H = y.itemLink) == null ? void 0 : H[b];
+              if (c) {
+                const r = (y = R.itemLink) == null ? void 0 : y[T];
                 if (r) {
-                  const d = r.HREF, f = r.DEFAULT_HREF || "#!", s = o.href;
-                  (s === "#" || s === "" || s.endsWith("#!") || s.endsWith(f) || s === `${window.location.href}${f}` || !s || s === window.location.href) && (o.href = `{{${d}_${u}}}`);
+                  const f = r.HREF, d = r.DEFAULT_HREF || "#!", s = c.href;
+                  (s === "#" || s === "" || s.endsWith("#!") || s.endsWith(d) || s === `${window.location.href}${d}` || !s || s === window.location.href) && (c.href = `{{${f}_${u}}}`);
                 }
               }
               break;
             }
             case "name": {
-              const t = p, o = t.ATTR, i = t.DEFAULT_HREF || "#!", a = t.HREF;
-              e.textContent && (e.textContent = `{{${o}_${u}}}`);
+              const t = p, c = t.ATTR, i = t.DEFAULT_HREF || "#!", a = t.HREF;
+              e.textContent && (e.textContent = `{{${c}_${u}}}`);
               const r = e.closest("a") || (e.tagName === "A" ? e : null);
               if (r && a) {
-                const d = r.href, f = `${window.location.href}${i}`;
-                (d === f || d.endsWith(i)) && (r.href = `{{${a}_${u}}}`);
+                const f = r.href, d = `${window.location.href}${i}`;
+                (f === d || f.endsWith(i)) && (r.href = `{{${a}_${u}}}`);
               }
               break;
             }
             case "price":
             case "originalPrice": {
-              const t = p, o = e.getAttribute("data-formated"), i = e.getAttribute("data-single_price"), a = o === "true", r = i === "true", d = e.getAttribute("data-curency") || "before";
-              let f;
-              r ? f = a ? t.SINGLE_PRICE_FORMATTED : t.SINGLE_PRICE : f = a ? t.PRICE_FORMATTED : t.PRICE;
+              const t = p, c = e.getAttribute("data-formated"), i = e.getAttribute("data-single_price"), a = c === "true", r = i === "true", f = e.getAttribute("data-curency") || "before";
+              let d;
+              r ? d = a ? t.SINGLE_PRICE_FORMATTED : t.SINGLE_PRICE : d = a ? t.PRICE_FORMATTED : t.PRICE;
               const s = t.CURRENCY;
-              let _ = `{{${f}_${u}}}`;
+              let _ = `{{${d}_${u}}}`;
               if (s) {
-                const k = `{{${s}_${u}}}`;
-                _ = d === "after" ? `${_} ${k}` : `${k} ${_}`;
+                const H = `{{${s}_${u}}}`;
+                _ = f === "after" ? `${_} ${H}` : `${H} ${_}`;
               }
               e.textContent = _;
               break;
             }
             case "quantity": {
-              const t = p, o = t.ATTR, i = t.DEFAULT;
-              e.textContent && e.textContent.trim() === i && (e.textContent = `{{${o}_${u}}}`);
+              const t = p, c = t.ATTR, i = t.DEFAULT;
+              e.textContent && e.textContent.trim() === i && (e.textContent = `{{${c}_${u}}}`);
               break;
             }
             case "button": {
-              const t = p, o = t.HREF, i = t.DEFAULT_HREF || "#!", a = e.tagName === "A" ? e : e.querySelector("a");
+              const t = p, c = t.HREF, i = t.DEFAULT_HREF || "#!", a = e.tagName === "A" ? e : e.querySelector("a");
               if (a) {
-                const r = a.href || "", d = `${window.location.href}${i}`;
-                (r === "" || r === "#" || r === d || r.endsWith(i) || r.endsWith("#!") || r === window.location.href) && (a.href = `{{${o}_${u}}}`);
+                const r = a.href || "", f = `${window.location.href}${i}`;
+                (r === "" || r === "#" || r === f || r.endsWith(i) || r.endsWith("#!") || r === window.location.href) && (a.href = `{{${c}_${u}}}`);
               }
               break;
             }
             case "itemLink": {
-              const t = p, o = t.HREF, i = t.DEFAULT_HREF || "#!", a = e;
+              const t = p, c = t.HREF, i = t.DEFAULT_HREF || "#!", a = e;
               if (a.href) {
-                const r = a.href, d = `${window.location.href}${i}`;
-                (r === d || r.endsWith(i)) && (a.href = `{{${o}_${u}}}`);
+                const r = a.href, f = `${window.location.href}${i}`;
+                (r === f || r.endsWith(i)) && (a.href = `{{${c}_${u}}}`);
               }
               break;
             }
@@ -86,45 +86,44 @@ function L(F) {
       });
     });
   });
-  const S = R.match(/<!DOCTYPE[^>]*>/i), I = S ? `${S[0]}
-` : "", w = $.querySelectorAll(".ins-product-td"), m = [];
-  w.forEach((n) => {
-    const l = n.getAttribute("data-type") || "CART_ITEMS", A = n.getAttribute("data-number") || "1", c = n.getAttribute("data-nodup"), E = n.outerHTML;
-    m.push({
+  const F = $.querySelectorAll(".ins-product-td"), S = [];
+  F.forEach((n) => {
+    const l = n.getAttribute("data-type") || "CART_ITEMS", A = n.getAttribute("data-number") || "1", o = n.getAttribute("data-nodup"), E = n.outerHTML;
+    S.push({
       element: n,
       outerHtml: E,
       type: l,
       number: A,
-      nodup: c || void 0
+      nodup: o || void 0
     });
   });
-  let h = I + $.documentElement.outerHTML;
-  m.reverse().forEach(({ outerHtml: n, type: l, number: A }) => {
-    let c = "";
+  let h = $.body.innerHTML;
+  S.reverse().forEach(({ outerHtml: n, type: l, number: A }) => {
+    let o = "";
     switch (l) {
       case "CART_ITEMS":
-        c = "ins_apr_total_product_kind";
+        o = "ins_apr_total_product_kind";
         break;
       case "BROWSED_ITEMS":
-        c = "browsed_item_total_product_kind";
+        o = "browsed_item_total_product_kind";
         break;
       case "PURCHASED_ITEMS":
-        c = "purchased_item_total_product_kind";
+        o = "purchased_item_total_product_kind";
         break;
     }
-    if (c) {
-      const T = parseInt(A) - 1, b = `${`{% if ${c} > ${T} %}`}${n}{% endif %}`;
-      h = h.replace(n, b);
+    if (o) {
+      const b = parseInt(A) - 1, T = `${`{% if ${o} > ${b} %}`}${n}{% endif %}`;
+      h = h.replace(n, T);
     }
   });
-  const M = $.querySelectorAll('[product-attr="originalPrice"][data-type="CART_ITEMS"]'), g = [];
-  return M.forEach((n) => {
+  const I = $.querySelectorAll('[product-attr="originalPrice"][data-type="CART_ITEMS"]'), g = [];
+  return I.forEach((n) => {
     const l = n.getAttribute("data-number"), A = n.getAttribute("data-type");
     if (!l || A !== "CART_ITEMS")
       return;
-    const c = n.closest(".product-original-price-class");
-    if (c) {
-      const E = c.outerHTML;
+    const o = n.closest(".product-original-price-class");
+    if (o) {
+      const E = o.outerHTML;
       g.some((C) => C.tdOuterHtml === E) || g.push({ tdOuterHtml: E, number: l });
     }
   }), g.reverse().forEach(({ tdOuterHtml: n, number: l }) => {
@@ -136,5 +135,5 @@ function L(F) {
   }), h.replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
 }
 export {
-  L as pairProductVariables
+  P as pairProductVariables
 };

package/dist/utils/templatePreparation.js

@@ -1,32 +1,31 @@
-import { useActionsApi as f } from "../composables/useActionsApi.js";
-import { useHtmlCompiler as C } from "../composables/useHtmlCompiler.js";
-import { useRecommendationExtensionStore as T } from "../extensions/Blocks/Recommendation/store/recommendation.js";
-import { useDynamicContentStore as x } from "../stores/dynamic-content.js";
-import { useUnsubscribeStore as y } from "../stores/unsubscribe.js";
-const E = () => {
-  const o = x(), t = y(), { getCompiledEmail: i, getTemplateData: n, editorSave: s } = f(), { compileHtml: m } = C();
+import { useActionsApi as b } from "../composables/useActionsApi.js";
+import { useHtmlCompiler as f } from "../composables/useHtmlCompiler.js";
+import { useDynamicContentStore as C } from "../stores/dynamic-content.js";
+import { useUnsubscribeStore as T } from "../stores/unsubscribe.js";
+const P = () => {
+  const i = C(), t = T(), { getCompiledEmail: o, getTemplateData: s, editorSave: n } = b(), { compileHtml: a } = f();
   return {
     prepareTemplateDetails: async () => {
-      const { html: a, ampHtml: r = "", ampErrors: c = [] } = await i({
+      const { html: r, ampHtml: m = "", ampErrors: c = [] } = await o({
         minimize: !0,
         resetDataSavedFlag: !1
-      }), { html: l, css: p, syncModulesIds: u = [] } = await n(), { compiledHtml: d, stats: e, appliedRules: S } = m(a), g = o.getSelectedDynamicContentList, b = T();
-      return s(), console.debug("HTML Compilation Stats:", {
+      }), { html: l, css: p, syncModulesIds: u = [] } = await s(), { compiledHtml: d, stats: e, appliedRules: g } = a(r), S = i.getSelectedDynamicContentList;
+      return n(), console.debug("HTML Compilation Stats:", {
         originalSize: e.originalSize,
         compiledSize: e.compiledSize,
         reduction: `${e.reductionPercentage.toFixed(2)}%`,
-        appliedRules: S,
+        appliedRules: g,
         executionTime: `${e.executionTime.toFixed(2)}ms`
       }), {
-        dynamicContentList: g,
+        dynamicContentList: S,
         compiledHtml: d,
         rawHtml: l,
         css: p,
-        ampHtml: r,
+        ampHtml: m,
         ampErrors: c,
         modules: u,
         recommendation: {
-          campaignUrls: b.recommendationCampaignUrls,
+          campaignUrls: {},
           configs: {}
         },
         unsubscribe: {
@@ -38,5 +37,5 @@ const E = () => {
   };
 };
 export {
-  E as useTemplatePreparation
+  P as useTemplatePreparation
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "2.1.0-beta.7d0f92a",
+  "version": "2.1.0-beta.860ef21",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",
@@ -32,7 +32,7 @@
   "license": "ISC",
   "dependencies": {
     "@stripoinc/ui-editor-extensions": "3.5.0",
-    "@useinsider/design-system-vue": "0.14.20",
+    "@useinsider/design-system-vue": "0.14.28",
     "@vueuse/core": "11.3.0",
     "lodash-es": "4.17.21",
     "pinia": "2.3.1",

package/dist/config/compiler/utils/recommendationCompilerUtils.js

@@ -1,116 +0,0 @@
-import { useRecommendation as S } from "../../../composables/useRecommendation.js";
-function b(e, u, r, o) {
-  const s = `{{${e}_${u}_${r}}}`, t = `{{${e}_${u}_currency}}`;
-  return o === "before" ? `${t} ${s}` : `${s} ${t}`;
-}
-function p(e, u, r, o, s) {
-  switch (u) {
-    case "productImage": {
-      const t = e.querySelector("img");
-      t && t.setAttribute("src", `{{${r}_${o}_img}}`);
-      const c = e.querySelector("a");
-      c && c.setAttribute("href", `{{${r}_${o}_url}}`);
-      break;
-    }
-    case "productName": {
-      const t = e.querySelector("p");
-      if (t) {
-        const c = t.querySelector("strong") || t;
-        c.textContent = `{{${r}_${o}_name}}`;
-      }
-      break;
-    }
-    case "productPrice": {
-      const t = e.querySelector("p");
-      if (t) {
-        const c = t.querySelector("strong") || t;
-        c.textContent = b(r, o, "price", s);
-      }
-      break;
-    }
-    case "productOldPrice": {
-      const t = e.querySelector("p");
-      if (t) {
-        const c = t.querySelector("strong") || t;
-        c.textContent = b(
-          r,
-          o,
-          "original_price",
-          s
-        ), t.setAttribute("product-attr", "discount");
-      }
-      break;
-    }
-    case "productButton": {
-      const t = e.querySelector("a");
-      t && t.setAttribute("href", `{{${r}_${o}_url}}`);
-      break;
-    }
-    case "productOmnibusPrice": {
-      const t = e.querySelector(".omnibus-price-value");
-      if (t) {
-        t.textContent = `{{${r}_${o}_omnibus_price}}`;
-        const c = t.closest("p");
-        c && (c.setAttribute("product-attr", "omnibus_price"), c.setAttribute("composition", "true"));
-      }
-      break;
-    }
-    case "productOmnibusDiscount": {
-      const t = e.querySelector(".omnibus-discount-value");
-      if (t) {
-        t.textContent = `{{${r}_${o}_omnibus_discount}}`;
-        const c = t.closest("p");
-        c && (c.setAttribute("product-attr", "omnibus_discount"), c.setAttribute("composition", "true"));
-      }
-      break;
-    }
-  }
-}
-function $(e, u, r) {
-  e.querySelectorAll(".recommendation-product-row").forEach((s, t) => {
-    s.querySelectorAll("[data-attribute-type]").forEach((n) => {
-      const i = n.getAttribute("data-attribute-type") || "", a = n.querySelectorAll(".attribute-cell");
-      a.length > 0 ? a.forEach((l) => {
-        p(l, i, u, t, r);
-      }) : p(n, i, u, t, r);
-    });
-  });
-}
-function _(e, u, r) {
-  const o = e.querySelectorAll(".recommendation-product-row");
-  if (!o.length)
-    return;
-  const [s] = o, t = s.querySelector("[data-attribute-type]"), c = t ? t.querySelectorAll(".attribute-cell").length : 1;
-  o.forEach((n, i) => {
-    n.querySelectorAll("[data-attribute-type]").forEach((l) => {
-      const f = l.getAttribute("data-attribute-type") || "";
-      l.querySelectorAll(".attribute-cell").forEach((y, m) => {
-        const A = i * c + m;
-        p(y, f, u, A, r);
-      });
-    });
-  });
-}
-function q(e, u) {
-  const r = e.getAttribute("data-layout") || "grid", o = e.getAttribute("currency-alignment") || "after";
-  r === "list" ? $(e, u, o) : _(e, u, o);
-}
-function d(e, u) {
-  const r = e.match(/<!DOCTYPE[^>]*>/i);
-  return (r ? `${r[0]}
-` : "") + u.documentElement.outerHTML;
-}
-function w(e) {
-  const u = e.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), r = new DOMParser().parseFromString(u, "text/html"), o = r.querySelectorAll(".ins-recommendation-v3-block-v2");
-  if (!o.length)
-    return e;
-  const { buildCampaignUrl: s } = S();
-  return o.forEach((c) => {
-    const n = c.getAttribute("recommendation-id");
-    n && (s(n), q(c, n));
-  }), d(u, r).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
-}
-export {
-  b as formatPriceVariable,
-  w as prepareRecommendationBlocks
-};

package/dist/extensions/Blocks/Recommendation/constants/blockIds.js

@@ -1,4 +0,0 @@
-var b = /* @__PURE__ */ ((r) => (r.BUTTON = "recommendation-block-button", r.NAME = "recommendation-block-name", r.PRICE = "recommendation-block-price", r.OLD_PRICE = "recommendation-block-old-price", r.OMNIBUS_PRICE = "recommendation-block-omnibus-price", r.OMNIBUS_DISCOUNT = "recommendation-block-omnibus-discount", r.IMAGE = "recommendation-block-image", r))(b || {});
-export {
-  b as RecommendationBlockId
-};

package/dist/extensions/Blocks/Recommendation/constants/controlIds.js

@@ -1,4 +0,0 @@
-var o = /* @__PURE__ */ ((c) => (c.BUTTON_ALIGN = "recommendation-block-button-align-control", c.BUTTON_BORDER = "recommendation-block-button-border-control", c.BUTTON_BORDER_RADIUS = "recommendation-block-button-border-radius-control", c.BUTTON_COLOR = "recommendation-block-button-color-control", c.BUTTON_FIT_TO_CONTENT = "recommendation-block-button-fit-to-content-control", c.BUTTON_FONT_FAMILY = "recommendation-block-button-font-family-control", c.BUTTON_MARGINS = "recommendation-block-button-margins-control", c.BUTTON_PADDINGS = "recommendation-block-button-paddings-control", c.BUTTON_TEXT = "recommendation-block-button-text-control", c.BUTTON_TEXT_SIZE = "recommendation-block-button-text-size-control", c.BUTTON_TEXT_STYLE_AND_FONT_COLOR = "recommendation-block-button-text-style-and-font-color-control", c.NAME_ALIGN = "recommendation-block-name-align-control", c.NAME_BACKGROUND = "recommendation-block-name-background-control", c.NAME_COLOR = "recommendation-block-name-color-control", c.NAME_FONT_FAMILY = "recommendation-block-name-font-family-control", c.NAME_PADDINGS = "recommendation-block-name-paddings-control", c.NAME_SIZE = "recommendation-block-name-size-control", c.NAME_STYLE = "recommendation-block-name-style-control", c.NAME_TEXT_TRIM = "recommendation-block-name-text-trim-control", c.PRICE_ALIGN = "recommendation-block-price-align-control", c.PRICE_BACKGROUND = "recommendation-block-price-background-control", c.PRICE_COLOR = "recommendation-block-price-color-control", c.PRICE_FONT_FAMILY = "recommendation-block-price-font-family-control", c.PRICE_PADDINGS = "recommendation-block-price-paddings-control", c.PRICE_SIZE = "recommendation-block-price-size-control", c.PRICE_STYLE = "recommendation-block-price-style-control", c.OLD_PRICE_ALIGN = "recommendation-block-old-price-align-control", c.OLD_PRICE_BACKGROUND = "recommendation-block-old-price-background-control", c.OLD_PRICE_COLOR = "recommendation-block-old-price-color-control", c.OLD_PRICE_FONT_FAMILY = "recommendation-block-old-price-font-family-control", c.OLD_PRICE_PADDINGS = "recommendation-block-old-price-paddings-control", c.OLD_PRICE_SIZE = "recommendation-block-old-price-size-control", c.OLD_PRICE_STYLE = "recommendation-block-old-price-style-control", c.OMNIBUS_PRICE_ALIGN = "recommendation-block-omnibus-price-align-control", c.OMNIBUS_PRICE_BACKGROUND = "recommendation-block-omnibus-price-background-control", c.OMNIBUS_PRICE_COLOR = "recommendation-block-omnibus-price-color-control", c.OMNIBUS_PRICE_FONT_FAMILY = "recommendation-block-omnibus-price-font-family-control", c.OMNIBUS_PRICE_PADDINGS = "recommendation-block-omnibus-price-paddings-control", c.OMNIBUS_PRICE_SIZE = "recommendation-block-omnibus-price-size-control", c.OMNIBUS_PRICE_STYLE = "recommendation-block-omnibus-price-style-control", c.OMNIBUS_PRICE_TEXT_BEFORE = "recommendation-block-omnibus-price-text-before-control", c.OMNIBUS_PRICE_TEXT_AFTER = "recommendation-block-omnibus-price-text-after-control", c.OMNIBUS_DISCOUNT_ALIGN = "recommendation-block-omnibus-discount-align-control", c.OMNIBUS_DISCOUNT_BACKGROUND = "recommendation-block-omnibus-discount-background-control", c.OMNIBUS_DISCOUNT_COLOR = "recommendation-block-omnibus-discount-color-control", c.OMNIBUS_DISCOUNT_FONT_FAMILY = "recommendation-block-omnibus-discount-font-family-control", c.OMNIBUS_DISCOUNT_PADDINGS = "recommendation-block-omnibus-discount-paddings-control", c.OMNIBUS_DISCOUNT_SIZE = "recommendation-block-omnibus-discount-size-control", c.OMNIBUS_DISCOUNT_STYLE = "recommendation-block-omnibus-discount-style-control", c.OMNIBUS_DISCOUNT_TEXT_BEFORE = "recommendation-block-omnibus-discount-text-before-control", c.OMNIBUS_DISCOUNT_TEXT_AFTER = "recommendation-block-omnibus-discount-text-after-control", c.IMAGE_SIZE = "recommendation-block-image-size-control", c.IMAGE_MARGINS = "recommendation-block-image-margins-control", c))(o || {});
-export {
-  o as RecommendationControlId
-};

package/dist/extensions/Blocks/Recommendation/constants/defaultConfig.js

@@ -1,65 +0,0 @@
-import { DEFAULT_ROW_SPACING as n, DEFAULT_COLUMN_SPACING as s, DEFAULT_CARDS_IN_ROW as R } from "./layout.js";
-import { ATTR_PRODUCT_IMAGE as t, ATTR_PRODUCT_NAME as e, ATTR_PRODUCT_OLD_PRICE as o, ATTR_PRODUCT_PRICE as T, ATTR_PRODUCT_OMNIBUS_PRICE as _, ATTR_PRODUCT_OMNIBUS_DISCOUNT as r, ATTR_PRODUCT_BUTTON as U } from "./selectors.js";
-const I = {
-  code: "USD",
-  symbol: "USD",
-  alignment: "after",
-  decimalCount: 2,
-  decimalSeparator: ".",
-  thousandSeparator: ","
-}, i = {
-  textBefore: "",
-  textAfter: ""
-}, O = {
-  textBefore: "",
-  textAfter: ""
-}, C = [
-  t,
-  e,
-  o,
-  T,
-  _,
-  r,
-  U
-], D = {
-  [t]: !0,
-  [e]: !0,
-  [T]: !0,
-  [o]: !0,
-  [_]: !1,
-  [r]: !1,
-  [U]: !0
-}, a = {
-  // Settings
-  strategy: "mostPopular",
-  productIds: [],
-  size: "6",
-  shuffleProducts: !1,
-  language: "en_US",
-  currency: I,
-  filters: [],
-  // Layout
-  layout: "grid",
-  cardsInRow: R,
-  columnSpacing: s,
-  rowSpacing: n,
-  // Composition
-  composition: C,
-  visibility: D,
-  // Element settings
-  omnibusPrice: i,
-  omnibusDiscount: O,
-  textTrimming: !1,
-  // Meta
-  configVersion: 1,
-  recommendationId: 0
-}, E = 1;
-export {
-  E as CURRENT_CONFIG_VERSION,
-  C as DEFAULT_COMPOSITION,
-  I as DEFAULT_CURRENCY,
-  a as DEFAULT_NODE_CONFIG,
-  O as DEFAULT_OMNIBUS_DISCOUNT,
-  i as DEFAULT_OMNIBUS_PRICE,
-  D as DEFAULT_VISIBILITY
-};