@useinsider/guido 2.1.0-beta.fa3bd95 → 2.1.0-beta.fc58a17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/components/organisms/onboarding/GenericOnboarding.vue.js +1 -1
  2. package/dist/components/organisms/onboarding/GenericOnboarding.vue2.js +1 -1
  3. package/dist/components/organisms/onboarding/TextBlockOnboarding.vue.js +1 -1
  4. package/dist/components/organisms/onboarding/TextBlockOnboarding.vue2.js +2 -2
  5. package/dist/components/organisms/unsubscribe/UnsubscribePageSelection.vue.js +1 -1
  6. package/dist/components/organisms/unsubscribe/UnsubscribePageSelection.vue2.js +19 -19
  7. package/dist/composables/useStripo.js +25 -23
  8. package/dist/composables/useVersionHistoryApi.js +1 -1
  9. package/dist/config/i18n/en/index.js +11 -0
  10. package/dist/config/i18n/en/labels.json.js +7 -0
  11. package/dist/config/i18n/en/toasters.json.js +56 -0
  12. package/dist/config/i18n/en/tooltips.json.js +82 -0
  13. package/dist/config/i18n/index.js +7 -0
  14. package/dist/config/migrator/itemsBlockMigrator.js +65 -64
  15. package/dist/extensions/Blocks/Unsubscribe/block.js +29 -29
  16. package/dist/extensions/Blocks/Unsubscribe/control.js +12 -9
  17. package/dist/extensions/Blocks/Unsubscribe/elements/preview.js +13 -11
  18. package/dist/extensions/Blocks/Unsubscribe/styles.css.js +31 -1
  19. package/dist/guido.css +1 -1
  20. package/dist/services/stripoApi.js +20 -17
  21. package/dist/src/config/i18n/en/index.d.ts +1 -0
  22. package/dist/src/config/i18n/index.d.ts +16 -0
  23. package/dist/src/extensions/Blocks/Unsubscribe/control.d.ts +1 -0
  24. package/dist/static/styles/components/notification.css.js +18 -0
  25. package/dist/static/styles/components/tools.css.js +6 -2
  26. package/dist/static/styles/variables.css.js +2 -0
  27. package/dist/static/templates/empty/index.html.js +74 -0
  28. package/dist/static/templates/empty/style.css.js +779 -0
  29. package/dist/stores/unsubscribe.js +37 -34
  30. package/package.json +1 -1
