@feedmepos/mf-order-setting 0.0.2 → 0.0.6

package/src/views/all-orders/order.ts

@@ -0,0 +1,584 @@
+import { Dinero } from '@feedmepos/core'
+import {
+  F_ORDER_TYPE,
+  FdoBill,
+  FdoBillItem,
+  F_ORDER_PLATFORM,
+  FdoShopeeFoodOrder,
+  SF_DELIVERY_MODE,
+  FdoDinero
+} from '@feedmepos/core/entity'
+import dayjs, { Dayjs } from 'dayjs'
+import UpdateDeliveryOrderDialog from './UpdateDeliveryOrderDialog.vue'
+import { sentenceCase } from 'change-case'
+import { useLoading } from '@/composables/loading'
+import {
+  F_DELIVERY_PROVIDER_TYPE,
+  F_DELIVERY_STATUS,
+  F_MANUAL_AVAILABLE_SERVICE,
+  F_ORDER_DELIVERY_TYPE,
+  F_ORDER_STATUS,
+  OrderItemDto,
+  type DeliveryProviderDto,
+  type FdoFoodpandaOrderOutput,
+  type FdoGrabfoodOrderOutput,
+  type FdoShopeeFoodOrderOutput,
+  type FdtoGetOrderReq,
+  type OrderPortalDto,
+  type OrderQueryDto
+} from '@entity'
+import { remoteOrderApi } from '@/api/remoteOrder'
+import type { MoreActionOption, TableColumn } from '@/components/type'
+import { formatCurrency } from '@/helpers/currency'
+import { deliveryApi } from '@/api/delivery'
+import { orderApi } from '@/api/order'
+import { Dialog } from 'quasar'
+
+export interface DeliveryInfo {
+  delivery: { label: string; value: string }[]
+  items: {
+    id: string | undefined | null
+    name: string
+    quantity: number
+  }[]
+}
+
+export type Delivery = DeliveryProviderDto & {
+  choosenService?: F_MANUAL_AVAILABLE_SERVICE,
+  remark?: string
+}
+
+export interface DeliveryProviderOption {
+  key: string
+  delivery: Delivery
+}
+
+const { startAsyncCall } = useLoading()
+
+export interface Order<T> {
+  id: string
+  orderAt: Dayjs
+  restaurant: {
+    id: string
+    name: string
+  }
+  orderType: F_ORDER_TYPE
+  slot: string
+  seqNumber: string
+  status: string
+  doc: T
+  actions: MoreActionOption[]
+}
+
+export interface OrderPlatform<OrderDoc> {
+  key: F_ORDER_PLATFORM
+  name: string
+  canFilterSlot?: boolean
+  canFilterOrderType?: boolean
+  extraInfo?: TableColumn<Order<OrderDoc>>[]
+  getOrders: (req: OrderQueryDto) => Promise<Order<OrderDoc>[]>
+}
+
+const fmPlatform: OrderPlatform<OrderPortalDto> = {
+  key: F_ORDER_PLATFORM.Enum.FEEDME,
+  name: 'FeedMe',
+  canFilterSlot: true,
+  canFilterOrderType: true,
+  extraInfo: [
+    {
+      name: 'seqNumber',
+      label: 'Bill no',
+      field: 'seqNumber',
+      align: 'left'
+    },
+    {
+      name: 'status',
+      label: 'Status',
+      field: (row) => sentenceCase(row.status),
+      align: 'left'
+    },
+    {
+      name: 'deliveryFee',
+      align: 'left',
+      label: 'Quote / Actual delivery fee',
+      field: (v) => getFeedMeOrderDeliveryFee(v.doc),
+      option: { style: 'min-width: 200px' }
+    },
+    {
+      name: 'driver',
+      align: 'left',
+      label: 'Driver allocated at',
+      field: (v) => getDriverAllocateTime(v.doc),
+      option: { style: 'min-width: 160px' }
+    }
+  ],
+  getOrders: async (req) => {
+    const orders = await orderApi.read(req)
+    return orders.map(transformFeedMeOrder)
+  }
+}
+
+function transformFeedMeOrder(order: OrderPortalDto): Order<OrderPortalDto> {
+  const bill = order.bill as FdoBill | null | undefined
+  const status = getFeedMeDeliveryOrderStatus(order)
+  if (
+    order.option.type == F_ORDER_TYPE.enum.DELIVERY &&
+    order.option.deliveryType == F_ORDER_DELIVERY_TYPE.enum.FEEDME
+  ) {
+    const providers = order.option.providers ?? []
+    if (providers[providers.length]?.status == F_DELIVERY_STATUS.enum.REFUSED) {
+      order.status = F_ORDER_STATUS.enum.DECLINED
+    }
+  }
+  return {
+    id: order.id,
+    orderAt: dayjs(order.orderAt),
+    restaurant: order.restaurant,
+    orderType: order.option.type,
+    seqNumber: bill?.seqNumber || '',
+    slot: bill?.slot || '',
+    status: order.status.toString(),
+    actions: [
+      {
+        label: 'Edit',
+        callback: async () => {
+          const newOrder = await updateOrder(order)
+          return transformFeedMeOrder(newOrder)
+        }
+      },
+      {
+        label: 'Cancel order',
+        callback: () => cancelOrder(order)
+      },
+      {
+        label: 'Change driver',
+        hide: !status.canCancel,
+        callback: async () => cancelOrder(order, { reassignDriver: true })
+      },
+      {
+        label: 'Refetch order status',
+        hide: !status.canRefresh,
+        callback: () => refreshOrder(order)
+      },
+      {
+        label: 'Refund order',
+        callback: async () => refundOrder(order)
+      },
+      {
+        label: 'Track order',
+        hide: !status.trackingUrl,
+        callback: async () => {
+          window.open(status.trackingUrl, '_blank')
+        }
+      }
+    ].filter((v) => !v.hide),
+    doc: order
+  }
+}
+
+
+// legacy code
+async function updateOrder(order: OrderPortalDto): Promise<OrderPortalDto> {
+  const { option } = order
+  if (option.type !== F_ORDER_TYPE.Enum.DELIVERY) {
+    throw new Error(`Invalid order type, expected delivery but received ${option.type}`)
+    // return order;
+  }
+
+  const providers: any[] = option.providers || []
+  const provider = getFeedMeOrderProvider(providers)
+  if (!provider) {
+    throw new Error('No provider found. ')
+    // return order;
+  }
+
+  const bill = order.bill as FdoBill | undefined | null
+
+  const deliveryInfo: DeliveryInfo = {
+    delivery: [
+      {
+        label: 'Merchant address',
+        value: provider.origin?.addressLine || '-'
+      },
+      {
+        label: 'Merchant contact',
+        value: provider?.phone || '-'
+      },
+      {
+        label: 'Customer name',
+        value: order.username || ''
+      },
+      {
+        label: 'Customer address',
+        value: option.addressLine
+      },
+      {
+        label: 'Customer phone',
+        value: option.contactNumber
+      },
+      {
+        label: 'Slot',
+        value: bill?.slot || '-'
+      }
+    ],
+    items: bill
+      ? Object.entries(bill.items).map(([id, item]) => {
+        return {
+          id: id,
+          name: transformItemName(item),
+          quantity: item.quantity
+        }
+      })
+      : Object.values(order.draft).map((item) => {
+        return {
+          id: item.id,
+          name: transformItemName(item),
+          quantity: item.quantity
+        }
+      })
+  }
+
+  const deliveryProviders = providers.reduce<DeliveryProviderOption[]>((pv, provider) => {
+    let choosenService = provider.type
+    let remark = ''
+    if (provider.type === F_DELIVERY_PROVIDER_TYPE.Enum.MANUAL) {
+      choosenService = provider.choosenService || choosenService
+      remark = provider.remark || ''
+    }
+    pv.push({
+      key: provider.deliveryId || '',
+      delivery: {
+        type: provider.type,
+        choosenService,
+        driver: provider.driver || {
+          name: '',
+          phone: '',
+          vehicle: {
+            physicalVehicleType: '',
+            model: '',
+            licensePlate: ''
+          }
+        },
+        status: provider.status,
+        deliveryFee: provider.deliveryFee || undefined,
+        remark,
+        pickupRef: provider.pickupRef || undefined,
+        trackingUrl: provider.trackingUrl || ''
+      } as any
+    })
+    return pv
+  }, [])
+
+  return await new Promise<OrderPortalDto>((resolve) => {
+    Dialog.create({
+      component: UpdateDeliveryOrderDialog,
+      componentProps: {
+        initialValue: deliveryProviders,
+        info: deliveryInfo
+      }
+    })
+      .onOk(async (v: Delivery) => {
+        await startAsyncCall(async () => {
+          const newOrder = await deliveryApi.updateManualOrder({
+            orderId: order.id,
+            deliveryId: provider.deliveryId ?? '',
+            ...v
+          })
+          resolve(newOrder)
+        })
+      })
+      .onCancel(() => {
+        resolve(order)
+      })
+  })
+}
+
+function transformItemName({ product, variantSelected }: FdoBillItem | OrderItemDto) {
+  return `${product.name}${variantSelected ? `(${variantSelected.name.join(', ')})` : ''}`
+}
+
+async function cancelOrder(order: OrderPortalDto, config?: { reassignDriver: boolean }) {
+  const { option, id } = order
+  if (option.type !== F_ORDER_TYPE.Enum.DELIVERY) return
+  const provider = getFeedMeOrderProvider(option.providers)
+  if (!provider) return
+  return await startAsyncCall(async () => {
+    const newOrder = await deliveryApi.cancelDeliveryOrder({
+      orderId: id,
+      deliveryId: provider.deliveryId || '',
+      retry: config?.reassignDriver ?? false
+    })
+    return transformFeedMeOrder(newOrder)
+  })
+}
+
+async function refreshOrder(order: OrderPortalDto) {
+  return await startAsyncCall(async () => {
+    const newOrder = await deliveryApi.refetchDeliveryOrder(order.id)
+    return transformFeedMeOrder(newOrder)
+  })
+}
+
+async function refundOrder(order: OrderPortalDto) {
+  return await startAsyncCall(async () => {
+    const newOrder = await orderApi.refund({ orderId: order.id })
+    return transformFeedMeOrder(newOrder)
+  })
+}
+
+function getFeedMeDeliveryOrderStatus({ option }: OrderPortalDto) {
+  let canCancel = false
+  let trackingUrl = ''
+  let canRefresh = false
+  let deliveryProvider
+  if (option.type === F_ORDER_TYPE.Enum.DELIVERY) {
+    deliveryProvider = getFeedMeOrderProvider(option.providers)
+    if (deliveryProvider) {
+      trackingUrl = deliveryProvider?.trackingUrl || ''
+      canRefresh = isFeedMeExpressDeliveryOrder(deliveryProvider)
+      canCancel =
+        option.status === F_DELIVERY_STATUS.Enum.NEW &&
+        isFeedMeExpressDeliveryOrder(deliveryProvider) &&
+        isFeedMeExpressDeliveryInDraft(deliveryProvider) &&
+        isFeedMeOrderInCancellablePeriod(option.allocatingAt)
+    }
+  }
+  return {
+    deliveryProvider,
+    canCancel,
+    trackingUrl,
+    canRefresh
+  }
+}
+
+function getFeedMeOrderProvider(
+  providers: DeliveryProviderDto[] | null | undefined
+): DeliveryProviderDto | null {
+  return !providers || !providers.length ? null : providers[providers.length - 1]
+}
+
+function isFeedMeOrderInCancellablePeriod(allocateAt: string | null | undefined) {
+  const now = dayjs()
+  return (!!allocateAt && dayjs(allocateAt).isSame(now)) || dayjs(allocateAt).isBefore(now)
+}
+
+function isFeedMeExpressDeliveryInDraft(provider: DeliveryProviderDto) {
+  return (
+    provider.status === F_DELIVERY_STATUS.Enum.NEW ||
+    provider.status === F_DELIVERY_STATUS.Enum.CREATING
+  )
+}
+
+function isFeedMeExpressDeliveryOrder(provider: DeliveryProviderDto) {
+  return (
+    provider.type === F_DELIVERY_PROVIDER_TYPE.Enum.GRAB_EXPRESS ||
+    provider.type === F_DELIVERY_PROVIDER_TYPE.Enum.PANDA_GO ||
+    provider.type === F_DELIVERY_PROVIDER_TYPE.Enum.KOSMO
+  )
+}
+
+function getFeedMeOrderDeliveryFee({ option }: OrderPortalDto): string {
+  if (option.type !== F_ORDER_TYPE.Enum.DELIVERY) {
+    return ''
+  }
+  const quoteFee = option.quoteDeliveryFee?.total ?? Dinero.zero().toObject()
+  const deliveryProvider = getFeedMeOrderProvider(option.providers)
+  const actualFee = deliveryProvider
+    ? getFeedMeOrderDeliveryProviderFee(deliveryProvider)
+    : Dinero.zero().toObject()
+  return `${formatCurrency(quoteFee)} / ${formatCurrency(actualFee)}`
+}
+
+function getFeedMeOrderDeliveryProviderFee(provider: DeliveryProviderDto): FdoDinero {
+  return provider.deliveryFee ?? Dinero.zero().toObject()
+}
+
+function getDriverAllocateTime({ option }: OrderPortalDto): string {
+  let allocatedTime = ''
+  if (option.type == F_ORDER_TYPE.Enum.DELIVERY && option.allocatingAt) {
+    allocatedTime = dayjs(option.allocatingAt).format('DD/MM/YYYY hh:mm a')
+  }
+  return allocatedTime
+}
+
+function transformGetOrderReq(req: OrderQueryDto): FdtoGetOrderReq {
+  return {
+    skip: req.skip,
+    limit: req.limit,
+    restaurantId: req.restaurant
+  }
+}
+
+const gfPlatform: OrderPlatform<FdoGrabfoodOrderOutput> = {
+  key: F_ORDER_PLATFORM.Enum.GRAB_FOOD,
+  name: 'Grabfood',
+  extraInfo: [
+    {
+      name: 'status',
+      label: 'Status',
+      field: (row) => sentenceCase(row.status),
+      align: 'left'
+    }
+  ],
+  getOrders: async (req) => {
+    const orders = await remoteOrderApi.integratedDelivery.readGrabfoodOrders(
+      transformGetOrderReq(req)
+    )
+    return orders.map(transformGrabFoodOrder)
+  }
+}
+
+function transformGrabFoodOrder(order: FdoGrabfoodOrderOutput): Order<FdoGrabfoodOrderOutput> {
+  return {
+    id: order._id,
+    orderAt: dayjs(order.raw.orderTime),
+    restaurant: {
+      id: order.raw.partnerMerchantID || '',
+      name: order.pf_restaurant?.profile.name || ''
+    },
+    orderType:
+      order.raw.featureFlags.orderType === 'TakeAway'
+        ? F_ORDER_TYPE.Enum.PICKUP
+        : F_ORDER_TYPE.Enum.DELIVERY,
+    seqNumber: '',
+    slot: order.raw.shortOrderNumber,
+    status: order.orderStatus.status,
+    actions: deliveryIntegrationActions(
+      order._id,
+      async () => {
+        const res = await remoteOrderApi.integratedDelivery.reflowGrabfoodOrders(order._id)
+        return transformGrabFoodOrder(res)
+      },
+      async () => {
+        const res = await remoteOrderApi.integratedDelivery.rejectGrabfoodOrders(order._id)
+        return transformGrabFoodOrder(res)
+      }
+    ),
+    doc: order
+  }
+}
+
+const fpPlatform: OrderPlatform<FdoFoodpandaOrderOutput> = {
+  key: F_ORDER_PLATFORM.Enum.FOOD_PANDA,
+  name: 'Foodpanda',
+  extraInfo: [
+    {
+      name: 'status',
+      label: 'Status',
+      field: (row) => sentenceCase(row.status),
+      align: 'left'
+    }
+  ],
+  getOrders: async (req) => {
+    const orders = await remoteOrderApi.integratedDelivery.readFoodpandaOrders(
+      transformGetOrderReq(req)
+    )
+    return orders.map(transformFoodpandaOrder)
+  }
+}
+
+function transformFoodpandaOrder(order: FdoFoodpandaOrderOutput): Order<FdoFoodpandaOrderOutput> {
+  return {
+    id: order._id,
+    orderAt: dayjs(order.raw.createdAt),
+    restaurant: {
+      id: order.remoteId,
+      name: order.pf_restaurant?.profile.name || ''
+    },
+    orderType: !!order.raw.pickup ? F_ORDER_TYPE.Enum.PICKUP : F_ORDER_TYPE.Enum.DELIVERY,
+    seqNumber: '',
+    slot: order.raw.shortCode ? `FP${order.raw.shortCode}` : '',
+    status: order.orderStatus.status,
+    actions: deliveryIntegrationActions(
+      order._id,
+      async () => {
+        const res = await remoteOrderApi.integratedDelivery.reflowFoodpandaOrders(order._id)
+        return transformFoodpandaOrder(res)
+      },
+      async () => {
+        const res = await remoteOrderApi.integratedDelivery.rejectFoodpandaOrders(order._id)
+        return transformFoodpandaOrder(res)
+      }
+    ),
+    doc: order
+  }
+}
+
+type ShopeeFoodOrder = FdoShopeeFoodOrderOutput & FdoShopeeFoodOrder
+
+const sfPlatform: OrderPlatform<ShopeeFoodOrder> = {
+  key: F_ORDER_PLATFORM.Enum.SHOPEE_FOOD,
+  name: 'Shopeefood',
+  extraInfo: [
+    {
+      name: 'status',
+      label: 'Status',
+      field: (row) => sentenceCase(row.status),
+      align: 'left'
+    }
+  ],
+  getOrders: async (req) => {
+    const orders = await remoteOrderApi.integratedDelivery.readShopeefoodOrders(
+      transformGetOrderReq(req)
+    )
+    return orders.map(transformShopeeFoodOrder)
+  }
+}
+
+function transformShopeeFoodOrder(order: ShopeeFoodOrder): Order<ShopeeFoodOrder> {
+  return {
+    id: order._id,
+    orderAt: dayjs(order.raw.create_time),
+    restaurant: {
+      id: order.pf_restaurant?._id || '',
+      name: order.pf_restaurant?.profile.name || ''
+    },
+    orderType:
+      order.raw.delivery_mode === SF_DELIVERY_MODE.enum.PICKUP
+        ? F_ORDER_TYPE.Enum.PICKUP
+        : F_ORDER_TYPE.Enum.DELIVERY,
+    seqNumber: '',
+    slot: order.raw.order_short_code,
+    status: order.orderStatus.status,
+    actions: deliveryIntegrationActions(
+      order._id,
+      async () => {
+        const res = await remoteOrderApi.integratedDelivery.reflowShopeefoodOrders(order._id)
+        return transformShopeeFoodOrder(res)
+      },
+      async () => {
+        const res = await remoteOrderApi.integratedDelivery.rejectShopeefoodOrders(order._id)
+        return transformShopeeFoodOrder(res)
+      }
+    ),
+    doc: order
+  }
+}
+
+function deliveryIntegrationActions<T>(
+  orderId: string,
+  onReflow: () => Promise<Order<T>>,
+  onReject: () => Promise<Order<T>>
+): MoreActionOption[] {
+  return [
+    {
+      label: 'Reflow Order',
+      callback: async () => {
+        return await startAsyncCall(async () => await onReflow())
+      }
+    },
+    {
+      label: 'Reject Order',
+      callback: async () => {
+        return await startAsyncCall(async () => await onReject())
+      }
+    }
+  ]
+}
+
+export const orderPlatforms = {
+  [F_ORDER_PLATFORM.Enum.FEEDME.toString()]: fmPlatform,
+  [F_ORDER_PLATFORM.Enum.GRAB_FOOD.toString()]: gfPlatform,
+  [F_ORDER_PLATFORM.Enum.FOOD_PANDA.toString()]: fpPlatform,
+  [F_ORDER_PLATFORM.Enum.SHOPEE_FOOD.toString()]: sfPlatform
+}

