@feedmepos/mf-order-setting 0.0.2 → 0.0.6

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

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { FdoLinkedDelivery } from "@feedmepos/core/entity";
+import { FdoShopeeFoodSettings } from '@entity'
+import { computed, type PropType, reactive } from "vue";
+import type { DeliveryCompany } from "../delivery";
+import type { IntegratedDeliverySettingData } from "./IntegratedDelivery.vue";
+import { useLoading } from "@/composables/loading";
+import { remoteOrderApi } from "@/api/remoteOrder";
+import { useRestaurantStore } from "@/stores/restaurant";
+import IntegratedDelivery from "./IntegratedDelivery.vue";
+import { clone } from "@/helpers/object";
+import { useCoreStore } from "@feedmepos/mf-common";
+
+
+export interface ShopeefoodDeliveryData {
+  manual: FdoLinkedDelivery | null;
+  integrated: FdoShopeeFoodSettings;
+}
+
+const props = defineProps({
+  initialValue: {
+    type: Object as PropType<ShopeefoodDeliveryData>,
+    required: true,
+  },
+  company: {
+    type: Object as PropType<DeliveryCompany>,
+    required: true,
+  },
+  canUseAutoDeliveryIntegration: {
+    type: [String, Boolean],
+    required: true,
+  },
+});
+
+const data = reactive(clone(props.initialValue));
+
+const modelValue = computed<IntegratedDeliverySettingData>(() => {
+  const auto = data.integrated;
+  return {
+    manual: data.manual,
+    auto: {
+      enable: auto.enable,
+      integrationId: auto.storeID,
+      autoCloseBill: auto.autoCloseBill || false,
+      catalogId: auto?.catalogId || null,
+      commissionRate: auto.reportConfig?.commissionRate || 0,
+      lastSynchronize: auto.lastSynchronize,
+      status: auto.status,
+      updatedAt: auto.updatedAt,
+      menuSyncError: auto.menuSyncError,
+    },
+  };
+});
+
+function updateData({ manual, auto }: IntegratedDeliverySettingData) {
+  data.manual = manual;
+  data.integrated = {
+    ...auto,
+    storeID: auto.integrationId,
+    reportConfig: {
+      discountCampaigns: [],
+      commissionRate: auto.commissionRate,
+    },
+  };
+  return { manual: data.manual, integrated: data.integrated };
+}
+
+const emits = defineEmits<{
+  (e: 'update:model-value', payload: { manual: any; auto: any }): void;
+}>();
+
+
+function updateDataPass({ manual, auto }: IntegratedDeliverySettingData) {
+  const updatedData = updateData({ manual, auto });
+  emits('update:model-value', { manual: updatedData.manual, auto: updatedData.integrated });
+}
+
+const { startAsyncCall } = useLoading();
+const restaurantStore = useRestaurantStore();
+async function syncMenu() {
+  await startAsyncCall(
+    async () => {
+      const res = await remoteOrderApi.integratedDelivery.syncShopeefoodMenu(
+        data.integrated.storeID
+      );
+      const temp = {
+        ...modelValue.value.auto,
+        lastSynchronize:
+          res?.lastSynchronize || modelValue.value.auto.lastSynchronize,
+      };
+      updateData({ auto: temp, manual: data.manual });
+    },
+
+  );
+}
+
+const { currentRestaurant } = useCoreStore()
+
+import { useSnackbarFunctions } from '@/components/snackbar' 
+const { showSuccess } = useSnackbarFunctions();
+
+async function flowTestOrder() {
+  await startAsyncCall(async () => {
+    await remoteOrderApi.integratedDelivery.flowTestOrder(
+      currentRestaurant.value?._id ?? '',
+      'shopeefood'
+    );
+  });
+  showSuccess('Completed. ')
+}
+async function cancelTestOrder() {
+  await startAsyncCall(async () => {
+    await remoteOrderApi.integratedDelivery.cancelTestOrder(
+      currentRestaurant.value?._id ?? '',
+      'shopeefood'
+    );
+  });
+  showSuccess('Completed. ')
+}
+
+
+</script>
+
+<template>
+    <IntegratedDelivery
+      :model-value="modelValue"
+      :company="company"
+      :can-use-auto-delivery-integration="canUseAutoDeliveryIntegration"
+      @update:model-value="updateDataPass"
+      @sync-menu="syncMenu"
+      @flow-test-order="flowTestOrder"
+      @cancel-test-order="cancelTestOrder"
+    />
+  </template>
+  

