@feedmepos/mf-connect 0.1.98-beta.15 → 0.1.98-beta.16

package/dist/SettingAdvertisements-BZFQu_HI.js

@@ -0,0 +1,264 @@
+import { defineComponent as J, ref as y, computed as z, onMounted as K, resolveComponent as A, openBlock as u, createElementBlock as b, createElementVNode as s, createVNode as d, createTextVNode as W, toDisplayString as v, unref as e, withCtx as k, createBlock as B, Fragment as Y, renderList as Z, createCommentVNode as N, isRef as ee } from "vue";
+import { u as te } from "./loading-D-RglDMV.js";
+import { u as ne } from "./app-wDQR6dpb.js";
+import { u as se } from "./business-o_sAO_33.js";
+import { u as oe } from "./membership-DTfMyKwP.js";
+import "./index-pjXQwa0j.js";
+import { l as ae } from "./index-COXmoOd1.js";
+import "./index-CtJ0MQQ1.js";
+import { _ as le } from "./ImageInput.vue_vue_type_script_setup_true_lang-n1r2bgOE.js";
+import { f as D, p as ie } from "./plugins-CbpvMMOJ.js";
+import { _ as re } from "./TargetLocationInput.vue_vue_type_script_setup_true_lang-DKGCmk5y.js";
+import { u as ce } from "./vue-i18n-Dn9zxRuv.js";
+import { useRouter as de } from "vue-router";
+import { m as me } from "./index-CT6uJJ9y.js";
+import { R as ue } from "./app-CyNzTZOx.js";
+import { a as ve } from "./object-BYyQ0PZp.js";
+const pe = { class: "min-h-screen bg-fm-color-neutral-gray-50" }, fe = { class: "bg-white border-b border-fm-color-neutral-gray-100 sticky top-0 z-10" }, ge = { class: "px-24 py-16 flex items-center justify-between" }, _e = { class: "flex items-center gap-16" }, he = { class: "fm-typo-en-title-md-800 flex items-center gap-8" }, ye = { class: "fm-typo-en-body-sm-400 text-fm-color-typo-secondary" }, be = {
+  key: 0,
+  class: "px-24 py-24"
+}, we = { class: "flex items-center gap-24 mb-24" }, xe = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, Se = { class: "fm-typo-en-body-lg-600" }, ke = { class: "fm-typo-en-title-sm-800 mb-8" }, Ae = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary mb-16" }, Ce = {
+  key: 1,
+  class: "grid grid-cols-5 gap-16 lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2"
+}, Fe = { class: "absolute top-8 right-8 z-10" }, je = { class: "aspect-[3/4] bg-fm-color-neutral-gray-100" }, Le = ["src"], Me = ["src", "alt"], Ve = {
+  key: 2,
+  class: "w-full h-full flex items-center justify-center text-fm-color-typo-disabled"
+}, $e = { class: "w-48 h-48 rounded-full bg-fm-color-neutral-gray-100 flex items-center justify-center mb-8" }, Be = { class: "fm-typo-en-body-md-600 mb-4" }, Ie = { class: "fm-typo-en-body-xs-400 text-fm-color-typo-secondary" }, Pe = { class: "space-y-[40px]" }, Ee = { class: "flex" }, Te = { class: "flex flex-wrap" }, ze = { class: "flex items-center gap-8" }, I = 20, nt = /* @__PURE__ */ J({
+  __name: "SettingAdvertisements",
+  setup(Ne) {
+    const U = de(), C = ne(), M = se(), F = oe(), { global: Q, minor: R } = te, { t: o } = ce(), c = y(), f = y([]), _ = y([]), w = y(!1), g = y(null), j = y(null), L = y(null), V = z(() => {
+      var n, t;
+      return ((t = (n = c.value) == null ? void 0 : n.advertisements) == null ? void 0 : t.length) ?? 0;
+    }), P = z(() => V.value < I);
+    function x(n) {
+      var a, p;
+      const t = (p = (a = c.value) == null ? void 0 : a.advertisements) == null ? void 0 : p[n];
+      if (t)
+        return typeof t == "string" ? t : t.url;
+    }
+    function O(n) {
+      return n ? [".mp4", ".webm", ".ogg", ".mov"].some((a) => n.toLowerCase().includes(a)) : !1;
+    }
+    async function $() {
+      await R(
+        async () => {
+          const n = ve(c.value), t = ae.parse(n), a = Date.now(), p = (m) => `${a}-${m}-${Math.random().toString(36).substring(2, 15)}`, S = await Promise.all(
+            f.value.map(async (m, h) => {
+              var r;
+              const i = (r = t.advertisements) == null ? void 0 : r[h];
+              let l;
+              return m ? l = await D.update(
+                D.advertisementPath(h, m),
+                m
+              ) : typeof i == "string" ? l = i : i && typeof i == "object" && (l = i.url), l ? {
+                _id: typeof i == "object" && (i == null ? void 0 : i._id) || p(h),
+                url: l,
+                targetLocation: _.value[h] || null,
+                order: h
+              } : null;
+            })
+          );
+          t.advertisements = S.filter((m) => m), await me.update(t), await F.readMembership(), c.value = F.membership;
+        },
+        {
+          message: o("connect.advertisements.saving"),
+          successMessage: o("connect.advertisements.savedSuccessfully")
+        }
+      );
+    }
+    function E(n) {
+      g.value = n, j.value = f.value[n], L.value = _.value[n], w.value = !0;
+    }
+    function q() {
+      if (!P.value) return;
+      const n = f.value.length;
+      f.value.push(null), _.value.push(null), E(n);
+    }
+    async function G() {
+      g.value !== null && (f.value[g.value] = j.value, _.value[g.value] = L.value, await $(), w.value = !1);
+    }
+    async function H(n, t) {
+      var a, p;
+      n.stopPropagation(), await ie.remove(
+        o("connect.setting.advertisement.deleteConfirm"),
+        o("connect.setting.advertisement.delete"),
+        o("connect.setting.advertisement.delete")
+      ) && ((p = (a = c.value) == null ? void 0 : a.advertisements) == null || p.splice(t, 1), f.value.splice(t, 1), _.value.splice(t, 1), await $());
+    }
+    function X() {
+      U.push({ name: ue["$connect-SETTING"] });
+    }
+    return K(async () => {
+      await Q(async () => {
+        var n, t;
+        await M.readPremium(), await M.readLocations(), await F.readMembership(), c.value = F.membership, (t = (n = c.value) == null ? void 0 : n.advertisements) != null && t.length ? (f.value = c.value.advertisements.map(() => null), _.value = c.value.advertisements.map(
+          (a) => typeof a == "string" ? null : a.targetLocation || null
+        )) : (f.value = [], _.value = []);
+      });
+    }), (n, t) => {
+      var i;
+      const a = A("FmButton"), p = A("FmPill"), S = A("FmCard"), m = A("FmIcon"), h = A("FmSideSheet");
+      return u(), b("div", pe, [
+        s("div", fe, [
+          s("div", ge, [
+            s("div", _e, [
+              d(a, {
+                icon: "arrow_back",
+                variant: "tertiary",
+                onClick: X
+              }),
+              s("div", null, [
+                s("div", he, [
+                  W(v(e(o)("connect.setting.advertisement.title")) + " ", 1),
+                  d(p, { variant: "premium" })
+                ]),
+                s("div", ye, v(e(o)("connect.setting.advertisement.subtitle")), 1)
+              ])
+            ]),
+            d(a, {
+              label: e(o)("connect.setting.advertisement.saveChanges"),
+              onClick: $,
+              disabled: !!e(C).loadingQueue.length,
+              loading: !!e(C).loadingQueue.length
+            }, null, 8, ["label", "disabled", "loading"])
+          ])
+        ]),
+        e(c) ? (u(), b("div", be, [
+          s("div", we, [
+            d(S, {
+              variant: "outlined",
+              class: "px-16 py-12 flex items-center gap-8"
+            }, {
+              default: k(() => [
+                s("span", xe, v(e(o)("connect.setting.advertisement.activeAds")), 1),
+                s("span", Se, v(e(V)) + " / " + v(I), 1)
+              ]),
+              _: 1
+            })
+          ]),
+          e(M).isPremium ? (u(), b("div", Ce, [
+            (u(!0), b(Y, null, Z(((i = e(c).advertisements) == null ? void 0 : i.length) || 0, (l, r) => (u(), B(S, {
+              key: r,
+              variant: "outlined",
+              class: "cursor-pointer hover:shadow-lg transition-shadow overflow-hidden relative",
+              onClick: (T) => E(r)
+            }, {
+              default: k(() => [
+                s("div", Fe, [
+                  d(a, {
+                    icon: "delete",
+                    variant: "tertiary",
+                    size: "sm",
+                    class: "bg-white/90 hover:bg-white shadow-sm",
+                    onClick: (T) => H(T, r)
+                  }, null, 8, ["onClick"])
+                ]),
+                s("div", je, [
+                  x(r) && O(x(r)) ? (u(), b("video", {
+                    key: 0,
+                    src: x(r),
+                    class: "w-full h-full object-cover",
+                    muted: "",
+                    loop: "",
+                    autoplay: "",
+                    playsinline: ""
+                  }, null, 8, Le)) : x(r) ? (u(), b("img", {
+                    key: 1,
+                    src: x(r),
+                    class: "w-full h-full object-cover",
+                    alt: `Ad ${r + 1}`
+                  }, null, 8, Me)) : (u(), b("div", Ve, [
+                    d(m, {
+                      name: "image",
+                      size: "48"
+                    })
+                  ]))
+                ])
+              ]),
+              _: 2
+            }, 1032, ["onClick"]))), 128)),
+            e(P) ? (u(), B(S, {
+              key: 0,
+              variant: "outlined",
+              class: "cursor-pointer hover:bg-fm-color-neutral-gray-50 transition-colors border-dashed aspect-[3/4] flex flex-col items-center justify-center",
+              onClick: q
+            }, {
+              default: k(() => [
+                s("div", $e, [
+                  d(m, {
+                    name: "add",
+                    size: "24",
+                    class: "text-fm-color-typo-secondary"
+                  })
+                ]),
+                s("div", Be, v(e(o)("connect.setting.advertisement.addAd")), 1),
+                s("div", Ie, v(I - e(V)) + " " + v(e(o)("connect.setting.advertisement.left")), 1)
+              ]),
+              _: 1
+            })) : N("", !0)
+          ])) : (u(), B(S, {
+            key: 0,
+            variant: "outlined",
+            class: "p-24 text-center mb-24 bg-fm-color-warning-50"
+          }, {
+            default: k(() => [
+              s("div", ke, v(e(o)("connect.setting.advertisement.premiumFeatureTitle")), 1),
+              s("div", Ae, v(e(o)("connect.setting.advertisement.premiumFeatureDescription")), 1)
+            ]),
+            _: 1
+          }))
+        ])) : N("", !0),
+        d(h, {
+          modelValue: e(w),
+          "onUpdate:modelValue": [
+            t[2] || (t[2] = (l) => ee(w) ? w.value = l : null),
+            t[3] || (t[3] = (l) => w.value = l)
+          ],
+          "max-width": 560,
+          header: e(g) !== null ? `${e(o)("connect.setting.advertisement.manageAd")} #${e(g) + 1}` : e(o)("connect.setting.advertisement.addAdvertisement")
+        }, {
+          "side-sheet-footer": k(() => [
+            s("div", ze, [
+              d(a, {
+                label: e(o)("connect.setting.advertisement.save"),
+                onClick: G,
+                loading: !!e(C).loadingQueue.length,
+                disabled: !!e(C).loadingQueue.length
+              }, null, 8, ["label", "loading", "disabled"])
+            ])
+          ]),
+          default: k(() => [
+            s("div", Pe, [
+              s("div", Ee, [
+                s("div", Te, [
+                  d(le, {
+                    label: e(o)("connect.setting.advertisement.advertisementImage"),
+                    "image-fit": "cover",
+                    "aspect-ratio": "4/5",
+                    thumbnail: e(g) !== null ? x(e(g)) : void 0,
+                    accept: ".png, .jpg, .jpeg, .mp4, .gif",
+                    "recommended-size": "1080px x 1350px (4:5)",
+                    file: e(j) ?? void 0,
+                    "onUpdate:file": t[0] || (t[0] = (l) => j.value = l)
+                  }, null, 8, ["label", "thumbnail", "file"])
+                ])
+              ]),
+              s("div", null, [
+                d(re, {
+                  label: e(o)("connect.setting.advertisement.targetLocations"),
+                  "helper-text": e(o)("connect.setting.advertisement.targetLocationsHelper"),
+                  "model-value": e(L) ?? null,
+                  "onUpdate:modelValue": t[1] || (t[1] = (l) => L.value = l)
+                }, null, 8, ["label", "helper-text", "model-value"])
+              ])
+            ])
+          ]),
+          _: 1
+        }, 8, ["modelValue", "header"])
+      ]);
+    };
+  }
+});
+export {
+  nt as default
+};

