@useinsider/guido 3.17.0-beta.668ca65 → 3.17.0-beta.a18fbda

package/dist/composables/useActionsApi.js

@@ -1,52 +1,68 @@
-import { filterAmpErrors as T } from "../utils/ampErrorFilter.js";
-import { useToaster as A } from "./useToaster.js";
-const p = 1e4, D = () => {
-  const { handleError: r } = A(), l = (t = {}) => new Promise((e, a) => {
-    const o = { ...{
-      minimize: !0,
-      utmEntity: {
-        utmSource: "",
-        utmMedium: "",
-        utmCampaign: "",
-        utmContent: "",
-        utmTerm: "",
-        customUtms: [
-          {
-            name1: "val1",
-            name2: "val2"
-          }
-        ]
-      },
-      mergeTags: ["Tag1", "Tag2"],
-      forceAmp: !1,
-      resetDataSavedFlag: !1,
-      disableLineHeightsReplace: !0
-    }, ...t }, n = {
-      callback: (m, d, c, u, w) => {
-        m ? a(m) : e({
-          html: d,
-          ampHtml: c,
-          ampErrors: T(u ?? []),
-          displayConditions: w
-        });
-      },
-      ...o
-    };
-    window.StripoEditorApi.actionsApi.compileEmail(n);
-  });
+import { filterAmpErrors as v } from "../utils/ampErrorFilter.js";
+import { useToaster as y } from "./useToaster.js";
+const D = 1e4, d = 3e4, s = (n, l, u) => new Promise((T, m) => {
+  const w = setTimeout(
+    () => m(new Error(`${n} did not report completion within ${l}ms`)),
+    l
+  ), p = (A) => (t) => {
+    clearTimeout(w), A(t);
+  };
+  u(p(T), p(m));
+}), I = () => {
+  const { handleError: n } = y(), l = (t = {}) => s(
+    "compileEmail",
+    d,
+    (e, a) => {
+      const o = { ...{
+        minimize: !0,
+        utmEntity: {
+          utmSource: "",
+          utmMedium: "",
+          utmCampaign: "",
+          utmContent: "",
+          utmTerm: "",
+          customUtms: [
+            {
+              name1: "val1",
+              name2: "val2"
+            }
+          ]
+        },
+        mergeTags: ["Tag1", "Tag2"],
+        forceAmp: !1,
+        resetDataSavedFlag: !1,
+        disableLineHeightsReplace: !0
+      }, ...t }, c = {
+        callback: (r, C, f, S, g) => {
+          r ? a(r) : e({
+            html: C,
+            ampHtml: f,
+            ampErrors: v(S ?? []),
+            displayConditions: g
+          });
+        },
+        ...o
+      };
+      window.StripoEditorApi.actionsApi.compileEmail(c);
+    }
+  );
   return {
     getCompiledEmail: l,
-    getTemplateData: () => new Promise((t) => {
-      const e = ({ html: a, css: i, width: o, height: s, utmParams: n, syncModulesIds: m }) => t({
-        html: a,
-        css: i,
-        width: o,
-        height: s,
-        utmParams: n,
-        syncModulesIds: m
-      });
-      window.StripoEditorApi.actionsApi.getTemplateData(e);
-    }),
+    getTemplateData: () => s(
+      "getTemplateData",
+      d,
+      (t) => {
+        const e = ({ html: a, css: i, width: o, height: E, utmParams: c, syncModulesIds: r }) => t({
+          html: a,
+          css: i,
+          width: o,
+          height: E,
+          utmParams: c,
+          syncModulesIds: r
+        });
+        window.StripoEditorApi.actionsApi.getTemplateData(e);
+      }
+    ),
     activateCustomViewStyles: (t = !0) => {
       window.StripoEditorApi.actionsApi.activateCustomViewStyles(t);
     },
@@ -65,7 +81,7 @@ const p = 1e4, D = () => {
           displayConditions: a
         };
       } catch (e) {
-        return r(e, "Error loading preview"), {
+        return n(e, "Error loading preview"), {
           html: "",
           ampHtml: "",
           ampErrors: [],
@@ -81,34 +97,33 @@ const p = 1e4, D = () => {
       }
       try {
         window.StripoEditorApi.actionsApi.updateTimerInClonedTemplate((i, o) => {
-          i ? (r(i, "Failed to update timer in cloned template"), t(null)) : t(o || null);
+          i ? (n(i, "Failed to update timer in cloned template"), t(null)) : t(o || null);
         });
       } catch (i) {
-        r(i, "Failed to call updateTimerInClonedTemplate"), t(null);
+        n(i, "Failed to call updateTimerInClonedTemplate"), t(null);
       }
     }),
     updateHtmlAndCss: (t, e) => {
       const { actionsApi: a } = window.StripoEditorApi;
-      return new Promise((i, o) => {
-        const s = new Error(
-          `updateHtmlAndCss did not report completion within ${p}ms`
-        ), n = setTimeout(() => o(s), p);
-        a.updateHtmlAndCss(t, e, () => {
-          clearTimeout(n), i();
-        });
+      return s("updateHtmlAndCss", D, (i) => {
+        a.updateHtmlAndCss(t, e, () => i());
       });
     },
-    editorSave: () => new Promise((t) => {
-      window.StripoEditorApi.actionsApi.save((e) => {
-        if (e) {
-          r(e, "Failed to save template"), t(!1);
-          return;
-        }
-        t(!0);
-      });
-    })
+    editorSave: () => s(
+      "save",
+      d,
+      (t) => {
+        window.StripoEditorApi.actionsApi.save((e) => {
+          if (e) {
+            n(e, "Failed to save template"), t(!1);
+            return;
+          }
+          t(!0);
+        });
+      }
+    )
   };
 };
 export {
-  D as useActionsApi
+  I as useActionsApi
 };

package/dist/composables/useAutoSave.js

@@ -1,21 +1,22 @@
-import { useConfig as m } from "./useConfig.js";
+import { useConfig as E } from "./useConfig.js";
+import { useEditorLock as p } from "./useEditorLock.js";
 import { useAutosaveStore as A, AUTOSAVE_STATUS as s } from "../stores/autosave.js";
-import { useEditorStore as E } from "../stores/editor.js";
-import { computed as f, watch as p, onUnmounted as y } from "vue";
-const I = 18e4, r = 6e4, T = (b) => {
-  const { isFeatureEnabled: S } = m(), a = E(), t = A();
+import { useEditorStore as f } from "../stores/editor.js";
+import { computed as y, watch as I, onUnmounted as L } from "vue";
+const w = 18e4, v = 6e4, R = (b) => {
+  const { isFeatureEnabled: S } = E(), o = f(), t = A(), { isEditorBusy: g } = p();
   let i = null, c = 0;
-  const u = f(
+  const u = y(
     () => S("autosave") && t.isOn
-  ), g = () => a.hasChanges && a.isInSaveableState, h = () => ({
-    hasChanges: a.hasChanges,
-    isInSaveableState: a.isInSaveableState
-  }), l = async (e) => {
+  ), m = () => o.hasChanges && o.isInSaveableState, h = () => ({
+    hasChanges: o.hasChanges,
+    isInSaveableState: o.isInSaveableState
+  }), r = async (e) => {
     if (!u.value) {
       console.debug("guido:autosave:skipped", { trigger: e, reason: "not-active" });
       return;
     }
-    if (!g()) {
+    if (!m()) {
       console.debug("guido:autosave:skipped", { trigger: e, reason: "gates-blocked", gates: h() });
       return;
     }
@@ -23,15 +24,19 @@ const I = 18e4, r = 6e4, T = (b) => {
       console.debug("guido:autosave:skipped", { trigger: e, reason: "already-saving" });
       return;
     }
+    if (g()) {
+      console.debug("guido:autosave:skipped", { trigger: e, reason: "editor-busy" });
+      return;
+    }
     console.debug("guido:autosave:save-start", { trigger: e }), t.status = s.SAVING;
     try {
       if (await b() === void 0) {
         console.debug("guido:autosave:blocked", { trigger: e, reason: "save-returned-undefined" }), t.status = s.ERROR;
         return;
       }
-      a.hasChanges = !1, t.status = s.SAVED, t.lastSavedAt = /* @__PURE__ */ new Date(), console.debug("guido:autosave:save-complete", { trigger: e, at: t.lastSavedAt });
-    } catch (o) {
-      console.debug("guido:autosave:error", { trigger: e, error: o }), t.status = s.ERROR;
+      o.hasChanges = !1, t.status = s.SAVED, t.lastSavedAt = /* @__PURE__ */ new Date(), console.debug("guido:autosave:save-complete", { trigger: e, at: t.lastSavedAt });
+    } catch (a) {
+      console.debug("guido:autosave:error", { trigger: e, error: a }), t.status = s.ERROR;
     }
   }, n = () => {
     const { visibilityState: e } = document;
@@ -40,32 +45,32 @@ const I = 18e4, r = 6e4, T = (b) => {
       isActive: u.value
     }), e !== "hidden")
       return;
-    const o = Date.now() - c;
-    if (o < r) {
+    const a = Date.now() - c;
+    if (a < v) {
       console.debug("guido:autosave:visibility-debounced", {
-        sinceLastMs: o,
-        debounceMs: r
+        sinceLastMs: a,
+        debounceMs: v
       });
       return;
     }
-    c = Date.now(), l("visibility");
+    c = Date.now(), r("visibility");
   }, d = () => {
     i && (clearInterval(i), i = null);
-  }, v = () => {
+  }, l = () => {
     document.removeEventListener("visibilitychange", n), window.removeEventListener("pagehide", n);
   };
-  p(
+  I(
     u,
     (e) => {
       console.debug("guido:autosave:active-changed", { active: e }), e ? (d(), i = setInterval(() => {
-        console.debug("guido:autosave:interval-tick"), l("interval");
-      }, I), document.addEventListener("visibilitychange", n), window.addEventListener("pagehide", n)) : (d(), v(), t.status = s.IDLE);
+        console.debug("guido:autosave:interval-tick"), r("interval");
+      }, w), document.addEventListener("visibilitychange", n), window.addEventListener("pagehide", n)) : (d(), l(), t.status = s.IDLE);
     },
     { immediate: !0 }
-  ), y(() => {
-    d(), v(), t.status = s.IDLE, t.lastSavedAt = null;
+  ), L(() => {
+    d(), l(), t.status = s.IDLE, t.lastSavedAt = null;
   });
 };
 export {
-  T as useAutoSave
+  R as useAutoSave
 };

package/dist/composables/useCustomInterfaceAppearance.js

@@ -1,67 +1,53 @@
-import S from "../static/assets/icons/line-change.svg.js";
-import i from "../static/assets/icons/line-delete.svg.js";
-import n from "../static/assets/icons/line-plus.svg.js";
-import p from "../static/styles/base.css.js";
-import s from "../static/styles/components/alert-message.css.js";
-import C from "../static/styles/components/amp-block.css.js";
-import a from "../static/styles/components/base-input.css.js";
-import f from "../static/styles/components/button-group.css.js";
-import c from "../static/styles/components/button.css.js";
-import u from "../static/styles/components/combobox.css.js";
-import l from "../static/styles/components/counter.css.js";
-import d from "../static/styles/components/dropdown-menu.css.js";
-import h from "../static/styles/components/loader.css.js";
-import g from "../static/styles/components/narrow-panel.css.js";
-import I from "../static/styles/components/popup.css.js";
-import w from "../static/styles/components/recommendation-strategy.css.js";
-import y from "../static/styles/components/switcher.css.js";
-import b from "../static/styles/components/tabs.css.js";
-import B from "../static/styles/components/tools.css.js";
-import $ from "../static/styles/components/version-history.css.js";
-import P from "../static/styles/components/wide-panel.css.js";
-import x from "../static/styles/variables.css.js";
-function r(t, o) {
-  return `--guido-icon-${t}: url("data:image/svg+xml,${encodeURIComponent(o.trim())}");`;
-}
-const A = `:host {
-    ${r("line-change", S)}
-    ${r("line-delete", i)}
-    ${r("line-plus", n)}
-}`, R = [
-  x,
+import S from "../static/styles/base.css.js";
+import m from "../static/styles/components/alert-message.css.js";
+import e from "../static/styles/components/amp-block.css.js";
+import i from "../static/styles/components/base-input.css.js";
+import p from "../static/styles/components/button-group.css.js";
+import n from "../static/styles/components/button.css.js";
+import s from "../static/styles/components/combobox.css.js";
+import C from "../static/styles/components/counter.css.js";
+import f from "../static/styles/components/dropdown-menu.css.js";
+import a from "../static/styles/components/loader.css.js";
+import u from "../static/styles/components/narrow-panel.css.js";
+import c from "../static/styles/components/popup.css.js";
+import d from "../static/styles/components/switcher.css.js";
+import l from "../static/styles/components/tabs.css.js";
+import h from "../static/styles/components/tools.css.js";
+import w from "../static/styles/components/version-history.css.js";
+import y from "../static/styles/components/wide-panel.css.js";
+import B from "../static/styles/variables.css.js";
+const b = [
+  B,
   // Must be on top
-  A,
-  p,
+  S,
   // Must be on top
+  m,
+  e,
+  i,
+  p,
+  n,
   s,
   C,
-  a,
   f,
-  c,
+  a,
   u,
-  l,
+  c,
   d,
+  l,
   h,
-  g,
-  I,
-  y,
-  b,
-  B,
-  $,
-  P,
-  w
-  // Last: overrides button.css / wide-panel.css defaults
+  w,
+  y
 ].join(`
 
-`), Y = () => ({ importCss: () => {
+`), v = () => ({ importCss: () => {
   const o = new CSSStyleSheet();
-  o.replaceSync(R);
-  const e = document.querySelector("ui-editor");
-  if (!e)
+  o.replaceSync(b);
+  const r = document.querySelector("ui-editor");
+  if (!r)
     return;
-  const m = e.shadowRoot;
-  m && (m.adoptedStyleSheets = [o]);
+  const t = r.shadowRoot;
+  t && (t.adoptedStyleSheets = [o]);
 } });
 export {
-  Y as useCustomInterfaceAppearance
+  v as useCustomInterfaceAppearance
 };

package/dist/composables/useEditorLock.js

@@ -0,0 +1,20 @@
+let o = Promise.resolve(), n = 0, e = 0;
+const s = () => n > 0, c = () => (e += 1, e), u = (t) => t > 0 && t === e, i = (t) => {
+  const r = o.then(async () => {
+    n += 1;
+    try {
+      return await t();
+    } finally {
+      n -= 1;
+    }
+  });
+  return o = r.catch(() => {
+  }), r;
+}, a = () => ({ runExclusive: i, isEditorBusy: s, beginMount: c, isCurrentMount: u });
+export {
+  c as beginMount,
+  u as isCurrentMount,
+  s as isEditorBusy,
+  i as runExclusive,
+  a as useEditorLock
+};

package/dist/composables/useGuidoStateBridge.js

@@ -1,48 +1,54 @@
-import { useActionsApi as g } from "./useActionsApi.js";
-import { useConfigStore as I } from "../stores/config.js";
-import { useEditorStore as b } from "../stores/editor.js";
-import { useGuidoEmailEditorStore as E } from "../stores/guido-email-editor.js";
-import { watch as c, onUnmounted as T } from "vue";
-const w = 500, z = () => {
-  const i = b(), a = E(), l = I(), { getTemplateData: m } = g();
-  let e = null, n = !1;
-  const r = () => {
-    e && (clearTimeout(e), e = null);
-  }, s = async () => {
-    var t, o;
-    if (!(n || !i.isStripoInitialized))
+import { useActionsApi as b } from "./useActionsApi.js";
+import { useEditorLock as v } from "./useEditorLock.js";
+import { useConfigStore as T } from "../stores/config.js";
+import { useEditorStore as w } from "../stores/editor.js";
+import { useGuidoEmailEditorStore as y } from "../stores/guido-email-editor.js";
+import { watch as a, onUnmounted as B } from "vue";
+const C = 500, L = () => {
+  const i = w(), u = y(), l = T(), { getTemplateData: d } = b(), { runExclusive: m, isEditorBusy: p } = v();
+  let o = null, s = !1;
+  const n = () => {
+    o && (clearTimeout(o), o = null);
+  }, c = (t) => {
+    n(), o = setTimeout(() => {
+      o = null, t();
+    }, C);
+  }, e = async () => {
+    var t, r;
+    if (!(s || !i.isStripoInitialized)) {
+      if (p()) {
+        c(() => void e());
+        return;
+      }
       try {
-        const { html: f, css: h } = await m(), S = ((o = (t = l.config) == null ? void 0 : t.identity) == null ? void 0 : o.templateId) ?? "";
-        if (n)
+        const { html: E, css: g } = await m(d), I = ((r = (t = l.config) == null ? void 0 : t.identity) == null ? void 0 : r.templateId) ?? "";
+        if (s)
           return;
-        a.$patch({
-          html: f ?? "",
-          css: h ?? "",
-          templateId: S,
+        u.$patch({
+          html: E ?? "",
+          css: g ?? "",
+          templateId: I,
           lastUpdatedAt: Date.now()
         });
       } catch {
       }
-  }, u = () => {
-    r(), e = setTimeout(() => {
-      e = null, s();
-    }, w);
-  }, d = c(
+    }
+  }, f = () => c(() => void e()), h = a(
     () => i.isStripoInitialized,
     (t) => {
-      t && s();
+      t && e();
     },
     { immediate: !0 }
-  ), p = c(
+  ), S = a(
     () => i.hasChanges,
-    (t, o) => {
-      i.isStripoInitialized && (t ? u() : o && (r(), s()));
+    (t, r) => {
+      i.isStripoInitialized && (t ? f() : r && (n(), e()));
     }
   );
-  T(() => {
-    n = !0, r(), d(), p();
+  B(() => {
+    s = !0, n(), h(), S();
   });
 };
 export {
-  z as useGuidoStateBridge
+  L as useGuidoStateBridge
 };

package/dist/composables/useRecommendation.js

@@ -1,22 +1,22 @@
-import { getRecommendationFeedSourceMaps as y, URLS as I } from "../enums/extensions/recommendationBlock.js";
-import { MinDeviceViewport as C, DefaultPadding as R } from "../enums/recommendation.js";
+import { getRecommendationFeedSourceMaps as I, URLS as R } from "../enums/extensions/recommendationBlock.js";
+import { MinDeviceViewport as C, DefaultPadding as b } from "../enums/recommendation.js";
 import { useRecommendationExtensionStore as l } from "../extensions/Blocks/Recommendation/store/recommendation.js";
-import { generateCompleteFilterQuery as b } from "../extensions/Blocks/Recommendation/utils/filterUtil.js";
-import { getPartnerRecommendationParams as h } from "../extensions/Blocks/Recommendation/utils/partnerCustomizations.js";
+import { generateCompleteFilterQuery as h } from "../extensions/Blocks/Recommendation/utils/filterUtil.js";
+import { getPartnerRecommendationParams as y } from "../extensions/Blocks/Recommendation/utils/partnerCustomizations.js";
 import { sanitizeProductIds as x } from "../extensions/Blocks/Recommendation/utils/productIds.js";
 import { useConfigStore as P } from "../stores/config.js";
 const B = () => ({
   calculateCardWidth: ({
-    mobileLeftPadding: i,
-    mobileRightPadding: c,
-    cardsInRow: s,
+    mobileLeftPadding: a,
+    mobileRightPadding: s,
+    cardsInRow: c,
     unresponsive: n
   }) => {
-    const o = n ? s : 1, e = i + c + (o - 1) * R;
-    return (C - e) / o;
+    const r = n ? c : 1, e = a + s + (r - 1) * b;
+    return (C - e) / r;
   },
-  getRecommendationCampaignData: (i) => {
-    const c = l(), s = Number(i), n = c.blockStates[s];
+  getRecommendationCampaignData: (a) => {
+    const s = l(), c = Number(a), n = s.blockStates[c];
     if (!n)
       return {
         textTrimming: !1,
@@ -30,54 +30,47 @@ const B = () => ({
         discountBeforeTextValue: "",
         discountAfterTextValue: ""
       };
-    const { recommendationConfigs: o } = n, e = o.orientation === "grid" ? "vertical" : "horizontal";
+    const { recommendationConfigs: r } = n, e = r.orientation === "grid" ? "vertical" : "horizontal";
     return {
-      textTrimming: o.textTrimming,
+      textTrimming: r.textTrimming,
       orientation: e,
       mobileLeftPadding: 0,
       mobileRightPadding: 0,
-      cardsInRow: o.cardsInRow,
-      unresponsive: o.unresponsive,
+      cardsInRow: r.cardsInRow,
+      unresponsive: r.unresponsive,
       priceBeforeTextValue: "",
       priceAfterTextValue: "",
       discountBeforeTextValue: "",
       discountAfterTextValue: ""
     };
   },
-  buildCampaignUrl: (i, c) => {
+  buildCampaignUrl: (a, s) => {
     var m;
-    const s = l(), n = P(), o = Number(i);
+    const c = l(), n = P(), r = Number(a);
     let e;
-    if (c)
-      e = c;
+    if (s)
+      e = s;
     else {
-      const a = s.blockStates[o];
-      if (!a)
+      const i = c.blockStates[r];
+      if (!i)
         return "";
-      const { recommendationConfigs: r } = a;
+      const { recommendationConfigs: o } = i;
       e = {
-        strategy: r.strategy,
-        strategyId: r.strategyId,
-        language: r.language,
-        currencyCode: r.currencySettings.value,
-        size: r.size,
-        productIds: r.productIds,
-        filters: r.filters,
-        shuffleProducts: r.shuffleProducts
+        strategy: o.strategy,
+        language: o.language,
+        currencyCode: o.currencySettings.value,
+        size: o.size,
+        productIds: o.productIds,
+        filters: o.filters,
+        shuffleProducts: o.shuffleProducts
       };
     }
-    if (e.strategyId && n.isFeatureEnabled("reusableRecommendationStrategy"))
-      return s.recommendationCampaignUrls[i] = {
-        strategyId: e.strategyId,
-        locale: e.language,
-        currency: e.currencyCode
-      }, "";
-    const g = ((m = y().find((a) => a.key === e.strategy)) == null ? void 0 : m.path) || "", t = new URLSearchParams();
+    const f = ((m = I().find((i) => i.key === e.strategy)) == null ? void 0 : m.path) || "", t = new URLSearchParams();
     t.set("locale", e.language), t.set("currency", e.currencyCode), t.set("partnerName", n.partnerName), t.set("size", e.size), t.set("details", "true"), t.set("campaignId", n.variationId), e.strategy === "manualMerchandising" ? t.set("productId", x(e.productIds)) : e.strategy === "similarViewed" && t.set("productId", "{itemId}"), e.strategy === "userBased" && t.set("userId", "{user_id}");
-    const f = e.filters.filter((a) => a.isValid), d = b(f);
-    d && t.set("filter", d), e.shuffleProducts && t.set("shuffle", "true"), Object.entries(h(n.partnerName, e.strategy)).forEach(([a, r]) => t.set(a, r));
-    const p = decodeURIComponent(t.toString()), u = `${I.RECOMMENDATION_API_URL}/v2/${g}?${p}`;
-    return s.recommendationCampaignUrls[i] = u, u;
+    const g = e.filters.filter((i) => i.isValid), d = h(g);
+    d && t.set("filter", d), e.shuffleProducts && t.set("shuffle", "true"), Object.entries(y(n.partnerName, e.strategy)).forEach(([i, o]) => t.set(i, o));
+    const p = decodeURIComponent(t.toString()), u = `${R.RECOMMENDATION_API_URL}/v2/${f}?${p}`;
+    return c.recommendationCampaignUrls[a] = u, u;
   }
 });
 export {