package/src/views/order-settings/dinein/DineInSetting.vue

@@ -0,0 +1,128 @@
+<template>
+  <RestaurantSelector :model-value="currentRestaurant?._id ?? undefined" />
+
+  <div class="p-[1.5rem] flex flex-col gap-5 m-5 w-2/3">
+    <div class="flex-grow fm-typo-en-title-sm-800">General Setting</div>
+    <FmSwitch
+      v-model="dineInSetting.anonymousOrder"
+      value="anonymousOrder"
+      label="Anonymous Order"
+      sublabel="Customer can order without login"
+      label-placement="right"
+    />
+    <FmSwitch
+      v-model="(dineInSetting.ignoreStock as boolean)"
+      value="ignoreStock"
+      label="Ignore stock"
+      sublabel="Product can be order even out of stock"
+      label-placement="right"
+    />
+    <FmSwitch
+      v-model="(dineInSetting.staticQr as boolean)"
+      value="staticQr"
+      label="Static QR code"
+      sublabel="Customer can order with static QR code"
+      label-placement="right"
+    />
+    <FmSwitch
+      v-model="disableItemRemarkNegated"
+      value="disableItemRemark"
+      label="Customer item remark"
+      sublabel="Customer can attach remark to item"
+      label-placement="right"
+    />
+    <FmSwitch
+      v-model="(dineInSetting.acceptQueue as boolean)"
+      value="acceptQueue"
+      label="Accept queue"
+      sublabel="Customer can use queue in FeedMe app"
+      label-placement="right"
+    />
+  </div>
+  <div class="p-[1.5rem] flex flex-col gap-2 m-5 w-2/3">
+    <PaymentType
+      :payment-types="dineInSetting.paymentTypes ?? []"
+      :allow-e-payment="allowEPayment"
+      :offline-payment-types="dineInSetting.offlinePaymentTypes ?? []"
+      @update:payment-types="(v: F_ORDER_PAYMENT_TYPE[]) => (dineInSetting.paymentTypes = v)"
+      @update:offline-payment-types="
+        (v: FdoOfflinePaymentMethod[] | undefined | null) => (dineInSetting.offlinePaymentTypes = v)
+      "
+    />
+  </div>
+  <div class="fm-corner-radius-lg flex flex-col gap-5 m-5">
+    <FmButton variant="primary" label="Save Setting" class="mr-auto" @click="updateDineInSetting" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  F_ORDER_PAYMENT_TYPE,
+  FdoOfflinePaymentMethod,
+  type FdoRestaurantDineIn
+} from '@feedmepos/core/entity'
+import RestaurantSelector from '../components/RestaurantSelector.vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRestaurantStore } from '@/stores/restaurant'
+import { useLoading } from '@/composables/loading'
+import { useCoreStore } from '@feedmepos/mf-common'
+import PaymentType from './PaymentType.vue'
+
+const { currentRestaurant } = useCoreStore()
+const dineInSetting = ref<FdoRestaurantDineIn>(
+  currentRestaurant.value?.dineIn ?? initDineInSetting()
+)
+
+const allowEPayment = computed(() => {
+  const paymentTypes = dineInSetting.value.paymentTypes || []
+  return paymentTypes.includes(F_ORDER_PAYMENT_TYPE.enum.ePayment)
+})
+
+const disableItemRemarkNegated = computed({
+  get: () => !dineInSetting.value.disableItemRemark,
+  set: (value) => {
+    dineInSetting.value.disableItemRemark = !value
+  }
+})
+
+function initDineInSetting(): FdoRestaurantDineIn {
+  return {
+    ignoreStock: false,
+    anonymousOrder: false,
+    disableItemRemark: false,
+    staticQr: true,
+    paymentTypes: [F_ORDER_PAYMENT_TYPE.enum.cash],
+    offlinePaymentTypes: [],
+    acceptQueue: false
+  }
+}
+
+import { useSnackbarFunctions } from '@/components/snackbar'
+const { showSuccess } = useSnackbarFunctions()
+
+const restaurantStore = useRestaurantStore()
+const { startAsyncCall } = useLoading()
+async function updateDineInSetting() {
+  await startAsyncCall(async () => {
+    const id = currentRestaurant.value?._id ?? ''
+    const orderSetting = dineInSetting.value
+    if (orderSetting) {
+      await restaurantStore.updateDineInSetting(id, orderSetting)
+    }
+  })
+  showSuccess('Dine in setting updated. ')
+}
+
+watch(
+  () => currentRestaurant.value,
+  (newRestaurant) => {
+    dineInSetting.value = newRestaurant?.dineIn ?? initDineInSetting()
+  },
+  { immediate: true }
+)
+
+onMounted(async () => {
+  const newRestaurant = currentRestaurant.value
+  dineInSetting.value = newRestaurant?.dineIn ?? initDineInSetting()
+})
+</script>

