@useinsider/guido 1.0.2 → 1.0.3-beta.000af7d

package/dist/stores/config.js

@@ -0,0 +1,17 @@
+import { DefaultGuidoConfig as e } from "../enums/defaults.js";
+import { defineStore as i } from "pinia";
+const r = i("config", {
+  state: () => ({
+    guidoConfig: e,
+    templateConfig: {}
+  }),
+  getters: {
+    getVariationId: (t) => {
+      var o;
+      return ((o = t.templateConfig) == null ? void 0 : o.variationId) ?? "";
+    }
+  }
+});
+export {
+  r as useConfigStore
+};

package/dist/stores/dynamic-content.js

@@ -6,15 +6,16 @@ const s = a("dynamicContent", {
     selectedDynamicContentList: []
   }),
   actions: {
-    setSelectedDynamicContent(e) {
-      this.selectedDynamicContent = e, this.selectedDynamicContentList.push(e);
+    setSelectedDynamicContent(t) {
+      this.selectedDynamicContent = t, this.selectedDynamicContentList.push(t);
     }
   },
   getters: {
-    getSelectedDynamicContentList: (e) => n(e.selectedDynamicContentList).map((t) => ({
-      text: t.text,
-      value: t.value,
-      fallback: t.fallback
+    getSelectedDynamicContentList: (t) => n(t.selectedDynamicContentList).map((e) => ({
+      text: e.text,
+      value: e.value,
+      fallback: e.fallback,
+      format: e.format
     })) || []
   }
 });

package/dist/stores/editor.js

@@ -7,7 +7,9 @@ const o = e("editor", {
     isVersionHistoryOpen: !1,
     isPreviewModeOpen: !1,
     editorVisualMode: "desktop",
-    hasChanges: !1
+    hasChanges: !1,
+    isStripoInitialized: !1,
+    templateId: ""
   }),
   getters: {
     // Middle Slot

package/dist/stores/onboarding.js

@@ -0,0 +1,95 @@
+import { useOnboardingApi as t } from "../services/onboardingApi.js";
+import { defineStore as s } from "pinia";
+const e = () => ({
+  cardIndex: 0,
+  isActive: !1,
+  config: []
+}), a = () => ({
+  onboardings: {
+    newVersionPopup: e(),
+    genericOnboarding: e(),
+    textBlockOnboarding: e(),
+    versionHistoryOnboarding: e(),
+    ampOnboarding: e()
+  },
+  userModalState: {},
+  isFetched: !1
+}), g = s("onboarding", {
+  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];
+    },
+    getGenericCurrentCard: (n) => {
+      const { genericOnboarding: o } = n.onboardings;
+      return o.config[o.cardIndex];
+    },
+    getTextBlockCurrentCard: (n) => {
+      const { textBlockOnboarding: o } = n.onboardings;
+      return o.config[o.cardIndex];
+    },
+    getVersionHistoryCurrentCard: (n) => {
+      const { versionHistoryOnboarding: o } = n.onboardings;
+      return o.config[o.cardIndex];
+    },
+    getAmpCurrentCard: (n) => {
+      const { ampOnboarding: o } = n.onboardings;
+      return o.config[o.cardIndex];
+    },
+    shouldShowOnboarding: (n) => (o) => {
+      const i = n.userModalState.Guido;
+      return o === "newVersionPopup" && (i != null && i.genericOnboarding) ? !1 : i ? !i[o] : !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 = []);
+      });
+    },
+    start(n) {
+      this.closeOtherOnboardings(n), this.onboardings[n].cardIndex = 0, this.onboardings[n].isActive = !0;
+    },
+    async close(n) {
+      await this.setUserModalState(n, "true", "Guido"), this.onboardings[n].isActive = !1, this.onboardings[n].cardIndex = 0, this.onboardings[n].config = [];
+    },
+    next(n) {
+      this.onboardings[n].cardIndex < this.onboardings[n].config.length - 1 && this.onboardings[n].cardIndex++;
+    },
+    previous(n) {
+      this.onboardings[n].cardIndex > 0 && this.onboardings[n].cardIndex--;
+    },
+    setConfig(n, o) {
+      this.onboardings[n].config = o ?? [], 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");
+    },
+    onRemindMeLater() {
+      sessionStorage.setItem("newVersionPopupDismissed", "true");
+    },
+    async onNewVersionPopupClose() {
+      await this.setUserModalState("newVersionPopup", "true", "Guido");
+    },
+    isOnboardingActive() {
+      return Object.values(this.onboardings).some((n) => n.isActive);
+    },
+    async fetchUserModalState() {
+      if (this.isFetched)
+        return;
+      const { fetchUserModalState: n } = t(), o = await n();
+      this.userModalState = o, this.isFetched = !0;
+    },
+    async setUserModalState(n, o, i) {
+      const { setUserModalState: r } = t();
+      await r(n, o, i), this.isFetched = !1, await this.fetchUserModalState();
+    }
+  }
+});
+export {
+  g as useOnboardingStore
+};

