@feedmepos/mf-connect 0.1.111-prod → 0.1.113-beta.3

package/dist/GiftCardSetup-CVLDDpI2.js

@@ -0,0 +1,748 @@
+import { defineComponent as rt, computed as p, ref as d, onMounted as ct, resolveComponent as x, openBlock as u, createElementBlock as m, unref as e, createBlock as J, createCommentVNode as g, createElementVNode as n, createVNode as r, toDisplayString as s, withCtx as P, isRef as b, Fragment as R, renderList as K, normalizeClass as Y, withDirectives as it, withKeys as dt, vModelText as ut, createTextVNode as de } from "vue";
+import { u as mt } from "./loading-CUNk5u1d.js";
+import { u as ft } from "./app-wDQR6dpb.js";
+import { n as M, f as L } from "./plugins-iTZLbJGy.js";
+import "./index-BvY2hQac.js";
+import { g as ue } from "./index-B_gzo75q.js";
+import { c as pt } from "./index-VqAbYyHH.js";
+import { S as Fe } from "./index-OvnHt5x5.js";
+import { b as vt } from "./MessageInput.vue_vue_type_script_setup_true_lang-DhfsgDd4.js";
+import { J as gt } from "./JsonViewer-v8_C7l5N.js";
+import { z as Q, A as Te, B as yt, C as bt, E as _t, G as W, H as xt, I as Ct, J as ke, K as me, L as ht } from "./index-D34iYRdc.js";
+import { u as At } from "./vue-i18n-Cw6fF11e.js";
+import { useRouter as Dt, useRoute as Et } from "vue-router";
+import { R as Mt } from "./app-Devzv4gO.js";
+var Se = { authUrl: "https://portal-v2-dev.feedmeapi.com/", slackWebhookUrl: "https://hooks.slack.com/services/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", appUrl: "feedmedev.vip", crmUrl: "crm.feedmedev.cc", paymentPortalUrl: "https://portal.feedmedev.cc/payment/payout-account", licensePortalUrl: "https://license.feedmedev.cc/", marketingV1Portal: "https://marketing-v1.feedmedev.cc", voucherAppUrl: "https://voucher.feedmedev.cc/" };
+const Ft = { class: "relative px-24 pb-40" }, Tt = { class: "flex items-start gap-12 py-24" }, kt = { class: "flex flex-col gap-4" }, St = { class: "fm-typo-en-title-md-800 text-fm-color-typo-primary" }, wt = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, Nt = { class: "flex flex-col gap-16 max-w-[860px]" }, Ut = { class: "flex gap-12" }, Vt = { class: "flex flex-col gap-4" }, It = { class: "fm-typo-en-body-lg-600" }, Pt = { class: "flex gap-12" }, Rt = { class: "flex flex-col gap-4" }, Lt = { class: "fm-typo-en-body-lg-600" }, Gt = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, Ht = { class: "flex flex-wrap items-start gap-12" }, $t = ["src"], Ot = ["aria-label", "title", "onClick"], Xt = { class: "absolute bottom-4 left-4 px-8 py-2 rounded-sm bg-fm-color-neutral-white fm-typo-en-body-sm-600" }, Bt = { class: "flex gap-12" }, zt = { class: "flex flex-col gap-4" }, jt = { class: "fm-typo-en-body-lg-600" }, Jt = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, Kt = { class: "flex flex-col gap-8" }, Wt = ["onClick"], Zt = {
+  key: 0,
+  class: "w-[9px] h-[9px] rounded-full bg-fm-color-primary"
+}, qt = { class: "flex-1" }, Yt = { class: "block fm-typo-en-body-md-600" }, Qt = { class: "block fm-typo-en-body-md-400 text-fm-color-typo-secondary mt-2" }, eo = {
+  key: 0,
+  class: "grid sm:grid-cols-2 gap-16"
+}, to = {
+  key: 1,
+  class: "fm-typo-en-body-sm-400 text-fm-color-typo-error"
+}, oo = { class: "flex items-center gap-16 p-16 rounded-md bg-fm-color-neutral-gray-100" }, no = { class: "flex flex-col gap-2 flex-1 min-w-0" }, lo = { class: "fm-typo-en-body-sm-400 text-fm-color-typo-tertiary" }, ao = { class: "fm-typo-en-body-lg-600 truncate" }, so = { class: "flex gap-12" }, ro = { class: "flex flex-col gap-4" }, co = { class: "fm-typo-en-body-lg-600" }, io = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, uo = { class: "flex flex-col gap-8" }, mo = { class: "fm-typo-en-body-md-600" }, fo = { class: "flex flex-wrap gap-8" }, po = { class: "flex items-start gap-8" }, vo = { class: "flex items-center rounded-md border-1 border-fm-color-neutral-gray-300 overflow-hidden" }, go = {
+  for: "gift-card-custom-amount",
+  class: "sr-only"
+}, yo = ["placeholder", "disabled"], bo = { class: "fm-typo-en-body-sm-400 text-fm-color-typo-secondary" }, _o = { class: "text-fm-color-primary" }, xo = { class: "flex items-center gap-12 p-16 rounded-md border-1 border-fm-color-neutral-gray-300" }, Co = { class: "flex-1" }, ho = { class: "fm-typo-en-body-md-600" }, Ao = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, Do = {
+  key: 0,
+  class: "flex gap-16"
+}, Eo = {
+  key: 1,
+  class: "fm-typo-en-body-sm-400 text-fm-color-typo-error"
+}, Mo = { class: "flex gap-12" }, Fo = { class: "flex flex-col gap-4" }, To = { class: "fm-typo-en-body-lg-600" }, ko = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, So = {
+  key: 0,
+  class: "flex items-start gap-12 p-16 rounded-md bg-fm-color-system-info-100"
+}, wo = { class: "flex-1 fm-typo-en-body-md-400 text-fm-color-typo-primary" }, No = { class: "flex items-center gap-12" }, Uo = { class: "fm-typo-en-body-md-500" }, Vo = { class: "flex flex-col gap-8" }, Io = { class: "fm-typo-en-body-md-600" }, Po = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, Ro = { class: "flex flex-col gap-16 rounded-md border-1 border-fm-color-neutral-gray-300 p-16" }, Lo = {
+  key: 0,
+  class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary"
+}, Go = {
+  key: 1,
+  class: "fm-typo-en-body-sm-400 text-fm-color-typo-error"
+}, Ho = { class: "flex flex-wrap gap-8" }, $o = { class: "fm-typo-en-body-lg-600" }, Oo = {
+  key: 0,
+  class: "fm-typo-en-body-sm-400 text-fm-color-typo-error"
+}, Xo = { class: "flex gap-12" }, Bo = { class: "flex flex-col gap-4" }, zo = { class: "fm-typo-en-body-lg-600" }, jo = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, Jo = { class: "flex flex-wrap items-center gap-8" }, Ko = {
+  for: "gift-card-terms-document",
+  class: "sr-only"
+}, Wo = { class: "fm-typo-en-body-sm-400 text-fm-color-typo-secondary" }, Zo = {
+  key: 1,
+  class: "flex items-center gap-12 p-16 rounded-md border-1 border-fm-color-neutral-gray-300"
+}, qo = { class: "w-40 h-40 rounded-sm flex-none grid place-items-center bg-fm-color-neutral-gray-100" }, Yo = { class: "flex-1 min-w-0" }, Qo = ["href"], en = {
+  key: 0,
+  class: "fm-typo-en-body-sm-400 text-fm-color-typo-secondary"
+}, tn = { class: "flex items-center justify-end gap-8 pt-8" }, we = 5e6, on = 5e6, _n = /* @__PURE__ */ rt({
+  __name: "GiftCardSetup",
+  setup(nn) {
+    const { t: l } = At(), { global: Ne, minor: ee } = mt, Ue = Dt(), Ve = Et(), G = p(() => Ve.params.id || null), H = p(() => !!G.value), F = d(""), h = d([]);
+    let fe = /* @__PURE__ */ new Set();
+    const pe = /* @__PURE__ */ new Set(), Ie = /* @__PURE__ */ new Set(["image/png", "image/jpeg", "image/gif"]), A = d("DEFAULT"), $ = d(16), T = d(Q().charset), O = d("GC"), X = d(""), ve = d(0), ge = [10, 20, 30, 50, 100], f = d([]), k = d(""), D = d(!1), S = d(10), w = d(100), ye = d(!1), B = d(!0), be = `https://${Fe.getBusinessId()}.${Se.appUrl}/member/gift-cards`, N = d(
+      Te(be)
+    ), E = d("SMS"), v = d(["SMS"]), te = d({
+      SMS: !0,
+      WHATSAPP: !1,
+      EMAIL: !1
+    }), Z = p(
+      () => ["SMS", "WHATSAPP", "EMAIL"].map((t) => ({
+        value: t,
+        label: l(`connect.store.giftCard.channel${t}`),
+        available: te.value[t]
+      }))
+    ), oe = p({
+      get: () => N.value[E.value],
+      set: (t) => {
+        N.value = {
+          ...N.value,
+          [E.value]: t
+        };
+      }
+    }), Pe = {
+      giftCard: {
+        amount: "RM100",
+        senderName: "Janey Wong",
+        number: "GCUB74IJ432D9KU78T",
+        recipientName: "John Doe",
+        personalMessage: "Happy birthday!"
+      },
+      business: {
+        name: "Kopi Haus"
+      }
+    }, _e = p(
+      () => Z.value.filter((t) => !t.available).map((t) => t.label)
+    ), Re = `${Se.licensePortalUrl}settings?businessId=${Fe.businessId}`;
+    function Le(t) {
+      if (!(!te.value[t] && !v.value.includes(t)) && (v.value = v.value.includes(t) ? v.value.filter((o) => o !== t) : [...v.value, t], !v.value.includes(E.value))) {
+        const o = v.value[0];
+        o && (E.value = o);
+      }
+    }
+    async function Ge() {
+      try {
+        te.value = await pt.readBroadcastChannels();
+      } catch (t) {
+        console.error("Failed to load notification channel status", t);
+      }
+    }
+    const _ = d("NONE"), z = d(""), U = d(""), xe = d(null), He = /\.pdf$/i, j = d(null), $e = p(
+      () => {
+        var t;
+        return ((t = j.value) == null ? void 0 : t.name) ?? l("connect.store.giftCard.termsDocument");
+      }
+    );
+    function Oe(t) {
+      return t >= 1e6 ? `${(t / 1e6).toFixed(1)} MB` : `${Math.max(1, Math.round(t / 1e3))} KB`;
+    }
+    const ne = p(
+      () => A.value === "ADVANCED" ? {
+        ...Q(),
+        length: Number($.value),
+        charset: T.value,
+        prefix: O.value,
+        suffix: X.value
+      } : Q()
+    ), Xe = p(
+      () => yt(ne.value, ve.value)
+    ), Be = p(
+      () => bt(T.value) ?? 1
+    ), le = p(
+      () => A.value === "ADVANCED" ? _t(ne.value) : null
+    ), V = p(
+      () => f.value.length >= W
+    ), ze = p(() => [
+      ...ge.map((t) => ({ amount: t, custom: !1 })),
+      ...f.value.filter((t) => !ge.includes(t)).map((t) => ({ amount: t, custom: !0 }))
+    ]);
+    function je(t) {
+      t.custom || !f.value.includes(t.amount) && V.value || Ce(t.amount);
+    }
+    function Ce(t) {
+      if (f.value.includes(t)) {
+        f.value = f.value.filter((o) => o !== t);
+        return;
+      }
+      if (V.value) {
+        M.error(
+          l("connect.store.giftCard.maxAmounts", {
+            max: W
+          })
+        );
+        return;
+      }
+      f.value = [...f.value, t].sort((o, c) => o - c);
+    }
+    function he() {
+      const t = Number(k.value);
+      if (!Number.isInteger(t) || t <= 0) {
+        M.error(l("connect.store.giftCard.invalidAmount"));
+        return;
+      }
+      if (t > me) {
+        M.error(
+          l("connect.store.giftCard.amountTooLarge", { max: me })
+        );
+        return;
+      }
+      if (f.value.includes(t)) {
+        k.value = "";
+        return;
+      }
+      if (V.value) {
+        M.error(
+          l("connect.store.giftCard.maxAmounts", {
+            max: W
+          })
+        );
+        return;
+      }
+      f.value = [...f.value, t].sort((o, c) => o - c), k.value = "";
+    }
+    const ae = p(() => f.value.length === 0 && !D.value ? l("connect.store.giftCard.errorNoAmount") : D.value && Number(S.value) > Number(w.value) ? l("connect.store.giftCard.errorRange") : null), Je = p(
+      () => F.value.trim() ? null : l("connect.store.giftCard.errorNoName")
+    ), se = p(
+      () => v.value.length ? null : l("connect.store.giftCard.errorNoChannel")
+    ), re = p(() => {
+      var t;
+      for (const o of ["SMS", "WHATSAPP", "EMAIL"]) {
+        const c = N.value[o];
+        if (!c.content.trim())
+          return l("connect.store.giftCard.errorNoDeliveryMessage", { channel: o });
+        if (o === "EMAIL" && !((t = c.title) != null && t.trim()))
+          return l("connect.store.giftCard.errorNoEmailTitle");
+      }
+      return null;
+    }), ce = p(
+      () => Je.value ?? le.value ?? ae.value ?? se.value ?? re.value
+    );
+    async function Ke(t) {
+      Ze(t) && await ee(
+        async () => {
+          const o = await We(t);
+          h.value = [...h.value, o];
+        },
+        {
+          message: l("connect.store.giftCard.uploading"),
+          successMessage: l("connect.store.giftCard.uploaded")
+        }
+      );
+    }
+    function We(t) {
+      return L.update(
+        L.bundleImagePath(void 0, t),
+        t
+      );
+    }
+    function Ze(t) {
+      const o = Ie.has(t.type) && t.size <= we;
+      return o || M.error(l("connect.store.giftCard.invalidDesignFile")), o;
+    }
+    async function qe(t) {
+      h.value = h.value.filter((o) => o !== t), await Ye(t);
+    }
+    async function Ye(t) {
+      if (fe.has(t)) {
+        pe.add(t);
+        return;
+      }
+      try {
+        await L.delete(t);
+      } catch {
+      }
+    }
+    function Qe() {
+      var t;
+      (t = xe.value) == null || t.click();
+    }
+    async function et(t) {
+      var y;
+      const o = t.target, c = (y = o.files) == null ? void 0 : y[0];
+      if (o.value = "", !!c) {
+        if (!He.test(c.name) || c.size > on) {
+          M.error(l("connect.store.giftCard.invalidTermsFile"));
+          return;
+        }
+        await ee(
+          async () => {
+            U.value = await L.update(
+              L.bundleImagePath(void 0, c),
+              c
+            ), j.value = { name: c.name, size: c.size }, _.value = "DOCUMENT";
+          },
+          {
+            message: l("connect.store.giftCard.uploading"),
+            successMessage: l("connect.store.giftCard.uploaded")
+          }
+        );
+      }
+    }
+    function tt() {
+      U.value = "", j.value = null, _.value = "NONE";
+    }
+    function Ae() {
+      return {
+        name: F.value.trim(),
+        designs: h.value,
+        numberFormat: ne.value,
+        denominations: f.value.map(Number),
+        anyAmount: D.value ? {
+          enabled: !0,
+          min: Number(S.value),
+          max: Number(w.value)
+        } : null,
+        channels: v.value,
+        allowPersonalMessage: B.value,
+        deliveryMessages: N.value,
+        termsAndConditions: _.value === "TEXT" && z.value || null,
+        termsDocumentUrl: _.value === "DOCUMENT" && U.value || null
+      };
+    }
+    function ot(t) {
+      var y, C, I, q;
+      F.value = t.name, h.value = [...t.designs ?? []], fe = new Set(h.value), f.value = [...t.denominations ?? []], D.value = !!((y = t.anyAmount) != null && y.enabled), S.value = ((C = t.anyAmount) == null ? void 0 : C.min) ?? 10, w.value = ((I = t.anyAmount) == null ? void 0 : I.max) ?? 100, v.value = (q = t.channels) != null && q.length ? [...t.channels] : ["SMS"], B.value = t.allowPersonalMessage ?? !0, N.value = structuredClone(
+        t.deliveryMessages ?? Te(be)
+      ), E.value = v.value[0] ?? "SMS";
+      const o = t.numberFormat, c = !o || o.prefix === "GC" && Number(o.length) === 16;
+      A.value = c ? "DEFAULT" : "ADVANCED", $.value = Number((o == null ? void 0 : o.length) ?? 16), T.value = (o == null ? void 0 : o.charset) ?? Q().charset, O.value = (o == null ? void 0 : o.prefix) ?? "GC", X.value = (o == null ? void 0 : o.suffix) ?? "", t.termsDocumentUrl ? (_.value = "DOCUMENT", U.value = t.termsDocumentUrl) : t.termsAndConditions && (_.value = "TEXT", z.value = t.termsAndConditions);
+    }
+    function ie() {
+      Ue.push({ name: Mt["$connect-STORE"] });
+    }
+    async function nt() {
+      if (ce.value) {
+        M.error(ce.value);
+        return;
+      }
+      await ee(
+        async () => {
+          const t = Ae();
+          G.value ? await ue.updateProgram(G.value, t) : await ue.createProgram(t), await Promise.allSettled(
+            [...pe].map((o) => L.delete(o))
+          ), ie();
+        },
+        {
+          message: H.value ? l("connect.store.giftCard.saving") : l("connect.store.giftCard.creating"),
+          successMessage: H.value ? l("connect.store.giftCard.saved") : l("connect.store.giftCard.created")
+        }
+      );
+    }
+    return ct(async () => {
+      await Ne(async () => {
+        await Ge(), G.value && ot(await ue.readProgram(G.value));
+      });
+    }), (t, o) => {
+      const c = x("FmButton"), y = x("FmTextField"), C = x("FmCard"), I = x("FmIcon"), q = x("FmDropField"), lt = x("FmStepperField"), De = x("FmChip"), Ee = x("FmSwitch"), at = x("FmCheckbox"), st = x("FmTextarea");
+      return u(), m("div", Ft, [
+        e(H) ? (u(), J(gt, {
+          key: 0,
+          json: Ae()
+        }, null, 8, ["json"])) : g("", !0),
+        n("div", Tt, [
+          r(c, {
+            icon: "arrow_back",
+            variant: "tertiary",
+            onClick: ie
+          }),
+          n("div", kt, [
+            n("h1", St, s(e(H) ? e(l)("connect.store.giftCard.editTitle") : e(l)("connect.store.giftCard.createTitle")), 1),
+            n("p", wt, s(e(l)("connect.store.giftCard.pageSubtitle")), 1)
+          ])
+        ]),
+        n("div", Nt, [
+          r(C, {
+            variant: "outlined",
+            class: "p-24 flex flex-col gap-16"
+          }, {
+            default: P(() => [
+              n("div", Ut, [
+                o[15] || (o[15] = n("span", { class: "w-[18px] h-[18px] rounded-sm flex-none grid place-items-center bg-fm-color-primary-oats text-fm-color-primary fm-typo-en-body-sm-600" }, " 1 ", -1)),
+                n("div", Vt, [
+                  n("div", It, s(e(l)("connect.store.giftCard.name")), 1)
+                ])
+              ]),
+              r(y, {
+                modelValue: e(F),
+                "onUpdate:modelValue": o[0] || (o[0] = (a) => b(F) ? F.value = a : null),
+                placeholder: e(l)("connect.store.giftCard.namePlaceholder")
+              }, null, 8, ["modelValue", "placeholder"])
+            ]),
+            _: 1
+          }),
+          r(C, {
+            variant: "outlined",
+            class: "p-24 flex flex-col gap-16"
+          }, {
+            default: P(() => [
+              n("div", Pt, [
+                o[16] || (o[16] = n("span", { class: "w-[18px] h-[18px] rounded-sm flex-none grid place-items-center bg-fm-color-primary-oats text-fm-color-primary fm-typo-en-body-sm-600" }, " 2 ", -1)),
+                n("div", Rt, [
+                  n("div", Lt, s(e(l)("connect.store.giftCard.design")), 1),
+                  n("div", Gt, s(e(l)("connect.store.giftCard.designHint")), 1)
+                ])
+              ]),
+              n("div", Ht, [
+                (u(!0), m(R, null, K(e(h), (a, i) => (u(), m("div", {
+                  key: a,
+                  class: "relative w-[179px] h-[115px] rounded-md overflow-hidden border-1 border-fm-color-neutral-gray-300"
+                }, [
+                  n("img", {
+                    src: a,
+                    alt: "",
+                    class: "w-full h-full object-cover"
+                  }, null, 8, $t),
+                  n("button", {
+                    type: "button",
+                    class: "absolute top-4 right-4 w-24 h-24 rounded-sm grid place-items-center bg-fm-color-neutral-black text-fm-color-typo-white opacity-70 hover:opacity-100",
+                    "aria-label": e(l)("connect.common.remove"),
+                    title: e(l)("connect.common.remove"),
+                    onClick: (Me) => qe(a)
+                  }, [
+                    r(I, {
+                      name: "close",
+                      size: "sm"
+                    })
+                  ], 8, Ot),
+                  n("span", Xt, s(e(l)("connect.store.giftCard.designOption", { index: i + 1 })), 1)
+                ]))), 128)),
+                r(q, {
+                  accept: ".png, .jpg, .jpeg, .gif",
+                  "max-file-size": we,
+                  "content-class": "w-[179px] h-[115px]",
+                  onFileUpload: Ke
+                })
+              ])
+            ]),
+            _: 1
+          }),
+          r(C, {
+            variant: "outlined",
+            class: "p-24 flex flex-col gap-16"
+          }, {
+            default: P(() => [
+              n("div", Bt, [
+                o[17] || (o[17] = n("span", { class: "w-[18px] h-[18px] rounded-sm flex-none grid place-items-center bg-fm-color-primary-oats text-fm-color-primary fm-typo-en-body-sm-600" }, " 3 ", -1)),
+                n("div", zt, [
+                  n("div", jt, s(e(l)("connect.store.giftCard.numberSettings")), 1),
+                  n("div", Jt, s(e(l)("connect.store.giftCard.numberSettingsHint")), 1)
+                ])
+              ]),
+              n("div", Kt, [
+                (u(), m(R, null, K(["DEFAULT", "ADVANCED"], (a) => n("button", {
+                  key: a,
+                  type: "button",
+                  class: Y([
+                    "flex gap-12 items-start text-left p-16 rounded-md border-1 transition-colors",
+                    e(A) === a ? "border-fm-color-primary" : "border-fm-color-neutral-gray-300"
+                  ]),
+                  onClick: (i) => A.value = a
+                }, [
+                  n("span", {
+                    class: Y([
+                      "w-[18px] h-[18px] rounded-full border-1 flex-none mt-2 grid place-items-center",
+                      e(A) === a ? "border-fm-color-primary" : "border-fm-color-neutral-gray-300"
+                    ])
+                  }, [
+                    e(A) === a ? (u(), m("span", Zt)) : g("", !0)
+                  ], 2),
+                  n("span", qt, [
+                    n("span", Yt, s(a === "DEFAULT" ? e(l)("connect.store.giftCard.numberDefault") : e(l)("connect.store.giftCard.numberAdvanced")), 1),
+                    n("span", Qt, s(a === "DEFAULT" ? e(l)("connect.store.giftCard.numberDefaultHint") : e(l)("connect.store.giftCard.numberAdvancedHint")), 1)
+                  ])
+                ], 10, Wt)), 64))
+              ]),
+              e(A) === "ADVANCED" ? (u(), m("div", eo, [
+                r(lt, {
+                  modelValue: e($),
+                  "onUpdate:modelValue": o[1] || (o[1] = (a) => b($) ? $.value = a : null),
+                  label: e(l)("connect.store.giftCard.length"),
+                  "helper-text": e(l)("connect.store.giftCard.lengthHint"),
+                  min: e(Be),
+                  max: e(xt),
+                  step: 1
+                }, null, 8, ["modelValue", "label", "helper-text", "min", "max"]),
+                r(y, {
+                  modelValue: e(T),
+                  "onUpdate:modelValue": o[2] || (o[2] = (a) => b(T) ? T.value = a : null),
+                  label: e(l)("connect.store.giftCard.charset"),
+                  "max-length": e(Ct)
+                }, null, 8, ["modelValue", "label", "max-length"]),
+                r(y, {
+                  modelValue: e(O),
+                  "onUpdate:modelValue": o[3] || (o[3] = (a) => b(O) ? O.value = a : null),
+                  label: e(l)("connect.store.giftCard.prefix"),
+                  "max-length": e(ke)
+                }, null, 8, ["modelValue", "label", "max-length"]),
+                r(y, {
+                  modelValue: e(X),
+                  "onUpdate:modelValue": o[4] || (o[4] = (a) => b(X) ? X.value = a : null),
+                  label: e(l)("connect.store.giftCard.suffix"),
+                  "max-length": e(ke)
+                }, null, 8, ["modelValue", "label", "max-length"])
+              ])) : g("", !0),
+              e(le) ? (u(), m("div", to, s(e(le)), 1)) : g("", !0),
+              n("div", oo, [
+                n("div", no, [
+                  n("span", lo, s(e(l)("connect.store.giftCard.exampleNumber")), 1),
+                  n("span", ao, s(e(Xe)), 1)
+                ]),
+                r(c, {
+                  label: e(l)("connect.store.giftCard.regenerate"),
+                  icon: "refresh",
+                  variant: "secondary",
+                  onClick: o[5] || (o[5] = (a) => ve.value++)
+                }, null, 8, ["label"])
+              ])
+            ]),
+            _: 1
+          }),
+          r(C, {
+            variant: "outlined",
+            class: "p-24 flex flex-col gap-16"
+          }, {
+            default: P(() => [
+              n("div", so, [
+                o[18] || (o[18] = n("span", { class: "w-[18px] h-[18px] rounded-sm flex-none grid place-items-center bg-fm-color-primary-oats text-fm-color-primary fm-typo-en-body-sm-600" }, " 4 ", -1)),
+                n("div", ro, [
+                  n("div", co, s(e(l)("connect.store.giftCard.amount")), 1),
+                  n("div", io, s(e(l)("connect.store.giftCard.amountHint", {
+                    max: e(W)
+                  })), 1)
+                ])
+              ]),
+              n("div", uo, [
+                n("div", mo, s(e(l)("connect.store.giftCard.popularAmounts")), 1),
+                n("div", fo, [
+                  (u(!0), m(R, null, K(e(ze), (a) => (u(), J(De, {
+                    key: a.amount,
+                    label: `RM ${a.amount}`,
+                    selectable: !a.custom,
+                    removable: a.custom,
+                    selected: e(f).includes(a.amount),
+                    disabled: !a.custom && e(V) && !e(f).includes(a.amount),
+                    onClick: (i) => je(a),
+                    onChipClosed: (i) => Ce(a.amount)
+                  }, null, 8, ["label", "selectable", "removable", "selected", "disabled", "onClick", "onChipClosed"]))), 128))
+                ])
+              ]),
+              n("div", po, [
+                n("div", vo, [
+                  o[19] || (o[19] = n("span", { class: "px-12 py-8 bg-fm-color-neutral-gray-100 fm-typo-en-body-md-500 text-fm-color-typo-secondary" }, " RM ", -1)),
+                  n("label", go, s(e(l)("connect.store.giftCard.custom")), 1),
+                  it(n("input", {
+                    id: "gift-card-custom-amount",
+                    "onUpdate:modelValue": o[6] || (o[6] = (a) => b(k) ? k.value = a : null),
+                    type: "number",
+                    class: "px-12 py-8 outline-none fm-typo-en-body-md-400 w-[140px] disabled:bg-fm-color-neutral-gray-100",
+                    placeholder: e(l)("connect.store.giftCard.custom"),
+                    disabled: e(V),
+                    onKeyup: dt(he, ["enter"])
+                  }, null, 40, yo), [
+                    [ut, e(k)]
+                  ])
+                ]),
+                r(c, {
+                  label: e(l)("connect.store.giftCard.addAmount"),
+                  variant: "secondary",
+                  disabled: e(V),
+                  onClick: he
+                }, null, 8, ["label", "disabled"])
+              ]),
+              n("div", bo, [
+                de(s(e(l)("connect.store.giftCard.selected")) + " ", 1),
+                n("span", _o, s(e(f).length), 1),
+                de(" / " + s(e(W)), 1)
+              ]),
+              n("div", xo, [
+                r(Ee, {
+                  modelValue: e(D),
+                  "onUpdate:modelValue": o[7] || (o[7] = (a) => b(D) ? D.value = a : null)
+                }, null, 8, ["modelValue"]),
+                n("div", Co, [
+                  n("div", ho, s(e(l)("connect.store.giftCard.anyAmount")), 1),
+                  n("div", Ao, s(e(l)("connect.store.giftCard.anyAmountHint")), 1)
+                ])
+              ]),
+              e(D) ? (u(), m("div", Do, [
+                r(y, {
+                  modelValue: e(S),
+                  "onUpdate:modelValue": o[8] || (o[8] = (a) => b(S) ? S.value = a : null),
+                  type: "number",
+                  label: e(l)("connect.store.giftCard.min"),
+                  class: "flex-1"
+                }, null, 8, ["modelValue", "label"]),
+                r(y, {
+                  modelValue: e(w),
+                  "onUpdate:modelValue": o[9] || (o[9] = (a) => b(w) ? w.value = a : null),
+                  type: "number",
+                  label: e(l)("connect.store.giftCard.max"),
+                  "helper-text": `Up to RM${e(me)}`,
+                  class: "flex-1"
+                }, null, 8, ["modelValue", "label", "helper-text"])
+              ])) : g("", !0),
+              e(ae) ? (u(), m("div", Eo, s(e(ae)), 1)) : g("", !0)
+            ]),
+            _: 1
+          }),
+          r(C, {
+            variant: "outlined",
+            class: "p-24 flex flex-col gap-16"
+          }, {
+            default: P(() => {
+              var a;
+              return [
+                n("div", Mo, [
+                  o[20] || (o[20] = n("span", { class: "w-[18px] h-[18px] rounded-sm flex-none grid place-items-center bg-fm-color-primary-oats text-fm-color-primary fm-typo-en-body-sm-600" }, " 5 ", -1)),
+                  n("div", Fo, [
+                    n("div", To, s(e(l)("connect.store.giftCard.sending")), 1),
+                    n("div", ko, s(e(l)("connect.store.giftCard.sendingHint")), 1)
+                  ])
+                ]),
+                e(ye) ? g("", !0) : (u(), m("div", So, [
+                  r(I, {
+                    name: "info",
+                    class: "text-fm-color-system-info-400 flex-none"
+                  }),
+                  n("div", wo, s(e(l)("connect.store.giftCard.broadcastNotice")), 1),
+                  r(c, {
+                    icon: "close",
+                    variant: "tertiary",
+                    onClick: o[10] || (o[10] = (i) => ye.value = !0)
+                  })
+                ])),
+                n("div", No, [
+                  r(Ee, {
+                    modelValue: e(B),
+                    "onUpdate:modelValue": o[11] || (o[11] = (i) => b(B) ? B.value = i : null)
+                  }, null, 8, ["modelValue"]),
+                  n("span", Uo, s(e(l)("connect.store.giftCard.personalMessage")), 1)
+                ]),
+                n("div", Vo, [
+                  n("div", Io, s(e(l)("connect.store.giftCard.channels")), 1),
+                  n("div", Po, s(e(l)("connect.store.giftCard.channelsHint")), 1),
+                  n("div", Ro, [
+                    (u(!0), m(R, null, K(e(Z), (i) => (u(), J(at, {
+                      key: i.value,
+                      value: i.value,
+                      label: i.label,
+                      "model-value": e(v).includes(i.value),
+                      disabled: !i.available && !e(v).includes(i.value),
+                      "onUpdate:modelValue": (Me) => Le(i.value)
+                    }, null, 8, ["value", "label", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
+                  ]),
+                  e(_e).length ? (u(), m("div", Lo, [
+                    de(s(e(l)("connect.store.giftCard.channelUnavailable", {
+                      channels: e(_e).join(", ")
+                    })) + " ", 1),
+                    n("a", {
+                      href: Re,
+                      target: "_blank",
+                      rel: "noopener",
+                      class: "underline fm-typo-en-body-md-600 text-fm-color-primary"
+                    }, s(e(l)("connect.store.giftCard.channelConfigure")), 1)
+                  ])) : g("", !0),
+                  e(se) ? (u(), m("div", Go, s(e(se)), 1)) : g("", !0)
+                ]),
+                e(v).length ? (u(), m(R, { key: 1 }, [
+                  n("div", Ho, [
+                    (u(!0), m(R, null, K(e(Z).filter(
+                      (i) => e(v).includes(i.value)
+                    ), (i) => (u(), J(De, {
+                      key: i.value,
+                      label: i.label,
+                      selectable: "",
+                      selected: e(E) === i.value,
+                      onClick: (Me) => E.value = i.value
+                    }, null, 8, ["label", "selected", "onClick"]))), 128))
+                  ]),
+                  n("div", $o, s(e(l)("connect.store.giftCard.deliveryMessage", {
+                    channel: (a = e(Z).find(
+                      (i) => i.value === e(E)
+                    )) == null ? void 0 : a.label
+                  })), 1),
+                  r(vt, {
+                    modelValue: e(oe),
+                    "onUpdate:modelValue": o[12] || (o[12] = (i) => b(oe) ? oe.value = i : null),
+                    variables: [...e(ht)],
+                    "preview-data": Pe
+                  }, null, 8, ["modelValue", "variables"]),
+                  e(re) ? (u(), m("div", Oo, s(e(re)), 1)) : g("", !0)
+                ], 64)) : g("", !0)
+              ];
+            }),
+            _: 1
+          }),
+          r(C, {
+            variant: "outlined",
+            class: "p-24 flex flex-col gap-16"
+          }, {
+            default: P(() => [
+              n("div", Xo, [
+                o[21] || (o[21] = n("span", { class: "w-[18px] h-[18px] rounded-sm flex-none grid place-items-center bg-fm-color-primary-oats text-fm-color-primary fm-typo-en-body-sm-600" }, " 6 ", -1)),
+                n("div", Bo, [
+                  n("div", zo, s(e(l)("connect.store.giftCard.terms")), 1),
+                  n("div", jo, s(e(l)("connect.store.giftCard.termsHint")), 1)
+                ])
+              ]),
+              n("div", Jo, [
+                n("label", Ko, s(e(l)("connect.store.giftCard.termsDocument")), 1),
+                n("input", {
+                  id: "gift-card-terms-document",
+                  ref_key: "termsInput",
+                  ref: xe,
+                  type: "file",
+                  accept: ".pdf",
+                  class: "hidden",
+                  onChange: et
+                }, null, 544),
+                r(c, {
+                  label: e(l)("connect.store.giftCard.enterText"),
+                  icon: "edit",
+                  variant: "secondary",
+                  class: Y(
+                    e(_) === "TEXT" ? "border-fm-color-primary text-fm-color-primary" : ""
+                  ),
+                  onClick: o[13] || (o[13] = (a) => _.value = "TEXT")
+                }, null, 8, ["label", "class"]),
+                r(c, {
+                  label: e(l)("connect.store.giftCard.uploadDocument"),
+                  icon: "upload",
+                  variant: "secondary",
+                  class: Y(
+                    e(_) === "DOCUMENT" ? "border-fm-color-primary text-fm-color-primary" : ""
+                  ),
+                  onClick: Qe
+                }, null, 8, ["label", "class"])
+              ]),
+              n("div", Wo, s(e(l)("connect.store.giftCard.uploadDocumentHint")), 1),
+              e(_) === "TEXT" ? (u(), J(st, {
+                key: 0,
+                modelValue: e(z),
+                "onUpdate:modelValue": o[14] || (o[14] = (a) => b(z) ? z.value = a : null),
+                rows: 5,
+                placeholder: e(l)("connect.store.giftCard.termsPlaceholder")
+              }, null, 8, ["modelValue", "placeholder"])) : e(_) === "DOCUMENT" && e(U) ? (u(), m("div", Zo, [
+                n("span", qo, [
+                  r(I, {
+                    name: "description",
+                    class: "text-fm-color-typo-secondary"
+                  })
+                ]),
+                n("div", Yo, [
+                  n("a", {
+                    href: e(U),
+                    target: "_blank",
+                    rel: "noopener",
+                    class: "block fm-typo-en-body-md-600 truncate"
+                  }, s(e($e)), 9, Qo),
+                  e(j) ? (u(), m("div", en, s(Oe(e(j).size)) + " · " + s(e(l)("connect.store.giftCard.termsUploadedJustNow")), 1)) : g("", !0)
+                ]),
+                r(c, {
+                  icon: "delete",
+                  variant: "tertiary",
+                  "aria-label": e(l)("connect.common.remove"),
+                  onClick: tt
+                }, null, 8, ["aria-label"])
+              ])) : g("", !0)
+            ]),
+            _: 1
+          }),
+          n("div", tn, [
+            r(c, {
+              label: e(l)("connect.common.cancel"),
+              variant: "tertiary",
+              onClick: ie
+            }, null, 8, ["label"]),
+            r(c, {
+              label: e(H) ? e(l)("connect.common.save") : e(l)("connect.store.giftCard.addGiftCard"),
+              loading: e(ft)().isLoading,
+              disabled: !!e(ce),
+              onClick: nt
+            }, null, 8, ["label", "loading", "disabled"])
+          ])
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _n as default
+};