@useinsider/guido 1.0.0-beta.f2fcf4d → 1.0.0-beta.f3dd8d9

package/dist/composables/useStripo.js

@@ -1,68 +1,91 @@
-import { useCustomInterfaceAppearance as d } from "./useCustomInterfaceAppearance.js";
-const u = (s) => {
-  const c = () => {
-    const t = new Headers();
-    t.append("Content-Type", "application/json");
-    const o = JSON.stringify({
-      pluginId: void 0,
-      secretKey: void 0,
-      role: void 0,
-      userId: s
-    });
-    return fetch("/v2/stripo/get-token", {
-      method: "POST",
-      headers: t,
-      body: o,
-      redirect: "follow"
-    }).then((e) => e.json());
-  }, i = (t) => {
-    const o = t.html, n = t.css;
+import { useActionsApi as g } from "./useActionsApi.js";
+import { useCustomInterfaceAppearance as f } from "./useCustomInterfaceAppearance.js";
+import { useToaster as E } from "./useToaster.js";
+import { displayConditions as S } from "../enums/displayConditions.js";
+import y from "../extensions/DynamicContent/extension.js";
+import { useStripoApi as C } from "../services/stripoApi.js";
+import { useEditorStore as w } from "../stores/editor.js";
+const A = (a) => {
+  const { handleError: d } = E(), { getToken: c, getCustomFonts: u } = C(), l = (e, r = []) => {
+    const i = w(), { html: t, css: s, forceRecreate: m } = e;
     window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
-        metadata: {
-          emailId: s,
-          userId: "1",
-          username: "Plugin Demo User"
-        },
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        html: o,
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        css: n,
+        metadata: a,
+        html: t,
+        css: s,
+        forceRecreate: m,
         locale: "en",
-        async onTokenRefreshRequest(e) {
+        undoButtonSelector: "#guido__undo-button",
+        redoButtonSelector: "#guido__redo-button",
+        mobileViewButtonSelector: ".guido__view-option-selection-mobile",
+        desktopViewButtonSelector: ".guido__view-option-selection-desktop",
+        codeEditorButtonSelector: "#guido__code-button",
+        customAppearanceMergetags: !0,
+        customAppearanceMergetagsBorderColor: "#f1f3fe",
+        customAppearanceMergetagsBackgroundColor: "#f1f3fe",
+        customViewStyles: `
+                    .esd-x, .esd-merge-tag {color: #0a2ecc !important; box-shadow: none !important;} 
+                    .esd-merge-tag {border: 1px solid #b5c1f1; border-radius: 4px !important;}
+                `,
+        conditionsEnabled: !0,
+        customConditionsEnabled: !0,
+        conditionCategories: S,
+        messageSettingsEnabled: !1,
+        editorFonts: {
+          showDefaultStandardFonts: !0,
+          showDefaultNotStandardFonts: !0,
+          customFonts: r
+        },
+        async onTokenRefreshRequest(o) {
           try {
-            const r = await c();
-            e(r.token);
-          } catch (r) {
-            console.error("Failed to refresh token:", r);
+            const n = await c();
+            o(n);
+          } catch (n) {
+            d(n, "Failed to refresh token");
           }
         },
         onTemplateLoaded() {
           try {
-            const { importCss: e } = d();
-            e();
-          } catch (e) {
-            console.error("Failed to load custom interface appearance:", e);
+            const { importCss: o } = f(), { activateCustomViewStyles: n } = g();
+            o(), n();
+          } catch (o) {
+            d(o, "Failed to load custom interface appearance");
           }
-        }
+        },
+        onCodeEditorVisibilityChanged(o) {
+          i.isCodeEditorOpen = o;
+        },
+        onEditorVisualModeChanged(o) {
+          i.editorVisualMode = o.toLowerCase();
+        },
+        onVersionHistoryVisibilityChanged(o) {
+          i.isVersionHistoryOpen = o;
+        },
+        ignoreClickOutsideSelectors: ["#guido-dynamic-content-modal"],
+        extensions: [y]
       }
     );
-  };
-  return { initPlugin: (t) => new Promise((o, n) => {
+  }, p = (e) => new Promise((r, i) => {
     if (document.getElementById("UiEditorScript")) {
-      i(t), o();
+      e(), r();
       return;
     }
-    const e = document.createElement("script");
-    e.id = "UiEditorScript", e.type = "module", e.src = "https://plugins.stripo.email/resources/uieditor/latest/UIEditor.js", e.onload = () => {
-      i(t), o();
-    }, e.onerror = () => {
-      const r = new Error("Failed to load Stripo UIEditor script");
-      n(r);
-    }, document.body.appendChild(e);
-  }) };
+    const t = document.createElement("script");
+    t.id = "UiEditorScript", t.type = "module", t.src = "https://plugins.stripo.email/resources/uieditor/latest/UIEditor.js", t.onload = () => {
+      e(), r();
+    }, t.onerror = () => {
+      const s = new Error("Failed to load Stripo UIEditor script");
+      i(s);
+    }, document.body.appendChild(t);
+  });
+  return { initPlugin: async (e) => {
+    await p(async () => {
+      const r = await u();
+      l(e, r);
+    });
+  } };
 };
 export {
-  u as useStripo
+  A as useStripo
 };