package/dist/stores/recommendation.js

@@ -0,0 +1,9 @@
+import { defineStore as e } from "pinia";
+const t = () => ({
+  recommendationConfigs: []
+}), n = e("recommendation", {
+  state: () => t()
+});
+export {
+  n as useRecommendationStore
+};

package/dist/stores/unsubscribe.js

@@ -0,0 +1,129 @@
+import { TYPE_COLLECTIONS as i, PAGE_TYPES as a } from "../enums/unsubscribe.js";
+import { useUnsubscribeApi as r } from "../services/unsubscribeApi.js";
+import { defineStore as d } from "pinia";
+const p = () => ({
+  templates: [],
+  selectedTemplates: {},
+  selectedUnsubscribePages: [],
+  selectedCollectionType: a.GLOBAL_UNSUBSCRIBE,
+  activeType: a.GLOBAL_UNSUBSCRIBE,
+  pageSelectionUpdateStatus: !1,
+  pageSelectionDrawerStatus: !1,
+  typeSelectionDrawerStatus: !1,
+  isGlobalUnsubscribeDisabled: !1,
+  isSubscriptionPreferencesCenterDisabled: !1
+}), g = d("unsubscribe", {
+  state: () => p(),
+  getters: {
+    getSelectedCollection: (e) => i[e.selectedCollectionType],
+    getSelectedTemplateByActiveType: (e) => e.selectedTemplates[e.activeType],
+    getTemplatesByActiveType: (e) => e.templates.filter((t) => t.type === e.activeType),
+    getThumbnailByTemplateId: (e) => (t) => {
+      var c;
+      return ((c = e.templates.find((s) => s.id === t)) == null ? void 0 : c.thumbnail) ?? "";
+    },
+    getSelectedUnsubscribePagesByCollection: (e) => (t) => {
+      const c = i[t];
+      if (!c)
+        return [];
+      const s = /* @__PURE__ */ new Map();
+      e.templates.forEach((n) => {
+        s.set(n.id, n.type);
+      });
+      const l = new Set(c);
+      return e.selectedUnsubscribePages.filter((n) => {
+        const o = s.get(n);
+        return o !== void 0 && l.has(o);
+      });
+    },
+    isActiveTypeFirstInCollection: (e) => {
+      const t = i[e.selectedCollectionType];
+      return e.activeType === t[0];
+    },
+    isActiveTypeLastInCollection: (e) => {
+      const t = i[e.selectedCollectionType];
+      return e.activeType === t[t.length - 1];
+    },
+    hasTemplatesByCollectionType: (e) => {
+      const t = {};
+      return i[e.selectedCollectionType].forEach((s) => {
+        t[s] = e.templates.some((l) => l.type === s);
+      }), t;
+    },
+    unsubscribePagesStatus: (e) => e.selectedUnsubscribePages.length > 0
+  },
+  actions: {
+    $reset() {
+      const { templates: e, selectedUnsubscribePages: t } = this;
+      Object.assign(this, {
+        ...p(),
+        templates: e,
+        selectedUnsubscribePages: t
+      });
+    },
+    async fetchTemplates() {
+      if (this.templates.length)
+        return;
+      const { getUnsubscribePages: e } = r(), t = await e();
+      this.templates = t;
+    },
+    setCollection(e) {
+      this.selectedCollectionType = e;
+      const t = i[e];
+      if (t && t.length > 0) {
+        [this.activeType] = t;
+        const c = { ...this.selectedTemplates };
+        t.forEach((s) => {
+          if (!c[s]) {
+            const l = this.templates.find((n) => n.type === s);
+            l && (c[s] = l.id);
+          }
+        }), this.selectedTemplates = c;
+      }
+    },
+    setCollectionWithoutAutoSelection(e) {
+      this.selectedCollectionType = e;
+      const t = i[e];
+      t && t.length > 0 && ([this.activeType] = t);
+    },
+    setSelectedTemplate(e) {
+      this.selectedTemplates = {
+        ...this.selectedTemplates,
+        [this.activeType]: e
+      };
+    },
+    setNextType() {
+      const t = this.getSelectedCollection.indexOf(this.activeType) + 1;
+      t < this.getSelectedCollection.length && (this.activeType = this.getSelectedCollection[t]);
+    },
+    setPreviousType() {
+      const t = this.getSelectedCollection.indexOf(this.activeType) - 1;
+      t >= 0 && (this.activeType = this.getSelectedCollection[t]);
+    },
+    loadSelectedTemplates(e) {
+      const t = new Map(this.templates.map((s) => [s.id, s.type])), c = { ...this.selectedTemplates };
+      e.forEach((s) => {
+        const l = t.get(s);
+        l !== void 0 && (c[l] = s);
+      }), this.selectedTemplates = c;
+    },
+    getSelectedTemplatesByCollection(e) {
+      const t = i[e], c = [];
+      return t.forEach((s) => {
+        this.selectedTemplates[s] && c.push(this.selectedTemplates[s]);
+      }), c;
+    },
+    addUnsubscribePages(e) {
+      const t = /* @__PURE__ */ new Set([...this.selectedUnsubscribePages, ...e]);
+      this.selectedUnsubscribePages = Array.from(t);
+    },
+    removeUnsubscribePages(e) {
+      this.selectedUnsubscribePages = this.selectedUnsubscribePages.filter(
+        (t) => !e.includes(t)
+      );
+    }
+  }
+});
+export {
+  g as useUnsubscribeStore
+};

