@useinsider/guido 1.0.3-beta.b722a77 → 1.0.3-beta.b8dcb37

package/dist/config/migrator/recommendationMigrator.js

@@ -0,0 +1,203 @@
+var b = Object.defineProperty;
+var y = (i, e, t) => e in i ? b(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
+var p = (i, e, t) => y(i, typeof e != "symbol" ? e + "" : e, t);
+import h, { getDefaultProducts as x, prepareProductRows as C } from "../../extensions/Blocks/Recommendation/template.js";
+class w {
+  constructor() {
+    p(this, "parser");
+    this.parser = new DOMParser();
+  }
+  migrate(e) {
+    try {
+      const t = this.parser.parseFromString(e, "text/html"), r = t.querySelectorAll(
+        'td.ins-recommendation-v3-block-1, td.product-block[esd-handler-name*="EmailRecommendationV3"]'
+      );
+      return r.length === 0 ? e : (r.forEach((o) => {
+        const n = o.getAttribute("id"), s = this.extractBgColor(o), c = this.extractTitle(o), a = this.extractProductRows(o), u = h.replace("{-{-TITLE-}-}", c).replace("{-{-PRODUCT_ROWS-}-}", a), l = this.parser.parseFromString(
+          `<table id="tempDoc"><tbody><tr>${u}</tr></tbody></table>`,
+          "text/html"
+        ).querySelector(".ins-recommendation-v3-block-v2");
+        l && o.parentNode && (n && l.setAttribute("id", n), console.debug("BG Color", s), s && l.setAttribute("bgcolor", s), o.parentNode.replaceChild(l, o));
+      }), t.documentElement.outerHTML);
+    } catch (t) {
+      return console.error("RecommendationMigrator failed:", t), e;
+    }
+  }
+  /**
+   * Extracts background color from old block
+   *
+   * Checks for background color in the following priority order:
+   * 1. bgcolor attribute: `<td bgcolor="#f9f9f9">`
+   * 2. style attribute: `<td style="background-color: #f9f9f9;">`
+   * @example
+   * // From bgcolor attribute
+   * <td bgcolor="#ffffff"> → "#ffffff"
+   *
+   * // From style attribute
+   * <td style="background-color: rgb(255, 255, 255);"> → "rgb(255, 255, 255)"
+   *
+   * // No background color
+   * <td> → ""
+   * @param block - The old recommendation block element
+   * @returns The background color value (hex, rgb, rgba, named color) or empty string
+   */
+  extractBgColor(e) {
+    const t = e.getAttribute("bgcolor");
+    if (console.debug("bg block", e), console.debug("bg attr", t), t)
+      return t.trim();
+    const r = e.getAttribute("style");
+    if (console.debug("bg style", r), r) {
+      const o = r.match(/background-color\s*:\s*([^;]+)/i);
+      if (o && o[1])
+        return o[1].trim();
+    }
+    return "";
+  }
+  /**
+   * Extracts title from old block
+   *
+   * Old structure:
+   * <td class="ext-recommendation-title" align="right">
+   *   <p style="color: #93c47d; font-weight: bold; font-style: italic; font-size: 28px;">
+   *     This is amazing recommendation
+   *   </p>
+   * </td>
+   *
+   * New structure (output):
+   * <td class="esd-block-text es-p10t es-p10b es-p20l es-p20r" align="center">
+   *   <p path="1" style="font-size: 28px; color: #333333;">
+   *     <strong path="1,0">Title Text</strong>
+   *   </p>
+   * </td>
+   */
+  extractTitle(e) {
+    var l, d;
+    const t = e.querySelector(".ext-recommendation-title");
+    if (!t)
+      return this.buildTitleBlock({
+        text: "You May Also Like!",
+        isBold: !0,
+        isItalic: !1,
+        align: "center",
+        styles: "font-size: 28px; color: #333333;"
+      });
+    const r = t.querySelector("p");
+    if (!r) {
+      const m = ((l = t.textContent) == null ? void 0 : l.trim()) || "You May Also Like!", f = t.getAttribute("align") || "center";
+      return this.buildTitleBlock({
+        text: m,
+        isBold: !0,
+        isItalic: !1,
+        align: f,
+        styles: "font-size: 28px; color: #333333;"
+      });
+    }
+    const o = ((d = r.textContent) == null ? void 0 : d.trim()) || "You May Also Like!", n = t.getAttribute("align") || r.getAttribute("align") || "center", s = r.getAttribute("style") || "", c = /font-weight\s*:\s*bold/i.test(s) || !!r.querySelector("b, strong"), a = /font-style\s*:\s*italic/i.test(s) || !!r.querySelector("i, em"), u = this.removeStyleProperties(s, ["font-weight", "font-style"]), g = this.convertInlineToBlock(u);
+    return this.buildTitleBlock({
+      text: o,
+      isBold: c,
+      isItalic: a,
+      align: n,
+      styles: g
+    });
+  }
+  /**
+   * Extracts product configuration from old block and generates new product rows
+   *
+   * Strategy:
+   * 1. Extract product count and layout configuration from old block
+   * 2. Use prepareProductRows() to generate new HTML structure with default product data
+   *
+   * The migrator uses default/placeholder product data from getDefaultProducts()
+   * to populate the new block structure.
+   */
+  extractProductRows(e) {
+    const t = this.extractProductConfig(e);
+    if (!t)
+      return console.warn("[RecommendationMigrator] No product config found, using defaults"), this.generateProductRows(6, 3);
+    const { totalCount: r, rowCount: o } = t;
+    return this.generateProductRows(r, o);
+  }
+  /**
+   * Extracts product configuration from old block
+   *
+   * Parses esd-dev-product-config attribute:
+   * {"rowCount":3,"totalCount":6,"orientation":"vertical",...}
+   */
+  extractProductConfig(e) {
+    const t = e.getAttribute("esd-dev-product-config");
+    if (!t)
+      return null;
+    try {
+      const r = t.replace(/&quot;/g, '"').replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">"), o = JSON.parse(r);
+      return {
+        totalCount: o.totalCount ?? 6,
+        rowCount: o.rowCount ?? 3
+      };
+    } catch (r) {
+      return console.error("[RecommendationMigrator] Failed to parse product config:", r), null;
+    }
+  }
+  /**
+   * Generates product rows using prepareProductRows with default product data
+   *
+   * Process:
+   * 1. Get default products from getDefaultProducts()
+   * 2. Create array of products (repeat defaults if needed to reach totalCount)
+   * 3. Call prepareProductRows() to generate HTML structure
+   *
+   * The generated HTML will contain placeholder/default product data
+   * which can be replaced with real data at runtime.
+   * @param totalCount - Total number of products (e.g., 6)
+   * @param productsPerRow - Products per row (e.g., 3)
+   */
+  generateProductRows(e, t) {
+    const r = x(), o = [];
+    for (let n = 0; n < e; n++) {
+      const s = r[n % r.length];
+      o.push({ ...s });
+    }
+    return C(o, t);
+  }
+  /**
+   * Builds title block with proper structure
+   */
+  buildTitleBlock(e) {
+    let t = e.text;
+    e.isBold && e.isItalic ? t = `<strong path="1,0"><em path="1,0,0">${t}</em></strong>` : e.isBold ? t = `<strong path="1,0">${t}</strong>` : e.isItalic && (t = `<em path="1,0">${t}</em>`);
+    const r = e.align ? ` align="${e.align}"` : "", o = e.styles ? ` style="${e.styles}"` : "";
+    return `
+            <td class="esd-block-text es-p10t es-p10b es-p20l es-p20r"${r}>
+                <p path="1"${o}>
+                    ${t}
+                </p>
+            </td>
+        `;
+  }
+  /**
+   * Removes specified style properties from a style string
+   * Helper from CheckboxMigrator
+   */
+  removeStyleProperties(e, t) {
+    return e ? t.reduce((o, n) => {
+      const s = new RegExp(`${n}\\s*:\\s*[^;]*;?`, "gi");
+      return o.replace(s, "");
+    }, e).replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim() : "";
+  }
+  /**
+   * Converts inline display to block display
+   * Helper from CheckboxMigrator
+   */
+  convertInlineToBlock(e) {
+    if (!e)
+      return "";
+    let t = e.replace(/display\s*:\s*inline/gi, "display: block");
+    return /display\s*:/i.test(t) || (t = t ? `${t}; display: block` : "display: block"), t.replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim();
+  }
+}
+function P(i) {
+  return new w().migrate(i);
+}
+export {
+  P as migrateRecommendation
+};

