@useinsider/guido 3.18.2-beta.ec25841 → 3.18.2-beta.eedafd2

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

@@ -0,0 +1,20 @@
+import type { BaseDynamicContent } from '@@/Types/generic';
+export type DynamicContentFormat = NonNullable<BaseDynamicContent['format']>;
+/** Format key the dynamic-content picker sends for a custom date/time format. */
+export declare const TIME_FORMAT_KEY = "time-format";
+/** Wraps a Liquid filter argument in whichever quote style the value itself does not use. */
+export declare const quoteArgument: (value: string) => string | null;
+/**
+ * `{ key: 'time-format', value: '%Y-%m-%d' }` -> `date: "%Y-%m-%d"`.
+ *
+ * Only a custom date/time strftime pattern has a Liquid equivalent. Anything else returns null so
+ * the caller emits a plain tag rather than one that silently lost — or literally printed — its
+ * format.
+ * @example formatToLiquidFilter({ key: 'time-format', value: '%b %-d, %Y' }) -> date: "%b %-d, %Y"
+ */
+export declare const formatToLiquidFilter: (format: DynamicContentFormat) => string | null;
+/**
+ * Inverse of `formatToLiquidFilter` — reads the picker format back out of one filter segment, so a
+ * reopened tag restores its selection in the host's format dropdown.
+ */
+export declare const liquidFilterToFormat: (segment: string) => DynamicContentFormat | null;

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

@@ -15,6 +15,36 @@ import type { SavedTemplateDetails } from '@@/Types/stripo';
  * same source), so it is reliably present regardless of how the block was added.
  */
 export declare function getHtmlReferencedUnsubscribePages(html: string): number[];
+/**
+ * Hydrates the recommendation extension store from the persisted `esd-ext-config`
+ * JSON blob on each `.recommendation-block-v2` element in the raw editor HTML.
+ *
+ * Why this runs before `compileHtml`:
+ *   The HTML compiler's `prepareRecommendationBlocks` rule asks
+ *   `useRecommendation.buildCampaignUrl(id)` to assemble each block's API URL
+ *   from `blockStates[id].recommendationConfigs`. That Pinia entry is normally
+ *   populated by `RecommendationBlockControl._syncNodeConfigToStore`, which
+ *   only fires when the user *selects* the block. Saving without ever
+ *   selecting a migrated block would otherwise build the URL from empty/
+ *   default state and the campaign URL would not be saved.
+ *
+ * Why we read raw HTML, not compiled HTML:
+ *   Stripo's `compileEmail()` strips editor-only attributes (`esd-*`) from the
+ *   compiled output, so `esd-ext-config` is gone by the time the compiler
+ *   pipeline sees the HTML. The raw HTML from `getTemplateData()` preserves
+ *   the attribute as the migrator wrote it.
+ *
+ * Reference data pre-load:
+ *   When the template has recommendation blocks, this also pre-loads the
+ *   shared reference data (languages / currency list) so the save-time
+ *   required-fields validator can check each block's locale and currency
+ *   against the partner's real options. Best-effort — on a fetch failure the
+ *   validator degrades to its empty-list guard (`requiredFields.ts`) instead
+ *   of blocking the save or stranding the Save button.
+ */
+declare function hydrateRecommendationStoreFromRawHtml(rawHtml: string): Promise<void>;
 export declare const useTemplatePreparation: () => {
     prepareTemplateDetails: () => Promise<Omit<SavedTemplateDetails, "metadata">>;
+    hydrateRecommendationStore: typeof hydrateRecommendationStoreFromRawHtml;
 };
+export {};

package/dist/static/styles/components/recommendation-strategy.css.js

@@ -49,8 +49,11 @@ const n = `.strategy-control-header {
     white-space: nowrap;
 }
 
-.strategy-control-cta.primary > .button {
+.strategy-control-cta.primary > .button:disabled,
+.strategy-control-cta.primary > .button.disabled {
+    opacity: 1;
     color: var(--guido-color-gray-800);
+    cursor: default;
 }
 
 .strategy-control-name-band {
@@ -68,39 +71,6 @@ const n = `.strategy-control-header {
     line-height: 24px;
 }
 
