@useinsider/guido 1.0.0-beta.ae2520e → 1.0.0-beta.afdfab7

package/dist/composables/useStripo.js

@@ -1,81 +1,79 @@
-import { useCustomInterfaceAppearance as u } from "./useCustomInterfaceAppearance.js";
-import { useEditorStore as l } from "../stores/editor.js";
-const g = (s) => {
-  const c = () => {
-    const t = new Headers();
-    t.append("Content-Type", "application/json");
-    const r = JSON.stringify({
-      pluginId: void 0,
-      secretKey: void 0,
-      role: void 0,
-      userId: s
-    });
-    return fetch("/v2/stripo/get-token", {
-      method: "POST",
-      headers: t,
-      body: r,
-      redirect: "follow"
-    }).then((o) => o.json());
-  }, d = (t) => {
-    const r = l(), n = t.html, o = t.css;
+import { useCustomInterfaceAppearance as m } from "./useCustomInterfaceAppearance.js";
+import { useToaster as g } from "./useToaster.js";
+import { displayConditions as E } from "../enums/displayConditions.js";
+import { useStripoApi as S } from "../services/stripoApi.js";
+import { useEditorStore as w } from "../stores/editor.js";
+const F = (c) => {
+  const { handleError: d } = g(), { getToken: a, getCustomFonts: u } = S(), l = (e, i = []) => {
+    const r = w(), { html: t, css: n } = 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: n,
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        css: o,
+        metadata: c,
+        html: t,
+        css: n,
         locale: "en",
         undoButtonSelector: "#guido__undo-button",
         redoButtonSelector: "#guido__redo-button",
         mobileViewButtonSelector: ".guido__view-option-selection-mobile",
         desktopViewButtonSelector: ".guido__view-option-selection-desktop",
-        versionHistoryButtonSelector: "#guido__history-button",
         codeEditorButtonSelector: "#guido__code-button",
-        async onTokenRefreshRequest(e) {
+        conditionsEnabled: !0,
+        customConditionsEnabled: !0,
+        conditionCategories: E,
+        messageSettingsEnabled: !1,
+        editorFonts: {
+          showDefaultStandardFonts: !0,
+          showDefaultNotStandardFonts: !0,
+          customFonts: i
+        },
+        async onTokenRefreshRequest(o) {
           try {
-            const i = await c();
-            e(i.token);
-          } catch (i) {
-            console.error("Failed to refresh token:", i);
+            const s = await a();
+            o(s);
+          } catch (s) {
+            d(s, "Failed to refresh token");
           }
         },
         onTemplateLoaded() {
           try {
-            const { importCss: e } = u();
-            e();
-          } catch (e) {
-            console.error("Failed to load custom interface appearance:", e);
+            const { importCss: o } = m();
+            o();
+          } catch (o) {
+            d(o, "Failed to load custom interface appearance");
           }
         },
-        onCodeEditorVisibilityChanged(e) {
-          r.isCodeEditorOpen = e;
+        onCodeEditorVisibilityChanged(o) {
+          r.isCodeEditorOpen = o;
         },
-        onEditorVisualModeChanged(e) {
-          r.editorVisualMode = e.toLowerCase();
+        onEditorVisualModeChanged(o) {
+          r.editorVisualMode = o.toLowerCase();
+        },
+        onVersionHistoryVisibilityChanged(o) {
+          r.isVersionHistoryOpen = o;
         }
       }
     );
-  };
-  return { initPlugin: (t) => new Promise((r, n) => {
+  }, p = (e) => new Promise((i, r) => {
     if (document.getElementById("UiEditorScript")) {
-      d(t), r();
+      e(), i();
       return;
     }
-    const o = document.createElement("script");
-    o.id = "UiEditorScript", o.type = "module", o.src = "https://plugins.stripo.email/resources/uieditor/latest/UIEditor.js", o.onload = () => {
-      d(t), r();
-    }, o.onerror = () => {
-      const e = new Error("Failed to load Stripo UIEditor script");
-      n(e);
-    }, document.body.appendChild(o);
-  }) };
+    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(), i();
+    }, t.onerror = () => {
+      const n = new Error("Failed to load Stripo UIEditor script");
+      r(n);
+    }, document.body.appendChild(t);
+  });
+  return { initPlugin: async (e) => {
+    await p(async () => {
+      const i = await u();
+      l(e, i);
+    });
+  } };
 };
 export {
-  g as useStripo
+  F as useStripo
 };

package/dist/composables/useTemplateCategories.d.ts

@@ -0,0 +1,35 @@
+interface MappedCategory {
+    value: string;
+    text: string;
+}
+interface GetDataProps {
+    getInitialData?: boolean;
+}
+export declare const useTemplateCategories: ({ getInitialData }?: GetDataProps) => {
+    data: {
+        loading: boolean;
+        loadingCreate: boolean;
+        categories: {
+            id: number;
+            name: string;
+            partnerId: number;
+            isStripo: boolean;
+            templatesCount: number;
+        }[];
+        mappedCategories: {
+            value: string;
+            text: string;
+        }[];
+        selectedCategories: {
+            value: string;
+            text: string;
+        }[];
+    };
+    fetchCategories: () => Promise<void>;
+    createCategory: (name: string) => Promise<void>;
+    selectCategory: (category: MappedCategory) => void;
+    setSelectedCategories: (categories: MappedCategory[]) => void;
+    resetSelection: () => void;
+    getSelectedCategoryIds: import("vue").ComputedRef<number[]>;
+};
+export {};

package/dist/composables/useTemplateCategories.js

@@ -0,0 +1,78 @@
+import { useHttp as h } from "./useHttp.js";
+import { useToaster as x } from "./useToaster.js";
+import { reactive as w, computed as v } from "vue";
+const b = ({ getInitialData: g = !1 } = {}) => {
+  const { get: c, post: d } = h(), { handleError: o, showToaster: n } = x(), e = w({
+    loading: !1,
+    loadingCreate: !1,
+    categories: [],
+    mappedCategories: [],
+    selectedCategories: []
+  }), i = async () => {
+    e.loading = !0;
+    try {
+      const s = (await c("/newsletter/template-library/get-template-categories")).data || [];
+      e.categories = s, e.mappedCategories = s.map((a) => ({
+        value: a.id.toString(),
+        text: a.name
+      }));
+    } catch (t) {
+      o(t, "Error fetching template categories:"), e.categories = [], e.mappedCategories = [];
+    } finally {
+      e.loading = !1;
+    }
+  }, p = async (t) => {
+    try {
+      const a = `/newsletter/template-library/category-name-exists?name=${encodeURIComponent(t)}`;
+      return (await c(a)).data.status;
+    } catch (s) {
+      return o(s, "Error checking category name:"), !1;
+    }
+  }, m = async (t) => {
+    e.loadingCreate = !0;
+    try {
+      if (await p(t)) {
+        n({
+          type: "error",
+          message: "Category name already exists"
+        });
+        return;
+      }
+      const r = (await d("/newsletter/template-library/create-category", { name: t })).data;
+      if (r) {
+        e.categories.push(r);
+        const l = {
+          value: r.id.toString(),
+          text: r.name
+        };
+        e.mappedCategories.push(l), e.selectedCategories.push(l), n({
+          type: "success",
+          message: "Category created successfully"
+        });
+      }
+    } catch (s) {
+      o(s, "Error creating category:");
+    } finally {
+      e.loadingCreate = !1;
+    }
+  }, C = (t) => {
+    const s = e.selectedCategories.findIndex((a) => a.value === t.value);
+    s === -1 ? e.selectedCategories.push(t) : e.selectedCategories.splice(s, 1);
+  }, y = (t) => {
+    e.selectedCategories = [...t];
+  }, u = () => {
+    e.selectedCategories = [];
+  }, f = v(() => e.selectedCategories.map((t) => parseInt(t.value)));
+  return g && i(), {
+    data: e,
+    fetchCategories: i,
+    createCategory: m,
+    selectCategory: C,
+    setSelectedCategories: y,
+    resetSelection: u,
+    getSelectedCategoryIds: f
+  };
+};
+export {
+  b as useTemplateCategories
+};

package/dist/composables/useTemplateNameValidation.d.ts

@@ -0,0 +1,13 @@
+export interface ValidationResult {
+    isValid: boolean;
+    message: string;
+}
+export declare const useTemplateNameValidation: () => {
+    validationError: import("vue").Ref<string>;
+    isValidating: import("vue").Ref<boolean>;
+    validateTemplateName: (name: string) => Promise<ValidationResult>;
+    clearValidation: () => void;
+    VALIDATION_RULES: {
+        DEBOUNCE_TIME: number;
+    };
+};

package/dist/composables/useTemplateNameValidation.js

@@ -0,0 +1,57 @@
+import { useHttp as v } from "./useHttp.js";
+import { useToaster as T } from "./useToaster.js";
+import { useTranslations as E } from "./useTranslations.js";
+import { ref as m } from "vue";
+const c = {
+  DEBOUNCE_TIME: 500
+}, x = () => {
+  const { get: u } = v(), { handleError: d } = T(), l = E(), s = m(""), o = m(!1), r = m(null), p = (a) => a.trim() ? {
+    isValid: !0,
+    message: ""
+  } : {
+    isValid: !1,
+    message: l("validation.required-product-name-to-continue", { product: "template" })
+  }, f = async (a) => {
+    try {
+      const i = `/template-library/template-name-exists?name=${encodeURIComponent(a)}`;
+      return (await u(i)).data.status;
+    } catch (e) {
+      return d(e, "Error checking template name:"), !1;
+    }
+  };
+  return {
+    validationError: s,
+    isValidating: o,
+    validateTemplateName: (a) => (r.value && clearTimeout(r.value), new Promise((e) => {
+      const i = p(a);
+      if (!i.isValid) {
+        s.value = i.message, e(i);
+        return;
+      }
+      o.value = !0, r.value = setTimeout(async () => {
+        try {
+          const t = await f(a.trim()), n = {
+            isValid: !t,
+            message: t ? l("whatsapp-business.template-name-exists") : ""
+          };
+          s.value = n.message, e(n);
+        } catch (t) {
+          const n = {
+            isValid: !1,
+            message: t instanceof Error ? t.message : l("validation.unknown-error")
+          };
+          s.value = n.message, e(n);
+        } finally {
+          o.value = !1;
+        }
+      }, c.DEBOUNCE_TIME);
+    })),
+    clearValidation: () => {
+      s.value = "", o.value = !1, r.value && clearTimeout(r.value);
+    },
+    VALIDATION_RULES: c
+  };
+};
+export {
+  x as useTemplateNameValidation
+};

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/enums/defaults.d.ts

@@ -1,2 +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

@@ -1,6 +1,8 @@
-const n = {
+const t = {
   translationsPath: "window.trans.en"
-};
+}, e = "newsletter", n = "Guido User";
 export {
-  n as DefaultGuidoConfig
+  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/guido.css

@@ -1 +1 @@
-[data-v-f67c82be] .guido__view-option-selection-desktop svg,[data-v-f67c82be] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}.header-right-slot[data-v-94ef50f1]{gap:16px}.guido-editor__wrapper[data-v-ef4897b1],.guido-editor__container[data-v-ef4897b1]{width:100%;height:100vh}
+.version-history-item[data-v-0e2ff42d]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}[data-v-6a2bde67] .guido__verion-history-view-option-selection-desktop svg,[data-v-6a2bde67] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-6a2bde67] .in-segments-wrapper__button_selected,[data-v-6a2bde67] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-0fff376c] .guido__view-option-selection-desktop svg,[data-v-0fff376c] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-0fff376c] .in-segments-wrapper__button_selected,[data-v-0fff376c] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.guido-editor__wrapper[data-v-69c35c60],.guido-editor__container[data-v-69c35c60]{width:100%;height:calc(100vh - 75px)}