package/dist/enums/extensions/recommendationBlock.d.ts

@@ -0,0 +1,16 @@
+import type { TextValueObject } from '@@/Types/generic';
+import type { RecommendationFeedItem } from '@@/Types/recommendation';
+export declare const URLS: {
+    RECOMMENDATION_API_URL: string;
+};
+export declare const RecommendationFeedSourceMaps: RecommendationFeedItem[];
+export declare const PriceAttributes: string[];
+export declare const currencyLocationMaps: TextValueObject[];
+export declare const currencyOperators: TextValueObject[];
+export declare const currencyDecimalCounts: TextValueObject[];
+export declare const operatorOptionsForStrings: TextValueObject[];
+export declare const operatorOptionsForArrayOfStrings: TextValueObject[];
+export declare const operatorOptionsForNumbers: TextValueObject[];
+export declare const operatorOptionsForDates: TextValueObject[];
+export declare const operatorOptionsForBooleans: TextValueObject[];
+export declare const getOperatorOptions: (type?: string) => TextValueObject[];

package/dist/enums/extensions/recommendationBlock.js

@@ -0,0 +1,80 @@
+const s = {
+  RECOMMENDATION_API_URL: "http://recommendationv2.api.useinsider.com"
+}, i = [
+  { id: 11, key: "similarViewed", name: "Viewed Together", path: "viewed-together" },
+  { id: 12, key: "similarBought", name: "Purchased Together", path: "purchased-together" },
+  { id: 13, key: "userBased", name: "User Based", path: "user-based" },
+  { id: 36, key: "highestDiscounted", name: "Highest Discounted Items", path: "highest-discounted" },
+  { id: 38, key: "manualMerchandising", name: "Manual Merchandising", path: "manual-merchandising" },
+  { id: 39, key: "newArrivals", name: "New Arrivals", path: "new-arrivals" },
+  { id: 40, key: "trendingProducts", name: "Trending Products", path: "trending" },
+  { id: 46, key: "mostValuableOfPartner", name: "Most Valuable Products", path: "most-valuable" },
+  { id: 61, key: "mostPopular", name: "Most Popular Items", path: "most-popular" },
+  { id: 62, key: "mostPurchased", name: "Top Sellers", path: "top-sellers" }
+], u = ["discount", "omnibus_price", "omnibus_discount", "price", "original_price"], l = [
+  { text: "after the amount", value: "1" },
+  { text: "before the amount", value: "0" }
+], c = [
+  { text: "dot(.)", value: "." },
+  { text: "comma(,)", value: "," }
+], d = [
+  { text: "0", value: "0" },
+  { text: "1", value: "1" },
+  { text: "2", value: "2" },
+  { text: "3", value: "3" },
+  { text: "4", value: "4" },
+  { text: "5", value: "5" }
+], e = [
+  { text: "is exactly", value: "=" },
+  { text: "contains", value: "~" },
+  { text: "does not contain", value: "!~" },
+  { text: "any of", value: "||" }
+], a = [
+  { text: "is exactly", value: "=" },
+  { text: "is not exactly", value: "!==" },
+  { text: "contains", value: "~" },
+  { text: "does not contain", value: "!~" },
+  { text: "any of", value: "||" }
+], r = [
+  { text: "is equal to", value: "=" },
+  { text: "is greater than", value: ">" },
+  { text: "is less than", value: "<" }
+], o = [
+  { text: "is equal to", value: "=" },
+  { text: "after", value: ">" },
+  { text: "before", value: "<" }
+], n = [
+  { text: "true", value: "==" },
+  { text: "false", value: "!=" }
+], p = (t) => {
+  if (!t)
+    return e;
+  switch (t) {
+    case "Boolean":
+      return n;
+    case "Date":
+      return o;
+    case "Number":
+      return r;
+    case "String":
+      return e;
+    case "Strings":
+      return a;
+    default:
+      return e;
+  }
+};
+export {
+  u as PriceAttributes,
+  i as RecommendationFeedSourceMaps,
+  s as URLS,
+  d as currencyDecimalCounts,
+  l as currencyLocationMaps,
+  c as currencyOperators,
+  p as getOperatorOptions,
+  a as operatorOptionsForArrayOfStrings,
+  n as operatorOptionsForBooleans,
+  o as operatorOptionsForDates,
+  r as operatorOptionsForNumbers,
+  e as operatorOptionsForStrings
+};

