@feedmepos/mf-order-setting 0.0.54 → 0.0.56-dev.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@feedmepos/mf-order-setting",
-  "version": "0.0.54",
+  "version": "0.0.56-dev.2",
   "type": "module",
   "module": "./dist/app.js",
   "license": "UNLICENSED",

package/src/api/reservation/index.ts

@@ -0,0 +1,28 @@
+import { baseClientInstance, getData } from '@/api'
+import { FdoOrderReservationSettingsV2 } from '@entity'
+
+// const baseClientInstance = () =>
+//   _baseClientInstance(undefined, 'portal', {
+//     url: 'http://localhost:3000/portal'
+//   })
+
+async function getReservationSetting(restaurantId: string): Promise<FdoOrderReservationSettingsV2> {
+  const result = await baseClientInstance().get(`/reservation/restaurant/${restaurantId}/setting`)
+  return getData<FdoOrderReservationSettingsV2>(result)
+}
+
+async function updateReservationSetting(
+  restaurantId: string,
+  payload: FdoOrderReservationSettingsV2
+): Promise<FdoOrderReservationSettingsV2> {
+  const result = await baseClientInstance().put(
+    `/reservation/restaurant/${restaurantId}/setting`,
+    payload
+  )
+  return getData<FdoOrderReservationSettingsV2>(result)
+}
+
+export const ReservationApi = {
+  getReservationSetting,
+  updateReservationSetting
+}

package/src/locales/en-US.json

@@ -246,6 +246,62 @@
         "current": "Current",
         "paxMin": "Pax Min",
         "paxMax": "Pax Max",
+        "reservation": "Reservation",
+        "reservationStatus": "Reservation Status",
+        "reservationSettings": "Reservation Settings",
+        "reservationRanges": "Reservation Ranges",
+        "reservationAvailability": "Reservation Availability",
+        "addRange": "Add Range",
+        "range": "Range",
+        "rangeName": "Range Name",
+        "priority": "Priority",
+        "priorityDescription": "Higher number = higher priority when matching slots",
+        "capacity": "Capacity",
+        "capacityDescription": "Maximum concurrent reservations for this range",
+        "minPax": "Min Pax",
+        "maxPax": "Max Pax",
+        "slotInterval": "Slot Interval",
+        "slotIntervalDescription": "Time between each available booking slot (e.g., 30 mins)",
+        "bookingDuration": "Booking Duration",
+        "bookingDurationDescription": "Duration of each reservation (e.g., 60 mins)",
+        "minLeadDays": "Min Lead Days",
+        "minLeadDaysDescription": "Minimum days in advance customers must book (0 = same day)",
+        "maxLeadDays": "Max Lead Days",
+        "maxLeadDaysDescription": "Maximum days in advance customers can book",
+        "operatingWindows": "Operating Windows",
+        "addWindow": "Add Window",
+        "startTime": "Start Time",
+        "endTime": "End Time",
+        "customPresetRemarks": "Custom Preset Remarks",
+        "addRemark": "Add Remark",
+        "noRangesConfigured": "No reservation ranges configured. Click 'Add Range' to get started.",
+        "addFirstRange": "Add your first reservation range to get started",
+        "globalSettings": "Global Settings",
+        "paxRange": "Pax Range",
+        "noOperatingHours": "No operating hours",
+        "saveAllChanges": "Save All Changes",
+        "confirmDeleteRange": "Are you sure you want to delete {name}?",
+        "settingUpdated": "Settings updated successfully",
+        "newReservationRange": "New Reservation Range",
+        "basicInformation": "Basic Information",
+        "guestRequirements": "Guest Requirements",
+        "bookingConfiguration": "Booking Configuration",
+        "rangeNamePlaceholder": "e.g., VIP Room, Main Hall",
+        "presetRemarkPlaceholder": "e.g., Window seat, Quiet area",
+        "saveRange": "Save Range",
+        "draftHoldTimeMinutes": "Draft Hold Time (Minutes)",
+        "draftHoldTimeDescription": "How long to hold a draft reservation before it expires",
+        "posCanOverbook": "POS Can Overbook",
+        "posCanOverbookDescription": "Allow POS to create reservations even when capacity is full",
+        "notificationSettings": "Notification Settings",
+        "smsEnabled": "Enable SMS Notifications",
+        "smsEnabledDescription": "Send SMS notifications to customers for reservation updates",
+        "emailEnabled": "Enable Email Notifications",
+        "emailEnabledDescription": "Send email notifications to customers for reservation updates",
+        "notifyOnConfirm": "Notify on Confirmation",
+        "notifyOnConfirmDescription": "Send notifications when a reservation is confirmed",
+        "notifyOnCancel": "Notify on Cancellation",
+        "notifyOnCancelDescription": "Send notifications when a reservation is cancelled",
         "qrPay": "QR Pay",
         "terminalScanPay": "Terminal Scan Pay",
         "terminalQrPay": "Terminal QR Pay",

