@feedmepos/mf-order-setting 0.0.2 → 0.0.6

package/src/stores/restaurant/index.ts

@@ -0,0 +1,138 @@
+import { defineStore } from 'pinia'
+import { restaurantApi, type RestaurantSettingDoc } from '@/api/restaurant-setting'
+import {
+  F_PAYOUT_ACCOUNT_STATUS,
+  FdoFoodpandaSettings,
+  FdoPayoutAccount,
+  FdoRestaurantDineIn,
+  FdoRestaurantFeedmeDelivery,
+  FdoRestaurantInHouseDelivery,
+  FdoRestaurantPickup,
+  FdoServiceChargeSetting,
+  FdoShopeeFoodSettings,
+  type FdoAddress,
+  type FdoProfile,
+  type FdoRestaurant
+} from '@feedmepos/core/entity'
+import { FdoGrabfoodSettings } from '@entity'
+import { FeatureFlag } from '@feedmepos/core'
+import { SvcConfig } from '@/api'
+import { remoteOrderApi } from '@/api/remoteOrder'
+
+export interface Profile extends FdoProfile {
+  address: Address
+}
+
+export interface Address extends FdoAddress {
+  formatted: string
+  isValidPostcode: boolean
+  isValid: boolean
+  isValidCoordinate: boolean
+}
+
+export interface ExtendedRestaurant extends FdoRestaurant {
+  id: string
+  profile: Profile
+  allowEPayment: true | string
+  msicCode?: string
+  tinNo?: string
+  isEInvoiceActive?: boolean
+}
+
+interface RestaurantState {
+  adminRestaurants: FdoRestaurant[]
+  managableRestaurants: ExtendedRestaurant[]
+  businessRestaurants: ExtendedRestaurant[]
+  currentRestaurantId: string
+  restaurantSettings: { [restaurantId: string]: RestaurantSettingDoc }
+}
+
+export declare function setRestaurantId(id?: string | null): void
+
+function initRestaurantState(): RestaurantState {
+  return {
+    adminRestaurants: [],
+    managableRestaurants: [],
+    businessRestaurants: [],
+    currentRestaurantId: '',
+    restaurantSettings: {}
+  }
+}
+
+type UpdateRestaurantData = {
+  newThumbnailPhoto?: File
+  newCoverPhoto?: File
+  newPhotos?: File[]
+  msicCode?: string
+  tinNo?: string
+  isEinvoiceActive: boolean
+} & FdoProfile
+
+export const useRestaurantStore = defineStore('restaurant', {
+  state: () => {
+    return initRestaurantState()
+  },
+  getters: {
+    currentRestaurant: (state) => state.businessRestaurants.find((r) => r.id === state.currentRestaurantId),
+    currentRestaurantSetting: (state) => state.restaurantSettings[state.currentRestaurantId || ''],
+    payoutAccount() {
+      const account: FdoPayoutAccount = this.currentRestaurant?.payoutAccount || {
+        enable: false,
+        methods: [],
+        status: F_PAYOUT_ACCOUNT_STATUS.enum.NEW
+      }
+      return {
+        isActive: account.enable,
+        canUpdate: account.status === F_PAYOUT_ACCOUNT_STATUS.enum.NEW,
+        approved: account.status === F_PAYOUT_ACCOUNT_STATUS.enum.APPROVED
+      }
+    }
+  },
+  actions: {
+    async readRestaurantSetting(restaurantId: string, config?: { forceUpdate?: boolean }) {
+      if (
+        !restaurantId ||
+        (this.restaurantSettings[restaurantId] && !(config?.forceUpdate || false))
+      )
+        return
+      const restaurantSetting = await restaurantApi.readRestaurantSetting(restaurantId)
+      this.restaurantSettings = {
+        ...this.restaurantSettings,
+        [restaurantId]: restaurantSetting
+      }
+    },
+    async selectRestaurant(restaurantId: string) {
+      await this.readRestaurantSetting(restaurantId)
+      this.currentRestaurantId = restaurantId
+      SvcConfig.setRestaurantId(restaurantId)
+      setRestaurantId(restaurantId)
+      FeatureFlag.setRestaurant(restaurantId || undefined)
+      localStorage.set('feedme_restaurant', restaurantId)
+    },
+    async updateServiceCharge(serviceCharge: FdoServiceChargeSetting) {
+      await restaurantApi.updateServiceCharge(serviceCharge)
+    },
+    async updateDineInSetting(restaurantId: string, setting: FdoRestaurantDineIn) {
+      await restaurantApi.updateDineInSetting(restaurantId, setting)
+    },
+    async updatePickupSetting(restaurantId: string, setting: FdoRestaurantPickup) {
+      await restaurantApi.updatePickupSetting(restaurantId, setting)
+    },
+
+    async updateInhouseDelivery(restaurantId: string, dto: FdoRestaurantInHouseDelivery) {
+      await remoteOrderApi.integratedDelivery.updateInhouse(restaurantId, dto)
+    },
+    async updateFeedmeDelivery(restaurantId: string, dto: FdoRestaurantFeedmeDelivery) {
+      await remoteOrderApi.integratedDelivery.updateFeedme(restaurantId, dto)
+    },
+    async updateIntegratedFoodpandaDelivery(restaurantId: string, dto: FdoFoodpandaSettings) {
+      await remoteOrderApi.integratedDelivery.updateFoodpanda(restaurantId, dto)
+    },
+    async updateIntegratedGrabfoodDelivery(restaurantId: string, dto: FdoGrabfoodSettings) {
+      await remoteOrderApi.integratedDelivery.updateGrabfood(restaurantId, dto)
+    },
+    async updateIntegratedShopeefoodDelivery(restaurantId: string, dto: FdoShopeeFoodSettings) {
+      await remoteOrderApi.integratedDelivery.updateShopeefood(restaurantId, dto)
+    }
+  }
+})