package/src/views/feedme-express/FeedMeExpress.vue

@@ -0,0 +1,139 @@
+<template>
+  <FmPageHead title="FeedMe express" />
+  <div class="flex px-[1.5rem] mb-10">
+    <div class="flex-[2_2_0%]">
+      <div class="m-">
+        <FmSwitch
+          v-model="delivery.feedMe.enable"
+          sublabel="Activate FeedMe express"
+          label="Activate"
+          label-placement="right"
+        />
+
+        <FmStepperField
+          class="mt-10"
+          v-model="delivery.feedMe.maxDistance"
+          label="Max delivery distance (km)"
+        />
+
+        <div class="flex-grow fm-typo-en-title-sm-800 mb-3 mt-10">Operation hour</div>
+
+        <DeliveryCustomTime
+          title="Time slots"
+          :model-value="delivery.feedMe.operatingHours"
+          @update:model-value="updateTime"
+        />
+        <div class="flex-grow fm-typo-en-title-sm-800 mb-3 mt-10">Delivery area</div>
+        <GoogleMap
+          :polygons="deliveryAreas"
+          :zoom="10"
+          editable
+          style="width: 100%; height: 500px"
+          @map-click="addArea"
+          @polygon-change="updateArea"
+          @polygon-right-click="deleteArea"
+        />
+
+        <FmButton class="ml-auto mt-5" variant="primary" label="Update" @click="save"></FmButton>
+      </div>
+    </div>
+
+    <div class="flex-[1_1_0%] ml-10">
+      <FeedMeExpressSummary :setting="delivery" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MapCoordinate, MapPolygon, PolygonChangeEvent } from '@/components/type'
+import { useLoading } from '@/composables/loading'
+import { generateAreaPaths, pathToPolygon, polygonToPath } from '@/helpers/map'
+import { useAppStore } from '@/stores/app'
+import type { FdoDeliverySetting, FdoFeedMeDeliveryArea } from '@feedmepos/core/entity'
+import { computed, onMounted, ref } from 'vue'
+import DeliveryCustomTime from '../order-settings/delivery/inhouse/DeliveryCustomTime.vue'
+import GoogleMap from '@/components/GoogleMap.vue'
+import FeedMeExpressSummary from './FeedMeExpressSummary.vue'
+import { useCoreStore } from '@feedmepos/mf-common'
+import { useSnackbarFunctions } from '@/components/snackbar'
+
+const { showSuccess } = useSnackbarFunctions()
+const { startAsyncCall, isLoading } = useLoading()
+const appStore = useAppStore()
+const delivery = ref<FdoDeliverySetting>(appStore.publicSetting.delivery)
+const deliveryAreas = computed<MapPolygon[]>(() => {
+  return (
+    delivery.value.feedMe.areas.map(({ polygon }) => ({
+      paths: polygonToPath(polygon),
+      strokeColor: 'cyan',
+      fillColor: 'cyan'
+    })) || []
+  )
+})
+
+function updateTime(time: any) {
+  delivery.value = {
+    ...delivery.value,
+    feedMe: {
+      ...delivery.value.feedMe,
+      operatingHours: time
+    }
+  }
+}
+
+function updateAreas(fn: (previousValue: FdoFeedMeDeliveryArea[]) => FdoFeedMeDeliveryArea[]) {
+  delivery.value = {
+    ...delivery.value,
+    feedMe: {
+      ...delivery.value.feedMe,
+      areas: fn(delivery.value.feedMe.areas)
+    }
+  }
+}
+
+function addArea(coordinate: MapCoordinate) {
+  const path = generateAreaPaths({ center: coordinate, radius: 10 })
+  updateAreas((pv) => [...pv, { polygon: pathToPolygon(path) }])
+}
+
+function updateArea({ index, path }: PolygonChangeEvent) {
+  updateAreas((pv) =>
+    pv.map((area, i) => {
+      return i === index ? { polygon: pathToPolygon(path) } : area
+    })
+  )
+}
+
+function deleteArea(index: number) {
+  updateAreas((pv) => pv.filter((_, i) => i !== index))
+}
+
+async function save() {
+  await startAsyncCall(async () => {
+    const publicSetting = await appStore.updatePublicSetting({ delivery: delivery.value })
+    delivery.value = publicSetting.delivery
+  })
+  showSuccess('FeedMe express setting updated.')
+}
+
+function waitForSessionUserInitialization(): Promise<void> {
+  return new Promise((resolve) => {
+    const interval = setInterval(() => {
+      if (useCoreStore().sessionUser.value) {
+        clearInterval(interval)
+        resolve()
+      }
+    }, 100) 
+  })
+}
+
+onMounted(async () => {
+  if (!useCoreStore().sessionUser.value) {
+    await waitForSessionUserInitialization()
+  }
+  await startAsyncCall(async () => {
+    const publicSetting = await appStore.getPublicSetting()
+    delivery.value = publicSetting.delivery
+  })
+})
+</script>