@useinsider/guido 1.0.3-beta.df46976 → 1.0.3-beta.dfb1fcf

package/dist/stores/dynamic-content.js

@@ -1,8 +1,8 @@
 import { removeDuplicatesFromArray as n } from "../utils/arrayUtil.js";
 import { defineStore as a } from "pinia";
-const s = a("dynamicContent", {
+const s = a("guidoDynamicContent", {
   state: () => ({
-    selectedDynamicContent: { text: "", value: "", fallback: "" },
+    selectedDynamicContent: { text: "", value: "" },
     selectedDynamicContentList: []
   }),
   actions: {

package/dist/stores/editor.js

@@ -1,5 +1,5 @@
 import { defineStore as e } from "pinia";
-const o = e("editor", {
+const o = e("guidoEditor", {
   state: () => ({
     loadingStatus: !0,
     isCodeEditorOpen: !1,

package/dist/stores/onboarding.js

@@ -14,41 +14,41 @@ const e = () => ({
   },
   userModalState: {},
   isFetched: !1
-}), g = s("onboarding", {
+}), c = s("guidoOnboarding", {
   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];
+    getOnboarding: (n) => (i) => n.onboardings[i],
+    isActive: (n) => (i) => n.onboardings[i].isActive,
+    getCurrentCard: (n) => (i) => {
+      const o = n.onboardings[i];
+      return o.config[o.cardIndex];
     },
     getGenericCurrentCard: (n) => {
-      const { genericOnboarding: o } = n.onboardings;
-      return o.config[o.cardIndex];
+      const { genericOnboarding: i } = n.onboardings;
+      return i.config[i.cardIndex];
     },
     getTextBlockCurrentCard: (n) => {
-      const { textBlockOnboarding: o } = n.onboardings;
-      return o.config[o.cardIndex];
+      const { textBlockOnboarding: i } = n.onboardings;
+      return i.config[i.cardIndex];
     },
     getVersionHistoryCurrentCard: (n) => {
-      const { versionHistoryOnboarding: o } = n.onboardings;
-      return o.config[o.cardIndex];
+      const { versionHistoryOnboarding: i } = n.onboardings;
+      return i.config[i.cardIndex];
     },
     getAmpCurrentCard: (n) => {
-      const { ampOnboarding: o } = n.onboardings;
-      return o.config[o.cardIndex];
+      const { ampOnboarding: i } = n.onboardings;
+      return i.config[i.cardIndex];
     },
-    shouldShowOnboarding: (n) => (o) => {
-      const i = n.userModalState.Guido;
-      return o === "newVersionPopup" && (i != null && i.genericOnboarding) ? !1 : i ? !i[o] : !0;
+    shouldShowOnboarding: (n) => (i) => {
+      const o = n.userModalState.Guido;
+      return i === "newVersionPopup" && (o != null && o.genericOnboarding) ? !1 : o ? !o[i] : !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 = []);
+      Object.keys(this.onboardings).forEach((i) => {
+        const o = i;
+        o !== n && this.onboardings[o].isActive && (this.onboardings[o].isActive = !1, this.onboardings[o].cardIndex = 0, this.onboardings[o].config = []);
       });
     },
     start(n) {
@@ -63,8 +63,8 @@ const e = () => ({
     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);
+    setConfig(n, i) {
+      this.onboardings[n].config = i ?? [], 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");
@@ -81,15 +81,15 @@ const e = () => ({
     async fetchUserModalState() {
       if (this.isFetched)
         return;
-      const { fetchUserModalState: n } = t(), o = await n();
-      this.userModalState = o, this.isFetched = !0;
+      const { fetchUserModalState: n } = t(), i = await n();
+      this.userModalState = i, this.isFetched = !0;
     },
-    async setUserModalState(n, o, i) {
+    async setUserModalState(n, i, o) {
       const { setUserModalState: r } = t();
-      await r(n, o, i), this.isFetched = !1, await this.fetchUserModalState();
+      await r(n, i, o), this.isFetched = !1, await this.fetchUserModalState();
     }
   }
 });
 export {
-  g as useOnboardingStore
+  c as useOnboardingStore
 };

package/dist/stores/preview.js

@@ -6,7 +6,7 @@ const s = () => ({
   templateHtml: "",
   isLoaded: !1,
   isAMPErrorModalVisible: !1
-}), a = e("preview", {
+}), a = e("guidoPreview", {
   state: () => s(),
   getters: {
     isAMPModeEnabled: (t) => t.emailFormat === "AMP",

package/dist/stores/recommendation.js

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

package/dist/stores/save-as-template.js

@@ -17,7 +17,7 @@ const r = () => ({
     editor: 2,
     message: 1
   }
-}), n = i("saveAsTemplate", {
+}), g = i("guidoSaveAsTemplate", {
   state: () => r(),
   getters: {
     getTemplateName: (e) => e.templateName.trim(),
@@ -44,5 +44,5 @@ const r = () => ({
   }
 });
 export {
-  n as useSaveAsTemplateStore
+  g as useSaveAsTemplateStore
 };

package/dist/stores/toaster.js

@@ -8,7 +8,7 @@ const a = () => ({
   withIcon: !0,
   withoutLeftMargin: !1,
   actionButton: void 0
-}), u = i("toaster", {
+}), u = i("guidoToaster", {
   state: () => a(),
   getters: {
     shouldAutoHide: (t) => t.status && !!t.text

package/dist/stores/unsubscribe.js

@@ -12,7 +12,7 @@ const p = () => ({
   typeSelectionDrawerStatus: !1,
   isGlobalUnsubscribeDisabled: !1,
   isSubscriptionPreferencesCenterDisabled: !1
-}), g = d("unsubscribe", {
+}), g = d("guidoUnsubscribe", {
   state: () => p(),
   getters: {
     getSelectedCollection: (e) => i[e.selectedCollectionType],

package/dist/stores/version-history.js

@@ -5,13 +5,13 @@ const e = () => ({
   description: "",
   authorId: "",
   authorName: ""
-}), r = () => ({
+}), i = () => ({
   previousPatch: e(),
   currentPatch: e(),
   nextPatch: e(),
   editorVisualMode: "desktop"
-}), o = a("versionHistory", {
-  state: () => r(),
+}), r = a("guidoVersionHistory", {
+  state: () => i(),
   getters: {
     hasPreviousPatch: (t) => !!t.previousPatch.id,
     hasCurrentPatch: (t) => !!t.currentPatch.id,
@@ -24,5 +24,5 @@ const e = () => ({
   }
 });
 export {
-  o as useVersionHistoryStore
+  r as useVersionHistoryStore
 };

package/dist/utils/dateUtil.js

@@ -1,11 +1,37 @@
-import { DEFAULT_DATE_FORMAT_OPTIONS as o } from "../enums/date.js";
-const c = (t, r = o, e = "en-US") => {
+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 n = new Date(t);
-  return new Intl.DateTimeFormat(e, r).format(n);
-}, m = (t) => t ? Math.floor(Date.now() / 1e3) >= t : !1;
+  const e = new Date(t);
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: !1
+  }).format(e);
+}, h = (t) => t ? Math.floor(Date.now() / 1e3) >= t : !1;
 export {
-  c as formatPatchDate,
-  m as isAfterDate
+  m as convertToDateObject,
+  T as formatPatchDate,
+  D as formatShortDate,
+  h as isAfterDate,
+  u as localTz,
+  s as locale,
+  f as timezone
 };

package/dist/utils/environmentUtil.js

@@ -0,0 +1,4 @@
+const n = () => window.location.hostname.split(".")[2];
+export {
+  n as getEnvironmentPrefix
+};

package/dist/utils/genericUtil.js

@@ -1,15 +1,26 @@
-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}}}`
+const s = (e) => {
+  const n = e.value.match(/\{\{([^}]+)\}\}/)[1].split("|").map((a) => a.trim()), [r] = n, l = {
+    text: e.label,
+    value: r || ""
+  };
+  if (n.length >= 2) {
+    const [, a, c] = n, o = a.includes("=") ? { key: a.split("=")[0].trim(), value: a.split("=")[1].trim() } : null;
+    o ? l.format = o : c || (l.fallback = a), c && (l.fallback = c);
+  }
+  return l;
+}, f = (e) => e.map((t) => t.format ? {
+  label: `${t.text} | ${t.format.key}=${t.format.value}`,
+  value: `{{${t.value}|${t.format.key}=${t.format.value}}}`
 } : {
-  label: a.fallback ? `${a.text} | ${a.fallback}` : a.text,
-  value: a.fallback ? `{{${a.value}|${a.fallback}}}` : `{{${a.value}}}`
-}), f = () => {
+  label: t.fallback ? `${t.text} | ${t.fallback}` : t.text,
+  value: t.fallback ? `{{${t.value}|${t.fallback}}}` : `{{${t.value}}}`
+}), u = () => {
   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);
+}, $ = (e = "", t = {}, n = !1) => Object.entries(t).reduce((r, [l, a]) => n && (a === "" || a === null || a === void 0) ? r.replace(`&${l}={${l}}`, "") : r.replace(`{${l}}`, String(a)), e);
 export {
-  o as dynamicContentToMergeTags,
-  f as getCsrfToken,
+  f as dynamicContentToMergeTags,
+  u as getCsrfToken,
+  s as mergeTagToDynamicContent,
   $ as replaceString
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "1.0.3-beta.df46976",
+  "version": "1.0.3-beta.dfb1fcf",
   "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",
@@ -31,7 +31,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@stripoinc/ui-editor-extensions": "3.0.0",
+    "@stripoinc/ui-editor-extensions": "3.1.0",
     "@useinsider/design-system-vue": "0.14.20",
     "@vueuse/core": "11.3.0",
     "lodash-es": "4.17.21",
@@ -80,5 +80,10 @@
   },
   "msw": {
     "workerDirectory": "public"
+  },
+  "guido": {
+    "stripo": {
+      "version": "2.46.0"
+    }
   }
 }

package/dist/enums/date.d.ts

@@ -1,13 +0,0 @@
-export declare const DEFAULT_DATE_FORMAT_OPTIONS: {
-    readonly month: "short";
-    readonly day: "numeric";
-    readonly hour: "2-digit";
-    readonly minute: "2-digit";
-    readonly second: "2-digit";
-    readonly hour12: false;
-};
-export declare const DATE_FORMAT_DD_MM_YYYY: {
-    readonly day: "2-digit";
-    readonly month: "2-digit";
-    readonly year: "numeric";
-};

package/dist/enums/onboarding.d.ts

@@ -1 +0,0 @@
-export declare const SERVICE_HOVER_SELECTORS: string[];

package/dist/extensions/Blocks/Recommendation/template.d.ts

@@ -1,6 +0,0 @@
-declare const migrationTemplate = "ADD YOUR MIGRATION HERE";
-/**
- * @returns The template for the default checkbox block
- */
-export declare function getDefaultTemplate(): string;
-export default migrationTemplate;

package/dist/extensions/Blocks/Recommendation/template.js

@@ -1,200 +0,0 @@
-const g = {
-  TITLE: "You May Also Like!"
-}, h = `
-    <td align="left" class="ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block">
-        <table width="100%" cellpadding="0" cellspacing="0" border="0">
-            <tr>
-                <td align="center" style="padding: 20px 0;">      
-                    <!-- Email Content Container -->
-                    <table class="container" 
-                        width="600" 
-                        cellpadding="0" 
-                        cellspacing="0" 
-                        border="0" 
-                        style="max-width: 600px; width: 100%; background-color: #ffffff;">   
-                        <!-- Heading -->
-                        <tr>
-                            <td class="heading" 
-                                style="
-                                    font-size: 28px; 
-                                    font-weight: bold; 
-                                    color: #333333; 
-                                    text-align: center; 
-                                    padding: 30px 20px;">
-                                {-{-TITLE-}-}
-                            </td>
-                        </tr>
-
-                        <!-- Product Rows -->
-                        {-{-PRODUCT_ROWS-}-}
-                    </table>
-                    <!-- End Email Content Container -->
-                </td>
-            </tr>
-        </table>
-    </td>
-`, u = `
-    <tr>
-        <td style="padding: 0 20px;">
-            <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
-                {-{-PRODUCTS-}-}
-            </table>
-        </td>
-    </tr>
-`, m = `
-    <td width="{-{-COLUMN_WIDTH-}-}" style="padding: 0 5px;" valign="top" height="100%">
-        <table width="100%" 
-            height="100%" 
-            cellpadding="0" 
-            cellspacing="0" 
-            border="0" 
-            class="product-card-wrapper" 
-            style="background-color: #f8f8f8;">
-            <tr>
-                <td class="product-image-cell" 
-                    valign="top" 
-                    style="background-color: #e8f0f2; padding: 30px; text-align: center;">
-                    <img src="{-{-PRODUCT_IMAGE-}-}" 
-                        alt="{-{-PRODUCT_NAME-}-}" width="120" style="max-width: 100%; height: auto; margin: 0 auto;">
-                </td>
-            </tr>
-        </table>
-    </td>
-`, b = `
-    <td width="{-{-COLUMN_WIDTH-}-}" style="padding: 0 5px;" valign="top" height="100%">
-        <table width="100%" 
-            height="100%" 
-            cellpadding="0" 
-            cellspacing="0" 
-            border="0" 
-            class="product-card-wrapper" 
-            style="background-color: #f8f8f8;">
-            <tr>
-                <td class="product-name-cell" 
-                    valign="top" 
-                    style="font-size: 16px; color: #333333; font-weight: 600; padding: 15px 10px; text-align: center;">
-                    {-{-PRODUCT_NAME-}-}
-                </td>
-            </tr>
-        </table>
-    </td>
-`, x = `
-    <td width="{-{-COLUMN_WIDTH-}-}" style="padding: 0 5px;" valign="top" height="100%">
-        <table width="100%" 
-            height="100%" 
-            cellpadding="0" 
-            cellspacing="0" 
-            border="0" 
-            class="product-card-wrapper" 
-            style="background-color: #f8f8f8;">
-            <tr>
-                <td class="price-cell" valign="top" style="padding: 10px; text-align: center;">
-                    <span class="current-price" style="font-size: 16px; color: #333333; font-weight: bold;">
-                        18,00 TRY
-                    </span>
-                    <span class="old-price" style="font-size: 14px; color: #999999; text-decoration: line-through;">
-                        20,00 TRY
-                    </span>
-                </td>
-            </tr>
-        </table>
-    </td>
-`, w = `
-    <td width="{-{-COLUMN_WIDTH-}-}" style="padding: 0 5px;" valign="top" height="100%">
-        <table width="100%" 
-            height="100%" 
-            cellpadding="0" 
-            cellspacing="0" 
-            border="0" 
-            class="product-card-wrapper" 
-            style="background-color: #f8f8f8;">
-            <tr>
-                <td class="button-cell" valign="top" style="padding: 15px 10px 20px 10px; text-align: center;">
-                    <a href="#" 
-                        class="buy-button" 
-                        style="
-                            display: inline-block;
-                            width: 90%; 
-                            max-width: 150px; 
-                            padding: 12px 20px; 
-                            background-color: #ffffff; 
-                            color: #333333; 
-                            text-decoration: none; 
-                            border: 2px solid #cccccc; 
-                            font-size: 16px; 
-                            box-sizing: border-box;">
-                            Buy
-                    </a>
-                </td>
-            </tr>
-        </table>
-    </td>
-`, f = `
-    <tr>
-        <td class="spacer" style="height: 20px;"></td>
-    </tr>
-`;
-function T() {
-  const c = [
-    {
-      name: "Beanie with Logo",
-      image: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/08/beanie-with-logo-1.jpg",
-      price: "18,00 TRY",
-      oldPrice: "20,00 TRY",
-      url: "https://example.com/product/1"
-    },
-    {
-      name: "Belt",
-      image: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/09/belt-2.jpg",
-      price: "55,00 TRY",
-      oldPrice: "65,00 TRY",
-      url: "https://example.com/product/2"
-    },
-    {
-      name: "Beanie",
-      image: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/08/beanie-with-logo-1.jpg",
-      price: "18,00 TRY",
-      oldPrice: "20,00 TRY",
-      url: "https://example.com/product/3"
-    },
-    {
-      name: "Album",
-      image: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/12/poster_2_up.jpg",
-      price: "15,00 TRY",
-      oldPrice: "15,00 TRY",
-      url: "https://example.com/product/4"
-    },
-    {
-      name: "Flying Ninja with a very long product name",
-      image: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/09/belt-2.jpg",
-      price: "12,00 TRY",
-      oldPrice: "15,00 TRY",
-      url: "https://example.com/product/5"
-    },
-    {
-      name: "Single",
-      image: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/12/poster_2_up.jpg",
-      price: "22.555,00 TRY",
-      oldPrice: "33.989,00 TRY",
-      url: "https://example.com/product/6"
-    }
-  ], l = 3, d = (100 / l).toFixed(2), a = [];
-  for (let t = 0; t < c.length; t += l)
-    a.push(c.slice(t, t + l));
-  let e = "";
-  return a.forEach((t, s) => {
-    s > 0 && (e += f);
-    let p = "", r = "", n = "", i = "";
-    t.forEach((o) => {
-      p += m.replace("{-{-PRODUCT_IMAGE-}-}", o.image).replace("{-{-PRODUCT_NAME-}-}", o.name), r += b.replace("{-{-PRODUCT_NAME-}-}", o.name), n += x, i += w;
-    }), e += u.replace("{-{-PRODUCTS-}-}", `
-            <tr>${p}</tr>
-            <tr>${r}</tr>
-            <tr>${n}</tr>
-            <tr>${i}</tr>
-        `), e = e.replaceAll("{-{-COLUMN_WIDTH-}-}", `${d}%`);
-  }), h.replace("{-{-TITLE-}-}", g.TITLE).replace("{-{-PRODUCT_ROWS-}-}", e);
-}
-export {
-  T as getDefaultTemplate
-};

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

@@ -1,6 +0,0 @@
-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.d.ts

@@ -1,16 +0,0 @@
-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;
-}

package/dist/utils/dateUtil.d.ts

@@ -1,2 +0,0 @@
-export declare const formatPatchDate: (timestamp: number, format?: Intl.DateTimeFormatOptions, locale?: string) => string;
-export declare const isAfterDate: (timestamp: number) => boolean;