package/src/stores/table-settings.ts

@@ -0,0 +1,160 @@
+import { restaurantApi } from '@/api/restaurant-setting';
+import { tableSettingApi } from '@/api/table-setting';
+import { sort } from '@/helpers/iteration';
+import type { FdoLayout, FdoLayoutSetting, FdoTable } from '@feedmepos/core/entity';
+import { defineStore } from 'pinia';
+
+
+interface TableSettingState {
+  layout: FdoLayoutSetting;
+  tables: FdoTable[];
+}
+
+interface GroupedTables extends Omit<FdoLayout, 'tables'> {
+  tables: FdoTable[];
+}
+
+function initTableSettingState(): TableSettingState {
+  return {
+    layout: {
+      _id: '',
+      // _rev: '',
+      layouts: [],
+    },
+    tables: [],
+  };
+}
+
+export const useTableSettingStore = defineStore('tableSetting', {
+  state: () => {
+    return initTableSettingState();
+  },
+  getters: {
+    sortedTables: (state): FdoTable[] => {
+      return sort(state.tables, { selector: 'name' });
+    },
+    sortedLayouts: (state): FdoLayout[] => {
+      const sortByName = state.layout.layouts.some((layout) => layout.position === undefined);
+      if (sortByName) {
+        return sort(state.layout.layouts, { selector: 'name' });
+      }
+
+      return state.layout.layouts.sort((a, b) => a.position - b.position);
+    },
+    groupedTables(): GroupedTables[] {
+      const withinLayouts = this.sortedLayouts.map((layout) => {
+        return {
+          ...layout,
+          tables: this.sortedTables.filter((table) => layout.tables.some((v) => v.id === table._id)),
+        };
+      });
+      const tables = this.layout.layouts.flatMap((v) => v.tables).map((v) => v.id);
+      const otherTables = this.sortedTables.filter((t) => !tables.includes(t._id));
+      if (!otherTables.length) return withinLayouts;
+      return [
+        ...withinLayouts,
+        {
+          id: '',
+          name: 'Other',
+          position: withinLayouts.length,
+          tables: otherTables,
+        },
+      ];
+    },
+  },
+  actions: {
+    async readTables(foodCourtId?: string) {
+      const resp = await tableSettingApi.readTables();
+      
+      const settings = await restaurantApi.getMobileOrderSetting();
+      if (foodCourtId != undefined){
+        this.tables = resp.map(e => ({ ...e, qrLink: `${appEndpoint.customerV3App}/dine?seat=${e.name}&fci=${foodCourtId}` }));
+      }
+      else if (settings.enableV3) {
+        this.tables = [
+          {
+            _id: '',
+            name: '#Takeaway',
+            qrLink: `${appEndpoint.customerV3App}/dine?seat=_TA_&id=${settings._id}`,
+          },
+          ...resp,
+        ];
+      }
+      else this.tables = resp;
+    },
+    async createTables(layout: FdoLayout | undefined, tables: string[]) {
+      await tableSettingApi.createTables(tables.map((t) => ({
+        name: t.trim(),
+      })));
+      await this.readTables();
+      if (layout) {
+        const tableIds = this.tables
+          .filter((t) => tables.includes(t.name))
+          .map((t) => t._id);
+        await this.moveTables('', layout.id, tableIds);
+      }
+    },
+    async updateTable(table: FdoTable) {
+      await tableSettingApi.updateTable(table);
+      await this.readTables();
+    },
+    async deleteTables(tableIds: string[]) {
+      this.tables = await tableSettingApi.deleteTables(tableIds);
+    },
+    async readLayouts() {
+      this.layout = await tableSettingApi.readLayouts();
+    },
+    async createLayout(name: string) {
+      this.layout = await tableSettingApi.createLayout({
+        layoutSetting: this.layout,
+        payload: {
+          id: '',
+          name,
+          position: this.layout.layouts.length,
+          tables: [],
+        },
+      });
+    },
+    async updateLayout(layout: FdoLayout) {
+      this.layout = await tableSettingApi.updateLayout({
+        ...this.layout,
+        layouts: this.layout.layouts.map((l) => l.id === layout.id ? layout : l),
+      });
+    },
+    async deleteLayout(layout: FdoLayout) {
+      this.layout = await tableSettingApi.updateLayout({
+        ...this.layout,
+        layouts: this.layout.layouts.filter((l) => l.id !== layout.id),
+      });
+    },
+    async moveTables(fromLayout: string, toLayout: string, tableIds: string[]) {
+      const layouts = this.layout.layouts.map(l => {
+        if (fromLayout === l.id) {
+          return {
+            ...l,
+            tables: l.tables.filter((t) => !tableIds.includes(t.id))
+          };
+        }
+
+        if (toLayout === l.id) {
+          return {
+            ...l,
+            tables: [
+              ...l.tables,
+              ...tableIds.map((id) => ({ id })),
+            ],
+          };
+        }
+
+        return l;
+      });
+      this.layout = await tableSettingApi.updateLayout({
+        ...this.layout,
+        layouts,
+      });
+    },
+    async updateSetting(is: boolean) {
+      await tableSettingApi.updateSetting(is);
+    }
+  },
+});

