@feedmepos/mf-order-setting 0.0.2 → 0.0.6

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

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import GoogleMap from '@/components/GoogleMap.vue'
+import type { InputModel, MapCoordinate, MapPolygon } from '@/components/type'
+import { arrayToCoordinate, coordinates, coordinateToArray, generateAreaPaths } from '@/helpers/map'
+import { clone } from '@/helpers/object'
+import { Dinero } from '@feedmepos/core'
+import type { FdoDeliveryArea, FdoDinero } from '@feedmepos/core/entity'
+import { ref, reactive, type PropType, computed, onMounted, watch } from 'vue'
+import CurrencyInput from './CurrencyInput.vue'
+
+const emits = defineEmits<{
+  (e: 'update:model-value', value: FdoDeliveryArea): void
+}>()
+
+const zeroDineroObject = Dinero.zero().toObject()
+
+const props = defineProps({
+  initialValue: {
+    type: Object as PropType<FdoDeliveryArea | null>,
+    default: undefined
+  },
+  center: {
+    type: Object as PropType<{
+      lat: number
+      lng: number
+    }>,
+    default: undefined
+  }
+})
+
+const distanceInKM = ref(10)
+const data = reactive<FdoDeliveryArea>(
+  props.initialValue
+    ? clone(props.initialValue)
+    : {
+        deliveryFee: zeroDineroObject,
+        minPurchase: null,
+        freeAfterTotal: null,
+        polygon: []
+      }
+)
+
+const polygon = computed<MapPolygon[]>(() => {
+  return [
+    {
+      paths: data.polygon.map((position) => arrayToCoordinate(position))
+    }
+  ]
+})
+
+const distanceRules = [
+  (value: number) => value > 0 || "Distance must be greater than 0"
+];
+
+
+function generatePolygon() {
+  const paths = generateAreaPaths({
+    center: props.center || coordinates.jb,
+    radius: distanceInKM.value / 2
+  })
+  data.polygon = paths.map((path) => coordinateToArray(path))
+}
+
+function updateDistance(value: InputModel) {
+  let v = Number.parseFloat((value || '').toString())
+  v = Number.isNaN(v) ? 0 : v
+  distanceInKM.value = v
+  generatePolygon()
+}
+
+function updatePolygon({ path }: { path: MapCoordinate[] }) {
+  data.polygon = path.map(coordinateToArray)
+}
+
+function updateDeliveryFee(v: FdoDinero) {
+  data.deliveryFee = v
+}
+
+function updateMinPurchase(v: FdoDinero) {
+  data.minPurchase = v
+}
+
+function updateFreeAfterTotal(v: FdoDinero) {
+  data.freeAfterTotal = v
+}
+
+onMounted(() => {
+  if (!props.initialValue) generatePolygon()
+})
+
+watch(
+  () => data,
+  (newValue) => {
+    emits('update:model-value', newValue)
+  },
+  { deep: true }
+)
+</script>
+
+<template>
+  <CurrencyInput
+    :model-value="data.deliveryFee"
+    @update:model-value="updateDeliveryFee"
+    label="Delivery Fee"
+  />
+  <div class="flex flex-row">
+    <div class="mr-1">
+      <CurrencyInput
+        :model-value="data.minPurchase"
+        @update:model-value="updateMinPurchase"
+        label="Min Purchase"
+      />
+    </div>
+    <div class="ml-1">
+      <CurrencyInput
+        :model-value="data.freeAfterTotal"
+        @update:model-value="updateFreeAfterTotal"
+        label="Min spend for free Delivery"
+      />
+    </div>
+  </div>
+  <FmStepperField
+    class="mb-5"
+    :model-value="distanceInKM"
+    label="Delivery zone (km)"
+    placeholder="0"
+    :show-steppers="false"
+    @update:model-value="updateDistance"
+    :rules="distanceRules"
+  />
+
+  <div>
+    <GoogleMap
+      :polygons="polygon"
+      :zoom="11"
+      :center="center"
+      editable
+      class="full-width"
+      style="height: 410px"
+      @polygon-change="updatePolygon"
+    />
+  </div>
+</template>

package/src/views/order-settings/delivery/integrated-delivery/FeedmeDelivery.vue