package/dist/mock/api/custom-fonts.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("msw").HttpHandler[];
+export default _default;

package/dist/mock/api/template-library.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("msw").HttpHandler[];
+export default _default;

package/dist/node_modules/lodash-es/_Hash.js

@@ -0,0 +1,20 @@
+import p from "./_hashClear.js";
+import a from "./_hashDelete.js";
+import l from "./_hashGet.js";
+import s from "./_hashHas.js";
+import m from "./_hashSet.js";
+function t(o) {
+  var e = -1, h = o == null ? 0 : o.length;
+  for (this.clear(); ++e < h; ) {
+    var r = o[e];
+    this.set(r[0], r[1]);
+  }
+}
+t.prototype.clear = p;
+t.prototype.delete = a;
+t.prototype.get = l;
+t.prototype.has = s;
+t.prototype.set = m;
+export {
+  t as default
+};

package/dist/node_modules/lodash-es/_ListCache.js

@@ -0,0 +1,20 @@
+import p from "./_listCacheClear.js";
+import a from "./_listCacheDelete.js";
+import i from "./_listCacheGet.js";
+import h from "./_listCacheHas.js";
+import s from "./_listCacheSet.js";
+function t(e) {
+  var o = -1, l = e == null ? 0 : e.length;
+  for (this.clear(); ++o < l; ) {
+    var r = e[o];
+    this.set(r[0], r[1]);
+  }
+}
+t.prototype.clear = p;
+t.prototype.delete = a;
+t.prototype.get = i;
+t.prototype.has = h;
+t.prototype.set = s;
+export {
+  t as default
+};

