@useinsider/guido 3.2.0-beta.a14c305 → 3.2.0-beta.a49c53c

package/dist/composables/useFullStoryBridge.js

@@ -0,0 +1,14 @@
+const c = "https://email-static.useinsider.com/guido/guido-fs.js", u = () => ({ injectFullStory: () => {
+  var n;
+  const s = window;
+  if (typeof s._fs_org != "string" || !s._fs_org)
+    return;
+  const r = document.querySelector("ui-editor"), o = (n = r == null ? void 0 : r.shadowRoot) == null ? void 0 : n.querySelector("iframe"), e = o == null ? void 0 : o.contentDocument;
+  if (!e || e.querySelector('script[data-fullstory-bridge="true"]'))
+    return;
+  const t = e.createElement("script");
+  t.src = c, t.async = !0, t.crossOrigin = "anonymous", t.dataset.fullstoryBridge = "true", e.head.appendChild(t);
+} });
+export {
+  u as useFullStoryBridge
+};

package/dist/composables/useRecommendation.js

@@ -1,4 +1,4 @@
-import { getRecommendationFeedSourceMaps as g, URLS as p } from "../enums/extensions/recommendationBlock.js";
+import { RecommendationFeedSourceMaps as g, URLS as p } from "../enums/extensions/recommendationBlock.js";
 import { MinDeviceViewport as R, DefaultPadding as b } from "../enums/recommendation.js";
 import { useRecommendationExtensionStore as u } from "../extensions/Blocks/Recommendation/store/recommendation.js";
 import { generateCompleteFilterQuery as x } from "../extensions/Blocks/Recommendation/utils/filterUtil.js";
