@feedmepos/mf-order-setting 0.0.26 → 0.0.28

package/src/views/order-settings/discount-rule/DiscountRuleSetting.vue

@@ -0,0 +1,434 @@
+<template>
+  <div class="flex flex-col gap-5 mx-5">
+    <div class="flex flex-col">
+      <div v-if="!isLoading">
+        <FmPageHead
+          class="flex-grow"
+          :title="t('order.discountRule.title')"
+          :description="
+            t('order.discountRule.description', {
+              minPosVersion: Pos.minVersionToUse(F_FEATURE.Enum.calculatorV7)
+            })
+          "
+        />
+        <div class="flex flex-col gap-5 ml-5">
+          <!-- Discount Rule Cards -->
+          <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
+            <FmCard
+              v-for="(group, index) in effectGroups"
+              :key="index"
+              variant="outlined"
+              class="p-5"
+            >
+              <div class="flex items-center justify-between mb-3">
+                <div class="font-bold">{{ t('order.discountRule.title') }} {{ index + 1 }}</div>
+                <FmButton
+                  variant="plain"
+                  size="md"
+                  prepend-icon="delete"
+                  @click="() => deleteRule(index)"
+                />
+              </div>
+              <div class="flex items-center justify-between">
+                <div class="font-semibold my-3">
+                  {{ t('order.discountRule.effect') }}
+                </div>
+                <FmButton
+                  variant="plain"
+                  :label="
+                    t('order.discountRule.effectSelected', { count: group.effectIds?.length ?? 0 })
+                  "
+                  size="lg"
+                  :disabled="!hasEffects"
+                  @click="() => toggleSideSheet(index)"
+                />
+              </div>
+              <FmTextField
+                v-model="group.maxApplicableEffects"
+                :label="t('order.discountRule.maxTotalUses')"
+                type="number"
+                :rules="maxApplicableEffectsRules"
+                :min="1"
+                :helper-text="t('order.discountRule.maxTotalUsesSublabel')"
+              />
+            </FmCard>
+            <FmCard
+              variant="outlined"
+              class="flex items-center justify-center w-full h-full border-dashed"
+            >
+              <FmCardSection class="flex items-center justify-center w-full">
+                <FmButton
+                  variant="plain"
+                  :label="t('order.discountRule.add')"
+                  icon="add"
+                  @click="createRule"
+                  class="border fm-corner-radius-lg border-fm-color-primary"
+                />
+              </FmCardSection>
+            </FmCard>
+          </div>
+          <div class="fm-corner-radius-lg flex flex-col">
+            <FmButton
+              variant="primary"
+              :label="t('order.saveSetting')"
+              class="mr-auto"
+              :disabled="!canSave"
+              @click="updateDiscountRule"
+            />
+          </div>
+        </div>
+        <!-- Side Sheet for Effect Selection -->
+        <FmSideSheet
+          :header="t('order.discountRule.selectEffects')"
+          :maxWidth="600"
+          dismiss-away
+          v-model="sideSheet"
+        >
+          <div>
+            <div class="text-fm-color-typo-secondary mt-5 mb-5 flex flex-row">
+              {{
+                t('order.discountRule.effectSelected', {
+                  count: selectedEffectGroup?.effectIds?.length ?? 0
+                })
+              }}
+            </div>
+
+            <FmCheckbox
+              :label="t('order.discountRule.selectAllEffects')"
+              :model-value="isAllSelectedForCurrentGroup"
+              value=""
+              @update:model-value="(v: boolean) => selectAllEffects(v)"
+            ></FmCheckbox>
+
+            <div
+              v-for="pEffect in processedEffects"
+              :key="pEffect.id"
+              class="flex flex-col mb-2 ml-5"
+            >
+              <div class="flex flex-row">
+                <div class="flex flex-row items-center">
+                  <FmCheckbox
+                    :model-value="pEffect.isSelectedInCurrentGroup"
+                    value=""
+                    @update:model-value="(v) => selectEffect(pEffect, v)"
+                    :disabled="pEffect.isDisabled"
+                  />
+                  <div class="ml-2">
+                    <span>{{ pEffect.name }}</span>
+                    <template v-if="pEffect.showUsedInOtherGroupHint">
+                      <span class="text-sm text-fm-color-typo-secondary pl-1">
+                        ({{ t('order.discountRule.effectUsedInOtherGroup') }})
+                      </span>
+                    </template>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <template #side-sheet-footer>
+            <div class="flex gap-8 items-center justify-start">
+              <FmButton variant="primary" :label="t('order.confirm')" size="lg" @click="confirm" />
+              <FmButton
+                variant="secondary"
+                :label="t('order.cancel')"
+                size="lg"
+                @click="onCancel"
+              />
+            </div>
+          </template>
+        </FmSideSheet>
+      </div>
+      <FmCircularProgress size="xxl" v-else />
+    </div>
+    <!-- Restaurants Table Section -->
+    <div class="flex flex-col">
+      <FmPageHead
+        class="flex-grow"
+        :title="t('order.discountRule.restaurants')"
+        :description="t('order.discountRule.restaurantsDescription')"
+      />
+      <div class="ml-5">
+        <div class="flex justify-end items-center mb-3 gap-5">
+          <FmButton
+            variant="tertiary"
+            :label="t('order.discountRule.forceSync')"
+            @click="syncDiscountRule"
+            :disabled="isLoading"
+            prepend-icon="refresh"
+          />
+          <FmSearch v-model="searchKey" :placeholder="t('order.search')" />
+        </div>
+        <FmTable
+          :row-data="filteredRestaurants"
+          :column-defs="columns"
+          class="w-full"
+          :loading="isLoading"
+          :loading-text="t('order.discountRule.loadingRestaurants')"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed, watch, h } from 'vue'
+import { useCoreStore } from '@feedmepos/mf-common'
+import { useBusinessStore } from '@/stores/business'
+import { useI18n } from '@feedmepos/mf-common'
+import { effectApi } from '@/api/effects'
+import { useLoading } from '@/composables/loading'
+import useSearch from '@/composables/search'
+import { Pos } from '@feedmepos/core'
+import { FdoEffectGroup, FdtoDiscountRuleRes, F_FEATURE } from '@feedmepos/core/entity'
+import { useSnackbarFunctions } from '@/components/snackbar'
+import { type ColumnDef } from '@feedmepos/ui-library'
+import { components } from '@feedmepos/ui-library'
+
+interface Effect {
+  id: string
+  name: string
+}
+
+const { startAsyncCallWithErr, isLoading } = useLoading()
+const { t } = useI18n()
+const businessStore = useBusinessStore()
+const { currentBusiness } = useCoreStore()
+const { showSuccess, showError } = useSnackbarFunctions()
+const { searchKey, filter } = useSearch()
+
+const maxApplicableEffectsRules = [(val: number) => val >= 1 || 'Must be greater than 0']
+
+const canSave = computed(() =>
+  effectGroups.value.every((group) =>
+    maxApplicableEffectsRules.every((rule) => typeof rule(group.maxApplicableEffects) !== 'string')
+  )
+)
+
+const hasEffects = computed(() => effects.value.length > 0)
+const sideSheet = ref(false)
+const rawEffectGroups = ref<FdoEffectGroup[]>([])
+const effectGroups = ref<FdoEffectGroup[]>([])
+const restaurants = ref<{ id: string; name: string; lastUpdatedAt: string }[]>([])
+const filteredRestaurants = computed<{ id: string; name: string; lastUpdatedAt: string }[]>(() =>
+  restaurants.value.filter(({ id, name }) => filter([id, name]))
+)
+
+const lastUpdatedAt = ref<string | null>(null)
+const effects = ref<Effect[]>([])
+const selectedEffectGroup = ref<FdoEffectGroup | null>(null)
+const selectedEffectIndex = ref<number | null>(null)
+
+const pad = (n: number) => n.toString().padStart(2, '0')
+
+function formatDate(date?: string | null): string {
+  if (!date) return ''
+  try {
+    const dateObj = typeof date === 'string' ? new Date(date) : date
+    const y = dateObj.getFullYear()
+    const m = pad(dateObj.getMonth() + 1)
+    const d = pad(dateObj.getDate())
+    let hour = dateObj.getHours()
+    const min = pad(dateObj.getMinutes())
+    const ampm = hour >= 12 ? 'PM' : 'AM'
+    hour = hour % 12
+    hour = hour ? hour : 12
+    const h12 = pad(hour)
+    return `${y}-${m}-${d} ${h12}:${min} ${ampm}`
+  } catch (error) {
+    console.error('Error formatting date:', error)
+    return ''
+  }
+}
+
+const isLatest = (restaurantLastUpdatedAt?: string) =>
+  (lastUpdatedAt.value == null && restaurantLastUpdatedAt == null) ||
+  lastUpdatedAt.value === restaurantLastUpdatedAt
+
+const columns = computed<ColumnDef<{ name: string; lastUpdatedAt: string }>[]>(() => [
+  {
+    accessorKey: 'name',
+    header: () => t('order.discountRule.restaurantName'),
+    enableSorting: false
+  },
+  {
+    accessorKey: 'lastUpdatedAt',
+    header: () => t('order.discountRule.version'),
+    cell: ({ row }) =>
+      row.original.lastUpdatedAt ? h('span', formatDate(row.original.lastUpdatedAt)) : '-',
+    enableSorting: false
+  },
+  {
+    accessorKey: 'status',
+    header: () => t('order.discountRule.status'),
+    cell: ({ row }) =>
+      isLatest(row.original.lastUpdatedAt)
+        ? h(components.FmChip, { variant: 'success', label: t('order.discountRule.latest') })
+        : h(components.FmChip, { variant: 'critical', label: t('order.discountRule.outdated') }),
+    enableSorting: false
+  }
+])
+
+function isEffectInOtherGroups(effectId: string, currentGroupIndex: number | null): boolean {
+  if (currentGroupIndex === null) return false
+  return effectGroups.value.some((group, index) => {
+    if (index === currentGroupIndex) return false
+    return group.effectIds.includes(effectId)
+  })
+}
+
+const processedEffects = computed(() => {
+  if (!effects.value || !selectedEffectGroup.value) {
+    return []
+  }
+  return effects.value.map((effect) => {
+    const isSelectedInCurrentGroup =
+      selectedEffectGroup.value?.effectIds?.includes(effect.id) ?? false
+    const isInOtherGroups = isEffectInOtherGroups(effect.id, selectedEffectIndex.value)
+
+    return {
+      ...effect,
+      id: effect.id,
+      name: effect.name,
+      isSelectedInCurrentGroup,
+      isInOtherGroups,
+      isDisabled: isInOtherGroups && !isSelectedInCurrentGroup,
+      showUsedInOtherGroupHint: isInOtherGroups
+    }
+  })
+})
+
+const isAllSelectedForCurrentGroup = computed(() => {
+  if (!selectedEffectGroup.value || !effects.value.length || selectedEffectIndex.value === null)
+    return false
+
+  const selectableEffectsInCurrentGroup = effects.value.filter(
+    (effect: Effect) =>
+      selectedEffectGroup.value?.effectIds.includes(effect.id) ||
+      !isEffectInOtherGroups(effect.id, selectedEffectIndex.value)
+  )
+
+  if (!selectableEffectsInCurrentGroup.length && effects.value.length > 0) {
+    return false
+  }
+  if (!selectableEffectsInCurrentGroup.length && effects.value.length === 0) {
+    return false
+  }
+
+  return selectableEffectsInCurrentGroup.every((effect: Effect) =>
+    selectedEffectGroup.value?.effectIds.includes(effect.id)
+  )
+})
+
+function selectAllEffects(v: boolean) {
+  if (!selectedEffectGroup.value || selectedEffectIndex.value === null) return
+
+  if (v) {
+    const effectsToAdd = effects.value
+      .filter((effect: Effect) => !isEffectInOtherGroups(effect.id, selectedEffectIndex.value))
+      .map((effect: Effect) => effect.id)
+    const currentEffectsInGroup = selectedEffectGroup.value.effectIds || []
+    selectedEffectGroup.value.effectIds = [...new Set([...currentEffectsInGroup, ...effectsToAdd])]
+  } else {
+    selectedEffectGroup.value.effectIds = []
+  }
+}
+
+function selectEffect(effect: { id: string; isInOtherGroups: boolean }, isSelected: boolean) {
+  if (!selectedEffectGroup.value || selectedEffectIndex.value === null) return
+
+  const effectId = effect.id
+
+  if (isSelected) {
+    if (effect.isInOtherGroups) {
+      showError(t('order.discountRule.effectUsedInOtherGroup'))
+    }
+    if (!selectedEffectGroup.value.effectIds.includes(effectId)) {
+      selectedEffectGroup.value.effectIds.push(effectId)
+    }
+  } else {
+    selectedEffectGroup.value.effectIds = selectedEffectGroup.value.effectIds.filter(
+      (id) => id !== effectId
+    )
+  }
+}
+
+function toggleSideSheet(index: number) {
+  selectedEffectGroup.value = effectGroups.value[index] ? { ...effectGroups.value[index] } : null
+  selectedEffectIndex.value = index
+  sideSheet.value = true
+}
+
+function confirm() {
+  sideSheet.value = false
+  if (selectedEffectGroup.value && selectedEffectIndex.value != null) {
+    effectGroups.value[selectedEffectIndex.value] = selectedEffectGroup.value
+  }
+  selectedEffectGroup.value = null
+  selectedEffectIndex.value = null
+}
+
+function onCancel() {
+  sideSheet.value = false
+  selectedEffectGroup.value = null
+  selectedEffectIndex.value = null
+}
+
+function createRule() {
+  effectGroups.value = [...effectGroups.value, { maxApplicableEffects: 1, effectIds: [] }]
+}
+
+function deleteRule(index: number) {
+  const groups = [...effectGroups.value]
+  groups.splice(index, 1)
+  effectGroups.value = groups
+}
+
+async function _updateDiscountRule(effectGroups: FdoEffectGroup[]) {
+  await startAsyncCallWithErr(async () => {
+    const discountRule = await businessStore.updateDiscountRule({
+      effectGroups,
+      lastUpdatedAt: lastUpdatedAt.value || ''
+    })
+    applyDiscountRuleSettings(discountRule)
+    await initSetting()
+  })
+}
+
+async function updateDiscountRule() {
+  await _updateDiscountRule(effectGroups.value)
+  showSuccess(t('order.discountRule.updateSuccess'))
+}
+
+async function syncDiscountRule() {
+  await _updateDiscountRule(rawEffectGroups.value)
+  showSuccess(t('order.discountRule.syncSuccess'))
+}
+
+function applyDiscountRuleSettings(res: FdtoDiscountRuleRes) {
+  lastUpdatedAt.value = res.lastUpdatedAt || null
+  restaurants.value = res.restaurants.map((restaurant) => ({
+    ...restaurant,
+    lastUpdatedAt: restaurant.lastUpdatedAt || ''
+  }))
+  rawEffectGroups.value = res.discountRule?.effectGroups || []
+  effectGroups.value = res.discountRule?.effectGroups || []
+}
+
+async function initSetting() {
+  await startAsyncCallWithErr(async () => {
+    const discountRule = await businessStore.readDiscountRule()
+    applyDiscountRuleSettings(discountRule)
+    if (currentBusiness.value) {
+      effects.value = await effectApi.getEffects(currentBusiness.value._id)
+    }
+  })
+}
+
+onMounted(async () => {
+  await initSetting()
+})
+
+watch([() => currentBusiness.value], async () => {
+  await initSetting()
+})
+</script>