package/dist/utils/dateUtil.js

@@ -1,4 +1,19 @@
-const o = (t) => {
+import { DEFAULT_LOCALE as r, DEFAULT as a, DEFAULT_TZ as c } from "../enums/date.js";
+const m = (t) => t ? t instanceof Date ? t : typeof t == "string" ? t.length === 10 ? new Date(Number(t) * 1e3) : new Date(t) : typeof t == "number" ? t.toString().length === 10 ? new Date(t * 1e3) : new Date(t) : /* @__PURE__ */ new Date() : /* @__PURE__ */ new Date(), s = () => {
+  const t = window.l10n;
+  return (t == null ? void 0 : t.locale) === a ? r : (t == null ? void 0 : t.locale) || r;
+}, u = new Intl.DateTimeFormat().resolvedOptions().timeZone, f = () => {
+  const t = window.l10n;
+  return (t == null ? void 0 : t.timezone) || u || c;
+}, D = (t, e = s(), n = f()) => {
+  const o = {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    timeZone: n
+  }, i = m(t);
+  return new Intl.DateTimeFormat(e, o).format(i);
+}, T = (t) => {
   if (!t)
     return "";
   const e = new Date(t);
@@ -10,7 +25,13 @@ const o = (t) => {
     second: "2-digit",
     hour12: !1
   }).format(e);
-};
+}, h = (t) => t ? Math.floor(Date.now() / 1e3) >= t : !1;
 export {
-  o as formatPatchDate
+  m as convertToDateObject,
+  T as formatPatchDate,
+  D as formatShortDate,
+  h as isAfterDate,
+  u as localTz,
+  s as locale,
+  f as timezone
 };

package/dist/utils/genericUtil.js

