@useinsider/guido 3.15.1-beta.6da4177 → 3.16.0-beta.20cd2fe

package/dist/components/organisms/onboarding/EditorTabBarOnboarding.vue2.js

@@ -0,0 +1,74 @@
+import { defineComponent as p, computed as d, watch as x } from "vue";
+import { useRibbonOffset as B } from "../../../composables/useRibbonOffset.js";
+import { useTranslations as m } from "../../../composables/useTranslations.js";
+import { useOnboardingStore as k } from "../../../stores/onboarding.js";
+import { InOnboard as T } from "@useinsider/design-system-vue";
+const y = /* @__PURE__ */ p({
+  __name: "EditorTabBarOnboarding",
+  setup(f) {
+    const n = "editorTabBarOnboarding", t = m(), i = k(), { getTopPosition: a } = B(), r = () => i.next(n), c = () => i.previous(n), s = () => void i.close(n), b = d(() => [
+      {
+        classes: "guido-tab-bar-onboarding",
+        right: "150px",
+        top: a(56),
+        position: "Right Top",
+        title: t("email-editor.onboarding-kebab-title"),
+        description: t("email-editor.onboarding-kebab-description"),
+        imageSource: "",
+        backButtonClick: () => {
+        },
+        nextButtonType: "text",
+        nextButtonText: t("action-builder.next"),
+        nextButtonClick: r
+      },
+      {
+        classes: "guido-tab-bar-onboarding",
+        right: "320px",
+        top: a(56),
+        position: "Right Top",
+        title: t("email-editor.onboarding-autosave-title"),
+        description: t("email-editor.onboarding-autosave-description"),
+        imageSource: "",
+        backButtonType: "text",
+        backButtonText: t("action-builder.back"),
+        backButtonClick: c,
+        nextButtonType: "text",
+        nextButtonText: t("action-builder.next"),
+        nextButtonClick: r
+      },
+      {
+        classes: "guido-tab-bar-onboarding",
+        right: "150px",
+        top: a(56),
+        position: "Right Top",
+        title: t("email-editor.onboarding-accessibility-title"),
+        description: t("email-editor.onboarding-accessibility-description"),
+        imageSource: "",
+        backButtonType: "text",
+        backButtonText: t("action-builder.back"),
+        backButtonClick: c,
+        nextButtonType: "text",
+        nextButtonText: t("action-builder.ok"),
+        nextButtonClick: s
+      }
+    ]), u = d(
+      () => i.onboardings.editorTabBarOnboarding.config.length > 0 && i.onboardings.editorTabBarOnboarding.isActive
+    ), g = () => {
+      var o, e;
+      (e = (o = i.getEditorTabBarCurrentCard) == null ? void 0 : o.nextButtonClick) == null || e.call(o);
+    }, l = () => {
+      var o, e;
+      (e = (o = i.getEditorTabBarCurrentCard) == null ? void 0 : o.backButtonClick) == null || e.call(o);
+    };
+    return x(
+      () => i.onboardings.editorTabBarOnboarding.isActive,
+      (o) => {
+        o && i.setConfig(n, b.value);
+      },
+      { immediate: !0 }
+    ), { __sfc: !0, ONBOARDING: n, trans: t, onboardingStore: i, getTopPosition: a, goNext: r, goBack: c, finish: s, onboardingCardsConfig: b, isVisible: u, handleNext: g, handleBack: l, InOnboard: T };
+  }
+});
+export {
+  y as default
+};

package/dist/components/organisms/onboarding/OnboardingWrapper.vue2.js