package/src/locales/th-TH.json

@@ -243,6 +243,60 @@
         "current": "ปัจจุบัน",
         "paxMin": "จำนวนผู้โดยสารขั้นต่ำ",
         "paxMax": "จำนวนผู้โดยสารสูงสุด",
+        "reservation": "การจอง",
+        "reservationSettings": "การตั้งค่าการจอง",
+        "reservationRanges": "ช่วงการจอง",
+        "addRange": "เพิ่มช่วง",
+        "range": "ช่วง",
+        "rangeName": "ชื่อช่วง",
+        "priority": "ลำดับความสำคัญ",
+        "priorityDescription": "ตัวเลขที่สูงกว่า = ลำดับความสำคัญสูงกว่าเมื่อจับคู่ช่วงเวลา",
+        "capacity": "ความจุ",
+        "capacityDescription": "จำนวนการจองพร้อมกันสูงสุดสำหรับช่วงนี้",
+        "minPax": "จำนวนผู้โดยสารขั้นต่ำ",
+        "maxPax": "จำนวนผู้โดยสารสูงสุด",
+        "slotInterval": "ช่วงเวลา",
+        "slotIntervalDescription": "เวลาระหว่างช่วงการจองที่ว่าง (เช่น 30 นาที)",
+        "bookingDuration": "ระยะเวลาการจอง",
+        "bookingDurationDescription": "ระยะเวลาของการจองแต่ละครั้ง (เช่น 60 นาที)",
+        "minLeadDays": "จำนวนวันล่วงหน้าขั้นต่ำ",
+        "minLeadDaysDescription": "จำนวนวันขั้นต่ำที่ลูกค้าต้องจองล่วงหน้า (0 = วันเดียวกัน)",
+        "maxLeadDays": "จำนวนวันล่วงหน้าสูงสุด",
+        "maxLeadDaysDescription": "จำนวนวันสูงสุดที่ลูกค้าสามารถจองล่วงหน้าได้",
+        "operatingWindows": "ช่วงเวลาทำการ",
+        "addWindow": "เพิ่มช่วงเวลา",
+        "startTime": "เวลาเริ่มต้น",
+        "endTime": "เวลาสิ้นสุด",
+        "customPresetRemarks": "หมายเหตุที่กำหนดไว้ล่วงหน้า",
+        "addRemark": "เพิ่มหมายเหตุ",
+        "noRangesConfigured": "ยังไม่มีการกำหนดช่วงการจอง คลิก 'เพิ่มช่วง' เพื่อเริ่มต้น",
+        "addFirstRange": "เพิ่มช่วงการจองแรกของคุณเพื่อเริ่มต้น",
+        "globalSettings": "การตั้งค่าทั่วไป",
+        "paxRange": "ช่วงจำนวนผู้โดยสาร",
+        "noOperatingHours": "ไม่มีเวลาทำการ",
+        "saveAllChanges": "บันทึกการเปลี่ยนแปลงทั้งหมด",
+        "confirmDeleteRange": "คุณแน่ใจหรือไม่ว่าต้องการลบ {name}?",
+        "settingUpdated": "อัปเดตการตั้งค่าสำเร็จ",
+        "newReservationRange": "ช่วงการจองใหม่",
+        "basicInformation": "ข้อมูลพื้นฐาน",
+        "guestRequirements": "ความต้องการของแขก",
+        "bookingConfiguration": "การกำหนดค่าการจอง",
+        "rangeNamePlaceholder": "เช่น ห้อง VIP, ห้องโถง",
+        "presetRemarkPlaceholder": "เช่น ที่นั่งริมหน้าต่าง, พื้นที่เงียบ",
+        "saveRange": "บันทึกช่วง",
+        "draftHoldTimeMinutes": "เวลาเก็บร่าง (นาที)",
+        "draftHoldTimeDescription": "ระยะเวลาในการเก็บการจองแบบร่างก่อนที่จะหมดอายุ",
+        "posCanOverbook": "POS สามารถจองเกินได้",
+        "posCanOverbookDescription": "อนุญาตให้ POS สร้างการจองแม้ว่าความจุเต็มแล้ว",
+        "notificationSettings": "การตั้งค่าการแจ้งเตือน",
+        "smsEnabled": "เปิดใช้งานการแจ้งเตือนผ่าน SMS",
+        "smsEnabledDescription": "ส่งการแจ้งเตือนผ่าน SMS ให้กับลูกค้าสำหรับการอัพเดทการจอง",
+        "emailEnabled": "เปิดใช้งานการแจ้งเตือนผ่านอีเมล",
+        "emailEnabledDescription": "ส่งการแจ้งเตือนผ่านอีเมลให้กับลูกค้าสำหรับการอัพเดทการจอง",
+        "notifyOnConfirm": "แจ้งเตือนเมื่อยืนยัน",
+        "notifyOnConfirmDescription": "ส่งการแจ้งเตือนเมื่อการจองได้รับการยืนยัน",
+        "notifyOnCancel": "แจ้งเตือนเมื่อยกเลิก",
+        "notifyOnCancelDescription": "ส่งการแจ้งเตือนเมื่อการจองถูกยกเลิก",
         "qrPay": "ชำระเงินด้วย QR",
         "terminalScanPay": "ชำระเงินด้วยการสแกนเทอร์มินัล",
         "terminalQrPay": "ชำระเงินด้วย QR เทอร์มินัล",

