@useinsider/guido 3.2.0-beta.87303ed → 3.2.0-beta.895a145

package/dist/utils/templatePreparation.js

@@ -1,53 +1,93 @@
 import { useActionsApi as T } from "../composables/useActionsApi.js";
-import { useHtmlCompiler as P } from "../composables/useHtmlCompiler.js";
-import { useRecommendationExtensionStore as A } from "../extensions/Blocks/Recommendation/store/recommendation.js";
-import { DATA_ATTRIBUTES as l } from "../extensions/Blocks/Unsubscribe/utils/constants.js";
-import { parsePageList as h } from "../extensions/Blocks/Unsubscribe/utils/utils.js";
-import { useDynamicContentStore as C } from "../stores/dynamic-content.js";
-import { useUnsubscribeStore as D } from "../stores/unsubscribe.js";
-function x(i, e) {
-  const r = new DOMParser().parseFromString(i, "text/html").querySelectorAll(`[${l.PAGE_LIST}]`), n = [];
-  return r.forEach((t) => {
-    const o = t.getAttribute(l.PAGE_LIST);
-    o && n.push(...h(o));
-  }), e.filter((t) => n.includes(t));
+import { useHtmlCompiler as C } from "../composables/useHtmlCompiler.js";
+import { DEFAULT_CURRENCY as l, DEFAULT_NODE_CONFIG as a } from "../extensions/Blocks/Recommendation/constants/defaultConfig.js";
+import { useRecommendationExtensionStore as b } from "../extensions/Blocks/Recommendation/store/recommendation.js";
+import { DATA_ATTRIBUTES as y } from "../extensions/Blocks/Unsubscribe/utils/constants.js";
+import { parsePageList as P } from "../extensions/Blocks/Unsubscribe/utils/utils.js";
+import { useDynamicContentStore as D } from "../stores/dynamic-content.js";
+import { useUnsubscribeStore as E } from "../stores/unsubscribe.js";
+function U(i, r) {
+  const s = new DOMParser().parseFromString(i, "text/html").querySelectorAll(`[${y.PAGE_LIST}]`), c = [];
+  return s.forEach((t) => {
+    const o = t.getAttribute(y.PAGE_LIST);
+    o && c.push(...P(o));
+  }), r.filter((t) => c.includes(t));
 }
-const I = () => {
-  const i = C(), e = D(), { getCompiledEmail: a, getTemplateData: m } = T(), { compileHtml: r } = P();
+function F(i) {
+  const m = new DOMParser().parseFromString(i, "text/html").querySelectorAll(".recommendation-block-v2");
+  if (m.length === 0)
+    return;
+  const d = b();
+  m.forEach((s) => {
+    var g, f, u, n, S;
+    const c = s.getAttribute("recommendation-id"), t = c ? Number(c) : NaN;
+    if (!Number.isFinite(t))
+      return;
+    const o = s.getAttribute("esd-ext-config");
+    if (!o)
+      return;
+    let e;
+    try {
+      e = JSON.parse(o);
+    } catch {
+      return;
+    }
+    if (!e || typeof e != "object" || Array.isArray(e))
+      return;
+    const p = {
+      strategy: e.strategy ?? a.strategy,
+      language: e.language ?? a.language,
+      size: e.size ?? a.size,
+      // Spread the default arrays so each block gets a fresh reference
+      // instead of sharing the singleton in DEFAULT_NODE_CONFIG.
+      productIds: e.productIds ?? [...a.productIds],
+      filters: e.filters ?? [...a.filters],
+      shuffleProducts: e.shuffleProducts ?? a.shuffleProducts,
+      currencyCode: ((g = e.currency) == null ? void 0 : g.code) ?? l.code,
+      currencyAlignment: ((f = e.currency) == null ? void 0 : f.alignment) ?? l.alignment,
+      currencyDecimalCount: ((u = e.currency) == null ? void 0 : u.decimalCount) ?? l.decimalCount,
+      currencyDecimalSeparator: ((n = e.currency) == null ? void 0 : n.decimalSeparator) ?? l.decimalSeparator,
+      currencyThousandSeparator: ((S = e.currency) == null ? void 0 : S.thousandSeparator) ?? l.thousandSeparator
+    };
+    d.seedBlockUrlConfig(t, p);
+  });
+}
+const _ = () => {
+  const i = D(), r = E(), { getCompiledEmail: m, getTemplateData: d } = T(), { compileHtml: s } = C();
   return {
     prepareTemplateDetails: async () => {
-      const { html: t, ampHtml: o = "", ampErrors: p = [] } = await a({
+      const { html: t, ampHtml: o = "", ampErrors: e = [] } = await m({
         minimize: !0,
         resetDataSavedFlag: !1
-      }), { html: u, css: d, syncModulesIds: g = [] } = await m();
-      e.selectedUnsubscribePages.length && await e.fetchTemplates();
-      const { compiledHtml: c, stats: s, appliedRules: S } = r(t), b = i.getSelectedDynamicContentList, f = A();
+      }), { html: p, css: g, syncModulesIds: f = [] } = await d();
+      r.selectedUnsubscribePages.length && await r.fetchTemplates(), F(p);
+      const { compiledHtml: u, stats: n, appliedRules: S } = s(t), h = i.getSelectedDynamicContentList, A = b();
       return console.debug("HTML Compilation Stats:", {
-        originalSize: s.originalSize,
-        compiledSize: s.compiledSize,
-        reduction: `${s.reductionPercentage.toFixed(2)}%`,
+        originalSize: n.originalSize,
+        compiledSize: n.compiledSize,
+        reduction: `${n.reductionPercentage.toFixed(2)}%`,
         appliedRules: S,
-        executionTime: `${s.executionTime.toFixed(2)}ms`
+        executionTime: `${n.executionTime.toFixed(2)}ms`
       }), {
-        dynamicContentList: b,
-        compiledHtml: c,
-        rawHtml: u,
-        css: d,
+        dynamicContentList: h,
+        compiledHtml: u,
+        rawHtml: p,
+        css: g,
         ampHtml: o,
-        ampErrors: p,
-        modules: g.map(Number),
+        ampErrors: e,
+        modules: f.map(Number),
         recommendation: {
-          campaignUrls: f.recommendationCampaignUrls,
+          campaignUrls: A.recommendationCampaignUrls,
           configs: {}
         },
         unsubscribe: {
-          status: e.unsubscribePagesStatus,
-          config: x(c, e.selectedUnsubscribePages)
+          status: r.unsubscribePagesStatus,
+          config: U(u, r.selectedUnsubscribePages)
         }
       };
     }
   };
 };
 export {
-  I as useTemplatePreparation
+  _ as useTemplatePreparation
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.2.0-beta.87303ed",
+  "version": "3.2.0-beta.895a145",
   "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",
@@ -24,6 +24,8 @@
     "lint": "NODE_OPTIONS=--max-old-space-size=2048 eslint ./ && bun run type-check",
     "lint:fix": "NODE_OPTIONS=--max-old-space-size=2048 eslint --fix ./",
     "type-check": "vue-tsc --noEmit --project tsconfig.config.json && vue-tsc --noEmit --project tsconfig.app.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "test:visual-update": "npx playwright test --update-snapshots --reporter html",
     "prepare": "husky",
     "preinstall": "rm -rf ./node_modules/.vite"
@@ -69,12 +71,14 @@
     "eslint-plugin-vue": "10.1.0",
     "eslint-plugin-vue-scoped-css": "2.6.1",
     "globals": "16.0.0",
+    "happy-dom": "15.11.7",
     "husky": "9.1.7",
     "msw": "2.10.3",
     "sass": "1.69.7",
     "typescript": "5.5.4",
     "typescript-eslint": "8.26.0",
     "vite-plugin-dts": "4.5.4",
+    "vitest": "2.1.9",
     "vue-tsc": "2.2.10"
   },
   "overrides": {

package/dist/extensions/Blocks/Recommendation/templates/grid/migration.js

@@ -1,251 +0,0 @@
-import { ATTR_PRODUCT_BUTTON as s, ATTR_PRODUCT_OMNIBUS_DISCOUNT as d, ATTR_PRODUCT_OMNIBUS_PRICE as c, ATTR_PRODUCT_OLD_PRICE as o, ATTR_PRODUCT_PRICE as i, ATTR_PRODUCT_NAME as r, ATTR_PRODUCT_IMAGE as p } from "../../constants/selectors.js";
-import { prepareGridProductRows as b } from "./template.js";
-const u = `
-    <td
-        align="left"
-        esd-extension-block-id="recommendation-block"
-        esd-handler-name="esd-extension-RecommendationBlock"
-        class="recommendation-block-v2 esd-block-recommendation-v3-block esd-extension-block es-p20"
-    >
-        <table width="100%" cellpadding="0" cellspacing="0" border="0">
-            <tr>
-                <td align="center">
-                    <table
-                        class="container"
-                        width="100%"
-                        cellpadding="0"
-                        cellspacing="0"
-                        border="0">
-                        <tbody>
-                            <tr>
-                                <td>
-                                    <table
-                                        width="100%"
-                                        cellpadding="0"
-                                        cellspacing="0"
-                                        border="0">
-                                        <tbody>
-                                            <tr>
-                                                {-{-TITLE-}-}
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td class="spacer" style="height: 20px;"></td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <table
-                                        class="ins-recommendation-product-container"
-                                        width="100%"
-                                        cellpadding="0"
-                                        cellspacing="0"
-                                        border="0"
-                                    >
-                                        {-{-PRODUCT_ROWS-}-}
-                                    </table>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </td>
-            </tr>
-        </table>
-    </td>
-`, e = "0 5px", a = "attribute-cell", g = {
-  [p]: (t) => `
-        <td class="${a}" style="padding: ${e}; height: 100%;" valign="top">
-            <table
-                class="product-card-segment"
-                width="100%"
-                height="100%"
-                cellpadding="0"
-                cellspacing="0"
-                border="0">
-                <tr>
-                    <td
-                        class="esd-block-image product-image"
-                        esd-extension-block-id="recommendation-block-image"
-                        align="center"
-                        style="font-size: 0px;">
-                        <a target="_blank" href="${t.url}">
-                            <img
-                                src="${t.image_url}"
-                                alt="${t.name}"
-                                width="120"
-                                style="display: block; max-width: 100%; height: auto;"
-                                class="adapt-img">
-                        </a>
-                    </td>
-                </tr>
-            </table>
-        </td>
-    `,
-  [r]: (t) => `
-        <td class="${a}" style="padding: ${e}; height: 100%;" valign="top">
-            <table
-                class="product-card-segment"
-                width="100%"
-                height="100%"
-                cellpadding="0"
-                cellspacing="0"
-                border="0">
-                <tr>
-                    <td
-                        class="esd-block-text product-name"
-                        esd-extension-block-id="recommendation-block-name"
-                        align="center">
-                        <p
-                            path="1"
-                            contenteditable="false"
-                            style="font-size: 16px; color: #333333; font-weight: 600; text-align: center;">
-                            <strong path="1,0">${t.name}</strong>
-                        </p>
-                    </td>
-                </tr>
-            </table>
-        </td>
-    `,
-  [i]: () => `
-        <td class="${a}" style="padding: ${e}; height: 100%;" valign="top">
-            <table
-                class="product-card-segment"
-                width="100%"
-                height="100%"
-                cellpadding="0"
-                cellspacing="0"
-                border="0">
-                <tr>
-                    <td
-                        class="esd-block-text product-price"
-                        esd-extension-block-id="recommendation-block-price"
-                        align="center">
-                        <p
-                            path="1"
-                            contenteditable="false"
-                            style="font-size: 16px; color: #333333; font-weight: bold; text-align: center;">
-                            <strong path="1,0">18,00 TRY</strong>
-                        </p>
-                    </td>
-                </tr>
-            </table>
-        </td>
-    `,
-  [o]: () => `
-        <td class="${a}" style="padding: ${e}; height: 100%;" valign="top">
-            <table
-                class="product-card-segment"
-                width="100%"
-                height="100%"
-                cellpadding="0"
-                cellspacing="0"
-                border="0">
-                <tr>
-                    <td
-                        class="esd-block-text product-old-price"
-                        esd-extension-block-id="recommendation-block-old-price"
-                        align="center">
-                        <p
-                            path="1"
-                            contenteditable="false"
-                            style="font-size: 14px; color: #999999; text-decoration: line-through; text-align: center;">
-                            <s path="1,0">20,00 TRY</s>
-                        </p>
-                    </td>
-                </tr>
-            </table>
-        </td>
-    `,
-  [c]: () => `
-        <td class="${a}" style="padding: ${e}; height: 100%;" valign="top">
-            <table
-                class="product-card-segment"
-                width="100%"
-                height="100%"
-                cellpadding="0"
-                cellspacing="0"
-                border="0">
-                <tr>
-                    <td
-                        class="esd-block-text product-omnibus-price"
-                        esd-extension-block-id="recommendation-block-omnibus-price"
-                        data-text-before="Lowest 30-day price: "
-                        data-text-after=""
-                        align="center">
-                        <p
-                            path="1"
-                            contenteditable="false"
-                            style="font-size: 14px; color: #666666; text-align: center;"><span
-                            class="omnibus-text-before">Lowest 30-day price: </span><span
-                            class="omnibus-price-value">17,00 TRY</span><span
-                            class="omnibus-text-after"></span></p>
-                    </td>
-                </tr>
-            </table>
-        </td>
-    `,
-  [d]: () => `
-        <td class="${a}" style="padding: ${e}; height: 100%;" valign="top">
-            <table
-                class="product-card-segment"
-                width="100%"
-                height="100%"
-                cellpadding="0"
-                cellspacing="0"
-                border="0">
-                <tr>
-                    <td
-                        class="esd-block-text product-omnibus-discount"
-                        esd-extension-block-id="recommendation-block-omnibus-discount"
-                        data-text-before=""
-                        data-text-after=""
-                        align="center">
-                        <p
-                            path="1"
-                            contenteditable="false"
-                            style="font-size: 14px; color: #666666; text-align: center;"><span
-                            class="omnibus-text-before"></span><span
-                            class="omnibus-discount-value">-6%</span><span
-                            class="omnibus-text-after"></span></p>
-                    </td>
-                </tr>
-            </table>
-        </td>
-    `,
-  [s]: (t) => `
-        <td class="${a}" style="padding: ${e}; height: 100%;" valign="top">
-            <table
-                class="product-card-segment"
-                width="100%"
-                height="100%"
-                cellpadding="0"
-                cellspacing="0"
-                border="0">
-                <tr>
-                    <td
-                        class="esd-block-button product-button"
-                        esd-extension-block-id="recommendation-block-button"
-                        align="center">
-                        <span class="es-button-border" style="display: block;">
-                            <a
-                                href="${t.url}"
-                                target="_blank"
-                                class="es-button">
-                                {-{-PRODUCT_BUTTON_TEXT-}-}
-                            </a>
-                        </span>
-                    </td>
-                </tr>
-            </table>
-        </td>
-    `
-};
-function T(t, l, n) {
-  return b(t, l, g, n);
-}
-export {
-  u as default,
-  T as prepareProductRows
-};