@feedmepos/mf-connect 0.1.38-beta.76 → 0.1.38-beta.78

package/dist/MarketingMaterialEdit-C74xVj4y.js

@@ -0,0 +1,857 @@
+import { defineComponent as C, resolveComponent as x, openBlock as l, createBlock as S, withCtx as j, createElementVNode as e, createVNode as n, createElementBlock as u, ref as k, watch as B, Fragment as L, unref as s, createCommentVNode as U, withModifiers as V, Teleport as J, Transition as Q, toDisplayString as _, isRef as W, renderList as X, createTextVNode as Z, computed as P, onMounted as ee, resolveDynamicComponent as te } from "vue";
+import { _ as D } from "./lodash-BauupBJE.js";
+import "./index-CGKANfLZ.js";
+import { useRoute as q, useRouter as oe } from "vue-router";
+import { u as G } from "./vue-i18n-BVlH2-Q3.js";
+import { u as K, m as N } from "./remy-r12bZ_gw.js";
+import { useClientEvent as Y, ChatPanel as ne } from "@feedmepos/mf-remy-panel";
+import { a as ae } from "./plugins-Cr4fq1-c.js";
+import { _ as se } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import { useSnackbar as le, useDialog as ie } from "@feedmepos/ui-library";
+import { useCoreStore as R } from "@feedmepos/mf-common";
+import { u as re } from "./loading-C5QxXpCJ.js";
+import { R as H } from "./app-DJxUak8Q.js";
+const A = /* @__PURE__ */ C({
+  __name: "ActionToolbarButton",
+  props: {
+    icon: {},
+    tooltip: {}
+  },
+  emits: ["click"],
+  setup(r, { emit: m }) {
+    const p = m;
+    return (i, c) => {
+      const d = x("FmIcon"), t = x("FmTooltip");
+      return l(), S(t, {
+        content: r.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: c[0] || (c[0] = (a) => p("click"))
+          }, [
+            n(d, {
+              name: r.icon,
+              size: "md"
+            }, null, 8, ["name"])
+          ])
+        ]),
+        _: 1
+      }, 8, ["content"]);
+    };
+  }
+}), ce = { class: "flex gap-8" }, me = /* @__PURE__ */ C({
+  __name: "ActionToolbar",
+  props: {
+    imageUrl: {}
+  },
+  emits: ["edit", "close"],
+  setup(r, { emit: m }) {
+    const p = r, i = m;
+    async function c() {
+      if (p.imageUrl)
+        try {
+          const t = await (await fetch(p.imageUrl)).blob(), a = URL.createObjectURL(t), g = document.createElement("a");
+          g.href = a, g.download = "marketing-material", g.click(), URL.revokeObjectURL(a);
+        } catch {
+          window.open(p.imageUrl, "_blank");
+        }
+    }
+    return (d, t) => (l(), u("div", ce, [
+      n(A, {
+        icon: "edit",
+        tooltip: "Edit",
+        onClick: t[0] || (t[0] = (a) => i("edit"))
+      }),
+      n(A, {
+        icon: "download",
+        tooltip: "Download",
+        onClick: c
+      }),
+      n(A, {
+        icon: "close",
+        tooltip: "Close",
+        onClick: t[1] || (t[1] = (a) => i("close"))
+      })
+    ]));
+  }
+}), de = ["src"], ue = {
+  key: 1,
+  class: "absolute inset-0 flex items-center justify-center bg-black/40"
+}, pe = { class: "relative" }, fe = ["src"], ge = /* @__PURE__ */ C({
+  __name: "Thumbnail",
+  props: {
+    imageUrl: {}
+  },
+  emits: ["edit", "update:imageUrl"],
+  setup(r, { emit: m }) {
+    const p = r, i = m, c = q(), d = k(!1), t = k(p.imageUrl);
+    B(
+      () => p.imageUrl,
+      (b) => {
+        t.value = b;
+      }
+    );
+    const a = k(!1);
+    function g() {
+      d.value = !1, i("edit", t.value);
+    }
+    Y(
+      "apply-edited-banner",
+      async ({ imageUrl: b }) => {
+        c.query.id && (t.value = b, i("update:imageUrl", b));
+      }
+    );
+    async function $() {
+      if (t.value)
+        try {
+          const v = await (await fetch(t.value)).blob(), F = URL.createObjectURL(v), h = document.createElement("a");
+          h.href = F, h.download = "marketing-material", h.click(), URL.revokeObjectURL(F);
+        } catch {
+          window.open(t.value, "_blank");
+        }
+    }
+    function I() {
+      t.value && window.open(t.value, "_blank");
+    }
+    async function z() {
+      t.value && await ae(t.value, {
+        successMessage: "Image link copied to clipboard"
+      });
+    }
+    return (b, v) => {
+      const F = x("FmButton"), h = x("FmMenuItem"), M = x("FmMenu");
+      return l(), u(L, null, [
+        e("div", {
+          class: "relative group cursor-pointer rounded-xl overflow-hidden fm-shadow-light-200 w-[150px] h-[150px] bg-white",
+          onClick: v[1] || (v[1] = (f) => d.value = !0)
+        }, [
+          s(t) ? (l(), u("img", {
+            key: 0,
+            src: s(t),
+            alt: "Generated Material",
+            class: "w-full h-full object-contain"
+          }, null, 8, de)) : U("", !0),
+          e("div", {
+            class: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity",
+            onClick: v[0] || (v[0] = V(() => {
+            }, ["stop"]))
+          }, [
+            n(M, { placement: "right-start" }, {
+              "menu-button": j(() => [
+                n(F, {
+                  icon: "more_horiz",
+                  variant: "tertiary",
+                  class: "bg-white hover:bg-gray-100 text-black shadow-sm"
+                })
+              ]),
+              default: j(() => [
+                n(h, {
+                  icon: "open_in_new",
+                  label: "Open image in new tab",
+                  onClick: I
+                }),
+                n(h, {
+                  icon: "download",
+                  label: "Download",
+                  onClick: $
+                }),
+                n(h, {
+                  icon: "content_copy",
+                  label: "Copy link",
+                  onClick: z
+                }),
+                n(h, {
+                  icon: "edit",
+                  label: "Regenerate image",
+                  onClick: g
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          s(a) ? (l(), u("div", ue, [...v[4] || (v[4] = [
+            e("div", { class: "w-10 h-10 rounded-full border-4 border-white/30 border-t-white animate-spin" }, null, -1)
+          ])])) : U("", !0)
+        ]),
+        (l(), S(J, { to: "body" }, [
+          n(Q, { name: "fade" }, {
+            default: j(() => [
+              s(d) ? (l(), u("div", {
+                key: 0,
+                class: "fixed inset-0 z-50 bg-black/80 flex items-center justify-center",
+                onClick: v[3] || (v[3] = V((f) => d.value = !1, ["self"]))
+              }, [
+                e("div", pe, [
+                  n(me, {
+                    class: "absolute top-0 right-0 z-10 -translate-y-full p-4",
+                    "image-url": s(t),
+                    onEdit: g,
+                    onClose: v[2] || (v[2] = (f) => d.value = !1)
+                  }, null, 8, ["image-url"]),
+                  s(t) ? (l(), u("img", {
+                    key: 0,
+                    src: s(t),
+                    alt: "Preview",
+                    class: "max-h-[80vh] max-w-[90vw] object-contain rounded-xl"
+                  }, null, 8, fe)) : U("", !0)
+                ])
+              ])) : U("", !0)
+            ]),
+            _: 1
+          })
+        ]))
+      ], 64);
+    };
+  }
+}), ye = /* @__PURE__ */ se(ge, [["__scopeId", "data-v-af97692a"]]), ve = { class: "flex gap-4 shrink-0 mt-2" }, O = /* @__PURE__ */ C({
+  __name: "TextActionWidget",
+  props: {
+    text: {}
+  },
+  emits: ["editWithRemy"],
+  setup(r, { emit: m }) {
+    const p = m, i = le();
+    async function c(d) {
+      d && (await navigator.clipboard.writeText(d), i.open({ message: "Copied to clipboard!", type: "success" }));
+    }
+    return (d, t) => {
+      const a = x("FmIcon"), g = x("FmTooltip");
+      return l(), u("div", ve, [
+        n(g, {
+          content: "Remy AI",
+          placement: "top",
+          "hide-arrow": !1
+        }, {
+          default: j(() => [
+            e("button", {
+              class: "p-8 rounded-md hover:bg-fm-color-neutral-gray-100 transition-colors",
+              onClick: t[0] || (t[0] = ($) => p("editWithRemy"))
+            }, [
+              n(a, {
+                name: "auto_awesome",
+                size: "sm",
+                color: "neutral-gray-400"
+              })
+            ])
+          ]),
+          _: 1
+        }),
+        n(g, {
+          content: "Copy",
+          placement: "top",
+          "hide-arrow": !1
+        }, {
+          default: j(() => [
+            e("button", {
+              class: "p-8 rounded-md hover:bg-fm-color-neutral-gray-100 transition-colors",
+              onClick: t[1] || (t[1] = ($) => c(r.text))
+            }, [
+              n(a, {
+                name: "content_copy",
+                size: "sm",
+                color: "neutral-gray-400"
+              })
+            ])
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+}), xe = { class: "border-l border-fm-color-neutral-gray-100 p-24" }, be = { class: "flex flex-col gap-24" }, he = { class: "flex flex-col gap-12" }, _e = { class: "flex flex-col gap-8" }, we = { class: "flex flex-col gap-8" }, ke = { class: "fm-typo-en-body-sm-400 text-fm-color-typo-secondary uppercase tracking-wide" }, $e = { class: "flex flex-col gap-8" }, Ue = /* @__PURE__ */ C({
+  __name: "MarketingMaterialContentDetails",
+  props: {
+    marketingMaterial: {}
+  },
+  emits: ["update:imageUrl", "update:headline", "update:caption"],
+  setup(r, { emit: m }) {
+    const p = r, i = m, { t: c } = G(), d = K(), t = k(p.marketingMaterial.headline), a = k(p.marketingMaterial.caption), g = k("Learn More"), $ = k(p.marketingMaterial.headline), I = k(p.marketingMaterial.caption), z = k(!1), b = k(!1);
+    B(
+      () => p.marketingMaterial.headline,
+      (f) => {
+        if (z.value) {
+          z.value = !1;
+          return;
+        }
+        t.value = f, $.value = f;
+      }
+    ), B(
+      () => p.marketingMaterial.caption,
+      (f) => {
+        if (b.value) {
+          b.value = !1;
+          return;
+        }
+        a.value = f ?? "", I.value = f;
+      }
+    ), Y(
+      "apply-edited-copy",
+      async ({ headline: f, caption: o }) => {
+        f !== void 0 && (t.value = f, $.value = f, z.value = !0, i("update:headline", f)), o !== void 0 && (a.value = o, I.value = o, b.value = !0, i("update:caption", o));
+      }
+    );
+    function v() {
+      d.activate({
+        command: "editMarketingBanner",
+        prompt: "",
+        attachments: [
+          {
+            value: p.marketingMaterial,
+            key: "marketingMaterial"
+          }
+        ]
+      });
+    }
+    function F() {
+      d.activate({
+        command: "editCopy",
+        attachments: [
+          {
+            value: p.marketingMaterial,
+            key: "marketingMaterial"
+          }
+        ]
+      });
+    }
+    async function h(f) {
+      const o = f === "headline" ? t.value : a.value, y = f === "headline" ? $.value : I.value;
+      o !== y && (f === "headline" ? $.value = o : I.value = o);
+    }
+    function M(f, o) {
+      f === "headline" ? (t.value = o, z.value = !0, i("update:headline", o)) : (a.value = o, b.value = !0, i("update:caption", o));
+    }
+    return (f, o) => {
+      const y = x("FmTextField"), E = x("FmTextarea");
+      return l(), u("section", xe, [
+        o[9] || (o[9] = e("h2", { class: "mb-24 align-middle font-['Inter'] text-[22px] font-semibold leading-[24px] tracking-[-0.015em] text-fm-color-typo-primary [leading-trim:none]" }, " Content Details ", -1)),
+        e("div", be, [
+          e("div", he, [
+            o[6] || (o[6] = e("p", { class: "fm-typo-en-body-sm-400 text-fm-color-typo-secondary uppercase tracking-wide" }, " Image ", -1)),
+            n(ye, {
+              "image-url": r.marketingMaterial.imageUrl,
+              onEdit: v,
+              "onUpdate:imageUrl": o[0] || (o[0] = (w) => i("update:imageUrl", w))
+            }, null, 8, ["image-url"])
+          ]),
+          e("div", _e, [
+            o[7] || (o[7] = e("p", { class: "fm-typo-en-body-sm-400 text-fm-color-typo-secondary uppercase tracking-wide" }, " Header ", -1)),
+            n(y, {
+              "model-value": s(t),
+              "onUpdate:modelValue": o[1] || (o[1] = (w) => M("headline", w)),
+              onFocusChanged: o[2] || (o[2] = (w) => !w && h("headline"))
+            }, {
+              append: j(() => [
+                n(O, {
+                  text: s(t),
+                  onEditWithRemy: F
+                }, null, 8, ["text"])
+              ]),
+              _: 1
+            }, 8, ["model-value"])
+          ]),
+          e("div", we, [
+            e("p", ke, _(s(c)("connect.marketing.materialEdit.caption")), 1),
+            n(E, {
+              "model-value": s(a),
+              "onUpdate:modelValue": o[3] || (o[3] = (w) => M("caption", w)),
+              onFocusChanged: o[4] || (o[4] = (w) => !w && h("caption")),
+              rows: "4"
+            }, {
+              append: j(() => [
+                n(O, {
+                  text: s(a),
+                  onEditWithRemy: F
+                }, null, 8, ["text"])
+              ]),
+              _: 1
+            }, 8, ["model-value"])
+          ]),
+          e("div", $e, [
+            o[8] || (o[8] = e("p", { class: "fm-typo-en-body-sm-400 text-fm-color-typo-secondary uppercase tracking-wide" }, " Call to Action ", -1)),
+            n(y, {
+              modelValue: s(g),
+              "onUpdate:modelValue": o[5] || (o[5] = (w) => W(g) ? g.value = w : null)
+            }, null, 8, ["modelValue"])
+          ])
+        ])
+      ]);
+    };
+  }
+}), Ce = { class: "flex items-center px-4" }, Fe = { class: "px-[4px] py-[6px] text-xs text-fm-color-typo-secondary" }, Me = /* @__PURE__ */ C({
+  __name: "ActionBar",
+  setup(r) {
+    const m = [
+      { icon: "thumb_up", count: "10k+" },
+      { icon: "mode_comment", count: "128" },
+      { icon: "share", count: "56" }
+    ];
+    return (p, i) => {
+      const c = x("FmIcon");
+      return l(), u("div", Ce, [
+        (l(), u(L, null, X(m, (d) => e("button", {
+          key: d.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"
+        }, [
+          n(c, {
+            class: "px-[4px] py-[6px]",
+            name: d.icon,
+            size: "md",
+            color: "neutral-gray-400",
+            outline: ""
+          }, null, 8, ["name"]),
+          e("span", Fe, _(d.count), 1)
+        ])), 64))
+      ]);
+    };
+  }
+}), Ie = { class: "max-w-[500px] mx-auto rounded-lg border border-fm-color-neutral-gray-200 fm-shadow-light-200 overflow-hidden bg-white" }, ze = { class: "flex items-center gap-12 px-16 py-12" }, je = { class: "w-40 h-40 rounded-full bg-fm-color-neutral-gray-200 flex items-center justify-center shrink-0 overflow-hidden" }, Te = ["src"], Se = { class: "flex-1 min-w-0" }, Re = { class: "fm-typo-en-body-sm-700 text-fm-color-typo-primary leading-tight font-semibold" }, Ee = { class: "fm-typo-en-body-xs-400 text-fm-color-typo-secondary leading-tight text-xs flex items-center gap-4" }, Pe = {
+  key: 0,
+  class: "px-16 pb-12"
+}, Ae = { class: "fm-typo-en-body-sm-400 text-fm-color-typo-primary whitespace-pre-wrap" }, Be = { class: "w-full bg-fm-color-neutral-gray-100 overflow-hidden" }, Le = ["src"], Ve = {
+  key: 1,
+  class: "aspect-square flex items-center justify-center"
+}, De = { class: "px-16 py-12 bg-fm-color-neutral-gray-50 border-t border-fm-color-neutral-gray-200" }, Ne = { class: "fm-typo-en-body-sm-700 text-fm-color-typo-primary line-clamp-2" }, He = /* @__PURE__ */ C({
+  __name: "FacebookPostPreview",
+  props: {
+    imageUrl: {},
+    headline: {},
+    caption: {}
+  },
+  setup(r) {
+    const { currentBusiness: m } = R();
+    return (p, i) => {
+      var d, t;
+      const c = x("FmIcon");
+      return l(), u("div", Ie, [
+        e("div", ze, [
+          e("div", je, [
+            (d = s(m)) != null && d.thumbnail ? (l(), u("img", {
+              key: 0,
+              src: s(m).thumbnail,
+              class: "w-full h-full object-cover",
+              alt: "Business logo"
+            }, null, 8, Te)) : (l(), S(c, {
+              key: 1,
+              name: "storefront",
+              size: "sm",
+              color: "neutral-gray-400"
+            }))
+          ]),
+          e("div", Se, [
+            e("p", Re, _(((t = s(m)) == null ? void 0 : t.name) ?? "Your Business"), 1),
+            e("p", Ee, [
+              i[0] || (i[0] = Z(" Sponsored · ", -1)),
+              n(c, {
+                name: "public",
+                size: "sm",
+                color: "neutral-gray-400"
+              })
+            ])
+          ]),
+          n(c, {
+            name: "more_horiz",
+            size: "sm",
+            color: "neutral-gray-400"
+          })
+        ]),
+        r.caption ? (l(), u("div", Pe, [
+          e("p", Ae, _(r.caption), 1)
+        ])) : U("", !0),
+        e("div", Be, [
+          r.imageUrl ? (l(), u("img", {
+            key: 0,
+            src: r.imageUrl,
+            alt: "Post image",
+            class: "w-full h-auto block"
+          }, null, 8, Le)) : (l(), u("div", Ve, [
+            n(c, {
+              name: "image",
+              size: "xl",
+              color: "neutral-gray-300"
+            })
+          ]))
+        ]),
+        e("div", De, [
+          i[1] || (i[1] = e("p", { class: "fm-typo-en-body-xs-400 text-fm-color-typo-secondary uppercase tracking-wide mb-2" }, " yourbusiness.com ", -1)),
+          e("p", Ne, _(r.headline ?? "—"), 1)
+        ]),
+        n(Me)
+      ]);
+    };
+  }
+}), Oe = { class: "max-w-[300px] mx-auto rounded-2xl overflow-hidden fm-shadow-light-200 relative aspect-[9/16] bg-black" }, We = ["src"], qe = {
+  key: 1,
+  class: "absolute inset-0 flex items-center justify-center bg-fm-color-neutral-gray-800"
+}, Ge = { class: "absolute inset-x-0 top-0 px-12 pt-12 pb-24 bg-gradient-to-b from-black/60 to-transparent" }, Ke = { class: "flex items-center gap-8" }, Ye = { class: "w-32 h-32 rounded-full bg-fm-color-neutral-gray-200 shrink-0 overflow-hidden border-2 border-white" }, Je = ["src"], Qe = { class: "flex-1 min-w-0" }, Xe = { class: "text-white text-xs font-semibold leading-tight truncate" }, Ze = { class: "absolute inset-x-0 bottom-0 px-16 pb-24 pt-40 bg-gradient-to-t from-black/70 to-transparent" }, et = {
+  key: 0,
+  class: "text-white text-xs mb-12 line-clamp-3"
+}, tt = { class: "flex justify-center" }, ot = { class: "px-24 py-8 rounded-full bg-white text-fm-color-typo-primary text-xs font-semibold" }, nt = /* @__PURE__ */ C({
+  __name: "FacebookStoryPreview",
+  props: {
+    imageUrl: {},
+    headline: {},
+    caption: {}
+  },
+  setup(r) {
+    const { currentBusiness: m } = R();
+    return (p, i) => {
+      var d, t;
+      const c = x("FmIcon");
+      return l(), u("div", Oe, [
+        r.imageUrl ? (l(), u("img", {
+          key: 0,
+          src: r.imageUrl,
+          alt: "Story image",
+          class: "absolute inset-0 w-full h-full object-contain"
+        }, null, 8, We)) : (l(), u("div", qe, [
+          n(c, {
+            name: "image",
+            size: "xl",
+            color: "neutral-gray-500"
+          })
+        ])),
+        e("div", Ge, [
+          i[1] || (i[1] = e("div", { class: "flex gap-4 mb-10" }, [
+            e("div", { class: "h-[2px] flex-1 rounded-full bg-white" })
+          ], -1)),
+          e("div", Ke, [
+            e("div", Ye, [
+              (d = s(m)) != null && d.thumbnail ? (l(), u("img", {
+                key: 0,
+                src: s(m).thumbnail,
+                class: "w-full h-full object-cover",
+                alt: "Business logo"
+              }, null, 8, Je)) : (l(), S(c, {
+                key: 1,
+                name: "storefront",
+                size: "sm",
+                color: "neutral-gray-400"
+              }))
+            ]),
+            e("div", Qe, [
+              e("p", Xe, _(((t = s(m)) == null ? void 0 : t.name) ?? "Your Business"), 1),
+              i[0] || (i[0] = e("p", { class: "text-white/70 text-[10px] leading-tight" }, "Sponsored", -1))
+            ]),
+            n(c, {
+              name: "more_vert",
+              size: "sm",
+              color: "neutral-white"
+            }),
+            n(c, {
+              name: "close",
+              size: "sm",
+              color: "neutral-white"
+            })
+          ])
+        ]),
+        e("div", Ze, [
+          r.caption ? (l(), u("p", et, _(r.caption), 1)) : U("", !0),
+          e("div", tt, [
+            e("button", ot, _(r.headline ?? "Learn More"), 1)
+          ])
+        ])
+      ]);
+    };
+  }
+}), at = { class: "max-w-[400px] mx-auto rounded-lg border border-fm-color-neutral-gray-200 fm-shadow-light-200 overflow-hidden bg-white" }, st = { class: "flex items-center gap-12 px-12 py-10" }, lt = { class: "w-32 h-32 rounded-full bg-gradient-to-tr from-yellow-400 via-pink-500 to-purple-600 p-[2px] shrink-0" }, it = { class: "w-full h-full rounded-full bg-white p-[1px] overflow-hidden" }, rt = ["src"], ct = {
+  key: 1,
+  class: "w-full h-full rounded-full bg-fm-color-neutral-gray-200 flex items-center justify-center"
+}, mt = { class: "flex-1 min-w-0" }, dt = { class: "text-sm font-semibold text-fm-color-typo-primary leading-tight truncate" }, ut = { class: "w-full bg-fm-color-neutral-gray-100 overflow-hidden" }, pt = ["src"], ft = {
+  key: 1,
+  class: "aspect-square flex items-center justify-center"
+}, gt = { class: "flex items-center gap-12 px-12 pt-10 pb-4" }, yt = {
+  key: 0,
+  class: "px-12 pb-12"
+}, vt = { class: "text-xs text-fm-color-typo-primary" }, xt = { class: "font-semibold mr-4" }, bt = { class: "line-clamp-2" }, ht = /* @__PURE__ */ C({
+  __name: "InstagramPostPreview",
+  props: {
+    imageUrl: {},
+    headline: {},
+    caption: {}
+  },
+  setup(r) {
+    const { currentBusiness: m } = R();
+    return (p, i) => {
+      var d, t, a;
+      const c = x("FmIcon");
+      return l(), u("div", at, [
+        e("div", st, [
+          e("div", lt, [
+            e("div", it, [
+              (d = s(m)) != null && d.thumbnail ? (l(), u("img", {
+                key: 0,
+                src: s(m).thumbnail,
+                class: "w-full h-full object-cover rounded-full",
+                alt: "Business logo"
+              }, null, 8, rt)) : (l(), u("div", ct, [
+                n(c, {
+                  name: "storefront",
+                  size: "sm",
+                  color: "neutral-gray-400"
+                })
+              ]))
+            ])
+          ]),
+          e("div", mt, [
+            e("p", dt, _(((t = s(m)) == null ? void 0 : t.name) ?? "yourbusiness"), 1),
+            i[0] || (i[0] = e("p", { class: "text-[10px] text-fm-color-typo-secondary leading-tight" }, " Sponsored ", -1))
+          ]),
+          n(c, {
+            name: "more_horiz",
+            size: "sm",
+            color: "neutral-gray-400"
+          })
+        ]),
+        e("div", ut, [
+          r.imageUrl ? (l(), u("img", {
+            key: 0,
+            src: r.imageUrl,
+            alt: "Post image",
+            class: "w-full h-auto block"
+          }, null, 8, pt)) : (l(), u("div", ft, [
+            n(c, {
+              name: "image",
+              size: "xl",
+              color: "neutral-gray-300"
+            })
+          ]))
+        ]),
+        e("div", gt, [
+          n(c, {
+            name: "favorite_border",
+            size: "md",
+            color: "neutral-gray-700"
+          }),
+          n(c, {
+            name: "mode_comment",
+            size: "md",
+            color: "neutral-gray-700",
+            outline: ""
+          }),
+          n(c, {
+            name: "send",
+            size: "md",
+            color: "neutral-gray-700"
+          }),
+          i[1] || (i[1] = e("div", { class: "flex-1" }, null, -1)),
+          n(c, {
+            name: "bookmark_border",
+            size: "md",
+            color: "neutral-gray-700"
+          })
+        ]),
+        i[2] || (i[2] = e("div", { class: "px-12 pb-4" }, [
+          e("p", { class: "text-xs font-semibold text-fm-color-typo-primary" }, " 10,428 likes ")
+        ], -1)),
+        r.caption || r.headline ? (l(), u("div", yt, [
+          e("p", vt, [
+            e("span", xt, _(((a = s(m)) == null ? void 0 : a.name) ?? "yourbusiness"), 1),
+            e("span", bt, _(r.caption ?? r.headline), 1)
+          ])
+        ])) : U("", !0)
+      ]);
+    };
+  }
+}), _t = { class: "max-w-[300px] mx-auto rounded-2xl overflow-hidden fm-shadow-light-200 relative aspect-[9/16] bg-black" }, wt = ["src"], kt = {
+  key: 1,
+  class: "absolute inset-0 flex items-center justify-center bg-fm-color-neutral-gray-800"
+}, $t = { class: "absolute inset-x-0 top-0 px-12 pt-12 pb-24 bg-gradient-to-b from-black/60 to-transparent" }, Ut = { class: "flex items-center gap-8" }, Ct = { class: "w-32 h-32 rounded-full p-[2px] bg-gradient-to-tr from-yellow-400 via-pink-500 to-purple-600 shrink-0" }, Ft = { class: "w-full h-full rounded-full bg-black/30 overflow-hidden" }, Mt = ["src"], It = {
+  key: 1,
+  class: "w-full h-full flex items-center justify-center"
+}, zt = { class: "flex-1 min-w-0" }, jt = { class: "text-white text-xs font-semibold leading-tight truncate" }, Tt = { class: "absolute inset-x-0 bottom-0 px-16 pb-24 pt-40 bg-gradient-to-t from-black/70 to-transparent" }, St = {
+  key: 0,
+  class: "text-white text-xs mb-12 line-clamp-3"
+}, Rt = { class: "flex justify-center" }, Et = { class: "px-24 py-8 rounded-full bg-white text-fm-color-typo-primary text-xs font-semibold" }, Pt = /* @__PURE__ */ C({
+  __name: "InstagramStoryPreview",
+  props: {
+    imageUrl: {},
+    headline: {},
+    caption: {}
+  },
+  setup(r) {
+    const { currentBusiness: m } = R();
+    return (p, i) => {
+      var d, t;
+      const c = x("FmIcon");
+      return l(), u("div", _t, [
+        r.imageUrl ? (l(), u("img", {
+          key: 0,
+          src: r.imageUrl,
+          alt: "Story image",
+          class: "absolute inset-0 w-full h-full object-contain"
+        }, null, 8, wt)) : (l(), u("div", kt, [
+          n(c, {
+            name: "image",
+            size: "xl",
+            color: "neutral-gray-500"
+          })
+        ])),
+        e("div", $t, [
+          i[1] || (i[1] = e("div", { class: "flex gap-4 mb-10" }, [
+            e("div", { class: "h-[2px] flex-1 rounded-full bg-white" })
+          ], -1)),
+          e("div", Ut, [
+            e("div", Ct, [
+              e("div", Ft, [
+                (d = s(m)) != null && d.thumbnail ? (l(), u("img", {
+                  key: 0,
+                  src: s(m).thumbnail,
+                  class: "w-full h-full object-cover",
+                  alt: "Business logo"
+                }, null, 8, Mt)) : (l(), u("div", It, [
+                  n(c, {
+                    name: "storefront",
+                    size: "sm",
+                    color: "neutral-gray-400"
+                  })
+                ]))
+              ])
+            ]),
+            e("div", zt, [
+              e("p", jt, _(((t = s(m)) == null ? void 0 : t.name) ?? "yourbusiness"), 1),
+              i[0] || (i[0] = e("p", { class: "text-white/70 text-[10px] leading-tight" }, "Sponsored", -1))
+            ]),
+            n(c, {
+              name: "more_vert",
+              size: "sm",
+              color: "neutral-white"
+            }),
+            n(c, {
+              name: "close",
+              size: "sm",
+              color: "neutral-white"
+            })
+          ])
+        ]),
+        e("div", Tt, [
+          r.caption ? (l(), u("p", St, _(r.caption), 1)) : U("", !0),
+          e("div", Rt, [
+            e("button", Et, _(r.headline ?? "Learn More"), 1)
+          ])
+        ])
+      ]);
+    };
+  }
+}), At = { class: "mx-auto mb-24 grid max-w-[856px] grid-cols-2 rounded-2xl border border-fm-color-neutral-gray-200 md:grid-cols-1" }, Bt = { class: "min-w-0 bg-fm-color-neutral-gray-50 xs:p-16" }, Lt = { class: "mx-auto flex max-w-[560px] flex-col" }, Vt = { class: "p-24" }, Dt = { class: "rounded-bl-2xl bg-fm-color-neutral-gray-100 p-24 xs:p-12" }, to = /* @__PURE__ */ C({
+  __name: "MarketingMaterialEdit",
+  setup(r) {
+    const { t: m } = G(), p = oe(), i = q(), c = K(), d = ie(), { minor: t } = re, a = k(null), g = k(null), $ = P(() => !a.value || !g.value ? !1 : a.value.imageUrl !== g.value.imageUrl || a.value.headline !== g.value.headline || a.value.caption !== g.value.caption), I = P(() => ({
+      label: m("connect.common.save"),
+      value: "save",
+      isPrimary: !0,
+      disabled: !$.value
+    })), z = {
+      label: m("connect.common.cancel"),
+      value: "cancel",
+      isPrimary: !1
+    };
+    async function b() {
+      $.value ? d.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(() => {
+        p.push({ name: H["$connect-MARKETING"] });
+      }).onSecondary(() => {
+        d.close();
+      }) : p.push({ name: H["$connect-MARKETING"] });
+    }
+    async function v() {
+      !a.value || !$.value || await t(
+        async () => {
+          const o = a.value._id, y = await N.updateMarketingMaterial(o, {
+            imageUrl: a.value.imageUrl,
+            headline: a.value.headline,
+            caption: a.value.caption
+          });
+          a.value = y, g.value = D.cloneDeep(y);
+        },
+        {
+          message: "Saving changes...",
+          successMessage: "Changes saved successfully"
+        }
+      );
+    }
+    async function F(o) {
+      o === "save" ? await v() : o === "cancel" && await b();
+    }
+    const h = [
+      { label: "Facebook Post", value: "facebook-post" },
+      { label: "Facebook Story", value: "facebook-story" },
+      { label: "Instagram Post", value: "instagram-post" },
+      { label: "Instagram Story", value: "instagram-story" }
+    ], M = k(h[0].value), f = P(() => {
+      switch (M.value) {
+        case "facebook-story":
+          return nt;
+        case "instagram-post":
+          return ht;
+        case "instagram-story":
+          return Pt;
+        default:
+          return He;
+      }
+    });
+    return ee(async () => {
+      const o = i.query.id;
+      if (!o) return;
+      const y = await N.getMarketingMaterial(o);
+      a.value = y, g.value = D.cloneDeep(y);
+    }), (o, y) => {
+      const E = x("FmPageHead"), w = x("FmSelect");
+      return l(), u(L, null, [
+        n(E, {
+          "back-button": !0,
+          title: s(m)("connect.marketing.materialEdit.title"),
+          class: "xs:hidden",
+          actions: [z, s(I)],
+          "onClick:back": b,
+          "onClick:action": F
+        }, null, 8, ["title", "actions"]),
+        e("div", At, [
+          e("section", Bt, [
+            e("div", Lt, [
+              e("div", Vt, [
+                n(w, {
+                  modelValue: s(M),
+                  "onUpdate:modelValue": y[0] || (y[0] = (T) => W(M) ? M.value = T : null),
+                  items: h
+                }, null, 8, ["modelValue"])
+              ]),
+              e("div", Dt, [
+                s(a) ? (l(), S(te(s(f)), {
+                  key: 0,
+                  "image-url": s(a).imageUrl,
+                  headline: s(a).headline,
+                  caption: s(a).caption
+                }, null, 8, ["image-url", "headline", "caption"])) : U("", !0)
+              ])
+            ])
+          ]),
+          s(a) ? (l(), S(Ue, {
+            key: 0,
+            "marketing-material": s(a),
+            "onUpdate:imageUrl": y[1] || (y[1] = (T) => s(a).imageUrl = T),
+            "onUpdate:headline": y[2] || (y[2] = (T) => s(a).headline = T),
+            "onUpdate:caption": y[3] || (y[3] = (T) => s(a).caption = T)
+          }, null, 8, ["marketing-material"])) : U("", !0)
+        ]),
+        s(c).dialogShowing ? (l(), S(s(ne), { key: 0 })) : U("", !0)
+      ], 64);
+    };
+  }
+});
+export {
+  to as default
+};