@feedmepos/mf-order-setting 0.0.2 → 0.0.6

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

@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <div class="flex-grow fm-typo-en-title-sm-800">Accepted Payment</div>
+    <FmCheckbox
+      :model-value="parent"
+      value=""
+      label="All"
+      @update:model-value="handleParentUpdate"
+      :indeterminate="nestedVal.length > 0 && nestedVal.length < checkboxChildren.length"
+    />
+    <div class="flex flex-row items-center">
+      <FmCheckbox
+        v-model="nestedVal"
+        :label="checkboxChildren[0].label"
+        :value="checkboxChildren[0].value"
+        @update:model-value="handleChildUpdate"
+      />
+    </div>
+    <div class="mt-3 mb-3">
+      <CustomPayment
+        :offlinePaymentTypes="localOfflinePaymentTypeCopy ?? []"
+        @update:offlinePaymentTypes="updateOfflinePaymentTypes"
+      />
+    </div>
+
+    <div v-if="nestedVal.includes('offline')">
+      <div v-if="localOfflinePaymentTypes?.length === 0">
+        <FmCard variant="outlined">
+          <FmCardSection>Cash</FmCardSection>
+        </FmCard>
+      </div>
+      <p v-for="(type, i) in localOfflinePaymentTypes || []" :key="i">
+        <FmCard variant="outlined" class="mb-3">
+          <FmCardSection class="flex items-center justify-between">
+            <div>
+              <span class="font-bold">{{ type.name }}</span>
+              <br />
+              <span>{{ type.instruction }}</span>
+            </div>
+            <div>
+              <FmButton append-icon="delete" variant="plain" @click="deleteOfflinePayment(i)" />
+            </div>
+          </FmCardSection>
+        </FmCard>
+      </p>
+    </div>
+
+    <FmCheckbox
+      v-model="nestedVal"
+      :label="checkboxChildren[1].label"
+      :value="checkboxChildren[1].value"
+      @update:model-value="handleChildUpdate"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  F_ORDER_PAYMENT_TYPE,
+  FdoRestaurantInHouseDelivery,
+  FdoRestaurantPickup
+} from '@feedmepos/core/entity'
+import CustomPayment from './CustomPayment.vue'
+import { computed, ref } from 'vue'
+
+const emits = defineEmits<{
+  (event: 'update:paymentTypes', v: F_ORDER_PAYMENT_TYPE[]): void
+  (
+    event: 'update:offlinePaymentTypes',
+    v:
+      | FdoRestaurantPickup['offlinePaymentTypes']
+      | FdoRestaurantInHouseDelivery['offlinePaymentTypes']
+  ): void
+}>()
+
+const props = defineProps<{
+  paymentTypes: F_ORDER_PAYMENT_TYPE[] | null | undefined
+  offlinePaymentTypes: any
+}>()
+
+const parent = ref(false)
+const nestedVal = ref<string[]>([])
+
+const checkboxChildren = [
+  { label: 'Offline Payment', value: 'offline' },
+  { label: 'E-Payment', value: 'e-payment' }
+]
+
+const allowEPayment = computed(() => {
+  const paymentTypes = props.paymentTypes || []
+  return paymentTypes.includes(F_ORDER_PAYMENT_TYPE.enum.ePayment)
+})
+
+const allowOfflinePayment = computed(() => {
+  const paymentTypes = props.paymentTypes || []
+  const offlinePaymentTypes = props.offlinePaymentTypes || []
+
+  return paymentTypes.includes(F_ORDER_PAYMENT_TYPE.enum.cash) || offlinePaymentTypes.length > 0
+})
+
+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()
+
+const handleParentUpdate = (ev: boolean) => {
+  nestedVal.value = ev ? checkboxChildren.map((item) => item.value) : []
+  parent.value = ev
+
+  const updatedPaymentTypes: F_ORDER_PAYMENT_TYPE[] = []
+  const updatedOfflinePaymentTypes = ev ? props.offlinePaymentTypes || [] : []
+
+  if (nestedVal.value.includes('e-payment')) {
+    updatedPaymentTypes.push(F_ORDER_PAYMENT_TYPE.enum.ePayment)
+  }
+  if (nestedVal.value.includes('offline')) {
+    updatedPaymentTypes.push(F_ORDER_PAYMENT_TYPE.enum.cash)
+  }
+
+  emits('update:paymentTypes', updatedPaymentTypes)
+  emits('update:offlinePaymentTypes', updatedOfflinePaymentTypes)
+}
+
+const handleChildUpdate = (ev: string[]) => {
+  nestedVal.value = ev
+  parent.value = ev.length === checkboxChildren.length
+
+  const updatedPaymentTypes: F_ORDER_PAYMENT_TYPE[] = []
+  const updatedOfflinePaymentTypes = ev.includes('offline') ? props.offlinePaymentTypes || [] : []
+
+  if (ev.includes('e-payment')) {
+    updatedPaymentTypes.push(F_ORDER_PAYMENT_TYPE.enum.ePayment)
+  }
+  if (ev.includes('offline')) {
+    updatedPaymentTypes.push(F_ORDER_PAYMENT_TYPE.enum.cash)
+  }
+
+  emits('update:paymentTypes', updatedPaymentTypes)
+  emits('update:offlinePaymentTypes', updatedOfflinePaymentTypes)
+}
+
+const localOfflinePaymentTypes = ref<FdoRestaurantPickup['offlinePaymentTypes']>(
+  props.offlinePaymentTypes ?? []
+)
+
+// Create a computed copy of `localOfflinePaymentTypes.value`
+const localOfflinePaymentTypeCopy = computed(() => {
+  return localOfflinePaymentTypes.value ? [...localOfflinePaymentTypes.value] : [];
+});
+
+function updateOfflinePaymentTypes(v: FdoRestaurantPickup['offlinePaymentTypes']) {
+  localOfflinePaymentTypes.value = v || []
+  emits('update:offlinePaymentTypes', localOfflinePaymentTypes.value)
+}
+
+function deleteOfflinePayment(index: number) {
+  if (localOfflinePaymentTypes.value) {
+    localOfflinePaymentTypes.value.splice(index, 1)
+    emits('update:offlinePaymentTypes', localOfflinePaymentTypes.value)
+  }
+}
+</script>

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

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { useDialog } from '@feedmepos/ui-library'
+import { ref } from 'vue'
+import PickUpPointDialogContent from './PickUpPointDialogContent.vue'
+import type { FdoPickupPoint } from '@entity'
+import type { FdoRestaurantPickup } from '@feedmepos/core/entity'
+import { coordinates, coordinateToArray } from '@/helpers/map'
+
+interface Props {
+  pickupSetting: FdoRestaurantPickup
+}
+const props = defineProps<Props>()
+
+const dialog = useDialog()
+const nameTextValue = ref<string>('')
+const addressTextValue = ref<string>('')
+const coordinatesValue = ref<number[]>([])
+
+const pickupPoints = ref<FdoPickupPoint[]>(props.pickupSetting.pickupPointConfig?.points ?? [])
+const currentIndex = ref<number | null>(null)
+
+const openDialog = () => {
+  nameTextValue.value = ''
+  addressTextValue.value = ''
+  coordinatesValue.value = []
+  const title = currentIndex.value === null ? 'Add pickup point' : 'Edit pickup point'
+  const point = currentIndex.value !== null ? pickupPoints.value[currentIndex.value] : null
+
+  if (point) {
+    nameTextValue.value = point.name
+    addressTextValue.value = point.address
+    coordinatesValue.value = point.coordinates
+  }
+
+  dialog
+    .open({
+      title,
+      contentComponent: PickUpPointDialogContent,
+      contentComponentProps: {
+        initialValue: point,
+        'onUpdate:modelValue': (v: FdoPickupPoint) => {
+          if (currentIndex.value !== null) {
+            nameTextValue.value = v.name
+            addressTextValue.value = v.address
+            coordinatesValue.value = v.coordinates
+          } else {
+            nameTextValue.value = v.name
+            addressTextValue.value = v.address
+            coordinatesValue.value = v.coordinates
+          }
+        }
+      },
+      primaryActions: { text: currentIndex.value === null ? 'Add' : 'Update', close: true },
+      secondaryActions: { text: 'Cancel', close: true }
+    })
+    .onPrimary(async () => {
+      const updatedPoint = {
+        name: nameTextValue.value,
+        address: addressTextValue.value,
+        coordinates: coordinatesValue.value
+      }
+      if (currentIndex.value === null) {
+        await addAddress(updatedPoint)
+      } else {
+        await updateAddress(currentIndex.value, updatedPoint)
+      }
+    })
+}
+
+async function addAddress(newPickupPoint: FdoPickupPoint) {
+  pickupPoints.value = [...pickupPoints.value, newPickupPoint]
+  emits('update:address', pickupPoints.value)
+}
+
+async function updateAddress(index: number, updatedPoint: FdoPickupPoint) {
+  if (index >= 0 && index < pickupPoints.value.length) {
+    pickupPoints.value[index] = updatedPoint
+    emits('update:address', pickupPoints.value)
+  }
+}
+
+function editPickupPoint(index: number) {
+  currentIndex.value = index
+  openDialog()
+}
+
+function addPickupPoint() {
+  currentIndex.value = null
+  openDialog()
+}
+
+function removePickupPoint(index: number) {
+  if (index >= 0 && index < pickupPoints.value.length) {
+    pickupPoints.value.splice(index, 1)
+    emits('update:address', pickupPoints.value)
+  }
+}
+
+const emits = defineEmits<{
+  (event: 'update:address', v: FdoPickupPoint[]): void
+}>()
+</script>
+
+<template>
+  <div class="m-2">
+    <FmButton label="Add pickup point" @click="addPickupPoint" variant="plain" icon="add" />
+  </div>
+  <div v-if="pickupPoints.length">
+    <div v-for="(point, index) in pickupPoints" :key="point.address" class="mb-5">
+      <FmCard variant="outlined">
+        <FmCardSection class="flex justify-between items-center">
+          <div class="mb-3">
+            <span class="font-bold">{{ point.name }}</span>
+            <br />
+            <span>{{ point.address }}</span>
+          </div>
+          <div class="flex flex-row">
+            <FmButton icon="edit" variant="tertiary" @click="() => editPickupPoint(index)" />
+            <FmButton icon="delete" variant="tertiary" @click="() => removePickupPoint(index)" />
+          </div>
+        </FmCardSection>
+      </FmCard>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <span>Name</span>
+    <FmTextField
+      :model-value="data.name"
+      @update:model-value="updateNameValue"
+      placeholder="Enter name"
+      :rules="[(val) => !!val || 'Field cannot be empty']"
+    />
+
+    <div class="mb-12"></div>
+    <span>Address</span>
+    <AddressInput :initial-value="data.address" @update:model-value="setLocation" />
+
+    <FmCard variant="outlined" class="mt-5">
+      <GoogleMap
+        ref="googleMapRef"
+        :markers="[marker]"
+        :center="marker"
+        editable
+        class="full-width"
+        style="height: 280px"
+        @map-click="setAddress"
+        @marker-change="(v: any) => setAddress(v.position)"
+      />
+    </FmCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MapCoordinate } from '@/components/type'
+import { arrayToCoordinate, coordinates, coordinateToArray, googleMap as GM } from '@/helpers/map'
+import { clone } from '@/helpers/object'
+import type { FdoPickupPoint } from '@feedmepos/core/entity'
+import { computed, reactive, ref, watch } from 'vue'
+import { GoogleMap } from '@/components'
+import AddressInput from './AddressInput.vue'
+
+const props = defineProps<{
+  initialValue: FdoPickupPoint
+}>()
+
+const emits = defineEmits<{
+  (event: 'update:modelValue', value: FdoPickupPoint): void
+}>()
+
+const data = reactive<FdoPickupPoint>(
+  props.initialValue
+    ? clone(props.initialValue)
+    : {
+        name: '',
+        address: '',
+        coordinates: coordinateToArray(coordinates.jb)
+      }
+)
+
+function updateNameValue(value: string) {
+  data.name = value
+  emits('update:modelValue', data)
+}
+
+function updateAddressValue(value: string) {
+  data.address = value
+  emits('update:modelValue', data)
+}
+
+const marker = computed<MapCoordinate>(() => {
+  const { lat, lng } = arrayToCoordinate(data.coordinates)
+  return { lat, lng }
+})
+
+const googleMapRef = ref<google.maps.Map | null>(null)
+
+function setLocation(address: string) {
+  const geocoder = new google.maps.Geocoder()
+  geocoder.geocode({ address }, (results, status) => {
+    if (status === google.maps.GeocoderStatus.OK && results[0]) {
+      const location = results[0].geometry.location
+      if (googleMapRef.value) {
+        googleMapRef.value.setCenter(location)
+        setAddress({ lat: location.lat(), lng: location.lng() })
+        updateAddressValue(address)
+      }
+    }
+  })
+}
+
+function setAddress({ lat, lng }: MapCoordinate) {
+  data.coordinates = [lng, lat]
+  if (googleMapRef.value) {
+    googleMapRef.value.setCenter({ lat, lng })
+  }
+  emits('update:modelValue', data)
+}
+</script>

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