@@ -47,7 +47,7 @@ const N = () => ({
     const n = u(), o = I(), a = Number(i), r = n.blockStates[a];
     if (!r)
       return "";
-    const { recommendationConfigs: e } = r, l = ((m = g().find((s) => s.key === e.strategy)) == null ? void 0 : m.path) || "", t = new URLSearchParams();
+    const { recommendationConfigs: e } = r, l = ((m = g.find((s) => s.key === e.strategy)) == null ? void 0 : m.path) || "", t = new URLSearchParams();
     t.set("locale", e.language), t.set("currency", e.currencySettings.value), t.set("partnerName", o.partnerName), t.set("size", e.size), t.set("details", "true"), t.set("campaignId", o.variationId), e.strategy === "manualMerchandising" ? t.set("productId", e.productIds.join(",")) : e.strategy === "similarViewed" && t.set("productId", "{itemId}"), e.strategy === "userBased" && t.set("userId", "{user_id}");
     const f = e.filters.filter((s) => s.isValid), c = x(f);
     c && t.set("filter", c), e.shuffleProducts && t.set("shuffle", "true");

package/dist/composables/useStripo.js

@@ -1,79 +1,80 @@
-import { useActionsApi as F } from "./useActionsApi.js";
-import { useBlocksConfig as D } from "./useBlocksConfig.js";
-import { useConfig as I } from "./useConfig.js";
-import { useCustomInterfaceAppearance as P } from "./useCustomInterfaceAppearance.js";
-import { useStripoEventHandler as U } from "./useStripoEventHandler.js";
-import { useToaster as R } from "./useToaster.js";
-import { localePatch as q } from "../config/i18n/index.js";
-import { getDisplayConditions as x } from "../enums/displayConditions.js";
-import { useStripoApi as H } from "../services/stripoApi.js";
-import O from "../static/styles/customEditorStyle.css.js";
-import { useEditorStore as C } from "../stores/editor.js";
-import { dynamicContentToMergeTags as L } from "../utils/genericUtil.js";
-import $ from "../package.json.js";
-const ie = (E, c) => {
-  const { features: l, template: h, isFeatureEnabled: u } = I(), { handleError: m } = R(), { getToken: b, getCustomFonts: w, getSyncModulesStatus: k } = H(), { handleEvent: T } = U(), { getStripoBlocksConfig: V } = D(), _ = async (i, n = [], r = !1) => {
-    var f, y, S;
-    const e = C(), { html: p, css: a } = i, { baseBlocks: o, extensions: d } = await V(), g = ((f = l.value) == null ? void 0 : f.displayConditions) ?? !0, v = ((y = l.value) == null ? void 0 : y.modulesDisabled) ?? !1, M = ((S = h.value) == null ? void 0 : S.forceRecreate) ?? !1;
+import { useActionsApi as D } from "./useActionsApi.js";
+import { useBlocksConfig as I } from "./useBlocksConfig.js";
+import { useConfig as P } from "./useConfig.js";
+import { useCustomInterfaceAppearance as U } from "./useCustomInterfaceAppearance.js";
+import { useFullStoryBridge as R } from "./useFullStoryBridge.js";
+import { useStripoEventHandler as q } from "./useStripoEventHandler.js";
+import { useToaster as x } from "./useToaster.js";
+import { localePatch as H } from "../config/i18n/index.js";
+import { displayConditions as O } from "../enums/displayConditions.js";
+import { useStripoApi as j } from "../services/stripoApi.js";
+import L from "../static/styles/customEditorStyle.css.js";
+import { useEditorStore as S } from "../stores/editor.js";
+import { dynamicContentToMergeTags as z } from "../utils/genericUtil.js";
+const ne = (y, a) => {
+  const { features: d, template: C, isFeatureEnabled: l } = P(), { handleError: c } = x(), { getToken: E, getCustomFonts: h, getSyncModulesStatus: w } = j(), { handleEvent: b } = q(), { getStripoBlocksConfig: B } = I(), T = async (i, r = [], n = !1) => {
+    var p, f, g;
+    const e = S(), { html: o, css: k } = i, { baseBlocks: u, extensions: F } = await B(), m = ((p = d.value) == null ? void 0 : p.displayConditions) ?? !0, M = ((f = d.value) == null ? void 0 : f.modulesDisabled) ?? !1, V = ((g = C.value) == null ? void 0 : g.forceRecreate) ?? !1;
     window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
-        metadata: E,
-        html: p,
-        css: a,
-        forceRecreate: M,
+        metadata: y,
+        html: o,
+        css: k,
+        forceRecreate: V,
         locale: "en",
         undoButtonSelector: "#guido__undo-button",
         redoButtonSelector: "#guido__redo-button",
         mobileViewButtonSelector: ".guido__view-option-selection-mobile",
         desktopViewButtonSelector: ".guido__view-option-selection-desktop",
         codeEditorButtonSelector: "#guido__code-button",
-        customAppearanceMergetags: !u("liquidSyntax"),
+        customAppearanceMergetags: !l("liquidSyntax"),
         customAppearanceMergetagsBorderColor: "#f1f3fe",
         customAppearanceMergetagsBackgroundColor: "#f1f3fe",
-        customViewStyles: O,
-        conditionsEnabled: g,
-        customConditionsEnabled: g,
-        conditionCategories: x(),
+        customViewStyles: L,
+        conditionsEnabled: m,
+        customConditionsEnabled: m,
+        conditionCategories: O,
         enableXSSSecurity: !0,
-        modulesDisabled: v,
-        syncModulesEnabled: r,
+        modulesDisabled: M,
+        syncModulesEnabled: n,
         messageSettingsEnabled: !0,
         displayGmailAnnotations: !0,
         displayHiddenPreheader: !1,
         displayTitle: !1,
         displayUTM: !1,
         selectElementAfterDrop: !0,
-        ...o ? { baseBlocks: o } : {},
+        allowedScriptSourceDomains: "https://email-static.useinsider.com https://edge.fullstory.com https://rs.fullstory.com",
+        ...u ? { baseBlocks: u } : {},
         editorFonts: {
           showDefaultStandardFonts: !0,
           showDefaultNotStandardFonts: !0,
-          customFonts: n
+          customFonts: r
         },
         mergeTags: [
           {
-            entries: L(
-              c.preselectedDynamicContentList,
-              u("liquidSyntax")
+            entries: z(
+              a.preselectedDynamicContentList,
+              l("liquidSyntax")
             )
           }
         ],
         async onTokenRefreshRequest(t) {
           try {
-            const s = await b();
+            const s = await E();
             t(s);
           } catch (s) {
-            m(s, "Failed to refresh token");
+            c(s, "Failed to refresh token");
           }
         },
         onTemplateLoaded() {
           try {
-            const { importCss: t } = P(), { activateCustomViewStyles: s, updateTimerInClonedTemplate: A } = F();
-            t(), s(), A(), c.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
+            const { importCss: t } = U(), { activateCustomViewStyles: s, updateTimerInClonedTemplate: v } = D(), { injectFullStory: A } = R();
+            t(), s(), A(), v(), a.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
               e.hasChanges = !1;
             }, 1e3);
           } catch (t) {
-            m(t, "Failed to load custom interface appearance");
+            c(t, "Failed to load custom interface appearance");
           }
         },
         onCodeEditorVisibilityChanged(t) {
@@ -88,39 +89,38 @@ const ie = (E, c) => {
         onDataChanged() {
           e.hasChanges = !0;
         },
-        onEvent: T,
+        onEvent: b,
         ignoreClickOutsideSelectors: [
           "#guido-dynamic-content-modal",
           ".in-on-board-wrapper",
           ".in-drawer__container"
         ],
-        extensions: d,
-        localePatch: q
+        extensions: F,
+        localePatch: H
       }
     );
-  }, B = (i) => new Promise((n, r) => {
-    var d;
+  }, _ = (i) => new Promise((r, n) => {
     if (document.getElementById("UiEditorScript")) {
-      i(), n();
+      i(), r();
       return;
     }
-    const e = $.guido, a = `https://email-static.useinsider.com/guido/${(d = e == null ? void 0 : e.stripo) == null ? void 0 : d.version}/UIEditor.js`, o = document.createElement("script");
-    o.id = "UiEditorScript", o.type = "module", o.src = a, o.onload = () => {
-      i(), n();
+    const e = "https://plugins.stripo.email/resources/uieditor/latest/UIEditor.js", o = document.createElement("script");
+    o.id = "UiEditorScript", o.type = "module", o.src = e, o.onload = () => {
+      i(), r();
     }, o.onerror = () => {
-      r(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
+      n(new Error(`Failed to load Stripo UIEditor script from S3: ${e}`));
     }, document.body.appendChild(o);
   });
   return { initPlugin: async (i) => {
-    await B(async () => {
-      const n = C(), [r, e] = await Promise.all([
-        w(),
-        k()
+    await _(async () => {
+      const r = S(), [n, e] = await Promise.all([
+        h(),
+        w()
       ]);
-      n.syncModulesEnabled = e, await _(i, r, e);
+      r.syncModulesEnabled = e, await T(i, n, e);
     });
   } };
 };
 export {
-  ie as useStripo
+  ne as useStripo
 };

package/dist/config/compiler/utils/recommendationCompilerUtils.js

@@ -1,10 +1,11 @@
 import { useConfig as S } from "../../../composables/useConfig.js";
 import { useRecommendation as _ } from "../../../composables/useRecommendation.js";
+import { useRecommendationExtensionStore as d } from "../../../extensions/Blocks/Recommendation/store/recommendation.js";
 function y(e, u, r, o, s = "") {
   const n = `{{${s}${e}_${u}_${r}}}`, t = `{{${s}${e}_${u}_currency}}`;
   return o === "before" ? `${t} ${n}` : `${n} ${t}`;
 }
-function p(e, u, r, o, s, n) {
+function m(e, u, r, o, s, n) {
   switch (u) {
     case "productImage": {
       const t = e.querySelector("img");
@@ -69,67 +70,69 @@ function p(e, u, r, o, s, n) {
     default: {
       const t = e.getAttribute("product-attr") ? e : e.querySelector("[product-attr]");
       if (t) {
-        const c = t.getAttribute("product-attr"), i = t.querySelector("p");
-        if (i) {
-          const a = i.querySelector("strong") || i;
-          a.textContent = `{{${n}${r}_${o}_${c}}}`;
+        const c = t.getAttribute("product-attr"), a = t.querySelector("p");
+        if (a) {
+          const i = a.querySelector("strong") || a;
+          i.textContent = `{{${n}${r}_${o}_${c}}}`;
         }
       }
       break;
     }
   }
 }
-function d(e, u, r, o) {
+function q(e, u, r, o) {
   e.querySelectorAll(".recommendation-product-row").forEach((n, t) => {
-    n.querySelectorAll("[data-attribute-type]").forEach((i) => {
-      const a = i.getAttribute("data-attribute-type") || "", b = i.querySelectorAll(".attribute-cell");
-      b.length > 0 ? b.forEach((l) => {
-        p(l, a, u, t, r, o);
-      }) : p(i, a, u, t, r, o);
+    n.querySelectorAll("[data-attribute-type]").forEach((a) => {
+      const i = a.getAttribute("data-attribute-type") || "", l = a.querySelectorAll(".attribute-cell");
+      l.length > 0 ? l.forEach((p) => {
+        m(p, i, u, t, r, o);
+      }) : m(a, i, u, t, r, o);
     });
   });
 }
-function q(e, u, r, o) {
+function g(e, u, r, o) {
   const s = e.querySelectorAll(".recommendation-product-row");
   if (!s.length)
     return;
   const [n] = s, t = n.querySelector("[data-attribute-type]"), c = t ? t.querySelectorAll(".attribute-cell").length : 1;
-  s.forEach((i, a) => {
-    i.querySelectorAll("[data-attribute-type]").forEach((l) => {
-      const m = l.getAttribute("data-attribute-type") || "";
-      l.querySelectorAll(".attribute-cell").forEach(($, f) => {
-        const A = a * c + f;
-        p($, m, u, A, r, o);
+  s.forEach((a, i) => {
+    a.querySelectorAll("[data-attribute-type]").forEach((p) => {
+      const b = p.getAttribute("data-attribute-type") || "";
+      p.querySelectorAll(".attribute-cell").forEach((f, $) => {
+        const A = i * c + $;
+        m(f, b, u, A, r, o);
       });
     });
   });
 }
-function g(e, u, r, o) {
+function h(e, u, r, o) {
   e.querySelectorAll(".ins-recommendation-product-container").forEach((n) => {
-    q(n, u, r, o);
+    g(n, u, r, o);
   });
 }
-function h(e, u, r) {
+function C(e, u, r) {
   const o = e.getAttribute("data-layout") || "grid", s = e.getAttribute("currency-alignment") || "after";
-  o === "list" ? d(e, u, s, r) : g(e, u, s, r);
+  o === "list" ? q(e, u, s, r) : h(e, u, s, r);
 }
-function C(e, u) {
+function E(e, u) {
   const r = e.match(/<!DOCTYPE[^>]*>/i);
   return (r ? `${r[0]}
 ` : "") + u.documentElement.outerHTML;
 }
-function P(e) {
+function T(e) {
   const u = e.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), r = new DOMParser().parseFromString(u, "text/html"), o = r.querySelectorAll(".recommendation-block-v2");
   if (!o.length)
     return e;
-  const { buildCampaignUrl: s } = _(), { isFeatureEnabled: n } = S(), t = n("liquidSyntax") ? "reco_" : "";
+  const { buildCampaignUrl: s } = _(), n = d();
+  n.recommendationCampaignUrls = {};
+  const { isFeatureEnabled: t } = S(), c = t("liquidSyntax") ? "reco_" : "";
   return o.forEach((i) => {
-    var b, l;
-    const a = i.getAttribute("recommendation-id");
-    a && ((b = i.parentNode) == null || b.insertBefore(r.createComment("REC_START"), i), (l = i.parentNode) == null || l.insertBefore(r.createComment("REC_END"), i.nextSibling), s(a), h(i, a, t));
-  }), C(u, r).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
+    var p, b;
+    const l = i.getAttribute("recommendation-id");
+    l && ((p = i.parentNode) == null || p.insertBefore(r.createComment("REC_START"), i), (b = i.parentNode) == null || b.insertBefore(r.createComment("REC_END"), i.nextSibling), s(l), C(i, l, c));
+  }), E(u, r).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
 }
 export {
   y as formatPriceVariable,
-  P as prepareRecommendationBlocks
+  T as prepareRecommendationBlocks
 };

package/dist/config/migrator/recommendationMigrator.js

@@ -13,7 +13,7 @@ class B {
   migrate(e) {
     try {
       const t = this.parser.parseFromString(e, "text/html"), s = t.querySelectorAll(
-        'td.ins-recommendation-v3-block-1, td.product-block[esd-handler-name*="EmailRecommendationV3"]'
+        'td.ins-recommendation-v3-block-1:not(.recommendation-block-v2), td.product-block[esd-handler-name*="EmailRecommendationV3"]:not(.recommendation-block-v2)'
       );
       return w().$patch((i) => {
         i.migrations = { ...i.migrations, [S]: s.length };

package/dist/enums/displayConditions.js

@@ -1,84 +1,80 @@
-import { useTranslations as i } from "../composables/useTranslations.js";
-const t = () => {
-  const e = i();
-  return [
-    {
-      category: e("journey-builder.demographics"),
-      conditions: [
-        {
-          id: 1,
-          name: e("condition.language"),
-          description: e("journey-builder.display-condition-language-description"),
-          beforeScript: '{% if language == "en_US" %}',
-          afterScript: "{% endif %}"
-        },
-        {
-          id: 2,
-          name: e("condition.country"),
-          description: e("journey-builder.display-condition-country-description"),
-          beforeScript: '{% if country == "Australia" %}',
-          afterScript: "{% endif %}"
-        },
-        {
-          id: 3,
-          name: e("stripo-editor.country-and-city"),
-          description: e("journey-builder.display-condition-country-city-description"),
-          beforeScript: '{% if country == "United Kingdom" and city == "London" %}',
-          afterScript: "{% endif %}"
-        },
-        {
-          id: 4,
-          name: e("stripo-editor.age-less-than-operator"),
-          description: e("journey-builder.display-condition-age-less-than"),
-          beforeScript: "{% if age < 18 %}",
-          afterScript: "{% endif %}"
-        },
-        {
-          id: 5,
-          name: e("stripo-editor.age-equal-greater-operator"),
-          description: e("journey-builder.display-condition-age-equal-greater"),
-          beforeScript: "{% if age >= 25 %}",
-          afterScript: "{% endif %}"
-        },
-        {
-          id: 6,
-          name: e("stripo-editor.age-greater-less-operators"),
-          description: e("journey-builder.display-condition-age-between"),
-          beforeScript: "{% if age > 18 and age < 25 %}",
-          afterScript: "{% endif %}"
-        },
-        {
-          id: 7,
-          name: e("condition.gender"),
-          description: e("journey-builder.display-condition-gender-female"),
-          beforeScript: '{% if gender == "Female" %}',
-          afterScript: "{% endif %}"
-        },
-        {
-          id: 8,
-          name: e("journey-builder.state"),
-          description: e("stripo-editor.state-description"),
-          beforeScript: '{% if c_state == "VIC" or c_state == "NSW" or c_state == "QLD" %}',
-          afterScript: "{% endif %}"
-        },
-        {
-          id: 9,
-          name: e("journey-builder.vip-user"),
-          description: e("stripo-editor.vip-user-description"),
-          beforeScript: "{% if c_is_vip_user %}",
-          afterScript: "{% endif %}"
-        },
-        {
-          id: 10,
-          name: e("journey-builder.membership-type"),
-          description: e("stripo-editor.membership-type-description"),
-          beforeScript: "{% if c_is_gold_member or c_is_silver_member %}",
-          afterScript: "{% endif %}"
-        }
-      ]
-    }
-  ];
-};
+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 {
-  t as getDisplayConditions
+  e as displayConditions
 };