@feedmepos/mf-order-setting 0.0.72-prod → 0.0.73-dev

package/src/views/order-settings/delivery/integrated-delivery/TngSetting.vue

@@ -0,0 +1,749 @@
+<script setup lang="ts">
+import { computed, type PropType, reactive, ref } from 'vue'
+import IntegratedDelivery from './IntegratedDelivery.vue'
+import RateInput from '../../servicecharge/RateInput.vue'
+import { clone } from '@/helpers/object'
+import {
+  FdoTngSettings,
+  TNG_FULFILLMENT_KEYS,
+  type TNG_FULFILLMENT_KEY,
+  type TNG_PAYMENT_METHOD
+} from '@entity'
+import { useI18n, useCoreStore } from '@feedmepos/mf-common'
+import { FdoLinkedDelivery } from '@feedmepos/core/entity'
+import { useLoading } from '@/composables/loading'
+import { remoteOrderApi } from '@/api/remoteOrder'
+import { useSnackbarFunctions } from '@/components/snackbar'
+import type { DeliveryCompany } from '../delivery'
+import type { IntegratedDeliverySettingData } from './IntegratedDelivery.vue'
+import type { CategorizedItem } from '@/helpers/menu'
+import type { AdjustmentAmount } from '@/helpers/number'
+
+export interface TngDeliveryData {
+  manual: FdoLinkedDelivery | null
+  integrated: FdoTngSettings
+}
+
+type FulfillmentType = TNG_FULFILLMENT_KEY
+type ServiceChargeDraft = { items: string[] | null | undefined; rate: AdjustmentAmount }
+type FulfillmentDraft = {
+  catalogId: string | null
+  paymentMethods: string[]
+  serviceCharge: ServiceChargeDraft[]
+}
+type SelectedCategories = Record<string, { isAllSelected: boolean; isSomeSelected: boolean }>
+
+const props = defineProps({
+  initialValue: {
+    type: Object as PropType<TngDeliveryData>,
+    required: true
+  },
+  company: {
+    type: Object as PropType<DeliveryCompany>,
+    required: true
+  },
+  canUseAutoDeliveryIntegration: {
+    type: [String, Boolean],
+    required: true
+  },
+  categorizedItems: {
+    type: Array as PropType<CategorizedItem[]>,
+    required: true
+  }
+})
+const emits = defineEmits<{
+  (e: 'update:model-value', payload: { manual: any; auto: any }): void
+  (e: 'validation-result', message: string | null): void
+}>()
+
+const { t } = useI18n()
+const { currentRestaurant } = useCoreStore()
+const { startAsyncCallWithErr } = useLoading()
+const { showError, showSuccess } = useSnackbarFunctions()
+
+const data = reactive(clone(props.initialValue))
+
+const paymentMethodOptions = [
+  { label: 'TNGD', value: 'TNGD' },
+  { label: 'Cashier', value: 'CASHIER' }
+]
+const defaultPaymentMethod = 'TNGD'
+const defaultPaymentMethods = [defaultPaymentMethod]
+
+const paymentMethodWarnings = reactive<Record<FulfillmentType, string>>({
+  dineIn: '',
+  pickup: '',
+  reservation: ''
+})
+const fulfillmentModeUiKeys = reactive<Record<FulfillmentType, number>>({
+  dineIn: 0,
+  pickup: 0,
+  reservation: 0
+})
+const paymentMethodUiKeys = reactive<Record<FulfillmentType, number>>({
+  dineIn: 0,
+  pickup: 0,
+  reservation: 0
+})
+
+const fulfillmentLabels: Record<FulfillmentType, string> = {
+  dineIn: 'Dine In',
+  pickup: 'Pick Up',
+  reservation: 'Reservation'
+}
+
+const fulfillmentSections: Array<{ key: FulfillmentType; label: string }> =
+  TNG_FULFILLMENT_KEYS.map((key) => ({ key, label: fulfillmentLabels[key] }))
+
+const fulfillmentEnabled = reactive<Record<FulfillmentType, boolean>>({
+  dineIn: data.integrated.dineIn != null,
+  pickup: data.integrated.pickup != null,
+  reservation: data.integrated.reservation != null
+})
+
+const modelValue = computed<IntegratedDeliverySettingData>(() => {
+  const auto = data.integrated
+  return {
+    manual: data.manual,
+    auto: {
+      enable: auto.enable,
+      integrationId: auto.partnerMerchantId,
+      catalogId: null,
+      autoAccept: auto.autoAccept,
+      autoCloseBill: auto.autoCloseBill || false,
+      printReceiptAfterClose: auto.printReceiptAfterClose ?? true,
+      canRemark: auto.canRemark ?? true,
+      commissionRate: 0,
+      status: auto.status,
+      // updatedAt: auto.updatedAt,
+      // lastSynchronize: auto.lastSynchronize,
+      menuSyncError: auto.menuSyncError?.message ?? null
+    }
+  }
+})
+
+function toFulfillmentDraft(config: any): FulfillmentDraft | null {
+  if (!config) return null
+  return {
+    catalogId: config.catalogId ?? null,
+    paymentMethods: [...(config.paymentMethods ?? [])],
+    serviceCharge: Array.isArray(config.serviceCharge)
+      ? config.serviceCharge.map((sc: any) => ({
+          items: sc.items ?? null,
+          rate: sc.rate ?? { amount: 0, precision: 4 }
+        }))
+      : []
+  }
+}
+
+const fulfillmentDraftCache = reactive<Record<FulfillmentType, FulfillmentDraft | null>>({
+  dineIn: toFulfillmentDraft(data.integrated.dineIn),
+  pickup: toFulfillmentDraft(data.integrated.pickup),
+  reservation: toFulfillmentDraft(data.integrated.reservation)
+})
+
+function emitUpdatedTngSettings() {
+  emits('update:model-value', { manual: data.manual, auto: data.integrated })
+}
+
+function clearValidationState(type?: FulfillmentType) {
+  emits('validation-result', null)
+  if (type) paymentMethodWarnings[type] = ''
+}
+
+function resolvePaymentMethods(type: FulfillmentType): string[] {
+  const cached = fulfillmentDraftCache[type]?.paymentMethods
+  if (cached?.length) return [...cached]
+
+  const current = data.integrated[type]?.paymentMethods
+  if (current?.length) return [...current]
+
+  return [...defaultPaymentMethods]
+}
+
+function updateModelValue({ manual, auto }: IntegratedDeliverySettingData) {
+  const {
+    integrationId,
+    autoAccept,
+    enable,
+    autoCloseBill,
+    printReceiptAfterClose,
+    canRemark,
+    status
+  } = auto
+
+  data.manual = manual
+  data.integrated = {
+    ...data.integrated,
+    enable,
+    autoAccept: autoAccept ?? data.integrated.autoAccept ?? true,
+    autoCloseBill: autoCloseBill ?? false,
+    printReceiptAfterClose: printReceiptAfterClose ?? true,
+    canRemark: canRemark ?? true,
+    partnerMerchantId: integrationId,
+    status: status ?? data.integrated.status
+  }
+
+  emitUpdatedTngSettings()
+}
+
+function onToggleFulfillment(type: FulfillmentType, enabled: boolean) {
+  const enabledModesCount = Object.values(fulfillmentEnabled).filter(Boolean).length
+
+  if (!enabled && enabledModesCount <= 1) {
+    const msg = 'At least one fulfillment mode is required'
+    showError(msg)
+    emits('validation-result', msg)
+    fulfillmentModeUiKeys[type] += 1
+    emitUpdatedTngSettings()
+    return
+  }
+
+  clearValidationState(type)
+  fulfillmentEnabled[type] = enabled
+
+  if (enabled) {
+    const cachedConfig = fulfillmentDraftCache[type]
+    const currentConfig = data.integrated[type]
+
+    data.integrated = {
+      ...data.integrated,
+      [type]: {
+        catalogId: cachedConfig?.catalogId ?? currentConfig?.catalogId ?? null,
+        paymentMethods: resolvePaymentMethods(type),
+        serviceCharge: cachedConfig?.serviceCharge ??
+          currentConfig?.serviceCharge ?? [{ items: null, rate: { amount: 0, precision: 4 } }]
+      }
+    }
+    emitUpdatedTngSettings()
+    return
+  }
+
+  fulfillmentDraftCache[type] = toFulfillmentDraft(data.integrated[type])
+
+  data.integrated = { ...data.integrated, [type]: null }
+  emitUpdatedTngSettings()
+}
+
+function updateFulfillmentCatalog(type: FulfillmentType, catalogId: string | null) {
+  fulfillmentEnabled[type] = true
+  data.integrated = { ...data.integrated, [type]: { ...data.integrated[type], catalogId } }
+  emitUpdatedTngSettings()
+}
+
+function toggleFulfillmentPaymentMethod(type: FulfillmentType, method: string, checked: boolean) {
+  clearValidationState(type)
+  const current = data.integrated[type]?.paymentMethods ?? []
+  if (checked) {
+    data.integrated = {
+      ...data.integrated,
+      [type]: {
+        ...data.integrated[type],
+        paymentMethods: Array.from(new Set([...current, method]))
+      }
+    }
+  } else {
+    if (current.length <= 1) {
+      const msg = 'At least one payment method is required'
+      paymentMethodWarnings[type] = msg
+      showError(msg)
+      emits('validation-result', msg)
+
+      // Keep last option checked and force checkbox re-render for visual consistency.
+      data.integrated = {
+        ...data.integrated,
+        [type]: { ...data.integrated[type], paymentMethods: [...current] }
+      }
+      paymentMethodUiKeys[type] += 1
+      emitUpdatedTngSettings()
+      return
+    }
+
+    data.integrated = {
+      ...data.integrated,
+      [type]: { ...data.integrated[type], paymentMethods: current.filter((m) => m !== method) }
+    }
+  }
+  emitUpdatedTngSettings()
+}
+
+async function syncMenu() {
+  await startAsyncCallWithErr(async () => {
+    await remoteOrderApi.integratedDelivery.syncTngMenu(currentRestaurant.value?._id ?? '')
+    data.integrated.lastSynchronize = new Date().toISOString()
+    showSuccess(t('order.syncMenuSuccess'))
+  })
+}
+
+function updateFulfillmentServiceChargeRate(
+  type: FulfillmentType,
+  index: number,
+  rate: AdjustmentAmount
+) {
+  const scList = [...(data.integrated[type]?.serviceCharge ?? [])]
+  scList[index] = { ...scList[index], rate }
+  data.integrated = {
+    ...data.integrated,
+    [type]: { ...data.integrated[type], serviceCharge: scList }
+  }
+  emitUpdatedTngSettings()
+}
+
+function addServiceCharge(type: FulfillmentType) {
+  const scList = [...(data.integrated[type]?.serviceCharge ?? [])]
+  scList.push({ items: [], rate: { amount: 0, precision: 4 } })
+  data.integrated = {
+    ...data.integrated,
+    [type]: { ...data.integrated[type], serviceCharge: scList }
+  }
+  emitUpdatedTngSettings()
+}
+
+function removeServiceCharge(type: FulfillmentType, index: number) {
+  const scList = (data.integrated[type]?.serviceCharge ?? []).filter((_, i) => i !== index)
+  data.integrated = {
+    ...data.integrated,
+    [type]: { ...data.integrated[type], serviceCharge: scList }
+  }
+  emitUpdatedTngSettings()
+}
+
+function canAddServiceCharge(type: FulfillmentType): boolean {
+  const scList = data.integrated[type]?.serviceCharge ?? []
+  // Any SC covers all items → no room for more
+  if (scList.some((sc) => !sc.items)) return false
+  // All explicit items combined already cover every available item
+  const takenIds = new Set(scList.flatMap((sc) => sc.items ?? []))
+  const totalItems = props.categorizedItems.reduce((acc, cat) => acc + cat.items.length, 0)
+  return takenIds.size < totalItems
+}
+
+// service charge
+const sideSheetItem = ref<boolean>(false)
+const searchValueItem = ref<string>('')
+const selectedItemIds = ref<string[] | null | undefined>(null)
+const serviceChargeFulfillmentMode = ref<FulfillmentType | null>(null)
+const serviceChargeEditIndex = ref<number | null>(null)
+const categoryCollapseState = ref<Record<string, boolean>>({})
+
+const excludedItemIds = computed<Set<string>>(() => {
+  if (!serviceChargeFulfillmentMode.value || serviceChargeEditIndex.value === null) return new Set()
+  const type = serviceChargeFulfillmentMode.value
+  const scList = data.integrated[type]?.serviceCharge ?? []
+  const otherScs = scList.filter((_, i) => i !== serviceChargeEditIndex.value)
+
+  // If any other SC has items: null (all items), every item is excluded
+  if (otherScs.some((sc) => !sc.items)) {
+    return new Set(props.categorizedItems.flatMap((cat) => cat.items.map((item) => item._id)))
+  }
+  return new Set(otherScs.flatMap((sc) => sc.items ?? []))
+})
+
+function isScItemSelectDisabled(type: FulfillmentType, index: number): boolean {
+  const scList = data.integrated[type]?.serviceCharge ?? []
+  const otherScs = scList.filter((_, i) => i !== index)
+  // Any other SC claims all items → nothing left for this one
+  if (otherScs.some((sc) => !sc.items)) return true
+  // All items are explicitly claimed by other SCs
+  const takenIds = new Set(otherScs.flatMap((sc) => sc.items ?? []))
+  const totalItems = props.categorizedItems.reduce((acc, cat) => acc + cat.items.length, 0)
+  return takenIds.size >= totalItems
+}
+
+const filteredCategorizedItems = computed(() =>
+  props.categorizedItems
+    .map((categorizedItem) => ({
+      ...categorizedItem,
+      items: categorizedItem.items.filter(
+        (subItem) =>
+          !excludedItemIds.value.has(subItem._id) &&
+          (searchValueItem.value
+            ? subItem.name.toLowerCase().includes(searchValueItem.value.toLowerCase())
+            : true)
+      )
+    }))
+    .filter((item) => item.items.length > 0)
+)
+const totalCategorizedItemsCount = computed(() =>
+  props.categorizedItems.reduce(
+    (total, curr) =>
+      total + curr.items.filter((item) => !excludedItemIds.value.has(item._id)).length,
+    0
+  )
+)
+const categoryCheckState = computed<SelectedCategories>(() => {
+  return props.categorizedItems.reduce((pv: SelectedCategories, curr: CategorizedItem) => {
+    const availableItems = curr.items.filter((item) => !excludedItemIds.value.has(item._id))
+    const selectedItems = availableItems.filter((item) => selectedItemIds.value?.includes(item._id))
+    const _isAllItemSelected =
+      !selectedItemIds.value || selectedItems.length === availableItems.length
+    const _isSomeItemSelected =
+      !!selectedItemIds.value &&
+      selectedItems.length > 0 &&
+      selectedItems.length < availableItems.length
+
+    pv[curr.id ?? ''] = { isAllSelected: _isAllItemSelected, isSomeSelected: _isSomeItemSelected }
+    return pv
+  }, {})
+})
+
+function toggleServiceChargeSideSheet(type: FulfillmentType, index: number) {
+  serviceChargeFulfillmentMode.value = type
+  serviceChargeEditIndex.value = index
+  const scList = data.integrated[type]?.serviceCharge ?? []
+  selectedItemIds.value = scList[index]?.items ?? null
+  searchValueItem.value = ''
+
+  props.categorizedItems.forEach((item) => {
+    categoryCollapseState.value[item.id ?? ''] = true
+  })
+
+  sideSheetItem.value = true
+}
+function selectAllCategorizedItems(v: boolean) {
+  if (v) {
+    if (excludedItemIds.value.size === 0) {
+      // No other SCs have items — safe to use null (truly all)
+      selectedItemIds.value = null
+    } else {
+      // Other SCs hold some items — select only what's available explicitly
+      selectedItemIds.value = props.categorizedItems
+        .flatMap((cat) => cat.items.map((item) => item._id))
+        .filter((id) => !excludedItemIds.value.has(id))
+    }
+  } else {
+    selectedItemIds.value = []
+  }
+}
+function expandedItemIds(): string[] {
+  return (
+    selectedItemIds.value ??
+    props.categorizedItems.flatMap((categorizedItem) =>
+      categorizedItem.items
+        .filter((item) => !excludedItemIds.value.has(item._id))
+        .map((subItem) => subItem._id)
+    )
+  )
+}
+function toggleCategorySelection(categoryId: string, isSelected: boolean) {
+  const categoryItemIds =
+    props.categorizedItems
+      .find((categorizedItem) => categorizedItem.id === categoryId)
+      ?.items.filter((item) => !excludedItemIds.value.has(item._id))
+      .map((subItem) => subItem._id) ?? []
+
+  if (isSelected) {
+    if (selectedItemIds.value === null) return
+
+    const mergedItemIds = [...new Set([...(selectedItemIds.value ?? []), ...categoryItemIds])]
+    selectedItemIds.value =
+      mergedItemIds.length === totalCategorizedItemsCount.value && excludedItemIds.value.size === 0
+        ? null
+        : mergedItemIds
+  } else {
+    selectedItemIds.value = expandedItemIds().filter((id) => !categoryItemIds.includes(id))
+  }
+}
+function toggleCategoryCollapse(categoryId: string) {
+  const currentCollapseState = categoryCollapseState.value[categoryId]
+  categoryCollapseState.value[categoryId] = !currentCollapseState
+}
+function confirmServiceChargeItems() {
+  const type = serviceChargeFulfillmentMode.value
+  if (!type || serviceChargeEditIndex.value === null) return
+  const scList = [...(data.integrated[type]?.serviceCharge ?? [])]
+  scList[serviceChargeEditIndex.value] = {
+    ...scList[serviceChargeEditIndex.value],
+    items: selectedItemIds.value
+  }
+  data.integrated = {
+    ...data.integrated,
+    [type]: { ...data.integrated[type], serviceCharge: scList }
+  }
+  sideSheetItem.value = false
+  emitUpdatedTngSettings()
+}
+function toggleItemSelection(itemId: string, isSelected: boolean) {
+  if (isSelected) {
+    if (selectedItemIds.value === null) return
+    const mergedItemIds = [...new Set([...(selectedItemIds.value ?? []), itemId])]
+    selectedItemIds.value =
+      mergedItemIds.length === totalCategorizedItemsCount.value && excludedItemIds.value.size === 0
+        ? null
+        : mergedItemIds
+  } else {
+    selectedItemIds.value = expandedItemIds().filter((id) => id !== itemId)
+  }
+}
+</script>
+
+<template>
+  <div class="tng-setting-sheet">
+    <IntegratedDelivery
+      :model-value="modelValue"
+      :company="company"
+      :can-use-auto-delivery-integration="canUseAutoDeliveryIntegration"
+      :show-test-order-actions="false"
+      @update:model-value="updateModelValue"
+      @sync-menu="syncMenu"
+    >
+      <template #sync-menu="{ editable, catalogOptions }">
+        <div class="flex flex-col mt-7 gap-7">
+          <!-- Fulfillment Mode Setting -->
+          <div>
+            <div class="flex-grow fm-typo-en-title-sm-600 mb-3">
+              {{ t('order.fulfillmentModeSetting') }}
+            </div>
+
+            <div
+              v-for="section in fulfillmentSections"
+              :key="section.key"
+              :class="fulfillmentEnabled[section.key] ? 'mb-5' : ''"
+            >
+              <FmCheckbox
+                :key="`${section.key}-${fulfillmentModeUiKeys[section.key]}`"
+                :value="section.key"
+                :label="section.label"
+                :model-value="fulfillmentEnabled[section.key]"
+                :disabled="editable"
+                @update:model-value="(v: boolean) => onToggleFulfillment(section.key, v)"
+              />
+              <FmCard
+                v-if="fulfillmentEnabled[section.key]"
+                variant="outlined"
+                class="p-5 flex flex-col gap-3.5"
+              >
+                <!-- catalog -->
+                <div class="flex flex-col gap-2">
+                  <div class="fm-typo-en-body-lg-600">
+                    {{ t('order.catalog') }}
+                    <span class="text-fm-color-secondary-salmon">*</span>
+                  </div>
+                  <FmSelect
+                    :model-value="data.integrated[section.key]?.catalogId ?? null"
+                    :placeholder="t('order.selectItem')"
+                    :items="catalogOptions"
+                    :disabled="editable"
+                    @update:model-value="
+                      (v: string | null) => updateFulfillmentCatalog(section.key, v)
+                    "
+                  />
+                </div>
+
+                <!-- service charge -->
+                <div class="flex flex-col gap-2">
+                  <!-- title & adding button -->
+                  <div class="flex items-center justify-between">
+                    <div class="fm-typo-en-body-lg-600">
+                      {{ t('order.serviceCharge') + ' (' + t('order.rate') + ')' }}
+                    </div>
+
+                    <!-- TODO: enable when TNG supports multiple service charges per fulfillment mode -->
+                    <!-- :disabled="!canAddServiceCharge(section.key)" -->
+                    <FmButton
+                      variant="plain"
+                      :label="t('order.addServiceCharge')"
+                      size="md"
+                      :disabled="true"
+                      @click="() => addServiceCharge(section.key)"
+                    />
+                  </div>
+
+                  <!-- lists -->
+                  <div
+                    v-for="(sc, scIndex) in data.integrated[section.key]?.serviceCharge ?? []"
+                    :key="scIndex"
+                    class="flex gap-1 items-center"
+                  >
+                    <div class="flex-1">
+                      <RateInput
+                        :label="''"
+                        :model-value="sc.rate ?? { amount: 0, precision: 4 }"
+                        @update:model-value="
+                          (v) => updateFulfillmentServiceChargeRate(section.key, scIndex, v)
+                        "
+                      />
+                    </div>
+
+                    <div class="flex items-center">
+                      <FmButton
+                        append-icon="checkbook"
+                        variant="plain"
+                        size="md"
+                        :disabled="isScItemSelectDisabled(section.key, scIndex)"
+                        @click="() => toggleServiceChargeSideSheet(section.key, scIndex)"
+                      />
+                      <FmButton
+                        append-icon="delete"
+                        variant="plain"
+                        size="md"
+                        :disabled="(data.integrated[section.key]?.serviceCharge ?? []).length <= 1"
+                        @click="() => removeServiceCharge(section.key, scIndex)"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <!-- payment method -->
+                <div class="flex flex-col gap-2">
+                  <div>
+                    <div class="fm-typo-en-body-lg-600">
+                      {{ t('order.paymentMethod') }}
+                      <span class="text-fm-color-secondary-salmon">*</span>
+                    </div>
+                    <div
+                      v-if="paymentMethodWarnings[section.key]"
+                      class="text-xs"
+                      style="color: #dc2626"
+                    >
+                      {{ paymentMethodWarnings[section.key] }}
+                    </div>
+                  </div>
+                  <div class="flex gap-2 flex-wrap">
+                    <FmCheckbox
+                      v-for="option in paymentMethodOptions"
+                      :key="`${section.key}-${option.value}-${paymentMethodUiKeys[section.key]}`"
+                      :value="option.value"
+                      :label="option.label"
+                      :model-value="
+                        (data.integrated[section.key]?.paymentMethods ?? []).includes(
+                          option.value as TNG_PAYMENT_METHOD
+                        )
+                      "
+                      :disabled="editable"
+                      @update:model-value="
+                        (v: boolean) => toggleFulfillmentPaymentMethod(section.key, option.value, v)
+                      "
+                    />
+                  </div>
+                </div>
+              </FmCard>
+            </div>
+          </div>
+
+          <!-- Sync Menu Setting -->
+          <div>
+            <div class="flex-grow fm-typo-en-title-sm-600 mb-3">
+              {{ t('order.syncMenuSetting') }}
+            </div>
+
+            <div class="flex items-center gap-3 mb-7">
+              <FmCheckbox
+                :value="'canRemark'"
+                :model-value="data.integrated.canRemark ?? true"
+                :label="t('order.allowRemarks') ?? 'Allow Remarks'"
+                @update:model-value="
+                  (v: boolean) => {
+                    data.integrated.canRemark = v
+                    emitUpdatedTngSettings()
+                  }
+                "
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- Service Charge Item Side Sheet -->
+        <FmSideSheet
+          :header="t('order.selectItem')"
+          :maxWidth="600"
+          dismiss-away
+          v-model="sideSheetItem"
+        >
+          <div>
+            <!-- topper -->
+            <div class="flex flex-row my-5 items-center">
+              <div class="text-fm-color-typo-secondary">
+                {{ selectedItemIds?.length ?? totalCategorizedItemsCount }}
+                {{ t('order.productSelected') }}
+              </div>
+              <FmSearch
+                v-model:model-value="searchValueItem"
+                class="ml-auto"
+                :placeholder="t('order.search')"
+              />
+            </div>
+
+            <!-- select all checkbox -->
+            <FmCheckbox
+              :label="t('order.selectAllItemsIncludeCustomItem')"
+              :model-value="!selectedItemIds"
+              value=""
+              @update:model-value="(v: boolean) => selectAllCategorizedItems(v)"
+            />
+
+            <!-- categorized items -->
+            <div
+              v-for="(item, index) in filteredCategorizedItems"
+              :key="index"
+              class="flex flex-col mb-6"
+            >
+              <FmCard variant="outlined" class="p-5">
+                <div class="flex flex-col fm-corner-radius-lg">
+                  <!-- category checkbox + collapse button -->
+                  <div
+                    :class="[
+                      'flex flex-row items-center',
+                      categoryCollapseState[item.id ?? ''] ? 'mb-2' : ''
+                    ]"
+                  >
+                    <div class="flex flex-row">
+                      <FmCheckbox
+                        value=""
+                        :model-value="categoryCheckState[item.id ?? ''].isAllSelected"
+                        :indeterminate="categoryCheckState[item.id ?? ''].isSomeSelected"
+                        @update:model-value="toggleCategorySelection(item.id ?? '', $event)"
+                      />
+                      <div class="font-bold ml-2">{{ item.name }}</div>
+                    </div>
+                    <FmButton
+                      variant="tertiary"
+                      class="ml-auto"
+                      :icon="categoryCollapseState[item.id ?? ''] ? 'expand_less' : 'expand_more'"
+                      @click="toggleCategoryCollapse(item.id ?? '')"
+                    />
+                  </div>
+
+                  <!-- category items -->
+                  <div class="flex flex-col pl-6" v-if="categoryCollapseState[item.id ?? '']">
+                    <FmCheckbox
+                      v-for="(subItem, subIndex) in item.items"
+                      :key="subIndex"
+                      :model-value="!selectedItemIds || selectedItemIds.includes(subItem._id)"
+                      :label="subItem.name"
+                      :value="subItem._id"
+                      @update:model-value="(v: boolean) => toggleItemSelection(subItem._id, v)"
+                    />
+                  </div>
+                </div>
+              </FmCard>
+            </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="confirmServiceChargeItems"
+              />
+              <FmButton
+                variant="secondary"
+                :label="t('order.cancel')"
+                size="lg"
+                @click="sideSheetItem = false"
+              />
+            </div>
+          </template>
+        </FmSideSheet>
+      </template>
+    </IntegratedDelivery>
+  </div>
+</template>
+
+<style scoped>
+.tng-setting-sheet :deep(.text-fm-color-neutral-gray-400.fm-typo-cn-body-md-400.mb-5.mt-5) {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+</style>