@feedmepos/mf-order-setting 0.0.2 → 0.0.6

package/src/views/order-settings/delivery/components/ManualIntegratedDeliverySetting.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { type PropType, computed, ref, watch } from 'vue'
+import type { DeliveryCompany } from '../delivery'
+import { F_PAYMENT_NAME, type FdoLinkedDelivery } from '@feedmepos/core/entity'
+
+interface LocalDeliverySettingData extends FdoLinkedDelivery {
+  active: boolean
+  catalogId: string | null
+}
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<FdoLinkedDelivery | null>,
+    default: null
+  },
+  company: {
+    type: Object as PropType<DeliveryCompany>,
+    required: true
+  },
+  catalogOptions: {
+    type: Array as PropType<{ label: string; value: string | null }[]>,
+    required: true
+  }
+})
+
+const emits = defineEmits<{
+  (event: 'update:model-value', v: FdoLinkedDelivery | null): void
+}>()
+
+const data = ref<LocalDeliverySettingData>(
+  props.modelValue
+    ? {
+        active: !!props.modelValue,
+        catalogId: null,
+        rounding: props.modelValue.rounding ?? true,
+        ...props.modelValue
+      }
+    : {
+        ...props.company,
+        catalogId: null,
+        active: false,
+        rounding: true
+      }
+)
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal) {
+      data.value = {
+        active: !!newVal,
+        catalogId: null,
+        rounding: newVal.rounding ?? true,
+        ...newVal
+      }
+    } else {
+      data.value = {
+        ...props.company,
+        catalogId: null,
+        active: false,
+        rounding: true
+      }
+    }
+  }
+)
+
+const paymentTypeOptions = computed(() => {
+  return [
+    {
+      label: 'Default',
+      value: props.company.paymentTypeKey
+    },
+    {
+      label: 'Cash',
+      value: F_PAYMENT_NAME.enum.CASH
+    }
+  ]
+})
+
+function emitChange(fn: (oldV: LocalDeliverySettingData) => LocalDeliverySettingData) {
+  const newV = fn({ ...data.value })
+  data.value = newV
+  emits('update:model-value', newV.active ? newV : null)
+}
+
+function updateActive(active: boolean) {
+  emitChange((oldV) => ({
+    ...oldV,
+    active
+  }))
+}
+
+function updatePaymentType(paymentTypeKey: string) {
+  emitChange((oldV) => ({
+    ...oldV,
+    paymentTypeKey
+  }))
+}
+
+function updateRounding(rounding: boolean) {
+  emitChange((oldV) => ({
+    ...oldV,
+    rounding
+  }))
+}
+
+function updateCatalog(catalogId: string | null) {
+  
+  emitChange((oldV) => ({
+    ...oldV,
+    catalogId
+  }))
+}
+
+
+</script>
+
+<template>
+
+
+  <div class="flex-grow mb-3 mt-3">
+    <FmSwitch
+      :model-value="data.active"
+      value="first"
+      label="Active manual integration"
+      label-placement="right"
+      :sublabel="`POS system can add delivery order with ${data.name} company`"
+      @update:model-value="updateActive"
+    />
+  </div>
+  <div v-if="data.active">
+    <FmCard variant="outlined" class="p-5 mt-10">
+    <div class="mb-3">
+      <FmSelect
+        :model-value="data.catalogId"
+        label="Catalog"
+        :items="catalogOptions"
+        @update:model-value="updateCatalog"
+      />
+    </div>
+
+    <div class="flex-grow fm-typo-en-title-sm-800 mb-3 mt-7">Payment Type</div>
+    <div class="mb-3">
+      <FmRadioGroup
+      :model-value="data.paymentTypeKey"
+      @update:model-value="updatePaymentType"
+    >
+      <div v-for="option in paymentTypeOptions" :key="option.value">
+        <FmRadio :value="option.value" :label="option.label" />
+      </div>
+    </FmRadioGroup>
+    
+    </div>
+    
+    <div class="flex-grow fm-typo-en-title-sm-800 mb-3 mt-7">Order Setting</div>
+    <FmCheckbox
+      :model-value="(data.rounding as boolean)"
+      value=""
+      label="Bill Rounding"
+      @update:model-value="updateRounding"
+    />
+  </FmCard>
+  </div>
+
+</template>
+
+

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

