@feedmepos/mf-order-setting 0.0.44 → 0.0.46

package/src/api/remoteOrder/index.ts

@@ -1,8 +1,19 @@
 import type { AxiosInstance } from 'axios';
 import { baseClientInstance, getData, SvcConfig } from '..';
 import type { DeliveryCompany, LinkedDeliveryDoc } from '../../views/order-settings/delivery/delivery';
-import { FdoFoodpandaSettings, FdoLinkedDelivery, FdoRestaurant, FdoRestaurantFeedmeDelivery, FdoRestaurantInHouseDelivery, FdoShopeeFoodOrder } from '@feedmepos/core/entity';
-import type { FdoDeliverooSettings, FdoExternalSetting, FdoFoodpandaOrderOutput, FdoGrabfoodOrderOutput, FdoGrabfoodSettings, FdoShopeeFoodOrderOutput, FdoShopeeFoodSettings, FdtoGetOrderReq } from '@entity';
+import { FdoLinkedDelivery, FdoRestaurant, FdoRestaurantFeedmeDelivery, FdoRestaurantInHouseDelivery } from '@feedmepos/core/entity';
+import type {
+  FdoDeliverooSettings,
+  FdoExternalSetting,
+  FdoFoodpandaOrderOutput,
+  FdoFoodpandaSettings,
+  FdoGrabfoodOrderOutput,
+  FdoGrabfoodSettings,
+  FdoShopeeFoodOrder,
+  FdoShopeeFoodOrderOutput,
+  FdoShopeeFoodSettings,
+  FdtoGetOrderReq
+} from '@entity';
 
 type DeliveryCompanyUrl = 'foodpanda' | 'grabfood' | 'shopeefood' | 'deliveroo' | 'external'
 

package/src/api/restaurant-setting/index.ts