@@ -0,0 +1,233 @@
+<template>
+  <div class="block m-3">
+    <div class="flex justify-end items-center mb-3">
+      <FmSearch v-model="searchValue" placeholder="Search" />
+    </div>
+
+    <FmSideSheet header="Update pickup setting" dismiss-away :maxWidth="600" v-model="sideSheet">
+      <PickUpSettingDialog
+        @update:modelValue="handlePickupSettingUpdate"
+      />
+
+      <template #side-sheet-footer>
+        <div class="flex gap-8 items-center justify-start">
+          <FmButton variant="primary" label="Apply" size="lg" @click="handleApply" />
+          <FmButton variant="secondary" label="Cancel" size="lg" @click="closeSideSheet" />
+        </div>
+      </template>
+    </FmSideSheet>
+    <FmTable
+      class="h-[500px]"
+      :row-data="pickupSettingData"
+      :hideFooter="true"
+      :column-defs="columns"
+      :search-value="searchValue"
+      :loading="loading"
+      @row-click="toggleSideSheet"
+    ></FmTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, h, onMounted, ref, watch } from 'vue'
+import type { ColumnDef } from '@feedmepos/ui-library'
+import { useCoreStore } from '@feedmepos/mf-common'
+import type { FdoPickupPoint, FdoRestaurantPickup } from '@feedmepos/core/entity'
+import { useRestaurantStore } from '@/stores/restaurant'
+import useSearch from '@/composables/search'
+import { sentenceCase } from 'change-case'
+import PickUpSettingDialog from './PickUpSettingDialog.vue'
+import { useLoading } from '@/composables/loading'
+
+const { filter } = useSearch()
+const { restaurants, changeRestaurant, currentRestaurant } = useCoreStore()
+const restaurantStore = useRestaurantStore()
+const sideSheet = ref<boolean>(false)
+const searchValue = ref('')
+
+const pickupSetting = computed<RestaurantPickup[]>(() => {
+  return restaurants.value.map((r) => {
+    const restaurantSetting = restaurantStore.restaurantSettings[r._id]
+    return {
+      enable: restaurantSetting?.acceptPickup,
+      restaurant: {
+        id: r._id,
+        name: r.profile.name
+      },
+      ...r.pickup
+    }
+  })
+})
+
+let updatedPickupSetting: FdoRestaurantPickup
+const handlePickupSettingUpdate = (pickupSetting: FdoRestaurantPickup) => {
+  updatedPickupSetting = pickupSetting
+}
+
+const { startAsyncCall } = useLoading()
+import { useSnackbarFunctions } from '@/components/snackbar'
+const { showSuccess } = useSnackbarFunctions()
+
+async function handleApply() {
+  
+  await startAsyncCall(async () => {
+    const id = currentRestaurant.value?._id ?? ''
+    const orderSetting = updatedPickupSetting as FdoRestaurantPickup
+    if (orderSetting) {
+      await restaurantStore.updatePickupSetting(id, orderSetting)
+    }
+    showSuccess('Pickup setting updated. ')
+  })
+  closeSideSheet()
+}
+const loadingDpi = ref<boolean>(false)
+const loading = computed(() => {
+  return !currentRestaurant.value || loadingDpi.value
+})
+
+onMounted(async () => {
+  const originalRestaurant = currentRestaurant.value;
+  try {
+    loadingDpi.value = true
+    await Promise.all(
+      restaurants.value.map(async (r) => {
+        changeRestaurant(r);
+        await restaurantStore.readRestaurantSetting(r._id);
+      })
+    );
+  } catch (error) {
+  } finally {
+    if (originalRestaurant) {
+      changeRestaurant(originalRestaurant);
+      loadingDpi.value = false
+    }
+  }
+});
+
+
+
+let originalRestaurant:any
+
+async function toggleSideSheet(rowData: any) {
+  const v = rowData.original.restaurantId;
+  originalRestaurant = currentRestaurant.value;
+
+  const restaurant = restaurants.value.find((r) => r._id === v);
+  if (restaurant) {
+    changeRestaurant(restaurant);
+  }
+  await restaurantStore.readRestaurantSetting(v);
+  sideSheet.value = true;
+}
+
+async function closeSideSheet() {
+  sideSheet.value = false;
+  if (originalRestaurant) {
+    changeRestaurant(originalRestaurant);
+  }
+}
+
+watch(sideSheet, (newValue) => {
+  if (!newValue) {
+    closeSideSheet()
+  }
+});
+
+
+const filteredPickupSettings = computed(() => {
+  return pickupSetting.value.filter(({ restaurant, paymentTypes, offlinePaymentTypes }) =>
+    filter([
+      restaurant.name,
+      paymentTypes?.join('') || '',
+      offlinePaymentTypes?.map((p) => p.name).join('') || ''
+    ])
+  )
+})
+
+const pickupSettingData = computed(() => {
+  return filteredPickupSettings.value.map((item) => {
+    const hasCustomOfflinePayment = !!item.offlinePaymentTypes?.length
+    const canOfflinePayment = (item.paymentTypes || []).includes('cash')
+    const paymentMethod = !hasCustomOfflinePayment
+      ? (item.paymentTypes || []).map((p) => sentenceCase(p)).join(', ')
+      : [
+          (item.paymentTypes || [])
+            .filter((p) => p !== 'cash')
+            .map((p) => sentenceCase(p))
+            .join(', '),
+          canOfflinePayment
+            ? (item.offlinePaymentTypes || []).map((p) => sentenceCase(p.name)).join(', ')
+            : ''
+        ]
+          .filter((v) => !!v)
+          .join(', ')
+
+    const onlineStatus = item.enable ? 'Activated' : 'Inactive'
+
+    const preorderRange = item.pickupTime
+      ? `${item.pickupTime.day.min} to ${item.pickupTime.day.max - 1} Day`
+      : '-'
+    const pickupPointCount = item.pickupPointConfig?.points.length || 0
+
+    return {
+      restaurantId: item.restaurant.id,
+      restaurant: item.restaurant.name,
+      paymentmethod: paymentMethod,
+      online: onlineStatus,
+      enable: item.enable,
+      preorder: preorderRange,
+      pickuppoint: `${pickupPointCount} pickup point`
+    }
+  })
+})
+
+export interface RestaurantPickup extends FdoRestaurantPickup {
+  enable: boolean
+  restaurant: {
+    id: string
+    name: string
+  }
+}
+
+const getClassForOnline = (enabled: boolean) => {
+  return enabled
+    ? 'bg-fm-color-system-success-100  text-fm-color-system-success-400 fm-typo-en-body-md-600 border fm-corner-radius-lg w-max gap-8 p-4'
+    : ' bg-fm-color-neutral-gray-100 fm-typo-en-body-md-600 border fm-corner-radius-lg w-max gap-8 p-4'
+}
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: 'restaurant',
+    header: () => 'Restaurant',
+    meta: {
+      maxWidth: '150px'
+    },
+    enableSorting: false
+  },
+  {
+    accessorKey: 'paymentmethod',
+    header: () => 'Payment method',
+    enableSorting: false
+  },
+  {
+    accessorKey: 'online',
+    header: () => 'Online',
+    cell: (info: any) => {
+      const enabled = info.row.original.enable
+      const onlineStatus = info.getValue()
+      return h('div', { class: getClassForOnline(enabled) }, onlineStatus)
+    },
+    enableSorting: false
+  },
+  {
+    accessorKey: 'preorder',
+    header: () => 'Preorder',
+    enableSorting: false
+  },
+  {
+    accessorKey: 'pickuppoint',
+    header: () => 'Pickup point',
+    enableSorting: false
+  }
+]
+</script>