@@ -0,0 +1,244 @@
+<script setup lang="ts">
+import { clone } from '@/helpers/object'
+import { useMenuStore } from '@/stores/menu/menu'
+import { useRestaurantStore } from '@/stores/restaurant'
+import { Pos } from '@feedmepos/core'
+import { F_FEATURE, F_PAYOUT_ACCOUNT_STATUS, FdoRestaurantFeedmeDelivery } from '@feedmepos/core/entity'
+import { useCoreStore } from '@feedmepos/mf-common'
+import { type PropType, computed, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import parsePhoneNumberFromString from 'libphonenumber-js'
+
+interface ValidateFeedmeErrorResult {
+  message: string
+  action?: {
+    label: string
+    callback: () => void
+  }
+}
+
+type ValidateFeedmeResult = ValidateFeedmeErrorResult | true
+
+const props = defineProps({
+  initialValue: {
+    type: Object as PropType<FdoRestaurantFeedme>,
+    default: undefined
+  }
+})
+
+export interface FdoRestaurantFeedme extends FdoRestaurantFeedmeDelivery {
+  ignoreStock?: boolean
+}
+
+const defaultValue: FdoRestaurantFeedme = {
+  enable: false,
+  catalogId: null
+}
+
+const data = reactive<FdoRestaurantFeedme>(
+  props.initialValue ? clone(props.initialValue) : defaultValue
+)
+const { sessionUser } = useCoreStore()
+// const userStore = useUserStore();
+const canActivateFeedmeExpress = computed(() => sessionUser.value?.isInternal)
+const { currentRestaurant } = useCoreStore()
+const restaurantStore = useRestaurantStore()
+const validatePosVersion = computed<ValidateFeedmeResult>(() => {
+  const posVersion = currentRestaurant?.value?.posVersion
+  const res = Pos.canUse({
+    feature: F_FEATURE.enum.feedmeDelivery,
+    posVersion: posVersion ?? ''
+  })
+  if (!res) {
+    const minVersion = Pos.minVersionToUse(F_FEATURE.enum.feedmeDelivery)
+    return { message: `Min POS version ${minVersion} required for FeedMe Express` }
+  }
+  return true
+})
+
+const router = useRouter()
+
+currentRestaurant.value?.profile
+
+
+const validatePayoutAccount = computed<ValidateFeedmeResult>(() => {
+  const account = currentRestaurant.value?.payoutAccount
+  if (!account?.enable) {
+    return {
+      message: 'Payout account is required to enable FeedMe Express',
+      action: {
+        label: 'Update payout account',
+        callback: () => {
+          //TODO: payout account
+          // router.push({ name: ROUTE_NAME.PAYOUT_ACCOUNT });
+        }
+      }
+    }
+  }
+  if (account.status !== F_PAYOUT_ACCOUNT_STATUS.enum.APPROVED) {
+    return {
+      message:
+        'Your payout account is under review. Please contact our staff for further assistant.'
+    }
+  }
+  return true
+})
+
+
+const validateRestaurantProfile = computed<ValidateFeedmeResult>(() => {
+  const restaurant = currentRestaurant
+  const profile = currentRestaurant.value?.profile
+  const formattedAddress = formatAddress(profile?.address)
+  if (!restaurant || !profile) return { message: 'Invalid restaurant' }
+  const phoneNo = parsePhoneNumberFromString(profile.phoneNo)
+  if (!phoneNo || !formattedAddress.isValid || !formattedAddress.isValidCoordinate) {
+    const requiredField = !phoneNo ? 'contact' : 'address'
+    return {
+      message: `Invalid restaurant ${requiredField}, please complete your restaurant profile to enable FeedMe Express`,
+      action: {
+        label: 'Update now',
+        callback: async () => {
+          //TODO: restaurant profile
+          // Dialog.create({
+          //   component: RestaurantDialog,
+          //   componentProps: {
+          //     restaurantId: restaurant.id,
+          //     initialValue: profile,
+          //     enableFeedmeExpress: true,
+          //   }
+          // }).onOk(async (data: RestaurantDialogData) => {
+          //   await global(async () => {
+          //     await restaurantStore.updateRestaurantProfile(restaurant, data);
+          //   }, {
+          //     successMessage: 'Restaurant profile updated',
+          //   });
+          // });
+        }
+      }
+    }
+  }
+
+  return true
+})
+const validation = computed<ValidateFeedmeResult>(() => {
+
+  const result =
+    [validatePosVersion.value, validatePayoutAccount.value, validateRestaurantProfile.value].find(
+      (res) => res !== true
+    ) || true;
+
+  emits('validation-result', result === true);
+
+
+  if (!(props.initialValue?.enable || false) && !canActivateFeedmeExpress.value) {
+    return {
+      message: 'Contact our staff to enable FeedMe Express'
+    }
+  }
+  return (
+    [validatePosVersion.value, validatePayoutAccount.value, validateRestaurantProfile.value].find(
+      (result) => result !== true
+    ) || true
+  )
+})
+
+
+
+const emits = defineEmits<{
+  (event: 'update:model-value', v: FdoRestaurantFeedme): void
+  (event: 'validation-result', result: boolean): void
+}>()
+
+function emitUpdatedValue() {
+  emits('update:model-value', { ...data })
+}
+
+function updateEnable(value: boolean) {
+  data.enable = value
+  emitUpdatedValue()
+}
+
+function updateIgnoreStock(value: boolean) {
+  data.ignoreStock = value
+  emitUpdatedValue()
+}
+
+function updateCatalogId(value: string | null) {
+  data.catalogId = value
+  emitUpdatedValue()
+}
+
+function updateTerm(value: string | null) {
+  data.term = value
+  emitUpdatedValue()
+}
+
+function updateInstruction(value: string | null) {
+  data.instruction = value
+  emitUpdatedValue()
+}
+
+const menuStore = useMenuStore()
+import svgPath from '@/assets/images/no-data.svg'
+import { formatAddress } from '@/helpers/profile'
+</script>
+
+<template>
+  <template v-if="validation === true">
+    <FmSwitch
+      :model-value="data.enable"
+      label="Active FeedMe Express"
+      label-placement="right"
+      sublabel="Customer can select FeedMe express to delivery their meal"
+      @update:model-value="updateEnable"
+    />
+    <div v-if="data.enable">
+      <FmCard variant="outlined" class="p-5 mt-10">
+      <div class="flex-grow fm-typo-en-title-sm-800 mb-3">General Info</div>
+
+      <FmSwitch
+        :model-value="data.ignoreStock || false"
+        value="ignoreStock"
+        label="Ignore stock"
+        sublabel="Customer can order even product out of stocks"
+        label-placement="right"
+        @update:model-value="updateIgnoreStock"
+      />
+
+      <div class="mt-5 mb-3">
+        <FmSelect
+          :model-value="data.catalogId"
+          label="Catalog"
+          :items="menuStore.catalogOptions"
+          @update:model-value="updateCatalogId"
+        />
+      </div>
+      <FmTextarea :model-value="data.term as string | undefined" label="Term" @update:model-value="updateTerm" />
+
+      <div class="mt-5 mb-3">
+        <FmTextarea
+          :model-value="data.instruction as string | undefined"
+          label="Delivery instruction"
+          @update:model-value="updateInstruction"
+        />
+      </div>
+    </FmCard>
+    </div>
+  </template>
+  <div v-else>
+    <div class="m-88 self-center">
+      <img :src="svgPath" alt="" />
+      <div class="flex flex-col">
+        <div class="text-center mb-5">{{ validation.message }}</div>
+
+
+        <FmButton
+          v-if="validation.action"
+          :label="validation.action.label"
+          color="primary"
+          @click="(validation as ValidateFeedmeErrorResult).action!.callback"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/src/views/order-settings/delivery/integrated-delivery/FoodpandaCampaignDialog.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { clone } from '@/helpers/object';
+import Day from 'dayjs';
+import { reactive, type PropType, watch } from 'vue';
+
+export interface IFPDiscountCampaign {
+  name: string;
+  vendorBearPercentage: number;
+  date: {
+    start: string;
+    end: string;
+  };
+}
+
+const props = defineProps({
+  initialValue: {
+    type: Object as PropType<IFPDiscountCampaign>,
+    default: undefined
+  }
+});
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', campaign: IFPDiscountCampaign): void;
+  (event: 'dialog:emitData', data: any): void;
+  (event: 'dialog:primaryAction'): void;
+  (event: 'dialog:secondaryAction'): void;
+  (event: 'dialog:tertiaryAction'): void;
+}>();
+const data = reactive<IFPDiscountCampaign>(
+  props.initialValue
+    ? clone(props.initialValue)
+    : {
+        name: '',
+        vendorBearPercentage: 100,
+        date: {
+          start: convertToDateOnly(Day().startOf('day').format('YYYY-MM-DDTHH:mm:ss.SSS[Z]')),
+          end: convertToDateOnly(Day().endOf('day').format('YYYY-MM-DDTHH:mm:ss.SSS[Z]'))
+        }
+      }
+);
+
+watch(data, (newValue) => {
+  emit('update:modelValue', newValue);
+}, { deep: true });
+
+interface DateRange {
+  startDate: string | null;
+  endDate: string | null;
+}
+
+function handleDateRangeChange(newDateRange: DateRange) {
+  const { startDate, endDate } = newDateRange;
+  const convertedStartDate = startDate ? convertToFullDate(startDate) : '';
+  const convertedEndDate = endDate ? convertToFullDate(endDate) : '';
+  data.date = {
+    start: convertedStartDate,
+    end: convertedEndDate
+  };
+
+  const emittedValue = {
+    ...data,
+    date: {
+      start: convertedStartDate,
+      end: convertedEndDate
+    }
+  };
+  emit('update:modelValue', emittedValue);
+}
+
+function convertToFullDate(date: string): string {
+  return Day(date).format('YYYY-MM-DDTHH:mm:ss.SSS[Z]');
+}
+
+function convertToDateOnly(date: string): string {
+  return Day(date).format('YYYY-MM-DD');
+}
+
+function convertToDateRange(newDateRange: { start: string, end: string }): { startDate: string, endDate: string } {
+  return {
+    startDate: convertToDateOnly(newDateRange.start),
+    endDate: convertToDateOnly(newDateRange.end)
+  };
+}
+
+</script>
+
+<template>
+  <FmTextField
+    v-model="data.name"
+    label="Name"
+    placeholder="Enter name"
+  />
+
+  <FmStepperField
+    class="mt-5"
+    append-text="%"
+    v-model="data.vendorBearPercentage"
+    label="Vendor bear percentage"
+    placeholder="Enter a number"
+    :show-steppers="false"
+  />
+
+  <div class="mt-5 mb-10">
+    <FmDateRangePicker
+      :model-value="convertToDateRange(data.date)"
+      @update:model-value="handleDateRangeChange"
+    />
+  </div>
+
+</template>