@@ -4,6 +4,7 @@ import {
 } from '@/api'
 import type { OrderSettingsDto } from '@entity'
 import {
+  FdoQueueQrSetting,
   FdoRestaurantDineIn,
   FdoRestaurantPickup,
   FdoRestaurantSetting,
@@ -40,5 +41,10 @@ export const restaurantApi = {
 
   async getMobileOrderSetting(): Promise<OrderSettingsDto> {
     return await getData(await restaurantClientInstance().get('/order-settings'))
+  },
+
+  async updateQueueSetting(restaurantId: string, setting: Partial<FdoQueueQrSetting>): Promise<RestaurantSettingDoc> {
+    const result = await restaurantClientInstance().put(`/queue`, setting)
+    return getData<RestaurantSettingDoc>(result)
   }
 }

package/src/locales/en-US.json

@@ -39,6 +39,14 @@
         "autoIntegrationCountryNotSupport": "Platform not support auto integration in current country.",
         "autoSendKitchen": "Auto Send Kitchen",
         "autoSendKitchenSublabel": "Required POS version 7 or above",
+        "presetRemarks": "Preset Remarks",
+        "editPresetRemarks": "Edit Preset Remarks",
+        "addNewRemark": "Add New Remark",
+        "enterRemark": "Enter remark",
+        "existingRemarks": "Existing Remarks",
+        "noPresetRemarks": "No preset remarks configured",
+        "noPresetRemarksAdded": "No remarks added yet",
+        "presetRemarksSaved": "Preset remarks saved successfully",
         "balance": "Balance",
         "bankCard": "Card",
         "beforeBillDiscount": "Before bill discount",
@@ -72,6 +80,8 @@
         "daysTo": "days to",
         "deactivated": "Deactivated",
         "default": "Default",
+        "enabled": "Enabled",
+        "disabled": "Disabled",
         "delete": "delete",
         "delivery": "Delivery",
         "deliveryCompany": "Delivery Company",
@@ -115,6 +125,7 @@
         "feedmeExpressPosVersionIssue": "Min POS version {minVersion} required for FeedMe Express",
         "feedmeExpressTitle": "Update FeedMe express",
         "fieldCannotBeEmpty": "Field cannot be empty",
+        "followDineIn": "Follow Dine In",
         "fixedTime": "Fixed time",
         "friday": "Friday",
         "general": "General",
@@ -198,6 +209,19 @@
         "processing": "PROCESSING",
         "productSelected": "product(s) selected",
         "promptAnonymousLoginDialog": "Prompt Login Dialog For Anonymous Order",
+        "queue": "Queue",
+        "queueSettings": "Queue Settings",
+        "enableQueueOrder": "Enable Queue Order",
+        "autoCalledLimit": "Auto Called Limit",
+        "duration": "Duration",
+        "disableRemoteQueue": "Disable Remote Queue",
+        "disableSMS": "Disable SMS",
+        "printChecklist": "Print Checklist",
+        "codeSettings": "Queue Code Settings",
+        "addCodeSetting": "Add Queue Code Setting",
+        "current": "Current",
+        "paxMin": "Pax Min",
+        "paxMax": "Pax Max",
         "qrPay": "QR Pay",
         "terminalScanPay": "Terminal Scan Pay",
         "terminalQrPay": "Terminal QR Pay",

package/src/locales/th-TH.json

@@ -39,6 +39,14 @@
         "autoIntegrationCountryNotSupport": "แพลตฟอร์มไม่รองรับการเชื่อมต่อการจัดส่งแบบไดนามิกในประเทศ/ภูมิภาคปัจจุบัน",
         "autoSendKitchen": "ส่งอัตโนมัติครัว",
         "autoSendKitchenSublabel": "ต้องใช้ POS เวอร์ชัน 7 ขึ้นไป",
+        "presetRemarks": "หมายเหตุที่ตั้งไว้ล่วงหน้า",
+        "editPresetRemarks": "แก้ไขหมายเหตุที่ตั้งไว้ล่วงหน้า",
+        "addNewRemark": "เพิ่มหมายเหตุใหม่",
+        "enterRemark": "ป้อนหมายเหตุ",
+        "existingRemarks": "หมายเหตุที่มีอยู่",
+        "noPresetRemarks": "ไม่มีหมายเหตุที่ตั้งไว้ล่วงหน้า",
+        "noPresetRemarksAdded": "ยังไม่ได้เพิ่มหมายเหตุ",
+        "presetRemarksSaved": "บันทึกหมายเหตุที่ตั้งไว้ล่วงหน้าสำเร็จ",
         "balance": "ยอดคงเหลือ",
         "bankCard": "บัตร",
         "beforeBillDiscount": "ก่อนหักส่วนลดบิล",
@@ -73,6 +81,8 @@
         "deactivated": "ปิดใช้งาน",
         "default": "ค่าเริ่มต้น",
         "delete": "ลบ",
+        "disabled": "ปิดใช้งาน",
+        "enabled": "เปิดใช้งาน",
         "delivery": "การจัดส่ง",
         "deliveryCompany": "บริษัทจัดส่ง",
         "deliveryDescription": "เราบูรณาการการจัดส่งเหล่านี้กับระบบ POS ของคุณ คุณสามารถจัดส่งอาหารให้กับลูกค้าของคุณได้รวดเร็วและปลอดภัยยิ่งขึ้น",
@@ -113,6 +123,7 @@
         "feedmeExpressPosVersionIssue": "จำเป็นต้องมีเวอร์ชัน POS ขั้นต่ำ {minVersion} สำหรับ FeedMe Express",
         "feedmeExpressTitle": "อัปเดต FeedMe express",
         "fieldCannotBeEmpty": "ไม่สามารถเว้นช่องได้",
+        "followDineIn": "ทำตามการรับประทานอาหารที่ร้าน",
         "fixedTime": "เวลาที่กำหนด",
         "friday": "วันศุกร์",
         "general": "ข้อมูลทั่วไป",
@@ -188,6 +199,7 @@
         "pleaseCompleteProfile": "โปรดกรอกโปรไฟล์ร้านอาหารของคุณเพื่อเปิดใช้งาน FeedMe Express",
         "pleaseSelectRestaurant": "โปรดเลือกร้านอาหาร",
         "prefix": "คำนำหน้า",
+        "printChecklist": "พิมพ์รายการตรวจสอบ",
         "preOrder": "สั่งซื้อล่วงหน้า",
         "preOrderHint": "สั่งซื้อในวันที่ {today} ลูกค้าสามารถสั่งซื้อได้ระหว่าง  {start} และ {end} สูงสุด 7 วัน",
         "pricePerMessage": "ราคาต่อข้อความ",
@@ -195,6 +207,18 @@
         "processing": "กำลังประมวลผล",
         "productSelected": "ผลิตภัณฑ์ที่เลือก",
         "promptAnonymousLoginDialog": "กล่องโต้ตอบพร้อมท์เข้าสู่ระบบสำหรับคำสั่งซื้อแบบไม่เปิดเผยตัวตน",
+        "queue": "คิว",
+        "queueSettings": "การตั้งค่าคิว",
+        "enableQueueOrder": "เปิดใช้งานคำสั่งซื้อคิว",
+        "autoCalledLimit": "ขีดจำกัดการเรียกอัตโนมัติ",
+        "duration": "ระยะเวลา",
+        "disableRemoteQueue": "ปิดใช้งานคิวระยะไกล",
+        "disableSMS": "ปิดใช้งาน SMS",
+        "codeSettings": "การตั้งค่ารหัส",
+        "addCodeSetting": "เพิ่มการตั้งค่ารหัส",
+        "current": "ปัจจุบัน",
+        "paxMin": "จำนวนผู้โดยสารขั้นต่ำ",
+        "paxMax": "จำนวนผู้โดยสารสูงสุด",
         "qrPay": "ชำระเงินด้วย QR",
         "terminalScanPay": "ชำระเงินด้วยการสแกนเทอร์มินัล",
         "terminalQrPay": "ชำระเงินด้วย QR เทอร์มินัล",

package/src/locales/zh-CN.json

@@ -39,6 +39,14 @@
         "autoIntegrationCountryNotSupport": "平台不支持当前国家/地区的自动配送对接。",
         "autoSendKitchen": "自动发送至厨房",
         "autoSendKitchenSublabel": "需要POS版本7或以上",
+        "presetRemarks": "预设备注",
+        "editPresetRemarks": "编辑预设备注",
+        "addNewRemark": "添加新备注",
+        "enterRemark": "输入备注",
+        "existingRemarks": "现有备注",
+        "noPresetRemarks": "未配置预设备注",
+        "noPresetRemarksAdded": "尚未添加备注",
+        "presetRemarksSaved": "预设备注保存成功",
         "balance": "余额",
         "bankCard": "银行卡",
         "beforeBillDiscount": "账单折扣前",
@@ -74,6 +82,8 @@
         "deactivated": "已停用",
         "default": "默认",
         "delete": "删除",
+        "disabled": "禁用",
+        "enabled": "启用",
         "delivery": "配送",
         "deliveryCompany": "配送公司",
         "deliveryDescription": "我们将以下配送服务与您的POS系统进行结合，让您能够更加快速且安全地将餐点送到客户手中。",
@@ -117,6 +127,7 @@
         "feedmeExpressPosVersionIssue": "需要最低{minVersion}版本的POS系统才能使用FeedMe外卖快递",
         "feedmeExpressTitle": "更新 Feedme 外卖快递",
         "fieldCannotBeEmpty": "字段不可为空",
+        "followDineIn": "跟随堂食",
         "fixedTime": "固定时间",
         "friday": "星期五",
         "general": "通用",
@@ -192,6 +203,7 @@
         "pleaseCompleteProfile": "请完善您的餐厅资料以启用FeedMe外卖快递",
         "pleaseSelectRestaurant": "请选择一个餐厅",
         "prefix": "前缀",
+        "printChecklist": "打印清单",
         "preOrder": "预订",
         "preOrderHint": "于今日 {today} 下单，客户可以在 {start} 和 {end} 之间预订。最多 7 天。",
         "printReceiptAfterClose": "自动关闭账单后打印收据",
@@ -199,6 +211,18 @@
         "processing": "处理中",
         "productSelected": "已选择商品",
         "promptAnonymousLoginDialog": "为匿名用户弹出登入对话框",
+        "queue": "排队",
+        "queueSettings": "排队设置",
+        "enableQueueOrder": "启用排队订单",
+        "autoCalledLimit": "自动呼叫限制",
+        "duration": "持续时间",
+        "disableRemoteQueue": "禁用远程排队",
+        "disableSMS": "禁用短信",
+        "codeSettings": "代码设置",
+        "addCodeSetting": "添加代码设置",
+        "current": "当前",
+        "paxMin": "最少人数",
+        "paxMax": "最多人数",
         "qrPay": "二维码支付",
         "terminalScanPay": "终端扫描支付",
         "terminalQrPay": "终端二维码支付",

package/src/modules/kiosk/interface.ts

@@ -14,6 +14,7 @@ export interface MfKioskDevice {
     slotInfo?: string,
     pinInfo?: string,
     deviceAppVersion?: string,
+    deviceAppOTAVersion?: string,
 }
 
 

package/src/stores/kiosk/mapper.ts

@@ -15,6 +15,7 @@ const toMfKioskDevice = (dto: KioskDeviceDto): MfKioskDevice => {
         slotInfo: dto.slotInfo ?? undefined,
         pinInfo: dto.pinInfo ?? undefined,
         deviceAppVersion: dto.deviceAppVersion ?? undefined,
+        deviceAppOTAVersion: dto.deviceAppOTAVersion ?? undefined,
     };
 };
 

