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

package/dist/MarketingMaterialEdit-CQ55zG-W.js

@@ -0,0 +1,1037 @@
+import { defineComponent as C, resolveComponent as b, openBlock as s, createBlock as T, withCtx as j, createElementVNode as e, createVNode as c, createElementBlock as u, unref as t, ref as M, watch as V, Fragment as B, createCommentVNode as $, withModifiers as N, Teleport as J, Transition as Q, toDisplayString as f, renderList as L, createTextVNode as q, computed as E, normalizeClass as D, onMounted as X, isRef as Y, resolveDynamicComponent as ee } from "vue";
+import { _ as O } from "./lodash-De2KDgqX.js";
+import "./index-CEFEuMOF.js";
+import { useRoute as G, useRouter as te } from "vue-router";
+import { u as I } from "./vue-i18n-DYnrLWFT.js";
+import { u as K, m as H } from "./useMarketingMaterialActions-ClYoBaFw.js";
+import { useClientEvent as Z } from "@feedmepos/mf-remy-panel";
+import { _ as oe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import { _ as ne } from "./remy-icon-BhUGu2NI.js";
+import { useSnackbar as ae, useDialog as se } from "@feedmepos/ui-library";
+import { u as le } from "./remy-Qz_pNsUS.js";
+import { useCoreStore as R } from "@feedmepos/mf-common";
+import { u as ie } from "./loading-BAFiJnEb.js";
+import { R as A } from "./app-CEe3kSZM.js";
+const S = /* @__PURE__ */ C({
+  __name: "ActionToolbarButton",
+  props: {
+    icon: {},
+    tooltip: {}
+  },
+  emits: ["click"],
+  setup(l, { emit: m }) {
+    const d = m;
+    return (p, i) => {
+      const r = b("FmIcon"), o = b("FmTooltip");
+      return s(), T(o, {
+        content: l.tooltip,
+        placement: "bottom",
+        "z-index": 60,
+        variant: "rich"
+      }, {
+        default: j(() => [
+          e("button", {
+            class: "p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors text-white flex items-center justify-center",
+            onClick: i[0] || (i[0] = (n) => d("click"))
+          }, [
+            c(r, {
+              name: l.icon,
+              size: "md"
+            }, null, 8, ["name"])
+          ])
+        ]),
+        _: 1
+      }, 8, ["content"]);
+    };
+  }
+}), re = { class: "flex gap-8" }, ce = /* @__PURE__ */ C({
+  __name: "ActionToolbar",
+  props: {
+    imageUrl: {}
+  },
+  emits: ["edit", "close"],
+  setup(l, { emit: m }) {
+    const d = l, p = m, { t: i } = I();
+    async function r() {
+      if (d.imageUrl)
+        try {
+          const n = await (await fetch(d.imageUrl)).blob(), v = URL.createObjectURL(n), _ = document.createElement("a");
+          _.href = v, _.download = "marketing-material", _.click(), URL.revokeObjectURL(v);
+        } catch {
+          window.open(d.imageUrl, "_blank");
+        }
+    }
+    return (o, n) => (s(), u("div", re, [
+      c(S, {
+        icon: "edit",
+        tooltip: t(i)("connect.common.edit"),
+        onClick: n[0] || (n[0] = (v) => p("edit"))
+      }, null, 8, ["tooltip"]),
+      c(S, {
+        icon: "download",
+        tooltip: t(i)("connect.marketing.actions.download"),
+        onClick: r
+      }, null, 8, ["tooltip"]),
+      c(S, {
+        icon: "close",
+        tooltip: t(i)("connect.marketing.actions.close"),
+        onClick: n[1] || (n[1] = (v) => p("close"))
+      }, null, 8, ["tooltip"])
+    ]));
+  }
+}), me = ["src", "alt"], de = {
+  key: 1,
+  class: "absolute inset-0 flex items-center justify-center bg-black/40"
+}, ue = { class: "relative" }, pe = ["src", "alt"], ge = /* @__PURE__ */ C({
+  __name: "Thumbnail",
+  props: {
+    imageUrl: {}
+  },
+  emits: ["edit", "update:imageUrl"],
+  setup(l, { emit: m }) {
+    const d = l, p = m, { t: i } = I(), r = G(), o = M(!1), n = M(d.imageUrl);
+    V(
+      () => d.imageUrl,
+      (y) => {
+        n.value = y;
+      }
+    );
+    const v = M(!1);
+    function _() {
+      o.value = !1, p("edit", n.value);
+    }
+    Z(
+      "apply-edited-banner",
+      async ({ imageUrl: y }) => {
+        r.query.id && (n.value = y, p("update:imageUrl", y));
+      }
+    );
+    const { downloadMaterialImage: k, copyMaterialLink: h } = K();
+    async function F() {
+      n.value && await k(n.value);
+    }
+    function U() {
+      n.value && window.open(n.value, "_blank");
+    }
+    async function w() {
+      n.value && await h(n.value);
+    }
+    return (y, a) => {
+      const g = b("FmButton"), x = b("FmMenuItem"), P = b("FmMenu");
+      return s(), u(B, null, [
+        e("div", {
+          class: "relative group cursor-pointer rounded-xl overflow-hidden fm-shadow-light-200 w-[150px] h-[150px] bg-white",
+          onClick: a[1] || (a[1] = (z) => o.value = !0)
+        }, [
+          t(n) ? (s(), u("img", {
+            key: 0,
+            src: t(n),
+            alt: t(i)("connect.marketing.materialEdit.generatedMaterial"),
+            class: "w-full h-full object-contain"
+          }, null, 8, me)) : $("", !0),
+          e("div", {
+            class: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity",
+            onClick: a[0] || (a[0] = N(() => {
+            }, ["stop"]))
+          }, [
+            c(P, { placement: "right-start" }, {
+              "menu-button": j(() => [
+                c(g, {
+                  icon: "more_horiz",
+                  variant: "tertiary",
+                  class: "bg-white hover:bg-gray-100 text-black shadow-sm"
+                })
+              ]),
+              default: j(() => [
+                c(x, {
+                  icon: "open_in_new",
+                  label: t(i)("connect.marketing.actions.openInNewTab"),
+                  onClick: U
+                }, null, 8, ["label"]),
+                c(x, {
+                  icon: "download",
+                  label: t(i)("connect.marketing.actions.download"),
+                  onClick: F
+                }, null, 8, ["label"]),
+                c(x, {
+                  icon: "content_copy",
+                  label: t(i)("connect.marketing.actions.copyLink"),
+                  onClick: w
+                }, null, 8, ["label"]),
+                c(x, {
+                  icon: "edit",
+                  label: t(i)("connect.marketing.actions.regenerateImage"),
+                  onClick: _
+                }, null, 8, ["label"])
+              ]),
+              _: 1
+            })
+          ]),
+          t(v) ? (s(), u("div", de, [...a[4] || (a[4] = [
+            e("div", { class: "w-10 h-10 rounded-full border-4 border-white/30 border-t-white animate-spin" }, null, -1)
+          ])])) : $("", !0)
+        ]),
+        (s(), T(J, { to: "body" }, [
+          c(Q, { name: "fade" }, {
+            default: j(() => [
+              t(o) ? (s(), u("div", {
+                key: 0,
+                class: "fixed inset-0 z-50 bg-black/80 flex items-center justify-center",
+                onClick: a[3] || (a[3] = N((z) => o.value = !1, ["self"]))
+              }, [
+                e("div", ue, [
+                  c(ce, {
+                    class: "absolute top-0 right-0 z-10 -translate-y-full p-4",
+                    "image-url": t(n),
+                    onEdit: _,
+                    onClose: a[2] || (a[2] = (z) => o.value = !1)
+                  }, null, 8, ["image-url"]),
+                  t(n) ? (s(), u("img", {
+                    key: 0,
+                    src: t(n),
+                    alt: t(i)("connect.marketing.materialEdit.preview"),
+                    class: "max-h-[80vh] max-w-[90vw] object-contain rounded-xl"
+                  }, null, 8, pe)) : $("", !0)
+                ])
+              ])) : $("", !0)
+            ]),
+            _: 1
+          })
+        ]))
+      ], 64);
+    };
+  }
+}), fe = /* @__PURE__ */ oe(ge, [["__scopeId", "data-v-6b1bb096"]]), ve = { class: "flex shrink-0" }, W = /* @__PURE__ */ C({
+  __name: "TextActionWidget",
+  props: {
+    text: {}
+  },
+  emits: ["editWithRemy"],
+  setup(l, { emit: m }) {
+    const d = m, { t: p } = I(), i = ae();
+    async function r(o) {
+      if (o)
+        try {
+          await navigator.clipboard.writeText(o), i.open({ message: p("connect.marketing.actions.copied"), type: "success" });
+        } catch {
+          i.open({ message: p("connect.marketing.actions.failedToCopy"), type: "error" });
+        }
+    }
+    return (o, n) => {
+      const v = b("FmIcon"), _ = b("FmTooltip");
+      return s(), u("div", ve, [
+        c(_, {
+          content: t(p)("connect.marketing.actions.copy"),
+          placement: "top",
+          "hide-arrow": !1
+        }, {
+          default: j(() => [
+            e("button", {
+              class: "p-8 rounded-full hover:bg-fm-color-neutral-gray-100 transition-all opacity-0 group-hover:opacity-100 focus:opacity-100 flex items-center justify-center",
+              onClick: n[0] || (n[0] = (k) => r(l.text))
+            }, [
+              c(v, {
+                name: "content_copy",
+                size: "sm",
+                color: "neutral-gray-400"
+              })
+            ])
+          ]),
+          _: 1
+        }, 8, ["content"]),
+        c(_, {
+          content: t(p)("connect.marketing.actions.remyAi"),
+          placement: "top",
+          "hide-arrow": !1
+        }, {
+          default: j(() => [
+            e("button", {
+              class: "p-8 rounded-full hover:bg-fm-color-neutral-gray-100 transition-colors flex items-center justify-center",
+              onClick: n[1] || (n[1] = (k) => d("editWithRemy"))
+            }, [...n[2] || (n[2] = [
+              e("img", {
+                src: ne,
+                class: "w-16 h-16 opacity-60"
+              }, null, -1)
+            ])])
+          ]),
+          _: 1
+        }, 8, ["content"])
+      ]);
+    };
+  }
+}), _e = { class: "border-t lg:border-t-0 lg:border-l border-fm-color-neutral-gray-100 p-24 xs:p-16" }, he = { class: "mb-24 align-middle font-['Inter'] text-[22px] font-semibold leading-[24px] tracking-[-0.015em] text-fm-color-typo-primary [leading-trim:none]" }, ye = { class: "flex flex-col gap-24" }, be = { class: "flex flex-col gap-12" }, xe = { class: "fm-typo-en-body-sm-400 text-fm-color-typo-secondary uppercase tracking-wide" }, ke = { class: "flex flex-col gap-8 group" }, we = { class: "fm-typo-en-body-sm-400 text-fm-color-typo-secondary uppercase tracking-wide" }, $e = { class: "relative [&_input]:!pr-[70px]" }, Me = { class: "absolute right-[8px] top-1/2 -translate-y-1/2 z-10" }, Ce = { class: "flex flex-col gap-8 group" }, Fe = { class: "fm-typo-en-body-sm-400 text-fm-color-typo-secondary uppercase tracking-wide" }, Ue = { class: "relative [&_textarea]:!pr-[70px]" }, ze = { class: "absolute right-[8px] top-[16px] z-10" }, Ie = /* @__PURE__ */ C({
+  __name: "MarketingMaterialContentDetails",
+  props: {
+    marketingMaterial: {}
+  },
+  emits: ["update:imageUrl", "update:headline", "update:caption"],
+  setup(l, { emit: m }) {
+    const d = l, p = m, { t: i } = I(), r = le(), o = M(d.marketingMaterial.headline), n = M(d.marketingMaterial.caption), v = M(d.marketingMaterial.headline), _ = M(d.marketingMaterial.caption), k = M(!1), h = M(!1);
+    V(
+      () => d.marketingMaterial.headline,
+      (a) => {
+        if (k.value) {
+          k.value = !1;
+          return;
+        }
+        o.value = a, v.value = a;
+      }
+    ), V(
+      () => d.marketingMaterial.caption,
+      (a) => {
+        if (h.value) {
+          h.value = !1;
+          return;
+        }
+        n.value = a ?? "", _.value = a;
+      }
+    ), Z(
+      "apply-edited-copy",
+      async ({ headline: a, caption: g }) => {
+        a !== void 0 && (o.value = a, v.value = a, k.value = !0, p("update:headline", a)), g !== void 0 && (n.value = g, _.value = g, h.value = !0, p("update:caption", g));
+      }
+    );
+    function F() {
+      r.activate({
+        command: "editMarketingBanner",
+        prompt: "",
+        attachments: [
+          {
+            value: d.marketingMaterial,
+            key: "marketingMaterial"
+          }
+        ]
+      });
+    }
+    function U() {
+      r.activate({
+        command: "editCopy",
+        attachments: [
+          {
+            value: d.marketingMaterial,
+            key: "marketingMaterial"
+          }
+        ]
+      });
+    }
+    async function w(a) {
+      const g = a === "headline" ? o.value : n.value, x = a === "headline" ? v.value : _.value;
+      g !== x && (a === "headline" ? v.value = g : _.value = g);
+    }
+    function y(a, g) {
+      a === "headline" ? (o.value = g, k.value = !0, p("update:headline", g)) : (n.value = g, h.value = !0, p("update:caption", g));
+    }
+    return (a, g) => {
+      const x = b("FmTextField"), P = b("FmTextarea");
+      return s(), u("section", _e, [
+        e("h2", he, f(t(i)("connect.marketing.materialEdit.contentDetails")), 1),
+        e("div", ye, [
+          e("div", be, [
+            e("p", xe, f(t(i)("connect.marketing.materialEdit.image")), 1),
+            c(fe, {
+              "image-url": l.marketingMaterial.imageUrl,
+              onEdit: F,
+              "onUpdate:imageUrl": g[0] || (g[0] = (z) => p("update:imageUrl", z))
+            }, null, 8, ["image-url"])
+          ]),
+          e("div", ke, [
+            e("p", we, f(t(i)("connect.marketing.materialEdit.headline")), 1),
+            e("div", $e, [
+              c(x, {
+                "model-value": t(o),
+                "onUpdate:modelValue": g[1] || (g[1] = (z) => y("headline", z)),
+                onFocusChanged: g[2] || (g[2] = (z) => !z && w("headline"))
+              }, null, 8, ["model-value"]),
+              e("div", Me, [
+                c(W, {
+                  text: t(o),
+                  onEditWithRemy: U
+                }, null, 8, ["text"])
+              ])
+            ])
+          ]),
+          e("div", Ce, [
+            e("p", Fe, f(t(i)("connect.marketing.materialEdit.caption")), 1),
+            e("div", Ue, [
+              c(P, {
+                "model-value": t(n),
+                "onUpdate:modelValue": g[3] || (g[3] = (z) => y("caption", z)),
+                onFocusChanged: g[4] || (g[4] = (z) => !z && w("caption")),
+                rows: "4"
+              }, null, 8, ["model-value"]),
+              e("div", ze, [
+                c(W, {
+                  text: t(n),
+                  onEditWithRemy: U
+                }, null, 8, ["text"])
+              ])
+            ])
+          ])
+        ])
+      ]);
+    };
+  }
+}), je = { class: "flex items-center px-4" }, Ee = { class: "px-[4px] py-[6px] text-xs text-fm-color-typo-secondary" }, Te = /* @__PURE__ */ C({
+  __name: "ActionBar",
+  setup(l) {
+    const m = [
+      { icon: "thumb_up", count: "10k+" },
+      { icon: "mode_comment", count: "128" },
+      { icon: "share", count: "56" }
+    ];
+    return (d, p) => {
+      const i = b("FmIcon");
+      return s(), u("div", je, [
+        (s(), u(B, null, L(m, (r) => e("button", {
+          key: r.icon,
+          class: "flex px-12 py-[6px] items-center justify-center text-fm-color-typo-secondary hover:bg-fm-color-neutral-gray-50 transition-colors fm-typo-en-body-sm-400"
+        }, [
+          c(i, {
+            class: "px-[4px] py-[6px]",
+            name: r.icon,
+            size: "md",
+            color: "neutral-gray-400",
+            outline: ""
+          }, null, 8, ["name"]),
+          e("span", Ee, f(r.count), 1)
+        ])), 64))
+      ]);
+    };
+  }
+}), Be = { class: "max-w-[500px] mx-auto rounded-lg border border-fm-color-neutral-gray-200 fm-shadow-light-200 overflow-hidden bg-white" }, Re = { class: "flex items-center gap-12 px-16 py-12" }, Pe = { class: "w-40 h-40 rounded-full bg-fm-color-neutral-gray-200 flex items-center justify-center shrink-0 overflow-hidden" }, Ae = ["src", "alt"], Se = { class: "flex-1 min-w-0" }, Ve = { class: "fm-typo-en-body-sm-700 text-fm-color-typo-primary leading-tight font-semibold" }, Le = { class: "fm-typo-en-body-xs-400 text-fm-color-typo-secondary leading-tight text-xs flex items-center gap-4" }, Ne = {
+  key: 0,
+  class: "px-16 pb-12"
+}, De = { class: "fm-typo-en-body-sm-400 text-fm-color-typo-primary whitespace-pre-wrap" }, Oe = { class: "w-full bg-fm-color-neutral-gray-100 overflow-hidden" }, He = ["src", "alt"], We = {
+  key: 1,
+  class: "aspect-square flex items-center justify-center"
+}, qe = { class: "px-16 py-12 bg-fm-color-neutral-gray-50 border-t border-fm-color-neutral-gray-200" }, Ge = { class: "fm-typo-en-body-sm-700 text-fm-color-typo-primary line-clamp-2" }, Ke = /* @__PURE__ */ C({
+  __name: "FacebookPostPreview",
+  props: {
+    imageUrl: {},
+    headline: {},
+    caption: {}
+  },
+  setup(l) {
+    const { t: m } = I(), { currentBusiness: d } = R();
+    return (p, i) => {
+      var o, n;
+      const r = b("FmIcon");
+      return s(), u("div", Be, [
+        e("div", Re, [
+          e("div", Pe, [
+            (o = t(d)) != null && o.thumbnail ? (s(), u("img", {
+              key: 0,
+              src: t(d).thumbnail,
+              class: "w-full h-full object-cover",
+              alt: t(m)("connect.marketing.preview.businessLogo")
+            }, null, 8, Ae)) : (s(), T(r, {
+              key: 1,
+              name: "storefront",
+              size: "sm",
+              color: "neutral-gray-400"
+            }))
+          ]),
+          e("div", Se, [
+            e("p", Ve, f(((n = t(d)) == null ? void 0 : n.name) ?? t(m)("connect.marketing.preview.yourBusiness")), 1),
+            e("p", Le, [
+              q(f(t(m)("connect.marketing.preview.sponsored")) + " · ", 1),
+              c(r, {
+                name: "public",
+                size: "sm",
+                color: "neutral-gray-400"
+              })
+            ])
+          ]),
+          c(r, {
+            name: "more_horiz",
+            size: "sm",
+            color: "neutral-gray-400"
+          })
+        ]),
+        l.caption ? (s(), u("div", Ne, [
+          e("p", De, f(l.caption), 1)
+        ])) : $("", !0),
+        e("div", Oe, [
+          l.imageUrl ? (s(), u("img", {
+            key: 0,
+            src: l.imageUrl,
+            alt: t(m)("connect.marketing.preview.postImage"),
+            class: "w-full h-auto block"
+          }, null, 8, He)) : (s(), u("div", We, [
+            c(r, {
+              name: "image",
+              size: "xl",
+              color: "neutral-gray-300"
+            })
+          ]))
+        ]),
+        e("div", qe, [
+          i[0] || (i[0] = e("p", { class: "fm-typo-en-body-xs-400 text-fm-color-typo-secondary uppercase tracking-wide mb-2" }, " yourbusiness.com ", -1)),
+          e("p", Ge, f(l.headline ?? "—"), 1)
+        ]),
+        c(Te)
+      ]);
+    };
+  }
+}), Ze = { class: "max-w-[300px] mx-auto rounded-2xl overflow-hidden fm-shadow-light-200 relative aspect-[9/16] bg-black" }, Je = ["src", "alt"], Qe = {
+  key: 1,
+  class: "absolute inset-0 flex items-center justify-center bg-fm-color-neutral-gray-800"
+}, Xe = { class: "absolute inset-x-0 top-0 px-12 pt-12 pb-24 bg-gradient-to-b from-black/60 to-transparent" }, Ye = { class: "flex items-center gap-8" }, et = { class: "w-32 h-32 rounded-full bg-fm-color-neutral-gray-200 shrink-0 overflow-hidden border-2 border-white" }, tt = ["src", "alt"], ot = { class: "flex-1 min-w-0" }, nt = { class: "text-white text-xs font-semibold leading-tight truncate" }, at = { class: "text-white/70 text-[10px] leading-tight" }, st = { class: "absolute inset-x-0 bottom-0 px-16 pb-24 pt-40 bg-gradient-to-t from-black/70 to-transparent" }, lt = {
+  key: 0,
+  class: "text-white text-xs mb-12 line-clamp-3"
+}, it = { class: "flex justify-center" }, rt = { class: "px-24 py-8 rounded-full bg-white text-fm-color-typo-primary text-xs font-semibold" }, ct = /* @__PURE__ */ C({
+  __name: "FacebookStoryPreview",
+  props: {
+    imageUrl: {},
+    headline: {},
+    caption: {}
+  },
+  setup(l) {
+    const { t: m } = I(), { currentBusiness: d } = R();
+    return (p, i) => {
+      var o, n;
+      const r = b("FmIcon");
+      return s(), u(B, null, [
+        e("div", Ze, [
+          l.imageUrl ? (s(), u("img", {
+            key: 0,
+            src: l.imageUrl,
+            alt: t(m)("connect.marketing.preview.storyImage"),
+            class: "absolute inset-0 w-full h-full object-contain"
+          }, null, 8, Je)) : (s(), u("div", Qe, [
+            c(r, {
+              name: "image",
+              size: "xl",
+              color: "neutral-gray-500"
+            })
+          ])),
+          e("div", Xe, [
+            i[0] || (i[0] = e("div", { class: "flex gap-4 mb-10" }, [
+              e("div", { class: "h-[2px] flex-1 rounded-full bg-white" })
+            ], -1)),
+            e("div", Ye, [
+              e("div", et, [
+                (o = t(d)) != null && o.thumbnail ? (s(), u("img", {
+                  key: 0,
+                  src: t(d).thumbnail,
+                  class: "w-full h-full object-cover",
+                  alt: t(m)("connect.marketing.preview.businessLogo")
+                }, null, 8, tt)) : (s(), T(r, {
+                  key: 1,
+                  name: "storefront",
+                  size: "sm",
+                  color: "neutral-gray-400"
+                }))
+              ]),
+              e("div", ot, [
+                e("p", nt, f(((n = t(d)) == null ? void 0 : n.name) ?? t(m)("connect.marketing.preview.yourBusiness")), 1),
+                e("p", at, f(t(m)("connect.marketing.preview.sponsored")), 1)
+              ]),
+              c(r, {
+                name: "more_vert",
+                size: "sm",
+                color: "neutral-white"
+              }),
+              c(r, {
+                name: "close",
+                size: "sm",
+                color: "neutral-white"
+              })
+            ])
+          ]),
+          e("div", st, [
+            l.caption ? (s(), u("p", lt, f(l.caption), 1)) : $("", !0),
+            e("div", it, [
+              e("button", rt, f(l.headline ?? t(m)("connect.marketing.preview.learnMore")), 1)
+            ])
+          ])
+        ]),
+        i[1] || (i[1] = q(" /template> ", -1))
+      ], 64);
+    };
+  }
+}), mt = { class: "max-w-[400px] mx-auto rounded-lg border border-fm-color-neutral-gray-200 fm-shadow-light-200 overflow-hidden bg-white" }, dt = { class: "flex items-center gap-12 px-12 py-10" }, ut = { class: "w-32 h-32 rounded-full bg-gradient-to-tr from-yellow-400 via-pink-500 to-purple-600 p-[2px] shrink-0" }, pt = { class: "w-full h-full rounded-full bg-white p-[1px] overflow-hidden" }, gt = ["src", "alt"], ft = {
+  key: 1,
+  class: "w-full h-full rounded-full bg-fm-color-neutral-gray-200 flex items-center justify-center"
+}, vt = { class: "flex-1 min-w-0" }, _t = { class: "text-sm font-semibold text-fm-color-typo-primary leading-tight truncate" }, ht = { class: "text-[10px] text-fm-color-typo-secondary leading-tight" }, yt = { class: "w-full bg-fm-color-neutral-gray-100 overflow-hidden" }, bt = ["src", "alt"], xt = {
+  key: 1,
+  class: "aspect-square flex items-center justify-center"
+}, kt = { class: "flex items-center gap-12 px-12 pt-10 pb-4" }, wt = { class: "px-12 pb-4" }, $t = { class: "text-xs font-semibold text-fm-color-typo-primary" }, Mt = {
+  key: 0,
+  class: "px-12 pb-12"
+}, Ct = { class: "text-xs text-fm-color-typo-primary" }, Ft = { class: "font-semibold mr-4" }, Ut = { class: "line-clamp-2" }, zt = /* @__PURE__ */ C({
+  __name: "InstagramPostPreview",
+  props: {
+    imageUrl: {},
+    headline: {},
+    caption: {}
+  },
+  setup(l) {
+    const { t: m } = I(), { currentBusiness: d } = R();
+    return (p, i) => {
+      var o, n, v;
+      const r = b("FmIcon");
+      return s(), u("div", mt, [
+        e("div", dt, [
+          e("div", ut, [
+            e("div", pt, [
+              (o = t(d)) != null && o.thumbnail ? (s(), u("img", {
+                key: 0,
+                src: t(d).thumbnail,
+                class: "w-full h-full object-cover rounded-full",
+                alt: t(m)("connect.marketing.preview.businessLogo")
+              }, null, 8, gt)) : (s(), u("div", ft, [
+                c(r, {
+                  name: "storefront",
+                  size: "sm",
+                  color: "neutral-gray-400"
+                })
+              ]))
+            ])
+          ]),
+          e("div", vt, [
+            e("p", _t, f(((n = t(d)) == null ? void 0 : n.name) ?? t(m)("connect.marketing.preview.yourBusiness")), 1),
+            e("p", ht, f(t(m)("connect.marketing.preview.sponsored")), 1)
+          ]),
+          c(r, {
+            name: "more_horiz",
+            size: "sm",
+            color: "neutral-gray-400"
+          })
+        ]),
+        e("div", yt, [
+          l.imageUrl ? (s(), u("img", {
+            key: 0,
+            src: l.imageUrl,
+            alt: t(m)("connect.marketing.preview.postImage"),
+            class: "w-full h-auto block"
+          }, null, 8, bt)) : (s(), u("div", xt, [
+            c(r, {
+              name: "image",
+              size: "xl",
+              color: "neutral-gray-300"
+            })
+          ]))
+        ]),
+        e("div", kt, [
+          c(r, {
+            name: "favorite_border",
+            size: "md",
+            color: "neutral-gray-700"
+          }),
+          c(r, {
+            name: "mode_comment",
+            size: "md",
+            color: "neutral-gray-700",
+            outline: ""
+          }),
+          c(r, {
+            name: "send",
+            size: "md",
+            color: "neutral-gray-700"
+          }),
+          i[0] || (i[0] = e("div", { class: "flex-1" }, null, -1)),
+          c(r, {
+            name: "bookmark_border",
+            size: "md",
+            color: "neutral-gray-700"
+          })
+        ]),
+        e("div", wt, [
+          e("p", $t, f(t(m)("connect.marketing.preview.likes", { count: "10,428" })), 1)
+        ]),
+        l.caption || l.headline ? (s(), u("div", Mt, [
+          e("p", Ct, [
+            e("span", Ft, f(((v = t(d)) == null ? void 0 : v.name) ?? t(m)("connect.marketing.preview.yourBusiness")), 1),
+            e("span", Ut, f(l.caption ?? l.headline), 1)
+          ])
+        ])) : $("", !0)
+      ]);
+    };
+  }
+}), It = { class: "max-w-[300px] mx-auto rounded-2xl overflow-hidden fm-shadow-light-200 relative aspect-[9/16] bg-black" }, jt = ["src", "alt"], Et = {
+  key: 1,
+  class: "absolute inset-0 flex items-center justify-center bg-fm-color-neutral-gray-800"
+}, Tt = { class: "absolute inset-x-0 top-0 px-12 pt-12 pb-24 bg-gradient-to-b from-black/60 to-transparent" }, Bt = { class: "flex items-center gap-8" }, Rt = { class: "w-32 h-32 rounded-full p-[2px] bg-gradient-to-tr from-yellow-400 via-pink-500 to-purple-600 shrink-0" }, Pt = { class: "w-full h-full rounded-full bg-black/30 overflow-hidden" }, At = ["src", "alt"], St = {
+  key: 1,
+  class: "w-full h-full flex items-center justify-center"
+}, Vt = { class: "flex-1 min-w-0" }, Lt = { class: "text-white text-xs font-semibold leading-tight truncate" }, Nt = { class: "text-white/70 text-[10px] leading-tight" }, Dt = { class: "absolute inset-x-0 bottom-0 px-16 pb-24 pt-40 bg-gradient-to-t from-black/70 to-transparent" }, Ot = {
+  key: 0,
+  class: "text-white text-xs mb-12 line-clamp-3"
+}, Ht = { class: "flex justify-center" }, Wt = { class: "px-24 py-8 rounded-full bg-white text-fm-color-typo-primary text-xs font-semibold" }, qt = /* @__PURE__ */ C({
+  __name: "InstagramStoryPreview",
+  props: {
+    imageUrl: {},
+    headline: {},
+    caption: {}
+  },
+  setup(l) {
+    const { t: m } = I(), { currentBusiness: d } = R();
+    return (p, i) => {
+      var o, n;
+      const r = b("FmIcon");
+      return s(), u("div", It, [
+        l.imageUrl ? (s(), u("img", {
+          key: 0,
+          src: l.imageUrl,
+          alt: t(m)("connect.marketing.preview.storyImage"),
+          class: "absolute inset-0 w-full h-full object-contain"
+        }, null, 8, jt)) : (s(), u("div", Et, [
+          c(r, {
+            name: "image",
+            size: "xl",
+            color: "neutral-gray-500"
+          })
+        ])),
+        e("div", Tt, [
+          i[0] || (i[0] = e("div", { class: "flex gap-4 mb-10" }, [
+            e("div", { class: "h-[2px] flex-1 rounded-full bg-white" })
+          ], -1)),
+          e("div", Bt, [
+            e("div", Rt, [
+              e("div", Pt, [
+                (o = t(d)) != null && o.thumbnail ? (s(), u("img", {
+                  key: 0,
+                  src: t(d).thumbnail,
+                  class: "w-full h-full object-cover",
+                  alt: t(m)("connect.marketing.preview.businessLogo")
+                }, null, 8, At)) : (s(), u("div", St, [
+                  c(r, {
+                    name: "storefront",
+                    size: "sm",
+                    color: "neutral-gray-400"
+                  })
+                ]))
+              ])
+            ]),
+            e("div", Vt, [
+              e("p", Lt, f(((n = t(d)) == null ? void 0 : n.name) ?? t(m)("connect.marketing.preview.yourBusiness")), 1),
+              e("p", Nt, f(t(m)("connect.marketing.preview.sponsored")), 1)
+            ]),
+            c(r, {
+              name: "more_vert",
+              size: "sm",
+              color: "neutral-white"
+            }),
+            c(r, {
+              name: "close",
+              size: "sm",
+              color: "neutral-white"
+            })
+          ])
+        ]),
+        e("div", Dt, [
+          l.caption ? (s(), u("p", Ot, f(l.caption), 1)) : $("", !0),
+          e("div", Ht, [
+            e("button", Wt, f(l.headline ?? t(m)("connect.marketing.preview.learnMore")), 1)
+          ])
+        ])
+      ]);
+    };
+  }
+}), Gt = { class: "relative w-full" }, Kt = {
+  key: 0,
+  class: "flex items-center gap-12"
+}, Zt = ["fill"], Jt = ["d"], Qt = { class: "fm-typo-en-body-sm-700 font-semibold" }, Xt = {
+  key: 1,
+  class: "absolute z-30 w-full mt-8 bg-white border border-fm-color-neutral-gray-200 rounded-lg shadow-lg overflow-hidden animate-in fade-in slide-in-from-top-2 duration-200"
+}, Yt = { class: "max-h-[360px] overflow-y-auto py-8 px-8" }, eo = {
+  key: 0,
+  class: "h-1 bg-fm-color-neutral-gray-100 my-8"
+}, to = { class: "flex items-center gap-8 px-16 py-8" }, oo = ["fill"], no = ["d"], ao = { class: "text-xs font-bold text-fm-color-typo-secondary uppercase tracking-wider" }, so = ["onClick"], lo = { class: "flex items-center gap-8" }, io = { class: "flex items-center gap-8" }, ro = { class: "text-xs text-fm-color-neutral-gray-400 font-medium" }, co = /* @__PURE__ */ C({
+  __name: "SocialMediaPreviewSelector",
+  props: {
+    modelValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(l, { emit: m }) {
+    const d = l, p = m, { t: i } = I(), r = M(!1), o = E(() => [
+      {
+        name: i("connect.marketing.preview.facebook"),
+        iconColor: "#1877F2",
+        iconPath: "M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z",
+        options: [
+          {
+            label: i("connect.marketing.preview.facebookPost"),
+            value: "facebook-post",
+            icon: "draft",
+            aspectRatio: "1:1"
+          },
+          {
+            label: i("connect.marketing.preview.facebookStory"),
+            value: "facebook-story",
+            icon: "motion_play",
+            aspectRatio: "9:16"
+          }
+        ]
+      },
+      {
+        name: i("connect.marketing.preview.instagram"),
+        iconColor: "#E1306C",
+        iconPath: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm5.882-10.55a1.44 1.44 0 10-2.88 0 1.44 1.44 0 002.88 0z",
+        options: [
+          {
+            label: i("connect.marketing.preview.instagramPost"),
+            value: "instagram-post",
+            icon: "draft",
+            aspectRatio: "1:1"
+          },
+          {
+            label: i("connect.marketing.preview.instagramStory"),
+            value: "instagram-story",
+            icon: "motion_play",
+            aspectRatio: "9:16"
+          }
+        ]
+      }
+    ]), n = E(() => o.value.flatMap((h) => h.options)), v = E(
+      () => n.value.find((h) => h.value === d.modelValue)
+    ), _ = E(
+      () => o.value.find((h) => h.options.some((F) => F.value === d.modelValue))
+    ), k = (h) => {
+      p("update:modelValue", h), r.value = !1;
+    };
+    return (h, F) => {
+      const U = b("FmIcon");
+      return s(), u("div", Gt, [
+        r.value ? (s(), u("div", {
+          key: 0,
+          class: "fixed inset-0 z-10",
+          onClick: F[0] || (F[0] = (w) => r.value = !1)
+        })) : $("", !0),
+        e("button", {
+          type: "button",
+          onClick: F[1] || (F[1] = (w) => r.value = !r.value),
+          class: "relative z-20 flex items-center justify-between w-full px-16 py-12 bg-white border border-fm-color-neutral-gray-200 rounded-lg hover:border-fm-color-primary-300 focus:outline-none focus:border-fm-color-primary-500 transition-colors shadow-sm"
+        }, [
+          v.value && _.value ? (s(), u("div", Kt, [
+            (s(), u("svg", {
+              class: "w-[20px] h-[20px] shrink-0",
+              viewBox: "0 0 24 24",
+              fill: _.value.iconColor,
+              xmlns: "http://www.w3.org/2000/svg"
+            }, [
+              e("path", {
+                d: _.value.iconPath
+              }, null, 8, Jt)
+            ], 8, Zt)),
+            e("span", Qt, f(v.value.label), 1)
+          ])) : $("", !0),
+          c(U, {
+            name: "expand_more",
+            size: "md",
+            color: "neutral-gray-400"
+          })
+        ]),
+        r.value ? (s(), u("div", Xt, [
+          e("div", Yt, [
+            (s(!0), u(B, null, L(o.value, (w, y) => (s(), u("div", {
+              key: w.name,
+              class: "flex flex-col gap-[6px]"
+            }, [
+              y > 0 ? (s(), u("div", eo)) : $("", !0),
+              e("div", to, [
+                (s(), u("svg", {
+                  class: "w-16 h-16 shrink-0",
+                  viewBox: "0 0 24 24",
+                  fill: w.iconColor,
+                  xmlns: "http://www.w3.org/2000/svg"
+                }, [
+                  e("path", {
+                    d: w.iconPath
+                  }, null, 8, no)
+                ], 8, oo)),
+                e("span", ao, f(w.name), 1)
+              ]),
+              (s(!0), u(B, null, L(w.options, (a) => (s(), u("button", {
+                key: a.value,
+                onClick: (g) => k(a.value),
+                class: D(["flex items-center justify-between w-full px-16 py-[10px] text-left transition-colors rounded-lg", [
+                  l.modelValue === a.value ? "bg-fm-color-neutral-gray-200 " : "bg-white hover:bg-fm-color-neutral-gray-100"
+                ]])
+              }, [
+                e("div", lo, [
+                  c(U, {
+                    name: a.icon,
+                    size: "sm",
+                    outline: "",
+                    color: l.modelValue === a.value ? "primary-500" : "neutral-gray-500"
+                  }, null, 8, ["name", "color"]),
+                  e("span", {
+                    class: D([
+                      "fm-typo-en-body-sm-500",
+                      l.modelValue === a.value ? "text-fm-color-primary-600 font-semibold" : "text-fm-color-typo-primary"
+                    ])
+                  }, f(a.label), 3)
+                ]),
+                e("div", io, [
+                  e("span", ro, f(a.aspectRatio), 1)
+                ])
+              ], 10, so))), 128))
+            ]))), 128))
+          ])
+        ])) : $("", !0)
+      ]);
+    };
+  }
+}), mo = { class: "ml-12 flex items-center" }, uo = /* @__PURE__ */ C({
+  __name: "MarketingMaterialPrimaryButton",
+  props: {
+    disabled: { type: Boolean },
+    marketingMaterial: {}
+  },
+  emits: ["save"],
+  setup(l, { emit: m }) {
+    const d = l, { t: p } = I(), { shareMaterial: i } = K();
+    async function r() {
+      await i(d.marketingMaterial);
+    }
+    return (o, n) => {
+      const v = b("FmButton"), _ = b("FmMenuItem"), k = b("FmMenu");
+      return s(), u("div", mo, [
+        c(v, {
+          variant: "primary",
+          disabled: l.disabled,
+          class: "!rounded-r-none",
+          label: t(p)("connect.common.save"),
+          onClick: n[0] || (n[0] = (h) => o.$emit("save"))
+        }, null, 8, ["disabled", "label"]),
+        c(k, { placement: "bottom-end" }, {
+          "menu-button": j(() => [
+            c(v, {
+              variant: "primary",
+              icon: "arrow_drop_down",
+              disabled: l.disabled,
+              class: "!rounded-l-none border-l border-white/20 px-2"
+            }, null, 8, ["disabled"])
+          ]),
+          default: j(() => [
+            c(_, {
+              label: t(p)("connect.marketing.actions.share"),
+              disabled: !l.marketingMaterial || l.disabled,
+              onClick: r
+            }, null, 8, ["label", "disabled"])
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+}), po = { class: "mx-auto mb-24 grid max-w-[856px] grid-cols-1 lg:grid-cols-2 rounded-2xl xs:rounded-none border border-fm-color-neutral-gray-200 xs:border-none overflow-hidden" }, go = { class: "min-w-0 bg-fm-color-neutral-gray-50 xs:p-16" }, fo = { class: "mx-auto flex max-w-[560px] flex-col" }, vo = { class: "p-24 xs:p-16" }, _o = { class: "bg-fm-color-neutral-gray-100 p-24 xs:p-12" }, Eo = /* @__PURE__ */ C({
+  __name: "MarketingMaterialEdit",
+  setup(l) {
+    const { t: m } = I(), d = te(), p = G(), i = se(), { minor: r } = ie, o = M(null), n = M(null), v = E(() => !o.value || !n.value ? !1 : o.value.imageUrl !== n.value.imageUrl || o.value.headline !== n.value.headline || o.value.caption !== n.value.caption), _ = {
+      label: m("connect.common.cancel"),
+      value: "cancel",
+      isPrimary: !1
+    };
+    async function k() {
+      v.value ? i.open({
+        title: m("connect.campaign.common.unsaved_changes"),
+        message: m("connect.campaign.common.unsaved_changes"),
+        primaryActions: {
+          text: m("connect.campaign.common.unsaved_changes_confirm"),
+          close: !0
+        },
+        secondaryActions: {
+          text: m("connect.campaign.common.unsaved_changes_cancel"),
+          close: !1
+        }
+      }).onPrimary(() => {
+        d.push({ name: A["$connect-MARKETING"] });
+      }).onSecondary(() => {
+        i.close();
+      }) : d.push({ name: A["$connect-MARKETING"] });
+    }
+    async function h() {
+      o.value && await r(
+        async () => {
+          const y = o.value._id, a = await H.updateMarketingMaterial(y, {
+            imageUrl: o.value.imageUrl,
+            headline: o.value.headline,
+            caption: o.value.caption
+          });
+          o.value = a, n.value = O.cloneDeep(a);
+        },
+        {
+          message: m("connect.marketing.materialEdit.saving"),
+          successMessage: m("connect.marketing.materialEdit.save_success")
+        }
+      );
+    }
+    async function F(y) {
+      y === "save" ? await h() : y === "cancel" && await k();
+    }
+    const U = M("facebook-post"), w = E(() => {
+      switch (U.value) {
+        case "facebook-story":
+          return ct;
+        case "instagram-post":
+          return zt;
+        case "instagram-story":
+          return qt;
+        default:
+          return Ke;
+      }
+    });
+    return X(async () => {
+      const y = p.query.id;
+      if (!y) {
+        d.replace({ name: A["$connect-MARKETING"] });
+        return;
+      }
+      const a = await H.getMarketingMaterial(y);
+      o.value = a, n.value = O.cloneDeep(a);
+    }), (y, a) => {
+      const g = b("FmPageHead");
+      return s(), u(B, null, [
+        c(g, {
+          "back-button": !0,
+          title: t(m)("connect.marketing.materialEdit.title"),
+          actions: [_],
+          "onClick:back": k,
+          "onClick:action": F
+        }, {
+          append: j(() => [
+            c(uo, {
+              "marketing-material": t(o),
+              onSave: h
+            }, null, 8, ["marketing-material"])
+          ]),
+          _: 1
+        }, 8, ["title", "actions"]),
+        e("div", po, [
+          e("section", go, [
+            e("div", fo, [
+              e("div", vo, [
+                c(co, {
+                  modelValue: t(U),
+                  "onUpdate:modelValue": a[0] || (a[0] = (x) => Y(U) ? U.value = x : null)
+                }, null, 8, ["modelValue"])
+              ]),
+              e("div", _o, [
+                t(o) ? (s(), T(ee(t(w)), {
+                  key: 0,
+                  "image-url": t(o).imageUrl,
+                  headline: t(o).headline,
+                  caption: t(o).caption
+                }, null, 8, ["image-url", "headline", "caption"])) : $("", !0)
+              ])
+            ])
+          ]),
+          t(o) ? (s(), T(Ie, {
+            key: 0,
+            "marketing-material": t(o),
+            "onUpdate:imageUrl": a[1] || (a[1] = (x) => t(o).imageUrl = x),
+            "onUpdate:headline": a[2] || (a[2] = (x) => t(o).headline = x),
+            "onUpdate:caption": a[3] || (a[3] = (x) => t(o).caption = x)
+          }, null, 8, ["marketing-material"])) : $("", !0)
+        ])
+      ], 64);
+    };
+  }
+});
+export {
+  Eo as default
+};