@@ -1,11 +1,15 @@
-const l = (e) => e.map((a) => ({
+const o = (e) => e.map((a) => a.format ? {
+  label: `${a.text} | ${a.format.key}=${a.format.value}`,
+  value: `{{${a.value}|${a.format.key}=${a.format.value}}}`
+} : {
   label: a.fallback ? `${a.text} | ${a.fallback}` : a.text,
   value: a.fallback ? `{{${a.value}|${a.fallback}}}` : `{{${a.value}}}`
-})), t = () => {
+}), f = () => {
   var e;
   return ((e = document.head.querySelector('meta[name="csrf-token"]')) == null ? void 0 : e.getAttribute("content")) ?? "";
-};
+}, $ = (e = "", a = {}, n = !1) => Object.entries(a).reduce((l, [t, r]) => n && (r === "" || r === null || r === void 0) ? l.replace(`&${t}={${t}}`, "") : l.replace(`{${t}}`, String(r)), e);
 export {
-  l as dynamicContentToMergeTags,
-  t as getCsrfToken
+  o as dynamicContentToMergeTags,
+  f as getCsrfToken,
+  $ as replaceString
 };

package/dist/utils/templatePreparation.js

@@ -1,33 +1,41 @@
-import { useActionsApi as c } from "../composables/useActionsApi.js";
-import { useDynamicContentStore as l } from "../stores/dynamic-content.js";
-const y = () => {
-  const t = l(), { getCompiledEmail: e, getTemplateData: a } = c();
+import { useActionsApi as S } from "../composables/useActionsApi.js";
+import { useHtmlCompiler as b } from "../composables/useHtmlCompiler.js";
+import { useDynamicContentStore as f } from "../stores/dynamic-content.js";
+import { useUnsubscribeStore as C } from "../stores/unsubscribe.js";
+const z = () => {
+  const i = f(), t = C(), { getCompiledEmail: o, getTemplateData: s } = S(), { compileHtml: n } = b();
   return {
     prepareTemplateDetails: async () => {
-      const { html: n, ampHtml: s = "", ampErrors: o = [] } = await e({
+      const { html: a, ampHtml: m = "", ampErrors: r = [] } = await o({
         minimize: !0,
         resetDataSavedFlag: !1
-      }), { html: m, css: i, syncModulesIds: r = [] } = await a();
-      return {
-        dynamicContentList: t.getSelectedDynamicContentList,
-        compiledHtml: n,
-        rawHtml: m,
-        css: i,
-        ampHtml: s,
-        ampErrors: o,
-        modules: r,
+      }), { html: c, css: l, syncModulesIds: p = [] } = await s(), { compiledHtml: u, stats: e, appliedRules: d } = n(a), g = i.getSelectedDynamicContentList;
+      return console.debug("HTML Compilation Stats:", {
+        originalSize: e.originalSize,
+        compiledSize: e.compiledSize,
+        reduction: `${e.reductionPercentage.toFixed(2)}%`,
+        appliedRules: d,
+        executionTime: `${e.executionTime.toFixed(2)}ms`
+      }), {
+        dynamicContentList: g,
+        compiledHtml: u,
+        rawHtml: c,
+        css: l,
+        ampHtml: m,
+        ampErrors: r,
+        modules: p,
         recommendation: {
           campaignUrls: {},
           configs: {}
         },
         unsubscribe: {
-          status: !1,
-          config: []
+          status: t.unsubscribePagesStatus,
+          config: t.selectedUnsubscribePages
         }
       };
     }
   };
 };
 export {
-  y as useTemplatePreparation
+  z as useTemplatePreparation
 };

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "1.0.1-beta.1a79d7d",
-  "version": "1.0.2",
+  "version": "1.0.3-beta.000af7d",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",
@@ -25,14 +24,15 @@
     "lint": "NODE_OPTIONS=--max-old-space-size=2048 eslint ./ && bun run type-check",
     "lint:fix": "NODE_OPTIONS=--max-old-space-size=2048 eslint --fix ./",
     "type-check": "vue-tsc --noEmit --project tsconfig.config.json && vue-tsc --noEmit --project tsconfig.app.json",
-    "test:visual-update": "npx playwright test --update-snapshots --reporter html"
+    "test:visual-update": "npx playwright test --update-snapshots --reporter html",
+    "prepare": "husky"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@stripoinc/ui-editor-extensions": "1.0.6",
-    "@useinsider/design-system-vue": "0.14.8",
+    "@stripoinc/ui-editor-extensions": "3.1.0",
+    "@useinsider/design-system-vue": "0.14.20",
     "@vueuse/core": "11.3.0",
     "lodash-es": "4.17.21",
     "pinia": "2.3.1",
@@ -66,6 +66,7 @@
     "eslint-plugin-vue": "10.1.0",
     "eslint-plugin-vue-scoped-css": "2.6.1",
     "globals": "16.0.0",
+    "husky": "9.1.7",
     "msw": "2.10.3",
     "sass": "1.69.7",
     "typescript": "5.5.4",
@@ -79,5 +80,10 @@
   },
   "msw": {
     "workerDirectory": "public"
+  },
+  "guido": {
+    "stripo": {
+      "version": "2.42.0"
+    }
   }
 }

