@feedmepos/mf-order-setting 0.0.2 → 0.0.6

package/src/views/all-orders/UpdateDeliveryOrderDialog.vue

@@ -0,0 +1,313 @@
+<script setup lang="ts">
+import { computed, type PropType, ref } from 'vue'
+import { sentenceCase, capitalCase } from 'change-case'
+import {
+  F_DELIVERY_PROVIDER_TYPE,
+  F_DELIVERY_STATUS,
+  F_MANUAL_AVAILABLE_SERVICE
+} from '@feedmepos/ordering/package/entity'
+import { clone } from '@/helpers/object'
+import { SnackbarPosition, useSnackbar, type ValidationRule } from '@feedmepos/ui-library'
+import type { Delivery, DeliveryInfo, DeliveryProviderOption } from './order'
+import { type DeliveryProviderDriverDto } from '@feedmepos/ordering/package/entity'
+import { formatCurrency } from '@/helpers/currency'
+import { Dinero } from '@feedmepos/core'
+import { useSnackbarFunctions } from '@/components/snackbar'
+
+const { showError } = useSnackbarFunctions()
+const zeroDineroObject = Dinero.zero().toObject()
+
+const props = defineProps({
+  initialValue: {
+    type: Object as PropType<DeliveryProviderOption[]>,
+    required: true
+  },
+  info: {
+    type: Object as PropType<DeliveryInfo>,
+    required: true
+  }
+})
+
+const lastProvider = computed(() => props.initialValue[props.initialValue.length - 1])
+const selectedKey = ref(lastProvider.value.key)
+const data = ref<Delivery>(clone(lastProvider.value.delivery))
+const providerOptions = props.initialValue.map((v) => {
+  return { label: v.key, value: v.key }
+})
+const deliveryStatus = [
+  {
+    label: 'Picking up',
+    value: F_DELIVERY_STATUS.Enum.PICKING_UP
+  },
+  {
+    label: 'Completed',
+    value: F_DELIVERY_STATUS.Enum.COMPLETE
+  }
+]
+
+const serviceOptions = Object.entries(F_MANUAL_AVAILABLE_SERVICE.Enum).map(([key, value]) => ({
+  label: capitalCase(sentenceCase(key)),
+  value: value
+}))
+
+const isNewOrder = computed(() => data.value.status === F_DELIVERY_STATUS.Enum.NEW)
+const isInvalidProvider = computed(
+  () =>
+    props.initialValue.length === 0 ||
+    selectedKey.value !== lastProvider.value.key ||
+    lastProvider.value.delivery.status === F_DELIVERY_STATUS.Enum.COMPLETE ||
+    data.value.type !== F_DELIVERY_PROVIDER_TYPE.Enum.MANUAL
+)
+const hasOrderStatus = computed(() => data.value.status !== null)
+const canUpdate = computed(
+  () =>
+    isInvalidProvider.value ||
+    data.value.status === F_DELIVERY_STATUS.Enum.COMPLETE ||
+    !hasOrderStatus.value
+)
+
+const driverRows = computed<
+  {
+    label: string
+    disabled: boolean
+    value: string
+    rule?: ValidationRule
+    callback: (v: string) => void
+  }[]
+>(() => {
+  const disabled = canUpdate.value
+  return [
+    {
+      label: 'Driver name',
+      disabled: disabled,
+      value: data.value.driver?.name || '',
+      rule: (v: string | any[]) => (v && v.length > 0) || 'Driver name required',
+      callback: (v) => updateDriver('name', v)
+    },
+    {
+      label: 'Driver contact',
+      disabled: disabled,
+      value: data.value.driver?.phone || '',
+      rule: (v: string | any[]) => (v && v.length > 0) || 'Driver phone required',
+      callback: (v) => updateDriver('phone', v)
+    },
+    {
+      label: 'Driver vehicle type',
+      disabled: disabled,
+      value: data.value.driver?.vehicle.physicalVehicleType || '',
+      rule: (v: string | any[]) => (v && v.length > 0) || 'Vehicle type is required',
+      callback: (v) => updateDriver('vehicle', (oldV: any) => ({ ...oldV, physicalVehicleType: v }))
+    },
+    {
+      label: 'Driver vehicle model',
+      disabled: disabled,
+      value: data.value.driver?.vehicle.model || '',
+      rule: (v: string | any[]) => (v && v.length > 0) || 'Vehicle model is required',
+      callback: (v) => updateDriver('vehicle', (oldV: any) => ({ ...oldV, model: v }))
+    },
+    {
+      label: 'Driver vehicle license plate',
+      disabled: disabled,
+      value: data.value.driver?.vehicle.licensePlate || '',
+      rule: (v: string | any[]) => (v && v.length > 0) || 'Vehicle license plate required',
+      callback: (v) => updateDriver('vehicle', (oldV: any) => ({ ...oldV, licensePlate: v }))
+    },
+    {
+      label: 'Tracking URL',
+      disabled: disabled,
+      value: data.value.trackingUrl || '',
+      callback: (v) => (data.value.trackingUrl = v.trim() || undefined)
+    },
+    {
+      label: 'Pickup ref',
+      disabled: disabled,
+      value: data.value.pickupRef || '',
+      rule: (v: string | any[]) => (v && v.length > 0) || 'Pickup ref is required',
+      callback: (v) => (data.value.pickupRef = v)
+    }
+  ]
+})
+
+function updateDriver<T extends keyof DeliveryProviderDriverDto>(
+  key: T,
+  update:
+    | DeliveryProviderDriverDto[T]
+    | ((oldV: DeliveryProviderDriverDto[T]) => DeliveryProviderDriverDto[T])
+) {
+  if (!data.value.driver) return
+  const newV = typeof update === 'function' ? update(data.value.driver[key]) : update
+  data.value.driver[key] = newV
+}
+
+function selectProvider(key: string | null): void {
+  if (selectedKey.value === key) return
+  const found = props.initialValue.find((v) => v.key === key)
+  if (found) {
+    setDelivery(found)
+  }
+}
+
+function setDelivery(dto: DeliveryProviderOption) {
+  selectedKey.value = dto.key
+  data.value = clone(dto.delivery)
+}
+
+const emit = defineEmits<{
+  (e: 'ok', value: Delivery): void
+  (e: 'cancel'): void
+}>()
+
+function updateOrder() {
+  sideSheet.value = false
+  if (isInvalidProvider.value || !hasOrderStatus.value) {
+    showError('Cannot edit order')
+  } else if (data.value && data.value.status === F_DELIVERY_STATUS.Enum.NEW) {
+    showError('Cannot edit order to new status')
+  } else {
+    // validate();
+  }
+  emit('ok', data.value)
+}
+
+function closeSideSheet() {
+  emit('cancel')
+  sideSheet.value = false
+}
+
+const sideSheet = ref<boolean>(true)
+</script>
+
+<template>
+  <div>
+    <FmSideSheet
+      header="Update delivery order"
+      dismiss-away
+      :model-value="sideSheet"
+      :maxWidth="600"
+    >
+      <div>
+        <FmCard variant="outlined" class="p-5 mb-5">
+          <span class="fm-typo-en-title-sm-800">Order info</span>
+          <div class="flex flex-col gap-1">
+            <div v-for="item in info.delivery" :key="item.label">
+              <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">
+                {{ item.label }}
+              </span>
+              <div class="fm-typo-en-body-lg-600 block">
+                {{ item.value }}
+              </div>
+            </div>
+          </div>
+        </FmCard>
+        <FmCard variant="outlined" class="p-5 mb-5">
+          <span class="fm-typo-en-title-sm-800">Order items</span>
+          <div class="flex flex-col gap-1">
+            <div class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">
+              <span v-for="(item, index) in info.items">
+                {{ item.name }} x{{ item.quantity
+                }}<span v-if="index < info.items.length - 1">, </span>
+              </span>
+            </div>
+          </div>
+        </FmCard>
+        <FmCard variant="outlined" class="p-5 mb-5">
+          <span class="fm-typo-en-title-sm-800 mb-5">Delivery info</span>
+
+          <FmSelect
+            v-if="providerOptions.length > 1"
+            v-model="selectedKey"
+            label="Key"
+            :items="providerOptions"
+            @update:model-value="(key: string | null) => selectProvider(key)"
+            class="mb-5 mt-5"
+          />
+
+          <template v-if="!hasOrderStatus">
+            <div class="mb-5 mt-5">
+              <FmTextField
+                :model-value="formatCurrency(data.deliveryFee || zeroDineroObject)"
+                label="Delivery fee"
+                v-bind:disabled="true"
+              />
+            </div>
+          </template>
+
+          <template v-else>
+            <FmSelect
+              label="Status"
+              :items="[...deliveryStatus, { label: data.status, value: data.status }]"
+              :model-value="data.status"
+              v-bind:disabled="isInvalidProvider"
+              @update:model-value="
+                (status: string) => {
+                  if (status === F_DELIVERY_STATUS.Enum.COMPLETE) {
+                    setDelivery(lastProvider)
+                  }
+                  data.status = status as F_DELIVERY_STATUS
+                }
+              "
+              class="mb-5 mt-3"
+            />
+
+            <template v-if="!isNewOrder">
+              <div class="mb-5">
+                <FmSelect
+                  label="Service"
+                  :model-value="data.choosenService!"
+                  :items="serviceOptions"
+                  v-bind:disabled="canUpdate"
+                  @update:model-value="
+                    (service: string) =>
+                      (data.choosenService = service as F_MANUAL_AVAILABLE_SERVICE)
+                  "
+                />
+              </div>
+
+              <FmTextField
+                :model-value="formatCurrency(data.deliveryFee || zeroDineroObject)"
+                v-bind:disabled="canUpdate"
+                label="Delivery fee"
+                @update:model-value="
+                  (v) => {
+                    let value1 = parseFloat((v || '').toString().replace(/[^0-9.-]/g, ''))
+                    value1 = Number.isNaN(value1) ? 0 : value1
+                    data.deliveryFee = Dinero.fromNumber({ number: value1 }).toObject()
+                  }
+                "
+              />
+
+              <FmTextarea
+                v-model="data.remark"
+                v-bind:disabled="canUpdate"
+                label="Remark"
+                class="mt-5 mb-5"
+              />
+            </template>
+          </template>
+        </FmCard>
+        <div v-if="!isNewOrder && hasOrderStatus">
+          <FmCard variant="outlined" class="p-5 mb-5">
+            <div style="display: flex; flex-direction: column; gap: 16px">
+              <span class="fm-typo-en-title-sm-800">Driver</span>
+              <FmTextField
+                v-for="(row, index) in driverRows"
+                :key="index"
+                :label="row.label"
+                :model-value="row.value"
+                v-bind:disabled="row.disabled"
+                :rules="row.rule ? [row.rule] : []"
+                @update:model-value="row.callback"
+              />
+            </div>
+          </FmCard>
+        </div>
+      </div>
+      <template #side-sheet-footer>
+        <div class="flex gap-8 items-center justify-start">
+          <FmButton variant="primary" label="Update" size="lg" @click="updateOrder" type="submit" />
+          <FmButton variant="secondary" label="Cancel" size="lg" @click="closeSideSheet" />
+        </div>
+      </template>
+    </FmSideSheet>
+  </div>
+</template>