@feedmepos/mf-connect 0.1.114-prod → 0.1.115-dev

package/dist/Marketing-DCco__2F.js

@@ -0,0 +1,273 @@
+import { defineComponent as M, resolveComponent as p, openBlock as d, createBlock as N, unref as c, ref as _, watch as L, createElementBlock as f, createVNode as l, withCtx as k, createElementVNode as r, toDisplayString as w, withModifiers as P, createStaticVNode as H, computed as V, onMounted as j, nextTick as z, onUnmounted as G, Fragment as $, renderList as B, createCommentVNode as q } from "vue";
+import { _ as K } from "./campaign-CpzFl8Vr.js";
+import { u as b } from "./vue-i18n-DWGiC_vs.js";
+import { u as Z, m as J } from "./useMarketingMaterialActions-B-Wib5ga.js";
+import { u as O } from "./remy-Qz_pNsUS.js";
+import { useRouter as Q } from "vue-router";
+import "./index-feCrYhi6.js";
+import { R as W } from "./app-CgimGODl.js";
+const X = /* @__PURE__ */ M({
+  __name: "GenerateMaterialButton",
+  setup(u) {
+    const { t: m } = b(), i = O();
+    function a() {
+      i.activate({
+        command: "generateMarketingMaterial",
+        fullscreen: !0,
+        forceNewConversation: !0
+      });
+    }
+    return (e, n) => {
+      const v = p("FmButton");
+      return d(), N(v, {
+        label: c(m)("connect.marketing.emptyState.action"),
+        "prepend-icon": "wand_stars",
+        onClick: a
+      }, null, 8, ["label"]);
+    };
+  }
+}), Y = { class: "text-fm-color-typo-error fm-typo-en-body-md-400" }, ee = /* @__PURE__ */ M({
+  __name: "MarketingMaterialItemActionButton",
+  props: {
+    material: {}
+  },
+  emits: ["update:menuOpened", "deleted"],
+  setup(u, { emit: m }) {
+    const i = u, a = m, { t: e } = b(), n = _(!1);
+    L(n, (o) => {
+      a("update:menuOpened", o);
+    });
+    const {
+      shareMaterial: v,
+      downloadMaterialImage: t,
+      copyMaterialLink: s,
+      deleteMaterial: C
+    } = Z();
+    async function F() {
+      n.value = !1, await v(i.material);
+    }
+    async function x() {
+      n.value = !1, await t(i.material.imageUrl);
+    }
+    async function I() {
+      n.value = !1, await s(i.material.imageUrl);
+    }
+    async function A() {
+      n.value = !1, await C(i.material) && a("deleted", i.material._id);
+    }
+    return (o, g) => {
+      const S = p("FmButton"), y = p("FmMenuItem"), h = p("FmMenuDivider"), R = p("FmIcon"), T = p("FmMenu");
+      return d(), f("div", null, [
+        l(T, {
+          placement: "right-start",
+          shift: !0,
+          "model-value": n.value,
+          onMenuChanged: g[0] || (g[0] = (U) => n.value = U)
+        }, {
+          "menu-button": k(() => [
+            l(S, {
+              icon: "more_vert",
+              variant: "tertiary",
+              size: "md"
+            })
+          ]),
+          default: k(() => [
+            l(y, {
+              icon: "share",
+              label: c(e)("connect.marketing.actions.share"),
+              onClick: F
+            }, null, 8, ["label"]),
+            l(y, {
+              icon: "download",
+              label: c(e)("connect.marketing.actions.download"),
+              onClick: x
+            }, null, 8, ["label"]),
+            l(y, {
+              icon: "content_copy",
+              label: c(e)("connect.marketing.actions.copyLink"),
+              onClick: I
+            }, null, 8, ["label"]),
+            l(h),
+            l(y, { onClick: A }, {
+              prepend: k(() => [
+                l(R, {
+                  name: "delete",
+                  size: "md",
+                  color: "typo-error",
+                  outline: ""
+                })
+              ]),
+              label: k(() => [
+                r("div", Y, w(c(e)("connect.common.delete")), 1)
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["model-value"])
+      ]);
+    };
+  }
+}), te = { class: "h-[205.5px] w-full overflow-hidden bg-fm-color-neutral-gray-100" }, ne = ["src", "alt"], ae = { class: "p-3" }, oe = { class: "flex items-start justify-between gap-2" }, le = { class: "space-y-1 overflow-hidden" }, re = { class: "font-semibold text-sm text-gray-900 truncate" }, ie = { class: "text-xs text-gray-500 line-clamp-2" }, se = {
+  key: 1,
+  class: "rounded-lg overflow-hidden border border-transparent fm-shadow-light-100 animate-pulse bg-white"
+}, D = /* @__PURE__ */ M({
+  __name: "MarketingMaterialItem",
+  props: {
+    material: {}
+  },
+  emits: ["deleted"],
+  setup(u, { emit: m }) {
+    const i = m, { t: a } = b(), e = Q(), n = _(!1);
+    return (v, t) => u.material ? (d(), f("div", {
+      key: 0,
+      class: "group rounded-lg overflow-hidden cursor-pointer border border-transparent hover:border-blue-500 hover:bg-blue-50 transition-[border-color,background-color] fm-shadow-light-100 hover:fm-shadow-light-300",
+      onClick: t[3] || (t[3] = () => {
+        n.value || c(e).push({
+          name: c(W)["$connect-MARKETING_MATERIAL_EDIT"],
+          query: { id: u.material._id }
+        });
+      })
+    }, [
+      r("div", te, [
+        r("img", {
+          src: u.material.imageUrl,
+          alt: c(a)("connect.marketing.title"),
+          class: "w-full h-full object-cover"
+        }, null, 8, ne)
+      ]),
+      r("div", ae, [
+        r("div", oe, [
+          r("div", le, [
+            r("p", re, w(u.material.headline), 1),
+            r("p", ie, w(u.material.caption), 1)
+          ]),
+          l(ee, {
+            material: u.material,
+            "onUpdate:menuOpened": t[0] || (t[0] = (s) => n.value = s),
+            onDeleted: t[1] || (t[1] = (s) => i("deleted", s)),
+            onClick: t[2] || (t[2] = P(() => {
+            }, ["stop"]))
+          }, null, 8, ["material"])
+        ])
+      ])
+    ])) : (d(), f("div", se, [...t[4] || (t[4] = [
+      H('<div class="h-[205.5px] w-full bg-fm-color-neutral-gray-100"></div><div class="p-3 space-y-2"><div class="h-[16px] w-3/4 rounded bg-fm-color-neutral-gray-100"></div><div class="h-12 w-full rounded bg-fm-color-neutral-gray-100"></div><div class="h-12 w-2/3 rounded bg-fm-color-neutral-gray-100"></div></div>', 2)
+    ])]));
+  }
+}), ce = {
+  key: 0,
+  class: "px-24 xs:px-12 flex flex-col gap-y-16 py-24 xs:py-16"
+}, ue = { class: "fm-typo-en-title-sm-800 text-center" }, me = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary w-4/6 xs:w-full text-center" }, de = {
+  key: 1,
+  class: "px-24 xs:px-12 flex flex-col gap-y-24 xs:gap-y-16 pt-24 xs:pt-16"
+}, pe = { class: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-16" }, E = 20, we = /* @__PURE__ */ M({
+  __name: "Marketing",
+  setup(u) {
+    const { t: m } = b(), i = O(), a = _([]), e = _(!0), n = _(!0), v = _(null), t = _(null);
+    let s = null;
+    const C = V(() => ({
+      label: m("connect.marketing.emptyState.action"),
+      value: "generate",
+      isPrimary: !0,
+      prependIcon: "wand_stars"
+    }));
+    function F(o) {
+      o === "generate" && i.activate({
+        command: "generateMarketingMaterial",
+        fullscreen: !0,
+        forceNewConversation: !0
+      });
+    }
+    async function x() {
+      const o = await J.listMarketingMaterials(
+        v.value,
+        E
+      );
+      a.value.push(...o.resources), v.value = o.meta.nextCursor, n.value = !!o.meta.nextCursor;
+    }
+    async function I(o) {
+      if (a.value = a.value.filter((g) => g._id !== o), !(a.value.length > 0 || !n.value || e.value)) {
+        e.value = !0;
+        try {
+          await x();
+        } catch {
+        } finally {
+          e.value = !1;
+        }
+      }
+    }
+    function A() {
+      s = new IntersectionObserver(
+        async ([o]) => {
+          if (!(!o.isIntersecting || !n.value || e.value)) {
+            e.value = !0;
+            try {
+              await x();
+            } catch {
+            } finally {
+              e.value = !1;
+            }
+          }
+        },
+        { rootMargin: "200px" }
+      ), t.value && s.observe(t.value);
+    }
+    return j(async () => {
+      try {
+        await x();
+      } catch {
+      } finally {
+        e.value = !1, await z(), A();
+      }
+    }), G(() => {
+      s == null || s.disconnect();
+    }), (o, g) => {
+      const S = p("FmPageHead"), y = p("FmCard");
+      return d(), f($, null, [
+        l(S, {
+          title: c(m)("connect.marketing.title"),
+          actions: a.value.length > 0 ? [C.value] : [],
+          "onClick:action": F
+        }, null, 8, ["title", "actions"]),
+        !e.value && a.value.length === 0 ? (d(), f("div", ce, [
+          l(y, {
+            variant: "outlined",
+            class: "w-full justify-center items-center flex flex-col p-[24px] xs:p-16 gap-[24px] xs:gap-16"
+          }, {
+            default: k(() => [
+              g[0] || (g[0] = r("img", {
+                src: K,
+                class: "w-[150px]"
+              }, null, -1)),
+              r("p", ue, w(c(m)("connect.marketing.emptyState.title")), 1),
+              r("p", me, w(c(m)("connect.marketing.emptyState.description")), 1),
+              l(X)
+            ]),
+            _: 1
+          })
+        ])) : (d(), f("div", de, [
+          r("div", pe, [
+            (d(!0), f($, null, B(a.value, (h) => (d(), N(D, {
+              key: h._id,
+              material: h,
+              onDeleted: I
+            }, null, 8, ["material"]))), 128)),
+            e.value ? (d(), f($, { key: 0 }, B(E, (h) => l(D, {
+              key: `skeleton-${h}`,
+              material: null
+            })), 64)) : q("", !0)
+          ]),
+          r("div", {
+            ref_key: "sentinel",
+            ref: t,
+            class: "h-1"
+          }, null, 512)
+        ]))
+      ], 64);
+    };
+  }
+});
+export {
+  we as default
+};