@feedmepos/mf-order-setting 0.0.2 → 0.0.6

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

@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import type { MapPolygon } from '@/components/type'
+import { useLoading } from '@/composables/loading'
+import { formatCurrency } from '@/helpers/currency'
+import { arrayToCoordinate, getPolygonCenter, googleMap as gm } from '@/helpers/map'
+import { clone } from '@/helpers/object'
+import type { FdoAddress, FdoDeliveryArea } from '@feedmepos/core/entity'
+import GoogleMap from '@/components/GoogleMap.vue'
+import ZoneDialog from './ZoneDialog.vue'
+import { type PropType, computed, onMounted, ref } from 'vue'
+import { useSnackbar, SnackbarPosition } from '@feedmepos/ui-library'
+
+export interface Address extends FdoAddress {
+  formatted: string
+  isValidPostcode: boolean
+  isValid: boolean
+  isValidCoordinate: boolean
+}
+
+const props = defineProps({
+  modelValue: {
+    type: Array as PropType<FdoDeliveryArea[]>,
+    required: true
+  },
+  address: {
+    type: Object as PropType<Address>,
+    required: true
+  }
+})
+
+const emits = defineEmits<{
+  (event: 'update:model-value', v: FdoDeliveryArea[]): void
+}>()
+
+const maxZone = 10
+const colors = [
+  '#1F7735', //green-400 
+  '#995900', //orange-400
+  '#99231D', //red-400
+  '#004999', //blue-400
+  '#8CE67D', //macaron
+  '#007BA7', //blueberry
+  '#FF5D53', //salmon
+  '#73C8E6', //tuna
+  '#FCA23E', //citrus
+  '#F09BBE', //halite
+  '#FFD232', //cheese
+  '#50BE9B', //mint
+  '#8358D4', //plum
+  '#9B5046', //cocoa
+]
+
+const areas = computed(() =>
+  props.modelValue.map((area) => {
+    const { deliveryFee, minPurchase, freeAfterTotal } = area
+    return [
+      {
+        label: 'Delivery Fee',
+        value: formatCurrency(deliveryFee)
+      },
+      {
+        label: 'Min Purchase',
+        value: minPurchase ? formatCurrency(minPurchase) : 'Not Set'
+      },
+      {
+        label: 'Min spend for free Delivery',
+        value: freeAfterTotal ? formatCurrency(freeAfterTotal) : 'Not Set'
+      }
+    ]
+  })
+)
+const sideSheet = ref<boolean>(false)
+
+const polygons = computed<MapPolygon[]>(() => {
+  return props.modelValue.map((area, index) => ({
+    paths: area.polygon.reduce<
+      {
+        lat: number
+        lng: number
+      }[]
+    >((pv, path) => [...pv, { lat: path[1], lng: path[0] }], []),
+    strokeColor: colors[index],
+    fillColor: colors[index]
+  }))
+})
+
+function deleteZone(index: number) {
+  const cloned = clone(props.modelValue)
+  cloned.splice(index, 1)
+  emits('update:model-value', cloned)
+}
+
+const currentIndex = ref<number | null>(null)
+const deliveryArea = ref<FdoDeliveryArea>()
+function editZone(index: number) {
+  currentIndex.value = index
+  deliveryArea.value = props.modelValue[index]
+  openSideSheet()
+}
+
+const Snackbar = useSnackbar()
+
+function addZone() {
+  sideSheet.value = false
+  if (savedZone.value) {
+    emits('update:model-value', [...props.modelValue, savedZone.value])
+    Snackbar.open({
+      type: 'success',
+      message: 'Zone added successfully.',
+      position: 'bottom' as SnackbarPosition
+    })
+  }
+}
+
+const savedZone = ref<FdoDeliveryArea>()
+
+function handleZoneUpdate(v: FdoDeliveryArea) {
+  savedZone.value = v
+}
+
+function updateZone(index: number) {
+  if (savedZone.value) {
+    emits(
+      'update:model-value',
+      props.modelValue.map((v, i) => (index === i ? savedZone.value! : v))
+    )
+    Snackbar.open({
+      type: 'success',
+      message: 'Zone updated successfully.',
+      position: 'bottom' as SnackbarPosition
+    })
+    sideSheet.value = false
+  }
+}
+
+const center = ref<{
+  lat: number
+  lng: number
+}>()
+const { startAsyncCall } = useLoading()
+const gmRef = ref<typeof GoogleMap>()
+async function getCenter() {
+  const { formatted, coordinates } = props.address
+  try {
+    center.value = arrayToCoordinate(coordinates || [])
+    gmRef.value?.setCenter(center.value)
+  } catch (err) {
+    const geocoder = new gm.maps.Geocoder()
+    await startAsyncCall(async () => {
+      await new Promise((resolve) => {
+        geocoder.geocode({ address: formatted }, (res) => {
+          if (res?.[0]) {
+            center.value = {
+              lng: res[0].geometry.location.lng(),
+              lat: res[0].geometry.location.lat()
+            }
+          }
+          resolve(true)
+        })
+      })
+    })
+  } finally {
+    if (center.value) gmRef.value?.setCenter(center.value)
+  }
+}
+
+function openSideSheet() {
+  sideSheet.value = true
+}
+
+function closeSideSheet() {
+  sideSheet.value = false
+  currentIndex.value = null
+}
+
+onMounted(getCenter)
+</script>
+
+<template>
+  <GoogleMap
+    ref="gmRef"
+    class="full-width"
+    style="height: 500px"
+    :center="center"
+    :polygons="polygons"
+    :zoom="10"   
+  />
+
+  <div class=" mt-5 mb-5">
+    <FmButton class="mt-3" @click="openSideSheet" icon="add" label="Add Delivery Zone" variant="plain" />
+  </div>
+
+  <FmSideSheet header="Add delivery zone" dismiss-away :maxWidth="600" v-model="sideSheet">
+    <div v-if="currentIndex !== null">
+      <ZoneDialog
+        :center="getPolygonCenter(deliveryArea?.polygon ?? [])"
+        :initial-value="deliveryArea"
+        @update:model-value="handleZoneUpdate"
+      />
+    </div>
+    <div v-else>
+      <ZoneDialog :center="center" @update:model-value="handleZoneUpdate" />
+    </div>
+
+    <template #side-sheet-footer>
+      <div class="flex gap-8 items-center justify-start">
+        <div v-if="currentIndex !== null">
+          <FmButton variant="primary" label="Save" size="lg" @click="updateZone(currentIndex)" close: true />
+        </div>
+        <div v-else>
+          <FmButton variant="primary" label="Save" size="lg" @click="addZone" close: true/>
+        </div>
+        <FmButton variant="secondary" label="Cancel" size="lg" @click="closeSideSheet" />
+      </div>
+    </template>
+  </FmSideSheet>
+
+  <div v-for="(info, index) in areas" :key="index">
+    <FmCard variant="outlined" class="p-5 mb-5">
+      <div class="flex flex-row">
+        <div class="fm-typo-en-body-lg-600 mb-3 mr-5" :style="{
+            color: colors[index]
+          }">Delivery Zone {{ index + 1 }}</div>
+        
+        <div class="mr-auto"></div>
+        <FmButton append-icon="edit" variant="tertiary" @click="editZone(index)" />
+        <FmButton append-icon="delete" variant="tertiary" @click="deleteZone(index)" />
+      </div>
+
+      <div v-for="(row, i) in info" :key="i">
+        <div class="mb-1">{{ row.label }}</div>
+        <div class="fm-typo-en-body-lg-600 mb-2">{{ row.value }}</div>
+      </div>
+    </FmCard>
+  </div>
+</template>

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

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import type { FdoDeliveryTime, FdoOperatingHour, FdoOperatingHours } from '@feedmepos/core/entity'
+import Day from 'dayjs'
+import { computed, ref, type PropType } from 'vue'
+import TimePicker from './TimePicker.vue'
+import DeliveryCustomTime from './DeliveryCustomTime.vue'
+
+type DeliveryTimeType = 'operatingHour' | 'fixed' | 'custom'
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<FdoDeliveryTime>,
+    required: true
+  }
+})
+
+const emits = defineEmits<{
+  (event: 'update:model-value', v: FdoDeliveryTime): void
+}>()
+
+const selectedDeliveryTime = computed<DeliveryTimeType>(() => {
+  if (props.modelValue?.time) return 'fixed'
+  if (props.modelValue?.custom) return 'custom'
+
+  return 'operatingHour'
+})
+const deliveryTimeOptions: {
+  label: string
+  value: DeliveryTimeType
+}[] = [
+  {
+    label: 'Operating hour',
+    value: 'operatingHour'
+  },
+  {
+    label: 'Fixed time',
+    value: 'fixed'
+  },
+  {
+    label: 'Custom time',
+    value: 'custom'
+  }
+]
+
+function initOperatingHour() {
+  return {
+    enable: false,
+    hours: []
+  }
+}
+
+function changeDeliveryTimeType(type: DeliveryTimeType) {
+  switch (type) {
+    case 'operatingHour':
+      emits('update:model-value', {
+        ...props.modelValue,
+        custom: null,
+        time: null
+      })
+      break
+    case 'fixed':
+      emits('update:model-value', {
+        ...props.modelValue,
+        custom: null,
+        time: []
+      })
+      break
+    case 'custom':
+      emits('update:model-value', {
+        ...props.modelValue,
+        custom: {
+          0: initOperatingHour(),
+          1: initOperatingHour(),
+          2: initOperatingHour(),
+          3: initOperatingHour(),
+          4: initOperatingHour(),
+          5: initOperatingHour(),
+          6: initOperatingHour()
+        },
+        time: null
+      })
+      break
+    default:
+      throw Error(`Unimplement delivery time type ${type}`)
+  }
+}
+
+function updateCustomTime(time: FdoOperatingHours) {
+  emits('update:model-value', {
+    ...props.modelValue,
+    custom: time
+  })
+}
+
+function getCheckBoxState(v: DeliveryTimeType) {
+  return v === selectedDeliveryTime.value
+}
+
+function canToggle(value: DeliveryTimeType) {
+  return selectedDeliveryTime.value.length === 0 || getCheckBoxState(value)
+}
+</script>
+
+<template>
+  <div v-for="option in deliveryTimeOptions" :key="option.value">
+    <FmCheckbox
+      
+      :value="option.value"
+      :label="option.label"
+      :model-value="getCheckBoxState(option.value)"
+      @update:model-value="
+        () => {
+          changeDeliveryTimeType(option.value)
+        }
+      "
+      :disabled="canToggle(option.value)"
+    />
+    <div v-if="modelValue.custom && option.value === 'custom'">
+      <FmCard variant="outlined">
+        <FmCardSection>
+          <div class="flex-grow fm-typo-en-body-lg-600 mb-2">Time Slots</div>
+          <DeliveryCustomTime
+            title="Time slots"
+            :model-value="modelValue.custom"
+            @update:model-value="updateCustomTime"
+          />
+        </FmCardSection>
+      </FmCard>
+    </div>
+
+    <div v-if="modelValue.time && option.value === 'fixed'">
+      <FmCard variant="outlined">
+        <FmCardSection>
+          <div class="flex-grow fm-typo-en-body-lg-600 mb-2">Time Slots</div>
+          <TimePicker
+            :modelValue="props.modelValue"
+            @update:model-value="(v) => emits('update:model-value', v)"
+          />
+        </FmCardSection>
+      </FmCard>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { clone } from '@/helpers/object'
+import { useMenuStore } from '@/stores/menu/menu'
+import type {
+  F_ORDER_PAYMENT_TYPE,
+  FdoAddress,
+  FdoDeliveryArea,
+  FdoDeliveryTime,
+  FdoOfflinePaymentMethod,
+  FdoRestaurantInHouseDelivery
+} from '@feedmepos/core/entity'
+import { computed, reactive, watch, type PropType } from 'vue'
+import PaymentType from '../../dinein/PaymentType.vue'
+import Preorder from '../../pickup/Preorder.vue'
+import DeliveryTime from './DeliveryTime.vue'
+import DeliveryOrder, { type Address } from './DeliveryOrder.vue'
+import PaymentSidesheet from '../../pickup/PaymentSidesheet.vue'
+
+export interface InhouseDialogData {
+  enable: boolean
+  catalogId: string | null
+  term: string
+  areas: FdoDeliveryArea[]
+  paymentTypes: F_ORDER_PAYMENT_TYPE[]
+  offlinePaymentTypes: FdoOfflinePaymentMethod[] | undefined | null
+  ignoreStock: boolean
+  deliveryTime: FdoDeliveryTime | null
+}
+
+const props = defineProps({
+  initialValue: {
+    type: Object as PropType<InhouseDialogData>,
+    default: undefined
+  },
+  allowEPayment: {
+    type: [Boolean, String] as PropType<boolean | string>,
+    required: true
+  },
+  address: {
+    type: Object as PropType<Address | undefined>,
+    required: true
+  }
+})
+
+const inhouse = reactive<InhouseDialogData>(
+  props.initialValue
+    ? clone(props.initialValue)
+    : {
+        enable: false,
+        catalogId: null,
+        term: '',
+        areas: [],
+        ignoreStock: false,
+        paymentTypes: [],
+        offlinePaymentTypes: [],
+        deliveryTime: null
+      }
+)
+
+const emits = defineEmits<{
+  (event: 'update:model-value', v: FdoRestaurantInHouseDelivery): void
+}>()
+
+function emitUpdatedValue() {
+  emits('update:model-value', { ...inhouse })
+}
+
+function updateEnable(value: boolean) {
+  inhouse.enable = value
+  emitUpdatedValue()
+}
+
+function updateIgnoreStock(value: boolean) {
+  inhouse.ignoreStock = value
+  emitUpdatedValue()
+}
+
+function updateCatalogId(value: string | null) {
+  inhouse.catalogId = value
+  emitUpdatedValue()
+}
+
+function updateTerm(value: string) {
+  inhouse.term = value
+  emitUpdatedValue()
+}
+
+watch(
+  inhouse,
+  (newValue) => {
+    emits('update:model-value', clone(newValue))
+  },
+  { deep: true }
+)
+
+watch(
+  () => inhouse,
+  () => emitUpdatedValue(),
+  { deep: true }
+)
+
+const menuStore = useMenuStore()
+
+const preorderDeliveryTime = computed({
+  get: () => inhouse.deliveryTime,
+  set: (value) => {
+    inhouse.deliveryTime = value
+    emitUpdatedValue()
+  }
+})
+
+const actualDeliveryTime = computed({
+  get: () => inhouse.deliveryTime,
+  set: (value) => {
+    inhouse.deliveryTime = value
+    emitUpdatedValue()
+  }
+})
+</script>
+
+<template>
+  <FmSwitch
+    :model-value="inhouse.enable"
+    label="Activate In house Delivery"
+    label-placement="right"
+    sublabel="Accept In house Delivery with POS"
+    @update:model-value="updateEnable"
+  />
+  <div v-if="inhouse.enable">
+    <FmCard variant="outlined" class="p-5 mt-10">
+      <div class="flex-grow fm-typo-en-title-sm-800 mb-3">General setting</div>
+
+      <div class="mb-5">
+        <FmSwitch
+          :model-value="inhouse.ignoreStock || false"
+          value="ignoreStock"
+          label="Ignore stock"
+          sublabel="Customer can order even product out of stocks"
+          label-placement="right"
+          @update:model-value="updateIgnoreStock"
+        />
+      </div>
+
+      <div class="mb-5">
+        <FmSelect
+          :model-value="inhouse.catalogId"
+          label="Catalog"
+          :items="menuStore.catalogOptions"
+          @update:model-value="updateCatalogId"
+        />
+      </div>
+
+      <div class="mb-5">
+        <FmTextarea
+          :model-value="inhouse.term"
+          label="Delivery term"
+          @update:model-value="updateTerm"
+        />
+      </div>
+    </FmCard>
+
+    <FmCard variant="outlined" class="p-5 mt-10">
+      <PaymentSidesheet
+        :paymentTypes="inhouse.paymentTypes"
+        :offlinePaymentTypes="inhouse.offlinePaymentTypes"
+        @update:payment-types="(v: F_ORDER_PAYMENT_TYPE[]) => (inhouse.paymentTypes = v)"
+        @update:offline-payment-types="(v: FdoOfflinePaymentMethod[] | undefined | null) => (inhouse.offlinePaymentTypes = v)"
+      />
+    </FmCard>
+
+    <FmCard variant="outlined" class="p-5 mt-10">
+      <Preorder v-model="preorderDeliveryTime" />
+    </FmCard>
+
+    <div v-if="preorderDeliveryTime">
+      <FmCard variant="outlined" class="p-5 mt-10">
+        <div class="flex-grow fm-typo-en-title-sm-800">Delivery Time</div>
+        <DeliveryTime v-model="actualDeliveryTime as FdoDeliveryTime" />
+      </FmCard>
+    </div>
+    <FmCard variant="outlined" class="p-5 mt-10">
+      <div class="flex-grow fm-typo-en-title-sm-800 mb-3">Delivery order</div>
+      <DeliveryOrder v-model="inhouse.areas" :address="address as Address" />
+    </FmCard>
+  </div>
+</template>

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

