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

package/dist/Marketing-B7cZGsO-.js

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