@feedmepos/mf-order-setting 0.0.27 → 0.0.29

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

@@ -0,0 +1,452 @@
+<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>
+            <FmSearch v-model="sideSheetSearch" :placeholder="t('order.search')" class="mb-4" />
+            <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 filteredProcessedEffects"
+              :key="pEffect.id"
+              class="flex flex-col mb-2 ml-5 cursor-pointer"
+            >
+              <div class="flex flex-row">
+                <div
+                  class="flex flex-row items-center"
+                  @click="selectEffect(pEffect, !pEffect.isSelectedInCurrentGroup)"
+                >
+                  <FmCheckbox
+                    :model-value="pEffect.isSelectedInCurrentGroup"
+                    value=""
+                    @update:model-value="(v) => selectEffect(pEffect, v)"
+                    :disabled="pEffect.isDisabled"
+                  />
+                  <div class="ml-2 flex flex-wrap gap-2 items-center">
+                    <span
+                      class="fm-corner-radius-md px-4 py-[2px] fm-typo-en-body-md-600 text-fm-color-typo-neutral bg-fm-color-neutral-gray-100 max-w-full"
+                    >
+                      {{ pEffect.type }}
+                    </span>
+                    <span>{{ pEffect.name }}</span>
+                    <template v-if="pEffect.showUsedInOtherGroupHint">
+                      <span class="text-sm text-fm-color-typo-secondary">
+                        ({{ 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
+  type: string
+  isSelectedInCurrentGroup: boolean
+  isInOtherGroups: boolean
+  isDisabled: boolean
+  showUsedInOtherGroupHint: boolean
+}
+
+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 sideSheetSearch = ref('')
+
+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)
+    const isPromotion = effect.id.startsWith('promotion_')
+
+    return {
+      ...effect,
+      id: effect.id,
+      name: effect.name,
+      type: isPromotion ? t('order.discountRule.promotion') : t('order.discountRule.voucher'),
+      isSelectedInCurrentGroup,
+      isInOtherGroups,
+      isDisabled: isInOtherGroups && !isSelectedInCurrentGroup,
+      showUsedInOtherGroupHint: isInOtherGroups
+    }
+  })
+})
+
+const filteredProcessedEffects = computed(() => {
+  const search = sideSheetSearch.value.trim().toLowerCase()
+  if (!search) return processedEffects.value
+  return processedEffects.value.filter(
+    (effect) =>
+      effect.name.toLowerCase().includes(search) || effect.type.toLowerCase().includes(search)
+  )
+})
+
+const isAllSelectedForCurrentGroup = computed(() => {
+  if (
+    !selectedEffectGroup.value ||
+    !filteredProcessedEffects.value.length ||
+    selectedEffectIndex.value === null
+  )
+    return false
+
+  return filteredProcessedEffects.value.every(
+    (effect: Effect) => effect.isSelectedInCurrentGroup || effect.isDisabled
+  )
+})
+
+function selectAllEffects(v: boolean) {
+  if (!selectedEffectGroup.value || selectedEffectIndex.value === null) return
+
+  if (v) {
+    const effectsToAdd = filteredProcessedEffects.value
+      .filter((effect: Effect) => !effect.isInOtherGroups)
+      .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) {
+  sideSheetSearch.value = ''
+  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>