@@ -1,8 +1,8 @@
1
- var B = Object.defineProperty;
2
- var U = (e, t, r) => t in e ? B(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
3
- var M = (e, t, r) => U(e, typeof t != "symbol" ? t + "" : t, r);
4
- import { productPairs as v } from "../../extensions/Blocks/Items/enums/productEnums.js";
5
- import { ItemInCartOptions as E, DefaultConfigValues as g, SETTINGS_ENUMS as u } from "../../extensions/Blocks/Items/enums/settingsEnums.js";
1
+ var v = Object.defineProperty;
2
+ var B = (e, t, r) => t in e ? v(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
3
+ var M = (e, t, r) => B(e, typeof t != "symbol" ? t + "" : t, r);
4
+ import { productPairs as U } from "../../extensions/Blocks/Items/enums/productEnums.js";
5
+ import { ItemInCartOptions as T, DefaultConfigValues as g, SETTINGS_ENUMS as u } from "../../extensions/Blocks/Items/enums/settingsEnums.js";
6
6
  import { getDefaultTemplate as K } from "../../extensions/Blocks/Items/template.js";
7
7
  const w = {
8
8
  img: {
@@ -85,18 +85,19 @@ function q(e) {
85
85
  }[e] || u.ITEMS_TYPE.CART_ITEMS : u.ITEMS_TYPE.CART_ITEMS;
86
86
  }
87
87
  function R(e) {
88
- const t = (a, o) => a == null ? o : a === "1" || a === "true", r = (a, o) => a || o, c = e["data-type"] || e["data-source"], i = q(c);
89
- let n = e["data-cart_items_select_control_value"] || g.cartItemsSelectControlValue;
90
- if (n && !n.includes("{{") && /^\d+$/.test(n)) {
91
- const a = parseInt(n) - 1, o = E[i];
92
- o && o[a] && (n = o[a].value);
88
+ var a;
89
+ const t = (_, c) => _ == null ? c : _ === "1" || _ === "true", r = (_, c) => _ || c, l = e["data-type"] || e["data-source"], i = q(l), n = T[i];
90
+ let o = e["data-cart_items_select_control_value"] || ((a = n == null ? void 0 : n[0]) == null ? void 0 : a.value) || g.cartItemsSelectControlValue;
91
+ if (o && !o.includes("{{") && /^\d+$/.test(o)) {
92
+ const _ = parseInt(o) - 1, c = T[i];
93
+ c && c[_] && (o = c[_].value);
93
94
  }
94
95
  return {
95
96
  initialized: !0,
96
97
  blockInstanceId: r(e["data-block-instance-id"], F()),
97
98
  source: i,
98
99
  type: i,
99
- itemsSelectValue: n,
100
+ itemsSelectValue: o,
100
101
  orientation: e["data-card_orientation_control_value"] || u.ORIENTATION.VERTICAL,
101
102
  nameTrimming: t(e["data-product_name_control_trim"], !0),
102
103
  priceHideDiscount: t(e["data-product_price_control_nodup"], !0),
@@ -154,36 +155,36 @@ class V {
154
155
  try {
155
156
  let r = this.removeJinjaConditionals(t);
156
157
  r = this.replaceTemplateVariables(r);
157
- const c = this.parser.parseFromString(r, "text/html"), i = c.querySelectorAll(
158
+ const l = this.parser.parseFromString(r, "text/html"), i = l.querySelectorAll(
158
159
  "td.esd-cart-items-block, td.esd-browsed-items-block, td.esd-purchased-items-block"
159
160
  );
160
161
  return i.length === 0 ? (console.warn("ItemsBlockMigrator: No blocks found with items block selectors"), r) : (i.forEach((n) => {
161
- const a = this.extractConfiguration(n), o = K({
162
- orientation: a.orientation,
163
- itemsType: a.itemsType,
164
- itemId: a.itemId,
165
- currencySymbol: a.currencySymbol,
166
- currencyLocation: a.currencyLocation,
167
- formattedPrice: a.formattedPrice,
168
- configBlockAttributes: a.configBlockAttributes,
162
+ const o = this.extractConfiguration(n), a = K({
163
+ orientation: o.orientation,
164
+ itemsType: o.itemsType,
165
+ itemId: o.itemId,
166
+ currencySymbol: o.currencySymbol,
167
+ currencyLocation: o.currencyLocation,
168
+ formattedPrice: o.formattedPrice,
169
+ configBlockAttributes: o.configBlockAttributes,
169
170
  migrate: !0,
170
- nameStyles: a.nameStyles,
171
- buttonStyles: a.buttonStyles,
172
- priceStyles: a.priceStyles,
173
- originalPriceStyles: a.originalPriceStyles,
174
- quantityStyles: a.quantityStyles,
175
- nodeConfig: R(a.configBlockAttributes)
176
- }), l = this.parser.parseFromString(
177
- `<table><tbody><tr>${o}</tr></tbody></table>`,
171
+ nameStyles: o.nameStyles,
172
+ buttonStyles: o.buttonStyles,
173
+ priceStyles: o.priceStyles,
174
+ originalPriceStyles: o.originalPriceStyles,
175
+ quantityStyles: o.quantityStyles,
176
+ nodeConfig: R(o.configBlockAttributes)
177
+ }), c = this.parser.parseFromString(
178
+ `<table><tbody><tr>${a}</tr></tbody></table>`,
178
179
  "text/html"
179
180
  ).querySelector("td");
180
- if (l && n.parentNode) {
181
- const f = R(a.configBlockAttributes);
182
- l.setAttribute("esd-ext-config", JSON.stringify(f));
183
- const d = l.querySelector("esd-config-block");
184
- d && d.remove(), n.parentNode.replaceChild(l, n);
181
+ if (c && n.parentNode) {
182
+ const f = R(o.configBlockAttributes);
183
+ c.setAttribute("esd-ext-config", JSON.stringify(f));
184
+ const d = c.querySelector("esd-config-block");
185
+ d && d.remove(), n.parentNode.replaceChild(c, n);
185
186
  }
186
- }), c.documentElement.outerHTML);
187
+ }), l.documentElement.outerHTML);
187
188
  } catch (r) {
188
189
  return console.error("ItemsBlockMigrator failed:", r), t;
189
190
  }
@@ -196,14 +197,14 @@ class V {
196
197
  */
197
198
  extractConfiguration(t) {
198
199
  var C, D, P;
199
- const r = ((C = t.querySelector("[data-type]")) == null ? void 0 : C.getAttribute("data-type")) || "CART_ITEMS", c = ((D = t.querySelector("[data-number]")) == null ? void 0 : D.getAttribute("data-number")) || "1", i = parseInt(c) - 1, n = E[r], a = ((P = n == null ? void 0 : n[i]) == null ? void 0 : P.value) || n[0].value, o = t.querySelector('[product-attr="price"]'), _ = (o == null ? void 0 : o.getAttribute("data-currency_symbol")) || "USD", f = ((o == null ? void 0 : o.getAttribute("data-curency")) || "before") === "after" ? "1" : "0", d = (o == null ? void 0 : o.getAttribute("data-formated")) !== "false", s = this.extractConfigBlockAttributes(t, r, c), S = s["data-card_orientation_control_value"];
200
+ const r = ((C = t.querySelector("[data-type]")) == null ? void 0 : C.getAttribute("data-type")) || "CART_ITEMS", l = ((D = t.querySelector("[data-number]")) == null ? void 0 : D.getAttribute("data-number")) || "1", i = parseInt(l) - 1, n = T[r], o = ((P = n == null ? void 0 : n[i]) == null ? void 0 : P.value) || n[0].value, a = t.querySelector('[product-attr="price"]'), _ = (a == null ? void 0 : a.getAttribute("data-currency_symbol")) || "USD", f = ((a == null ? void 0 : a.getAttribute("data-curency")) || "before") === "after" ? "1" : "0", d = (a == null ? void 0 : a.getAttribute("data-formated")) !== "false", s = this.extractConfigBlockAttributes(t, r, l), S = s["data-card_orientation_control_value"];
200
201
  let b;
201
202
  S ? b = S === "horizontal" ? "horizontal" : "vertical" : b = t.querySelector('[colspan="2"]') !== null ? "vertical" : "horizontal";
202
- const p = t.querySelector('a[product-attr="name"]'), I = (p == null ? void 0 : p.getAttribute("style")) || void 0, y = t.querySelector('a[product-attr="button"]'), m = (y == null ? void 0 : y.getAttribute("style")) || void 0, h = (o == null ? void 0 : o.getAttribute("style")) || void 0, T = t.querySelector("p.original-price"), k = (T == null ? void 0 : T.getAttribute("style")) || void 0, A = t.querySelector('[product-attr="quantity"]'), L = (A == null ? void 0 : A.getAttribute("style")) || void 0;
203
+ const p = t.querySelector('a[product-attr="name"]'), I = (p == null ? void 0 : p.getAttribute("style")) || void 0, y = t.querySelector('a[product-attr="button"]'), m = (y == null ? void 0 : y.getAttribute("style")) || void 0, h = (a == null ? void 0 : a.getAttribute("style")) || void 0, A = t.querySelector("p.original-price"), k = (A == null ? void 0 : A.getAttribute("style")) || void 0, E = t.querySelector('[product-attr="quantity"]'), L = (E == null ? void 0 : E.getAttribute("style")) || void 0;
203
204
  return {
204
205
  orientation: b,
205
206
  itemsType: r,
206
- itemId: a,
207
+ itemId: o,
207
208
  currencySymbol: _,
208
209
  currencyLocation: f,
209
210
  formattedPrice: d,
@@ -222,27 +223,27 @@ class V {
222
223
  * @param itemsType - The type of items (CART_ITEMS, BROWSED_ITEMS, PURCHASED_ITEMS)
223
224
  * @param itemNumber - The item number (1-based index)
224
225
  */
225
- extractConfigBlockAttributes(t, r, c) {
226
+ extractConfigBlockAttributes(t, r, l) {
226
227
  const i = t.querySelector("esd-config-block"), n = {};
227
228
  if (!i)
228
229
  return this.getDefaultConfigBlockAttributes();
229
- if (Array.from(i.attributes).forEach((o) => {
230
- o.name.startsWith("data-") && (n[o.name] = o.value);
230
+ if (Array.from(i.attributes).forEach((a) => {
231
+ a.name.startsWith("data-") && (n[a.name] = a.value);
231
232
  }), n["data-cart_items_select_control_value"]) {
232
- const o = n["data-cart_items_select_control_value"];
233
- if (/^\d+$/.test(o)) {
234
- const _ = parseInt(o) - 1, l = E[r];
235
- l && l[_] && (n["data-cart_items_select_control_value"] = l[_].value);
233
+ const a = n["data-cart_items_select_control_value"];
234
+ if (/^\d+$/.test(a)) {
235
+ const _ = parseInt(a) - 1, c = T[r];
236
+ c && c[_] && (n["data-cart_items_select_control_value"] = c[_].value);
236
237
  }
237
238
  }
238
239
  if (n["data-product_price_control_curency"]) {
239
- const o = n["data-product_price_control_curency"];
240
- let _ = o;
241
- o === "before" ? _ = "0" : o === "after" && (_ = "1"), n["data-product_price_control_curency"] = _, n["data-product_price_currency_location"] = _;
240
+ const a = n["data-product_price_control_curency"];
241
+ let _ = a;
242
+ a === "before" ? _ = "0" : a === "after" && (_ = "1"), n["data-product_price_control_curency"] = _, n["data-product_price_currency_location"] = _;
242
243
  }
243
244
  (!n["data-product_price_control_currency_symbol"] || n["data-product_price_control_currency_symbol"].trim() === "") && (n["data-product_price_control_currency_symbol"] = "USD");
244
- const a = { ...this.getDefaultConfigBlockAttributes(), ...n };
245
- return a["data-type"] = r, a["data-source"] = r, a["data-product_image_link"] = $(r, c), a["data-product_button_link"] = x(r, c), a;
245
+ const o = { ...this.getDefaultConfigBlockAttributes(), ...n };
246
+ return o["data-type"] = r, o["data-source"] = r, o["data-product_image_link"] = $(r, l), o["data-product_button_link"] = x(r, l), o;
246
247
  }
247
248
  /**
248
249
  * Returns default esd-config-block attributes based on the old template structure
@@ -302,15 +303,15 @@ class V {
302
303
  * contains display condition Jinja scripts that should NOT be removed.
303
304
  */
304
305
  removeJinjaConditionals(t) {
305
- const r = "__ESD_DISPLAY_CONDITIONS_PLACEHOLDER__", c = t.match(/esd-custom-display-conditions="[^"]*"/);
306
- let i = c ? t.replace(c[0], r) : t;
306
+ const r = "__ESD_DISPLAY_CONDITIONS_PLACEHOLDER__", l = t.match(/esd-custom-display-conditions="[^"]*"/);
307
+ let i = l ? t.replace(l[0], r) : t;
307
308
  return i = i.replace(
308
309
  /\{%\s*if\s+(ins_apr|browsed_item|purchased_item)_total_product_kind\s*(&gt;|>)\s*\d+\s*%\}/g,
309
310
  ""
310
311
  ), i = i.replace(
311
312
  /\{%\s*if\s+(ins_apr|browsed_item|purchased_item)_price_\d+\s*(!&#61;|!=)\s*\1_originalprice_\d+\s*%\}/g,
312
313
  ""
313
- ), i = i.replace(/\{%\s*endif\s*%\}/g, ""), c && (i = i.replace(r, c[0])), i = i.replace(/\n\s*\n\s*\n/g, `
314
+ ), i = i.replace(/\{%\s*endif\s*%\}/g, ""), l && (i = i.replace(r, l[0])), i = i.replace(/\n\s*\n\s*\n/g, `
314
315
 
315
316
  `), i;
316
317
  }
@@ -324,26 +325,26 @@ class V {
324
325
  * - {{purchased_item_formattedprice_5}} → '1,490.49' (PURCHASED_ITEMS)
325
326
  */
326
327
  replaceTemplateVariables(t) {
327
- const { PAIRS_FOR_EXTENSION: r } = v;
328
- return t.replace(/{{([^}]+)}}/g, (c, i) => {
328
+ const { PAIRS_FOR_EXTENSION: r } = U;
329
+ return t.replace(/{{([^}]+)}}/g, (l, i) => {
329
330
  const n = i.match(/^(ins_apr|browsed_item|purchased_item)_([a-z_]+)_(\d+)$/);
330
331
  if (!n)
331
- return c;
332
- const [, a, o, _] = n, l = O[a];
333
- if (!l)
334
- return console.warn(`Unknown variable prefix: ${a}`), c;
335
- const f = w[o];
332
+ return l;
333
+ const [, o, a, _] = n, c = O[o];
334
+ if (!c)
335
+ return console.warn(`Unknown variable prefix: ${o}`), l;
336
+ const f = w[a];
336
337
  if (!f)
337
- return console.warn(`Unknown variable suffix mapping for: ${o}`), c;
338
- const { pairsKey: d, defaultKey: s, isArray: S } = f, p = r[d][l];
338
+ return console.warn(`Unknown variable suffix mapping for: ${a}`), l;
339
+ const { pairsKey: d, defaultKey: s, isArray: S } = f, p = r[d][c];
339
340
  if (!p)
340
- return console.warn(`No data found for: ${d}.${l}`), c;
341
+ return console.warn(`No data found for: ${d}.${c}`), l;
341
342
  if (S) {
342
343
  const y = parseInt(_) - 1, m = p[s];
343
- return Array.isArray(m) && m[y] ? m[y] : (console.warn(`Array value not found: ${d}.${l}.${s}[${y}]`), c);
344
+ return Array.isArray(m) && m[y] ? m[y] : (console.warn(`Array value not found: ${d}.${c}.${s}[${y}]`), l);
344
345
  }
345
346
  const I = p[s];
346
- return I !== void 0 ? String(I) : (console.warn(`Default value not found: ${d}.${l}.${s}`), c);
347
+ return I !== void 0 ? String(I) : (console.warn(`Default value not found: ${d}.${c}.${s}`), l);
347
348
  });
348
349
  }
349
350
  }
@@ -1,17 +1,17 @@
1
1
  var d = Object.defineProperty;
2
- var _ = (n, i, e) => i in n ? d(n, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[i] = e;
3
- var u = (n, i, e) => _(n, typeof i != "symbol" ? i + "" : i, e);
2
+ var h = (n, i, e) => i in n ? d(n, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[i] = e;
3
+ var u = (n, i, e) => h(n, typeof i != "symbol" ? i + "" : i, e);
4
4
  import { PAGE_TYPES as E } from "../../../enums/unsubscribe.js";
5
5
  import { useUnsubscribeStore as c } from "../../../stores/unsubscribe.js";
6
- import { Block as h, BlockCompositionType as S, ModificationDescription as b } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
6
+ import { Block as _, BlockCompositionType as S, ModificationDescription as b } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
7
7
  import { getDefaultTemplate as L } from "./template.js";
8
8
  import { UNSUBSCRIBE_EVENTS as a, DATA_ATTRIBUTES as o } from "./utils/constants.js";
9
9
  import { parsePageList as p } from "./utils/utils.js";
10
- const g = "unsubscribe-block", v = 'a[data-unsubscribe-link="true"]', f = ".unsubscribe-block-v2", B = "{{ins-unsubscribe-link}}", T = {
10
+ const v = "unsubscribe-block", g = 'a[data-unsubscribe-link="true"]', f = ".unsubscribe-block-v2", T = "{{ins-unsubscribe-link}}", B = {
11
11
  [E.GLOBAL_UNSUBSCRIBE]: "{{ins-global-unsubscribe-link}}",
12
12
  [E.SUBSCRIPTION_PREFERENCE_CENTER]: "{{ins-preferences-unsubscribe-link}}"
13
13
  };
14
- class R extends h {
14
+ class R extends _ {
15
15
  constructor() {
16
16
  super();
17
17
  u(this, "selectEventListener", null);
@@ -19,7 +19,7 @@ class R extends h {
19
19
  u(this, "currentNode");
20
20
  }
21
21
  getId() {
22
- return g;
22
+ return v;
23
23
  }
24
24
  getIcon() {
25
25
  return "unsubscribe-icon";
@@ -47,8 +47,8 @@ class R extends h {
47
47
  }
48
48
  _setupSelectEventListener() {
49
49
  this._removeSelectEventListener(), this.selectEventListener = (e) => {
50
- const s = e, { collectionType: t, selectedPages: r } = s.detail;
51
- this._updateBlock(t, r.join(","));
50
+ const r = e, { collectionType: s, selectedPages: t } = r.detail;
51
+ this._updateBlock(s, t.join(","));
52
52
  }, document.addEventListener(a.SELECT, this.selectEventListener);
53
53
  }
54
54
  _removeSelectEventListener() {
@@ -74,17 +74,17 @@ class R extends h {
74
74
  _removeEventListeners() {
75
75
  this._removeSelectEventListener(), this._removeCancelEventListener();
76
76
  }
77
- _updateBlock(e, s) {
77
+ _updateBlock(e, r) {
78
78
  if (!this.currentNode || !("querySelector" in this.currentNode))
79
79
  return;
80
- const t = this.currentNode.querySelector(v);
81
- if (!t)
80
+ const s = this.currentNode.querySelector(g);
81
+ if (!s)
82
82
  return;
83
- const r = this._getMergeTag(e);
84
- this.api.getDocumentModifier().modifyHtml(t).setAttribute("href", r).apply(new b(`Updated unsubscribe link to ${r}`)), this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(o.PAGE_TYPE, e.toString()).setAttribute(o.PAGE_LIST, s).apply(new b("Updated unsubscribe block metadata"));
83
+ const t = this._getMergeTag(e);
84
+ this.api.getDocumentModifier().modifyHtml(s).setAttribute("href", t).apply(new b(`Updated unsubscribe link to ${t}`)), this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(o.PAGE_TYPE, e.toString()).setAttribute(o.PAGE_LIST, r).apply(new b("Updated unsubscribe block metadata"));
85
85
  }
86
86
  _getMergeTag(e) {
87
- return T[e] ?? B;
87
+ return B[e] ?? T;
88
88
  }
89
89
  _openDrawer() {
90
90
  if (!(this.currentNode && this.currentNode.getAttribute("data-unsubscribe-page-type")))
@@ -97,24 +97,24 @@ class R extends h {
97
97
  }
98
98
  _checkExistingBlocks() {
99
99
  const e = c();
100
- e.isGlobalUnsubscribeDisabled = !1, e.isSubscriptionPreferencesCenterDisabled = !1, this.api.getDocumentRoot().querySelectorAll(f).forEach((t) => {
101
- if ("getAttribute" in t) {
102
- const r = t.getAttribute(o.PAGE_TYPE);
103
- if (r) {
104
- const l = Number(r);
100
+ e.isGlobalUnsubscribeDisabled = !1, e.isSubscriptionPreferencesCenterDisabled = !1, this.api.getDocumentRoot().querySelectorAll(f).forEach((s) => {
101
+ if ("getAttribute" in s) {
102
+ const t = s.getAttribute(o.PAGE_TYPE);
103
+ if (t) {
104
+ const l = Number(t);
105
105
  l === E.GLOBAL_UNSUBSCRIBE ? e.isGlobalUnsubscribeDisabled = !0 : l === E.SUBSCRIPTION_PREFERENCE_CENTER && (e.isSubscriptionPreferencesCenterDisabled = !0);
106
106
  }
107
107
  }
108
108
  });
109
109
  }
110
- _loadBlockState(e) {
110
+ async _loadBlockState(e) {
111
111
  if (!("getAttribute" in e))
112
112
  return;
113
- const s = e.getAttribute(o.PAGE_TYPE), t = e.getAttribute(o.PAGE_LIST);
114
- if (!s || !t)
113
+ const r = e.getAttribute(o.PAGE_TYPE), s = e.getAttribute(o.PAGE_LIST);
114
+ if (!r || !s)
115
115
  return;
116
- const r = c(), l = Number(s), m = p(t);
117
- r.setCollectionWithoutAutoSelection(l), r.loadSelectedTemplates(m);
116
+ const t = c(), l = Number(r), m = p(s);
117
+ await t.fetchTemplates(), t.setCollectionWithoutAutoSelection(l), t.loadSelectedTemplates(m);
118
118
  }
119
119
  _resetStoreState() {
120
120
  c().$reset();
@@ -122,14 +122,14 @@ class R extends h {
122
122
  _removeBlockTemplatesFromStore(e) {
123
123
  if (!("getAttribute" in e))
124
124
  return;
125
- const s = e.getAttribute(o.PAGE_LIST);
126
- if (!s)
125
+ const r = e.getAttribute(o.PAGE_LIST);
126
+ if (!r)
127
127
  return;
128
- const t = c(), r = p(s);
129
- t.removeUnsubscribePages(r);
128
+ const s = c(), t = p(r);
129
+ s.removeUnsubscribePages(t);
130
130
  }
131
131
  }
132
132
  export {
133
- g as UNSUBSCRIBE_BLOCK_ID,
133
+ v as UNSUBSCRIBE_BLOCK_ID,
134
134
  R as UnsubscribeBlock
135
135
  };
@@ -1,18 +1,18 @@
1
- var h = Object.defineProperty;
2
- var d = (a, s, e) => s in a ? h(a, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[s] = e;
3
- var u = (a, s, e) => d(a, typeof s != "symbol" ? s + "" : s, e);
1
+ var d = Object.defineProperty;
2
+ var h = (a, s, e) => s in a ? d(a, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[s] = e;
3
+ var u = (a, s, e) => h(a, typeof s != "symbol" ? s + "" : s, e);
4
4
  import { useUnsubscribeStore as l } from "../../../stores/unsubscribe.js";
5
5
  import { Control as T, UEAttr as i, UIElementType as n } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
6
6
  import { DATA_ATTRIBUTES as p } from "./utils/constants.js";
7
7
  import { parsePageList as _ } from "./utils/utils.js";
8
- const g = "ui-elements-unsubscribe", r = {
8
+ const v = "ui-elements-unsubscribe", r = {
9
9
  SELECT_BUTTON: "selectTemplateButton",
10
10
  PREV_BUTTON: "prevButton",
11
11
  NEXT_BUTTON: "nextButton",
12
12
  COUNTER_TEXT: "counterText",
13
13
  PREVIEW_IMAGE: "previewImage"
14
14
  };
15
- class N extends T {
15
+ class B extends T {
16
16
  constructor() {
17
17
  super(...arguments);
18
18
  u(this, "currentPreviewIndex", 0);
@@ -22,7 +22,7 @@ class N extends T {
22
22
  u(this, "lastParsedAttribute");
23
23
  }
24
24
  getId() {
25
- return g;
25
+ return v;
26
26
  }
27
27
  getTemplate() {
28
28
  return `
@@ -35,7 +35,7 @@ class N extends T {
35
35
  onTemplateNodeUpdated(e) {
36
36
  if (this.currentNode = e, "getAttribute" in this.currentNode) {
37
37
  const t = this.currentNode.getAttribute(p.PAGE_LIST);
38
- t && (t !== this.lastParsedAttribute && (this.currentPages = _(t), this.lastParsedAttribute = t, this.currentPreviewIndex = 0), this._updatePreview(), this._updateCounter());
38
+ t && (t !== this.lastParsedAttribute && (this.currentPages = _(t), this.lastParsedAttribute = t, this.currentPreviewIndex = 0), this._updateCounter(), this._loadAndUpdatePreview());
39
39
  }
40
40
  }
41
41
  onRender() {
@@ -73,6 +73,9 @@ class N extends T {
73
73
  _onNextClick() {
74
74
  this.currentPreviewIndex < this.totalTemplates - 1 && (this.currentPreviewIndex++, this._updatePreview(), this._updateCounter());
75
75
  }
76
+ async _loadAndUpdatePreview() {
77
+ await l().fetchTemplates(), this._updatePreview(), this._updateCounter();
78
+ }
76
79
  _updatePreview() {
77
80
  var e;
78
81
  if ((e = this.currentPages) != null && e.length)
@@ -162,6 +165,6 @@ class N extends T {
162
165
  }
163
166
  }
164
167
  export {
165
- g as UNSUBSCRIBE_CONTROL_ID,
166
- N as UnsubscribeControl
168
+ v as UNSUBSCRIBE_CONTROL_ID,
169
+ B as UnsubscribeControl
167
170
  };
@@ -1,12 +1,12 @@
1
- var r = Object.defineProperty;
2
- var n = (i, t, e) => t in i ? r(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
3
- var s = (i, t, e) => n(i, typeof t != "symbol" ? t + "" : t, e);
4
- import { UIElement as m } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
5
- const E = "unsubscribe-preview", l = "img", c = "Unsubscribe page preview";
6
- class o extends m {
1
+ var n = Object.defineProperty;
2
+ var m = (s, i, e) => i in s ? n(s, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[i] = e;
3
+ var r = (s, i, e) => m(s, typeof i != "symbol" ? i + "" : i, e);
4
+ import { UIElement as l } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
5
+ const E = "unsubscribe-preview", c = "img", a = "Unsubscribe page preview", g = "is-loaded";
6
+ class d extends l {
7
7
  constructor() {
8
8
  super(...arguments);
9
- s(this, "imgElement");
9
+ r(this, "imgElement");
10
10
  }
11
11
  getId() {
12
12
  return E;
@@ -14,19 +14,21 @@ class o extends m {
14
14
  getTemplate() {
15
15
  return `
16
16
  <div class="unsubscribe-preview-image-container">
17
+ <div class="unsubscribe-preview-loader"></div>
17
18
  <img
18
19
  src=""
19
- alt="${c}"
20
+ alt="${a}"
20
21
  class="unsubscribe-preview-image"
21
22
  />
22
23
  </div>
23
24
  `;
24
25
  }
25
26
  onRender(e) {
26
- this.imgElement = e.querySelector(l);
27
+ this.imgElement = e.querySelector(c);
27
28
  }
28
29
  setValue(e) {
29
- this.imgElement && (this.imgElement.src = e);
30
+ var t;
31
+ this.imgElement && (this.imgElement.src = e, (t = this.imgElement.parentElement) == null || t.classList.add(g));
30
32
  }
31
33
  getValue() {
32
34
  var e;
@@ -38,5 +40,5 @@ class o extends m {
38
40
  }
39
41
  export {
40
42
  E as PREVIEW_UI_ELEMENT_ID,
41
- o as PreviewUIElement
43
+ d as PreviewUIElement
42
44
  };
@@ -29,12 +29,42 @@ const n = `/* Unsubscribe Extension Styles */
29
29
  display: flex;
30
30
  align-items: center;
31
31
  justify-content: center;
32
+ position: relative;
32
33
  }
33
34
 
34
- .unsubscribe-preview-image {
35
+ .unsubscribe-preview-image-container .unsubscribe-preview-image {
35
36
  object-fit: cover;
36
37
  width: 100%;
37
38
  height: auto;
39
+ display: none;
40
+ }
41
+
42
+ .unsubscribe-preview-image-container.is-loaded .unsubscribe-preview-image {
43
+ display: block;
44
+ }
45
+
46
+ .unsubscribe-preview-image-container.is-loaded .unsubscribe-preview-loader {
47
+ display: none;
48
+ }
49
+
50
+ /* Loading shimmer */
51
+ .unsubscribe-preview-loader {
52
+ width: 100%;
53
+ height: 200px;
54
+ border-radius: 4px;
55
+ background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
56
+ background-size: 200% 100%;
57
+ animation: unsubscribe-shimmer 1.5s infinite;
58
+ }
59
+
60
+ @keyframes unsubscribe-shimmer {
61
+ 0% {
62
+ background-position: 200% 0;
63
+ }
64
+
65
+ 100% {
66
+ background-position: -200% 0;
67
+ }
38
68
  }
39
69
  `;
40
70
  export {
package/dist/guido.css CHANGED
@@ -1 +1 @@
1
- .gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-cd76c125] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-913a3417] .in-progress-wrapper__progress p span:last-child{display:none!important}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-64c52560]{gap:8px}.version-history__toolbar[data-v-64c52560]{gap:4px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.editor-actions[data-v-17dd4d8b]{gap:4px}.header-wrapper[data-v-5c02dcc7]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-16abb398]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-16abb398]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-16abb398]{height:calc(100vh - 75px)}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-a86fc486]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-a86fc486]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-a86fc486]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-a86fc486]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-a86fc486]{object-fit:cover;transform:scale(1)}[data-v-43c617a7] .guido__verion-history-view-option-selection-desktop svg,[data-v-43c617a7] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-43c617a7] .in-segments-wrapper__button_selected,[data-v-43c617a7] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-988f8da6]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-988f8da6]{min-height:504px}.iframe-wrapper[data-v-e0424e99]{width:258px}.iframe-scaled[data-v-e0424e99]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-d3c52b44] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}
1
+ .gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-cd76c125] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-913a3417] .in-progress-wrapper__progress p span:last-child{display:none!important}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-64c52560]{gap:8px}.version-history__toolbar[data-v-64c52560]{gap:4px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.editor-actions[data-v-17dd4d8b]{gap:4px}.header-wrapper[data-v-5c02dcc7]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-16abb398]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-16abb398]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-16abb398]{height:calc(100vh - 75px)}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-df672485]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-df672485]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-df672485]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-df672485]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-df672485]{object-fit:cover;transform:scale(1)}[data-v-43c617a7] .guido__verion-history-view-option-selection-desktop svg,[data-v-43c617a7] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-43c617a7] .in-segments-wrapper__button_selected,[data-v-43c617a7] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-988f8da6]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-988f8da6]{min-height:504px}.iframe-wrapper[data-v-e0424e99]{width:258px}.iframe-scaled[data-v-e0424e99]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-29b9af29] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-d073b1dc] .vueperslides__bullets{pointer-events:none!important}[data-v-d073b1dc] .vueperslides__parallax-wrapper{height:110px!important}
@@ -1,44 +1,47 @@
1
- import { useHttp as m } from "../composables/useHttp.js";
2
- import { useToaster as i } from "../composables/useToaster.js";
3
- import { MAX_DEFAULT_TEMPLATE_ID as p } from "../enums/defaults.js";
4
- const y = () => {
5
- const { get: r } = m(), { handleError: o } = i();
1
+ import { useHttp as l } from "../composables/useHttp.js";
2
+ import { useToaster as u } from "../composables/useToaster.js";
3
+ import { MAX_DEFAULT_TEMPLATE_ID as d } from "../enums/defaults.js";
4
+ import f from "../static/templates/empty/index.html.js";
5
+ import g from "../static/templates/empty/style.css.js";
6
+ const D = () => {
7
+ const { get: o } = l(), { handleError: a } = u();
6
8
  return {
7
9
  getToken: async () => {
8
10
  try {
9
- const t = Number(localStorage.getItem("ins-guido-test-instance")), { data: e } = await r(`/stripo/get-user-token?test=${t}`);
11
+ const t = Number(localStorage.getItem("ins-guido-test-instance")), { data: e } = await o(`/stripo/get-user-token?test=${t}`);
10
12
  return e.body.token;
11
13
  } catch (t) {
12
- return o(t, "Failed to fetch token"), "";
14
+ return a(t, "Failed to fetch token"), "";
13
15
  }
14
16
  },
15
17
  getCustomFonts: async () => {
16
18
  try {
17
- const { data: t = [] } = await r("/stripo/get-partner-custom-fonts");
19
+ const { data: t = [] } = await o("/stripo/get-partner-custom-fonts");
18
20
  return t.map((e) => ({
19
21
  ...e,
20
22
  active: !0
21
23
  }));
22
24
  } catch (t) {
23
- return o(t, "Failed to fetch custom fonts"), [];
25
+ return a(t, "Failed to fetch custom fonts"), [];
24
26
  }
25
27
  },
26
28
  getDefaultTemplate: async () => {
27
29
  const t = {
28
- html: "",
29
- css: ""
30
+ html: f,
31
+ css: g
30
32
  };
31
33
  try {
32
- const c = new URLSearchParams(window.location.search).get("default-template"), s = c ? parseInt(c) : 0, l = s >= 1 && s <= p ? s : 0, { data: n } = await r(
33
- `/stripo/default-template/${l}`
34
- ), a = typeof n == "string" ? JSON.parse(n) : n;
35
- return !a || typeof a != "object" || !("html" in a) || !("css" in a) ? t : a;
34
+ const e = new URLSearchParams(window.location.search), c = e.get("default-template"), p = e.get("master"), s = c ? parseInt(c) : 0, m = s >= 1 && s <= d ? s : 0;
35
+ if (!m && !p)
36
+ return t;
37
+ const i = `/stripo/default-template/${m}`, { data: n } = await o(i), r = typeof n == "string" ? JSON.parse(n) : n;
38
+ return !r || typeof r != "object" || !("html" in r) || !("css" in r) ? t : r;
36
39
  } catch (e) {
37
- return o(e, "Failed to fetch default template"), t;
40
+ return a(e, "Failed to fetch default template"), t;
38
41
  }
39
42
  }
40
43
  };
41
44
  };
42
45
  export {
43
- y as useStripoApi
46
+ D as useStripoApi
44
47
  };
@@ -0,0 +1 @@
1
+ export declare const en: Record<string, string>;
@@ -0,0 +1,16 @@
1
+ /**
2
+ * Stripo Editor Translation Overrides
3
+ *
4
+ * Custom translations for Stripo editor UI elements.
5
+ * Each language has its own folder with categorized JSON files.
6
+ *
7
+ * Reference: https://email-static.useinsider.com/guido/{version}/assets/i18n/en.json
8
+ * @module config/i18n
9
+ */
10
+ /**
11
+ * Combined locale patch for Stripo editor initialization.
12
+ * Maps language codes to their translation overrides.
13
+ */
14
+ export declare const localePatch: {
15
+ en: Record<string, string>;
16
+ };
@@ -17,6 +17,7 @@ export declare class UnsubscribeControl extends Control {
17
17
  private _onButtonClick;
18
18
  private _onPrevClick;
19
19
  private _onNextClick;
20
+ private _loadAndUpdatePreview;
20
21
  private _updatePreview;
21
22
  private _updateCounter;
22
23
  private _getPreview;
@@ -17,6 +17,24 @@ ue-notifications-container .alert-message-wrapper {
17
17
  padding: 16px 24px;
18
18
  }
19
19
 
20
+ ue-notifications-container .alert-message-wrapper.info,
21
+ ue-notifications-container .alert-message-wrapper.loader {
22
+ background-color: var(--guido-color-background-toaster-info) !important;
23
+ color: inherit;
24
+ }
25
+
26
+ .alert-message-wrapper .alert-message-main {
27
+ align-items: center;
28
+ }
29
+
30
+ ue-notifications-container ue-caption .caption {
31
+ color: var(--guido-color-white) !important;
32
+ }
33
+
34
+ ue-block-thumb-hint {
35
+ text-align: left;
36
+ }
37
+
20
38
  ue-notifications-container .alert-message-wrapper .alert-message-main .alert-message-content {
21
39
  width: calc(100% - 64px);
22
40
  }