package/dist/composables/useToaster.d.ts

@@ -17,4 +17,5 @@ export declare const useToaster: () => {
     } | undefined)[]>;
     showToaster: (options?: ToasterOptions) => void;
     hideToaster: () => void;
+    handleError: (error: unknown, context: string) => void;
 };

package/dist/composables/useToaster.js

@@ -0,0 +1,37 @@
+import { ref as o, watch as T } from "vue";
+const v = () => {
+  const t = o(!1), s = o(""), c = o("success"), n = o([]);
+  let a = null;
+  function i() {
+    a && (clearTimeout(a), a = null);
+  }
+  function u() {
+    t.value = !1, n.value = [], s.value = "";
+  }
+  function l(e = { message: "" }) {
+    u(), s.value = e.message, c.value = e.type || "success", n.value = e.actionButton ? [e.actionButton] : [], t.value = !0;
+  }
+  function f(e, r) {
+    const m = e instanceof Error ? e.message : String(e);
+    l({
+      type: "error",
+      message: `${r}: ${m}`
+    });
+  }
+  return T([t, s], ([e, r]) => {
+    i(), e && r && (a = setTimeout(() => {
+      u();
+    }, 6e3));
+  }), {
+    isToasterVisible: t,
+    toasterMessage: s,
+    toasterType: c,
+    toasterActionButton: n,
+    showToaster: l,
+    hideToaster: u,
+    handleError: f
+  };
+};
+export {
+  v as useToaster
+};

package/dist/composables/useTranslations.d.ts

@@ -1,7 +1,5 @@
 interface TranslationValues {
     [key: string]: string | number | boolean;
 }
-export declare const useTranslations: () => {
-    trans: ((key: string, params?: TranslationValues) => string) & import("lodash").MemoizedFunction;
-};
+export declare const useTranslations: () => ((key: string, params?: TranslationValues) => string) & import("lodash").MemoizedFunction;
 export {};

package/dist/composables/useTranslations.js

@@ -0,0 +1,18 @@
+import memoize from "../node_modules/lodash-es/memoize.js";
+import { ref } from "vue";
+const useTranslations = () => {
+  const translations = ref(eval(window.GuidoConfig.translationsPath)), trans = (n, t) => {
+    const r = translations.value[n];
+    return r ? t ? Object.entries(t).reduce(
+      (e, [o, i]) => e.replace(new RegExp(`{${o}}`, "g"), String(i)),
+      r
+    ) : r : (console.warn(`Translation key not found: ${n}`), n);
+  };
+  return memoize(
+    trans,
+    (n, t) => !t || Object.keys(t).length === 0 ? n : JSON.stringify({ key: n, params: t })
+  );
+};
+export {
+  useTranslations
+};

package/dist/composables/useVersionHistoryApi.d.ts

@@ -0,0 +1,8 @@
+export declare const useVersionHistoryApi: () => {
+    openVersionHistory: () => void;
+    closeVersionHistory: () => void;
+    switchToDesktopPreview: () => void;
+    switchToMobilePreview: () => void;
+    previewVersion: (id: string) => void;
+    restoreVersion: (id: string) => void;
+};

package/dist/composables/useVersionHistoryApi.js