@@ -0,0 +1,75 @@
+import {
+  FdoRestaurantFeedmeDelivery,
+  FdoGrabfoodSettings,
+  FdoShopeeFoodSettings,
+  FdoFoodpandaSettings,
+  FdoRestaurantInHouseDelivery
+} from '@feedmepos/core/entity'
+
+function initInhouseDelivery(): FdoRestaurantInHouseDelivery {
+  return {
+    enable: false,
+    areas: [],
+    term: '',
+    deliveryTime: null,
+    catalogId: null,
+    paymentTypes: [],
+    ignoreStock: false
+  }
+}
+
+function initFeedmeExpress(): FdoRestaurantFeedmeDelivery {
+  return {
+    enable: false,
+    term: '',
+    catalogId: null,
+    autoAccept: true,
+    instruction: ''
+  }
+}
+
+export function initFoodpandaDelivery(): FdoFoodpandaSettings {
+  return {
+    enable: false,
+    remoteId: '',
+    catalogId: null,
+    autoCloseBill: false,
+    reportConfig: {
+      discountCampaigns: [],
+      commissionRate: 0
+    },
+    autoAccept: false
+  };
+}
+
+
+function initGrabfoodDelivery(): FdoGrabfoodSettings {
+  return {
+    enable: false,
+    merchantID: '',
+    catalogId: null,
+    autoCloseBill: false,
+    commissionRate: 0,
+  }
+}
+
+function initShopeefoodDelivery(): FdoShopeeFoodSettings {
+  return {
+    enable: false,
+    storeID: '',
+    catalogId: null,
+    autoCloseBill: false,
+    reportConfig: {
+      discountCampaigns: [],
+      commissionRate: 0
+    }
+  }
+}
+
+export default {
+  initInhouseDelivery,
+  initFeedmeExpress,
+  initFoodpandaDelivery,
+  initGrabfoodDelivery,
+  initShopeefoodDelivery
+}

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

@@ -0,0 +1,41 @@
+import { F_PAYMENT_NAME, FdoLinkedDelivery } from "@feedmepos/core/entity";
+
+export type LinkedDeliveryDoc = FdoLinkedDelivery & {  _rev: string };
+
+export enum AUTO_INTEGRATION_CLIENT {
+  foodpanda = 'foodpanda',
+  grabfood = 'grabfood',
+  shopeefood = 'shopeefood',
+}
+
+export interface DeliveryCompany {
+    id: string;
+    name: string;
+    slotPrefix: string;
+    paymentTypeKey: string;
+    key: string;
+  }
+
+function formatDeliveryCompanyKey(key: string) {
+  return key.toLowerCase().replace('_', '').toLowerCase();
+}
+
+export function useDelivery() {
+  function getLinkedDeliveryDoc(docs: LinkedDeliveryDoc[], key: string) {
+    return docs.find((doc) => formatDeliveryCompanyKey(doc.key) === formatDeliveryCompanyKey(key));
+  }
+
+  function filterLocalDeliveryCompanies(companies: DeliveryCompany[]) {
+    return companies.filter(({ key }) => !Object.keys(AUTO_INTEGRATION_CLIENT).includes(formatDeliveryCompanyKey(key)));
+  }
+
+  function getPaymentType(paymentTypeKey?: string) {
+    return paymentTypeKey === F_PAYMENT_NAME.enum.CASH ? 'Cash' : 'Default';
+  }
+
+  function equalKey(key: string, targetKey: string) {
+    return formatDeliveryCompanyKey(key) === formatDeliveryCompanyKey(targetKey);
+  }
+
+  return { getLinkedDeliveryDoc, filterLocalDeliveryCompanies, getPaymentType, equalKey };
+}