package/dist/@types/events.d.ts

@@ -1 +0,0 @@
-export type StripoEventType = 'save' | 'export' | 'close' | 'autosave' | 'publish' | 'export:requested' | 'export:ready';

package/dist/_virtual/AddCustomFont.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/AiAssistantValueType.js

@@ -1,4 +0,0 @@
-var s = {};
-export {
-  s as __exports
-};

package/dist/_virtual/BackgroundColorBuiltInControl.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/BackgroundImageBuiltInControl.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/Block.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/BlockAttributes.js

@@ -1,4 +0,0 @@
-var t = {};
-export {
-  t as __exports
-};

package/dist/_virtual/BlockCompositionType.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/BlockPaddingsBuiltInControl.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/BlockRenderer.js

@@ -1,4 +0,0 @@
-var e = {};
-export {
-  e as __exports
-};

package/dist/_virtual/BlockType.js

@@ -1,4 +0,0 @@
-var e = {};
-export {
-  e as __exports
-};

package/dist/_virtual/BlocksPanel.js

@@ -1,4 +0,0 @@
-var a = {};
-export {
-  a as __exports
-};

package/dist/_virtual/BuiltInControl.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/BuiltInControlTypes.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/ButtonBorderBuiltInControl.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/ButtonColorBuiltInControl.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/ButtonFontColorBuiltInControl.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/ButtonInternalIndentsBuiltInControl.js

@@ -1,4 +0,0 @@
-var t = {};
-export {
-  t as __exports
-};

package/dist/_virtual/ButtonTextBuiltInControl.js

@@ -1,4 +0,0 @@
-var t = {};
-export {
-  t as __exports
-};

package/dist/_virtual/ContextAction.js

@@ -1,4 +0,0 @@
-var t = {};
-export {
-  t as __exports
-};

package/dist/_virtual/ContextActionType.js

@@ -1,4 +0,0 @@
-var t = {};
-export {
-  t as __exports
-};

package/dist/_virtual/Control.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/EditorStatePropertyType.js

@@ -1,4 +0,0 @@
-var r = {};
-export {
-  r as __exports
-};

package/dist/_virtual/Extension.js

@@ -1,4 +0,0 @@
-var e = {};
-export {
-  e as __exports
-};

package/dist/_virtual/ExtensionBuilder.js

@@ -1,4 +0,0 @@
-var e = {};
-export {
-  e as __exports
-};

package/dist/_virtual/FontFamilyBuiltInControl.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/LinkColorBuiltInControl.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/ModificationDescription.js

@@ -1,4 +0,0 @@
-var i = {};
-export {
-  i as __exports
-};

package/dist/_virtual/PanelPosition.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/PreviewDeviceMode.js

@@ -1,4 +0,0 @@
-var e = {};
-export {
-  e as __exports
-};

package/dist/_virtual/SettingsPanelRegistry.js

@@ -1,4 +0,0 @@
-var e = {};
-export {
-  e as __exports
-};

package/dist/_virtual/SettingsPanelTab.js

@@ -1,4 +0,0 @@
-var a = {};
-export {
-  a as __exports
-};

package/dist/_virtual/SettingsTab.js

@@ -1,4 +0,0 @@
-var t = {};
-export {
-  t as __exports
-};

package/dist/_virtual/StructureBorderBuiltInControl.js

@@ -1,4 +0,0 @@
-var r = {};
-export {
-  r as __exports
-};