@feedmepos/mf-order-setting 0.0.93 → 0.0.94

package/package.json

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

package/src/api/native-app/index.ts

@@ -0,0 +1,26 @@
+import axios from 'axios'
+
+/**
+ * Whether a business has its own native app, from the public metadata endpoint
+ * Connect uses for the same gate (marketing-services `api/nativeApp.ts`). Push
+ * notifications only reach customers through a native app.
+ *
+ * Kept off the authenticated portal clients: the endpoint is public, and the
+ * portal token must not go to it.
+ */
+const publicClient = axios.create({ withCredentials: false, timeout: 5000 })
+
+export function nativeAppUrl(businessId: string, isDev: boolean): string {
+  const host = isDev ? 'api.feedmedev.vip' : 'api.feedme.vip'
+  return `https://${host}/metadata/${encodeURIComponent(businessId)}/native-app`
+}
+
+export async function getNativeApp(businessId: string, isDev: boolean): Promise<boolean> {
+  if (!/^[0-9a-f]{24}$/i.test(businessId)) throw new Error('Invalid business ID')
+  const { data } = await publicClient.get(nativeAppUrl(businessId, isDev))
+  // An answer for another business, or without `native`, is not an answer.
+  if (data?.businessId !== businessId || typeof data?.native !== 'boolean') {
+    throw new Error('Unexpected native-app response')
+  }
+  return data.native
+}

package/src/api/native-app/native-app.spec.ts

@@ -0,0 +1,42 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { get } = vi.hoisted(() => ({ get: vi.fn() }))
+vi.mock('axios', () => ({ default: { create: () => ({ get }) } }))
+
+import { getNativeApp, nativeAppUrl } from '.'
+
+const BUSINESS = '69cddfe676e1e9001cd9450a'
+
+beforeEach(() => get.mockReset())
+
+describe('getNativeApp', () => {
+  it('reads the public metadata endpoint of the right environment', () => {
+    expect(nativeAppUrl(BUSINESS, true)).toBe(
+      `https://api.feedmedev.vip/metadata/${BUSINESS}/native-app`
+    )
+    expect(nativeAppUrl(BUSINESS, false)).toBe(
+      `https://api.feedme.vip/metadata/${BUSINESS}/native-app`
+    )
+  })
+
+  it('returns `native` for the business asked about', async () => {
+    get.mockResolvedValue({
+      data: { businessId: BUSINESS, native: true, platforms: ['ios', 'android'] }
+    })
+    await expect(getNativeApp(BUSINESS, true)).resolves.toBe(true)
+    get.mockResolvedValue({ data: { businessId: BUSINESS, native: false, platforms: [] } })
+    await expect(getNativeApp(BUSINESS, true)).resolves.toBe(false)
+  })
+
+  it('rejects an answer for another business, or one without `native`', async () => {
+    get.mockResolvedValue({ data: { businessId: '6ad6d30f77c221001cd6c1a2', native: true } })
+    await expect(getNativeApp(BUSINESS, true)).rejects.toThrow()
+    get.mockResolvedValue({ data: { businessId: BUSINESS } })
+    await expect(getNativeApp(BUSINESS, true)).rejects.toThrow()
+  })
+
+  it('does not call out for a malformed business id', async () => {
+    await expect(getNativeApp('../x', true)).rejects.toThrow()
+    expect(get).not.toHaveBeenCalled()
+  })
+})

package/src/locales/en-US.json

@@ -503,6 +503,18 @@
             "hint": "Tried in order. The next channel is used only if the one before it cannot reach the customer.",
             "add": "Add channel",
             "pushNote": "Push only reaches customers who have the app installed with notifications allowed. Otherwise the next channel is tried.",
+            "pushInRoute": "{channel} ({status})",
+            "pushAvailability": {
+                "checking": "Checking availability",
+                "requiresNativeApp": "Requires a native app",
+                "unavailable": "Unable to check availability",
+                "contactSales": "Contact sales",
+                "dialogMessage": "Push notifications require a native app. Please contact your FeedMe sales representative to enable one.",
+                "retry": "Retry",
+                "removePush": "Remove Push",
+                "removeBeforeSave": "Confirm native-app availability or remove Push before saving.",
+                "close": "Close"
+            },
             "alongside": "{channel} is always sent, plus {route}",
             "everyone": "All customers: {route}",
             "member": "Signed-in customers: {route}",

package/src/locales/ja-JP.json

