@useinsider/guido 1.0.2-beta.ab357f5 → 1.0.2-beta.ad1dcd9

package/README.md

@@ -643,6 +643,6 @@ ISC License
 ## 🎯 TODO:
 - CSS part should be optimized with variables & `sass-loader`.
 - Master Version Generator should be fixed.
-- Playwright integration
+- Playwright integrationBoilerplate/control.ts
 - Commitlint & Precommit Hooks integration
 - Get Pre-built display conditions from API

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

@@ -1,4 +1,7 @@
 import type { CompilerRule } from './html-compiler';
+type Extensions = {
+    unsubscribe?: boolean;
+};
 type Features = {
     dynamicContent?: boolean;
     saveAsTemplate?: boolean;
@@ -16,8 +19,13 @@ export type GuidoConfig = {
     useHeader?: boolean;
     emailHeader: EmailHeader;
     partner?: Partner;
+    extensions?: Extensions;
     features?: Features;
 };
+export type TemplateConfig = {
+    preselectedDynamicContentList: DynamicContent[];
+    selectedUnsubscribePages?: number[];
+};
 export type DynamicContent = {
     value: string;
     text: string;

package/dist/components/Guido.vue.d.ts

@@ -1,4 +1,4 @@
-import type { DynamicContent, GuidoConfig } from '@@/Types/generic';
+import type { DynamicContent, GuidoConfig, TemplateConfig } from '@@/Types/generic';
 import type { SavedTemplateDetails } from '@@/Types/stripo';
 type __VLS_Props = {
     templateId: string;
@@ -9,8 +9,8 @@ type __VLS_Props = {
     username?: string;
     html?: string;
     css?: string;
-    preselectedDynamicContentList: DynamicContent[];
     guidoConfig: GuidoConfig;
+    templateConfig?: TemplateConfig;
 };
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {
     dynamicContent: {

package/dist/components/Guido.vue.js

@@ -3,14 +3,14 @@ import a from "./Guido.vue2.js";
 import i from "../_virtual/_plugin-vue2_normalizer.js";
 var s = function() {
   var o = this, r = o._self._c, e = o._self._setupProxy;
-  return r("div", { staticClass: "guido-editor__wrapper", class: { "guido-editor__no-header": e.noHeader } }, [r(e.HeaderWrapper, { ref: "headerWrapperRef" }), e.editorStore.isPreviewModeOpen ? r(e.PreviewContainer) : o._e(), r("div", { directives: [{ name: "show", rawName: "v-show", value: !e.previewStore.isLoaded, expression: "!previewStore.isLoaded" }], staticClass: "guido-editor__container", class: { "guido-editor__no-header": e.noHeader }, attrs: { id: "guido-editor" } }), r(e.Toaster), r(e.SaveAsTemplateDrawer), !e.isTestPartner() && !e.isDevMode ? r(e.OnboardingWrapper) : o._e(), r(e.LoadingWrapper)], 1);
+  return r("div", { staticClass: "guido-editor__wrapper", class: { "guido-editor__no-header": e.noHeader } }, [r(e.HeaderWrapper, { ref: "headerWrapperRef" }), e.editorStore.isPreviewModeOpen ? r(e.PreviewContainer) : o._e(), r("div", { directives: [{ name: "show", rawName: "v-show", value: !e.previewStore.isLoaded, expression: "!previewStore.isLoaded" }], staticClass: "guido-editor__container", class: { "guido-editor__no-header": e.noHeader }, attrs: { id: "guido-editor" } }), r(e.Toaster), r(e.SaveAsTemplateDrawer), e.isTestPartner() ? o._e() : r(e.OnboardingWrapper), r(e.UnsubscribeWrapper), r(e.LoadingWrapper)], 1);
 }, t = [], d = /* @__PURE__ */ i(
   a,
   s,
   t,
   !1,
   null,
-  "cebb8ab0"
+  "85d64228"
 );
 const v = d.exports;
 export {

package/dist/components/Guido.vue2.js

@@ -1,18 +1,21 @@
-import { defineComponent as H, defineAsyncComponent as G, ref as M, computed as c, watch as R, onMounted as U, onUnmounted as x } from "vue";
-import { provideGuidoActions as F } from "../composables/useGuidoActions.js";
-import { usePartner as z } from "../composables/usePartner.js";
-import { useStripo as B } from "../composables/useStripo.js";
-import { DefaultUsername as K, DefaultMessageType as O, DefaultGuidoConfig as j } from "../enums/defaults.js";
-import q from "./organisms/base/Toaster.vue.js";
-import J from "./organisms/header/HeaderWrapper.vue.js";
-import Q from "./organisms/LoadingWrapper.vue.js";
-import V from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
-import { useStripoApi as X } from "../services/stripoApi.js";
-import { useDynamicContentStore as Y } from "../stores/dynamic-content.js";
-import { useEditorStore as Z } from "../stores/editor.js";
-import { usePreviewStore as $ } from "../stores/preview.js";
-import ee from "../node_modules/lodash-es/merge.js";
-const fe = /* @__PURE__ */ H({
+import { defineComponent as R, defineAsyncComponent as G, ref as x, computed as U, watch as F, onMounted as M, onUnmounted as z } from "vue";
+import { provideGuidoActions as B } from "../composables/useGuidoActions.js";
+import { usePartner as K } from "../composables/usePartner.js";
+import { useStripo as O } from "../composables/useStripo.js";
+import { migrate as I } from "../config/migrator/index.js";
+import { DefaultUsername as j, DefaultMessageType as q, DefaultGuidoConfig as J } from "../enums/defaults.js";
+import Q from "./organisms/base/Toaster.vue.js";
+import V from "./organisms/header/HeaderWrapper.vue.js";
+import X from "./organisms/LoadingWrapper.vue.js";
+import Y from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
+import Z from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
+import { useStripoApi as $ } from "../services/stripoApi.js";
+import { useDynamicContentStore as ee } from "../stores/dynamic-content.js";
+import { useEditorStore as oe } from "../stores/editor.js";
+import { usePreviewStore as te } from "../stores/preview.js";
+import { useUnsubscribeStore as ne } from "../stores/unsubscribe.js";
+import re from "../node_modules/lodash-es/merge.js";
+const Se = /* @__PURE__ */ R({
   __name: "Guido",
   props: {
     templateId: null,
@@ -23,49 +26,50 @@ const fe = /* @__PURE__ */ H({
     username: null,
     html: null,
     css: null,
-    preselectedDynamicContentList: null,
-    guidoConfig: null
+    guidoConfig: null,
+    templateConfig: null
   },
   emits: ["dynamic-content:open", "back", "save:start", "save:complete", "on-change", "ready"],
-  setup(P, { expose: I, emit: o }) {
-    const n = P, L = G(
+  setup(W, { expose: _, emit: o }) {
+    const d = W, L = G(
       () => import("./organisms/email-preview/PreviewContainer.vue.js")
-    ), _ = G(
+    ), k = G(
       () => import("./organisms/onboarding/OnboardingWrapper.vue.js")
-    ), d = M(), r = Y(), m = Z(), W = $(), t = c(() => m.hasChanges), a = n.preselectedDynamicContentList || [], { getPartnerName: l, getProductType: u, isTestPartner: k } = z(), A = c(() => !1), p = () => {
+    ), m = x(), s = ee(), u = ne(), l = oe(), A = te(), n = U(() => l.hasChanges), { getPartnerName: p, getProductType: g, isTestPartner: N } = K(), f = () => {
       var e;
-      return (e = d.value) == null ? void 0 : e.handleSave(!0);
+      return (e = m.value) == null ? void 0 : e.handleSave(!0);
     }, {
-      templateId: g,
-      userId: f,
-      guidoConfig: y,
-      html: v = "",
-      css: C = "",
-      partnerName: s = l(),
-      productType: i = u(),
-      messageType: h = O,
-      username: w = K
-    } = n;
-    window.GuidoConfig = ee(j, y), window.GuidoConfig.partner = {
-      partnerName: s,
+      templateId: y,
+      userId: v,
+      guidoConfig: b,
+      templateConfig: t,
+      html: r = "",
+      css: h = "",
+      partnerName: a = p(),
+      productType: i = g(),
+      messageType: C = q,
+      username: w = j
+    } = d, c = (t == null ? void 0 : t.preselectedDynamicContentList) || [];
+    window.GuidoConfig = re(J, b), window.GuidoConfig.partner = {
+      partnerName: a,
       productType: i,
-      messageType: h
+      messageType: C
     };
-    const { initPlugin: S } = B({
-      emailId: g,
-      userId: f,
+    const { initPlugin: S } = O({
+      emailId: y,
+      userId: v,
       username: w,
-      partnerName: s,
+      partnerName: a,
       productType: i,
-      preselectedDynamicContentList: a,
+      preselectedDynamicContentList: c,
       onReady: () => {
         console.debug("guido:ready"), o("ready");
       }
-    }), { getDefaultTemplate: D } = X(), N = c(() => {
+    }), { getDefaultTemplate: D } = $(), H = U(() => {
       var e;
       return !((e = window.GuidoConfig) != null && e.useHeader);
     });
-    F({
+    B({
       onBack: () => {
         console.debug("guido:back"), o("back");
       },
@@ -76,46 +80,47 @@ const fe = /* @__PURE__ */ H({
         console.debug("guido:save:complete", e), o("save:complete", e);
       }
     });
-    const b = (e) => {
-      console.debug("dynamic-content:close", e), r.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
-    }, T = () => {
+    const T = (e) => {
+      console.debug("dynamic-content:close", e), s.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
+    }, E = () => {
       console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
     };
-    return R(() => t.value, () => {
-      o("on-change", t.value);
-    }), U(async () => {
+    return F(() => n.value, () => {
+      o("on-change", n.value);
+    }), M(async () => {
       console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow");
       try {
+        u.selectedUnsubscribePages = (t == null ? void 0 : t.selectedUnsubscribePages) || [];
         let e = {
-          html: v,
-          css: C,
+          html: r && await I(r),
+          css: h,
           forceRecreate: !0
           // TODO: It should be false for old templates. We will communicate with Stripo
         };
-        e.html || (e = await D()), await S(e), r.selectedDynamicContentList = a;
+        e.html || (e = await D(), e.html = await I(e.html)), await S(e), s.selectedDynamicContentList = c;
       } catch (e) {
         console.error("Failed to initialize Stripo editor:", e);
       }
       document.addEventListener("dynamic-content:open", (e) => {
-        const E = e;
-        console.debug("dynamic-content:open", E.detail), o("dynamic-content:open", E.detail);
+        const P = e;
+        console.debug("dynamic-content:open", P.detail), o("dynamic-content:open", P.detail);
       });
-    }), x(() => {
+    }), z(() => {
       try {
         window.UIEditor.removeEditor();
       } catch {
         console.debug("Failed to remove Stripo editor: No editor found");
       }
-    }), I({
+    }), _({
       dynamicContent: {
-        insert: b,
-        close: T
+        insert: T,
+        close: E
       },
-      hasChanges: t,
-      saveSilent: p
-    }), { __sfc: !0, PreviewContainer: L, OnboardingWrapper: _, headerWrapperRef: d, dynamicContentStore: r, props: n, editorStore: m, previewStore: W, hasChanges: t, preselectedDynamicContentList: a, getPartnerName: l, getProductType: u, isTestPartner: k, isDevMode: A, saveSilent: p, templateId: g, userId: f, guidoConfig: y, html: v, css: C, partnerName: s, productType: i, messageType: h, username: w, emit: o, initPlugin: S, getDefaultTemplate: D, noHeader: N, insertDynamicContent: b, closeDynamicContent: T, Toaster: q, HeaderWrapper: J, LoadingWrapper: Q, SaveAsTemplateDrawer: V };
+      hasChanges: n,
+      saveSilent: f
+    }), { __sfc: !0, PreviewContainer: L, OnboardingWrapper: k, headerWrapperRef: m, dynamicContentStore: s, unsubscribeStore: u, props: d, editorStore: l, previewStore: A, hasChanges: n, getPartnerName: p, getProductType: g, isTestPartner: N, saveSilent: f, templateId: y, userId: v, guidoConfig: b, templateConfig: t, html: r, css: h, partnerName: a, productType: i, messageType: C, username: w, preselectedDynamicContentList: c, emit: o, initPlugin: S, getDefaultTemplate: D, noHeader: H, insertDynamicContent: T, closeDynamicContent: E, Toaster: Q, HeaderWrapper: V, LoadingWrapper: X, SaveAsTemplateDrawer: Y, UnsubscribeWrapper: Z };
   }
 });
 export {
-  fe as default
+  Se as default
 };

package/dist/components/organisms/unsubscribe/UnsubscribeBreadcrumb.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/dist/components/organisms/unsubscribe/UnsubscribeBreadcrumb.vue.js

@@ -0,0 +1,18 @@
+import s from "./UnsubscribeBreadcrumb.vue2.js";
+/* empty css                           */
+import a from "../../../_virtual/_plugin-vue2_normalizer.js";
+var o = function() {
+  var e = this, t = e._self._c, r = e._self._setupProxy;
+  return t(r.InBreadcrumb, { staticClass: "c-p", attrs: { "without-router": "", "active-tab": r.unsubscribeStore.activeType, "home-icon": !1, list: r.breadcrumbs, routes: [] }, on: { click: r.navigate } });
+}, c = [], n = /* @__PURE__ */ a(
+  s,
+  o,
+  c,
+  !1,
+  null,
+  "70835920"
+);
+const f = n.exports;
+export {
+  f as default
+};

package/dist/components/organisms/unsubscribe/UnsubscribeBreadcrumb.vue2.js

@@ -0,0 +1,16 @@
+import { defineComponent as o, computed as n } from "vue";
+import { TYPE_TRANSLATIONS as s } from "../../../enums/unsubscribe.js";
+import { useUnsubscribeStore as c } from "../../../stores/unsubscribe.js";
+import { InBreadcrumb as m } from "@useinsider/design-system-vue";
+const f = /* @__PURE__ */ o({
+  __name: "UnsubscribeBreadcrumb",
+  setup(a) {
+    const r = c(), t = n(() => r.getSelectedCollection.map((e) => ({ value: e, text: s[e] })));
+    return { __sfc: !0, unsubscribeStore: r, breadcrumbs: t, navigate: (e) => {
+      r.activeType = e.value;
+    }, InBreadcrumb: m };
+  }
+});
+export {
+  f as default
+};

package/dist/components/organisms/unsubscribe/UnsubscribePageSelection.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/dist/components/organisms/unsubscribe/UnsubscribePageSelection.vue.js

@@ -0,0 +1,24 @@
+import a from "./UnsubscribePageSelection.vue2.js";
+/* empty css                              */
+import n from "../../../_virtual/_plugin-vue2_normalizer.js";
+var o = function() {
+  var r = this, e = r._self._c, t = r._self._setupProxy;
+  return e(t.WpDrawer, { attrs: { id: "unsubscribe-modal", "description-status": "", size: "large", "footer-button-group-options": t.footerButtonGroupOptions, status: t.unsubscribeStore.pageSelectionDrawerStatus, "title-text": t.trans("newsletter.select-a-template") }, on: { cancelOrBackButtonEvent: t.handleBack, onCloseEvent: t.closeModal, primaryButtonEvent: t.handleSave }, scopedSlots: r._u([{ key: "headerBottomSlot", fn: function() {
+    return [e(t.UnsubscribeBreadcrumb, { staticClass: "px-5 py-3" })];
+  }, proxy: !0 }]) }, [e("div", { staticClass: "d-g templates-wrapper" }, r._l(t.unsubscribeStore.getTemplatesByActiveType, function(s) {
+    return e("div", { key: s.id, staticClass: "template-wrapper", on: { click: function(u) {
+      return t.selectTemplate(s.id);
+    } } }, [e(t.InContainer, { staticClass: "template-container o-h", class: { selected: t.unsubscribeStore.getSelectedTemplateByActiveType === s.id }, attrs: { border: t.getBorderClass(s.id) } }, [e("div", { staticClass: "w-1 h-1 d-f j-c-c a-i-c" }, [e("img", { staticClass: "w-1 h-1 thumbnail o-h", attrs: { alt: s.name, src: s.thumbnail } })])]), e("div", { staticClass: "mt-1 f-s-1" }, [r._v(" " + r._s(s.name) + " ")])], 1);
+  }), 0)]);
+}, i = [], c = /* @__PURE__ */ n(
+  a,
+  o,
+  i,
+  !1,
+  null,
+  "a86fc486"
+);
+const _ = c.exports;
+export {
+  _ as default
+};

package/dist/components/organisms/unsubscribe/UnsubscribePageSelection.vue2.js

@@ -0,0 +1,64 @@
+import { defineComponent as f, ref as y, computed as n, watch as T } from "vue";
+import g from "../../wrappers/WpDrawer.vue.js";
+import { useToaster as S } from "../../../composables/useToaster.js";
+import { useTranslations as v } from "../../../composables/useTranslations.js";
+import { ToasterTypeOptions as B } from "../../../enums/toaster.js";
+import { useUnsubscribeStore as w } from "../../../stores/unsubscribe.js";
+import { InContainer as C } from "@useinsider/design-system-vue";
+import h from "./UnsubscribeBreadcrumb.vue.js";
+const E = /* @__PURE__ */ f({
+  __name: "UnsubscribePageSelection",
+  setup(_) {
+    const s = v(), e = w(), { showToaster: a } = S(), o = y(!1), c = n(() => e.isActiveTypeLastInCollection ? o.value ? s("unsubscription-preference.applying-changes") : s("statistics.apply") : s("products.select-and-continue")), i = n(() => e.pageSelectionUpdateStatus && e.isActiveTypeFirstInCollection ? s("products.cancel") : s("newsletter.back")), p = n(() => ({
+      primaryButton: {
+        styling: "solid",
+        type: "primary",
+        labelText: c.value,
+        loadingStatus: o.value,
+        disabledStatus: !1
+      },
+      cancelOrBackButton: {
+        styling: "ghost",
+        type: "secondary",
+        labelText: i.value,
+        disabledStatus: o.value
+      }
+    })), u = (t) => e.getSelectedTemplateByActiveType === t ? "bor-w-3 bor-s-s bor-c-7" : "bor-w-1 bor-s-s bor-c-6", r = (t) => {
+      e.pageSelectionDrawerStatus = !1, t && setTimeout(() => {
+        t();
+      }, 500);
+    }, m = () => {
+      if (e.isActiveTypeFirstInCollection) {
+        r(), e.pageSelectionUpdateStatus || (e.typeSelectionDrawerStatus = !0);
+        return;
+      }
+      e.setPreviousType();
+    }, d = () => {
+      if (e.isActiveTypeLastInCollection) {
+        o.value = !0;
+        const t = e.selectedCollectionType, l = e.getSelectedTemplatesByCollection(t);
+        e.addUnsubscribePages(l), document.dispatchEvent(new CustomEvent("unsubscribe:select", {
+          detail: {
+            collectionType: t,
+            selectedPages: l
+          }
+        })), r(() => {
+          o.value = !1, a({
+            type: B.Success,
+            message: s("global-unsubscribe.pages-were-attached")
+          });
+        });
+        return;
+      }
+      e.setNextType();
+    }, b = (t) => {
+      e.setSelectedTemplate(t);
+    };
+    return T(() => e.pageSelectionDrawerStatus, (t) => {
+      t && e.pageSelectionUpdateStatus && e.fetchTemplates();
+    }), { __sfc: !0, trans: s, unsubscribeStore: e, showToaster: a, isApplying: o, getPrimaryButtonText: c, getCancelOrBackButtonText: i, footerButtonGroupOptions: p, getBorderClass: u, closeModal: r, handleBack: m, handleSave: d, selectTemplate: b, WpDrawer: g, InContainer: C, UnsubscribeBreadcrumb: h };
+  }
+});
+export {
+  E as default
+};

package/dist/components/organisms/unsubscribe/UnsubscribeTypeSelection.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/dist/components/organisms/unsubscribe/UnsubscribeTypeSelection.vue.js

@@ -0,0 +1,18 @@
+import n from "./UnsubscribeTypeSelection.vue2.js";
+/* empty css                              */
+import o from "../../../_virtual/_plugin-vue2_normalizer.js";
+var i = function() {
+  var e = this, s = e._self._c, t = e._self._setupProxy;
+  return s(t.WpDrawer, { attrs: { id: "unsubscribe-modal", "description-status": "", "description-text": t.descriptionText, "footer-button-group-options": t.footerButtonGroupOptions, status: t.unsubscribeStore.typeSelectionDrawerStatus, "title-text": t.trans("unsubscription-preference.select-unsubscribe-page-title") }, on: { cancelOrBackButtonEvent: t.closeModal, onCloseEvent: t.closeModal, primaryButtonEvent: t.selectCollection } }, [s(t.InSegments, { staticClass: "w-1", attrs: { "with-icon": "", align: "vertical", disable: t.isSelecting, "segment-list": t.segmentList, selected: t.selectedCollection, "skeleton-sizing": { width: 495, height: 180 }, "skeleton-status": t.skeletonStatus }, on: { click: t.changeCollection } })], 1);
+}, r = [], c = /* @__PURE__ */ o(
+  n,
+  i,
+  r,
+  !1,
+  null,
+  "dda47b76"
+);
+const d = c.exports;
+export {
+  d as default
+};

package/dist/components/organisms/unsubscribe/UnsubscribeTypeSelection.vue2.js

@@ -0,0 +1,108 @@
+import { defineComponent as h, ref as b, computed as m, watch as _ } from "vue";
+import v from "../../wrappers/WpDrawer.vue.js";
+import { useToaster as B } from "../../../composables/useToaster.js";
+import { useTranslations as N } from "../../../composables/useTranslations.js";
+import { ToasterTypeOptions as U } from "../../../enums/toaster.js";
+import { PAGE_TYPES as l, ACADEMY_LINK as w, UNSUBSCRIBE_PAGES_LINK as P, TYPE_TRANSLATIONS as R } from "../../../enums/unsubscribe.js";
+import { useUnsubscribeStore as D } from "../../../stores/unsubscribe.js";
+import { InSegments as I } from "@useinsider/design-system-vue";
+const z = /* @__PURE__ */ h({
+  __name: "UnsubscribeTypeSelection",
+  setup(G) {
+    const e = N(), { showToaster: f } = B(), t = D(), n = b(!1), i = b(!0), r = b(l.GLOBAL_UNSUBSCRIBE), S = e(
+      "unsubscription-preference.select-unsubscribe-page-description",
+      { action: `<a href="${w}" target="_blank">${e("ds-rules.visit-academy")}</a>` }
+    ), T = m(() => [
+      {
+        description: e("unsubscription-preference.type-global-unsubscribe-description"),
+        icon: "line-contact-global-unsub-page",
+        text: e("unsubscription-preference.type-global-unsubscribe"),
+        value: l.GLOBAL_UNSUBSCRIBE,
+        disable: t.isGlobalUnsubscribeDisabled,
+        tooltipText: t.isGlobalUnsubscribeDisabled ? e("unsubscription-preference.global-unsub-added") : ""
+      },
+      {
+        description: e("unsubscription-preference.type-subscription-preferences-center-description"),
+        icon: "line-contact-sub-pref-center-page",
+        text: e("unsubscription-preference.type-subscription-preferences-center"),
+        value: l.SUBSCRIPTION_PREFERENCE_CENTER,
+        disable: t.isSubscriptionPreferencesCenterDisabled,
+        tooltipText: t.isSubscriptionPreferencesCenterDisabled ? e("unsubscription-preference.pref-center-added") : ""
+      }
+    ]), y = m(() => ({
+      primaryButton: {
+        styling: "solid",
+        type: "primary",
+        labelText: e(
+          n.value ? "unsubscription-preference.selecting-type" : "products.select-and-continue"
+        ),
+        loadingStatus: n.value,
+        disabledStatus: !1,
+        skeletonStatus: i.value,
+        skeletonSizing: { width: 168, height: 40 }
+      },
+      cancelOrBackButton: {
+        styling: "ghost",
+        type: "secondary",
+        labelText: e("products.cancel"),
+        disabledStatus: n.value,
+        skeletonStatus: i.value,
+        skeletonSizing: { width: 78, height: 40 }
+      }
+    })), d = (s) => {
+      t.typeSelectionDrawerStatus = !1, document.dispatchEvent(new CustomEvent("unsubscribe:cancel")), s && setTimeout(() => {
+        s();
+      }, 500);
+    }, E = (s) => {
+      r.value = s;
+    }, g = () => {
+      const s = t.hasTemplatesByCollectionType, o = [];
+      if (Object.entries(s).forEach(([c, p]) => {
+        p || o.push(Number(c));
+      }), o.length === 0)
+        return !0;
+      const a = o.map((c) => R[c]);
+      let u = "";
+      if (o.length === 1)
+        u = e("unsubscription-preference.create-page-to-continue", {
+          page: a[0]
+        });
+      else if (o.length === 2)
+        u = e("unsubscription-preference.create-pages-to-continue", {
+          page1: a[0],
+          page2: a[1]
+        });
+      else {
+        const c = a.pop() ?? "", p = a.join(", ");
+        u = e("unsubscription-preference.create-multiple-pages-to-continue", {
+          pages: p,
+          lastPage: c
+        });
+      }
+      return f({
+        type: U.Warning,
+        message: u,
+        actionButton: {
+          text: "Go to Unsubscribe Pages",
+          onClick: () => {
+            window.location.href = P;
+          }
+        }
+      }), !1;
+    }, C = async () => {
+      if (n.value = !0, await t.fetchTemplates(), t.setCollection(r.value), !g()) {
+        n.value = !1, d();
+        return;
+      }
+      n.value = !1, t.typeSelectionDrawerStatus = !1, t.pageSelectionDrawerStatus = !0;
+    };
+    return _(() => t.typeSelectionDrawerStatus, (s) => {
+      s && (i.value = !0, r.value = l.GLOBAL_UNSUBSCRIBE, t.isGlobalUnsubscribeDisabled && (r.value = t.isSubscriptionPreferencesCenterDisabled ? 0 : l.SUBSCRIPTION_PREFERENCE_CENTER), setTimeout(() => {
+        i.value = !1;
+      }, 1e3));
+    }), { __sfc: !0, trans: e, showToaster: f, unsubscribeStore: t, isSelecting: n, skeletonStatus: i, selectedCollection: r, descriptionText: S, segmentList: T, footerButtonGroupOptions: y, closeModal: d, changeCollection: E, validateTemplates: g, selectCollection: C, WpDrawer: v, InSegments: I };
+  }
+});
+export {
+  z as default
+};

package/dist/components/organisms/unsubscribe/UnsubscribeWrapper.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/dist/components/organisms/unsubscribe/UnsubscribeWrapper.vue.js

@@ -0,0 +1,18 @@
+import o from "./UnsubscribeWrapper.vue2.js";
+import t from "../../../_virtual/_plugin-vue2_normalizer.js";
+var _ = function() {
+  var s;
+  var e = this, n = e._self._c, r = e._self._setupProxy;
+  return (s = r.config.extensions) != null && s.unsubscribe ? n("div", [n(r.UnsubscribeTypeSelection), n(r.UnsubscribePageSelection)], 1) : e._e();
+}, c = [], i = /* @__PURE__ */ t(
+  o,
+  _,
+  c,
+  !1,
+  null,
+  null
+);
+const l = i.exports;
+export {
+  l as default
+};

package/dist/components/organisms/unsubscribe/UnsubscribeWrapper.vue2.js

@@ -0,0 +1,12 @@
+import { defineComponent as t, defineAsyncComponent as e } from "vue";
+import { useConfig as r } from "../../../composables/useConfig.js";
+const m = /* @__PURE__ */ t({
+  __name: "UnsubscribeWrapper",
+  setup(i) {
+    const n = e(() => import("./UnsubscribePageSelection.vue.js")), o = e(() => import("./UnsubscribeTypeSelection.vue.js")), { config: s } = r();
+    return { __sfc: !0, UnsubscribePageSelection: n, UnsubscribeTypeSelection: o, config: s };
+  }
+});
+export {
+  m as default
+};

package/dist/components/wrappers/WpDrawer.vue.d.ts

@@ -2,7 +2,7 @@ import type { FooterButtonGroupOptions } from '@@/Types/wrappers/wp-drawer';
 interface Props {
     id: string;
     className?: string;
-    size?: string;
+    size?: 'small' | 'medium' | 'large';
     closeOnOutsideClick?: boolean;
     descriptionStatus?: boolean;
     descriptionText?: string;
@@ -10,9 +10,11 @@ interface Props {
     status: boolean;
     titleText: string;
 }
-declare var __VLS_12: {};
+declare var __VLS_12: {}, __VLS_14: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_12) => any;
+    headerBottomSlot?: (props: typeof __VLS_12) => any;
+} & {
+    default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
     className: string;
@@ -32,7 +34,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<
     descriptionText: string;
 }>>>, {
     className: string;
-    size: string;
+    size: "small" | "medium" | "large";
     closeOnOutsideClick: boolean;
     descriptionStatus: boolean;
     descriptionText: string;

package/dist/components/wrappers/WpDrawer.vue.js

@@ -1,6 +1,6 @@
 import r from "./WpDrawer.vue2.js";
 import s from "../../_virtual/_plugin-vue2_normalizer.js";
-var i = function() {
+var u = function() {
   var t = this, n = t._self._c, e = t._self._setupProxy;
   return n(e.InDrawer, { class: t.className, attrs: { id: t.id, "footer-status": "", "close-on-outside-click": t.closeOnOutsideClick, "description-status": t.descriptionStatus, "description-text": t.descriptionText, "footer-button-group-options": t.footerButtonGroupOptions, size: t.size, status: t.status, "title-text": t.titleText }, on: { cancelOrBackButtonEvent: function(o) {
     return e.emit("cancelOrBackButtonEvent");
@@ -8,13 +8,15 @@ var i = function() {
     return e.emit("onCloseEvent");
   }, primaryButtonEvent: function(o) {
     return e.emit("primaryButtonEvent");
-  } }, scopedSlots: t._u([{ key: "contentSlot", fn: function() {
+  } }, scopedSlots: t._u([t.$slots.headerBottomSlot ? { key: "headerBottomSlot", fn: function() {
+    return [t._t("headerBottomSlot")];
+  }, proxy: !0 } : null, { key: "contentSlot", fn: function() {
     return [n("div", [t._t("default")], 2)];
   }, proxy: !0 }], null, !0) });
-}, u = [], c = /* @__PURE__ */ s(
+}, i = [], c = /* @__PURE__ */ s(
   r,
-  i,
   u,
+  i,
   !1,
   null,
   null

package/dist/composables/useHtmlValidator.d.ts

@@ -1,3 +1,4 @@
+import type { DynamicContent } from '@@/Types/generic';
 export declare const useHtmlValidator: () => {
-    validateHtml: (html: string, customFields: string[], isOnSaveValidation?: boolean) => Promise<boolean>;
+    validateHtml: (html: string, customFields: DynamicContent[], isOnSaveValidation?: boolean) => Promise<boolean>;
 };