@useinsider/guido 3.2.1-beta.d58ee72 → 3.3.0-beta.1778fd7

package/dist/utils/templatePreparation.js

@@ -1,53 +1,100 @@
-import { useActionsApi as T } from "../composables/useActionsApi.js";
-import { useHtmlCompiler as P } from "../composables/useHtmlCompiler.js";
+import { useActionsApi as R } from "../composables/useActionsApi.js";
+import { useHtmlCompiler as U } from "../composables/useHtmlCompiler.js";
+import { DEFAULT_CURRENCY as d, DEFAULT_NODE_CONFIG as i } from "../extensions/Blocks/Recommendation/constants/defaultConfig.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 { DATA_ATTRIBUTES as T } from "../extensions/Blocks/Unsubscribe/utils/constants.js";
+import { parsePageList as F } from "../extensions/Blocks/Unsubscribe/utils/utils.js";
+import { useDynamicContentStore as H } from "../stores/dynamic-content.js";
+import { useUnsubscribeStore as w } from "../stores/unsubscribe.js";
+function x(m, r) {
+  const n = new DOMParser().parseFromString(m, "text/html").querySelectorAll(`[${T.PAGE_LIST}]`), c = [];
+  return n.forEach((t) => {
+    const o = t.getAttribute(T.PAGE_LIST);
+    o && c.push(...F(o));
+  }), r.filter((t) => c.includes(t));
 }