@@ -0,0 +1,53 @@
+import { useVersionHistoryStore as p } from "../stores/version-history.js";
+import { useToaster as c } from "./useToaster.js";
+const l = () => {
+  const i = p(), { showToaster: s } = c(), t = (e) => {
+    i.$reset(), i.updateState(e);
+  }, n = () => {
+    i.$reset();
+  };
+  return {
+    openVersionHistory: () => {
+      window.StripoEditorApi.versionHistoryApi.openVersionHistory(t, n);
+    },
+    closeVersionHistory: () => {
+      window.StripoEditorApi.versionHistoryApi.closeVersionHistory();
+    },
+    switchToDesktopPreview: () => {
+      window.StripoEditorApi.versionHistoryApi.switchToDesktopPreview();
+    },
+    switchToMobilePreview: () => {
+      window.StripoEditorApi.versionHistoryApi.switchToMobilePreview();
+    },
+    previewVersion: (e) => {
+      window.StripoEditorApi.versionHistoryApi.previewVersion(e, (o) => {
+        const r = o instanceof Error ? o.message : String(o);
+        s({
+          type: "error",
+          message: `Error compiling email: ${r}`
+        });
+      });
+    },
+    restoreVersion: (e) => {
+      window.StripoEditorApi.versionHistoryApi.restoreVersion(
+        e,
+        () => {
+          s({
+            type: "success",
+            message: `${e} patch restored successfully.`
+          });
+        },
+        (o) => {
+          const r = o instanceof Error ? o.message : String(o);
+          s({
+            type: "error",
+            message: `Error compiling email: ${r}`
+          });
+        }
+      );
+    }
+  };
+};
+export {
+  l as useVersionHistoryApi
+};

package/dist/config/compiler/htmlCompilerRules.d.ts

@@ -0,0 +1,2 @@
+import type { CompilerRule } from '@@/Types/html-compiler';
+export declare const defaultHtmlCompilerRules: CompilerRule[];

package/dist/config/compiler/htmlCompilerRules.js