package/dist/KioskDevicesView.vue_vue_type_script_setup_true_lang-1r_DBAc-.js

@@ -1,207 +0,0 @@
-import { defineComponent as g, ref as D, resolveComponent as f, openBlock as i, createElementBlock as c, createElementVNode as a, toDisplayString as d, unref as m, createVNode as v, computed as B, withCtx as F, Fragment as y, renderList as h, createCommentVNode as C, createBlock as M } from "vue";
-import { useDialog as O, useSnackbar as q } from "@feedmepos/ui-library";
-import { useI18n as I } from "@feedmepos/mf-common";
-import { defineStore as N } from "pinia";
-import { r as w, g as K, D as T } from "./dayjs.min-BHDLv42p.js";
-import "./queue.do-y-ubeoKZ.js";
-const U = /* @__PURE__ */ g({
-  __name: "KioskUnbindConfirm",
-  props: {
-    machineId: {}
-  },
-  emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const { t: n } = I(), l = t, o = D("");
-    function s(r) {
-      l("update:modelValue", r);
-    }
-    return (r, x) => {
-      const _ = f("FmTextField");
-      return i(), c("div", null, [
-        a("span", null, d(m(n)("order.unbindKioskDeviceWarning", { machineId: r.machineId })), 1),
-        v(_, {
-          "model-value": o.value,
-          "onUpdate:modelValue": s,
-          placeholder: r.machineId
-        }, null, 8, ["model-value", "placeholder"])
-      ]);
-    };
-  }
-});
-async function Y() {
-  const e = await w().get("/kiosk/otp");
-  return K(e);
-}
-async function j() {
-  const e = await w().get("/kiosk/devices");
-  return K(e);
-}
-async function L(e) {
-  await w().delete(`/kiosk/unbind/${e}`);
-}
-const k = {
-  requestOtp: Y,
-  getDevices: j,
-  unbind: L
-}, W = (e) => ({
-  name: e.name ?? "N/A",
-  machineId: e.machineId,
-  config: {
-    scannerInfo: e.scannerInfo ?? void 0,
-    printerInfo: e.printerInfo ?? void 0,
-    terminalInfo: e.terminalInfo ?? void 0
-  },
-  activatedAt: H(e.token)
-});
-function H(e) {
-  const t = e.substring(0, 8), n = parseInt(t, 16);
-  return new Date(n * 1e3);
-}
-const P = {
-  toMfKioskDevice: W
-}, z = N("kiosk", () => {
-  const e = D({
-    otp: "",
-    devices: []
-  });
-  async function t() {
-    const o = await k.requestOtp();
-    e.value.otp = o.otp;
-  }
-  async function n() {
-    const o = await k.getDevices();
-    e.value.devices = o.map((s) => P.toMfKioskDevice(s));
-  }
-  async function l(o) {
-    await k.unbind(o), await n();
-  }
-  return {
-    state: e.value,
-    requestOtp: t,
-    getDevices: n,
-    unbind: l
-  };
-}), E = { class: "border fm-corner-radius-lg flex justify-between pr-[1rem] w-11/12" }, G = { class: "py-[1rem] flex flex-col gap-6" }, J = { class: "fm-typo-en-title-sm-600" }, Q = { class: "w-full border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-2" }, R = {
-  key: 0,
-  class: "fm-typo-en-title-sm-600"
-}, X = { class: "flex flex-col gap-1" }, Z = { class: "fm-typo-en-body-lg-400 text-fm-color-typo-secondary" }, ee = { class: "fm-typo-en-body-lg-600 block" }, te = /* @__PURE__ */ g({
-  __name: "KioskDeviceCard",
-  props: {
-    device: {}
-  },
-  setup(e) {
-    const { t } = I(), n = O(), l = q(), o = z(), s = e, r = D(""), x = B(() => Object.entries(s.device.config));
-    function _() {
-      r.value = "", n.open({
-        title: t("order.unbindKioskDevice"),
-        contentComponent: U,
-        contentComponentProps: {
-          machineId: s.device.machineId,
-          "onUpdate:modelValue": (p) => {
-            r.value = p;
-          }
-        },
-        dismissAway: !1,
-        primaryActions: {
-          text: t("order.unbind"),
-          variant: "destructive",
-          close: !1
-        },
-        secondaryActions: {
-          text: t("order.cancel"),
-          variant: "tertiary",
-          close: !0
-        }
-      }).onPrimary(async () => {
-        r.value == s.device.machineId ? (await V(), l.open({
-          type: "success",
-          message: t("order.unbindSuccess"),
-          position: "bottom"
-        }), n.close()) : l.open({
-          type: "warning",
-          message: t("order.unbindWarning"),
-          position: "bottom"
-        });
-      });
-    }
-    async function V() {
-      await o.unbind(s.device.machineId);
-    }
-    return (p, ce) => {
-      const S = f("FmListItem"), $ = f("FmSideSheet"), A = f("FmButton");
-      return i(), c("div", E, [
-        v($, {
-          header: m(t)("order.deviceDetails"),
-          "dismiss-away": "",
-          class: "w-full",
-          maxWidth: 700
-        }, {
-          "side-sheet-button": F(() => [
-            v(S, {
-              class: "flex-1",
-              label: p.device.name,
-              sublabel: `${m(t)("order.activatedDate")}: ${m(T)(p.device.activatedAt).format("DD MMM YYYY HH:mm")}`
-            }, null, 8, ["label", "sublabel"])
-          ]),
-          default: F(() => [
-            a("div", G, [
-              a("span", J, d(p.device.name), 1),
-              (i(!0), c(y, null, h(x.value.filter((u) => u[1]), (u) => (i(), c("div", Q, [
-                u[1] ? (i(), c("span", R, d(u[0]), 1)) : C("", !0),
-                u[1] ? (i(!0), c(y, { key: 1 }, h(Object.entries(u[1]), (b) => (i(), c("div", X, [
-                  a("span", Z, d(b[0]), 1),
-                  a("span", ee, d(b[1] == "" ? "-" : b[1]), 1)
-                ]))), 256)) : C("", !0)
-              ]))), 256))
-            ])
-          ]),
-          _: 1
-        }, 8, ["header"]),
-        v(A, {
-          variant: "plain",
-          "append-icon": "link_off",
-          class: "text-fm-color-system-error-300 align-middle my-auto",
-          onClick: _
-        })
-      ]);
-    };
-  }
-}), ne = { class: "flex flex-col gap-2" }, oe = { class: "flex flex-col gap-2" }, se = { class: "fm-typo-en-title-sm-600 block" }, ie = { class: "fm-typo-en-body-md-400 block" }, ae = { class: "flex flex-col gap-6" }, fe = /* @__PURE__ */ g({
-  __name: "KioskDevicesView",
-  props: {
-    devices: {},
-    requestOtp: { type: Function }
-  },
-  setup(e) {
-    const { t } = I();
-    return (n, l) => {
-      const o = f("FmButton");
-      return i(), c("div", null, [
-        a("div", ne, [
-          a("div", oe, [
-            a("span", se, d(m(t)("order.kioskDisplay")), 1),
-            a("span", ie, d(m(t)("order.kioskDisplayDescription")), 1)
-          ]),
-          a("div", ae, [
-            (i(!0), c(y, null, h(n.devices, (s) => (i(), M(te, {
-              key: s.machineId,
-              device: s
-            }, null, 8, ["device"]))), 128)),
-            v(o, {
-              variant: "plain",
-              class: "w-[10rem] border border-fm-color-primary fm-corner-radius-lg",
-              label: m(t)("order.bindDevice"),
-              size: "md",
-              "prepend-icon": "link",
-              onClick: n.requestOtp
-            }, null, 8, ["label", "onClick"])
-          ])
-        ])
-      ]);
-    };
-  }
-});
-export {
-  fe as _,
-  z as u
-};