@@ -407,6 +407,18 @@
       "hint": "上から順に試します。前のチャネルでお客様に届かない場合のみ、次のチャネルを使います。",
       "add": "チャネルを追加",
       "pushNote": "プッシュ通知は、アプリをインストールし通知を許可しているお客様にのみ届きます。届かない場合は次のチャネルを試します。",
+      "pushInRoute": "{channel}（{status}）",
+      "pushAvailability": {
+        "checking": "利用可否を確認中",
+        "requiresNativeApp": "ネイティブアプリが必要です",
+        "unavailable": "利用可否を確認できませんでした",
+        "contactSales": "営業担当に連絡",
+        "dialogMessage": "プッシュ通知にはネイティブアプリが必要です。有効にするには FeedMe の営業担当者にお問い合わせください。",
+        "retry": "再試行",
+        "removePush": "プッシュを削除",
+        "removeBeforeSave": "保存する前にネイティブアプリの利用可否を確認するか、プッシュを削除してください。",
+        "close": "閉じる"
+      },
       "alongside": "{channel}は常に送信、加えて {route}",
       "everyone": "すべてのお客様：{route}",
       "member": "ログイン済みのお客様：{route}",

package/src/locales/th-TH.json

@@ -503,6 +503,18 @@
       "hint": "ลองตามลำดับ ช่องทางถัดไปจะใช้เมื่อช่องทางก่อนหน้าส่งถึงลูกค้าไม่ได้เท่านั้น",
       "add": "เพิ่มช่องทาง",
       "pushNote": "การแจ้งเตือนแบบพุชจะส่งถึงเฉพาะลูกค้าที่ติดตั้งแอปและอนุญาตการแจ้งเตือน มิฉะนั้นจะลองช่องทางถัดไป",
+      "pushInRoute": "{channel} ({status})",
+      "pushAvailability": {
+        "checking": "กำลังตรวจสอบความพร้อมใช้งาน",
+        "requiresNativeApp": "ต้องมีแอปเนทีฟ",
+        "unavailable": "ไม่สามารถตรวจสอบความพร้อมใช้งานได้",
+        "contactSales": "ติดต่อฝ่ายขาย",
+        "dialogMessage": "การแจ้งเตือนแบบพุชต้องมีแอปเนทีฟ โปรดติดต่อเจ้าหน้าที่ฝ่ายขาย FeedMe ของคุณเพื่อเปิดใช้งาน",
+        "retry": "ลองอีกครั้ง",
+        "removePush": "นำพุชออก",
+        "removeBeforeSave": "ยืนยันความพร้อมใช้งานของแอปเนทีฟหรือนำพุชออกก่อนบันทึก",
+        "close": "ปิด"
+      },
       "alongside": "ส่ง{channel}เสมอ และ {route}",
       "everyone": "ลูกค้าทุกคน: {route}",
       "member": "ลูกค้าที่เข้าสู่ระบบ: {route}",

package/src/locales/zh-CN.json

@@ -507,6 +507,18 @@
       "hint": "按顺序尝试。只有前一个渠道无法送达顾客时，才会使用下一个。",
       "add": "添加渠道",
       "pushNote": "推送通知只能送达已安装应用并允许通知的顾客，否则会尝试下一个渠道。",
+      "pushInRoute": "{channel}（{status}）",
+      "pushAvailability": {
+        "checking": "正在检查可用性",
+        "requiresNativeApp": "需要原生应用",
+        "unavailable": "无法检查可用性",
+        "contactSales": "联系销售",
+        "dialogMessage": "推送通知需要原生应用。请联系您的 FeedMe 销售代表以启用原生应用。",
+        "retry": "重试",
+        "removePush": "移除推送",
+        "removeBeforeSave": "请确认原生应用可用，或移除推送后再保存。",
+        "close": "关闭"
+      },
       "alongside": "始终发送{channel}，另外：{route}",
       "everyone": "所有顾客：{route}",
       "member": "已登录顾客：{route}",

package/src/views/order-settings/components/NotifyChannelEditor.spec.ts