package/src/stores/type.ts

@@ -0,0 +1,65 @@
+export interface BaseRules {
+  create: boolean;
+  delete: boolean;
+  edit: boolean;
+}
+
+export interface ItemRules extends BaseRules {
+  sort: boolean;
+  addon: boolean;
+  code: boolean;
+  name: boolean;
+  category: boolean;
+  description: boolean;
+  thumbnail: boolean;
+  orderFrom: boolean;
+  orderFromNone: boolean;
+  orderFromActiveOnly: boolean;
+  openPrice: boolean;
+  minPrice: boolean;
+  price: boolean;
+  editPrice: boolean;
+  unit: boolean;
+  costing: boolean;
+  tax: boolean;
+  variant: boolean;
+  maxVariant: number;
+  group: boolean;
+  overrideProductGroup: boolean;
+  inventory: boolean;
+  bindToVariant: boolean;
+  print: boolean;
+  toRoot: boolean;
+  takeaway: (category?: string | null | undefined) => boolean;
+  multiScheduler: boolean;
+  canRearrange: boolean;
+  sequentialKds: boolean;
+}
+
+export interface GroupRules extends BaseRules {
+  type: boolean;
+  sort: boolean;
+  applyProduct: boolean;
+  showAppliedProduct: boolean;
+  insertRawItems: boolean;
+}
+export interface TakeawayRules extends BaseRules {
+  name: boolean;
+}
+
+export interface CategoryRules extends BaseRules {
+  sort: boolean;
+}
+
+export interface MenuRules {
+  item: ItemRules;
+  category: CategoryRules;
+  group: GroupRules;
+  scheduler: { override: boolean };
+  takeaway: TakeawayRules;
+  catalog: {
+    name: boolean;
+    defaultOrderFrom: boolean;
+    markup: boolean;
+  }
+}

