@useinsider/guido 3.6.0-beta.7ca3ec5 → 3.6.0-beta.8307d2e

package/dist/composables/useSave.js

@@ -1,31 +1,32 @@
 import { useActionsApi as x } from "./useActionsApi.js";
 import { useConfig as y } from "./useConfig.js";
-import { useSaveStart as w, useSaveComplete as C } from "./useGuidoActions.js";
-import { useSyncModuleExtractor as E } from "./useSyncModuleExtractor.js";
-import { useStripoApi as H } from "../services/stripoApi.js";
-import { useTemplatePreparation as b } from "../utils/templatePreparation.js";
-import { useHtmlValidator as q } from "./useHtmlValidator.js";
+import { useSaveStart as w, useSaveComplete as H } from "./useGuidoActions.js";
+import { useSyncModuleExtractor as q } from "./useSyncModuleExtractor.js";
+import { useStripoApi as C } from "../services/stripoApi.js";
+import { useTemplatePreparation as E } from "../utils/templatePreparation.js";
+import { useHtmlValidator as k } from "./useHtmlValidator.js";
 import { useCouponBlockValidator as L } from "./validators/useCouponBlockValidator.js";
 import { useLiquidValidator as P } from "./validators/useLiquidValidator.js";
-const z = () => {
-  const o = w(), s = C(), { validateHtml: r } = q(), { validateLiquidSyntax: n } = P(), { validateCouponBlockTags: l } = L(), { callbacks: a, isFeatureEnabled: d } = y(), { extractSyncModuleData: u } = E(), { setSyncModuleUnsubscriptionPages: c } = H(), { editorSave: m } = x();
-  return { save: async (p = !1, f = !1) => {
-    var i;
+import { useUnsubscribeBlockValidator as B } from "./validators/useUnsubscribeBlockValidator.js";
+const J = () => {
+  const o = w(), s = H(), { validateHtml: r } = k(), { validateLiquidSyntax: n } = P(), { validateCouponBlockTags: l } = L(), { validateUnsubscribeBlockUniqueness: d } = B(), { callbacks: i, isFeatureEnabled: u } = y(), { extractSyncModuleData: c } = q(), { setSyncModuleUnsubscriptionPages: m } = C(), { editorSave: p } = x();
+  return { save: async (f = !1, v = !1) => {
+    var a;
     o();
-    const { prepareTemplateDetails: v } = b(), t = await v();
-    if (!l(t.compiledHtml))
+    const { prepareTemplateDetails: S } = E(), t = await S();
+    if (!l(t.compiledHtml) || !d(t.compiledHtml))
       return;
-    if (d("liquidSyntax")) {
+    if (u("liquidSyntax")) {
       if (!await n(t.compiledHtml))
         return;
     } else if (!await r(t.compiledHtml, t.dynamicContentList, !0))
       return;
-    if ((i = a.value) != null && i.externalValidation && !await a.value.externalValidation(t) || !await m())
+    if ((a = i.value) != null && a.externalValidation && !await i.value.externalValidation(t) || !await p())
       return;
-    const { unsubscribePayload: S, stripoModules: V } = u(t.rawHtml);
-    return await c(S), t.modules = V, p || s({ ...t, silent: f }), t;
+    const { unsubscribePayload: V, stripoModules: b } = c(t.rawHtml);
+    return await m(V), t.modules = b, f || s({ ...t, silent: v }), t;
   } };
 };
 export {
-  z as useSave
+  J as useSave
 };

package/dist/composables/validators/useUnsubscribeBlockValidator.js

@@ -0,0 +1,32 @@
+import { ToasterTypeOptions as i } from "../../enums/toaster.js";
+import { PAGE_TYPES as n } from "../../enums/unsubscribe.js";
+import { UNSUBSCRIBE_BLOCK_SELECTOR as u, DATA_ATTRIBUTES as l } from "../../extensions/Blocks/Unsubscribe/utils/constants.js";
+import { useToaster as T } from "../useToaster.js";
+import { useTranslations as E } from "../useTranslations.js";
+const m = [
+  {
+    pageType: n.GLOBAL_UNSUBSCRIBE,
+    messageKey: "unsubscription-preference.duplicate-global-unsub"
+  },
+  {
+    pageType: n.SUBSCRIPTION_PREFERENCE_CENTER,
+    messageKey: "unsubscription-preference.duplicate-pref-center"
+  }
+], g = "unsubscription-preference.duplicate-both", y = () => {
+  const { showToaster: o } = T(), a = E();
+  return { validateUnsubscribeBlockUniqueness: (c) => {
+    const p = new DOMParser().parseFromString(c, "text/html"), t = /* @__PURE__ */ new Map();
+    p.querySelectorAll(u).forEach((e) => {
+      const r = Number(e.getAttribute(l.PAGE_TYPE));
+      t.set(r, (t.get(r) ?? 0) + 1);
+    });
+    const s = m.filter((e) => (t.get(e.pageType) ?? 0) > 1).map((e) => e.messageKey);
+    return s.length ? (o({
+      type: i.Alert,
+      message: a(s.length > 1 ? g : s[0])
+    }), !1) : !0;
+  } };
+};
+export {
+  y as useUnsubscribeBlockValidator
+};

package/dist/extensions/Blocks/Recommendation/controls/main/layoutOrientation.js

@@ -1,6 +1,6 @@
-var p = Object.defineProperty;
-var A = (o, e, t) => e in o ? p(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var r = (o, e, t) => A(o, typeof e != "symbol" ? e + "" : e, t);
+var O = Object.defineProperty;
+var p = (o, e, t) => e in o ? O(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var r = (o, e, t) => p(o, typeof e != "symbol" ? e + "" : e, t);
 import { ModificationDescription as h } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as N } from "../../../common-control.js";
 import { ATTR_DATA_CUSTOM_ATTRIBUTES as L } from "../../constants/selectors.js";
@@ -9,9 +9,9 @@ import { DEFAULT_COMPOSITION as _ } from "../../constants/defaultConfig.js";
 import { RecommendationConfigService as s } from "../../services/configService.js";
 import { useRecommendationExtensionStore as f } from "../../store/recommendation.js";
 import { getCurrentLayout as C, getBlockElement as I, regenerateProductRowsWithStyles as S } from "./utils.js";
-const U = "recommendation-layout-orientation-control", O = "recommendationInfoBannerTest", a = {
+const U = "recommendation-layout-orientation-control", A = "recommendationInfoBannerTest", a = {
   LAYOUT: "layout"
-}, y = "data-card-composition", n = {
+}, y = "data-card-composition", i = {
   LAYOUT: "data-layout",
   COLUMN_SPACING: "data-column-spacing",
   ROW_SPACING: "data-row-spacing",
@@ -30,7 +30,7 @@ class Y extends N {
   getTemplate() {
     return `
             <div class="layout-control-container">
-                ${this._GuOnPageMessage({ name: O })}
+                ${this._GuOnPageMessage({ name: A })}
 
                 ${this._GuTwoColumns([
       this._GuLabel({ text: this.api.translate("Layout Orientation") }),
@@ -44,11 +44,10 @@ class Y extends N {
   }
   onRender() {
     this._setInfoMessageValue(
-      O,
+      A,
       this.api.translate(
-        `Note that updating the Layout Orientation, Number of Products,
-                Products in One Row and Mobile Layout Optimization settings
-                resets the style of your Recommendation block.`
+        `Note that updating the Layout Orientation, Number of Products and
+                Products in One Row settings resets the style of your Recommendation block.`
       )
     ), this._setFormValues(), this._listenToFormUpdates();
   }
@@ -84,8 +83,8 @@ class Y extends N {
           },
           `Changed layout to ${t}`
         ), this.store.patchCurrentBlockConfig({ orientation: t });
-        const i = this.api.getDocumentModifier().modifyHtml(c).setAttribute(n.LAYOUT, t).setAttribute(n.COLUMN_SPACING, g.toString()).setAttribute(n.ROW_SPACING, l.toString()).setAttribute(n.MOBILE_COLUMN_SPACING, d.toString()).setAttribute(n.MOBILE_ROW_SPACING, m.toString());
-        t === "list" ? (i.setClass("es-m-p0"), i.setClass("ins-recommendation-list-layout")) : (i.removeClass("es-m-p0"), i.removeClass("ins-recommendation-list-layout")), i.setAttribute(y, _.join(",")).setAttribute(L, "[]"), i.apply(new h(`Update layout to ${t}`)), this._regenerateProductRows(t);
+        const n = this.api.getDocumentModifier().modifyHtml(c).setAttribute(i.LAYOUT, t).setAttribute(i.COLUMN_SPACING, g.toString()).setAttribute(i.ROW_SPACING, l.toString()).setAttribute(i.MOBILE_COLUMN_SPACING, d.toString()).setAttribute(i.MOBILE_ROW_SPACING, m.toString());
+        t === "list" ? (n.setClass("es-m-p0"), n.setClass("ins-recommendation-list-layout")) : (n.removeClass("es-m-p0"), n.removeClass("ins-recommendation-list-layout")), n.setAttribute(y, _.join(",")).setAttribute(L, "[]"), n.apply(new h(`Update layout to ${t}`)), this._regenerateProductRows(t);
       } finally {
         this.isChangingLayout = !1;
       }

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

@@ -115,10 +115,8 @@ const S = {
                             class="esd-block-text product-old-price es-p15l es-p15r"
                             align="center"
                             esd-extension-block-id="${s.OLD_PRICE}">
-                            <p
-                                contenteditable="false"
-                                style="font-size: 14px; color: #999999;">
-                                <s><strong>${i(t, "original_price")}</strong></s>
+                            <p contenteditable="false" style="font-size: 14px; color: #999999;">
+                                <strong>${i(t, "original_price")}</strong>
                             </p>
                         </td>
                     </tr>

package/dist/extensions/Blocks/Recommendation/templates/list/elementRenderer.js

@@ -14,10 +14,10 @@ function b() {
     thousandSeparator: e.thousandSeparator
   };
 }
-function r(t, e = "price") {
-  const n = b(), s = t[e], a = (s == null ? void 0 : s[n.code]) ?? Object.values(s ?? {})[0] ?? 0;
+function s(t, e = "price") {
+  const n = b(), a = t[e], r = (a == null ? void 0 : a[n.code]) ?? Object.values(a ?? {})[0] ?? 0;
   return R({
-    price: a,
+    price: r,
     currency: n
   });
 }
@@ -69,7 +69,7 @@ const I = {
                 esd-extension-block-id="${o.PRICE}"
                 align="left">
                 <p contenteditable="false" style="font-size: 16px; color: #333333; font-weight: bold; margin: 0;">
-                    <strong>${r(t, "price")}</strong>
+                    <strong>${s(t, "price")}</strong>
                 </p>
             </td>
         </tr>
@@ -85,8 +85,8 @@ const I = {
                 align="left">
                 <p
                     contenteditable="false"
-                    style="font-size: 14px; color: #999999; margin: 0;">
-                    <s><strong>${r(t, "original_price")}</strong></s>
+                    style="font-size: 14px; color: #999999; text-decoration: line-through; margin: 0;">
+                    <strong>${s(t, "original_price")}</strong>
                 </p>
             </td>
         </tr>
@@ -104,7 +104,7 @@ const I = {
                 align="left">
                 <p contenteditable="false" style="font-size: 12px; color: #666666; margin: 0;">
                     <span class="omnibus-text-before">Lowest 30-day price: </span>
-                    <span class="omnibus-price-value">${r(t, "original_price")}</span>
+                    <span class="omnibus-price-value">${s(t, "original_price")}</span>
                     <span class="omnibus-text-after"></span>
                 </p>
             </td>
@@ -115,7 +115,7 @@ const I = {
    */
   [g]: (t) => {
     var i, l;
-    const e = b(), n = ((i = t.original_price) == null ? void 0 : i[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, s = ((l = t.price) == null ? void 0 : l[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, a = n > 0 ? Math.round((n - s) / n * 100) : 0, m = a > 0 ? `-${a}%` : "0%";
+    const e = b(), n = ((i = t.original_price) == null ? void 0 : i[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, a = ((l = t.price) == null ? void 0 : l[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, r = n > 0 ? Math.round((n - a) / n * 100) : 0, m = r > 0 ? `-${r}%` : "0%";
     return `
         <tr>
             <td

package/dist/extensions/Blocks/Recommendation/utils/priceFormatter.js

@@ -1,29 +1,29 @@
-function d(c, t) {
-  const { thousandSeparator: i, decimalSeparator: e, decimalCount: r } = t, [u, o = ""] = String(c).split("."), n = o.slice(0, r).padEnd(r, "0"), a = u.replace(
+function d(a, t) {
+  const { thousandSeparator: s, decimalSeparator: e, decimalCount: r } = t, u = Math.abs(a).toFixed(r), [c, o] = u.split("."), n = c.replace(
     /\B(?=(\d{3})+(?!\d))/g,
-    i
-  );
-  return r > 0 && n ? `${a}${e}${n}` : a;
+    s
+  ), i = a < 0 ? "-" : "";
+  return r > 0 && o ? `${i}${n}${e}${o}` : `${i}${n}`;
 }
-function f(c) {
-  const { price: t, currency: i } = c, {
+function m(a) {
+  const { price: t, currency: s } = a, {
     symbol: e,
     alignment: r,
     thousandSeparator: u,
-    decimalSeparator: o,
-    decimalCount: n
-  } = i;
+    decimalSeparator: c,
+    decimalCount: o
+  } = s;
   if (typeof t != "number" || Number.isNaN(t)) {
-    const s = "0".repeat(n), m = `0${o}${s}`;
-    return r === "before" ? `${e} ${m}` : `${m} ${e}`;
+    const i = "0".repeat(o), $ = `0${c}${i}`;
+    return r === "before" ? `${e} ${$}` : `${$} ${e}`;
   }
-  const a = d(t, {
+  const n = d(t, {
     thousandSeparator: u,
-    decimalSeparator: o,
-    decimalCount: n
+    decimalSeparator: c,
+    decimalCount: o
   });
-  return r === "before" ? `${e} ${a}` : `${a} ${e}`;
+  return r === "before" ? `${e} ${n}` : `${n} ${e}`;
 }
 export {
-  f as formatPrice
+  m as formatPrice
 };

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

@@ -5,11 +5,11 @@ import { useToaster as B } from "../../../composables/useToaster.js";
 import { ToasterTypeOptions as S } from "../../../enums/toaster.js";
 import { PAGE_TYPES as E } from "../../../enums/unsubscribe.js";
 import { useUnsubscribeStore as a } from "../../../stores/unsubscribe.js";
-import { Block as L, BlockCompositionType as f, ContextActionType as h, ModificationDescription as b, BlockType as v } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { getDefaultTemplate as A } from "./template.js";
-import { DATA_ATTRIBUTES as i, UNSUBSCRIBE_EVENTS as d } from "./utils/constants.js";
-import { parsePageList as p } from "./utils/utils.js";
-const y = "unsubscribe-block", m = 'a[data-unsubscribe-link="true"]', _ = ".unsubscribe-block-v2", I = "{{ins-unsubscribe-link}}", T = "https://academy.insiderone.com/docs/adding-unsubscribe-pages-into-emails", C = "Removing the unsubscribe text leaves an empty block, but an active unsubscribe link is required. Undo your last action to restore the text, or delete the unsubscribe block entirely.", N = {
+import { Block as L, BlockCompositionType as f, ContextActionType as h, ModificationDescription as b, BlockType as A } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { getDefaultTemplate as v } from "./template.js";
+import { DATA_ATTRIBUTES as i, UNSUBSCRIBE_BLOCK_SELECTOR as p, UNSUBSCRIBE_EVENTS as d } from "./utils/constants.js";
+import { parsePageList as m } from "./utils/utils.js";
+const y = "unsubscribe-block", _ = 'a[data-unsubscribe-link="true"]', I = "{{ins-unsubscribe-link}}", T = "https://academy.insiderone.com/docs/adding-unsubscribe-pages-into-emails", C = "Removing the unsubscribe text leaves an empty block, but an active unsubscribe link is required. Undo your last action to restore the text, or delete the unsubscribe block entirely.", N = {
   [E.GLOBAL_UNSUBSCRIBE]: "{{ins-global-unsubscribe-link}}",
   [E.SUBSCRIPTION_PREFERENCE_CENTER]: "{{ins-preferences-unsubscribe-link}}"
 };
@@ -42,7 +42,7 @@ class F extends L {
     return this.api.translate("Unsubscribe Block Description");
   }
   getTemplate() {
-    return A();
+    return v();
   }
   getContextActionsIds() {
     return [h.MOVE, h.REMOVE];
@@ -68,7 +68,7 @@ class F extends L {
     this._removeEventListeners(), this.currentNode = void 0, this.linkStateByBlockId.clear();
   }
   _hasUnsubscribeLink(e) {
-    return "querySelector" in e ? !!e.querySelector(m) : !1;
+    return "querySelector" in e ? !!e.querySelector(_) : !1;
   }
   _readBlockId(e) {
     return "getAttribute" in e ? e.getAttribute(i.BLOCK_ID) : null;
@@ -102,7 +102,7 @@ class F extends L {
     let e = 0;
     try {
       const t = this.api.getDocumentRoot();
-      t && "querySelectorAll" in t && t.querySelectorAll(_).forEach((s) => {
+      t && "querySelectorAll" in t && t.querySelectorAll(p).forEach((s) => {
         if ("getAttribute" in s) {
           const o = s.getAttribute(i.BLOCK_ID), u = o ? parseInt(o) : 0;
           u > e && (e = u);
@@ -150,7 +150,7 @@ class F extends L {
     try {
       if (!this.currentNode)
         return;
-      this.api.getDocumentModifier().modifyHtml(this.currentNode).replaceWith(`<${v.EMPTY_CONTAINER}/>`).apply(new b("Removed unsubscribe block due to cancel"));
+      this.api.getDocumentModifier().modifyHtml(this.currentNode).replaceWith(`<${A.EMPTY_CONTAINER}/>`).apply(new b("Removed unsubscribe block due to cancel"));
     } catch (e) {
       console.warn("[UnsubscribeBlock] Failed to remove unsubscribe block:", e);
     }
@@ -161,7 +161,7 @@ class F extends L {
   _updateBlock(e, t) {
     if (!this.currentNode || !("querySelector" in this.currentNode))
       return;
-    const r = this.currentNode.querySelector(m);
+    const r = this.currentNode.querySelector(_);
     if (!r)
       return;
     const s = this._getMergeTag(e);
@@ -181,7 +181,7 @@ class F extends L {
   }
   _checkExistingBlocks() {
     const e = a();
-    e.isGlobalUnsubscribeDisabled = !1, e.isSubscriptionPreferencesCenterDisabled = !1, this.api.getDocumentRoot().querySelectorAll(_).forEach((r) => {
+    e.isGlobalUnsubscribeDisabled = !1, e.isSubscriptionPreferencesCenterDisabled = !1, this.api.getDocumentRoot().querySelectorAll(p).forEach((r) => {
       if ("getAttribute" in r) {
         const s = r.getAttribute(i.PAGE_TYPE);
         if (s) {
@@ -197,7 +197,7 @@ class F extends L {
     const t = e.getAttribute(i.PAGE_TYPE), r = e.getAttribute(i.PAGE_LIST);
     if (!t || !r)
       return;
-    const s = a(), o = Number(t), u = p(r);
+    const s = a(), o = Number(t), u = m(r);
     await s.fetchTemplates(), s.setCollectionWithoutAutoSelection(o), s.loadSelectedTemplates(u);
   }
   _resetStoreState() {
@@ -209,7 +209,7 @@ class F extends L {
     const t = e.getAttribute(i.PAGE_LIST);
     if (!t)
       return;
-    const r = a(), s = p(t);
+    const r = a(), s = m(t);
     r.removeUnsubscribePages(s);
   }
 }

package/dist/extensions/Blocks/Unsubscribe/utils/constants.js

@@ -1,12 +1,13 @@
 const s = {
   SELECT: "unsubscribe:select",
   CANCEL: "unsubscribe:cancel"
-}, e = {
+}, b = {
   PAGE_TYPE: "data-unsubscribe-page-type",
   PAGE_LIST: "data-unsubscribe-page-list",
   BLOCK_ID: "data-unsubscribe-block-id"
-};
+}, c = ".unsubscribe-block-v2";
 export {
-  e as DATA_ATTRIBUTES,
+  b as DATA_ATTRIBUTES,
+  c as UNSUBSCRIBE_BLOCK_SELECTOR,
   s as UNSUBSCRIBE_EVENTS
 };

package/dist/src/composables/validators/useUnsubscribeBlockValidator.d.ts

@@ -0,0 +1,3 @@
+export declare const useUnsubscribeBlockValidator: () => {
+    validateUnsubscribeBlockUniqueness: (html: string) => boolean;
+};

package/dist/src/extensions/Blocks/Unsubscribe/utils/constants.d.ts

@@ -8,3 +8,4 @@ export declare const DATA_ATTRIBUTES: {
     readonly PAGE_LIST: "data-unsubscribe-page-list";
     readonly BLOCK_ID: "data-unsubscribe-block-id";
 };
+export declare const UNSUBSCRIBE_BLOCK_SELECTOR = ".unsubscribe-block-v2";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.6.0-beta.7ca3ec5",
+  "version": "3.6.0-beta.8307d2e",
   "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",