@@ -0,0 +1,145 @@
+const a = [
+  {
+    id: "fix-url-encoding-start",
+    description: "Replace {%22 with %7B%22 to fix URL encoding",
+    type: "replace",
+    search: "{%22",
+    replacement: "%7B%22",
+    replaceAll: !0,
+    priority: 10
+  },
+  {
+    id: "fix-url-encoding-end",
+    description: "Replace %22} with %22%7D to fix URL encoding",
+    type: "replace",
+    search: "%22}",
+    replacement: "%22%7D",
+    replaceAll: !0,
+    priority: 10
+  },
+  {
+    id: "fix-tags-start",
+    description: "Replace %7B%7B with {{ to fix URL encoding",
+    type: "replace",
+    search: "%7B%7B",
+    replacement: "{{",
+    replaceAll: !0,
+    priority: 11
+  },
+  {
+    id: "fix-tags-end",
+    description: "Replace %7D%7D with }} to fix URL encoding",
+    type: "replace",
+    search: "%7D%7D",
+    replacement: "}}",
+    replaceAll: !0,
+    priority: 12
+  },
+  {
+    id: "unescape-inequality-operators-start",
+    description: "Replace &lt; with < to fix URL encoding",
+    type: "replace",
+    search: "&lt;",
+    replacement: "<",
+    replaceAll: !0,
+    priority: 13
+  },
+  {
+    id: "unescape-inequality-operators-end",
+    description: "Replace &gt; with > to fix URL encoding",
+    type: "replace",
+    search: "&gt;",
+    replacement: ">",
+    replaceAll: !0,
+    priority: 14
+  },
+  {
+    id: "remove-apty-iframe",
+    description: "Cleanup Apty Iframe Code",
+    type: "remove",
+    targets: [
+      '<iframe src="about:blank" id="letznav-iframe-script" allowtransparency="true" style="width:1px;height:1px"></iframe>',
+      'src="about:blank" id="letznav-iframe-script" allowtransparency="true" style="width:1px;height:1px"></iframe>'
+    ],
+    priority: 20
+  },
+  {
+    id: "remove-apty-styles",
+    description: "Removing Apty Styles",
+    type: "regex",
+    pattern: '<styles*data-styles="apty_styles"s* type="text/css"s*>((s|.)*?)</style>',
+    replacement: "",
+    flags: "g",
+    priority: 21
+  },
+  {
+    id: "remove-mso-conditions",
+    description: "Removing MSO Conditions",
+    type: "remove",
+    targets: [
+      /<!--\[if\s\(mso 16\)\]>\s*<style\s*\S*>\s*a\s*\{\s*text-decoration\s*:\s*none\s*;*\s*\}\s*<\/style>\s*<!\[endif\]-->/g,
+      /<!--\[if\sgte mso 9\]>\s*<style\s*\S*>\s*sup\s*\{\s*font-size\s*:\s*100%\s*!important\s*;*\s*\}\s*<\/style>\s*<!\[endif\]-->/g,
+      /<!--\[if\sgte mso 9\]>\s*<noscript>\s*<xml>\s*<o:OfficeDocumentSettings>\s*<o:AllowPNG>\s*<\/o:AllowPNG>\s*<o:PixelsPerInch>\d+<\/o:PixelsPerInch>\s*<\/o:OfficeDocumentSettings>\s*<\/xml>\s*<\/noscript>\s*<!\[endif\]-->/g,
+      /<!--\[if mso\]>\s*<xml>\s*<w:WordDocument\s+xmlns:w="urn:schemas-microsoft-com:office:word">\s*<w:DontUseAdvancedTypographyReadingMail><\/w:DontUseAdvancedTypographyReadingMail>\s*<\/w:WordDocument>\s*<\/xml>\s*<!\[endif\]-->/g,
+      /<\!--\[if \!mso\]><\!--\s*\d*\s*-->\s*<\!--\[if \!mso\]><\!--\s*\d*\s*-->\s*<\!--<!\[endif\]-->/g,
+      /<!--\[if\s\!mso\]>\s*<!-- \d -->/g
+    ],
+    priority: 22
+  },
+  {
+    id: "add-mso-conditions",
+    description: "Adding MSO Conditions",
+    type: "custom",
+    processor: (e) => {
+      const t = [
+        `<!--[if gte mso 9]>
+<style>sup {
+    font-size: 100% !important;
+}</style><![endif]-->`,
+        `<!--[if gte mso 9]>
+<noscript>
+    <xml>
+        <o:OfficeDocumentSettings>
+            <o:AllowPNG></o:AllowPNG>
+            <o:PixelsPerInch>96</o:PixelsPerInch>
+        </o:OfficeDocumentSettings>
+    </xml>
+</noscript><![endif]-->`,
+        `<!--[if mso]>
+<xml>
+    <w:WordDocument xmlns:w="urn:schemas-microsoft-com:office:word">
+        <w:DontUseAdvancedTypographyReadingMail></w:DontUseAdvancedTypographyReadingMail>
+    </w:WordDocument>
+</xml><![endif]-->`
+      ], s = /<head>([\S\s]*)<\/head>/, o = new RegExp(s);
+      if (!e.match(o))
+        return e;
+      let i = e;
+      return t.forEach((r) => {
+        i = i.replace("</head>", `${r}</head>`);
+      }), i;
+    },
+    priority: 30
+  },
+  {
+    id: "replace-old-image-domain",
+    description: "Replacing old image domains",
+    type: "replace",
+    search: "stripo-editor-image.s3-eu-west-1.amazonaws.com",
+    replacement: "email-static.useinsider.com",
+    replaceAll: !0,
+    priority: 40
+  },
+  {
+    id: "replace-old-v2-image-domain",
+    description: "Replacing old image domains",
+    type: "replace",
+    search: "email.static.useinsider.com",
+    replacement: "email-static.useinsider.com",
+    replaceAll: !0,
+    priority: 41
+  }
+];
+export {
+  a as defaultHtmlCompilerRules
+};

package/dist/enums/defaults.d.ts

@@ -0,0 +1,4 @@
+import type { GuidoConfig } from '@@/Types/generic';
+export declare const DefaultGuidoConfig: GuidoConfig;
+export declare const DefaultProductType = "newsletter";
+export declare const DefaultUsername = "Guido User";

package/dist/enums/defaults.js