package/src/locales/zh-CN.json

@@ -247,6 +247,60 @@
         "current": "当前",
         "paxMin": "最少人数",
         "paxMax": "最多人数",
+        "reservation": "预订",
+        "reservationSettings": "预订设置",
+        "reservationRanges": "预订范围",
+        "addRange": "添加范围",
+        "range": "范围",
+        "rangeName": "范围名称",
+        "priority": "优先级",
+        "priorityDescription": "数字越大，匹配时段时优先级越高",
+        "capacity": "容量",
+        "capacityDescription": "此范围的最大并发预订数",
+        "minPax": "最少人数",
+        "maxPax": "最多人数",
+        "slotInterval": "时段间隔",
+        "slotIntervalDescription": "每个可预订时段之间的时间（例如30分钟）",
+        "bookingDuration": "预订时长",
+        "bookingDurationDescription": "每次预订的持续时间（例如60分钟）",
+        "minLeadDays": "最少提前天数",
+        "minLeadDaysDescription": "顾客必须提前预订的最少天数（0 = 当天）",
+        "maxLeadDays": "最多提前天数",
+        "maxLeadDaysDescription": "顾客可以提前预订的最多天数",
+        "operatingWindows": "营业时段",
+        "addWindow": "添加时段",
+        "startTime": "开始时间",
+        "endTime": "结束时间",
+        "customPresetRemarks": "自定义预设备注",
+        "addRemark": "添加备注",
+        "noRangesConfigured": "未配置预订范围。点击\"添加范围\"开始",
+        "addFirstRange": "添加您的第一个预订范围以开始",
+        "globalSettings": "全局设置",
+        "paxRange": "人数范围",
+        "noOperatingHours": "无营业时间",
+        "saveAllChanges": "保存所有更改",
+        "confirmDeleteRange": "您确定要删除{name}吗？",
+        "settingUpdated": "设置已成功更新",
+        "newReservationRange": "新预订范围",
+        "basicInformation": "基本信息",
+        "guestRequirements": "客人要求",
+        "bookingConfiguration": "预订配置",
+        "rangeNamePlaceholder": "例如：VIP包厢、大厅",
+        "presetRemarkPlaceholder": "例如：靠窗座位、安静区域",
+        "saveRange": "保存范围",
+        "draftHoldTimeMinutes": "草稿保留时间（分钟）",
+        "draftHoldTimeDescription": "在草稿预订过期前保留的时间",
+        "posCanOverbook": "POS可以超额预订",
+        "posCanOverbookDescription": "允许POS在容量已满时创建预订",
+        "notificationSettings": "通知设置",
+        "smsEnabled": "启用短信通知",
+        "smsEnabledDescription": "向客户发送预订更新的短信通知",
+        "emailEnabled": "启用电子邮件通知",
+        "emailEnabledDescription": "向客户发送预订更新的电子邮件通知",
+        "notifyOnConfirm": "确认时通知",
+        "notifyOnConfirmDescription": "当预订被确认时发送通知",
+        "notifyOnCancel": "取消时通知",
+        "notifyOnCancelDescription": "当预订被取消时发送通知",
         "qrPay": "二维码支付",
         "terminalScanPay": "终端扫描支付",
         "terminalQrPay": "终端二维码支付",

