@feedmepos/mf-connect 0.1.38-beta.74 → 0.1.38-beta.75

package/dist/MarketingMaterialEdit-C63qyQSd.js

@@ -0,0 +1,746 @@
+import { defineComponent as _, resolveComponent as y, openBlock as n, createBlock as w, withCtx as $, createElementVNode as e, createVNode as i, createElementBlock as d, ref as v, watch as F, Fragment as I, unref as s, createCommentVNode as b, Teleport as R, Transition as A, withModifiers as L, toDisplayString as g, renderList as q, createTextVNode as N, onMounted as O } from "vue";
+import "./index-DnrSd_o_.js";
+import { useRoute as j, useRouter as V } from "vue-router";
+import { u as E } from "./vue-i18n-BxV_u4BZ.js";
+import { m as C } from "./index-BwLCkOIF.js";
+import { useClientEvent as M, ChatPanel as W } from "@feedmepos/mf-remy-panel";
+import { _ as G } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import { useSnackbar as H } from "@feedmepos/ui-library";
+import { u as S } from "./remy-D_Deb3ue.js";
+import { useCoreStore as U } from "@feedmepos/mf-common";
+import { R as D } from "./app-zPef9Uzl.js";
+const z = /* @__PURE__ */ _({
+  __name: "ActionToolbarButton",
+  props: {
+    icon: {},
+    tooltip: {}
+  },
+  emits: ["click"],
+  setup(t, { emit: r }) {
+    const m = r;
+    return (c, a) => {
+      const l = y("FmIcon"), o = y("FmTooltip");
+      return n(), w(o, {
+        content: t.tooltip,
+        placement: "bottom",
+        "z-index": 60,
+        variant: "rich"
+      }, {
+        default: $(() => [
+          e("button", {
+            class: "p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors text-white flex items-center justify-center",
+            onClick: a[0] || (a[0] = (f) => m("click"))
+          }, [
+            i(l, {
+              name: t.icon,
+              size: "md"
+            }, null, 8, ["name"])
+          ])
+        ]),
+        _: 1
+      }, 8, ["content"]);
+    };
+  }
+}), Y = { class: "flex gap-8" }, K = /* @__PURE__ */ _({
+  __name: "ActionToolbar",
+  props: {
+    imageUrl: {}
+  },
+  emits: ["edit", "close"],
+  setup(t, { emit: r }) {
+    const m = t, c = r;
+    async function a() {
+      if (m.imageUrl)
+        try {
+          const o = await (await fetch(m.imageUrl)).blob(), f = URL.createObjectURL(o), x = document.createElement("a");
+          x.href = f, x.download = "marketing-material", x.click(), URL.revokeObjectURL(f);
+        } catch {
+          window.open(m.imageUrl, "_blank");
+        }
+    }
+    return (l, o) => (n(), d("div", Y, [
+      i(z, {
+        icon: "edit",
+        tooltip: "Edit",
+        onClick: o[0] || (o[0] = (f) => c("edit"))
+      }),
+      i(z, {
+        icon: "download",
+        tooltip: "Download",
+        onClick: a
+      }),
+      i(z, {
+        icon: "close",
+        tooltip: "Close",
+        onClick: o[1] || (o[1] = (f) => c("close"))
+      })
+    ]));
+  }
+}), J = ["src"], Q = { class: "absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity text-white" }, X = {
+  key: 1,
+  class: "absolute inset-0 flex items-center justify-center"
+}, Z = { class: "relative" }, ee = ["src"], te = /* @__PURE__ */ _({
+  __name: "Thumbnail",
+  props: {
+    imageUrl: {}
+  },
+  emits: ["edit"],
+  setup(t, { emit: r }) {
+    const m = t, c = r, a = j(), l = v(!1), o = v(m.imageUrl);
+    F(
+      () => m.imageUrl,
+      (u) => {
+        o.value = u;
+      }
+    );
+    const f = v(!1);
+    function x() {
+      l.value = !1, c("edit", o.value);
+    }
+    return M(
+      "apply-edited-banner",
+      async ({ imageUrl: u }) => {
+        const p = a.query.id;
+        if (p) {
+          f.value = !0;
+          try {
+            await C.updateMarketingMaterial(p, { imageUrl: u }), o.value = u;
+          } finally {
+            f.value = !1;
+          }
+        }
+      }
+    ), (u, p) => {
+      const h = y("FmIcon");
+      return n(), d(I, null, [
+        e("div", {
+          class: "relative group cursor-pointer rounded-xl overflow-hidden fm-shadow-light-200 aspect-square bg-white",
+          onClick: p[0] || (p[0] = (k) => l.value = !0)
+        }, [
+          s(o) ? (n(), d("img", {
+            key: 0,
+            src: s(o),
+            alt: "Generated Material",
+            class: "w-full h-full object-contain"
+          }, null, 8, J)) : b("", !0),
+          e("div", Q, [
+            i(h, {
+              name: "zoom_in",
+              size: "xl"
+            })
+          ]),
+          s(f) ? (n(), d("div", X, [...p[3] || (p[3] = [
+            e("div", { class: "w-10 h-10 rounded-full border-4 border-white/30 border-t-white animate-spin" }, null, -1)
+          ])])) : b("", !0)
+        ]),
+        (n(), w(R, { to: "body" }, [
+          i(A, { name: "fade" }, {
+            default: $(() => [
+              s(l) ? (n(), d("div", {
+                key: 0,
+                class: "fixed inset-0 z-50 bg-black/80 flex items-center justify-center",
+                onClick: p[2] || (p[2] = L((k) => l.value = !1, ["self"]))
+              }, [
+                e("div", Z, [
+                  i(K, {
+                    class: "absolute top-0 right-0 z-10 -translate-y-full p-4",
+                    "image-url": s(o),
+                    onEdit: x,
+                    onClose: p[1] || (p[1] = (k) => l.value = !1)
+                  }, null, 8, ["image-url"]),
+                  s(o) ? (n(), d("img", {
+                    key: 0,
+                    src: s(o),
+                    alt: "Preview",
+                    class: "max-h-[80vh] max-w-[90vw] object-contain rounded-xl"
+                  }, null, 8, ee)) : b("", !0)
+                ])
+              ])) : b("", !0)
+            ]),
+            _: 1
+          })
+        ]))
+      ], 64);
+    };
+  }
+}), oe = /* @__PURE__ */ G(te, [["__scopeId", "data-v-9a9ede30"]]), ne = { class: "flex gap-4 shrink-0 mt-2" }, B = /* @__PURE__ */ _({
+  __name: "TextActionWidget",
+  props: {
+    text: {}
+  },
+  emits: ["editWithRemy"],
+  setup(t, { emit: r }) {
+    const m = r, c = H();
+    async function a(l) {
+      l && (await navigator.clipboard.writeText(l), c.open({ message: "Copied to clipboard!", type: "success" }));
+    }
+    return (l, o) => {
+      const f = y("FmIcon"), x = y("FmTooltip");
+      return n(), d("div", ne, [
+        i(x, {
+          content: "Remy AI",
+          placement: "top",
+          "hide-arrow": !1
+        }, {
+          default: $(() => [
+            e("button", {
+              class: "p-8 rounded-md hover:bg-fm-color-neutral-gray-100 transition-colors",
+              onClick: o[0] || (o[0] = (u) => m("editWithRemy"))
+            }, [
+              i(f, {
+                name: "auto_awesome",
+                size: "sm",
+                color: "neutral-gray-400"
+              })
+            ])
+          ]),
+          _: 1
+        }),
+        i(x, {
+          content: "Copy",
+          placement: "top",
+          "hide-arrow": !1
+        }, {
+          default: $(() => [
+            e("button", {
+              class: "p-8 rounded-md hover:bg-fm-color-neutral-gray-100 transition-colors",
+              onClick: o[1] || (o[1] = (u) => a(t.text))
+            }, [
+              i(f, {
+                name: "content_copy",
+                size: "sm",
+                color: "neutral-gray-400"
+              })
+            ])
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+}), se = { class: "flex gap-24 px-24 py-48 sm:flex-col xs:flex-col" }, le = { class: "flex-1" }, ie = { class: "flex-[2] flex flex-col gap-24" }, ae = { class: "flex flex-col gap-8" }, re = { class: "fm-typo-en-body-sm-400 text-fm-color-typo-secondary uppercase tracking-wide" }, ce = { class: "flex items-start gap-8" }, de = { class: "fm-typo-en-title-sm-800 flex-1" }, me = { class: "flex flex-col gap-8" }, ue = { class: "fm-typo-en-body-sm-400 text-fm-color-typo-secondary uppercase tracking-wide" }, pe = { class: "flex items-start gap-8" }, fe = { class: "fm-typo-en-body-md-400 text-fm-color-typo-primary whitespace-pre-wrap flex-1" }, ge = /* @__PURE__ */ _({
+  __name: "OverviewTab",
+  props: {
+    imageUrl: {},
+    headline: {},
+    caption: {}
+  },
+  setup(t) {
+    const r = t, { t: m } = E(), c = j(), a = S(), l = v(r.headline), o = v(r.caption);
+    F(
+      () => r.headline,
+      (u) => {
+        l.value = u;
+      }
+    ), F(
+      () => r.caption,
+      (u) => {
+        o.value = u;
+      }
+    ), M(
+      "apply-edited-copy",
+      async ({ headline: u, caption: p }) => {
+        const h = c.query.id;
+        h && (await C.updateMarketingMaterial(h, {
+          headline: u,
+          caption: p
+        }), u !== void 0 && (l.value = u), p !== void 0 && (o.value = p));
+      }
+    );
+    function f(u) {
+      a.activate({
+        command: "editMarketingBanner",
+        images: u ? [u] : [],
+        prompt: "",
+        params: {
+          campaignInfo: { headline: r.headline, caption: r.caption }
+        }
+      });
+    }
+    function x() {
+      a.activate({
+        command: "editCopy",
+        params: {
+          campaignInfo: {
+            headline: l.value,
+            caption: o.value
+          }
+        }
+      });
+    }
+    return (u, p) => (n(), d("div", se, [
+      e("div", le, [
+        i(oe, {
+          "image-url": t.imageUrl,
+          onEdit: f
+        }, null, 8, ["image-url"])
+      ]),
+      e("div", ie, [
+        e("div", ae, [
+          e("p", re, g(s(m)("connect.marketing.materialEdit.headline")), 1),
+          e("div", ce, [
+            e("p", de, g(s(l)), 1),
+            i(B, {
+              text: s(l),
+              onEditWithRemy: x
+            }, null, 8, ["text"])
+          ])
+        ]),
+        p[0] || (p[0] = e("div", { class: "border-t border-fm-color-neutral-gray-200" }, null, -1)),
+        e("div", me, [
+          e("p", ue, g(s(m)("connect.marketing.materialEdit.caption")), 1),
+          e("div", pe, [
+            e("p", fe, g(s(o)), 1),
+            i(B, {
+              text: s(o),
+              onEditWithRemy: x
+            }, null, 8, ["text"])
+          ])
+        ])
+      ])
+    ]));
+  }
+}), xe = { class: "flex items-center px-4" }, he = { class: "px-[4px] py-[6px] text-xs text-fm-color-typo-secondary" }, ye = /* @__PURE__ */ _({
+  __name: "ActionBar",
+  setup(t) {
+    const r = [
+      { icon: "thumb_up", count: "10k+" },
+      { icon: "mode_comment", count: "128" },
+      { icon: "share", count: "56" }
+    ];
+    return (m, c) => {
+      const a = y("FmIcon");
+      return n(), d("div", xe, [
+        (n(), d(I, null, q(r, (l) => e("button", {
+          key: l.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"
+        }, [
+          i(a, {
+            class: "px-[4px] py-[6px]",
+            name: l.icon,
+            size: "md",
+            color: "neutral-gray-400",
+            outline: ""
+          }, null, 8, ["name"]),
+          e("span", he, g(l.count), 1)
+        ])), 64))
+      ]);
+    };
+  }
+}), _e = { class: "max-w-[500px] mx-auto rounded-lg border border-fm-color-neutral-gray-200 fm-shadow-light-200 overflow-hidden bg-white" }, be = { class: "flex items-center gap-12 px-16 py-12" }, ve = { class: "w-40 h-40 rounded-full bg-fm-color-neutral-gray-200 flex items-center justify-center shrink-0 overflow-hidden" }, we = ["src"], ke = { class: "flex-1 min-w-0" }, $e = { class: "fm-typo-en-body-sm-700 text-fm-color-typo-primary leading-tight font-semibold" }, Ue = { class: "fm-typo-en-body-xs-400 text-fm-color-typo-secondary leading-tight text-xs flex items-center gap-4" }, ze = {
+  key: 0,
+  class: "px-16 pb-12"
+}, Fe = { class: "fm-typo-en-body-sm-400 text-fm-color-typo-primary whitespace-pre-wrap" }, Ie = { class: "w-full bg-fm-color-neutral-gray-100 overflow-hidden" }, je = ["src"], Ce = {
+  key: 1,
+  class: "aspect-square flex items-center justify-center"
+}, Te = { class: "px-16 py-12 bg-fm-color-neutral-gray-50 border-t border-fm-color-neutral-gray-200" }, Be = { class: "fm-typo-en-body-sm-700 text-fm-color-typo-primary line-clamp-2" }, Ee = /* @__PURE__ */ _({
+  __name: "FacebookPostPreview",
+  props: {
+    imageUrl: {},
+    headline: {},
+    caption: {}
+  },
+  setup(t) {
+    const { currentBusiness: r } = U();
+    return console.log("currentBusiness", r.value), (m, c) => {
+      var l, o;
+      const a = y("FmIcon");
+      return n(), d("div", _e, [
+        e("div", be, [
+          e("div", ve, [
+            (l = s(r)) != null && l.thumbnail ? (n(), d("img", {
+              key: 0,
+              src: s(r).thumbnail,
+              class: "w-full h-full object-cover",
+              alt: "Business logo"
+            }, null, 8, we)) : (n(), w(a, {
+              key: 1,
+              name: "storefront",
+              size: "sm",
+              color: "neutral-gray-400"
+            }))
+          ]),
+          e("div", ke, [
+            e("p", $e, g(((o = s(r)) == null ? void 0 : o.name) ?? "Your Business"), 1),
+            e("p", Ue, [
+              c[0] || (c[0] = N(" Sponsored · ", -1)),
+              i(a, {
+                name: "public",
+                size: "sm",
+                color: "neutral-gray-400"
+              })
+            ])
+          ]),
+          i(a, {
+            name: "more_horiz",
+            size: "sm",
+            color: "neutral-gray-400"
+          })
+        ]),
+        t.caption ? (n(), d("div", ze, [
+          e("p", Fe, g(t.caption), 1)
+        ])) : b("", !0),
+        e("div", Ie, [
+          t.imageUrl ? (n(), d("img", {
+            key: 0,
+            src: t.imageUrl,
+            alt: "Post image",
+            class: "w-full h-auto block"
+          }, null, 8, je)) : (n(), d("div", Ce, [
+            i(a, {
+              name: "image",
+              size: "xl",
+              color: "neutral-gray-300"
+            })
+          ]))
+        ]),
+        e("div", Te, [
+          c[1] || (c[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", Be, g(t.headline ?? "—"), 1)
+        ]),
+        i(ye)
+      ]);
+    };
+  }
+}), Me = { class: "max-w-[300px] mx-auto rounded-2xl overflow-hidden fm-shadow-light-200 relative aspect-[9/16] bg-black" }, Se = ["src"], Pe = {
+  key: 1,
+  class: "absolute inset-0 flex items-center justify-center bg-fm-color-neutral-gray-800"
+}, Re = { class: "absolute inset-x-0 top-0 px-12 pt-12 pb-24 bg-gradient-to-b from-black/60 to-transparent" }, Ae = { class: "flex items-center gap-8" }, Le = { class: "w-32 h-32 rounded-full bg-fm-color-neutral-gray-200 shrink-0 overflow-hidden border-2 border-white" }, qe = ["src"], Ne = { class: "flex-1 min-w-0" }, Oe = { class: "text-white text-xs font-semibold leading-tight truncate" }, Ve = { class: "absolute inset-x-0 bottom-0 px-16 pb-24 pt-40 bg-gradient-to-t from-black/70 to-transparent" }, We = {
+  key: 0,
+  class: "text-white text-xs mb-12 line-clamp-3"
+}, Ge = { class: "flex justify-center" }, He = { class: "px-24 py-8 rounded-full bg-white text-fm-color-typo-primary text-xs font-semibold" }, De = /* @__PURE__ */ _({
+  __name: "FacebookStoryPreview",
+  props: {
+    imageUrl: {},
+    headline: {},
+    caption: {}
+  },
+  setup(t) {
+    const { currentBusiness: r } = U();
+    return (m, c) => {
+      var l, o;
+      const a = y("FmIcon");
+      return n(), d("div", Me, [
+        t.imageUrl ? (n(), d("img", {
+          key: 0,
+          src: t.imageUrl,
+          alt: "Story image",
+          class: "absolute inset-0 w-full h-full object-contain"
+        }, null, 8, Se)) : (n(), d("div", Pe, [
+          i(a, {
+            name: "image",
+            size: "xl",
+            color: "neutral-gray-500"
+          })
+        ])),
+        e("div", Re, [
+          c[1] || (c[1] = e("div", { class: "flex gap-4 mb-10" }, [
+            e("div", { class: "h-[2px] flex-1 rounded-full bg-white" })
+          ], -1)),
+          e("div", Ae, [
+            e("div", Le, [
+              (l = s(r)) != null && l.thumbnail ? (n(), d("img", {
+                key: 0,
+                src: s(r).thumbnail,
+                class: "w-full h-full object-cover",
+                alt: "Business logo"
+              }, null, 8, qe)) : (n(), w(a, {
+                key: 1,
+                name: "storefront",
+                size: "sm",
+                color: "neutral-gray-400"
+              }))
+            ]),
+            e("div", Ne, [
+              e("p", Oe, g(((o = s(r)) == null ? void 0 : o.name) ?? "Your Business"), 1),
+              c[0] || (c[0] = e("p", { class: "text-white/70 text-[10px] leading-tight" }, "Sponsored", -1))
+            ]),
+            i(a, {
+              name: "more_vert",
+              size: "sm",
+              color: "neutral-white"
+            }),
+            i(a, {
+              name: "close",
+              size: "sm",
+              color: "neutral-white"
+            })
+          ])
+        ]),
+        e("div", Ve, [
+          t.caption ? (n(), d("p", We, g(t.caption), 1)) : b("", !0),
+          e("div", Ge, [
+            e("button", He, g(t.headline ?? "Learn More"), 1)
+          ])
+        ])
+      ]);
+    };
+  }
+}), Ye = { class: "max-w-[400px] mx-auto rounded-lg border border-fm-color-neutral-gray-200 fm-shadow-light-200 overflow-hidden bg-white" }, Ke = { class: "flex items-center gap-12 px-12 py-10" }, Je = { class: "w-32 h-32 rounded-full bg-gradient-to-tr from-yellow-400 via-pink-500 to-purple-600 p-[2px] shrink-0" }, Qe = { class: "w-full h-full rounded-full bg-white p-[1px] overflow-hidden" }, Xe = ["src"], Ze = {
+  key: 1,
+  class: "w-full h-full rounded-full bg-fm-color-neutral-gray-200 flex items-center justify-center"
+}, et = { class: "flex-1 min-w-0" }, tt = { class: "text-sm font-semibold text-fm-color-typo-primary leading-tight truncate" }, ot = { class: "w-full bg-fm-color-neutral-gray-100 overflow-hidden" }, nt = ["src"], st = {
+  key: 1,
+  class: "aspect-square flex items-center justify-center"
+}, lt = { class: "flex items-center gap-12 px-12 pt-10 pb-4" }, it = {
+  key: 0,
+  class: "px-12 pb-12"
+}, at = { class: "text-xs text-fm-color-typo-primary" }, rt = { class: "font-semibold mr-4" }, ct = { class: "line-clamp-2" }, dt = /* @__PURE__ */ _({
+  __name: "InstagramPostPreview",
+  props: {
+    imageUrl: {},
+    headline: {},
+    caption: {}
+  },
+  setup(t) {
+    const { currentBusiness: r } = U();
+    return (m, c) => {
+      var l, o, f;
+      const a = y("FmIcon");
+      return n(), d("div", Ye, [
+        e("div", Ke, [
+          e("div", Je, [
+            e("div", Qe, [
+              (l = s(r)) != null && l.thumbnail ? (n(), d("img", {
+                key: 0,
+                src: s(r).thumbnail,
+                class: "w-full h-full object-cover rounded-full",
+                alt: "Business logo"
+              }, null, 8, Xe)) : (n(), d("div", Ze, [
+                i(a, {
+                  name: "storefront",
+                  size: "sm",
+                  color: "neutral-gray-400"
+                })
+              ]))
+            ])
+          ]),
+          e("div", et, [
+            e("p", tt, g(((o = s(r)) == null ? void 0 : o.name) ?? "yourbusiness"), 1),
+            c[0] || (c[0] = e("p", { class: "text-[10px] text-fm-color-typo-secondary leading-tight" }, " Sponsored ", -1))
+          ]),
+          i(a, {
+            name: "more_horiz",
+            size: "sm",
+            color: "neutral-gray-400"
+          })
+        ]),
+        e("div", ot, [
+          t.imageUrl ? (n(), d("img", {
+            key: 0,
+            src: t.imageUrl,
+            alt: "Post image",
+            class: "w-full h-auto block"
+          }, null, 8, nt)) : (n(), d("div", st, [
+            i(a, {
+              name: "image",
+              size: "xl",
+              color: "neutral-gray-300"
+            })
+          ]))
+        ]),
+        e("div", lt, [
+          i(a, {
+            name: "favorite_border",
+            size: "md",
+            color: "neutral-gray-700"
+          }),
+          i(a, {
+            name: "mode_comment",
+            size: "md",
+            color: "neutral-gray-700",
+            outline: ""
+          }),
+          i(a, {
+            name: "send",
+            size: "md",
+            color: "neutral-gray-700"
+          }),
+          c[1] || (c[1] = e("div", { class: "flex-1" }, null, -1)),
+          i(a, {
+            name: "bookmark_border",
+            size: "md",
+            color: "neutral-gray-700"
+          })
+        ]),
+        c[2] || (c[2] = e("div", { class: "px-12 pb-4" }, [
+          e("p", { class: "text-xs font-semibold text-fm-color-typo-primary" }, " 10,428 likes ")
+        ], -1)),
+        t.caption || t.headline ? (n(), d("div", it, [
+          e("p", at, [
+            e("span", rt, g(((f = s(r)) == null ? void 0 : f.name) ?? "yourbusiness"), 1),
+            e("span", ct, g(t.caption ?? t.headline), 1)
+          ])
+        ])) : b("", !0)
+      ]);
+    };
+  }
+}), mt = { class: "max-w-[300px] mx-auto rounded-2xl overflow-hidden fm-shadow-light-200 relative aspect-[9/16] bg-black" }, ut = ["src"], pt = {
+  key: 1,
+  class: "absolute inset-0 flex items-center justify-center bg-fm-color-neutral-gray-800"
+}, ft = { class: "absolute inset-x-0 top-0 px-12 pt-12 pb-24 bg-gradient-to-b from-black/60 to-transparent" }, gt = { class: "flex items-center gap-8" }, xt = { class: "w-32 h-32 rounded-full p-[2px] bg-gradient-to-tr from-yellow-400 via-pink-500 to-purple-600 shrink-0" }, ht = { class: "w-full h-full rounded-full bg-black/30 overflow-hidden" }, yt = ["src"], _t = {
+  key: 1,
+  class: "w-full h-full flex items-center justify-center"
+}, bt = { class: "flex-1 min-w-0" }, vt = { class: "text-white text-xs font-semibold leading-tight truncate" }, wt = { class: "absolute inset-x-0 bottom-0 px-16 pb-24 pt-40 bg-gradient-to-t from-black/70 to-transparent" }, kt = {
+  key: 0,
+  class: "text-white text-xs mb-12 line-clamp-3"
+}, $t = { class: "flex justify-center" }, Ut = { class: "px-24 py-8 rounded-full bg-white text-fm-color-typo-primary text-xs font-semibold" }, zt = /* @__PURE__ */ _({
+  __name: "InstagramStoryPreview",
+  props: {
+    imageUrl: {},
+    headline: {},
+    caption: {}
+  },
+  setup(t) {
+    const { currentBusiness: r } = U();
+    return (m, c) => {
+      var l, o;
+      const a = y("FmIcon");
+      return n(), d("div", mt, [
+        t.imageUrl ? (n(), d("img", {
+          key: 0,
+          src: t.imageUrl,
+          alt: "Story image",
+          class: "absolute inset-0 w-full h-full object-contain"
+        }, null, 8, ut)) : (n(), d("div", pt, [
+          i(a, {
+            name: "image",
+            size: "xl",
+            color: "neutral-gray-500"
+          })
+        ])),
+        e("div", ft, [
+          c[1] || (c[1] = e("div", { class: "flex gap-4 mb-10" }, [
+            e("div", { class: "h-[2px] flex-1 rounded-full bg-white" })
+          ], -1)),
+          e("div", gt, [
+            e("div", xt, [
+              e("div", ht, [
+                (l = s(r)) != null && l.thumbnail ? (n(), d("img", {
+                  key: 0,
+                  src: s(r).thumbnail,
+                  class: "w-full h-full object-cover",
+                  alt: "Business logo"
+                }, null, 8, yt)) : (n(), d("div", _t, [
+                  i(a, {
+                    name: "storefront",
+                    size: "sm",
+                    color: "neutral-gray-400"
+                  })
+                ]))
+              ])
+            ]),
+            e("div", bt, [
+              e("p", vt, g(((o = s(r)) == null ? void 0 : o.name) ?? "yourbusiness"), 1),
+              c[0] || (c[0] = e("p", { class: "text-white/70 text-[10px] leading-tight" }, "Sponsored", -1))
+            ]),
+            i(a, {
+              name: "more_vert",
+              size: "sm",
+              color: "neutral-white"
+            }),
+            i(a, {
+              name: "close",
+              size: "sm",
+              color: "neutral-white"
+            })
+          ])
+        ]),
+        e("div", wt, [
+          t.caption ? (n(), d("p", kt, g(t.caption), 1)) : b("", !0),
+          e("div", $t, [
+            e("button", Ut, g(t.headline ?? "Learn More"), 1)
+          ])
+        ])
+      ]);
+    };
+  }
+}), Ft = { class: "flex gap-24 px-24 py-48 flex-wrap" }, It = { class: "flex-1 min-w-[260px]" }, jt = { class: "flex-1 min-w-[200px]" }, Ct = { class: "flex-1 min-w-[260px]" }, Tt = { class: "flex-1 min-w-[200px]" }, Bt = /* @__PURE__ */ _({
+  __name: "PreviewTab",
+  props: {
+    imageUrl: {},
+    headline: {},
+    caption: {}
+  },
+  setup(t) {
+    return (r, m) => (n(), d("div", Ft, [
+      e("div", It, [
+        m[0] || (m[0] = e("p", { class: "text-xs font-semibold text-fm-color-typo-secondary uppercase tracking-wide mb-12 text-center" }, " FB Post ", -1)),
+        i(Ee, {
+          "image-url": t.imageUrl,
+          headline: t.headline,
+          caption: t.caption
+        }, null, 8, ["image-url", "headline", "caption"])
+      ]),
+      e("div", jt, [
+        m[1] || (m[1] = e("p", { class: "text-xs font-semibold text-fm-color-typo-secondary uppercase tracking-wide mb-12 text-center" }, " FB Story ", -1)),
+        i(De, {
+          "image-url": t.imageUrl,
+          headline: t.headline,
+          caption: t.caption
+        }, null, 8, ["image-url", "headline", "caption"])
+      ]),
+      e("div", Ct, [
+        m[2] || (m[2] = e("p", { class: "text-xs font-semibold text-fm-color-typo-secondary uppercase tracking-wide mb-12 text-center" }, " IG Post ", -1)),
+        i(dt, {
+          "image-url": t.imageUrl,
+          headline: t.headline,
+          caption: t.caption
+        }, null, 8, ["image-url", "headline", "caption"])
+      ]),
+      e("div", Tt, [
+        m[3] || (m[3] = e("p", { class: "text-xs font-semibold text-fm-color-typo-secondary uppercase tracking-wide mb-12 text-center" }, " IG Story ", -1)),
+        i(zt, {
+          "image-url": t.imageUrl,
+          headline: t.headline,
+          caption: t.caption
+        }, null, 8, ["image-url", "headline", "caption"])
+      ])
+    ]));
+  }
+}), Et = { class: "px-24 pt-24" }, Gt = /* @__PURE__ */ _({
+  __name: "MarketingMaterialEdit",
+  setup(t) {
+    const { t: r } = E(), m = V(), c = j(), a = S(), l = v(null), o = v(null), f = v(null), x = [
+      { label: "Overview", value: "overview" },
+      { label: "Preview", value: "preview" }
+    ], u = v("overview");
+    return O(async () => {
+      const p = c.query.id;
+      if (!p) return;
+      const h = await C.getMarketingMaterial(p);
+      l.value = h.imageUrl, o.value = h.headline, f.value = h.caption;
+    }), (p, h) => {
+      const k = y("FmPageHead"), P = y("FmTabs");
+      return n(), d(I, null, [
+        i(k, {
+          title: s(r)("connect.marketing.materialEdit.title"),
+          class: "xs:hidden",
+          "onClick:back": h[0] || (h[0] = (T) => s(m).push({ name: s(D)["$connect-MARKETING"] }))
+        }, null, 8, ["title"]),
+        e("div", Et, [
+          i(P, {
+            "model-value": s(u),
+            items: x,
+            "onUpdate:modelValue": h[1] || (h[1] = (T) => u.value = T)
+          }, null, 8, ["model-value"])
+        ]),
+        s(u) === "overview" ? (n(), w(ge, {
+          key: 0,
+          "image-url": s(l),
+          headline: s(o),
+          caption: s(f)
+        }, null, 8, ["image-url", "headline", "caption"])) : s(u) === "preview" ? (n(), w(Bt, {
+          key: 1,
+          "image-url": s(l),
+          headline: s(o),
+          caption: s(f)
+        }, null, 8, ["image-url", "headline", "caption"])) : b("", !0),
+        s(a).dialogShowing ? (n(), w(s(W), { key: 2 })) : b("", !0)
+      ], 64);
+    };
+  }
+});
+export {
+  Gt as default
+};