@@ -0,0 +1,76 @@
+<template>
+  <div v-for="(time, index) in fixedTimeslots" :key="index">
+    <div class="flex flex-row" >
+      <div class="w-full">
+        <FmTimePicker
+          :model-value="formatTime(time)"
+          @update:model-value="
+            (v:any) => {
+              const date = parseTime(v)
+              updateTimeslot(index, date)
+            }
+          "
+        />
+      </div>
+      <FmButton class="mt-2 ml-4" append-icon="close" variant="tertiary" @click="removeTimeslot(index)" />
+    </div>
+  </div>
+  <FmButton class="mt-3" @click.stop="addTimeslot" icon="add" label="Add Time Slot" variant="plain"/>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import Day from 'dayjs'
+import type { FdoDeliveryTime } from '@feedmepos/core/entity'
+
+const props = defineProps<{
+  modelValue: FdoDeliveryTime
+}>()
+
+const emits = defineEmits<{
+  (event: 'update:model-value', v: FdoDeliveryTime): void
+}>()
+
+function formatTime(date: Date): string {
+  return date.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })
+}
+
+function parseTime(timeString: string): Date {
+  const [hour, minute] = timeString.split(':').map(Number)
+  return Day().set('hour', hour).set('minute', minute).toDate()
+}
+
+function updateTimeslot(index: number, v: Date) {
+  emits('update:model-value', {
+    ...props.modelValue,
+    time: (props.modelValue.time || []).map((slot: any, i: number) =>
+      i !== index ? slot : Day(v).format('HH:mm')
+    )
+  })
+}
+
+function removeTimeslot(index: number) {
+  emits('update:model-value', {
+    ...props.modelValue,
+    time: (props.modelValue.time || []).filter((_: any, i: number) => i !== index)
+  })
+}
+
+function addTimeslot() {
+  emits('update:model-value', {
+    ...props.modelValue,
+    time: [...(props.modelValue.time || []), '00:00']
+  })
+}
+
+const fixedTimeslots = computed(() => {
+  return (
+    props.modelValue.time?.map((time) => {
+      const [hour, minute] = time.split(':')
+      return Day().set('hour', parseInt(hour)).set('minute', parseInt(minute)).toDate()
+    }) || []
+  )
+})
+
+
+</script>