@@ -1,46 +1,55 @@
-import { defineComponent as b, computed as e, onMounted as O, watch as t } from "vue";
-import u from "./AMPOnboarding.vue.js";
-import v from "./GenericOnboarding.vue.js";
-import l from "./ItemsOnboarding.vue.js";
-import y from "./NewVersionPopup.vue.js";
-import S from "./TextBlockOnboarding.vue.js";
-import h from "./VersionHistoryOnboarding.vue.js";
-import { usePartner as w } from "../../../composables/usePartner.js";
-import { useEditorStore as P } from "../../../stores/editor.js";
-import { useOnboardingStore as _ } from "../../../stores/onboarding.js";
-import { usePreviewStore as A } from "../../../stores/preview.js";
-const G = /* @__PURE__ */ b({
+import { defineComponent as O, computed as a, onMounted as u, watch as e } from "vue";
+import l from "./AMPOnboarding.vue.js";
+import v from "./EditorTabBarOnboarding.vue.js";
+import y from "./GenericOnboarding.vue.js";
+import S from "./ItemsOnboarding.vue.js";
+import h from "./NewVersionPopup.vue.js";
+import w from "./TextBlockOnboarding.vue.js";
+import P from "./VersionHistoryOnboarding.vue.js";
+import { useConfig as A } from "../../../composables/useConfig.js";
+import { usePartner as T } from "../../../composables/usePartner.js";
+import { useEditorStore as _ } from "../../../stores/editor.js";
+import { useOnboardingStore as H } from "../../../stores/onboarding.js";
+import { usePreviewStore as B } from "../../../stores/preview.js";
+const j = /* @__PURE__ */ O({
   __name: "OnboardingWrapper",
   emits: ["onboarding-finished"],
-  setup(H, { emit: f }) {
-    const o = _(), r = P(), s = A(), { isTestPartner: a } = w(), p = e(() => r.isStripoInitialized), d = e(() => a()), m = [
-      { type: "newVersionPopup", component: y },
-      { type: "genericOnboarding", component: v },
-      { type: "textBlockOnboarding", component: S },
-      { type: "versionHistoryOnboarding", component: h },
-      { type: "ampOnboarding", component: u },
-      { type: "itemsOnboarding", component: l }
-    ], c = (n) => d.value || !p.value ? !1 : n === "newVersionPopup" ? o.shouldShowOnboarding(n) : o.isActive(n), g = e(() => m.filter((n) => c(n.type)));
-    return O(async () => {
+  setup(M, { emit: g }) {
+    const o = H(), i = _(), d = B(), { isTestPartner: p } = T(), { isFeatureEnabled: m } = A(), t = a(() => i.isStripoInitialized), s = a(() => p()), b = [
+      { type: "newVersionPopup", component: h },
+      { type: "genericOnboarding", component: y },
+      { type: "textBlockOnboarding", component: w },
+      { type: "versionHistoryOnboarding", component: P },
+      { type: "ampOnboarding", component: l },
+      { type: "itemsOnboarding", component: S },
+      { type: "editorTabBarOnboarding", component: v }
+    ], c = (n) => s.value || !t.value ? !1 : n === "newVersionPopup" ? o.shouldShowOnboarding(n) : o.isActive(n), f = a(() => b.filter((n) => c(n.type)));
+    return u(async () => {
       await o.fetchUserModalState();
-    }), t(
-      () => r.isVersionHistoryOpen,
-      (n, i) => {
-        n && !i && o.shouldShowOnboarding("versionHistoryOnboarding") && o.start("versionHistoryOnboarding"), !n && i && o.isActive("versionHistoryOnboarding") && o.close("versionHistoryOnboarding");
+    }), e(
+      () => i.isVersionHistoryOpen,
+      (n, r) => {
+        n && !r && o.shouldShowOnboarding("versionHistoryOnboarding") && o.start("versionHistoryOnboarding"), !n && r && o.isActive("versionHistoryOnboarding") && o.close("versionHistoryOnboarding");
       }
-    ), t(
-      () => s.emailFormat,
-      (n, i) => {
-        i !== "AMP" && n === "AMP" && o.shouldShowOnboarding("ampOnboarding") && o.start("ampOnboarding");
+    ), e(
+      () => d.emailFormat,
+      (n, r) => {
+        r !== "AMP" && n === "AMP" && o.shouldShowOnboarding("ampOnboarding") && o.start("ampOnboarding");
       }
-    ), t(
-      () => r.isPreviewModeOpen,
+    ), e(
+      () => i.isPreviewModeOpen,
       (n) => {
         !n && o.isActive("ampOnboarding") && o.close("ampOnboarding");
       }
-    ), { __sfc: !0, emit: f, onboardingStore: o, editorStore: r, previewStore: s, isTestPartner: a, isStripoReady: p, isTestPartnerActive: d, onboardingConfigs: m, shouldShow: c, visibleOnboardings: g };
+    ), e(
+      t,
+      (n) => {
+        n && m("accessibilityTesting") && !s.value && !o.isOnboardingActive() && o.shouldShowOnboarding("editorTabBarOnboarding") && o.start("editorTabBarOnboarding");
+      },
+      { immediate: !0 }
+    ), { __sfc: !0, emit: g, onboardingStore: o, editorStore: i, previewStore: d, isTestPartner: p, isFeatureEnabled: m, isStripoReady: t, isTestPartnerActive: s, onboardingConfigs: b, shouldShow: c, visibleOnboardings: f };
   }
 });
 export {
-  G as default
+  j as default
 };

package/dist/composables/useAccessibilityApi.js

@@ -0,0 +1,31 @@
+import { useEditorStore as r } from "../stores/editor.js";
+const A = () => {
+  const e = r(), i = () => window.StripoEditorApi.accessibilityApi, s = () => {
+    i().openAccessibilityTestingMode(), e.isAccessibilityTestingOpen = !0;
+  }, o = () => {
+    i().closeAccessibilityTestingMode(), e.isAccessibilityTestingOpen = !1, e.imagesHidden = !1, e.colorVisionDeficiency = "";
+  }, g = () => e.isAccessibilityTestingOpen ? o() : s(), l = () => i().isAccessibilityTestingModeOpen(), t = () => {
+    i().showImages(), e.imagesHidden = !1;
+  }, c = () => {
+    i().hideImages(), e.imagesHidden = !0;
+  };
+  return {
+    openAccessibilityTestingMode: s,
+    closeAccessibilityTestingMode: o,
+    toggleAccessibilityTestingMode: g,
+    isAccessibilityTestingModeOpen: l,
+    showImages: t,
+    hideImages: c,
+    toggleImages: () => e.imagesHidden ? t() : c(),
+    setColorVisionDeficiency: (n) => {
+      i().setColorVisionDeficiency(n), e.colorVisionDeficiency = n;
+    },
+    getColorVisionDeficiency: () => i().getColorVisionDeficiency(),
+    switchToDesktopPreview: () => i().switchToDesktopPreview(),
+    switchToMobilePreview: () => i().switchToMobilePreview(),
+    toggleCodeEditor: () => i().emitToggleCodeEditor()
+  };
+};
+export {
+  A as useAccessibilityApi
+};

package/dist/composables/useActionsApi.js

@@ -1,7 +1,7 @@
-import { filterAmpErrors as w } from "../utils/ampErrorFilter.js";
+import { filterAmpErrors as T } from "../utils/ampErrorFilter.js";
 import { useToaster as A } from "./useToaster.js";
-const D = () => {
-  const { handleError: n } = A(), s = (t = {}) => new Promise((e, a) => {
+const p = 1e4, D = () => {
+  const { handleError: r } = A(), l = (t = {}) => new Promise((e, a) => {
     const o = { ...{
       minimize: !0,
       utmEntity: {
@@ -21,29 +21,29 @@ const D = () => {
       forceAmp: !1,
       resetDataSavedFlag: !1,
       disableLineHeightsReplace: !0
-    }, ...t }, l = {
-      callback: (r, p, d, c, u) => {
-        r ? a(r) : e({
-          html: p,
-          ampHtml: d,
-          ampErrors: w(c ?? []),
-          displayConditions: u
+    }, ...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(l);
+    window.StripoEditorApi.actionsApi.compileEmail(n);
   });
   return {
-    getCompiledEmail: s,
+    getCompiledEmail: l,
     getTemplateData: () => new Promise((t) => {
-      const e = ({ html: a, css: i, width: o, height: m, utmParams: l, syncModulesIds: r }) => t({
+      const e = ({ html: a, css: i, width: o, height: s, utmParams: n, syncModulesIds: m }) => t({
         html: a,
         css: i,
         width: o,
-        height: m,
-        utmParams: l,
-        syncModulesIds: r
+        height: s,
+        utmParams: n,
+        syncModulesIds: m
       });
       window.StripoEditorApi.actionsApi.getTemplateData(e);
     }),
@@ -57,7 +57,7 @@ const D = () => {
           displayConditions: a,
           ampHtml: i = "",
           ampErrors: o = []
-        } = await s({ minimize: !1, resetDataSavedFlag: !1, ...t });
+        } = await l({ minimize: !1, resetDataSavedFlag: !1, ...t });
         return {
           html: e,
           ampHtml: i,
@@ -65,7 +65,7 @@ const D = () => {
           displayConditions: a
         };
       } catch (e) {
-        return n(e, "Error loading preview"), {
+        return r(e, "Error loading preview"), {
           html: "",
           ampHtml: "",
           ampErrors: [],
@@ -81,19 +81,27 @@ const D = () => {
       }
       try {
         window.StripoEditorApi.actionsApi.updateTimerInClonedTemplate((i, o) => {
-          i ? (n(i, "Failed to update timer in cloned template"), t(null)) : t(o || null);
+          i ? (r(i, "Failed to update timer in cloned template"), t(null)) : t(o || null);
         });
       } catch (i) {
-        n(i, "Failed to call updateTimerInClonedTemplate"), t(null);
+        r(i, "Failed to call updateTimerInClonedTemplate"), t(null);
       }
     }),
     updateHtmlAndCss: (t, e) => {
-      window.StripoEditorApi.actionsApi.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();
+        });
+      });
     },
     editorSave: () => new Promise((t) => {
       window.StripoEditorApi.actionsApi.save((e) => {
         if (e) {
-          n(e, "Failed to save template"), t(!1);
+          r(e, "Failed to save template"), t(!1);
           return;
         }
         t(!0);

package/dist/composables/useEmailTemplateApplier.js

@@ -1,55 +1,57 @@
-import { useActionsApi as d } from "./useActionsApi.js";
-import { useConfig as D } from "./useConfig.js";
-import { useToaster as h } from "./useToaster.js";
+import { useActionsApi as C } from "./useActionsApi.js";
+import { useConfig as h } from "./useConfig.js";
+import { useToaster as D } from "./useToaster.js";
 import { useTranslations as E } from "./useTranslations.js";
 import { ToasterTypeOptions as f } from "../enums/toaster.js";
 import { useDynamicContentStore as A } from "../stores/dynamic-content.js";
-import { flattenDynamicContentList as S } from "../utils/genericUtil.js";
-import { extractUsedDynamicContent as O } from "../utils/registerUsedDynamicContent.js";
-import { ref as U } from "vue";
-const w = 250, o = U({}), s = {}, u = /* @__PURE__ */ new Map(), z = () => {
-  const { updateHtmlAndCss: c } = d(), { showToaster: m } = h(), y = E(), { template: T } = D(), v = A(), g = (e, t) => {
+import { flattenDynamicContentList as w } from "../utils/genericUtil.js";
+import { extractUsedDynamicContent as S } from "../utils/registerUsedDynamicContent.js";
+import { ref as O } from "vue";
+const U = 250, o = O({}), s = {}, u = /* @__PURE__ */ new Map(), z = () => {
+  const { updateHtmlAndCss: r } = C(), { showToaster: m } = D(), y = E(), { template: T } = h(), d = A(), g = (e, t) => {
     const a = y(e);
     return a === e ? t : a;
-  }, C = (e) => {
+  }, v = (e) => {
     o.value[e] === void 0 && (o.value = { ...o.value, [e]: "pending" });
   }, l = (e, t, a) => {
-    var n;
+    var c;
     o.value = { ...o.value, [e]: "applying" };
     try {
-      c(t, a), o.value = { ...o.value, [e]: "applied" };
+      r(t, a).catch((n) => {
+        console.warn("Editor did not acknowledge the template apply.", n);
+      }), o.value = { ...o.value, [e]: "applied" };
       try {
-        const r = S((n = T.value) == null ? void 0 : n.dynamicContentList), p = O(t, r);
-        p.length > 0 && v.registerDynamicContent(p);
+        const n = w((c = T.value) == null ? void 0 : c.dynamicContentList), i = S(t, n);
+        i.length > 0 && d.registerDynamicContent(i);
       } catch {
       }
       u.get(e) !== t && (u.set(e, t), m({
         type: f.Success,
         message: g("newsletter.ai-template-applied", "Template applied to the editor")
       }));
-    } catch (r) {
+    } catch (n) {
       o.value = { ...o.value, [e]: "failed" }, m({
         type: f.Error,
-        message: r instanceof Error ? r.message : "Failed to apply template"
+        message: n instanceof Error ? n.message : "Failed to apply template"
       });
     }
-  }, i = (e) => {
+  }, p = (e) => {
     const t = s[e];
     t && (clearTimeout(t), delete s[e]);
   };
-  return { applyStatus: o, markPending: C, applyTemplate: (e, t) => {
-    t.html && (i(e), l(e, t.html, t.css ?? ""));
+  return { applyStatus: o, markPending: v, applyTemplate: (e, t) => {
+    t.html && (p(e), l(e, t.html, t.css ?? ""));
   }, applyTemplateDebounced: (e, t) => {
     if (!t.html)
       return;
-    i(e);
-    const { html: a } = t, n = t.css ?? "";
+    p(e);
+    const { html: a } = t, c = t.css ?? "";
     s[e] = setTimeout(() => {
-      delete s[e], l(e, a, n);
-    }, w);
+      delete s[e], l(e, a, c);
+    }, U);
   } };
 }, G = () => {
-  Object.values(s).forEach(clearTimeout), Object.keys(s).forEach((c) => delete s[c]), o.value = {};
+  Object.values(s).forEach(clearTimeout), Object.keys(s).forEach((r) => delete s[r]), o.value = {};
 };
 export {
   G as resetEmailTemplateApplier,