@feedmepos/mf-order-setting 0.0.2 → 0.0.6

package/src/views/order-settings/pickup/PickUpSettingDialog.vue

@@ -0,0 +1,148 @@
+<template>
+  
+  <div class="flex-grow fm-typo-en-title-sm-800 mb-3 mt-3">General Setting</div>
+  <FmSwitch
+    :model-value="pickupSetting.ignoreStock as boolean"
+    value="ignoreStock"
+    label="Ignore stock"
+    sublabel="Product can be order even out of stock"
+    label-placement="right"
+    @update:model-value="updateIgnoreStock"
+  />
+
+  <FmCard variant="outlined" class="p-5 mt-10">
+  <Preorder v-model="pickupSetting.pickupTime" />
+</FmCard>
+
+<FmCard variant="outlined" class="p-5 mt-10">
+  <PaymentSidesheet
+    :offline-payment-types="pickupSetting.offlinePaymentTypes"
+    :payment-types="pickupSetting.paymentTypes"
+    @update:paymentTypes="(v: F_ORDER_PAYMENT_TYPE[]) => (pickupSetting.paymentTypes = v)"
+    @update:offlinePaymentTypes="(v: FdoOfflinePaymentMethod[] | undefined | null) => (pickupSetting.offlinePaymentTypes = v)"
+  />
+</FmCard>
+
+  <FmCard variant="outlined" class="p-5 mt-10">
+  <div class="flex-grow fm-typo-en-title-sm-800 mb-3">Pickup point</div>
+  <FmSwitch
+    :model-value="!!pickupSetting.pickupPointConfig"
+    value="pickuppoint"
+    label="Multiple pickup point"
+    sublabel="Allow customer pickup at multiple address instead of restaurant only"
+    label-placement="right"
+    @update:model-value="toggleMultiplePickupPoint"
+  />
+
+  <template v-if="pickupSetting.pickupPointConfig">
+    <div class="mt-3">
+      <FmCheckbox
+        v-model="pickupSetting.pickupPointConfig.restaurantEnable"
+        label="Restaurant as pickup point"
+        value="restaurant"
+      />
+    </div>
+    <PickUpPointDialog @update:address="updatePickupPoints" :pickup-setting="pickupSetting" />
+    <div v-if="pickupSetting.pickupPointConfig">
+      <div
+        v-for="(point) in pickupSetting.pickupPointConfig.points"
+        :key="point.address"
+        class="mb-5"
+      ></div>
+    </div>
+  </template>
+</FmCard>
+</template>
+
+<script setup lang="ts">
+import { F_ORDER_PAYMENT_TYPE, FdoOfflinePaymentMethod, FdoPickupPoint, FdoRestaurantPickup } from '@feedmepos/core/entity'
+import { useCoreStore } from '@feedmepos/mf-common'
+import { computed, ref, watch } from 'vue'
+import PickUpPointDialog from './PickUpPointDialog.vue'
+import Preorder from './Preorder.vue'
+import PaymentSidesheet from './PaymentSidesheet.vue'
+
+const emits = defineEmits<{
+  (event: 'update:modelValue', v: FdoRestaurantPickup): void
+}>()
+
+const { currentRestaurant } = useCoreStore()
+const defaultPickupSetting: FdoRestaurantPickup = {
+  offlinePaymentTypes: [],
+  paymentTypes: [F_ORDER_PAYMENT_TYPE.enum.cash]
+}
+
+const pickupSetting = ref<FdoRestaurantPickup>(
+  currentRestaurant.value?.pickup || defaultPickupSetting
+)
+
+const allowEPayment = computed(() => {
+  const paymentTypes = pickupSetting.value.paymentTypes || []
+  return paymentTypes.includes(F_ORDER_PAYMENT_TYPE.enum.ePayment)
+})
+
+const allowOfflinePayment = computed(() => {
+  const paymentTypes = pickupSetting.value.paymentTypes || []
+  const offlinePaymentTypes = pickupSetting.value.offlinePaymentTypes || []
+
+  return paymentTypes.includes(F_ORDER_PAYMENT_TYPE.enum.cash) || offlinePaymentTypes.length > 0
+})
+const parent = ref(false)
+const nestedVal = ref<string[]>([])
+
+const checkboxChildren = [
+  { label: 'Offline Payment', value: 'offline' },
+  { label: 'E-Payment', value: 'e-payment' }
+]
+
+const initializeCheckboxes = () => {
+  const initialValues: string[] = []
+  if (allowOfflinePayment.value) initialValues.push('offline')
+  if (allowEPayment.value) initialValues.push('e-payment')
+  nestedVal.value = initialValues
+  parent.value = initialValues.length === checkboxChildren.length
+}
+
+initializeCheckboxes()
+
+function toggleMultiplePickupPoint(value: boolean) {
+  if (value) {
+    pickupSetting.value.pickupPointConfig = pickupSetting.value.pickupPointConfig || {
+      restaurantEnable: false,
+      points: []
+    }
+  } else {
+    pickupSetting.value.pickupPointConfig = null
+  }
+}
+
+async function updatePickupPoints(newPoints: FdoPickupPoint[]) {
+  if (!pickupSetting.value.pickupPointConfig) {
+    pickupSetting.value.pickupPointConfig = {
+      restaurantEnable: false,
+      points: []
+    }
+  }
+  const existingPoints = pickupSetting.value.pickupPointConfig.points || []
+  const existingPointsMap = new Map(existingPoints.map((point) => [point.address, point]))
+  const newPointsMap = new Map(newPoints.map((point) => [point.address, point]))
+  const updatedPoints = [
+    ...newPoints.filter((point) => !existingPointsMap.has(point.address)),
+    ...existingPoints.filter((point) => newPointsMap.has(point.address))
+  ]
+  pickupSetting.value.pickupPointConfig.points = updatedPoints
+}
+
+
+async function updateIgnoreStock(v: boolean) {
+  pickupSetting.value.ignoreStock = v
+}
+
+watch(
+  () => pickupSetting.value,
+  (newVal) => {
+    emits('update:modelValue', newVal)
+  },
+  { deep: true }
+)
+</script>