package/dist/Settings-CRqlKNsc.js

@@ -0,0 +1,228 @@
+import { defineComponent as U, useSlots as z, openBlock as t, createElementBlock as a, createElementVNode as l, normalizeClass as A, unref as o, toDisplayString as g, createCommentVNode as _, Fragment as k, createBlock as w, createVNode as x, renderSlot as M, ref as S, computed as B, onMounted as W, withCtx as C, renderList as E, createStaticVNode as D } from "vue";
+import { u as q } from "./loading-D-RglDMV.js";
+import { u as H } from "./business-o_sAO_33.js";
+import { components as y, useSnackbar as J } from "@feedmepos/ui-library";
+import { u as R } from "./vue-i18n-Dn9zxRuv.js";
+import { g as K, f as Q } from "./google-BQK68wbe.js";
+import { R as X } from "./app-CyNzTZOx.js";
+import { useRouter as Y } from "vue-router";
+import { r as b } from "./index-Ci2gFCfD.js";
+const Z = { class: "rounded-lg border border-fm-color-neutral-gray-200 bg-white overflow-hidden" }, ee = ["src"], oe = { class: "flex flex-col flex-1 min-w-0" }, ne = { class: "fm-typo-en-body-md-600 capitalize" }, te = {
+  key: 0,
+  class: "fm-typo-en-body-sm-400 text-fm-color-neutral-gray-400 truncate"
+}, N = /* @__PURE__ */ U({
+  __name: "ReviewSource",
+  props: {
+    icon: {},
+    name: {},
+    connected: { type: Boolean },
+    subtitle: {},
+    syncing: { type: Boolean },
+    tokenExpired: { type: Boolean }
+  },
+  emits: ["connect", "sync"],
+  setup(i, { emit: p }) {
+    const u = p, { t: f } = R(), v = z();
+    return (c, s) => (t(), a("div", Z, [
+      l("div", {
+        class: A(["flex items-center gap-12 p-16", o(v).default ? "border-b border-fm-color-neutral-gray-100" : ""])
+      }, [
+        l("img", {
+          src: i.icon,
+          class: "w-10 h-10 shrink-0"
+        }, null, 8, ee),
+        l("div", oe, [
+          l("span", ne, g(i.name), 1),
+          i.subtitle ? (t(), a("span", te, g(i.subtitle), 1)) : _("", !0)
+        ]),
+        i.connected ? (t(), a(k, { key: 0 }, [
+          i.tokenExpired ? (t(), w(o(y).FmChip, {
+            key: 0,
+            label: o(f)("connect.review.expired"),
+            variant: "critical"
+          }, null, 8, ["label"])) : _("", !0),
+          x(o(y).FmButton, {
+            variant: "secondary",
+            "prepend-icon": "refresh",
+            label: o(f)("connect.review.reconnect"),
+            onClick: s[0] || (s[0] = (m) => u("connect"))
+          }, null, 8, ["label"]),
+          i.tokenExpired ? _("", !0) : (t(), w(o(y).FmButton, {
+            key: 1,
+            variant: "primary",
+            "prepend-icon": "sync",
+            label: o(f)("connect.review.sync"),
+            loading: i.syncing,
+            onClick: s[1] || (s[1] = (m) => u("sync"))
+          }, null, 8, ["label", "loading"]))
+        ], 64)) : (t(), w(o(y).FmButton, {
+          key: 1,
+          "prepend-icon": "add",
+          label: o(f)("connect.review.connect"),
+          onClick: s[2] || (s[2] = (m) => u("connect"))
+        }, null, 8, ["label"]))
+      ], 2),
+      M(c.$slots, "default")
+    ]));
+  }
+}), ce = { class: "p-24 flex flex-col gap-8" }, re = { class: "flex flex-col flex-1 min-w-0" }, ae = { class: "fm-typo-en-body-lg-600 truncate" }, le = { class: "fm-typo-en-body-sm-400 text-fm-color-neutral-gray-400 truncate" }, se = ["src"], ie = { class: "flex flex-col flex-1 min-w-0" }, de = { class: "fm-typo-en-body-lg-600 truncate" }, ue = { class: "fm-typo-en-body-sm-400 text-fm-color-neutral-gray-400 truncate" }, xe = /* @__PURE__ */ U({
+  __name: "Settings",
+  setup(i) {
+    const { t: p } = R(), u = J(), f = Y(), v = H(), c = S(null), s = S(!1), m = S(!1), V = B(
+      () => {
+        var e;
+        return c.value ? ((e = c.value.google) == null ? void 0 : e.accessToken) === null : !1;
+      }
+    ), L = B(
+      () => {
+        var e;
+        return c.value ? ((e = c.value.facebook) == null ? void 0 : e.token) === null : !1;
+      }
+    );
+    function $(e) {
+      const n = window.location.pathname.replace(/\/review(?:\/.*)?$/, "");
+      return `${window.location.origin}${n}${e}`;
+    }
+    async function h() {
+      await q.minor(async () => {
+        c.value = await b.getSource();
+      });
+    }
+    function I(e) {
+      var n;
+      return (n = v.locations.find(
+        (r) => r._id.toString() === e
+      )) == null ? void 0 : n.name;
+    }
+    function T(e) {
+      return e.map((n) => I(n)).filter((n) => n !== void 0).join(", ");
+    }
+    function F() {
+      u.open({
+        message: p("connect.review.syncSuccess"),
+        type: "success"
+      }), f.push({ name: X["$connect-REVIEW_OVERVIEW"] });
+    }
+    async function O() {
+      var e, n;
+      s.value = !0;
+      try {
+        await b.syncGoogleReviews(), F();
+      } catch (r) {
+        if (await h(), ((n = (e = c.value) == null ? void 0 : e.google) == null ? void 0 : n.accessToken) === null) {
+          u.open({
+            message: p("connect.review.tokenExpired"),
+            type: "error"
+          });
+          return;
+        }
+        throw r;
+      } finally {
+        s.value = !1;
+      }
+    }
+    async function P() {
+      var e, n;
+      m.value = !0;
+      try {
+        await b.syncFacebookReviews(), F();
+      } catch (r) {
+        if (await h(), ((n = (e = c.value) == null ? void 0 : e.facebook) == null ? void 0 : n.token) === null) {
+          u.open({
+            message: p("connect.review.tokenExpired"),
+            type: "error"
+          });
+          return;
+        }
+        throw r;
+      } finally {
+        m.value = !1;
+      }
+    }
+    async function G() {
+      const e = $("/review/google/callback"), { callbackUrl: n } = await b.getOauthUrl("google", e);
+      window.location.href = n;
+    }
+    async function j() {
+      const e = $("/review/facebook/callback"), { callbackUrl: n } = await b.getOauthUrl("facebook", e);
+      window.location.href = n;
+    }
+    return W(() => {
+      h(), v.readLocations();
+    }), (e, n) => (t(), a("div", ce, [
+      o(c) ? (t(), a(k, { key: 0 }, [
+        x(N, {
+          icon: o(K),
+          name: "google",
+          connected: !!o(c).google,
+          syncing: o(s),
+          "token-expired": o(V),
+          onConnect: G,
+          onSync: O
+        }, {
+          default: C(() => {
+            var r;
+            return [
+              (t(!0), a(k, null, E((r = o(c).google) == null ? void 0 : r.locations, (d) => (t(), a("div", {
+                key: d.googleLocationName,
+                class: "flex items-center gap-12 px-16 py-12 border-b border-fm-color-neutral-gray-100 last:border-b-0"
+              }, [
+                x(o(y).FmIcon, {
+                  name: "location_on",
+                  class: "text-fm-color-neutral-gray-300 shrink-0"
+                }),
+                l("div", re, [
+                  l("span", ae, g(d.displayName), 1),
+                  l("span", le, g(I(d.locationId)), 1)
+                ])
+              ]))), 128))
+            ];
+          }),
+          _: 1
+        }, 8, ["icon", "connected", "syncing", "token-expired"]),
+        x(N, {
+          icon: o(Q),
+          name: "facebook",
+          connected: !!o(c).facebook,
+          syncing: o(m),
+          "token-expired": o(L),
+          onConnect: j,
+          onSync: P
+        }, {
+          default: C(() => {
+            var r;
+            return [
+              (t(!0), a(k, null, E((r = o(c).facebook) == null ? void 0 : r.pages, (d) => (t(), a("div", {
+                key: d.facebookPageId,
+                class: "flex items-center gap-12 px-16 py-12 border-b border-fm-color-neutral-gray-100 last:border-b-0"
+              }, [
+                d.pageProfileImageUrl ? (t(), a("img", {
+                  key: 0,
+                  src: d.pageProfileImageUrl,
+                  class: "w-10 h-10 rounded-full shrink-0 object-cover"
+                }, null, 8, se)) : (t(), w(o(y).FmIcon, {
+                  key: 1,
+                  name: "person",
+                  class: "text-fm-color-neutral-gray-300 shrink-0"
+                })),
+                l("div", ie, [
+                  l("span", de, g(d.pageName), 1),
+                  l("span", ue, g(T(d.locationIds)), 1)
+                ])
+              ]))), 128))
+            ];
+          }),
+          _: 1
+        }, 8, ["icon", "connected", "syncing", "token-expired"])
+      ], 64)) : (t(), a(k, { key: 1 }, E(["google", "facebook"], (r) => l("div", {
+        key: r,
+        class: "rounded-lg border border-fm-color-neutral-gray-200 bg-white p-16"
+      }, [...n[0] || (n[0] = [
+        D('<div class="animate-pulse flex items-center gap-12"><div class="w-10 h-10 rounded-full bg-fm-color-neutral-gray-100 shrink-0"></div><div class="flex-1 min-w-0 space-y-8"><div class="h-16 w-20 rounded bg-fm-color-neutral-gray-100"></div><div class="h-12 w-full max-w-[160px] rounded bg-fm-color-neutral-gray-100"></div></div><div class="h-32 w-24 rounded bg-fm-color-neutral-gray-100 shrink-0"></div></div>', 1)
+      ])])), 64))
+    ]));
+  }
+});
+export {
+  xe as default
+};