@feedmepos/mf-order-setting 0.0.2 → 0.0.6

package/src/views/order-settings/servicecharge/ServiceChargeRule.vue

@@ -0,0 +1,453 @@
+<script setup lang="ts">
+import { sentenceCase } from 'change-case'
+import { type PropType, computed, onMounted, ref } from 'vue'
+import type { CategorizedItem } from '@/helpers/menu'
+import RateInput from './RateInput.vue'
+import type { FdoServiceChargeRule, FdoTable } from '@feedmepos/core/entity'
+import type { AdjustmentAmount } from '@/helpers/number'
+import { F_SERVICE_CHARGE_ORDER_TYPE } from '@feedmepos/core/entity'
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<FdoServiceChargeRule>,
+    required: true
+  },
+  inclusive: {
+    type: Boolean,
+    required: true
+  },
+  chargeBeforeDiscount: {
+    type: Boolean,
+    required: true
+  },
+  items: {
+    type: Array as PropType<CategorizedItem[]>,
+    required: true
+  },
+  tables: {
+    type: Array as PropType<FdoTable[]>,
+    required: true
+  },
+  isLoadingTable: {
+    type: Boolean,
+    required: true
+  },
+  isLoadingMenu: {
+    type: Boolean,
+    required: true
+  }
+})
+
+const emits = defineEmits<{
+  (event: 'update:model-value', v: FdoServiceChargeRule): void
+  (event: 'delete'): void
+}>()
+
+const itemSelected = computed(() => {
+  if (props.isLoadingMenu) return 'Loading menu'
+  if (!props.items.length) return 'No available item'
+  const items = props.modelValue.condition.items
+  if (!items) return 'All'
+  return `${items.length} Item`
+})
+
+const tableSelected = computed(() => {
+  if (props.isLoadingTable) return 'Loading table'
+  if (!props.tables.length) return 'No available table'
+  const tables = props.modelValue.condition.tables
+  if (!tables) return 'All'
+  return `${tables.length} Table`
+})
+
+enum ServiceChargeOrderType {
+  dineIn = 'DINE_IN',
+  takeaway = 'TAKEAWAY',
+  inHouseDelivery = 'IN_HOUSE_DELIVERY',
+  deliveryCompany = 'DELIVERY_COMPANY',
+  pickup = 'PICKUP'
+}
+
+const diningOptions = computed(() => {
+  return Object.values(ServiceChargeOrderType).map((v) => ({
+    label: sentenceCase(v),
+    value: v
+  }))
+})
+
+const diningValue = computed(() => {
+  if (!props.modelValue.condition.orderType) return diningOptions.value.map((v) => v.value)
+  return props.modelValue.condition.orderType
+})
+
+let initialValue = props.modelValue.condition.items
+if (!initialValue) {
+  initialValue = props.items.reduce<string[]>((pv, category) => {
+    pv = [...pv, ...category.items.map((item) => item._id)]
+    return pv
+  }, [])
+}
+
+let initialValueTable = props.modelValue.condition.tables || props.tables.map((table) => table.name)
+if (!initialValueTable) {
+  initialValueTable = props.tables.map((table) => table.name)
+}
+
+const itemValue = ref<string[]>(initialValue)
+const tableValue = ref<string[]>(initialValueTable)
+
+function updateItems() {
+  sideSheetItem.value = false
+  emits('update:model-value', {
+    ...props.modelValue,
+    condition: {
+      ...props.modelValue.condition,
+      items: itemValue.value
+    }
+  })
+}
+
+function updateTable() {
+  sideSheetTable.value = false
+  emits('update:model-value', {
+    ...props.modelValue,
+    condition: {
+      ...props.modelValue.condition,
+      tables: tableValue.value
+    }
+  })
+}
+
+function modifyItems(items: string[], parentId: string) {
+  itemValue.value = items
+  const parentItem = props.items.find((item) => item.id === parentId)
+  if (parentItem) {
+    const parentSelected = parentItem.items.every((subItem) =>
+      itemValue.value.includes(subItem._id)
+    )
+    selectedCategoryItems.value[parentId] = parentSelected
+  }
+}
+
+function updateRate(v: AdjustmentAmount) {
+  emits('update:model-value', {
+    ...props.modelValue,
+    rate: v
+  })
+}
+
+function updateDiningOption(options: F_SERVICE_CHARGE_ORDER_TYPE[]) {
+  emits('update:model-value', {
+    ...props.modelValue,
+    condition: {
+      ...props.modelValue.condition,
+      orderType: options.length === diningOptions.value.length ? undefined : options
+    }
+  })
+}
+
+const sideSheetItem = ref<boolean>(false)
+const sideSheetTable = ref<boolean>(false)
+
+function toggleSideSheet() {
+  sideSheetItem.value = true
+}
+function toggleSideSheetTable() {
+  sideSheetTable.value = true
+}
+
+const parent = ref<boolean>(false)
+const nestedVal = ref<F_SERVICE_CHARGE_ORDER_TYPE[]>(diningValue.value)
+
+const checkboxChildren = computed(() => diningOptions.value)
+
+function handleParentUpdate(ev: boolean) {
+  if (ev) {
+    nestedVal.value = checkboxChildren.value.map((item) => item.value)
+  } else {
+    nestedVal.value = []
+  }
+  parent.value = ev
+  updateDiningOption(nestedVal.value)
+}
+
+function handleChildUpdate(ev: F_SERVICE_CHARGE_ORDER_TYPE[]) {
+  nestedVal.value = ev
+  parent.value = ev.length === checkboxChildren.value.length
+  updateDiningOption(ev)
+}
+
+const parentTable = ref<boolean>(false)
+const nestedValTable = ref<string[]>(initialValueTable)
+
+const checkboxChildrenTable = computed(() => {
+  const tables = props.tables.map((table) => table.name)
+  return Array.isArray(tables) ? tables : []
+})
+
+function handleParentUpdateTable(ev: boolean) {
+  if (Array.isArray(checkboxChildrenTable.value)) {
+    ev ? (nestedValTable.value = checkboxChildrenTable.value) : (nestedValTable.value = [])
+    parentTable.value = ev
+    tableValue.value = nestedValTable.value
+  }
+}
+
+function handleChildUpdateTable(ev: string[]) {
+  nestedValTable.value = Array.isArray(ev) ? ev : []
+  parentTable.value = nestedValTable.value.length === checkboxChildrenTable.value.length
+  tableValue.value = ev
+}
+
+onMounted(() => {
+  parent.value = nestedVal.value.length === checkboxChildren.value.length
+
+  if (Array.isArray(nestedValTable.value) && Array.isArray(checkboxChildrenTable.value)) {
+    parentTable.value = nestedValTable.value.length === checkboxChildrenTable.value.length
+  }
+
+  if (props.items.length > 0) {
+    selectedCategoryItems.value = props.items.reduce(
+      (acc, item) => {
+        const allSubItemsSelected = item.items.every((subItem) =>
+          itemValue.value.includes(subItem._id)
+        )
+        acc[item.id ?? ''] = allSubItemsSelected
+        return acc
+      },
+      {} as Record<string, boolean>
+    )
+  }
+
+  initializeMenuState(filteredItem.value);
+
+})
+
+const selectedCategoryItems = ref<Record<string, boolean>>({})
+
+function handleCategorySelection(categoryId: string, isSelected: boolean) {
+  selectedCategoryItems.value = {
+    ...selectedCategoryItems.value,
+    [categoryId]: isSelected
+  }
+  if (isSelected) {
+    itemValue.value = [
+      ...itemValue.value,
+      ...(props.items.find((item) => item.id === categoryId)?.items.map((subItem) => subItem._id) ||
+        [])
+    ]
+  } else {
+    itemValue.value = itemValue.value.filter(
+      (id) =>
+        !props.items
+          .find((item) => item.id === categoryId)
+          ?.items.map((subItem) => subItem._id)
+          .includes(id)
+    )
+  }
+}
+
+function isIndeterminate(parentId: string): boolean {
+  const parentItem = props.items.find((item) => item.id === parentId)
+  if (!parentItem) return false
+
+  const selectedSubItemsCount = parentItem.items.filter((subItem) =>
+    itemValue.value.includes(subItem._id)
+  ).length
+  return selectedSubItemsCount > 0 && selectedSubItemsCount < parentItem.items.length
+}
+
+const searchValueTable = ref('')
+
+const filteredTable = computed(() =>
+  props.tables.filter((e) =>
+    searchValueTable.value
+      ? e.name.toLocaleLowerCase().includes(searchValueTable.value.toLocaleLowerCase())
+      : true
+  )
+)
+
+const searchValueItem = ref('')
+
+const filteredItem = computed(() => {
+  return props.items
+    .map((item) => {
+      const filteredSubItems = item.items.filter((subItem) =>
+        searchValueItem.value
+          ? subItem.name.toLowerCase().includes(searchValueItem.value.toLowerCase())
+          : true
+      )
+
+      return {
+        ...item,
+        items: filteredSubItems
+      }
+    })
+    .filter((item) => item.items.length > 0)
+})
+
+const showTable = ref(true)
+function toggleShowTable() {
+  showTable.value = !showTable.value
+}
+
+const showMenuState = ref<Record<string, boolean>>({})
+
+function toggleShowMenu(itemId: number) {
+  showMenuState.value[itemId] = !showMenuState.value[itemId]
+}
+
+function initializeMenuState(items: any[]) {
+  showMenuState.value = items.reduce((acc, _, index) => {
+    acc[index] = true;
+    return acc;
+  }, {} as Record<number, boolean>);
+}
+
+</script>
+
+<template>
+  <div class="flex items-center gap-7 mb-3">
+    <RateInput :model-value="modelValue.rate" @update:model-value="updateRate" />
+    <FmButton append-icon="delete" variant="tertiary" @click="emits('delete')" />
+  </div>
+  <div class="flex items-center justify-between">
+    <div class="font-semibold mb-3">Select item</div>
+    <FmButton variant="plain" :label="itemSelected" size="lg" @click="toggleSideSheet" />
+  </div>
+
+  <FmSideSheet header="Select item" :maxWidth="600" dismiss-away v-model="sideSheetItem">
+    <div>
+      <div class="text-fm-color-typo-secondary mt-5 mb-5 flex flex-row">
+        {{ props.modelValue.condition.items?.length ?? initialValue?.length }} product(s) selected
+        <FmSearch v-model:model-value="searchValueItem" class="ml-auto" placeholder="Search" />
+      </div>
+
+      <div v-for="(item, index) in filteredItem" :key="index" class="flex flex-col mb-6">
+        <FmCard variant="outlined" class="p-5">
+          <div class="fm-corner-radius-lg flex flex-col">
+            <div class="flex flex-row">
+              <div class="flex flex-row">
+                <FmCheckbox
+                  :model-value="selectedCategoryItems[item.id ?? '']"
+                  value=""
+                  :indeterminate="isIndeterminate(item.id ?? '')"
+                  @update:model-value="handleCategorySelection(item.id ?? '', $event)"
+                />
+                <div class="font-bold ml-2">{{ item.name }}</div>
+              </div>
+              <FmButton
+                v-if="showMenuState[index]"
+                icon="expand_less"
+                variant="tertiary"
+                class="ml-auto"
+                @click="toggleShowMenu(index)"
+              />
+              <FmButton
+                v-if="!showMenuState[index]"
+                icon="expand_more"
+                variant="tertiary"
+                class="ml-auto"
+                @click="toggleShowMenu(index)"
+              />
+            </div>
+            <div class="flex flex-col pl-6" v-if="showMenuState[index]">
+              <FmCheckbox
+                v-for="(subItem, subIndex) in item.items"
+                :key="subIndex"
+                :model-value="itemValue"
+                :label="subItem.name"
+                :value="subItem._id"
+                @update:model-value="(values: string[]) => modifyItems(values, item.id ?? '')"
+              />
+            </div>
+          </div>
+        </FmCard>
+      </div>
+    </div>
+    <template #side-sheet-footer>
+      <div class="flex gap-8 items-center justify-start">
+        <FmButton variant="primary" label="Confirm" size="lg" @click="updateItems" />
+        <FmButton variant="secondary" label="Cancel" size="lg" @click="sideSheetItem = false" />
+      </div>
+    </template>
+  </FmSideSheet>
+
+  <div class="flex items-center justify-between">
+    <div class="font-semibold mb-3">Select table</div>
+    <FmButton variant="plain" :label="tableSelected" size="lg" @click="toggleSideSheetTable" />
+  </div>
+  <FmSideSheet header="Select table" :maxWidth="600" dismiss-away v-model="sideSheetTable">
+    <div class="text-fm-color-typo-secondary mt-5 mb-5 flex flex-row">
+      {{ props.modelValue.condition.tables?.length ?? props.tables.length }} table(s) selected
+      <FmSearch v-model:model-value="searchValueTable" class="ml-auto" placeholder="Search" />
+    </div>
+
+    <FmCard variant="outlined" class="p-5">
+      <div class="flex flex-row">
+        <FmCheckbox
+          :value="parentTable"
+          :model-value="parentTable"
+          label="All"
+          :indeterminate="
+            nestedValTable.length > 0 && nestedValTable.length < checkboxChildrenTable.length
+          "
+          @update:model-value="handleParentUpdateTable"
+        />
+        <FmButton
+          v-if="showTable"
+          icon="expand_less"
+          variant="tertiary"
+          @click="toggleShowTable"
+          class="ml-auto"
+        />
+        <FmButton
+          v-if="!showTable"
+          icon="expand_more"
+          variant="tertiary"
+          @click="toggleShowTable"
+          class="ml-auto"
+        />
+      </div>
+      <div class="fm-corner-radius-lg flex flex-col">
+        <div
+          v-for="(item, index) in filteredTable"
+          :key="index"
+          class="flex flex-col pl-6"
+          v-if="showTable"
+        >
+          <FmCheckbox
+            :model-value="nestedValTable"
+            :label="item.name"
+            :value="item.name"
+            @update:model-value="handleChildUpdateTable"
+          />
+        </div>
+      </div>
+    </FmCard>
+    <template #side-sheet-footer>
+      <div class="flex gap-8 items-center justify-start">
+        <FmButton variant="primary" label="Confirm" size="lg" @click="updateTable" />
+        <FmButton variant="secondary" label="Cancel" size="lg" @click="sideSheetTable = false" />
+      </div>
+    </template>
+  </FmSideSheet>
+
+  <div>Apply for</div>
+  <div class="flex flex-col">
+    <FmCheckbox
+      v-model="parent"
+      label="All"
+      value="all"
+      :indeterminate="nestedVal.length > 0 && nestedVal.length < diningOptions.length"
+      @update:model-value="handleParentUpdate"
+    />
+    <FmCheckbox
+      v-for="(item, i) in diningOptions"
+      :key="i"
+      v-model="nestedVal"
+      :label="item.label"
+      :value="item.value"
+      @update:model-value="handleChildUpdate"
+    />
+  </div>
+</template>