package/src/views/order-settings/dinein/OfflinePaymentTypeDialog.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { useDialog } from '@feedmepos/ui-library'
+import { ref } from 'vue'
+import OfflinePaymentTypeDialogContent from './OfflinePaymentTypeDialogContent.vue'
+import type { FdoOfflinePaymentMethod } from '@feedmepos/core/entity'
+
+const dialog = useDialog()
+const nameTextValue = ref<string>('')
+const instructionTextValue = ref<string>('')
+const openDialog = () => {
+  nameTextValue.value = ''
+  instructionTextValue.value = ''
+  dialog
+    .open({
+      title: 'Add custom payment',
+      contentComponent: OfflinePaymentTypeDialogContent,
+      contentComponentProps: {
+        name: "Name",
+        instruction: "Instruction",
+        'onUpdate:nameValue': (v: string) => {
+          nameTextValue.value = v
+        },
+        'onUpdate:instructionValue': (v: string) => {
+          instructionTextValue.value = v
+        }
+      },
+      primaryActions: { text: 'Add', close: true },
+      secondaryActions: { text: 'Cancel', close: true }
+    })
+    .onPrimary(async () => {
+      const newPaymentType = {
+        name: nameTextValue.value,
+        instruction: instructionTextValue.value
+      }
+      await addOfflinePayment(newPaymentType)
+    })
+}
+
+async function addOfflinePayment(newPaymentType: FdoOfflinePaymentMethod) {
+  const updatedOfflinePaymentTypes = [newPaymentType]
+  emits('update:offlinePaymentTypes', updatedOfflinePaymentTypes)
+}
+
+const emits = defineEmits<{
+  (event: 'update:offlinePaymentTypes', v: FdoOfflinePaymentMethod[]): void
+}>()
+</script>
+
+<template>
+  <FmButton label="Add offline payment" @click="openDialog" variant="plain" />
+</template>

package/src/views/order-settings/dinein/OfflinePaymentTypeDialogContent.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <span>{{ props.name }}</span>
+    <FmTextField
+      :model-value="modelValue"
+      @update:model-value="updateNameValue"
+      placeholder="Enter payment name"
+      :rules="[(val) => !!val || 'Field cannot be empty']"
+    ></FmTextField>
+
+    <div class="mb-12"></div>
+    <span>{{ props.instruction }}</span>
+    <FmTextarea
+      :model-value="modelValue"
+      @update:model-value="updateInstructionValue"
+      placeholder="Enter payment instruction"
+    ></FmTextarea>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Emits {
+  (e: 'update:nameValue', v: string): void
+  (e: 'update:instructionValue', v: string): void
+}
+
+interface Props {
+  name: string
+  instruction: string
+}
+const props = defineProps<Props>()
+const emits = defineEmits<Emits>()
+
+const modelValue = ref<string>('')
+
+function updateNameValue(v: string) {
+  emits('update:nameValue', v)
+}
+
+function updateInstructionValue(v: string) {
+  emits('update:instructionValue', v)
+}
+</script>

