@feedmepos/mf-hrm-portal 2.3.1 → 2.3.2-dev.10

package/dist/MyPosProfile-CsTCfGNT.js

@@ -0,0 +1,360 @@
+import { defineComponent as G, ref as i, computed as y, resolveComponent as x, createBlock as F, openBlock as t, unref as a, withCtx as D, createElementVNode as s, createElementBlock as n, Fragment as z, renderList as j, toDisplayString as l, createVNode as m, onUnmounted as te, watch as ae, createCommentVNode as O, normalizeClass as le, createTextVNode as ne, h as T } from "vue";
+import { useI18n as K, useCoreStore as re, FeedMeAuth as ce } from "@feedmepos/mf-common";
+import { useBreakpoints as W, useSnackbar as ie, useDialog as de, components as me, SnackbarPosition as pe } from "@feedmepos/ui-library";
+import { _ as ue } from "./PageLayout.vue_vue_type_script_setup_true_lang-HKK4cbW8.js";
+import { t as fe, f as ye, c as _e, r as ve, i as H, d as ge, p as xe, o as he } from "./app-DEZT4wdV.js";
+import { _ as Pe } from "./index.vue_vue_type_script_setup_true_lang-BVVwfd7B.js";
+const be = { class: "flex w-full flex-col items-center gap-8 pt-[4px]" }, ke = { class: "fm-typo-en-title-sm-600 text-center" }, we = { class: "py-[4px]" }, Fe = {
+  class: "flex items-center justify-center gap-4 rounded-[12px] bg-fm-color-neutral-gray-100 px-16 py-[20px]",
+  "data-testid": "new-passcode"
+}, Ae = { class: "fm-typo-en-body-md-400 pt-16 text-center text-fm-color-typo-primary" }, Ce = /* @__PURE__ */ G({
+  __name: "PasscodeChangedDialog",
+  setup(q, { expose: e }) {
+    const { t: A } = K(), { breakpoints: U } = W(), h = i(!1), _ = i(""), P = i("changed"), p = y(() => _.value.split("")), C = (f, c = "changed") => {
+      _.value = f, P.value = c, h.value = !0;
+    }, u = () => {
+      h.value = !1, _.value = "";
+    };
+    return e({ open: C }), (f, c) => {
+      const B = x("FmIcon"), S = x("FmButton"), I = x("FmDialog");
+      return t(), F(I, {
+        modelValue: h.value,
+        "onUpdate:modelValue": [
+          c[0] || (c[0] = (r) => h.value = r),
+          c[1] || (c[1] = (r) => !r && u())
+        ],
+        "min-width": a(U).xs ? 0 : 360,
+        "max-width": 460,
+        "close-button": !1,
+        "dismiss-away": !1
+      }, {
+        "dialog-header": D(() => [
+          s("div", be, [
+            m(B, {
+              name: "check_circle",
+              size: "xl",
+              outline: "",
+              color: "typo-success"
+            }),
+            s("p", ke, l(a(A)(`myPosProfile.${P.value}.title`)), 1)
+          ])
+        ]),
+        "dialog-footer": D(() => [
+          m(S, {
+            class: "w-full",
+            variant: "primary",
+            label: a(A)("myPosProfile.changed.done"),
+            onClick: u
+          }, null, 8, ["label"])
+        ]),
+        default: D(() => [
+          s("div", we, [
+            s("div", Fe, [
+              (t(!0), n(z, null, j(p.value, (r, b) => (t(), n("span", {
+                key: b,
+                class: "flex h-[56px] w-[52px] items-center justify-center text-[48px] font-bold leading-[56px] text-fm-color-typo-primary"
+              }, l(r), 1))), 128))
+            ]),
+            s("p", Ae, l(a(A)(`myPosProfile.${P.value}.message`)), 1)
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue", "min-width"]);
+    };
+  }
+}), Se = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, $e = {
+  key: 1,
+  class: "flex flex-1 items-center justify-center xs:p-16"
+}, De = {
+  key: 2,
+  class: "space-y-24 xs:min-h-0 xs:flex-1 xs:overflow-y-auto xs:p-16"
+}, Be = {
+  key: 0,
+  role: "alert",
+  "data-testid": "pos-user-shared",
+  class: "flex items-start gap-[10px] rounded-[12px] bg-fm-color-system-warning-100 px-16 py-[14px]"
+}, ze = { class: "fm-typo-en-body-lg-400 min-w-0 flex-1 text-fm-color-typo-primary" }, Ue = {
+  key: 0,
+  "data-testid": "profile-card",
+  class: "rounded-[12px] border border-fm-color-neutral-gray-100"
+}, Ie = { class: "flex items-center gap-12 p-16" }, Me = { class: "min-w-0 flex-1" }, Ee = { class: "fm-typo-en-body-lg-600 truncate" }, Ve = {
+  key: 0,
+  class: "fm-typo-en-body-md-400 truncate text-fm-color-typo-secondary"
+}, Te = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, je = { class: "fm-typo-en-body-lg-400 break-words" }, Le = { class: "fm-typo-en-body-md-400 pt-8 text-fm-color-typo-secondary" }, Ne = { class: "fm-typo-en-body-lg-400 break-words" }, Re = { class: "space-y-12" }, Oe = { class: "fm-typo-en-body-lg-600" }, He = { class: "flex min-w-0 flex-1 items-center gap-16" }, Ge = { class: "flex h-48 w-48 shrink-0 items-center justify-center rounded-[12px] bg-fm-color-neutral-gray-100" }, Ke = {
+  key: 0,
+  class: "min-w-0 flex-1",
+  "data-testid": "no-passcode"
+}, We = { class: "fm-typo-en-body-lg-600 text-fm-color-typo-primary" }, qe = { class: "fm-typo-en-body-md-400 pt-[2px] text-fm-color-typo-secondary" }, Je = {
+  key: 1,
+  class: "min-w-0 flex-1"
+}, Qe = { class: "flex items-center gap-8" }, Xe = ["aria-label"], Ye = {
+  key: 0,
+  class: "h-[14px] w-[14px] rounded-full bg-fm-color-typo-primary"
+}, Ze = {
+  key: 1,
+  class: "fm-typo-en-title-sm-600 text-fm-color-typo-primary"
+}, eo = {
+  key: 0,
+  class: "fm-typo-en-body-md-400 pt-[6px] text-fm-color-typo-secondary"
+}, oo = { class: "flex items-start gap-[10px] rounded-[12px] bg-fm-color-neutral-gray-100 px-16 py-[14px]" }, so = { class: "fm-typo-en-body-md-400 min-w-0 flex-1 text-fm-color-typo-secondary" }, to = 4, mo = /* @__PURE__ */ G({
+  __name: "MyPosProfile",
+  setup(q) {
+    const { t: e, locale: A } = K(), U = re(), h = ie(), _ = de(), { breakpoints: P } = W(), p = i(null), C = i(!0), u = i(!1), f = i(!1), c = i(!1), B = i(), S = i(Date.now()), I = setInterval(() => S.value = Date.now(), 3e4);
+    te(() => clearInterval(I));
+    const r = y(() => {
+      var o;
+      return ((o = p.value) == null ? void 0 : o.profile) ?? null;
+    }), b = y(() => r.value ? fe(r.value) : []), L = y(
+      () => {
+        var o;
+        return ye(
+          ((o = r.value) == null ? void 0 : o.passcodeUpdatedAt) ?? null,
+          e,
+          String(A.value),
+          S.value
+        );
+      }
+    ), M = y(() => {
+      var o;
+      return !!((o = r.value) != null && o.passcode);
+    }), J = y(() => P.value.xs), $ = y(() => {
+      var o;
+      return u.value ? (o = r.value) == null ? void 0 : o.passcode : null;
+    }), Q = y(
+      () => $.value ? $.value.split("") : Array.from({ length: to }, () => null)
+    ), X = [
+      {
+        id: "name",
+        header: () => e("myPosProfile.table.columns.name"),
+        enableSorting: !1,
+        cell: (o) => {
+          const d = o.row.original.name;
+          return d ? T("div", { class: "flex items-center gap-8" }, [
+            T(me.FmAvatar, { name: d, size: "sm", class: "shrink-0" }),
+            T("span", { class: "truncate" }, d)
+          ]) : "";
+        }
+      },
+      {
+        id: "contact",
+        header: () => e("myPosProfile.table.columns.contact"),
+        enableSorting: !1,
+        cell: (o) => o.row.original.contact ?? ""
+      },
+      {
+        id: "restaurant",
+        header: () => e("myPosProfile.table.columns.restaurant"),
+        enableSorting: !1,
+        cell: (o) => o.row.original.restaurant
+      },
+      {
+        id: "role",
+        header: () => e("myPosProfile.table.columns.role"),
+        enableSorting: !1,
+        cell: (o) => o.row.original.role
+      }
+    ];
+    function E(o) {
+      h.open({ type: "error", title: o, position: pe.BOTTOM });
+    }
+    async function Y() {
+      C.value = !0, c.value = !1, u.value = !1;
+      try {
+        p.value = await ve();
+      } catch (o) {
+        p.value = null, H(o) ? c.value = !0 : E(e("myPosProfile.loadFailed"));
+      } finally {
+        C.value = !1;
+      }
+    }
+    ae(
+      U.currentBusiness,
+      (o) => {
+        o && Y();
+      },
+      { immediate: !0 }
+    );
+    function Z() {
+      u.value = !u.value;
+    }
+    async function N(o) {
+      var d, k;
+      if (!f.value) {
+        f.value = !0;
+        try {
+          const { passcode: v, passcodeUpdatedAt: w } = await ge();
+          u.value = !1, (d = p.value) != null && d.profile && (p.value.profile.passcode = v, p.value.profile.passcodeUpdatedAt = w), S.value = Date.now(), _.close(), (k = B.value) == null || k.open(v, o ? "generated" : "changed");
+        } catch (v) {
+          if (_.close(), H(v)) c.value = !0;
+          else {
+            const w = xe(v);
+            E(
+              e(o && w === "myPosProfile.change.failed" ? "myPosProfile.generate.failed" : w)
+            );
+          }
+        } finally {
+          f.value = !1;
+        }
+      }
+    }
+    function ee() {
+      _.open({
+        title: e("myPosProfile.change.title"),
+        message: e("myPosProfile.change.message"),
+        minWidth: P.value.lg ? 598 : 0,
+        primaryActions: {
+          text: e("common.confirm"),
+          close: !1,
+          isLoading: f
+        },
+        secondaryActions: { text: e("common.cancel"), close: !0 }
+      }).onPrimary(() => N(!1));
+    }
+    function oe() {
+      he(ce) || E(e("myPosProfile.manageAccount.failed"));
+    }
+    return (o, d) => {
+      const k = x("FmIcon"), v = x("FmAvatar"), w = x("FmTable"), V = x("FmButton");
+      return t(), F(ue, {
+        heading: a(e)("myPosProfile.title")
+      }, {
+        "sub-heading": D(() => [
+          s("p", Se, l(a(e)("myPosProfile.subtitle")), 1)
+        ]),
+        default: D(() => {
+          var R;
+          return [
+            C.value ? (t(), F(_e, { key: 0 })) : !r.value && !c.value ? (t(), n("div", $e, [
+              m(a(Pe), {
+                title: a(e)("myPosProfile.noPosUser.title"),
+                subtitle: a(e)("myPosProfile.noPosUser.description")
+              }, null, 8, ["title", "subtitle"])
+            ])) : (t(), n("div", De, [
+              c.value ? (t(), n("div", Be, [
+                m(k, {
+                  name: "warning",
+                  size: "sm",
+                  outline: "",
+                  color: "typo-warning",
+                  class: "shrink-0"
+                }),
+                s("span", ze, l(a(e)("myPosProfile.shared.message")), 1)
+              ])) : (t(), n(z, { key: 1 }, [
+                J.value ? (t(), n("div", Ue, [
+                  s("div", Ie, [
+                    m(v, {
+                      name: r.value.name,
+                      size: "md",
+                      class: "shrink-0"
+                    }, null, 8, ["name"]),
+                    s("div", Me, [
+                      s("p", Ee, l(r.value.name), 1),
+                      (R = b.value[0]) != null && R.contact ? (t(), n("p", Ve, l(b.value[0].contact), 1)) : O("", !0)
+                    ])
+                  ]),
+                  (t(!0), n(z, null, j(b.value, (g) => (t(), n("div", {
+                    key: g.assignment.restaurantId,
+                    class: "flex flex-col gap-[2px] border-t border-fm-color-neutral-gray-100 px-16 py-12"
+                  }, [
+                    s("p", Te, l(a(e)("myPosProfile.table.columns.restaurant")), 1),
+                    s("p", je, l(g.restaurant), 1),
+                    s("p", Le, l(a(e)("myPosProfile.table.columns.role")), 1),
+                    s("p", Ne, l(g.role), 1)
+                  ]))), 128))
+                ])) : (t(), F(w, {
+                  key: 1,
+                  "column-defs": X,
+                  "row-data": b.value,
+                  "page-size": 100,
+                  "hide-footer": ""
+                }, null, 8, ["row-data"])),
+                s("section", Re, [
+                  s("p", Oe, l(a(e)("myPosProfile.passcode.title")), 1),
+                  s("div", {
+                    class: le(["flex items-center gap-24 rounded-[12px] border border-fm-color-neutral-gray-100 p-24 xs:flex-col xs:items-stretch xs:gap-16 xs:p-16", { "bg-fm-color-system-warning-100": !M.value }])
+                  }, [
+                    s("div", He, [
+                      s("div", Ge, [
+                        m(k, {
+                          name: "lock",
+                          outline: ""
+                        })
+                      ]),
+                      M.value ? (t(), n("div", Je, [
+                        s("div", Qe, [
+                          s("div", {
+                            class: "flex h-24 items-center gap-[10px]",
+                            "data-testid": "passcode",
+                            "aria-label": $.value ? void 0 : a(e)("myPosProfile.passcode.title")
+                          }, [
+                            (t(!0), n(z, null, j(Q.value, (g, se) => (t(), n("span", {
+                              key: se,
+                              class: "flex w-[20px] items-center justify-center"
+                            }, [
+                              g === null ? (t(), n("span", Ye)) : (t(), n("span", Ze, l(g), 1))
+                            ]))), 128))
+                          ], 8, Xe),
+                          m(V, {
+                            variant: "tertiary",
+                            "prepend-icon": $.value ? "visibility_off" : "visibility",
+                            "aria-label": $.value ? a(e)("myPosProfile.passcode.hide") : a(e)("myPosProfile.passcode.show"),
+                            onClick: Z
+                          }, null, 8, ["prepend-icon", "aria-label"])
+                        ]),
+                        L.value ? (t(), n("p", eo, l(L.value), 1)) : O("", !0)
+                      ])) : (t(), n("div", Ke, [
+                        s("p", We, l(a(e)("myPosProfile.passcode.empty")), 1),
+                        s("p", qe, l(a(e)("myPosProfile.passcode.emptyHint")), 1)
+                      ]))
+                    ]),
+                    M.value ? (t(), F(V, {
+                      key: 1,
+                      class: "xs:w-full",
+                      variant: "secondary",
+                      size: "md",
+                      label: a(e)("myPosProfile.passcode.change"),
+                      onClick: ee
+                    }, null, 8, ["label"])) : (t(), F(V, {
+                      key: 0,
+                      class: "xs:w-full",
+                      variant: "primary",
+                      size: "md",
+                      label: a(e)("myPosProfile.passcode.generate"),
+                      loading: f.value,
+                      onClick: d[0] || (d[0] = (g) => N(!0))
+                    }, null, 8, ["label", "loading"]))
+                  ], 2)
+                ])
+              ], 64)),
+              s("div", oo, [
+                m(k, {
+                  name: "info",
+                  size: "sm",
+                  outline: "",
+                  color: "typo-secondary",
+                  class: "shrink-0"
+                }),
+                s("p", so, [
+                  ne(l(a(e)("myPosProfile.manageAccount.message")) + " ", 1),
+                  s("button", {
+                    type: "button",
+                    class: "fm-typo-en-body-md-600 text-fm-color-system-info-300",
+                    onClick: oe
+                  }, l(a(e)("myPosProfile.manageAccount.link")), 1)
+                ])
+              ])
+            ])),
+            m(Ce, {
+              ref_key: "changedDialogRef",
+              ref: B
+            }, null, 512)
+          ];
+        }),
+        _: 1
+      }, 8, ["heading"]);
+    };
+  }
+});
+export {
+  mo as default
+};

package/dist/PasscodePinField.vue_vue_type_script_setup_true_lang-TXPEqa46.js

@@ -0,0 +1,126 @@
+import { defineComponent as c, createElementBlock as s, openBlock as m, normalizeStyle as b, resolveComponent as u, Fragment as p, createVNode as r, createCommentVNode as g, toDisplayString as y, createElementVNode as v } from "vue";
+const B = /* @__PURE__ */ c({
+  __name: "Skeleton",
+  props: {
+    width: { default: "160px" }
+  },
+  setup(t) {
+    return (l, n) => (m(), s("div", {
+      class: "h-16 animate-pulse rounded bg-fm-color-neutral-gray-200",
+      style: b({ width: t.width })
+    }, null, 4));
+  }
+});
+function f(t) {
+  return t.map((l) => l.restaurantId).filter(Boolean);
+}
+function x(t, l, n) {
+  const o = f(l);
+  return t.filter((e) => e.managable || e._id === n).map((e) => ({
+    label: `${e.profile.code ? `${e.profile.code} - ` : ""}${e.profile.name}`,
+    value: e._id,
+    disabled: o.includes(e._id) && e._id !== n
+  }));
+}
+function k(t, l, n, o) {
+  return l ? t.filter((e) => e.restaurants.some((a) => a.id == l)).map((e) => ({
+    label: e.name,
+    value: e._id,
+    disabled: !o.isRoleUsable(e, l) && e._id !== n
+  })) : [];
+}
+function V(t, l, n, o) {
+  var a, i;
+  const e = k(t, l, n, o);
+  return ((a = e.find((d) => d.value === n && !d.disabled)) == null ? void 0 : a.value) ?? ((i = e.find((d) => !d.disabled)) == null ? void 0 : i.value) ?? "";
+}
+function C(t, l) {
+  const n = f(l), o = t.some(
+    (a) => a.managable && !n.includes(a._id)
+  ), e = l.every((a) => a.restaurantId && a.roleId);
+  return o && e;
+}
+function R(t, l, n, o) {
+  var a;
+  const e = ((a = t[l]) == null ? void 0 : a.restaurantId) ?? "";
+  return o.isRestaurantLocked(e) ? t : t.length === 1 ? [n()] : t.filter((i, d) => d !== l);
+}
+const F = {
+  key: 0,
+  class: "fm-typo-body-sm-400 text-fm-color-typo-secondary"
+}, I = /* @__PURE__ */ c({
+  __name: "PasscodeGenerateButton",
+  props: {
+    label: {},
+    hint: {},
+    disabled: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 }
+  },
+  emits: ["click"],
+  setup(t) {
+    return (l, n) => {
+      const o = u("FmButton");
+      return m(), s(p, null, [
+        r(o, {
+          variant: "secondary",
+          "text-color": "primary",
+          "border-color": "primary",
+          label: t.label,
+          size: "md",
+          loading: t.loading,
+          disabled: t.disabled,
+          onClick: n[0] || (n[0] = (e) => l.$emit("click"))
+        }, null, 8, ["label", "loading", "disabled"]),
+        t.disabled ? (m(), s("div", F, y(t.hint), 1)) : g("", !0)
+      ], 64);
+    };
+  }
+}), _ = { class: "flex items-center gap-8" }, $ = ["aria-label"], P = /* @__PURE__ */ c({
+  __name: "PasscodePinField",
+  props: {
+    modelValue: {},
+    masked: { type: Boolean },
+    length: { default: 4 },
+    toggleLabel: {}
+  },
+  emits: ["update:modelValue", "update:masked", "complete"],
+  setup(t, { emit: l }) {
+    const n = l;
+    return (o, e) => {
+      const a = u("FmPinField"), i = u("FmIcon");
+      return m(), s("div", _, [
+        r(a, {
+          "model-value": t.modelValue,
+          length: t.length,
+          masked: t.masked,
+          "onUpdate:modelValue": e[0] || (e[0] = (d) => n("update:modelValue", d)),
+          onComplete: e[1] || (e[1] = (d) => n("complete", d)),
+          onFocus: e[2] || (e[2] = (d) => n("update:masked", !1))
+        }, null, 8, ["model-value", "length", "masked"]),
+        v("button", {
+          type: "button",
+          class: "flex items-center justify-center rounded-full p-4 hover:bg-fm-color-neutral-gray-100",
+          "aria-label": t.toggleLabel,
+          onClick: e[3] || (e[3] = (d) => n("update:masked", !t.masked))
+        }, [
+          r(i, {
+            name: t.masked ? "visibility" : "visibility_off",
+            size: "md",
+            class: "text-fm-color-neutral-gray-300"
+          }, null, 8, ["name"])
+        ], 8, $)
+      ]);
+    };
+  }
+});
+export {
+  P as _,
+  k as a,
+  x as b,
+  C as c,
+  I as d,
+  B as e,
+  V as p,
+  R as r,
+  f as s
+};