@feedmepos/mf-order-setting 0.0.28 → 0.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@feedmepos/mf-order-setting",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "type": "module",
   "module": "./dist/app.js",
   "license": "UNLICENSED",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@feedmepos/core": "^2.14.19",
-    "@feedmepos/menu": "^1.5.18",
+    "@feedmepos/menu": "^1.5.21",
     "@feedmepos/mf-common": "1.20.0-beta.2",
     "@feedmepos/ordering": "^0.0.3",
     "@feedmepos/ui-library": "1.5.2-beta.1",

package/src/api/remoteOrder/index.ts

@@ -88,6 +88,9 @@ export const remoteOrderApi = {
     async syncGrabfoodMenu(merchantId: string): Promise<FdoGrabfoodSettings> {
       return getData(await deliveryClientInstance('grabfood').get(`/menu-sync/${merchantId}`));
     },
+    async startSelfServeFlow(restaurantId: string): Promise<string> {
+      return getData(await deliveryClientInstance('grabfood').get(`/setting/integration-url/${restaurantId}`));
+    },
 
     async readShopeefood(restaurantId: string): Promise<FdoShopeeFoodSettings | null> {
       return getData(await deliveryClientInstance('shopeefood').get(`/setting/${restaurantId}`));

package/src/locales/en-US.json

@@ -207,6 +207,11 @@
         "selectRestaurant": "Select Restaurant",
         "selectServiceChargeType": "Select service charge type",
         "selectTable": "Select table",
+        "selfServeActivation": {
+            "title": "Self Serve Activation",
+            "subTitle": "New to the flow? Click here to",
+            "learnMore": "learn more"
+        },
         "serve": "serve",
         "serviceCharge": "Service Charge",
         "serviceChargeRule": "* Service Charge required POS version 4.0.0 or higher",
@@ -286,7 +291,9 @@
             "syncSuccess": "Discount rule setting synced to all restaurants",
             "title": "Discount Rule",
             "updateSuccess": "Discount rule setting updated",
-            "version": "Version"
+            "version": "Version",
+            "promotion": "Promotion",
+            "voucher": "Voucher"
         }
     }
 }

package/src/locales/th-TH.json

@@ -203,6 +203,11 @@
         "selectRestaurant": "เลือกร้านอาหาร",
         "selectServiceChargeType": "เลือกประเภทค่าบริการ",
         "selectTable": "เลือกโต๊ะ",
+        "selfServeActivation": {
+            "title": "เปิดใช้งานการบริการตนเอง",
+            "subTitle": "เปิดใช้งานการบริการตนเองเพื่อให้ลูกค้าสามารถสั่งซื้อได้ด้วยตนเอง",
+            "learnMore": "เรียนรู้เพิ่มเติม"
+        },
         "serve": "เสิร์ฟ",
         "serviceCharge": "ค่าบริการ",
         "serviceChargeRule": "* ค่าบริการจำเป็นต้องใช้ POS เวอร์ชัน 4.0.0 ขึ้นไป",
@@ -281,7 +286,9 @@
             "syncSuccess": "ซิงค์กฎส่วนลดไปยังร้านอาหารทั้งหมดเรียบร้อยแล้ว",
             "title": "กฎส่วนลด",
             "updateSuccess": "อัปเดตกฎส่วนลดเรียบร้อยแล้ว",
-            "version": "เวอร์ชัน"
+            "version": "เวอร์ชัน",
+            "promotion": "โปรโมชั่น",
+            "voucher": "บัตรกำนัล"
         }
     }
 }

package/src/locales/zh-CN.json

@@ -210,6 +210,11 @@
         "selectRestaurant": "选择餐厅",
         "selectServiceChargeType": "选择服务费类型",
         "selectTable": "选择餐桌",
+        "selfServeActivation": {
+            "title": "自助激活对接",
+            "subTitle": "第一次使用这个流程？点击此处",
+            "learnMore": "了解更多"
+        },
         "serve": "服务",
         "serviceCharge": "服务费",
         "serviceChargeRule": "* 服务费功能仅适用于POS版本4.0.0或更高版本。",
