@feedmepos/mf-order-setting 0.0.21-beta.1 → 0.0.21-beta.3

package/dist/KioskView-BLkuqfZ_.js

@@ -0,0 +1,371 @@
+import { defineComponent as I, computed as f, openBlock as d, createElementBlock as p, normalizeClass as Q, toDisplayString as c, unref as r, createCommentVNode as y, createElementVNode as n, Fragment as X, renderList as Z, ref as w, defineAsyncComponent as ee, watch as te, resolveComponent as T, createVNode as S, withCtx as ae, withDirectives as ne, vShow as se, createBlock as R } from "vue";
+import { u as oe, _ as le } from "./KioskDevicesView.vue_vue_type_script_setup_true_lang-raPhhBpi.js";
+import { useI18n as $, useCoreStore as re } from "@feedmepos/mf-common";
+import { F as U, a as ie, b as de } from "./auth.dto-BOoRSQkS.js";
+import { useDialog as ce, useSnackbar as pe, useBreakpoints as ue } from "@feedmepos/ui-library";
+import { defineStore as me } from "pinia";
+import { O as V, c as B } from "./index-t_7ThPjm.js";
+const ye = {
+  key: 0,
+  class: "fm-typo-en-title-sm-600"
+}, fe = {
+  key: 1,
+  class: "my-[0.25rem]"
+}, ve = { class: "flex flex-col gap-1" }, _e = { class: "flex flex-col gap-1" }, ge = { class: "fm-typo-en-body-lg-400 text-fm-color-typo-secondary" }, ke = { class: "fm-typo-en-body-lg-600" }, he = { key: 0 }, Se = { key: 1 }, be = { key: 0 }, Pe = { class: "fm-typo-en-body-lg-400 text-fm-color-typo-secondary" }, Te = { class: "fm-typo-en-body-lg-600 block" }, we = { key: 1 }, xe = { class: "fm-typo-en-body-lg-400 text-fm-color-typo-secondary" }, Ke = { class: "fm-typo-en-body-lg-600 block" }, Ie = { key: 2 }, $e = { class: "fm-typo-en-body-lg-400 text-fm-color-typo-secondary" }, Ce = { class: "fm-typo-en-body-lg-600 block" }, Fe = { key: 3 }, Oe = { class: "fm-typo-en-body-lg-400 text-fm-color-typo-secondary" }, qe = { class: "fm-typo-en-body-lg-600 block" }, De = { key: 0 }, A = /* @__PURE__ */ I({
+  __name: "KioskSummary",
+  props: {
+    restaurantId: {},
+    devices: {},
+    kioskOrderSetting: {},
+    dialogType: { type: Boolean }
+  },
+  setup(t) {
+    const { t: e } = $(), o = t, i = f(() => {
+      var a;
+      return (a = o.kioskOrderSetting) != null && a.dineIn.enabled ? e("order.activated") : e("order.deactivated");
+    }), s = f(() => {
+      var a;
+      return (a = o.kioskOrderSetting) != null && a.takeaway.enabled ? e("order.activated") : e("order.deactivated");
+    }), l = f(() => {
+      var a, m;
+      return (a = o.kioskOrderSetting) != null && a.dineIn.displayStand ? e("order.tableService") : (m = o.kioskOrderSetting) != null && m.dineIn && !o.kioskOrderSetting.dineIn.displayStand ? e("order.pickAtCounter") : e("order.unknown");
+    }), k = f(() => {
+      var a;
+      return ((a = o.kioskOrderSetting) == null ? void 0 : a.paymentSetting.paymentTypes.includes(U.enum.cash)) ?? !1;
+    }), v = f(() => {
+      var m, _;
+      const a = [];
+      if ((m = o.kioskOrderSetting) == null || m.paymentSetting.paymentTypes.forEach((g) => {
+        g === U.enum.ePayment && a.push(e("order.ePayment"));
+      }), a.length > 0 && Object.keys(o.kioskOrderSetting.paymentSetting.ePaymentTypes).length !== 0) {
+        const g = (_ = o.kioskOrderSetting) == null ? void 0 : _.paymentSetting.ePaymentTypes;
+        (g.card.terminal || g.card.nfc) && a.push(e("order.bankCard")), (g.eWallet.scanPay || g.eWallet.qrPay) && a.push(e("order.eWallet"));
+      }
+      return a.join(", ");
+    });
+    return (a, m) => (d(), p("div", {
+      class: Q(a.dialogType ? "" : ["p-[1.5rem] border fm-corner-radius-lg flex flex-col gap-5 fixed ml-40 w-[320px]"])
+    }, [
+      a.dialogType ? y("", !0) : (d(), p("span", ye, c(r(e)("order.kioskSummary")), 1)),
+      a.dialogType ? y("", !0) : (d(), p("hr", fe)),
+      n("div", ve, [
+        n("div", _e, [
+          n("span", ge, c(r(e)("order.kioskDisplay")), 1),
+          n("div", ke, [
+            a.devices.length > 0 ? (d(), p("div", he, [
+              (d(!0), p(X, null, Z(a.devices, (_) => (d(), p("li", {
+                class: "block",
+                key: _.machineId
+              }, c(_.name), 1))), 128))
+            ])) : (d(), p("div", Se, "-"))
+          ]),
+          i.value === r(e)("order.activated") ? (d(), p("div", be, [
+            n("span", Pe, c(r(e)("order.dineIn")), 1),
+            n("div", Te, [
+              n("div", null, c(i.value), 1)
+            ])
+          ])) : y("", !0),
+          i.value === r(e)("order.activated") && l.value !== r(e)("order.unknown") ? (d(), p("div", we, [
+            n("span", xe, c(r(e)("order.dineInType")), 1),
+            n("div", Ke, [
+              n("div", null, c(l.value), 1)
+            ])
+          ])) : y("", !0),
+          s.value === r(e)("order.activated") ? (d(), p("div", Ie, [
+            n("span", $e, c(r(e)("order.takeaway")), 1),
+            n("div", Ce, [
+              n("div", null, c(s.value), 1)
+            ])
+          ])) : y("", !0),
+          v.value || k.value ? (d(), p("div", Fe, [
+            n("span", Oe, c(r(e)("order.acceptedPayment")), 1),
+            n("div", qe, [
+              k.value ? (d(), p("div", De, c(r(e)("order.offlinePayment")), 1)) : y("", !0),
+              n("div", null, c(v.value), 1)
+            ])
+          ])) : y("", !0)
+        ])
+      ])
+    ], 2));
+  }
+}), Re = { class: "flex flex-col gap-5 pb-6" }, Ue = { class: "fm-typo-en-body-md-400 block" }, Ve = { class: "fm-typo-en-title-md-600" }, Be = /* @__PURE__ */ I({
+  __name: "KioskOtpDialog",
+  props: {
+    otp: {}
+  },
+  setup(t) {
+    const { t: e } = $();
+    return (o, i) => (d(), p("div", Re, [
+      n("span", Ue, c(r(e)("order.bindDeviceMessage")), 1),
+      n("div", Ve, c(o.otp), 1)
+    ]));
+  }
+}), N = {
+  enabled: !1,
+  prefix: null,
+  padDigit: 0,
+  standSlotRange: {
+    min: 1,
+    max: 10
+  }
+}, M = {
+  enabled: !1
+}, Ae = {
+  dineIn: {
+    enabled: !1,
+    pickUp: M,
+    sequenceNumber: ie.parse({}),
+    displayStand: N
+  },
+  takeaway: {
+    enabled: !1
+  },
+  paymentSetting: {
+    paymentTypes: [],
+    offlinePaymentTypes: [],
+    ePaymentTypes: {
+      card: {
+        terminal: !1,
+        nfc: !1
+      },
+      eWallet: {
+        qrPay: !1,
+        scanPay: !1
+      }
+    }
+  },
+  menuItem: {
+    showAllOnly: !1
+  }
+}, Ee = (t) => {
+  var e;
+  return {
+    kiosk: Ne(t.kioskSettings, (e = t.sequenceSettings) == null ? void 0 : e.kioskDineIn)
+  };
+}, Ne = (t, e) => {
+  var o, i, s, l;
+  return {
+    dineIn: Me(e ?? {
+      current: 0,
+      prefix: "#K"
+    }, t.dineIn ?? void 0),
+    takeaway: {
+      enabled: (t == null ? void 0 : t.canTakeaway) ?? !1
+    },
+    paymentSetting: {
+      paymentTypes: ((o = t == null ? void 0 : t.paymentSetting) == null ? void 0 : o.paymentTypes) ?? [],
+      offlinePaymentTypes: ((i = t == null ? void 0 : t.paymentSetting) == null ? void 0 : i.offlinePaymentTypes) ?? [],
+      ePaymentTypes: ((s = t == null ? void 0 : t.paymentSetting) == null ? void 0 : s.ePaymentTypes) ?? de.parse({
+        card: {
+          terminal: !1,
+          nfc: !1
+        },
+        eWallet: {
+          qrPay: !1,
+          scanPay: !1
+        }
+      })
+    },
+    menuItem: {
+      showAllOnly: ((l = t.menuItem) == null ? void 0 : l.showAllOnly) ?? !1
+    }
+  };
+}, Me = (t, e) => ({
+  enabled: !!e,
+  sequenceNumber: t,
+  pickUp: (e == null ? void 0 : e.pickUp) ?? M,
+  displayStand: e != null && e.displayStand ? {
+    enabled: e.displayStand.enabled,
+    standSlotRange: e.displayStand.standSlotRange,
+    prefix: e.displayStand.prefix,
+    padDigit: e.displayStand.padDigit
+  } : N
+}), We = (t) => {
+  const e = (s) => ({
+    requiredSlot: !!s.displayStand,
+    displayStand: s.displayStand,
+    pickUp: s.pickUp
+  }), o = (s) => ({
+    canTakeaway: t.takeaway.enabled,
+    dineIn: s,
+    menuItem: t.menuItem,
+    paymentSetting: i(t.paymentSetting)
+  }), i = (s) => ({
+    paymentTypes: s.paymentTypes,
+    offlinePaymentTypes: s.offlinePaymentTypes,
+    ePaymentTypes: s.ePaymentTypes
+  });
+  return t.dineIn.enabled ? {
+    kioskSettings: o(e(t.dineIn)),
+    kioskDineIn: t.dineIn.sequenceNumber
+  } : {
+    kioskSettings: o()
+  };
+}, E = {
+  convertOrderSettingDto: Ee,
+  toOrderKioskSettingsDto: We
+}, je = me("orderSetting", () => {
+  const t = w({});
+  async function e() {
+    const l = await V.getOrderSetting();
+    i(l);
+  }
+  async function o() {
+    if (t.value.orderSetting && t.value.kiosk) {
+      const { _id: l, ...k } = t.value.orderSetting, v = E.toOrderKioskSettingsDto(t.value.kiosk), a = {
+        ...k,
+        kioskSettings: v.kioskSettings
+      }, m = await V.updateOrderSetting(a);
+      i(m);
+    }
+  }
+  function i(l) {
+    t.value.orderSetting = l, t.value.kiosk = E.convertOrderSettingDto(l).kiosk;
+  }
+  function s(l) {
+    t.value.kiosk = l;
+  }
+  return {
+    state: t,
+    getSetting: e,
+    updateKioskSetting: o,
+    setKioskOrderSetting: s
+  };
+}), He = { class: "py-[1.5rem]" }, Le = { class: "flex px-[1.5rem]" }, Ye = { class: "flex-[2_2_0%]" }, ze = { class: "pt-[1.5rem]" }, Ge = { class: "flex flex-col gap-10" }, Je = { class: "flex flex-col gap-2" }, Qe = { class: "fm-typo-en-title-sm-600" }, Xe = { class: "fm-typo-en-title-sm-400" }, Ze = {
+  key: 0,
+  class: "flex-[1_1_0%]"
+}, rt = /* @__PURE__ */ I({
+  __name: "KioskView",
+  setup(t) {
+    var q, D;
+    const { t: e } = $(), o = ee(
+      () => import("./KioskSettingView-BQgyeWbo.js")
+    ), i = w("device"), s = oe(), l = je(), k = ce(), { currentRestaurant: v, restaurants: a, changeRestaurant: m } = re(), _ = pe(), g = ue(), C = f(() => g.breakpoints.value.xs), b = w(((q = v.value) == null ? void 0 : q._id) ?? void 0), W = f(() => a.value.map((u) => ({
+      label: u.profile.name,
+      value: u._id
+    }))), P = w(((D = v.value) == null ? void 0 : D._id) ?? "");
+    function j() {
+      var u;
+      k.open({
+        title: B(e("order.kioskSummary")),
+        contentComponent: A,
+        contentComponentProps: {
+          restaurantId: (u = v.value) == null ? void 0 : u._id,
+          devices: s.state.devices,
+          kioskOrderSetting: l.state.kiosk,
+          dialogType: !0
+        }
+      });
+    }
+    async function F(u) {
+      const h = a.value.find((x) => x._id == u);
+      await m(h), await l.getSetting(), await s.getDevices(), b.value = u, P.value = u;
+    }
+    const H = f(() => [
+      {
+        label: e("order.deviceBinding"),
+        value: "device"
+      },
+      {
+        label: e("order.settings"),
+        value: "setting"
+      }
+    ]), O = f(() => s.state.devices);
+    async function L() {
+      await s.requestOtp(), k.open({
+        title: B(e("order.bindDevice")),
+        contentComponent: Be,
+        contentComponentProps: {
+          otp: s.state.otp
+        }
+      });
+    }
+    async function Y(u) {
+      try {
+        l.setKioskOrderSetting(u), await l.updateKioskSetting(), _.open({
+          title: e("order.kioskSettingSuccess"),
+          type: "success"
+        });
+      } catch {
+        _.open({
+          title: e("order.kioskSettingFailed"),
+          type: "error"
+        });
+      }
+    }
+    return te(
+      () => a.value.length,
+      async (u) => {
+        b.value === void 0 && a.value.length > 0 && await F(a.value[0]._id);
+      },
+      { immediate: !0 }
+    ), (u, h) => {
+      const x = T("FmButton"), z = T("FmPageHead"), G = T("FmTabs"), J = T("FmSelect");
+      return d(), p("div", He, [
+        S(z, {
+          title: r(e)("order.kiosk")
+        }, {
+          append: ae(() => [
+            ne(S(x, {
+              icon: "info",
+              variant: "tertiary",
+              onClick: j
+            }, null, 512), [
+              [se, C.value]
+            ])
+          ]),
+          _: 1
+        }, 8, ["title"]),
+        n("div", Le, [
+          n("div", Ye, [
+            S(G, {
+              "model-value": i.value,
+              "onUpdate:modelValue": h[0] || (h[0] = (K) => i.value = K),
+              items: H.value
+            }, null, 8, ["model-value", "items"]),
+            n("div", ze, [
+              n("div", Ge, [
+                n("div", Je, [
+                  n("span", Qe, c(r(e)("order.activateLocation")), 1),
+                  n("span", Xe, c(r(e)("order.selectRestaurant")) + ": ", 1),
+                  S(J, {
+                    class: "w-1/2",
+                    modelValue: b.value,
+                    "onUpdate:modelValue": [
+                      h[1] || (h[1] = (K) => b.value = K),
+                      F
+                    ],
+                    items: W.value,
+                    placeholder: r(e)("order.selectItem")
+                  }, null, 8, ["modelValue", "items", "placeholder"])
+                ]),
+                i.value == "device" ? (d(), R(le, {
+                  key: 0,
+                  devices: O.value,
+                  "request-otp": L
+                }, null, 8, ["devices"])) : y("", !0),
+                i.value == "setting" ? (d(), R(r(o), {
+                  key: `KioskSettingView-${P.value}`,
+                  "restaurant-id": P.value,
+                  onUpdateKioskOrderSetting: Y,
+                  form: r(l).state.kiosk ?? r(Ae)
+                }, null, 8, ["restaurant-id", "form"])) : y("", !0)
+              ])
+            ])
+          ]),
+          C.value ? y("", !0) : (d(), p("div", Ze, [
+            S(A, {
+              "restaurant-id": P.value,
+              devices: O.value,
+              "kiosk-order-setting": r(l).state.kiosk,
+              dialogType: !1
+            }, null, 8, ["restaurant-id", "devices", "kiosk-order-setting"])
+          ]))
+        ])
+      ]);
+    };
+  }
+});
+export {
+  rt as default
+};