-/* Each skeleton mirrors the footprint of the element it stands in for, so retiring
-   the loading state does not shift the panel. */
-.guido-skeleton--strategy-title {
-    width: 366px;
-    height: 38px;
-}
-
-.guido-skeleton--strategy-description {
-    width: 366px;
-    height: 48px;
-}
-
-.guido-skeleton--strategy-cta {
-    width: 175px;
-    height: 40px;
-}
-
-.guido-skeleton--strategy-name {
-    width: 398px;
-    height: 48px;
-}
-
-.strategy-control-skeleton-row {
-    display: flex;
-    gap: 16px;
-    padding: 0 16px 16px;
-}
-
-[data-strategy-loading-state] .guido-skeleton {
-    display: block;
-}
-
-
 .strategy-control-actions {
     display: flex;
     align-items: center;

package/dist/stores/config.js

@@ -1,8 +1,8 @@
-import "../@types/config/schemas.js";
+import { MessageType as r } from "../@types/config/schemas.js";
 import "../@types/config/defaults.js";
 import { parseConfig as o } from "../@types/config/validator.js";
-import { defineStore as r } from "pinia";
-const f = r("guido-config", {
+import { defineStore as a } from "pinia";
+const u = a("guido-config", {
   state: () => ({
     initialized: !1,
     config: null
@@ -75,57 +75,74 @@ const f = r("guido-config", {
      * Get the template ID
      */
     templateId: (i) => {
-      var e, n;
-      return ((n = (e = i.config) == null ? void 0 : e.identity) == null ? void 0 : n.templateId) ?? "";
+      var e, t;
+      return ((t = (e = i.config) == null ? void 0 : e.identity) == null ? void 0 : t.templateId) ?? "";
     },
     /**
      * Get the user ID
      */
     userId: (i) => {
-      var e, n;
-      return ((n = (e = i.config) == null ? void 0 : e.identity) == null ? void 0 : n.userId) ?? "";
+      var e, t;
+      return ((t = (e = i.config) == null ? void 0 : e.identity) == null ? void 0 : t.userId) ?? "";
     },
     /**
      * Get the variation ID
      */
     variationId: (i) => {
-      var e, n;
-      return ((n = (e = i.config) == null ? void 0 : e.identity) == null ? void 0 : n.variationId) ?? "";
+      var e, t;
+      return ((t = (e = i.config) == null ? void 0 : e.identity) == null ? void 0 : t.variationId) ?? "";
     },
     /**
      * Get the partner name
      */
     partnerName: (i) => {
-      var e, n;
-      return ((n = (e = i.config) == null ? void 0 : e.partner) == null ? void 0 : n.name) ?? "";
+      var e, t;
+      return ((t = (e = i.config) == null ? void 0 : e.partner) == null ? void 0 : t.name) ?? "";
     },
     /**
      * Get the product type
      */
     productType: (i) => {
-      var e, n;
-      return ((n = (e = i.config) == null ? void 0 : e.partner) == null ? void 0 : n.productType) ?? 60;
+      var e, t;
+      return ((t = (e = i.config) == null ? void 0 : e.partner) == null ? void 0 : t.productType) ?? 60;
     },
     /**
      * Get the message type
      */
     messageType: (i) => {
-      var e, n;
-      return ((n = (e = i.config) == null ? void 0 : e.partner) == null ? void 0 : n.messageType) ?? 1;
+      var e, t;
+      return ((t = (e = i.config) == null ? void 0 : e.partner) == null ? void 0 : t.messageType) ?? 1;
+    },
+    /**
+     * Transactional campaigns keep the hard save block. Reactive getter, so
+     * consumers stay safe in setup where a raw config read snapshots null (SD-147945).
+     */
+    isTransactional() {
+      return this.messageType === r.TRANSACTIONAL;
+    },
+    /**
+     * Soft-save policy: may the editor persist a template with validation errors?
+     * Default true (host sets features.allowSaveWithErrors=false for transactional +
+     * unsub). Reactive getter defaulting true — reading via isFeatureEnabled would
+     * floor to false pre-init and momentarily hide the soft-save option (SD-147430).
+     */
+    allowSaveWithErrors() {
+      var i;
+      return ((i = this.features) == null ? void 0 : i.allowSaveWithErrors) ?? !0;
     },
     /**
      * Get the username
      */
     username: (i) => {
-      var e, n;
-      return ((n = (e = i.config) == null ? void 0 : e.partner) == null ? void 0 : n.username) ?? "Guido User";
+      var e, t;
+      return ((t = (e = i.config) == null ? void 0 : e.partner) == null ? void 0 : t.username) ?? "Guido User";
     },
     /**
      * Check if header should be shown
      */
     showHeader: (i) => {
-      var e, n;
-      return ((n = (e = i.config) == null ? void 0 : e.ui) == null ? void 0 : n.showHeader) ?? !0;
+      var e, t;
+      return ((t = (e = i.config) == null ? void 0 : e.ui) == null ? void 0 : t.showHeader) ?? !0;
     },
     /**
      * Check if a specific feature is enabled.
@@ -134,8 +151,8 @@ const f = r("guido-config", {
      */
     // eslint-disable-next-line @stylistic/max-len
     isFeatureEnabled: (i) => (e) => {
-      var n, t;
-      return ((t = (n = i.config) == null ? void 0 : n.features) == null ? void 0 : t[e]) ?? !1;
+      var t, n;
+      return ((n = (t = i.config) == null ? void 0 : t.features) == null ? void 0 : n[e]) ?? !1;
     }
   },
   actions: {
@@ -155,5 +172,5 @@ const f = r("guido-config", {
   }
 });
 export {
-  f as useConfigStore
+  u as useConfigStore
 };

package/dist/stores/onboarding.js

@@ -1,5 +1,5 @@
-import { useOnboardingApi as e } from "../services/onboardingApi.js";
-import { defineStore as s } from "pinia";
+import { useOnboardingApi as s } from "../services/onboardingApi.js";
+import { defineStore as e } from "pinia";
 const t = () => ({
   cardIndex: 0,
   isActive: !1,
@@ -11,54 +11,49 @@ const t = () => ({
     textBlockOnboarding: t(),
     versionHistoryOnboarding: t(),
     ampOnboarding: t(),
-    itemsOnboarding: t(),
-    recommendationStrategyOnboarding: t()
+    itemsOnboarding: t()
   },
   userModalState: {},
   isFetched: !1
-}), c = s("guidoOnboarding", {
+}), c = e("guidoOnboarding", {
   state: () => a(),
   getters: {
-    getOnboarding: (n) => (o) => n.onboardings[o],
-    isActive: (n) => (o) => n.onboardings[o].isActive,
-    getCurrentCard: (n) => (o) => {
-      const i = n.onboardings[o];
-      return i.config[i.cardIndex];
+    getOnboarding: (n) => (i) => n.onboardings[i],
+    isActive: (n) => (i) => n.onboardings[i].isActive,
+    getCurrentCard: (n) => (i) => {
+      const o = n.onboardings[i];
+      return o.config[o.cardIndex];
     },
     getGenericCurrentCard: (n) => {
-      const { genericOnboarding: o } = n.onboardings;
-      return o.config[o.cardIndex];
+      const { genericOnboarding: i } = n.onboardings;
+      return i.config[i.cardIndex];
     },
     getTextBlockCurrentCard: (n) => {
-      const { textBlockOnboarding: o } = n.onboardings;
-      return o.config[o.cardIndex];
+      const { textBlockOnboarding: i } = n.onboardings;
+      return i.config[i.cardIndex];
     },
     getVersionHistoryCurrentCard: (n) => {
-      const { versionHistoryOnboarding: o } = n.onboardings;
-      return o.config[o.cardIndex];
+      const { versionHistoryOnboarding: i } = n.onboardings;
+      return i.config[i.cardIndex];
     },
     getAmpCurrentCard: (n) => {
-      const { ampOnboarding: o } = n.onboardings;
-      return o.config[o.cardIndex];
+      const { ampOnboarding: i } = n.onboardings;
+      return i.config[i.cardIndex];
     },
     getItemsCurrentCard: (n) => {
-      const { itemsOnboarding: o } = n.onboardings;
-      return o.config[o.cardIndex];
-    },
-    getRecommendationStrategyCurrentCard: (n) => {
-      const { recommendationStrategyOnboarding: o } = n.onboardings;
-      return o.config[o.cardIndex];
+      const { itemsOnboarding: i } = n.onboardings;
+      return i.config[i.cardIndex];
     },
-    shouldShowOnboarding: (n) => (o) => {
-      const i = n.userModalState.Guido;
-      return o === "newVersionPopup" && (i != null && i.genericOnboarding) ? !1 : i ? !i[o] : !0;
+    shouldShowOnboarding: (n) => (i) => {
+      const o = n.userModalState.Guido;
+      return i === "newVersionPopup" && (o != null && o.genericOnboarding) ? !1 : o ? !o[i] : !0;
     }
   },
   actions: {
     closeOtherOnboardings(n) {
-      Object.keys(this.onboardings).forEach((o) => {
-        const i = o;
-        i !== n && this.onboardings[i].isActive && (this.onboardings[i].isActive = !1, this.onboardings[i].cardIndex = 0, this.onboardings[i].config = []);
+      Object.keys(this.onboardings).forEach((i) => {
+        const o = i;
+        o !== n && this.onboardings[o].isActive && (this.onboardings[o].isActive = !1, this.onboardings[o].cardIndex = 0, this.onboardings[o].config = []);
       });
     },
     start(n) {
@@ -76,12 +71,12 @@ const t = () => ({
     previous(n) {
       this.onboardings[n].cardIndex > 0 && this.onboardings[n].cardIndex--;
     },
-    updateCardPosition(n, o, i) {
-      const r = this.onboardings[n].config[o];
-      r && (r.top = i.top, r.position = i.position);
+    updateCardPosition(n, i, o) {
+      const r = this.onboardings[n].config[i];
+      r && (r.top = o.top, r.position = o.position);
     },
-    setConfig(n, o) {
-      this.onboardings[n].config = o ?? [], this.onboardings[n].cardIndex >= this.onboardings[n].config.length && (this.onboardings[n].cardIndex = 0);
+    setConfig(n, i) {
+      this.onboardings[n].config = i ?? [], this.onboardings[n].cardIndex >= this.onboardings[n].config.length && (this.onboardings[n].cardIndex = 0);
     },
     async onDiscoverNowClicked() {
       await this.setUserModalState("newVersionPopup", "true", "Guido"), await this.setUserModalState("genericOnboarding", "true", "Guido"), this.start("genericOnboarding");
@@ -98,16 +93,16 @@ const t = () => ({
     async fetchUserModalState() {
       if (this.isFetched)
         return;
-      const { fetchUserModalState: n } = e();
+      const { fetchUserModalState: n } = s();
       try {
-        const o = await n();
-        this.userModalState = o, this.isFetched = !0;
+        const i = await n();
+        this.userModalState = i, this.isFetched = !0;
       } catch {
       }
     },
-    async setUserModalState(n, o, i) {
-      const { setUserModalState: r } = e();
-      await r(n, o, i), this.isFetched = !1, await this.fetchUserModalState();
+    async setUserModalState(n, i, o) {
+      const { setUserModalState: r } = s();
+      await r(n, i, o), this.isFetched = !1, await this.fetchUserModalState();
     }
   }
 });

package/dist/stores/save-validation.js

@@ -0,0 +1,30 @@
+import { defineStore as n } from "pinia";
+function i(e) {
+  const t = /* @__PURE__ */ new Set();
+  return e.filter((r) => {
+    const s = JSON.stringify([r.rule, r.message, r.detail ?? ""]);
+    return t.has(s) ? !1 : (t.add(s), !0);
+  });
+}
+const o = n("guidoSaveValidation", {
+  state: () => ({
+    errors: [],
+    isDrawerOpen: !1,
+    intent: null
+  }),
+  getters: {
+    errorCount: (e) => e.errors.length
+  },
+  actions: {
+    open(e, t) {
+      this.errors = i(e), this.intent = t, this.isDrawerOpen = !0;
+    },
+    // Errors are retained so rows don't blank during the ~300ms close animation.
+    close() {
+      this.isDrawerOpen = !1;
+    }
+  }
+});
+export {
+  o as useSaveValidationStore
+};

package/dist/utils/genericUtil.js

@@ -1,69 +1,78 @@
-const o = (t) => {
-  const a = t.value.match(/\{\{([^}]+)\}\}/)[1].split("|").map((l) => l.trim()), [s] = a, r = {
+import { formatToLiquidFilter as b, quoteArgument as y, liquidFilterToFormat as h } from "./liquidDynamicContent.js";
+const g = (t) => {
+  if (!t.includes("="))
+    return null;
+  const [r, e] = t.split("=");
+  return { key: r.trim(), value: e.trim() };
+}, c = "default:", f = (t) => {
+  if (!t.startsWith(c))
+    return t;
+  const r = t.slice(c.length).trim(), e = (l) => r.length >= 2 && r.startsWith(l) && r.endsWith(l);
+  return e('"') || e("'") ? r.slice(1, -1) : r;
+}, k = (t) => {
+  const e = t.value.match(/\{\{([^}]+)\}\}/)[1].split("|").map((a) => a.trim()), [l] = e, s = {
     text: t.label,
-    value: s || ""
+    value: l || ""
   };
-  if (a.length >= 2) {
-    const [, l, e] = a;
-    if (l.startsWith("default:")) {
-      let n = l.slice(8).trim();
-      n.startsWith('"') && n.endsWith('"') && (n = n.slice(1, -1)), r.fallback = n;
-    } else {
-      const n = l.includes("=") ? { key: l.split("=")[0].trim(), value: l.split("=")[1].trim() } : null;
-      n ? r.format = n : e || (r.fallback = l), e && (r.fallback = e);
+  if (e.length >= 2) {
+    const [, a, n] = e;
+    if (a.startsWith(c))
+      s.fallback = f(a);
+    else {
+      const o = h(a) ?? g(a);
+      o ? s.format = o : n || (s.fallback = a), n && (s.fallback = f(n));
     }
   }
-  return r;
-}, f = (t, c = !1) => t.map((a) => {
-  if (a.format)
-    return {
-      label: `${a.text} | ${a.format.key}=${a.format.value}`,
-      value: `{{${a.value}|${a.format.key}=${a.format.value}}}`
-    };
-  if (c) {
-    if (!a.fallback)
-      return {
-        label: a.text,
-        value: `{{ ${a.value} }}`
-      };
-    const r = !Number.isNaN(Number(a.fallback)) && a.fallback.trim() !== "" ? a.fallback : `"${a.fallback}"`;
-    return {
-      label: `${a.text} | ${a.fallback}`,
-      value: `{{ ${a.value} | default: ${r} }}`
-    };
-  }
+  return s;
+}, p = (t) => {
+  const e = !Number.isNaN(Number(t)) && t.trim() !== "" ? t : y(t);
+  return e === null ? null : `${c} ${e}`;
+}, v = (t) => {
+  const r = t.format ? b(t.format) : null, e = t.fallback ? p(t.fallback) : null, l = [t.value, r, e].filter(Boolean);
   return {
-    label: a.fallback ? `${a.text} | ${a.fallback}` : a.text,
-    value: a.fallback ? `{{${a.value}|${a.fallback}}}` : `{{${a.value}}}`
+    label: [t.text, r, e && t.fallback].filter(Boolean).join(" | "),
+    value: `{{ ${l.join(" | ")} }}`
   };
-}), b = (t) => {
-  const c = [], a = /* @__PURE__ */ new Set(), s = (l) => {
-    Array.isArray(l) && l.forEach((e) => {
-      const n = [...e.children ?? [], ...e.select_items ?? []];
-      if (n.length > 0) {
-        s(n);
+}, i = (t, r = !1) => t.map((e) => r ? v(e) : e.format ? {
+  label: `${e.text} | ${e.format.key}=${e.format.value}`,
+  value: `{{${e.value}|${e.format.key}=${e.format.value}}}`
+} : {
+  label: e.fallback ? `${e.text} | ${e.fallback}` : e.text,
+  value: e.fallback ? `{{${e.value}|${e.fallback}}}` : `{{${e.value}}}`
+}), $ = (t) => {
+  const r = [], e = /* @__PURE__ */ new Set(), l = (a) => {
+    Array.isArray(a) && a.forEach((n) => {
+      const o = [...n.children ?? [], ...n.select_items ?? []];
+      if (o.length > 0) {
+        l(o);
         return;
       }
-      const u = e.text || e.tag_text;
-      u && e.value && !a.has(e.value) && (a.add(e.value), c.push({ text: u, value: e.value }));
+      const u = n.text || n.tag_text;
+      u && n.value && !e.has(n.value) && (e.add(n.value), r.push({ text: u, value: n.value }));
     });
-  }, [r] = Object.values(t ?? {});
-  return s(r), c;
-}, i = (t, c, a = !1) => {
-  const s = new Set(t.map((l) => l.value)), r = c.filter((l) => s.has(l.value) ? !1 : (s.add(l.value), !0));
+  }, [s] = Object.values(t ?? {});
+  return l(s), r;
+}, d = (t, r, e = !1) => {
+  const l = new Set(t.map((a) => a.value)), s = r.filter((a) => l.has(a.value) ? !1 : (l.add(a.value), !0));
   return [
-    ...f(t, a),
-    ...f(r, a)
+    ...i(t, e),
+    ...i(s, e)
   ];
-}, v = () => {
+}, F = () => {
   var t;
   return ((t = document.head.querySelector('meta[name="csrf-token"]')) == null ? void 0 : t.getAttribute("content")) ?? "";
-}, k = (t) => typeof t == "string" ? t : typeof t == "number" ? String(t) : "";
+}, T = (t) => typeof t == "string" ? t : typeof t == "number" ? String(t) : "", x = (t) => {
+  if (t === null || typeof t != "object" || Array.isArray(t))
+    return !1;
+  const r = Object.getPrototypeOf(t);
+  return r === Object.prototype || r === null;
+};
 export {
-  k as asText,
-  i as buildMergeTagEntries,
-  f as dynamicContentToMergeTags,
-  b as flattenDynamicContentList,
-  v as getCsrfToken,
-  o as mergeTagToDynamicContent
+  T as asText,
+  d as buildMergeTagEntries,
+  i as dynamicContentToMergeTags,
+  $ as flattenDynamicContentList,
+  F as getCsrfToken,
+  x as isPlainObject,
+  k as mergeTagToDynamicContent
 };

package/dist/utils/liquidDynamicContent.js

@@ -0,0 +1,15 @@
+const E = "time-format", r = "date", u = new RegExp(`^${r}\\s*:\\s*(?:"([^"]*)"|'([^']*)')$`), s = /%[-_0^#]?\d*[a-zA-Z%]/, c = new RegExp(s, "g"), l = /\b(?:Y{2,4}|M{2,4}|D{1,4}|d{3,4}|H{2}|h{2}|m{2}|s{2}|S{1,3}|A|a)\b/, T = (t) => t.includes('"') ? t.includes("'") ? null : `'${t}'` : `"${t}"`, i = (t) => s.test(t) && !l.test(t.replace(c, "")), R = (t) => {
+  if (t.key !== E || !i(t.value ?? ""))
+    return null;
+  const n = T(t.value);
+  return n === null ? null : `${r}: ${n}`;
+}, _ = (t) => {
+  const [, n, o] = t.match(u) ?? [], e = n ?? o;
+  return e ? { key: E, value: e } : null;
+};
+export {
+  E as TIME_FORMAT_KEY,
+  R as formatToLiquidFilter,
+  _ as liquidFilterToFormat,
+  T as quoteArgument
+};