package/src/stores/order-setting/mapper.ts

@@ -90,48 +90,35 @@ const convertOrderSettingDto = (dto: OrderSettingsDto): MfOrderSetting => {
   }
 }
 
-const toKiosk = (
-  kioskOrderSettings: OrderKioskSettings,
-  kioskDineInSeq?: OrderKioskDineInSequenceDto
-): MfKioskOrderSetting => {
+const toKiosk = (kioskOrderSettings: OrderKioskSettings | null | undefined, kioskDineInSeq?: OrderKioskDineInSequenceDto): MfKioskOrderSetting => {
   return {
-    dineIn: toKioskDineInSetting(
-      kioskDineInSeq ?? {
-        current: 0,
-        prefix: '#K'
-      },
-      kioskOrderSettings.dineIn ?? undefined
-    ),
+    dineIn: toKioskDineInSetting(kioskDineInSeq ?? {
+      current: 0,
+      prefix: '#K',
+    }, kioskOrderSettings?.dineIn ?? undefined),
     takeaway: {
       enabled: kioskOrderSettings?.canTakeaway ?? false,
-      submitOrderInstruction: kioskOrderSettings?.takeaway?.submitOrderInstruction
-        ? {
-          payAtCounter:
-            kioskOrderSettings.takeaway.submitOrderInstruction?.payAtCounter?.['en'] ?? null,
-          paid: kioskOrderSettings.takeaway.submitOrderInstruction?.paid?.['en'] ?? null
-        }
-        : defaultSubmitOrderInstruction
+      submitOrderInstruction: kioskOrderSettings?.takeaway?.submitOrderInstruction ? {
+        payAtCounter: kioskOrderSettings?.takeaway?.submitOrderInstruction?.payAtCounter?.['en'] ?? null,
+        paid: kioskOrderSettings?.takeaway?.submitOrderInstruction?.paid?.['en'] ?? null,
+      } : defaultSubmitOrderInstruction,
     },
     paymentSetting: {
       paymentTypes: kioskOrderSettings?.paymentSetting?.paymentTypes ?? [],
       offlinePaymentTypes: kioskOrderSettings?.paymentSetting?.offlinePaymentTypes ?? [],
-      ePaymentTypes:
-        kioskOrderSettings?.paymentSetting?.ePaymentTypes ??
-        FdoEPaymentMethod.parse({
-          card: {
-            terminal: false,
-            nfc: false
-          },
-          eWallet: {
-            qrPay: false,
-            scanPay: false,
-            terminalScanPay: false,
-            terminalQrPay: false
-          }
-        })
+      ePaymentTypes: kioskOrderSettings?.paymentSetting?.ePaymentTypes ?? FdoEPaymentMethod.parse({
+        card: {
+          terminal: false,
+          nfc: false
+        },
+        eWallet: {
+          qrPay: false,
+          scanPay: false
+        }
+      }),
     },
     menuItem: {
-      showAllOnly: kioskOrderSettings.menuItem?.showAllOnly ?? false
+      showAllOnly: kioskOrderSettings?.menuItem?.showAllOnly ?? false,
     }
   }
 }

package/src/stores/restaurant/index.ts

@@ -3,20 +3,24 @@ import { restaurantApi, type RestaurantSettingDoc } from '@/api/restaurant-setti
 import {
   F_FEATURE,
   F_PAYOUT_ACCOUNT_STATUS,
-  FdoFoodpandaSettings,
   FdoRestaurantDineIn,
   FdoRestaurantFeedmeDelivery,
   FdoRestaurantInHouseDelivery,
   FdoRestaurantPickup,
   FdoServiceChargeSetting,
-  FdoShopeeFoodSettings,
   type FdoAddress,
   type FdoProfile,
   FdoRestaurant,
   FdoRestaurantSetting,
   type FdoEffectGroup
 } from '@feedmepos/core/entity'
-import { FdoDeliverooSettings, FdoGrabfoodSettings, FdoExternalSetting } from '@entity'
+import {
+  FdoDeliverooSettings,
+  FdoGrabfoodSettings,
+  FdoExternalSetting,
+  FdoFoodpandaSettings,
+  FdoShopeeFoodSettings
+} from '@entity'
 import { FeatureFlag, Pos } from '@feedmepos/core'
 import { SvcConfig } from '@/api'
 import { remoteOrderApi } from '@/api/remoteOrder'

package/src/views/all-orders/FilterStatus.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
-import { F_SHOPEEFOOD_ORDER_STATUS, GF_ORDER_STATUS, FP_ORDER_STATUS } from '@feedmepos/core/entity'
+import { F_SHOPEEFOOD_ORDER_STATUS, GF_ORDER_STATUS, FP_ORDER_STATUS } from '@entity'
 import { F_ORDER_STATUS } from '@feedmepos/ordering/package/entity'
 import { sentenceCase } from 'change-case'
 import FilterStatusMenu from './FilterStatusMenu.vue'

package/src/views/kiosk/devices/KioskDeviceCard.vue

@@ -29,6 +29,12 @@
               device.deviceAppVersion ?? 'Below 0.0.42'
             }}</span>
           </div>
