@feedmepos/mf-order-setting 0.0.52 → 0.0.54

package/dist/KioskView-U-Wg8oMC.js

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