package/src/utils/constants/route.ts

@@ -0,0 +1,15 @@
+const KioskRoute = '/kiosk';
+const KioskDeviceRoute = '/kiosk/device';
+const KioskOrderSettingRoute = '/kiosk/order-setting';
+const OrderSettingView = '/order-settings';
+const FeedMeExpressView = '/delivery-settings';
+const AllOrdersView = '/orders';
+
+export const PortalRoute = {
+    KioskRoute,
+    KioskDeviceRoute,
+    KioskOrderSettingRoute,
+    OrderSettingView,
+    FeedMeExpressView,
+    AllOrdersView,
+}

package/src/utils/number.ts

@@ -0,0 +1,16 @@
+function applyPadDigits(value: number, padDigit : number): string{
+    let strValue: string = value.toString();
+
+    // Calculate how many digits to pad
+    let padLength: number = padDigit - strValue.length;
+
+    // Pad with padDigit character
+    if (padLength > 0) {
+        strValue = Array(padLength + 1).join('0') + strValue;
+    }
+    return strValue;
+}
+
+export const NumberUtil = {
+    applyPadDigits,
+}

package/src/utils/object.ts

@@ -0,0 +1,15 @@
+function clone<T>(value: T, exceptKey: (keyof T)[] = []): T {
+    const obj = JSON.parse(JSON.stringify(value));
+    if (exceptKey.length > 0) {
+        exceptKey.forEach((key): void => {
+            if (obj[key] !== undefined) {
+                delete obj[key];
+            }
+        });
+    }
+    return obj;
+}
+
+export const ObjectUtil = {
+    clone,
+};

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

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <FmMenu>
+      <template #menu-button>
+        <FmButton variant="tertiary" icon="more_vert" />
+      </template>
+      <FmMenuItem
+        v-for="item in actionItems"
+        :key="item.label"
+        :label="item.label"
+        selectable
+        @click="handleActionClick(item)"
+      />
+    </FmMenu>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, type PropType } from 'vue'
+import { useSnackbarFunctions } from '@/components/snackbar'
+import { SvcCompanyApiError } from '@/api'
+
+const { showSuccess, showError, showLoading, closeLoadingSnackbar } = useSnackbarFunctions()
+
+const props = defineProps({
+  order: {
+    type: Object as PropType<any>,
+    required: true
+  }
+})
+
+const actionItems = computed(() => {
+  return (
+    props.order?.actions.map((action: any) => ({
+      label: action.label || 'Unknown Action'
+    })) || []
+  )
+})
+
+const emits = defineEmits<{
+  (event: 'action-selected'): void
+  (event: 'action-completed', value: unknown): void
+}>()
+
+async function handleActionClick(clickedItem: { label: string }) {
+  const action = props.order.actions.find((action: any) => action.label === clickedItem.label)
+
+  emits('action-selected')
+
+  let loadingMsg: string | undefined
+  let successMessage: string
+
+  switch (action?.label) {
+    case 'Reject Order':
+      loadingMsg = 'Rejecting order.'
+      successMessage = 'Order successfully rejected.'
+      break
+    case 'Reflow Order':
+      loadingMsg = 'Reflowing order.'
+      successMessage = 'Order successfully reflowed.'
+      break
+    case 'Cancel order':
+      loadingMsg = 'Cancelling order.'
+      successMessage = 'Order successfully cancelled.'
+      break
+    case 'Edit':
+      loadingMsg = undefined
+      successMessage = 'Action completed successfully.'
+      break
+    default:
+      loadingMsg = 'Operation in progress.'
+      successMessage = 'Action completed successfully.'
+      break
+  }
+
+  if (loadingMsg) showLoading(loadingMsg)
+
+  try {
+    const resp = await action?.callback()
+    closeLoadingSnackbar()
+    emits('action-completed', resp)
+    showSuccess(successMessage)
+  } catch (error) {
+    closeLoadingSnackbar()
+    const errorMessage =
+      error instanceof SvcCompanyApiError
+        ? error.message || 'An unknown error occurred'
+        : (error as Error).message || 'An unexpected error occurred'
+    showError(errorMessage)
+  }
+}
+</script>

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

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { FdoRestaurant } from '@feedmepos/core/entity'
+
+const props = defineProps<{
+  menuItems: { label: string; value: FdoRestaurant }[]
+  label: string
+  modelValue: FdoRestaurant | null
+}>()
+
+const emit = defineEmits(['restaurant-selected'])
+
+const selectedRestaurant = ref<FdoRestaurant | null>(null)
+const searchValue = ref('')
+
+const filteredResult = computed(() =>
+  props.menuItems.filter((item) => {
+    const search = searchValue.value.toLowerCase()
+    return search
+      ? item.label.toLowerCase().includes(search) || item.value._id.includes(search)
+      : true
+  })
+)
+
+const selectedLabel = computed(() =>
+  selectedRestaurant.value ? selectedRestaurant.value.profile.name : props.label
+)
+
+function selectRestaurant(restaurant: { label: string; value: FdoRestaurant }) {
+  selectedRestaurant.value = restaurant.value
+  emit('restaurant-selected', restaurant.value)
+}
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    selectedRestaurant.value = newValue
+  }
+)
+</script>
+
+<template>
+  <div>
+    <FmMenu>
+      <template #menu-button>
+        <div>
+          <FmButton
+            variant="tertiary"
+            prepend-icon="storefront"
+            append-icon="expand_more"
+            :label="selectedLabel"
+            class="fm-typo-en-body-md-600 text-fm-color-typo-secondary bg-fm-color-neutral-gray-100"
+            :style="{ backgroundColor: '#F2F2F7' }"
+          />
+        </div>
+      </template>
+      <div>
+        <FmSearch v-model:model-value="searchValue" class="w-[250px]" placeholder="Filter result" />
+      </div>
+      <FmMenuDivider />
+      <FmMenuItem
+        v-for="item in filteredResult"
+        :key="item.value._id"
+        :model-value="selectedRestaurant === item.value"
+        :label="item.label"
+        @click="selectRestaurant(item)"
+      />
+      <FmMenuItem v-if="!filteredResult.length" disabled label="No result found" />
+    </FmMenu>
+  </div>
+</template>

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

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { F_SHOPEEFOOD_ORDER_STATUS, GF_ORDER_STATUS, FP_ORDER_STATUS } from '@feedmepos/core/entity'
+import { F_ORDER_STATUS } from '@feedmepos/ordering/package/entity'
+import { sentenceCase } from 'change-case'
+import FilterStatusMenu from './FilterStatusMenu.vue'
+
+const props = defineProps<{
+  selectedTab: string
+  hasRestaurant: boolean
+  reset?: boolean
+}>()
+const emit = defineEmits<{
+  (e: 'update:selectedFpStatusFilter', value: string | null): void
+  (e: 'update:selectedShopeeFoodStatusFilter', value: string | null): void
+  (e: 'update:selectedGfStatusFilter', value: string | null): void
+  (e: 'update:selectedFeedMeStatusFilter', value: string | null): void
+}>()
+
+const selectedFilters = {
+  foodpanda: ref<string | null>(null),
+  shopeefood: ref<string | null>(null),
+  grabfood: ref<string | null>(null),
+  feedme: ref<string | null>(null)
+}
+
+watch(() => props.reset, (newVal) => {
+  if (newVal) {
+    selectedFilters.foodpanda.value = null;
+    selectedFilters.shopeefood.value = null;
+    selectedFilters.grabfood.value = null;
+    selectedFilters.feedme.value = null;
+    emit('update:selectedFpStatusFilter', null);
+    emit('update:selectedShopeeFoodStatusFilter', null);
+    emit('update:selectedGfStatusFilter', null);
+    emit('update:selectedFeedMeStatusFilter', null);
+  }
+}, { immediate: true });
+
+
+const filterOptions = {
+  feedme: computed(() =>
+    F_ORDER_STATUS.options.map((status) => ({
+      label: sentenceCase(status),
+      value: status
+        .replace(/_/g, ' ')
+        .toLowerCase()
+        .replace(/^\w/, (c) => c.toUpperCase())
+    }))
+  ),
+  foodpanda: computed(() =>
+    FP_ORDER_STATUS.options.map((status) => ({
+      label: sentenceCase(status),
+      value: sentenceCase(status)
+    }))
+  ),
+  shopeefood: computed(() =>
+    F_SHOPEEFOOD_ORDER_STATUS.options.map((status) => ({
+      label: sentenceCase(status),
+      value: sentenceCase(status)
+    }))
+  ),
+  grabfood: computed(() =>
+    GF_ORDER_STATUS.options.map((status) => ({
+      label: sentenceCase(status),
+      value: sentenceCase(status)
+    }))
+  )
+}
+function updateFilter({ filterType, value }: { filterType: string; value: string | null }) {
+  if (filterType === 'foodpanda') {
+    selectedFilters.foodpanda.value = value
+    emit('update:selectedFpStatusFilter', value)
+  } else if (filterType === 'shopeefood') {
+    selectedFilters.shopeefood.value = value
+    emit('update:selectedShopeeFoodStatusFilter', value)
+  } else if (filterType === 'grabfood') {
+    selectedFilters.grabfood.value = value
+    emit('update:selectedGfStatusFilter', value)
+  } else if (filterType === 'feedme') {
+    selectedFilters.feedme.value = value
+    emit('update:selectedFeedMeStatusFilter', value)
+  }
+}
+</script>
+
+<template>
+  <div>
+    <FilterStatusMenu
+      v-if="selectedTab === 'foodpanda'"
+      :options="filterOptions.foodpanda.value"
+      :selectedFilter="selectedFilters.foodpanda.value"
+      filterType="foodpanda"
+      @update:filter="updateFilter"
+    />
+
+    <FilterStatusMenu
+      v-if="selectedTab === 'shopeefood'"
+      :options="filterOptions.shopeefood.value"
+      :selectedFilter="selectedFilters.shopeefood.value"
+      filterType="shopeefood"
+      @update:filter="updateFilter"
+    />
+
+    <FilterStatusMenu
+      v-if="selectedTab === 'grabfood'"
+      :options="filterOptions.grabfood.value"
+      :selectedFilter="selectedFilters.grabfood.value"
+      filterType="grabfood"
+      @update:filter="updateFilter"
+    />
+
+    <FilterStatusMenu
+      v-if="selectedTab === 'feedme' && hasRestaurant === true"
+      :options="filterOptions.feedme.value"
+      :selectedFilter="selectedFilters.feedme.value"
+      filterType="feedme"
+      @update:filter="updateFilter"
+    />
+  </div>
+</template>