package/src/views/order-settings/delivery/inhouse/CurrencyInput.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { type PropType, computed, ref } from 'vue'
+import { Dinero } from '@feedmepos/core'
+import { FdoDinero } from '@feedmepos/core/entity'
+
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<FdoDinero | null>,
+    default: undefined
+  },
+  label: {
+    type: String
+  }
+})
+
+const emits = defineEmits<{
+  (event: 'update:model-value', v: FdoDinero): void
+}>()
+
+
+const value = computed<number>(() => {
+  if (!props.modelValue) return 0
+  const formattedValue = Dinero.fromFdoDinero(props.modelValue).toFormat().replace(/ /g, '')
+  return parseFloat(formattedValue)
+})
+
+
+function input(v: any) {
+  let value = parseFloat((v || '').toString())
+  value = Number.isNaN(value) ? 0 : value
+  emits('update:model-value', Dinero.fromNumber({ number: value }).toObject())
+}
+</script>
+
+<template>
+  <FmStepperField
+    :model-value="value"
+    :label="label"
+    placeholder="0.00"
+    prepend-icon="attach_money"
+    class="mb-3"
+    @update:model-value="input"
+  />
+
+  
+</template>

package/src/views/order-settings/delivery/inhouse/DeliveryCustomTime.vue

@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import { clone } from '@/helpers/object'
+import type { FdoOperatingHour, FdoOperatingHours } from '@feedmepos/core/entity'
+import Day from 'dayjs'
+import { computed, type PropType } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<FdoOperatingHours | null>,
+    default: undefined
+  },
+  title: {
+    type: String,
+    required: true
+  }
+})
+
+const emits = defineEmits<{
+  (event: 'update:model-value', value: FdoOperatingHours): void
+}>()
+
+// const { isMobile } = useResponsive();
+const _day = Day().startOf('week')
+const dayOptions = computed(() =>
+  Array.from(Array(7)).map((_, i) => {
+    return {
+      key: i.toString(),
+      label: _day.add(i, 'day').format('dddd'),
+      value: i
+      // slot: isMobile.value ? `checkbox-${i}-bottom` : `checkbox-${i}-end`,
+    }
+  })
+)
+
+function convertToDate(time: string) {
+  const [hour, minute] = time.split(':').map(Number)
+  return new Date(0, 0, 0, hour, minute)
+}
+ 
+function formatTime(date: Date | string): string {
+  if (typeof date === 'string') {
+    date = convertToDate(date)
+  }
+
+  if (date instanceof Date && !isNaN(date.getTime())) {
+    return date.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })
+  }
+
+  return '00:00'
+}
+
+const operatingHours = computed<FdoOperatingHour[]>(() =>
+  props.modelValue
+    ? Object.values(props.modelValue)
+    : Array.from(Array(7)).map(() => ({
+        enable: false,
+        hours: []
+      }))
+)
+
+const days = computed(() => {
+  return Object.values(operatingHours.value).map((v) => {
+    return v.hours.map((hour) => {
+      const { start, end } = hour
+      return {
+        start: Day(convertToDate(start)).toDate(),
+        end: Day(convertToDate(end)).toDate()
+      }
+    })
+  })
+})
+
+const openingDays = computed(() => {
+  return operatingHours.value.reduce<number[]>((pv, operatingHour, index) => {
+    if (operatingHour.hours.length > 0) pv.push(index)
+    return pv
+  }, [])
+})
+
+function newTimeslot() {
+  return { start: '00:00', end: '23:59' }
+}
+
+function toggleOpeningDay(days: number[]) {
+  const toClose = openingDays.value.find((day) => !days.includes(day))
+  if (toClose !== undefined) {
+    emitValue((v) => {
+      v[toClose].enable = false
+      v[toClose].hours = []
+      return v
+    })
+    return
+  }
+
+  const toOpen = days.find((day) => !openingDays.value.includes(day))
+  if (toOpen !== undefined && operatingHours.value[toOpen].hours.length === 0) {
+    emitValue((v) => {
+      v[toOpen].enable = true
+      v[toOpen].hours = [newTimeslot()]
+      return v
+    })
+  }
+}
+
+function addTimeslot(day: number) {
+  emitValue((v) => {
+    v[day].hours.push(newTimeslot())
+    return v
+  })
+}
+
+function deleteTimeslot(day: number, index: number) {
+  if (days.value[day].length > 1) {
+    emitValue((v) => {
+      v[day].hours.splice(index, 1)
+      return v
+    })
+  }
+}
+
+function updateStartHour(day: number, index: number, date: Date) {
+  emitValue((v) => {
+    v[day].hours[index].start = formatTime(date)
+    return v
+  })
+}
+
+function updateEndHour(day: number, index: number, date: Date) {
+  emitValue((v) => {
+    v[day].hours[index].end = formatTime(date)
+    return v
+  })
+}
+function emitValue(fn: (v: FdoOperatingHour[]) => FdoOperatingHour[]) {
+  const newV = fn(clone(operatingHours.value))
+  const v = {
+    0: newV[0],
+    1: newV[1],
+    2: newV[2],
+    3: newV[3],
+    4: newV[4],
+    5: newV[5],
+    6: newV[6]
+  }
+  emits('update:model-value', v)
+}
+
+const sortedDayOptions = computed(() => {
+  return dayOptions.value.slice().sort((a, b) => {
+    // Sort so that 1 (Monday) comes first and 0 (Sunday) comes last
+    if (a.value === 0) return 1
+    if (b.value === 0) return -1
+    return a.value - b.value
+  })
+})
+</script>
+
+<template>
+  <div v-for="(day, index) in sortedDayOptions" :key="day.value">
+    <div class="flex flex-row">
+      <div style="min-width: 130px">
+        <FmCheckbox
+          :model-value="openingDays"
+          :label="day.label"
+          :value="day.value"
+          @update:model-value="toggleOpeningDay"
+        />
+      </div>
+      <div class="pl-5">
+        <div class="flex flex-col flex-grow">
+          <div class="flex-row flex">
+            <FmTimePicker
+              style="font-size: 0.875rem"
+              :model-value="
+                openingDays.includes(day.value) && days[day.value]?.[0]?.start
+                  ? formatTime(days[day.value][0].start)
+                  : null
+              "
+              :disabled="!(openingDays.includes(day.value) && days[day.value]?.[0]?.start)"
+              @update:model-value="(newValue: any) => updateStartHour(day.value, 0, newValue)"
+            />
+            <div class="fm-typo-en-body-lg-400 text-fm-color-typo-tertiary m-3">to</div>
+            <FmTimePicker
+              :model-value="
+                openingDays.includes(day.value) && days[day.value]?.[0]?.end
+                  ? formatTime(days[day.value][0].end)
+                  : null
+              "
+              :disabled="!(openingDays.includes(day.value) && days[day.value]?.[0]?.end)"
+              @update:model-value="(newValue: any) => updateEndHour(day.value, 0, newValue)"
+              style="font-size: 0.875rem"
+            />
+
+            <FmButton
+              class="m-1"
+              v-if="openingDays.includes(day.value) && days[day.value]?.[0]?.end"
+              append-icon="add"
+              variant="secondary"
+              @click="addTimeslot(day.value)"
+            />
+          </div>
+
+          <div v-for="(hour, hourIndex) in days[day.value]" :key="hourIndex">
+            <div v-if="hourIndex > 0">
+              <div class="flex flex-row">
+                <FmTimePicker
+                  style="font-size: 0.875rem"
+                  :model-value="formatTime(hour.start) || null"
+                  @update:model-value="
+                    (newValue: any) => updateStartHour(day.value, hourIndex, newValue)
+                  "
+                />
+                <div class="fm-typo-en-body-lg-400 text-fm-color-typo-tertiary m-3">to</div>
+                <FmTimePicker
+                  style="font-size: 0.875rem"
+                  :model-value="formatTime(hour.end) || null"
+                  @update:model-value="
+                    (newValue: any) => updateEndHour(day.value, hourIndex, newValue)
+                  "
+                />
+
+                <FmButton
+                  class="m-1"
+                  append-icon="delete"
+                  variant="secondary"
+                  @click="deleteTimeslot(day.value, hourIndex)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>