@useinsider/guido 1.0.3-beta.2cf8046 → 1.0.3-beta.2df2106

package/dist/src/extensions/Blocks/Items/utils/syncAttributesFromConfigBlock.d.ts

@@ -42,3 +42,9 @@ export declare function syncButtonLinkFromAttributes(currentNode: ImmutableHtmlN
  * @param currentNode - The current node from the control (usually this.currentNode)
  */
 export declare function syncImageLinkFromAttributes(currentNode: ImmutableHtmlNode | undefined): void;
+/**
+ * Reads price orientation value from esd-config-block attribute and updates the store.
+ * This makes the price orientation value mutable by syncing it from the DOM.
+ * @param currentNode - The current node from the control (usually this.currentNode)
+ */
+export declare function syncPriceOrientationFromAttributes(currentNode: ImmutableHtmlNode | undefined): void;

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=\"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";
+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";
 /**
  * @returns The template for the default checkbox block
  */

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

@@ -1,4 +1,4 @@
-import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import type { ImmutableHtmlElementNode } 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,9 +12,8 @@ export declare class UnsubscribeBlock extends Block {
     getName(): string;
     getDescription(): string;
     getTemplate(): string;
-    onCreated(node: ImmutableHtmlNode): void;
-    onSelect(node: ImmutableHtmlNode): undefined;
-    onDelete(node: ImmutableHtmlNode): undefined;
+    onSelect(node: ImmutableHtmlElementNode): void;
+    onDelete(node: ImmutableHtmlElementNode): void;
     onDestroy(): void;
     private _setupSelectEventListener;
     private _removeSelectEventListener;

package/dist/src/utils/environmentUtil.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Gets the appropriate environment prefix by parsing from current hostname
+ * Extracts environment prefix from domains by splitting hostname
+ */
+export declare const getEnvironmentPrefix: () => string;

package/dist/src/utils/pairProductVariables.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Transforms product-related HTML elements from default/dummy values to template variables.
+ * This method is called before saving email templates to ensure product data is properly templated.
+ * @param html - The HTML string containing product elements
+ * @returns The transformed HTML with template variables
+ */
+export declare function pairProductVariables(html: string): string;

package/dist/utils/environmentUtil.js

@@ -0,0 +1,4 @@
+const n = () => window.location.hostname.split(".")[2];
+export {
+  n as getEnvironmentPrefix
+};

package/dist/utils/pairProductVariables.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "1.0.3-beta.2cf8046",
+  "version": "1.0.3-beta.2df2106",
   "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",
@@ -27,14 +27,7 @@
     "test:visual-update": "npx playwright test --update-snapshots --reporter html",
     "prepare": "husky"
   },
-  "keywords": [
-    "vue",
-    "typescript",
-    "email",
-    "editor",
-    "stripo",
-    "useinsider"
-  ],
+  "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
@@ -48,10 +41,12 @@
     "vue": "2.7.14"
   },
   "devDependencies": {
+    "@commitlint/cli": "20.2.0",
+    "@commitlint/config-conventional": "20.2.0",
     "@cspell/eslint-plugin": "8.17.5",
     "@eslint/eslintrc": "3.3.0",
     "@eslint/js": "8.57.1",
-    "@playwright/test": "1.55.0",
+    "@playwright/test": "1.57.0",
     "@stylistic/eslint-plugin": "3.1.0",
     "@stylistic/eslint-plugin-migrate": "3.1.0",
     "@types/eslint": "8.56.12",