@@ -0,0 +1,8 @@
+const t = {
+  translationsPath: "window.trans.en"
+}, e = "newsletter", n = "Guido User";
+export {
+  t as DefaultGuidoConfig,
+  e as DefaultProductType,
+  n as DefaultUsername
+};

package/dist/enums/displayConditions.d.ts

@@ -0,0 +1,2 @@
+import type { ConditionCategories } from '@@/Types/condition-categories';
+export declare const displayConditions: ConditionCategories;

package/dist/enums/displayConditions.js

@@ -0,0 +1,80 @@
+const e = [
+  {
+    category: "Demographics",
+    conditions: [
+      {
+        id: 1,
+        name: "Language",
+        description: "Users who are in the English will see the banner",
+        beforeScript: '{% if language == "en_US" %}',
+        afterScript: "{% endif %}"
+      },
+      {
+        id: 2,
+        name: "Country",
+        description: "Only people who live in Australia will see the banner",
+        beforeScript: '{% if country == "Australia" %}',
+        afterScript: "{% endif %}"
+      },
+      {
+        id: 3,
+        name: "Country & City",
+        description: "Only people who are located in that country and city",
+        beforeScript: '{% if country == "United Kingdom" and city == "London" %}',
+        afterScript: "{% endif %}"
+      },
+      {
+        id: 4,
+        name: "Age (Less than operator)",
+        description: "Users whose age is less than 18",
+        beforeScript: "{% if age < 18 %}",
+        afterScript: "{% endif %}"
+      },
+      {
+        id: 5,
+        name: "Age (Equal and greater than operator)",
+        description: "Users whose age is equal or greater than 25",
+        beforeScript: "{% if age >= 25 %}",
+        afterScript: "{% endif %}"
+      },
+      {
+        id: 6,
+        name: "Age (Greater than & less than operators)",
+        description: "Users whose age is between 18 and 25",
+        beforeScript: "{% if age > 18 and age < 25 %}",
+        afterScript: "{% endif %}"
+      },
+      {
+        id: 7,
+        name: "Gender",
+        description: "Users whose gender is Female",
+        beforeScript: '{% if gender == "Female" %}',
+        afterScript: "{% endif %}"
+      },
+      {
+        id: 8,
+        name: "State",
+        description: "Users whose state is one of the followings. c_state is a custom attribute. Use this condition if you have the attribute with the same naming. ",
+        beforeScript: '{% if c_state == "VIC" or c_state == "NSW" or c_state == "QLD" %}',
+        afterScript: "{% endif %}"
+      },
+      {
+        id: 9,
+        name: "VIP User",
+        description: "Users who are VIP users for that brand. c_is_vip_user = true. c_is_vip_user is a custom attribute. Use this condition if you have the attribute with the same naming.",
+        beforeScript: "{% if c_is_vip_user %}",
+        afterScript: "{% endif %}"
+      },
+      {
+        id: 10,
+        name: "Membership Type",
+        description: "Users who belong to gold or silver membership type. c_is_gold_member = true, c_is_silver_member = true. These are custom attributes. Use this condition if you have the attribute with the same naming.",
+        beforeScript: "{% if c_is_gold_member or c_is_silver_member %}",
+        afterScript: "{% endif %}"
+      }
+    ]
+  }
+];
+export {
+  e as displayConditions
+};

package/dist/enums/emailPreview.d.ts

@@ -0,0 +1,3 @@
+export declare const MAX_EMAIL_WEIGHT = 102;
+export declare const INBOX_PREVIEW_PATH = "/inbox-mockup.svg";
+export declare const PHONE_PREVIEW_PATH = "/phone-mockup.svg";

package/dist/enums/emailPreview.js

@@ -0,0 +1,6 @@
+const o = 102, E = "/inbox-mockup.svg", _ = "/phone-mockup.svg";
+export {
+  E as INBOX_PREVIEW_PATH,
+  o as MAX_EMAIL_WEIGHT,
+  _ as PHONE_PREVIEW_PATH
+};

package/dist/enums/gmailMobilePreview.d.ts