@@ -0,0 +1,184 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { defineComponent, h, ref } from 'vue'
+
+const BUSINESS = '69cddfe676e1e9001cd9450a'
+const getNativeApp = vi.fn()
+const openDialog = vi.fn()
+
+vi.mock('@feedmepos/mf-common', () => ({
+  // Parameters are shown as key(value|value), so the summary's nesting can be read.
+  useI18n: () => ({
+    t: (key: string, params?: Record<string, string>) =>
+      params ? `${key}(${Object.values(params).join('|')})` : key
+  }),
+  useCoreStore: () => ({
+    currentCountry: ref('MY'),
+    currentBusiness: ref({ _id: BUSINESS }),
+    namespace: ref('dev')
+  })
+}))
+vi.mock('@feedmepos/ui-library', () => ({ useDialog: () => ({ open: openDialog }) }))
+vi.mock('@/api/native-app', () => ({ getNativeApp: (...args: unknown[]) => getNativeApp(...args) }))
+
+import NotifyChannelEditor from './NotifyChannelEditor.vue'
+import { resetPushAvailability } from './push-availability'
+
+const FmButton = defineComponent({
+  props: { label: String, icon: String, variant: String, disabled: Boolean },
+  emits: ['click'],
+  setup:
+    (props, { emit }) =>
+    () =>
+      h('button', { 'data-icon': props.icon, onClick: () => emit('click') }, props.label)
+})
+const FmSelect = defineComponent({
+  name: 'FmSelect',
+  props: { items: Array, modelValue: null, placeholder: String },
+  setup: () => () => h('div', { class: 'fm-select' })
+})
+
+async function mountEditor(channels: string[], readonly = false) {
+  const w = mount(NotifyChannelEditor, {
+    props: { modelValue: channels as never, readonly },
+    global: { stubs: { FmButton, FmSelect } }
+  })
+  await flushPromises()
+  return w
+}
+
+const offered = (w: Awaited<ReturnType<typeof mountEditor>>) =>
+  (w.findComponent(FmSelect).props('items') as { value: string }[]).map((item) => item.value)
+
+beforeEach(() => {
+  resetPushAvailability()
+  getNativeApp.mockReset()
+  openDialog.mockReset()
+})
+
+describe('NotifyChannelEditor: push only with a native app', () => {
+  it('asks once for the current business, on the right environment', async () => {
+    getNativeApp.mockResolvedValue(true)
+    await mountEditor([])
+    await mountEditor([])
+    expect(getNativeApp).toHaveBeenCalledTimes(1)
+    expect(getNativeApp).toHaveBeenCalledWith(BUSINESS, true)
+  })
+
+  it('native: offers Push notification, with no availability note', async () => {
+    getNativeApp.mockResolvedValue(true)
+    const w = await mountEditor([])
+    expect(offered(w)).toEqual(['SMS', 'APP_INBOX', 'PUSH_NOTIFICATION'])
+    expect(w.find('.push-availability').exists()).toBe(false)
+  })
+
+  it('non-native: does not offer Push, says why, and offers Contact sales', async () => {
+    getNativeApp.mockResolvedValue(false)
+    const w = await mountEditor([])
+    expect(offered(w)).toEqual(['SMS', 'APP_INBOX'])
+    expect(w.find('.push-availability').text()).toContain(
+      'order.notifyChannel.pushAvailability.requiresNativeApp'
+    )
+    expect(w.find('.retry-push').exists()).toBe(false)
+    await w.find('.contact-sales').trigger('click')
+    expect(openDialog).toHaveBeenCalledWith(
+      expect.objectContaining({ message: 'order.notifyChannel.pushAvailability.dialogMessage' })
+    )
+  })
+
+  it('while checking: does not offer Push yet', async () => {
+    getNativeApp.mockReturnValue(new Promise(() => {}))
+    const w = await mountEditor([])
+    expect(offered(w)).toEqual(['SMS', 'APP_INBOX'])
+    expect(w.find('.push-availability').text()).toContain(
+      'order.notifyChannel.pushAvailability.checking'
+    )
+  })
+
+  it('failed: does not offer Push, and Retry checks again', async () => {
+    getNativeApp.mockRejectedValueOnce(new Error('timeout')).mockResolvedValueOnce(true)
+    const w = await mountEditor([])
+    expect(offered(w)).toEqual(['SMS', 'APP_INBOX'])
+    expect(w.find('.push-availability').text()).toContain(
+      'order.notifyChannel.pushAvailability.unavailable'
+    )
+    expect(w.find('.contact-sales').exists()).toBe(false)
+
+    await w.find('.retry-push').trigger('click')
+    await flushPromises()
+    expect(getNativeApp).toHaveBeenCalledTimes(2)
+    expect(offered(w)).toEqual(['SMS', 'APP_INBOX', 'PUSH_NOTIFICATION'])
+  })
+
+  it('a stored push on a non-native business is shown, flagged, and can be removed', async () => {
+    getNativeApp.mockResolvedValue(false)
+    const w = await mountEditor(['PUSH_NOTIFICATION', 'SMS'])
+    expect(w.text()).toContain('1. order.notifyChannel.channel.PUSH_NOTIFICATION')
+    expect(w.find('.remove-before-save').text()).toBe(
+      'order.notifyChannel.pushAvailability.removeBeforeSave'
+    )
+    expect(w.text()).not.toContain('order.notifyChannel.pushNote')
+
+    await w.find('.remove-push').trigger('click')
+    expect(w.emitted('update:modelValue')).toEqual([[['SMS']]])
+  })
+
+  it('a stored push on a native business is left alone', async () => {
+    getNativeApp.mockResolvedValue(true)
+    const w = await mountEditor(['PUSH_NOTIFICATION', 'SMS'])
+    expect(w.find('.remove-push').exists()).toBe(false)
+    expect(w.find('.remove-before-save').exists()).toBe(false)
+    expect(w.text()).toContain('order.notifyChannel.pushNote')
+  })
+
+  describe('the summary', () => {
+    const PUSH = 'order.notifyChannel.channel.PUSH_NOTIFICATION'
+    const SMS = 'order.notifyChannel.channel.SMS'
+    const INBOX = 'order.notifyChannel.channel.APP_INBOX'
+    const unconfirmed = (status: string) =>
+      `order.notifyChannel.pushInRoute(${PUSH}|order.notifyChannel.pushAvailability.${status})`
+
+    it('read-only, no native app: does not claim push, and says why', async () => {
+      getNativeApp.mockResolvedValue(false)
+      const w = await mountEditor(['PUSH_NOTIFICATION', 'SMS'], true)
+      expect(w.text()).toContain(
+        `order.notifyChannel.member(${unconfirmed('requiresNativeApp')} → ${SMS})`
+      )
+      expect(w.text()).not.toContain(`${PUSH} → ${SMS}`)
+      expect(w.text()).toContain(`order.notifyChannel.guest(${SMS})`)
+    })
+
+    it('read-only, check failed or still checking: push is marked the same way', async () => {
+      getNativeApp.mockRejectedValue(new Error('timeout'))
+      const failed = await mountEditor(['PUSH_NOTIFICATION', 'SMS'], true)
+      expect(failed.text()).toContain(`${unconfirmed('unavailable')} → ${SMS}`)
+
+      resetPushAvailability()
+      getNativeApp.mockReturnValue(new Promise(() => {}))
+      const checking = await mountEditor(['PUSH_NOTIFICATION', 'SMS'], true)
+      expect(checking.text()).toContain(`${unconfirmed('checking')} → ${SMS}`)
+    })
+
+    it('keeps App Inbox alongside, as routing still does with push in the list', async () => {
+      getNativeApp.mockResolvedValue(false)
+      const w = await mountEditor(['PUSH_NOTIFICATION', 'APP_INBOX', 'SMS'], true)
+      expect(w.text()).toContain(
+        `order.notifyChannel.alongside(${INBOX}|${unconfirmed('requiresNativeApp')} → ${SMS})`
+      )
+    })
+
+    it('the editable summary is labelled the same way', async () => {
+      getNativeApp.mockResolvedValue(false)
+      const w = await mountEditor(['PUSH_NOTIFICATION', 'SMS'])
+      expect(w.text()).toContain(`${unconfirmed('requiresNativeApp')} → ${SMS}`)
+    })
+
+    it('native: push is listed plainly', async () => {
+      getNativeApp.mockResolvedValue(true)
+      const w = await mountEditor(['PUSH_NOTIFICATION', 'SMS'], true)
+      expect(w.text()).toContain(`order.notifyChannel.member(${PUSH} → ${SMS})`)
+      expect(w.text()).not.toContain('order.notifyChannel.pushInRoute')
+    })
+  })
+})