package/src/views/order-settings/dinein/PaymentType.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { F_ORDER_PAYMENT_TYPE, FdoOfflinePaymentMethod } from '@feedmepos/core/entity'
+import { type PropType, computed, onMounted, ref, watch } from 'vue'
+import OfflinePaymentTypeDialog from './OfflinePaymentTypeDialog.vue'
+import { useCoreStore } from '@feedmepos/mf-common'
+const props = defineProps({
+  paymentTypes: {
+    type: Array as PropType<F_ORDER_PAYMENT_TYPE[]>,
+    required: true
+  },
+  offlinePaymentTypes: {
+    type: Array as PropType<FdoOfflinePaymentMethod[]>,
+    required: true
+  },
+  allowEPayment: {
+    type: [Boolean, String],
+    required: true
+  },
+  maxCustomPayment: {
+    type: Number,
+    default: undefined
+  }
+})
+
+const emits = defineEmits<{
+  (event: 'update:paymentTypes', v: F_ORDER_PAYMENT_TYPE[]): void
+  (event: 'update:offlinePaymentTypes', v: FdoOfflinePaymentMethod[] | null | undefined): void
+}>()
+
+const offlinePayments = computed(() => {
+  if (!props.paymentTypes.includes(F_ORDER_PAYMENT_TYPE.enum.cash)) return []
+  return props.offlinePaymentTypes
+})
+
+async function deleteOfflinePayment(index: number) {
+  emits(
+    'update:offlinePaymentTypes',
+    props.offlinePaymentTypes.filter((_, i) => i !== index)
+  )
+}
+
+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 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()
+
+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 { currentRestaurant } = useCoreStore()
+watch(
+  () => currentRestaurant.value,
+  (newRestaurant) => {
+    initializeCheckboxes()
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  initializeCheckboxes()
+})
+</script>
+
+<template>
+  <div class="flex-grow fm-typo-en-title-sm-800">Accepted Payment</div>
+  <FmCheckbox
+    value=""
+    :model-value="parent"
+    label="All"
+    :indeterminate="nestedVal.length > 0 && nestedVal.length < checkboxChildren.length"
+    @update:model-value="handleParentUpdate"
+  />
+
+  <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 v-if="nestedVal.includes(checkboxChildren[0].value) && offlinePaymentTypes?.length === 0">
+    <OfflinePaymentTypeDialog
+      @update:offline-payment-types="(v: FdoOfflinePaymentMethod[] | undefined | null) => emits('update:offlinePaymentTypes', v)"
+    />
+  </div>
+
+  <div v-if="nestedVal.includes('offline')">
+    <div v-if="offlinePaymentTypes?.length === 0">
+      <FmCard variant="outlined">
+        <FmCardSection>Cash </FmCardSection>
+      </FmCard>
+    </div>
+    <p v-for="(type, i) in offlinePaymentTypes" :key="i">
+      <FmCard variant="outlined">
+        <FmCardSection class="flex items-center justify-between">
+          <div>
+            <span class="font-bold">{{ type.name }}</span>
+            <br />
+            <span>{{ type.instruction }}</span>
+          </div>
+          <div v-for="(payment, index) in offlinePaymentTypes">
+            <FmButton append-icon="delete" variant="tertiary" @click="deleteOfflinePayment(index)" />
+          </div>
+        </FmCardSection>
+      </FmCard>
+    </p>
+  </div>
+  <FmCheckbox
+    v-model="nestedVal"
+    :label="checkboxChildren[1].label"
+    :value="checkboxChildren[1].value"
+    @update:model-value="handleChildUpdate"
+  />
+</template>

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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { googleMap } from '@/helpers/map'
+
+const props = defineProps<{
+  title?: string
+  placeholder?: string
+  disable?: boolean
+  initialValue?: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'update:model-value', value: string): void
+}>()
+
+function input(v: string) {
+  emits('update:model-value', v)
+}
+
+const modelValue = ref(props.initialValue || '')
+const placeOptions = ref<string[]>([])
+const autocomplete = new googleMap.maps.places.AutocompleteService()
+
+function filterFn(val: string) {
+  autocomplete.getPlacePredictions({ input: val }, (res) => {
+    if (res) {
+      placeOptions.value = res.map((place) => place.description)
+    }
+  })
+}
+
+watch(modelValue, (newVal) => {
+  filterFn(newVal)
+  if (googleMap) {
+    input(newVal)
+  }
+})
+</script>
+
+<template>
+  <FmTextField
+    :model-value="modelValue"
+    :datalist="placeOptions"
+    @update:modelValue="modelValue = $event"
+    placeholder="Enter address"
+    :rules="[(val) => !!val || 'Field cannot be empty']"
+  />
+</template>

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

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import OfflinePaymentTypeDialogContent from '../dinein/OfflinePaymentTypeDialogContent.vue'
+import type { FdoOfflinePaymentMethod } from '@feedmepos/core/entity'
+
+const props = defineProps<{
+  offlinePaymentTypes: FdoOfflinePaymentMethod[]
+}>()
+
+const nameTextValue = ref<string>('')
+const instructionTextValue = ref<string>('')
+
+const updateName = (value: string) => {
+  nameTextValue.value = value
+}
+
+const updateInstruction = (value: string) => {
+  instructionTextValue.value = value
+}
+
+const offlinePaymentTypes = ref<FdoOfflinePaymentMethod[]>([...props.offlinePaymentTypes])
+
+watch(() => props.offlinePaymentTypes, (newTypes) => {
+  offlinePaymentTypes.value = [...newTypes]
+})
+
+async function addOffline() {
+  isSideSheetOpen.value = false
+  const newPaymentType: FdoOfflinePaymentMethod = {
+    name: nameTextValue.value,
+    instruction: instructionTextValue.value
+  }
+  await addOfflinePayment(newPaymentType)
+}
+
+async function addOfflinePayment(newPaymentType: FdoOfflinePaymentMethod) {
+  const updatedOfflinePaymentTypes = [...offlinePaymentTypes.value, newPaymentType] // Append new payment
+  emits('update:offlinePaymentTypes', updatedOfflinePaymentTypes) // Emit updated list
+  console.log(updatedOfflinePaymentTypes)
+}
+
+const emits = defineEmits<{
+  (event: 'update:offlinePaymentTypes', v: FdoOfflinePaymentMethod[]): void
+}>()
+
+const isSideSheetOpen = ref(false)
+
+const label = computed(() => {
+  return (props.offlinePaymentTypes.length === 0)
+    ? "Custom offline payment"
+    : "Add offline payment";
+});
+
+function closeSideSheet() {
+  isSideSheetOpen.value = false
+}
+
+function openSideSheet() {
+  isSideSheetOpen.value = true
+}
+</script>
+
+
+<template>
+  <FmSideSheet header="Custom offline payment" dismiss-away :maxWidth="600" :model-value="isSideSheetOpen">
+    <template #side-sheet-button>
+      <FmButton :label="label" variant="plain" icon="add" @click="openSideSheet()"/>
+    </template>
+    <div class="fm-typo-en-title-sm-800 mb-5">General</div>
+    <OfflinePaymentTypeDialogContent
+      name="Offline payment name"
+      instruction="Instruction"
+      @update:nameValue="updateName"
+      @update:instructionValue="updateInstruction"
+      
+    />
+    <template #side-sheet-footer>
+      <div class="flex gap-8 items-center justify-start">
+        <FmButton variant="primary" label="Add" size="lg" @click="addOffline" close: true/>
+        <FmButton variant="secondary" label="Cancel" size="lg" @click="closeSideSheet()"/>
+      </div>
+    </template>
+  </FmSideSheet>
+</template>