+          <div class="flex flex-col gap-1 mb-2">
+            <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">OTA Version</span>
+            <span class="fm-typo-en-body-lg-600 block">{{
+              device.deviceAppOTAVersion ?? 'Not available'
+            }}</span>
+          </div>
           <div class="flex flex-col gap-1 mb-2">
             <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">PIN Code</span>
             <span class="fm-typo-en-body-lg-600 block">{{ isPinUpdate ? 'Yes' : 'No' }}</span>

package/src/views/order-settings/OrderSettingsView.vue

@@ -25,6 +25,7 @@ import SmsSetting from './sms/SmsSetting.vue'
 // import DiscountRuleSetting from './discount-rule/DiscountRuleSetting.vue'
 
 import GeneralSetting from './general/GeneralSetting.vue'
+import QueueSetting from './queue/QueueSetting.vue'
 import { useI18n, useCoreStore } from '@feedmepos/mf-common'
 import { useMenuStore } from '@/stores/menu/menu'
 import { useSnackbarFunctions } from '@/components/snackbar'
@@ -41,6 +42,7 @@ type OrderSettingMenuItemValue =
   | 'sms'
   // | 'discountRule'
   | 'general'
+  | 'queue'
 const selectedOrderSetting = ref<OrderSettingMenuItemValue>('delivery')
 
 const settingItem = computed<FmTabProps[]>(() => [
@@ -50,7 +52,8 @@ const settingItem = computed<FmTabProps[]>(() => [
   // { label: t('order.serviceCharge'), value: 'servicecharge' },
   // { label: t('order.discountRule.title'), value: 'discountRule' },
   { label: t('order.sms'), value: 'sms' },
-  { label: t('order.general'), value: 'general' }
+  { label: t('order.general'), value: 'general' },
+  { label: t('order.queue'), value: 'queue' }
 ])
 
 const currentComponent = computed(() => {
@@ -69,6 +72,8 @@ const currentComponent = computed(() => {
     //   return DiscountRuleSetting
     case 'general':
       return GeneralSetting
+    case 'queue':
+      return QueueSetting
   }
 })
 
@@ -84,9 +89,12 @@ watch(currentRestaurant, async (newRestaurant) => {
   }
 })
 
-watch(() => menuStore.catalogOptionsError, (errorKey) => {
-  if (errorKey) {
-    showError(t(errorKey))
+watch(
+  () => menuStore.catalogOptionsError,
+  (errorKey) => {
+    if (errorKey) {
+      showError(t(errorKey))
+    }
   }
-})
+)
 </script>

package/src/views/order-settings/delivery/delivery.data.ts

@@ -1,9 +1,12 @@
-import type { FdoDeliverooSettings, FdoExternalSetting } from '@entity';
-import {
-  FdoRestaurantFeedmeDelivery,
+import type {
+  FdoDeliverooSettings,
+  FdoExternalSetting,
   FdoGrabfoodSettings,
   FdoShopeeFoodSettings,
-  FdoFoodpandaSettings,
+  FdoFoodpandaSettings
+} from '@entity';
+import {
+  FdoRestaurantFeedmeDelivery,
   FdoRestaurantInHouseDelivery
 } from '@feedmepos/core/entity'
 

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { FdoFoodpandaReportCalculationConfig, FdoLinkedDelivery } from '@feedmepos/core/entity'
-import { FdoFoodpandaSettings } from '@entity'
+import { FdoLinkedDelivery } from '@feedmepos/core/entity'
+import { FdoFoodpandaReportCalculationConfig, FdoFoodpandaSettings } from '@entity'
 import { type PropType, reactive, computed } from 'vue'
 import IntegratedDelivery from './IntegratedDelivery.vue'
 import { useCoreStore } from '@feedmepos/mf-common'

package/src/views/order-settings/dine-in/DineInSetting.vue

@@ -65,11 +65,18 @@
       </div>
 
       <FmSwitch
-        :model-value="orderSetting?.v3Settings.dineInCanTakeaway ?? false"
+        :model-value="orderSetting?.v3Settings?.dineInCanTakeaway ?? false"
         :label="t('order.dineInCanTakeaway')"
         label-placement="right"
         @update:model-value="updateDineInCanTakeaway"
       ></FmSwitch>
+
+      <FmSwitch
+        :model-value="orderSetting?.dineInSettings?.printChecklist ?? false"
+        :label="t('order.printChecklist')"
+        label-placement="right"
+        @update:model-value="updatePrintChecklist"
+      ></FmSwitch>
     </div>
     <div class="p-[1.5rem] flex flex-col gap-2 m-5 w-2/3">
       <PaymentType
@@ -161,7 +168,7 @@ function enableLastOrder(v: boolean) {
 }
 
 function updateDineInCanTakeaway(v: boolean) {
-  if (orderSetting.value) {
+  if (orderSetting.value?.v3Settings) {
     orderSetting.value.v3Settings.dineInCanTakeaway = v
   }
 }
@@ -172,6 +179,15 @@ function updateLastOrderMinutesBeforeClose(minutes: number) {
   }
 }
 
+function updatePrintChecklist(v: boolean) {
+  if (orderSetting.value) {
+    if (!orderSetting.value.dineInSettings) {
+      orderSetting.value.dineInSettings = {}
+    }
+    orderSetting.value.dineInSettings.printChecklist = v
+  }
+}
+
 function initDineInSetting(): FdoRestaurantDineIn {
   return {
     ignoreStock: false,

package/src/views/order-settings/general/GeneralSetting.vue

@@ -151,7 +151,7 @@ async function init(): Promise<void> {
 }
 
 function updateAnonymousLoginDialog(v: boolean) {
-  if (orderSetting.value) {
+  if (orderSetting.value?.v3Settings) {
     orderSetting.value.v3Settings.anonymousLoginDialog = v
   }
 }
@@ -188,7 +188,7 @@ function updateSeq(key: SequenceKey, dtoKey: string, dto?: number) {
 }
 
 function updateSubItemDisplayMode(v: boolean) {
-  if (orderSetting.value) {
+  if (orderSetting.value?.v3Settings) {
     if (v) {
       orderSetting.value.v3Settings.subItemDisplayMode = F_ORDER_SUBITEM_DISPLAY_MODE.enum.LIST
     } else {

package/src/views/order-settings/queue/PresetRemarksSheet.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref, watch, type PropType } from 'vue'
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  initialValue: {
+    type: Array as PropType<string[]>,
+    default: () => []
+  }
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', remarks: string[]): void
+}>()
+
+const remarks = ref<string[]>([...props.initialValue])
+const newRemark = ref('')
+
+watch(
+  () => props.initialValue,
+  (newValue) => {
+    remarks.value = [...newValue]
+  }
+)
+
+watch(
+  remarks,
+  (newValue) => {
+    const filtered = newValue.filter(remark => remark && remark.trim())
+    emit('update:modelValue', filtered)
+  },
+  { deep: true }
+)
+
+function addRemark() {
+  if (newRemark.value.trim()) {
+    remarks.value.push(newRemark.value.trim())
+    newRemark.value = ''
+  }
+}
+
+function removeRemark(index: number) {
+  remarks.value.splice(index, 1)
+}
+
+function updateRemark(index: number, value: string) {
+  remarks.value[index] = value
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 p-6">
+    <!-- Add New Remark Section -->
+    <div class="flex flex-col gap-3">
+      <span class="fm-typo-en-body-md-600">{{ t('order.addNewRemark') }}</span>
+      <div class="flex gap-3">
+        <FmTextField
+          v-model="newRemark"
+          :placeholder="t('order.enterRemark')"
+          @keydown.enter="addRemark"
+          class="flex-1"
+        />
+        <FmButton
+          variant="secondary"
+          :label="t('order.add')"
+          icon="add"
+          @click="addRemark"
+          :disabled="!newRemark.trim()"
+        />
+      </div>
+    </div>
+
+    <!-- Existing Remarks Section -->
+    <div v-if="remarks.length > 0" class="flex flex-col gap-3">
+      <span class="fm-typo-en-body-md-600">{{ t('order.existingRemarks') }}</span>
+      <div class="flex flex-col gap-3 items-start">
+        <div
+          v-for="(remark, index) in remarks"
+          :key="index"
+          class="flex items-center gap-3 bg-gray-50 p-4 rounded-lg"
+        >
+          <FmTextField
+            :model-value="remark"
+            @update:model-value="(v: string) => updateRemark(index, v)"
+            class="min-w-[400px]"
+          />
+          <FmButton
+            color="error"
+            icon="delete"
+            @click="removeRemark(index)"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Empty State -->
+    <div v-else class="text-gray-400 text-sm text-center py-8">
+      {{ t('order.noPresetRemarksAdded') }}
+    </div>
+  </div>
+</template>