package/dist/extensions/Blocks/RadioButton/template.js

@@ -12,12 +12,12 @@ const e = {
                     <td align="left" width="70%" style="vertical-align: top;">
                         <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
                             <tbody>
-                                    <${t.BLOCK_TEXT}>
-                                        {-{-TITLE-}-}
-                                    </${t.BLOCK_TEXT}>
-                                    <${t.BLOCK_TEXT}>
-                                        {-{-DESCRIPTION-}-}
-                                    </${t.BLOCK_TEXT}>
+                                <${t.BLOCK_TEXT}>
+                                    {-{-TITLE-}-}
+                                </${t.BLOCK_TEXT}>
+                                <${t.BLOCK_TEXT}>
+                                    {-{-DESCRIPTION-}-}
+                                </${t.BLOCK_TEXT}>
                             </tbody>
                         </table>
                     </td>

package/dist/extensions/Blocks/Recommendation/block.d.ts

@@ -0,0 +1,11 @@
+import { Block, BlockCompositionType } from '@stripoinc/ui-editor-extensions';
+export declare const BLOCK_ID = "recommendation-block";
+export declare class RecommendationBlock extends Block {
+    constructor();
+    getId(): string;
+    getIcon(): string;
+    getBlockCompositionType(): BlockCompositionType;
+    getName(): string;
+    getDescription(): string;
+    getTemplate(): string;
+}

package/dist/extensions/Blocks/Recommendation/block.js

@@ -0,0 +1,30 @@
+import { Block as e, BlockCompositionType as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { getDefaultTemplate as o } from "./template.js";
+const n = "recommendation-block";
+class m extends e {
+  constructor() {
+    super();
+  }
+  getId() {
+    return n;
+  }
+  getIcon() {
+    return "recommendation-icon";
+  }
+  getBlockCompositionType() {
+    return t.CONTAINER;
+  }
+  getName() {
+    return this.api.translate("Recommendation Block");
+  }
+  getDescription() {
+    return this.api.translate("Recommendation Block Title Description");
+  }
+  getTemplate() {
+    return o();
+  }
+}
+export {
+  n as BLOCK_ID,
+  m as RecommendationBlock
+};

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

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