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

package/dist/MarketingMaterialEdit-BbgFtrYP.js

@@ -1,1037 +0,0 @@
-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-C1epw3Kv.js";
-import "./index-feCrYhi6.js";
-import { useRoute as G, useRouter as te } from "vue-router";
-import { u as I } from "./vue-i18n-DWGiC_vs.js";
-import { u as K, m as H } from "./useMarketingMaterialActions-B-Wib5ga.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-Brid2wnu.js";
-import { R as A } from "./app-CgimGODl.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
-};