@@ -289,7 +294,9 @@
             "syncSuccess": "折扣规则设置已同步到所有餐厅",
             "title": "折扣规则",
             "updateSuccess": "折扣规则设置已更新",
-            "version": "版本"
+            "version": "版本",
+            "promotion": "促销",
+            "voucher": "代金券"
         }
     }
 }

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

@@ -88,7 +88,7 @@ async function syncMenu() {
 }
 
 import { useSnackbarFunctions } from '@/components/snackbar'
-const { showSuccess } = useSnackbarFunctions()
+const { showSuccess, showError } = useSnackbarFunctions()
 
 async function flowTestOrder() {
   await startAsyncCallWithErr(async () => {
@@ -108,6 +108,20 @@ async function cancelTestOrder() {
   })
   showSuccess('Completed. ')
 }
+
+async function startSelfServeFlow() {
+  const url = await startAsyncCallWithErr(async () => {
+    return await remoteOrderApi.integratedDelivery.startSelfServeFlow(
+      currentRestaurant.value?._id ?? ''
+    )
+  })
+
+  if (!url) {
+    showError(`Failed to get integration url for ${currentRestaurant?.value?._id}`)
+  }
+
+  window.open(url, '_blank')
+}
 </script>
 
 <template>
@@ -120,4 +134,27 @@ async function cancelTestOrder() {
     @flow-test-order="flowTestOrder"
     @cancel-test-order="cancelTestOrder"
   />
+  <div v-if="canUseAutoDeliveryIntegration === true">
+    <div class="flex flex-row mt-5 items-center">
+      <div class="flex-grow fm-typo-en-title-sm-600 mb-3 mt-3">
+        {{ t('order.selfServeActivation.title') }}
+      </div>
+      <FmButton
+        variant="primary"
+        :label="t('order.start')"
+        @click="startSelfServeFlow"
+        class="m-1"
+      />
+    </div>
+    <div>
+      {{ t('order.selfServeActivation.subTitle') }}
+      <a
+        href="https://doc.clickup.com/25608366/d/h/rdg5e-52596/7d44e2bd89752e0"
+        target="_blank"
+        style="color: blue; text-decoration: underline"
+      >
+        {{ t('order.selfServeActivation.learnMore') }}</a
+      >.
+    </div>
+  </div>
 </template>

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

@@ -85,6 +85,7 @@
           v-model="sideSheet"
         >
           <div>
+            <FmSearch v-model="sideSheetSearch" :placeholder="t('order.search')" class="mb-4" />
             <div class="text-fm-color-typo-secondary mt-5 mb-5 flex flex-row">
               {{
                 t('order.discountRule.effectSelected', {
@@ -101,22 +102,30 @@
             ></FmCheckbox>
 
             <div
-              v-for="pEffect in processedEffects"
+              v-for="pEffect in filteredProcessedEffects"
               :key="pEffect.id"
-              class="flex flex-col mb-2 ml-5"
+              class="flex flex-col mb-2 ml-5 cursor-pointer"
             >
               <div class="flex flex-row">
-                <div class="flex flex-row items-center">
+                <div
+                  class="flex flex-row items-center"
+                  @click="selectEffect(pEffect, !pEffect.isSelectedInCurrentGroup)"
+                >
                   <FmCheckbox
                     :model-value="pEffect.isSelectedInCurrentGroup"
                     value=""
                     @update:model-value="(v) => selectEffect(pEffect, v)"
                     :disabled="pEffect.isDisabled"
                   />
-                  <div class="ml-2">
+                  <div class="ml-2 flex flex-wrap gap-2 items-center">
+                    <span
+                      class="fm-corner-radius-md px-4 py-[2px] fm-typo-en-body-md-600 text-fm-color-typo-neutral bg-fm-color-neutral-gray-100 max-w-full"
+                    >
+                      {{ pEffect.type }}
+                    </span>
                     <span>{{ pEffect.name }}</span>
                     <template v-if="pEffect.showUsedInOtherGroupHint">
-                      <span class="text-sm text-fm-color-typo-secondary pl-1">
+                      <span class="text-sm text-fm-color-typo-secondary">
                         ({{ t('order.discountRule.effectUsedInOtherGroup') }})
                       </span>
                     </template>
@@ -187,6 +196,11 @@ import { components } from '@feedmepos/ui-library'
 interface Effect {
   id: string
   name: string
+  type: string
+  isSelectedInCurrentGroup: boolean
+  isInOtherGroups: boolean
+  isDisabled: boolean
+  showUsedInOtherGroupHint: boolean
 }
 
 const { startAsyncCallWithErr, isLoading } = useLoading()
@@ -217,6 +231,7 @@ const lastUpdatedAt = ref<string | null>(null)
 const effects = ref<Effect[]>([])
 const selectedEffectGroup = ref<FdoEffectGroup | null>(null)
 const selectedEffectIndex = ref<number | null>(null)
+const sideSheetSearch = ref('')
 
 const pad = (n: number) => n.toString().padStart(2, '0')
 
@@ -284,11 +299,13 @@ const processedEffects = computed(() => {
     const isSelectedInCurrentGroup =
       selectedEffectGroup.value?.effectIds?.includes(effect.id) ?? false
     const isInOtherGroups = isEffectInOtherGroups(effect.id, selectedEffectIndex.value)
+    const isPromotion = effect.id.startsWith('promotion_')
 
     return {
       ...effect,
       id: effect.id,
       name: effect.name,
+      type: isPromotion ? t('order.discountRule.promotion') : t('order.discountRule.voucher'),
       isSelectedInCurrentGroup,
       isInOtherGroups,
       isDisabled: isInOtherGroups && !isSelectedInCurrentGroup,
@@ -297,25 +314,25 @@ const processedEffects = computed(() => {
   })
 })
 
-const isAllSelectedForCurrentGroup = computed(() => {
-  if (!selectedEffectGroup.value || !effects.value.length || selectedEffectIndex.value === null)
-    return false
-
-  const selectableEffectsInCurrentGroup = effects.value.filter(
-    (effect: Effect) =>
-      selectedEffectGroup.value?.effectIds.includes(effect.id) ||
-      !isEffectInOtherGroups(effect.id, selectedEffectIndex.value)
+const filteredProcessedEffects = computed(() => {
+  const search = sideSheetSearch.value.trim().toLowerCase()
+  if (!search) return processedEffects.value
+  return processedEffects.value.filter(
+    (effect) =>
+      effect.name.toLowerCase().includes(search) || effect.type.toLowerCase().includes(search)
   )
+})
 
-  if (!selectableEffectsInCurrentGroup.length && effects.value.length > 0) {
-    return false
-  }
-  if (!selectableEffectsInCurrentGroup.length && effects.value.length === 0) {
+const isAllSelectedForCurrentGroup = computed(() => {
+  if (
+    !selectedEffectGroup.value ||
+    !filteredProcessedEffects.value.length ||
+    selectedEffectIndex.value === null
+  )
     return false
-  }
 
-  return selectableEffectsInCurrentGroup.every((effect: Effect) =>
-    selectedEffectGroup.value?.effectIds.includes(effect.id)
+  return filteredProcessedEffects.value.every(
+    (effect: Effect) => effect.isSelectedInCurrentGroup || effect.isDisabled
   )
 })
 
@@ -323,8 +340,8 @@ function selectAllEffects(v: boolean) {
   if (!selectedEffectGroup.value || selectedEffectIndex.value === null) return
 
   if (v) {
-    const effectsToAdd = effects.value
-      .filter((effect: Effect) => !isEffectInOtherGroups(effect.id, selectedEffectIndex.value))
+    const effectsToAdd = filteredProcessedEffects.value
+      .filter((effect: Effect) => !effect.isInOtherGroups)
       .map((effect: Effect) => effect.id)
     const currentEffectsInGroup = selectedEffectGroup.value.effectIds || []
     selectedEffectGroup.value.effectIds = [...new Set([...currentEffectsInGroup, ...effectsToAdd])]
@@ -353,6 +370,7 @@ function selectEffect(effect: { id: string; isInOtherGroups: boolean }, isSelect
 }
 
 function toggleSideSheet(index: number) {
+  sideSheetSearch.value = ''
   selectedEffectGroup.value = effectGroups.value[index] ? { ...effectGroups.value[index] } : null
   selectedEffectIndex.value = index
   sideSheet.value = true