package/src/views/order-settings/pickup/PickUpSideSheet.vue

@@ -0,0 +1,15 @@
+<template>
+    <FmSideSheet
+      header="Update Pickup Setting"
+      dismiss-away
+      class="w-full fm-typo-en-title-md-800"
+      :maxWidth="600"
+
+    >
+    <PickUpSettingDialog />
+</FmSideSheet>
+</template>
+
+<script setup lang="ts">
+import PickUpSettingDialog from './PickUpSettingDialog.vue';
+</script>

package/src/views/order-settings/pickup/Preorder.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import Day from 'dayjs'
+import { type PropType, computed } from 'vue'
+
+export interface PreorderData {
+  day: {
+    min: number
+    max: number
+  }
+}
+
+enum PICKUP_TYPE {
+  asap = 'asap',
+  preorder = 'preorder'
+}
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<PreorderData | null>,
+    default: undefined
+  }
+})
+
+const emits = defineEmits<{
+  (event: 'update:model-value', v: PreorderData | null): void
+}>()
+
+const min = computed(() => props.modelValue?.day.min || 0)
+const max = computed(() => {
+  const v = props.modelValue?.day.max
+  if (v === undefined) return 0
+  return v - 1
+})
+
+const preorderHint = computed(() => {
+  const format = 'DD/MM/YYYY HH:mm:ss'
+  return {
+    today: Day().format('DD/MM/YYYY'),
+    start: Day().add(min.value, 'days').startOf('day').format(format),
+    end: Day().add(max.value, 'days').endOf('day').format(format)
+  }
+})
+
+const pickupTypeOptions = computed(() => {
+  return [
+    {
+      label: 'ASAP',
+      value: PICKUP_TYPE.asap
+    },
+    {
+      label: 'Preorder',
+      value: PICKUP_TYPE.preorder
+    }
+  ]
+})
+const pickupType = computed(() => (!props.modelValue ? PICKUP_TYPE.asap : PICKUP_TYPE.preorder))
+function updatePickupType(type: unknown) {
+  const res =
+    type === PICKUP_TYPE.asap
+      ? null
+      : props.modelValue || {
+          day: {
+            min: 0,
+            max: 1
+          }
+        }
+  emits('update:model-value', res)
+}
+
+function updatePickupTime(v: { min?: number; max?: number }) {
+  const minV = v.min !== undefined ? v.min : min.value
+  const maxV = v.max !== undefined ? v.max : max.value
+  const res = {
+    ...props.modelValue,
+    day: { min: minV, max: maxV + 1 }
+  }
+  emits('update:model-value', res)
+}
+
+export type InputModel = string | number | boolean | null
+
+function getValue<T>(value: InputModel, type: 'string' | 'number'): T {
+  let result = value
+  switch (type) {
+    case 'string':
+      result = (value || '').toString()
+      break
+    case 'number':
+      const v = Number.parseFloat((value || '').toString())
+      result = Number.isNaN(v) ? 0 : v
+      break
+  }
+  return result as unknown as T
+}
+
+function updateStartTime(v: InputModel) {
+  const value = getValue<number>(v, 'number')
+  updatePickupTime({ min: value })
+}
+
+function updateEndTime(v: InputModel) {
+  const value = getValue<number>(v, 'number')
+  updatePickupTime({ max: value })
+}
+
+const startTimeRule = computed(() => (value: number) => {
+  return value <= max.value || 'Error'
+})
+
+const endTimeRule = computed(() => (value: number) => {
+  return value >= min.value || 'Error'
+})
+</script>
+
+<template>
+  <div class="flex-grow fm-typo-en-title-sm-800">Order Type</div>
+  <FmRadioGroup :model-value="pickupType" @update:model-value="updatePickupType">
+    <FmRadio value="asap" label="ASAP" />
+    <FmRadio value="preorder" label="Pre-order" />
+  </FmRadioGroup>
+  <div v-if="pickupType === 'preorder'" class="flex items-center">
+    Order from
+    <div class="w-20 ml-3 mr-3">
+      <FmTextField :model-value="min" @update:model-value="updateStartTime" :rules="[startTimeRule]" />
+    </div>
+    days to
+    <div class="w-20 ml-3 mr-3">
+      <FmTextField :model-value="max" @update:model-value="updateEndTime" :rules="[endTimeRule]" />
+    </div>
+    days
+  </div>
+  <div
+    v-if="pickupType === 'preorder'"
+    class="text-fm-color-overlay-background fm-typo-en-body-sm-400 mt-3"
+  >
+    Order on {{ preorderHint.today }}, Customer can order between {{ preorderHint.start }} and
+    {{ preorderHint.end }}. Max 7 days.
+  </div>
+</template>

package/src/views/order-settings/servicecharge/RateInput.vue

@@ -0,0 +1,34 @@
+<template>
+  <FmTextField 
+    :model-value="rate" 
+    label="Rate" 
+    append-icon="percent" 
+    @update:model-value="handleInputChange" 
+  />
+</template>
+
+<script setup lang="ts">
+import { Dinero } from '@feedmepos/core'
+import { type PropType, computed } from 'vue'
+import { percentToAdjustment, type AdjustmentAmount } from '@/helpers/number'
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<AdjustmentAmount>,
+    required: true
+  }
+})
+
+const emits = defineEmits<{
+  (event: 'update:model-value', v: AdjustmentAmount): void
+}>()
+
+const rate = computed(() => {
+  return Dinero.fromFdoDecimal({ decimal: props.modelValue }).multiply(100).toUnit()
+})
+
+function handleInputChange(value: string) {
+  const numberValue = parseFloat(value);
+  emits('update:model-value', percentToAdjustment(numberValue))
+}
+</script>