@feedmepos/mf-order-setting 0.0.92 → 0.0.94

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(

package/src/views/order-settings/sms/SmsSetting.vue

@@ -13,6 +13,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 } from '@feedmepos/mf-common'
 import { Dinero } from '@feedmepos/core'
@@ -23,6 +24,7 @@ const { t } = useI18n()
 import { SMS } from '@common'
 
 const { showSuccess, showError } = useSnackbarFunctions()
+const { availability: pushAvailability } = usePushAvailability()
 const { currentRestaurant } = useCoreStore()
 const { isLoading, startAsyncCallWithErr, startLoading } = useLoading()
 
@@ -98,6 +100,10 @@ async function toggleEnable(enable: boolean, sms: OrderSmsSettingDto) {
     showError(t('order.notifyChannel.messageRequired'))
     return
   }
+  if (enable && pushBlocked(sms.channels, pushAvailability.value)) {
+    showError(t('order.notifyChannel.pushAvailability.removeBeforeSave'))
+    return
+  }
   const smsSetting = orderSmsSettings.value.map((_sms: OrderSmsSettingDto) => {
     if (_sms.action === sms.action && _sms.type === sms.type) {
       _sms.enable = enable
@@ -134,6 +140,11 @@ async function confirmTextField(index: number) {
       showError(t('order.notifyChannel.messageRequired'))
       return
     }
+    // Same rule as Connect: a stored push is not saved again for a business without a native app.
+    if (pushBlocked(setting.channels, pushAvailability.value)) {
+      showError(t('order.notifyChannel.pushAvailability.removeBeforeSave'))
+      return
+    }
     await updateOrderSetting()
   }
 }