-const I = () => {
-  const i = C(), e = D(), { getCompiledEmail: a, getTemplateData: m } = T(), { compileHtml: r } = P();
+function z(m) {
+  const l = new DOMParser().parseFromString(m, "text/html").querySelectorAll(".recommendation-block-v2");
+  if (l.length === 0)
+    return;
+  const p = A();
+  l.forEach((n) => {
+    var g, f, a, s, S;
+    const c = n.getAttribute("recommendation-id"), t = c ? Number(c) : NaN;
+    if (!Number.isFinite(t))
+      return;
+    const o = n.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 u = {
+      strategy: e.strategy ?? i.strategy,
+      language: e.language ?? i.language,
+      size: e.size ?? i.size,
+      // Spread the default arrays so each block gets a fresh reference
+      // instead of sharing the singleton in DEFAULT_NODE_CONFIG.
+      productIds: e.productIds ?? [...i.productIds],
+      filters: e.filters ?? [...i.filters],
+      shuffleProducts: e.shuffleProducts ?? i.shuffleProducts,
+      currencyCode: ((g = e.currency) == null ? void 0 : g.code) ?? d.code,
+      currencyAlignment: ((f = e.currency) == null ? void 0 : f.alignment) ?? d.alignment,
+      currencyDecimalCount: ((a = e.currency) == null ? void 0 : a.decimalCount) ?? d.decimalCount,
+      currencyDecimalSeparator: ((s = e.currency) == null ? void 0 : s.decimalSeparator) ?? d.decimalSeparator,
+      currencyThousandSeparator: ((S = e.currency) == null ? void 0 : S.thousandSeparator) ?? d.thousandSeparator
+    };
+    p.seedBlockUrlConfig(t, u);
+  });
+}
+const G = () => {
+  const m = H(), r = w(), { getCompiledEmail: l, getTemplateData: p } = R(), { compileHtml: n } = U();
   return {
     prepareTemplateDetails: async () => {
-      const { html: t, ampHtml: o = "", ampErrors: p = [] } = await a({
+      const { html: t, ampHtml: o = "", ampErrors: e = [] } = await l({
         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: u, css: g, syncModulesIds: f = [] } = await p();
+      r.selectedUnsubscribePages.length && await r.fetchTemplates(), z(u);
+      const { compiledHtml: a, stats: s, appliedRules: S } = n(t), C = m.getSelectedDynamicContentList, P = A(), b = (D) => (D.match(/<td[^>]*radio-button-v2[^>]*>/gi) ?? []).map((E) => {
+        var h;
+        const y = (((h = E.match(/class="([^"]*)"/)) == null ? void 0 : h[1]) ?? "").split(/\s+/).filter(Boolean);
+        return { hasBlock: y.includes("radio-button-block"), classes: y };
+      });
       return console.debug("HTML Compilation Stats:", {
         originalSize: s.originalSize,
         compiledSize: s.compiledSize,
         reduction: `${s.reductionPercentage.toFixed(2)}%`,
         appliedRules: S,
         executionTime: `${s.executionTime.toFixed(2)}ms`
+      }), console.debug("[guido:radio-migrator] template-prep", {
+        rawHtmlRadioTds: b(u),
+        compiledHtmlRadioTds: b(a)
       }), {
-        dynamicContentList: b,
-        compiledHtml: c,
+        dynamicContentList: C,
+        compiledHtml: a,
         rawHtml: u,
-        css: d,
+        css: g,
         ampHtml: o,
-        ampErrors: p,
-        modules: g.map(Number),
+        ampErrors: e,
+        modules: f.map(Number),
         recommendation: {
-          campaignUrls: f.recommendationCampaignUrls,
+          campaignUrls: P.recommendationCampaignUrls,
           configs: {}
         },
         unsubscribe: {
-          status: e.unsubscribePagesStatus,
-          config: x(c, e.selectedUnsubscribePages)
+          status: r.unsubscribePagesStatus,
+          config: x(a, r.selectedUnsubscribePages)
         }
       };
     }
   };
 };
 export {
-  I as useTemplatePreparation
+  G as useTemplatePreparation
 };

package/dist/utils/timeUtil.js

@@ -0,0 +1,19 @@
+const r = (t) => {
+  const e = -t.getTimezoneOffset(), o = e >= 0 ? "+" : "-", n = Math.abs(e), s = Math.floor(n / 60), i = n % 60;
+  return i === 0 ? `UTC${o}${s}` : `UTC${o}${s}:${String(i).padStart(2, "0")}`;
+}, a = () => {
+  var e;
+  const { timeZone: t } = new Intl.DateTimeFormat().resolvedOptions();
+  return ((e = t.split("/").pop()) == null ? void 0 : e.replace(/_/g, " ")) ?? t;
+}, c = (t, e = !1) => {
+  const o = t.toLocaleTimeString([], {
+    hour: "2-digit",
+    hour12: !1,
+    minute: "2-digit",
+    second: "2-digit"
+  });
+  return e ? `${o} (${r(t)} ${a()})` : o;
+};
+export {
+  c as formatLocalTime
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.2.1-beta.d58ee72",
+  "version": "3.3.0-beta.1778fd7",
   "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"
@@ -32,7 +34,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@stripoinc/ui-editor-extensions": "3.5.0",
+    "@stripoinc/ui-editor-extensions": "3.8.0",
     "@useinsider/design-system-vue": "1.1.0-beta.73ec2fa",
     "@vueuse/core": "11.3.0",
     "lodash-es": "4.17.21",
@@ -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": {
@@ -86,7 +90,7 @@
   },
   "guido": {
     "stripo": {
-      "version": "2.54.0"
+      "version": "2.62.0"
     }
   }
 }

package/dist/enums/displayConditions.js

@@ -1,80 +0,0 @@
-const e = [
-  {
-    category: "Demographics",
-    conditions: [
-      {
-        id: 1,
-        name: "Language",
-        description: "Users who are in the English will see the banner",
-        beforeScript: '{% if language == "en_US" %}',
-        afterScript: "{% endif %}"
-      },
-      {
-        id: 2,
-        name: "Country",
-        description: "Only people who live in Australia will see the banner",
-        beforeScript: '{% if country == "Australia" %}',
-        afterScript: "{% endif %}"
-      },
-      {
-        id: 3,
-        name: "Country & City",
-        description: "Only people who are located in that country and city",
-        beforeScript: '{% if country == "United Kingdom" and city == "London" %}',
-        afterScript: "{% endif %}"
-      },
-      {
-        id: 4,
-        name: "Age (Less than operator)",
-        description: "Users whose age is less than 18",
-        beforeScript: "{% if age < 18 %}",
-        afterScript: "{% endif %}"
-      },
-      {
-        id: 5,
-        name: "Age (Equal and greater than operator)",
-        description: "Users whose age is equal or greater than 25",
-        beforeScript: "{% if age >= 25 %}",
-        afterScript: "{% endif %}"
-      },
-      {
-        id: 6,
-        name: "Age (Greater than & less than operators)",
-        description: "Users whose age is between 18 and 25",
-        beforeScript: "{% if age > 18 and age < 25 %}",
-        afterScript: "{% endif %}"
-      },
-      {
-        id: 7,
-        name: "Gender",
-        description: "Users whose gender is Female",
-        beforeScript: '{% if gender == "Female" %}',
-        afterScript: "{% endif %}"
-      },
-      {
-        id: 8,
-        name: "State",
-        description: "Users whose state is one of the followings. c_state is a custom attribute. Use this condition if you have the attribute with the same naming. ",
-        beforeScript: '{% if c_state == "VIC" or c_state == "NSW" or c_state == "QLD" %}',
-        afterScript: "{% endif %}"
-      },
-      {
-        id: 9,
-        name: "VIP User",
-        description: "Users who are VIP users for that brand. c_is_vip_user = true. c_is_vip_user is a custom attribute. Use this condition if you have the attribute with the same naming.",
-        beforeScript: "{% if c_is_vip_user %}",
-        afterScript: "{% endif %}"
-      },
-      {
-        id: 10,
-        name: "Membership Type",
-        description: "Users who belong to gold or silver membership type. c_is_gold_member = true, c_is_silver_member = true. These are custom attributes. Use this condition if you have the attribute with the same naming.",
-        beforeScript: "{% if c_is_gold_member or c_is_silver_member %}",
-        afterScript: "{% endif %}"
-      }
-    ]
-  }
-];
-export {
-  e as displayConditions
-};

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
-};

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

@@ -1,2 +0,0 @@
-import type { ConditionCategories } from '@@/Types/condition-categories';
-export declare const displayConditions: ConditionCategories;