package/src/views/order-settings/components/NotifyChannelEditor.vue

@@ -2,8 +2,10 @@
 import { computed } from 'vue'
 import { F_ORDER_NOTIFY_CHANNEL, planSends, resolveChannels } from '@entity'
 import { useCoreStore, useI18n } from '@feedmepos/mf-common'
+import { useDialog } from '@feedmepos/ui-library'
 
 import { canChooseNotifyChannels } from './notify-channel-country'
+import { pushBlocked, usePushAvailability } from './push-availability'
 
 const props = defineProps<{
   modelValue?: F_ORDER_NOTIFY_CHANNEL[] | null
@@ -26,8 +28,34 @@ const SELECTABLE: F_ORDER_NOTIFY_CHANNEL[] = [SMS, APP_INBOX, PUSH_NOTIFICATION]
 
 const channels = computed(() => props.modelValue ?? [])
 
+// Push only when the business has a native app, as in Connect. See push-availability.ts.
+const { availability, retry } = usePushAvailability()
+const pushOffered = computed(() => availability.value === 'native')
+const blocked = computed(() => pushBlocked(channels.value, availability.value))
+const pushAvailabilityText = computed(() =>
+  t(
+    'order.notifyChannel.pushAvailability.' +
+      (availability.value === 'checking'
+        ? 'checking'
+        : availability.value === 'non-native'
+          ? 'requiresNativeApp'
+          : 'unavailable')
+  )
+)
+
+const Dialog = useDialog()
+function contactSales() {
+  Dialog.open({
+    title: t('order.notifyChannel.pushAvailability.contactSales'),
+    message: t('order.notifyChannel.pushAvailability.dialogMessage'),
+    primaryActions: { text: t('order.notifyChannel.pushAvailability.close'), close: true }
+  })
+}
+
 const addable = computed(() =>
-  SELECTABLE.filter((c) => !channels.value.includes(c)).map((c) => ({
+  SELECTABLE.filter(
+    (c) => !channels.value.includes(c) && (c !== PUSH_NOTIFICATION || pushOffered.value)
+  ).map((c) => ({
     label: channelLabel(c),
     value: c
   }))
@@ -37,7 +65,18 @@ function channelLabel(channel: F_ORDER_NOTIFY_CHANNEL) {
   return t(`order.notifyChannel.channel.${channel}`)
 }
 
+// The summary keeps a stored push where routing puts it (it still decides whether
+// App Inbox goes alongside), but must not claim it reaches anyone until confirmed.
+function routeLabel(channel: F_ORDER_NOTIFY_CHANNEL) {
+  if (channel !== PUSH_NOTIFICATION || pushOffered.value) return channelLabel(channel)
+  return t('order.notifyChannel.pushInRoute', {
+    channel: channelLabel(channel),
+    status: pushAvailabilityText.value
+  })
+}
+
 function add(channel: F_ORDER_NOTIFY_CHANNEL) {
+  if (channel === PUSH_NOTIFICATION && !pushOffered.value) return
   emit('update:modelValue', [...channels.value, channel])
 }
 
@@ -58,9 +97,9 @@ function describe(hasAccount: boolean) {
   const { alongside, chain } = planSends(
     resolveChannels({ configured: channels.value, hasAppInboxUid: hasAccount })
   )
-  const route = chain.map(channelLabel).join(' → ')
+  const route = chain.map(routeLabel).join(' → ')
   return alongside.length
-    ? t('order.notifyChannel.alongside', { channel: channelLabel(alongside[0]), route })
+    ? t('order.notifyChannel.alongside', { channel: routeLabel(alongside[0]), route })
     : route
 }
 
@@ -88,7 +127,22 @@ const summary = computed(() => {
         :key="channel"
         class="flex items-center gap-2 border border-fm-color-neutral-gray-200 rounded px-3 py-1"
       >
-        <span class="flex-grow">{{ i + 1 }}. {{ channelLabel(channel) }}</span>
+        <span class="flex-grow">
+          {{ i + 1 }}. {{ channelLabel(channel) }}
+          <span
+            v-if="channel === PUSH_NOTIFICATION && !pushOffered"
+            class="ml-2 inline-flex rounded-[6px] bg-fm-color-system-warning-100 px-2 py-[3px] fm-typo-en-body-sm-400 text-fm-color-system-warning-400"
+          >
+            {{ pushAvailabilityText }}
+          </span>
+        </span>
+        <FmButton
+          v-if="channel === PUSH_NOTIFICATION && !pushOffered"
+          class="remove-push"
+          variant="tertiary"
+          :label="t('order.notifyChannel.pushAvailability.removePush')"
+          @click="remove(i)"
+        />
         <FmButton
           icon="arrow_upward"
           variant="tertiary"
@@ -111,8 +165,33 @@ const summary = computed(() => {
         :placeholder="t('order.notifyChannel.add')"
         @update:model-value="add"
       />
+      <div v-if="!pushOffered" class="push-availability flex items-center gap-2">
+        <span class="fm-typo-en-body-sm-400 text-fm-color-neutral-gray-400">
+          {{ channelLabel(PUSH_NOTIFICATION) }}: {{ pushAvailabilityText }}
+        </span>
+        <FmButton
+          v-if="availability === 'non-native'"
+          class="contact-sales"
+          variant="tertiary"
+          :label="t('order.notifyChannel.pushAvailability.contactSales')"
+          @click="contactSales"
+        />
+        <FmButton
+          v-if="availability === 'failed'"
+          class="retry-push"
+          variant="tertiary"
+          :label="t('order.notifyChannel.pushAvailability.retry')"
+          @click="retry"
+        />
+      </div>
+      <span
+        v-if="blocked"
+        class="remove-before-save fm-typo-en-body-sm-400 text-fm-color-system-warning-400"
+      >
+        {{ t('order.notifyChannel.pushAvailability.removeBeforeSave') }}
+      </span>
       <span
-        v-if="channels.includes(PUSH_NOTIFICATION)"
+        v-else-if="channels.includes(PUSH_NOTIFICATION)"
         class="fm-typo-en-body-sm-400 text-fm-color-neutral-gray-400"
       >
         {{ t('order.notifyChannel.pushNote') }}

package/src/views/order-settings/components/push-availability.spec.ts

@@ -0,0 +1,59 @@
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('@feedmepos/mf-common', () => ({ useCoreStore: vi.fn() }))
+vi.mock('@/api/native-app', () => ({ getNativeApp: vi.fn() }))
+
+import { pushBlocked } from './push-availability'
+
+const read = (path: string) => readFileSync(fileURLToPath(new URL(path, import.meta.url)), 'utf8')
+
+describe('pushBlocked', () => {
+  it('blocks a stored push unless the business is known to have a native app', () => {
+    expect(pushBlocked(['PUSH_NOTIFICATION', 'SMS'], 'non-native')).toBe(true)
+    expect(pushBlocked(['SMS', 'PUSH_NOTIFICATION'], 'failed')).toBe(true)
+    expect(pushBlocked(['PUSH_NOTIFICATION'], 'checking')).toBe(true)
+    expect(pushBlocked(['PUSH_NOTIFICATION'], 'native')).toBe(false)
+  })
+
+  it('never blocks a list without push', () => {
+    expect(pushBlocked(['SMS', 'APP_INBOX'], 'non-native')).toBe(false)
+    expect(pushBlocked([], 'failed')).toBe(false)
+    expect(pushBlocked(undefined, 'non-native')).toBe(false)
+    expect(pushBlocked(null, 'checking')).toBe(false)
+  })
+})
+
+// The settings pages are not mounted in tests (they need the portal's APIs), so
+// their save guards are checked in the source.
+describe('saves are blocked while a stored push cannot be confirmed', () => {
+  it('queue setting: before the order setting is written', () => {
+    const page = read('../queue/QueueSetting.vue')
+    const save = page.slice(page.indexOf('async function updateOrderSetting'))
+    const guard = save.indexOf('pushBlocked(queueSettings.value.channels, pushAvailability.value)')
+    expect(guard).toBeGreaterThan(-1)
+    expect(guard).toBeLessThan(save.indexOf('OrderSettingApi.updateOrderSetting'))
+    expect(save.slice(guard, save.indexOf('OrderSettingApi.updateOrderSetting'))).toContain(
+      "showError(t('order.notifyChannel.pushAvailability.removeBeforeSave'))"
+    )
+  })
+
+  it('SMS setting: on Confirm of the row being edited, and when a row is turned on', () => {
+    const page = read('../sms/SmsSetting.vue')
+    const confirm = page.slice(page.indexOf('async function confirmTextField'))
+    expect(
+      confirm.indexOf('pushBlocked(setting.channels, pushAvailability.value)')
+    ).toBeGreaterThan(-1)
+    expect(confirm.indexOf('pushBlocked(setting.channels, pushAvailability.value)')).toBeLessThan(
+      confirm.indexOf('await updateOrderSetting()')
+    )
+    const toggle = page.slice(page.indexOf('async function toggleEnable'))
+    expect(
+      toggle.indexOf('enable && pushBlocked(sms.channels, pushAvailability.value)')
+    ).toBeGreaterThan(-1)
+    expect(
+      toggle.indexOf('enable && pushBlocked(sms.channels, pushAvailability.value)')
+    ).toBeLessThan(toggle.indexOf('await updateOrderSetting()'))
+  })
+})

package/src/views/order-settings/components/push-availability.ts

@@ -0,0 +1,78 @@
+/**
+ * Push notification is offered only when the business has a native app, as in
+ * Connect's broadcast editor. Without one, a push has no device to reach.
+ *
+ * - `checking`: the answer is not in yet. Push is not offered.
+ * - `native`: push is offered.
+ * - `non-native`: push is not offered; the merchant is told why and can ask sales.
+ * - `failed`: the check failed or timed out. Push is not offered; the merchant can retry.
+ *
+ * The answer is kept per business for the whole page, so the SMS setting's many
+ * editors and the save guards share one request.
+ */
+import { computed, reactive, watch } from 'vue'
+import { F_ORDER_NOTIFY_CHANNEL } from '@entity'
+import { useCoreStore } from '@feedmepos/mf-common'
+
+import { getNativeApp } from '@/api/native-app'
+
+export type PushAvailability = 'checking' | 'native' | 'non-native' | 'failed'
+
+const states = reactive(new Map<string, PushAvailability>())
+const requests = new Map<string, number>()
+
+/**
+ * A stored push may not be saved again until the business is known to have a
+ * native app. Like Connect, "still checking" and "check failed" block too.
+ */
+export function pushBlocked(
+  channels: F_ORDER_NOTIFY_CHANNEL[] | null | undefined,
+  availability: PushAvailability
+): boolean {
+  return (
+    !!channels?.includes(F_ORDER_NOTIFY_CHANNEL.Enum.PUSH_NOTIFICATION) && availability !== 'native'
+  )
+}
+
+async function check(businessId: string, isDev: boolean) {
+  const request = (requests.get(businessId) ?? 0) + 1
+  requests.set(businessId, request)
+  states.set(businessId, 'checking')
+  let next: PushAvailability
+  try {
+    next = (await getNativeApp(businessId, isDev)) ? 'native' : 'non-native'
+  } catch {
+    next = 'failed'
+  }
+  // A retry started meanwhile owns the answer.
+  if (requests.get(businessId) === request) states.set(businessId, next)
+}
+
+export function usePushAvailability() {
+  const { currentBusiness, namespace } = useCoreStore()
+  const businessId = computed(() => currentBusiness.value?._id ?? null)
+
+  watch(
+    businessId,
+    (id) => {
+      if (id && !states.has(id)) void check(id, namespace.value === 'dev')
+    },
+    { immediate: true }
+  )
+
+  const availability = computed<PushAvailability>(() =>
+    businessId.value ? (states.get(businessId.value) ?? 'checking') : 'checking'
+  )
+
+  function retry() {
+    if (businessId.value) void check(businessId.value, namespace.value === 'dev')
+  }
+
+  return { availability, retry }
+}
+
+/** Tests only: forget every answer. */
+export function resetPushAvailability() {
+  states.clear()
+  requests.clear()
+}

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

@@ -11,6 +11,7 @@ import {
 } from '@entity'
 import RestaurantSelector from '../components/RestaurantSelector.vue'
 import NotifyChannelEditor from '../components/NotifyChannelEditor.vue'
+import { pushBlocked, usePushAvailability } from '../components/push-availability'
 import { useCoreStore, useI18n } from '@feedmepos/mf-common'
 import { useSnackbarFunctions } from '@/components/snackbar'
 import { useDialog } from '@feedmepos/ui-library'
@@ -32,6 +33,7 @@ const presetRemarks = ref<string[]>([])
 const allowOverrideQueueCode = ref<boolean>(false)
 
 const Dialog = useDialog()
+const { availability: pushAvailability } = usePushAvailability()
 
 onMounted(() => {
   init()
@@ -58,6 +60,11 @@ async function updateOrderSetting() {
     showError(problem)
     return
   }
+  // Same rule as Connect: a stored push is not saved again for a business without a native app.
+  if (!queueSettings.value.disableSMS && pushBlocked(queueSettings.value.channels, pushAvailability.value)) {
+    showError(t('order.notifyChannel.pushAvailability.removeBeforeSave'))
+    return
+  }
   await startAsyncCallWithErr(async () => {
     if (orderSettingDefault.value) {
       await OrderSettingApi.updateOrderSetting(