package/src/views/order-settings/servicecharge/ServiceChargeSetting.vue

@@ -0,0 +1,233 @@
+<template>
+  <RestaurantSelector :model-value="currentRestaurant?._id ?? undefined"/>
+
+  <div class="p-[1.5rem] flex flex-col gap-5">
+    <FmCard variant="outlined" class="p-5 w-2/3">
+    <div class="flex-grow fm-typo-en-title-sm-800 mb-3">Enable Service Charge</div>
+    <FmSwitch
+      v-model="data.active"
+      value="first"
+      sublabel="Make your own rules to omit change based on different conditions such as restaurant, dining option, items, slot, etc."
+      label="Service charge"
+      label-placement="right"
+      @update:model-value=""
+      :disabled="!canUseServiceCharge" 
+    />
+    <div v-if="!canUseServiceCharge" class="fm-typo-en-body-md-400 text-fm-color-typo-error ml-14">
+      * Service Charge required POS version 4.0.0 or higher.
+    </div>
+
+    <div class="flex flex-col gap-5 m-5" v-if="data.active">
+      <FmRadioGroup
+        :model-value="chargeTime"
+        label="Charge when"
+        @update:model-value="updateChargeWhen"
+      >
+        <FmRadio value="beforeDiscount" label="Before bill discount" />
+        <FmRadio value="afterDiscount" label="After bill discount" />
+      </FmRadioGroup>
+      <RateInput :model-value="data.rate" @update:model-value="handleUpdateRate" />
+
+      <FmRadioGroup :model-value="chargeValue" label="Charge" @update:model-value="updateInclusive">
+        <FmRadio value="exclusive" label="Exclusive" />
+        <FmRadio value="inclusive" label="Inclusive" />
+      </FmRadioGroup>
+    </div>
+  </FmCard>
+  </div>
+  <div v-if="data.active">
+    <div class="flex flex-col gap-5 m-5">
+      <div class="flex-grow fm-typo-en-title-sm-800 mb-3 mt-3">Custom Service Charge</div>
+      <div class="flex flex-wrap gap-5">
+        <div v-for="(rule, index) in data.rules" :key="index">
+          <FmCard variant="outlined" class="w-full">
+            <FmCardSection>
+              <ServiceChargeRule
+                :model-value="rule"
+                :inclusive="data.inclusive"
+                :charge-before-discount="isBeforeDiscountBoolean"
+                :items="menuStore.categorizedItems"
+                :tables="tableSettingStore.tables"
+                :is-loading-menu="isLoadingMenu"
+                :is-loading-table="isLoadingTables"
+                @delete="deleteRule(index)"
+                @update:model-value="(v: FdoServiceChargeRule) => updateRule(index, v)"
+              />
+            </FmCardSection>
+          </FmCard>
+        </div>
+
+        <div class="w-1/5">
+          <FmCard variant="outlined" class="w-full border-dashed flex items-center justify-center h-full">
+            <FmCardSection class="flex items-center justify-center w-full">
+              <FmButton
+                variant="plain"
+                label="Add service charge"
+                icon="add"
+                @click="createRule"
+                class="border fm-corner-radius-lg border-fm-color-primary"
+              />
+            </FmCardSection>
+          </FmCard>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="fm-corner-radius-lg flex flex-col gap-5 m-5">
+    <FmButton
+      variant="primary"
+      label="Save Setting"
+      class="mr-auto"
+      @click="updateServiceChargeSetting"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { RestaurantSettingDoc } from '@/api/restaurant-setting'
+import { useLoading } from '@/composables/loading'
+import { useMenuStore } from '@/stores/menu/menu'
+import { useRestaurantStore } from '@/stores/restaurant'
+import {
+  F_FEATURE,
+  type FdoServiceChargeRule,
+  type FdoServiceChargeSetting
+} from '@feedmepos/core/entity'
+import { useCoreStore } from '@feedmepos/mf-common'
+import { computed, onMounted, ref, watch } from 'vue'
+import RestaurantSelector from '../components/RestaurantSelector.vue'
+import RateInput from './RateInput.vue'
+import { percentToAdjustment, type AdjustmentAmount } from '@/helpers/number'
+import { useTableSettingStore } from '@/stores/table-settings'
+import ServiceChargeRule from './ServiceChargeRule.vue'
+import { Pos } from '@feedmepos/core'
+
+const isLoadingMenu = ref(false)
+const isBeforeDiscountBoolean = computed(() => {
+  return Boolean(data.value.beforeDiscount)
+})
+function handleUpdateRate(newRate: AdjustmentAmount) {
+  data.value.rate = newRate
+}
+
+function initData(): FdoServiceChargeSetting {
+  return {
+    active: false,
+    inclusive: false,
+    rate: percentToAdjustment(0),
+    rules: [],
+    beforeDiscount: false
+  }
+}
+
+const { currentRestaurant } = useCoreStore()
+
+const data = ref<FdoServiceChargeSetting>(initData())
+const restaurantStore = useRestaurantStore()
+const canUseServiceCharge = computed(() => {
+  if (!currentRestaurant) return false
+  const res = Pos.canUse({
+    feature: F_FEATURE.enum.taxAndServiceChargeV4,
+    posVersion: currentRestaurant.value?.posVersion ?? ''
+  })
+  return res === true
+})
+
+const beforeDiscountKey = 'beforeDiscount'
+const afterDiscountKey = 'afterDiscount'
+const inclusiveKey = 'inclusive'
+const exclusiveKey = 'exclusive'
+
+const chargeTime = computed(() => {
+  return data.value.beforeDiscount ? beforeDiscountKey : afterDiscountKey
+})
+
+const chargeValue = computed(() => {
+  return data.value.inclusive ? inclusiveKey : exclusiveKey
+})
+
+function updateChargeWhen(key: string) {
+  data.value.beforeDiscount = key === beforeDiscountKey
+  if (data.value.beforeDiscount) updateInclusive(exclusiveKey)
+}
+
+function updateInclusive(inclusiveValue: string) {
+  let inclusive = false
+  if (inclusiveValue === inclusiveKey) {
+    inclusive = true
+  }
+
+  data.value.inclusive = inclusive
+  data.value.rules = data.value.rules.map((rule) => ({
+    ...rule,
+    inclusive: inclusive
+  }))
+}
+
+function createRule() {
+  data.value.rules.push({
+    rate: data.value.rate,
+    inclusive: data.value.inclusive,
+    condition: {}
+  })
+}
+
+function updateRule(index: number, rule: FdoServiceChargeRule) {
+  data.value.rules[index] = rule
+}
+
+function deleteRule(index: number) {
+  data.value.rules.splice(index, 1)
+}
+
+import { useSnackbarFunctions } from '@/components/snackbar'
+const { showSuccess } = useSnackbarFunctions()
+
+const menuStore = useMenuStore()
+const { startAsyncCall } = useLoading()
+async function updateServiceChargeSetting() {
+  await startAsyncCall(async () => {
+    await restaurantStore.updateServiceCharge(data.value)
+    showSuccess('Service charge setting updated. ')
+  })
+}
+
+
+function initialize(restaurantSetting?: RestaurantSettingDoc) {
+  if (restaurantSetting?.serviceChargeSetting) {
+    const cloned = restaurantSetting.serviceChargeSetting
+    data.value = {
+      ...cloned,
+      beforeDiscount: cloned.beforeDiscount === undefined ? true : cloned.beforeDiscount
+    }
+  } else {
+    data.value = initData()
+  }
+}
+
+const isLoadingTables = ref(false)
+const tableSettingStore = useTableSettingStore()
+
+onMounted(async () => {
+  const resId = currentRestaurant.value?._id
+  if (resId) {
+    await restaurantStore.readRestaurantSetting(resId)
+    const restaurantSetting = restaurantStore.restaurantSettings[resId]
+    initialize(restaurantSetting)
+    await startAsyncCall(tableSettingStore.readTables)
+  }
+})
+
+watch(
+  () => currentRestaurant.value,
+  async (newValue) => {
+    if (newValue) {
+      const restaurantSetting = restaurantStore.restaurantSettings[newValue._id]
+      initialize(restaurantSetting)
+      await startAsyncCall(tableSettingStore.readTables)
+    }
+  },
+  { immediate: true }
+)
+</script>