package/src/views/kiosk/KioskSummary.vue

@@ -98,6 +98,9 @@ const acceptedPaymentStatus = computed<string>(() => {
     if (type === F_ORDER_PAYMENT_TYPE.enum.ePayment) {
       acceptedPayment.push(t('order.ePayment'));
     }
+    if (type == F_ORDER_PAYMENT_TYPE.enum.credit){
+      acceptedPayment.push(t('order.credit'));
+    }
   });
 
   if (

package/src/views/kiosk/settings/KioskPaymentTypeSection.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { FdoOfflinePaymentMethod } from '@feedmepos/core/entity'
+import { FdoOfflinePaymentMethod, F_ORDER_PAYMENT_TYPE as _F_ORDER_PAYMENT_TYPE } from '@feedmepos/core/entity'
 import { F_ORDER_PAYMENT_TYPE, F_ORDER_E_PAYMENT_TYPE, FdoEPaymentMethod } from '@entity'
 import { type PropType, computed, onMounted, ref } from 'vue'
-import OfflinePaymentTypeDialog from '../../order-settings/dine-in/OfflinePaymentTypeDialog.vue'
+import PaymentType from '../../order-settings/dine-in/PaymentType.vue'
 import { useI18n } from '@feedmepos/mf-common'
 
 const { t } = useI18n()
@@ -20,6 +20,10 @@ const props = defineProps({
     type: [Boolean, String],
     required: true
   },
+  allowCredit: {
+    type: [Boolean, String],
+    default: false
+  },
   ePaymentTypes: {
     type: Object as PropType<FdoEPaymentMethod>,
     required: true
@@ -32,44 +36,18 @@ const emits = defineEmits<{
   (event: 'update:ePaymentTypes', v: FdoEPaymentMethod): void
 }>()
 
-async function deleteOfflinePayment(index: number) {
-  emits(
-    'update:offlinePaymentTypes',
-    props.offlinePaymentTypes.filter((_, i) => i !== index)
-  )
-}
-
 const allowEPayment = computed(() => {
   const paymentTypes = props.paymentTypes || []
   return paymentTypes.includes(F_ORDER_PAYMENT_TYPE.enum.ePayment)
 })
 
-const allowOfflinePayment = computed(() => {
-  const paymentTypes = props.paymentTypes || []
-  const offlinePaymentTypes = props.offlinePaymentTypes || []
-
-  return paymentTypes.includes(F_ORDER_PAYMENT_TYPE.enum.cash) || offlinePaymentTypes.length > 0
-})
-
-const parentCheckbox = ref(false)
-const paymentCheckboxVal = ref<string[]>([])
 const cardPaymentRadioVal = ref<string>()
 const eWalletPaymentCheckboxVal = ref<string[]>([])
 const useCard = ref(false)
 const useTerminal = ref(false)
 const useEwallet = ref(false)
 
-const checkboxChildren = [
-  { label: t('order.offlinePayment'), value: 'offline' },
-  { label: t('order.ePayment'), value: 'e-payment' }
-]
-
 const initializeCheckboxes = () => {
-  const initialValues: string[] = []
-  if (allowOfflinePayment.value) initialValues.push('offline')
-  if (allowEPayment.value) initialValues.push('e-payment')
-  paymentCheckboxVal.value = initialValues
-  parentCheckbox.value = initialValues.length === checkboxChildren.length
   if (!(Object.keys(props.ePaymentTypes).length === 0)) {
     if (props.ePaymentTypes.terminal) {
       useTerminal.value = true
@@ -97,54 +75,6 @@ const initializeCheckboxes = () => {
 
 initializeCheckboxes()
 
-const handleParentUpdate = (ev: boolean) => {
-  paymentCheckboxVal.value = ev ? checkboxChildren.map((item) => item.value) : []
-  parentCheckbox.value = ev
-
-  const updatedPaymentTypes: F_ORDER_PAYMENT_TYPE[] = []
-  const updatedOfflinePaymentTypes = ev ? props.offlinePaymentTypes || [] : []
-
-  if (paymentCheckboxVal.value.includes('e-payment')) {
-    updatedPaymentTypes.push(F_ORDER_PAYMENT_TYPE.enum.ePayment)
-    useCard.value = true
-    useEwallet.value = true
-  }
-  if (paymentCheckboxVal.value.includes('offline')) {
-    updatedPaymentTypes.push(F_ORDER_PAYMENT_TYPE.enum.cash)
-  }
-
-  emits('update:paymentTypes', updatedPaymentTypes)
-  emits('update:offlinePaymentTypes', updatedOfflinePaymentTypes)
-  updateCardSwitch(useCard.value)
-  updateECardSwitch(useEwallet.value)
-}
-
-const handleChildUpdate = (ev: string[]) => {
-  const currentPaymentCheckboxVal = paymentCheckboxVal.value
-  paymentCheckboxVal.value = ev
-  parentCheckbox.value = ev.length === checkboxChildren.length
-
-  const updatedPaymentTypes: F_ORDER_PAYMENT_TYPE[] = []
-  const updatedOfflinePaymentTypes = ev.includes('offline') ? props.offlinePaymentTypes || [] : []
-
-  if (ev.includes('e-payment')) {
-    updatedPaymentTypes.push(F_ORDER_PAYMENT_TYPE.enum.ePayment)
-  }
-  if (ev.includes('offline')) {
-    updatedPaymentTypes.push(F_ORDER_PAYMENT_TYPE.enum.cash)
-  }
-
-  if (!currentPaymentCheckboxVal.includes('e-payment')) {
-    useCard.value = true
-    useEwallet.value = true
-    updateCardSwitch(useCard.value)
-    updateECardSwitch(useEwallet.value)
-  }
-
-  emits('update:paymentTypes', updatedPaymentTypes)
-  emits('update:offlinePaymentTypes', updatedOfflinePaymentTypes)
-}
-
 const handleEPaymentCardUpdate = (ev: string) => {
   const ePaymentObj = {
     terminal: false,
@@ -158,7 +88,7 @@ const handleEPaymentCardUpdate = (ev: string) => {
     }
   } as FdoEPaymentMethod
 
-  if (paymentCheckboxVal.value.includes('e-payment')) {
+  if (allowEPayment.value) { // Check computed property instead of local state
     if (ev == F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL) {
       ePaymentObj.card.terminal = true
     }
@@ -200,7 +130,7 @@ const handleEPaymentEWalletUpdate = () => {
     }
   } as FdoEPaymentMethod
 
-  if (paymentCheckboxVal.value.includes('e-payment')) {
+  if (allowEPayment.value) {
     if (cardPaymentRadioVal.value) {
       if (cardPaymentRadioVal.value === F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL) {
         ePaymentObj.card.terminal = true
@@ -254,145 +184,103 @@ const updateECardSwitch = (enabled: boolean) => {
   handleEPaymentEWalletUpdate()
 }
 
+const handlePaymentTypesUpdate = (v: F_ORDER_PAYMENT_TYPE[]) => {
+  emits('update:paymentTypes', v)
+  if (!v.includes(F_ORDER_PAYMENT_TYPE.enum.ePayment)) {
+    useCard.value = false
+    useEwallet.value = false
+    updateCardSwitch(false)
+    updateECardSwitch(false)
+  }
+}
+
 onMounted(() => {
   initializeCheckboxes()
 })
 </script>
 <template>
-  <FmCheckbox
-    value=""
-    :model-value="parentCheckbox"
-    :label="t('order.all')"
-    :indeterminate="
-      paymentCheckboxVal.length > 0 && paymentCheckboxVal.length < checkboxChildren.length
-    "
-    @update:model-value="handleParentUpdate"
-  />
-
-  <div class="flex flex-row items-center">
-    <FmCheckbox
-      v-model="paymentCheckboxVal"
-      :label="checkboxChildren[0].label"
-      :value="checkboxChildren[0].value"
-      @update:model-value="handleChildUpdate"
-    />
-  </div>
-  <div
-    v-if="
-      paymentCheckboxVal.includes(checkboxChildren[0].value) && offlinePaymentTypes?.length === 0
-    "
-  >
-    <OfflinePaymentTypeDialog
-      @update:offline-payment-types="
-        (v: FdoOfflinePaymentMethod[]) => emits('update:offlinePaymentTypes', v)
-      "
-    />
-  </div>
-
-  <div v-if="paymentCheckboxVal.includes('offline')" class="ml-7">
-    <div v-if="offlinePaymentTypes?.length === 0">
-      <FmCard variant="outlined">
-        <FmCardSection>{{ t('order.payAtCounter') }}</FmCardSection>
-      </FmCard>
-    </div>
-    <p v-for="(type, i) in offlinePaymentTypes" :key="i">
-      <FmCard variant="outlined">
-        <FmCardSection class="flex items-center justify-between">
-          <div>
-            <span class="font-bold">{{ type.name }}</span>
-            <br />
-            <span>{{ type.instruction }}</span>
-          </div>
-          <div v-for="(payment, index) in offlinePaymentTypes" :key="index">
-            <FmButton
-              append-icon="delete"
-              variant="tertiary"
-              @click="deleteOfflinePayment(index)"
+    <PaymentType
+      :payment-types="paymentTypes as unknown as _F_ORDER_PAYMENT_TYPE[]"
+      :offline-payment-types="offlinePaymentTypes"
+      :allow-e-payment="props.allowEPayment"
+      :allow-credit="props.allowCredit"
+      @update:payment-types="handlePaymentTypesUpdate"
+      @update:offline-payment-types="(v) => emits('update:offlinePaymentTypes', v || [])"
+    >
+      <template #e-payment-content>
+        <FmCard variant="outlined">
+          <FmCardSection>
+            <FmSwitch
+              :label="t('order.bankCard')"
+              :sublabel="t('order.cardPaymentDescription')"
+              label-placement="right"
+              v-model="useCard"
+              @update:modelValue="updateCardSwitch"
             />
-          </div>
-        </FmCardSection>
-      </FmCard>
-    </p>
-  </div>
-  <FmCheckbox
-    v-model="paymentCheckboxVal"
-    :label="checkboxChildren[1].label"
-    :value="checkboxChildren[1].value"
-    @update:model-value="handleChildUpdate"
-  />
-  <div v-if="paymentCheckboxVal.includes(checkboxChildren[1].value)" class="ml-7">
-    <FmCard variant="outlined">
-      <FmCardSection>
-        <FmSwitch
-          :label="t('order.bankCard')"
-          :sublabel="t('order.cardPaymentDescription')"
-          label-placement="right"
-          v-model="useCard"
-          @update:modelValue="updateCardSwitch"
-        />
-        <br />
-        <div v-show="useCard" class="ml-7">
-          <FmRadioGroup
-            v-model="cardPaymentRadioVal"
-            @update:model-value="handleEPaymentCardUpdate"
-            inline
-          >
-            <FmRadio :label="t('order.terminal')" :value="F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL" />
-            <FmRadio :label="t('order.nfc')" :value="F_ORDER_E_PAYMENT_TYPE.enum.NFC" />
-          </FmRadioGroup>
-        </div>
-      </FmCardSection>
-    </FmCard>
-    <FmCard variant="outlined" class="mt-2">
-      <FmCardSection>
-        <FmSwitch
-          :label="t('order.terminal')"
-          :sublabel="t('order.terminalPaymentDescription')"
-          label-placement="right"
-          v-model="useTerminal"
-          @update:modelValue="updateCardSwitch"
-        />
-      </FmCardSection>
-    </FmCard>
-    <FmCard variant="outlined" class="mt-2">
-      <FmCardSection>
-        <FmSwitch
-          :label="t('order.eWallet')"
-          :sublabel="t('order.eWalletDescription')"
-          label-placement="right"
-          v-model="useEwallet"
-          @update:modelValue="updateECardSwitch"
-        />
-        <br />
-        <div v-show="useEwallet" class="ml-7">
-          <div class="flex flex-row gap-9">
-            <FmCheckbox
-              v-model="eWalletPaymentCheckboxVal"
-              :label="t('order.qrPay')"
-              :value="F_ORDER_E_PAYMENT_TYPE.enum.QRPAY"
-              @update:model-value="handleEPaymentEWalletUpdate"
-            />
-            <FmCheckbox
-              v-model="eWalletPaymentCheckboxVal"
-              :label="t('order.scanPay')"
-              :value="F_ORDER_E_PAYMENT_TYPE.enum.SCANPAY"
-              @update:model-value="handleEPaymentEWalletUpdate"
-            />
-            <FmCheckbox
-              v-model="eWalletPaymentCheckboxVal"
-              :label="t('order.terminalScanPay')"
-              :value="F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL_SCAN_PAY"
-              @update:model-value="handleEPaymentEWalletUpdate"
+            <br />
+            <div v-show="useCard" class="ml-7">
+              <FmRadioGroup
+                v-model="cardPaymentRadioVal"
+                @update:model-value="handleEPaymentCardUpdate"
+                inline
+              >
+                <FmRadio :label="t('order.terminal')" :value="F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL" />
+                <FmRadio :label="t('order.nfc')" :value="F_ORDER_E_PAYMENT_TYPE.enum.NFC" />
+              </FmRadioGroup>
+            </div>
+          </FmCardSection>
+        </FmCard>
+        <FmCard variant="outlined" class="mt-2">
+          <FmCardSection>
+            <FmSwitch
+              :label="t('order.terminal')"
+              :sublabel="t('order.terminalPaymentDescription')"
+              label-placement="right"
+              v-model="useTerminal"
+              @update:modelValue="handleEPaymentEWalletUpdate"
             />
-            <FmCheckbox
-              v-model="eWalletPaymentCheckboxVal"
-              :label="t('order.terminalQrPay')"
-              :value="F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL_QR_PAY"
-              @update:model-value="handleEPaymentEWalletUpdate"
+          </FmCardSection>
+        </FmCard>
+        <FmCard variant="outlined" class="mt-2">
+          <FmCardSection>
+            <FmSwitch
+              :label="t('order.eWallet')"
+              :sublabel="t('order.eWalletDescription')"
+              label-placement="right"
+              v-model="useEwallet"
+              @update:modelValue="updateECardSwitch"
             />
-          </div>
-        </div>
-      </FmCardSection>
-    </FmCard>
-  </div>
+            <br />
+            <div v-show="useEwallet" class="ml-7">
+              <div class="flex flex-row gap-9">
+                <FmCheckbox
+                  v-model="eWalletPaymentCheckboxVal"
+                  :label="t('order.qrPay')"
+                  :value="F_ORDER_E_PAYMENT_TYPE.enum.QRPAY"
+                  @update:model-value="handleEPaymentEWalletUpdate"
+                />
+                <FmCheckbox
+                  v-model="eWalletPaymentCheckboxVal"
+                  :label="t('order.scanPay')"
+                  :value="F_ORDER_E_PAYMENT_TYPE.enum.SCANPAY"
+                  @update:model-value="handleEPaymentEWalletUpdate"
+                />
+                <FmCheckbox
+                  v-model="eWalletPaymentCheckboxVal"
+                  :label="t('order.terminalScanPay')"
+                  :value="F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL_SCAN_PAY"
+                  @update:model-value="handleEPaymentEWalletUpdate"
+                />
+                <FmCheckbox
+                  v-model="eWalletPaymentCheckboxVal"
+                  :label="t('order.terminalQrPay')"
+                  :value="F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL_QR_PAY"
+                  @update:model-value="handleEPaymentEWalletUpdate"
+                />
+              </div>
+            </div>
+          </FmCardSection>
+        </FmCard>
+      </template>
+    </PaymentType>
 </template>