package/dist/node_modules/lodash-es/_Map.js

@@ -0,0 +1,6 @@
+import o from "./_getNative.js";
+import r from "./_root.js";
+var p = o(r, "Map");
+export {
+  p as default
+};

package/dist/node_modules/lodash-es/_MapCache.js

@@ -0,0 +1,20 @@
+import r from "./_mapCacheClear.js";
+import m from "./_mapCacheDelete.js";
+import h from "./_mapCacheGet.js";
+import l from "./_mapCacheHas.js";
+import c from "./_mapCacheSet.js";
+function e(t) {
+  var o = -1, a = t == null ? 0 : t.length;
+  for (this.clear(); ++o < a; ) {
+    var p = t[o];
+    this.set(p[0], p[1]);
+  }
+}
+e.prototype.clear = r;
+e.prototype.delete = m;
+e.prototype.get = h;
+e.prototype.has = l;
+e.prototype.set = c;
+export {
+  e as default
+};

package/dist/node_modules/lodash-es/_Symbol.js

@@ -0,0 +1,5 @@
+import o from "./_root.js";
+var m = o.Symbol;
+export {
+  m as default
+};

package/dist/node_modules/lodash-es/_assocIndexOf.js

@@ -0,0 +1,10 @@
+import r from "./eq.js";
+function o(t, n) {
+  for (var e = t.length; e--; )
+    if (r(t[e][0], n))
+      return e;
+  return -1;
+}
+export {
+  o as default
+};