@@ -0,0 +1,7 @@
+export declare const DEFAULT_EMAIL_WIDTH = 600;
+export declare const MIN_SCALE = 0.2;
+export declare const RESIZE_DEBOUNCE_MS = 100;
+export declare const INLINE_WIDTH_REGEX: RegExp;
+export declare const TABLE_WIDTH_REGEX: RegExp;
+export declare const META_VIEWPORT_REGEX: RegExp;
+export declare const EMAIL_CONTAINER_SELECTORS: readonly [".wrapper", ".container", "#wrapper", "#container", "[data-email-container]", "[role=\"presentation\"]"];

package/dist/enums/gmailMobilePreview.js

@@ -0,0 +1,17 @@
+const E = 600, t = 0.2, n = 100, o = /width\s*:\s*(\d+(\.\d+)?)px/i, _ = /^(\d+(\.\d+)?)(px)?$/i, e = /width\s*=\s*device-width/i, i = [
+  ".wrapper",
+  ".container",
+  "#wrapper",
+  "#container",
+  "[data-email-container]",
+  '[role="presentation"]'
+];
+export {
+  E as DEFAULT_EMAIL_WIDTH,
+  i as EMAIL_CONTAINER_SELECTORS,
+  o as INLINE_WIDTH_REGEX,
+  e as META_VIEWPORT_REGEX,
+  t as MIN_SCALE,
+  n as RESIZE_DEBOUNCE_MS,
+  _ as TABLE_WIDTH_REGEX
+};

package/dist/extensions/DynamicContent/dynamic-content-modal.d.ts

@@ -0,0 +1,6 @@
+import type { DynamicContent } from '@@/Types/generic';
+export declare class ExternalMergeTagsLibrary {
+    selectedDynamicContent: DynamicContent | null;
+    dataSelectCallback: (data: DynamicContent) => void;
+    openMergeTagsLibrary(dynamicContent: DynamicContent, onDataSelectCallback: (data: DynamicContent) => void): void;
+}

package/dist/extensions/DynamicContent/dynamic-content-modal.js

@@ -0,0 +1,27 @@
+var i = Object.defineProperty;
+var d = (t, e, n) => e in t ? i(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var a = (t, e, n) => d(t, typeof e != "symbol" ? e + "" : e, n);
+class y {
+  constructor() {
+    a(this, "selectedDynamicContent", null);
+    a(this, "dataSelectCallback", () => {
+    });
+  }
+  openMergeTagsLibrary(e, n) {
+    this.dataSelectCallback = n, this.selectedDynamicContent = e;
+    const s = new CustomEvent("dynamic-content:open", {
+      detail: {
+        attribute: e
+      }
+    });
+    document.dispatchEvent(s);
+    const o = (l) => {
+      const c = l.detail;
+      this.selectedDynamicContent = c, c.text && c.value && this.dataSelectCallback(c), document.removeEventListener("dynamic-content:close", o);
+    };
+    document.addEventListener("dynamic-content:close", o);
+  }
+}
+export {
+  y as ExternalMergeTagsLibrary
+};

package/dist/extensions/DynamicContent/dynamic-content.css.js

@@ -0,0 +1,24 @@
+const n = `
+#guido__btn-add-dynamic-content {
+    background-color: transparent;
+}
+
+#guido__btn-add-dynamic-content > button {
+    color: var(--guido-color-primary-500);
+    background-color: transparent;
+    box-shadow: none;
+    padding: 0;
+    border: none;
+}
+
+#guido__btn-add-dynamic-content > button:hover {
+    text-decoration: underline;
+}
+
+.color-primary {
+    color: var(--guido-color-primary-500) !important;
+}
+`;
+export {
+  n as default
+};

package/dist/extensions/DynamicContent/dynamic-content.d.ts

@@ -0,0 +1,16 @@
+import { UIElementType, UIElement, UIElementTagRegistry } from '@stripoinc/ui-editor-extensions';
+export declare class DynamicContentTagRegistry extends UIElementTagRegistry {
+    registerUiElements(uiElementsTagsMap: Record<UIElementType, string>): void;
+}
+export declare class DynamicContentUiElementExtension extends UIElement {
+    private mergeTagsButton;
+    private listener;
+    private mergeTagsLibrary;
+    private selectedDynamicContent;
+    getId(): string;
+    onRender(container: HTMLElement): void;
+    onDestroy(): void;
+    _onClick(): void;
+    openMergeTagLibrary(): void;
+    getTemplate(): string;
+}