@feedmepos/mf-order-setting 0.0.2 → 0.0.6

package/src/views/order-settings/sms/SmsSetting.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+import { OrderSettingApi, smsApi } from '@/api/order-setting'
+import { useLoading } from '@/composables/loading'
+import { F_ORDER_TYPE, F_SMS_ACTION, type OrderSettingsDto, type OrderSmsSettingDto } from '@entity'
+import RestaurantSelector from '../components/RestaurantSelector.vue'
+import { useCoreStore } from '@feedmepos/mf-common'
+import { Dinero } from '@feedmepos/core'
+
+const { currentRestaurant } = useCoreStore()
+const orderSettingDefault = ref<OrderSettingsDto | undefined>(undefined)
+
+const initOrderSmsSettings: OrderSmsSettingDto[] = [
+  {
+    enable: false,
+    type: F_ORDER_TYPE.Enum.PICKUP,
+    action: F_SMS_ACTION.Enum.ACCEPT,
+    message: { raw: '', keys: {} }
+  },
+  {
+    enable: false,
+    type: F_ORDER_TYPE.Enum.PICKUP,
+    action: F_SMS_ACTION.Enum.SERVE,
+    message: { raw: '', keys: {} }
+  }
+]
+const orderSmsSettings = ref<OrderSmsSettingDto[]>(initOrderSmsSettings)
+const smsCredit = ref()
+const { startAsyncCall } = useLoading()
+
+async function readOrderSetting(): Promise<OrderSettingsDto> {
+  return await startAsyncCall(async () => {
+    return await OrderSettingApi.getOrderSetting()
+  })
+}
+
+async function updateOrderSetting() {
+  await startAsyncCall(async () => {
+    if (orderSettingDefault.value) {
+      await OrderSettingApi.updateOrderSetting({
+        ...orderSettingDefault.value,
+        smsSettings: orderSmsSettings.value.filter((e) => e.enable)
+      })
+    }
+    processEditing(undefined)
+  })
+}
+
+async function init() {
+  orderSettingDefault.value = await readOrderSetting()
+  smsCredit.value = await smsApi.read()
+  orderSmsSettings.value = initOrderSmsSettings.map((i) => {
+    const setting = orderSettingDefault.value?.smsSettings?.find(
+      (e) => e.action == i.action && e.type == i.type
+    )
+    if (setting) return setting
+    else return i
+  })
+}
+
+const editing = ref<number | undefined>(undefined)
+
+const showTextField = ref<boolean[]>(orderSmsSettings.value.map(() => false))
+const inputValues = ref<string[]>(orderSmsSettings.value.map((sms) => sms.message.raw))
+
+function processEditing(index?: number) {
+  editing.value = index
+  if (index !== undefined) {
+    inputValues.value[index] = orderSmsSettings.value[index].message.raw
+  }
+}
+
+import { useSnackbarFunctions } from '@/components/snackbar'
+const { showSuccess } = useSnackbarFunctions()
+
+function confirmTextField(index: number) {
+  if (index !== undefined) {
+    orderSmsSettings.value[index].message.raw = inputValues.value[index]
+    updateOrderSetting()
+    showTextField.value[index] = false
+    showSuccess('SMS setting updated. ')
+  }
+}
+
+
+function toggleTextField(index: number) {
+  showTextField.value[index] = !showTextField.value[index]
+  if (showTextField.value[index]) {
+    inputValues.value[index] = orderSmsSettings.value[index].message.raw
+  } else {
+    confirmTextField(index)
+  }
+}
+
+const initialize = () => {
+  if (currentRestaurant.value) {
+    init()
+  }
+}
+
+onMounted(() => {
+  initialize()
+})
+
+watch(
+  () => currentRestaurant.value,
+  (newValue) => {
+    if (newValue) {
+      initialize()
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <RestaurantSelector :model-value="currentRestaurant?._id ?? undefined"/>
+  <FmCard variant="outlined" class="p-5 m-5 w-2/3">
+  <div class="flex flex-col gap-">
+    <div class="flex-grow fm-typo-en-title-sm-800 mb-5">Credit</div>
+
+    <span class="  text-fm-color-neutral-gray-400">Balance</span>
+    <span class="font-bold">{{ Dinero.fromFdoDinero(smsCredit?.balance).toFormat(true) }}</span>
+
+    <span class="  text-fm-color-neutral-gray-400">Price per message</span>
+    <span class="font-bold">{{
+      Dinero.fromFdoDinero(smsCredit?.pricePerMessage).toFormat(true)
+    }}</span>
+  </div>
+</FmCard>
+
+<FmCard variant="outlined" class="p-5 m-5 w-2/3">
+  <div class="flex flex-col gap-5">
+    <div class="flex-grow fm-typo-en-title-sm-800">Setting</div>
+    <div v-for="(sms, i) in orderSmsSettings" :key="i">
+      <div class="row">
+        <div class="col">
+          <FmSwitch
+            v-model="sms.enable"
+            :label="`${sms.type} - ${sms.action}`"
+            :sublabel="sms.message.raw"
+            label-placement="right"
+          />
+          <div class="mb-12"></div>
+
+          <div v-if="showTextField[i]">
+            <FmTextField v-model="inputValues[i]" />
+            <div class="mb-12"></div>
+          </div>
+          <FmButton
+            :variant="showTextField[i] ? 'primary' : 'secondary'"
+            :label="showTextField[i] ? 'Confirm' : 'Edit'"
+            :icon="showTextField[i] ? '' : 'edit'"
+            @click="showTextField[i] ? confirmTextField(i) : toggleTextField(i)"
+          />
+          <div class="mb-12"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</FmCard>
+</template>

package/tailwind.config.js

@@ -0,0 +1,20 @@
+/** @type {import('tailwindcss').Config} */
+import tailwindPlugin from '@feedmepos/ui-library/tailwind-plugin'
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+    './node_modules/@feedmepos/ui-library/**',
+    './node_modules/@feedmepos/mf-*/**'
+  ],
+  safelist: [
+    {
+      pattern: /.-?fm-./
+      // pattern: /./ // the "." means "everything"
+    }
+  ],
+  theme: {
+    extend: {}
+  },
+  plugins: [tailwindPlugin]
+}

package/tsconfig.app.json

@@ -0,0 +1,25 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": [
+    "env.d.ts",
+    "src/**/*",
+    "src/**/*.vue",
+    "../../package/entity/**/*",
+    "../../common/**/*"
+  ],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "rootDir": "./../..",
+    "composite": true,
+    "baseUrl": ".",
+    "isolatedModules": true,
+    "types": ["googlemaps"],
+    "paths": {
+      "@/*": ["./src/*"],
+      "@common": ["./../../common/index.ts"],
+      "@common/*": ["./../../common/*"],
+      "@entity": ["./../../package/entity/index.ts"],
+      "@entity/*": ["./../../package/entity/*"]
+    }
+  }
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ],
+  "include": [
+    "src/index.d.ts",
+    "src/*",
+    "../../package/entity/*",
+    "../../package/entity/index.ts",
+    "../../common/*"
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@tsconfig/node18/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

package/vite.config.ts

@@ -0,0 +1,60 @@
+import { fileURLToPath, URL } from 'node:url'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { fmmfVitePresent } from "@feedmepos/mf-common/vite-preset";
+
+
+// https://vitejs.dev/config/
+export default defineConfig((env) => {
+  const config = {
+    plugins: [vue()],
+    resolve: {
+      preserveSymlinks: true,
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url)),
+        '@entity': fileURLToPath(new URL('./../../package/entity', import.meta.url))
+      }
+    },
+    define: {
+      devInfo: JSON.stringify({
+
+      }),
+      appApi: JSON.stringify({
+        googleMap: process.env.GOOGLE_MAP_API_KEY,
+        firebase: {
+          apiKey: process.env.FIREBASE_API_KEY,
+          authDomain: process.env.FIREBASE_AUTH_DOMAIN,
+          databaseURL: process.env.FIREBASE_DATABASE_URL,
+          projectId: process.env.FIREBASE_PROJECT_ID,
+          storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
+          messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
+          appId: process.env.FIREBASE_APP_ID,
+          measurementId: process.env.FIREBASE_MEASUREMENT_ID,
+        },
+        assetBucketUrl: process.env.ASSET_STORAGE_BUCKET,
+        feedMeClientId: process.env.FEEDME_CLIENT_ID,
+        imageBucketUrl: process.env.IMAGE_STORAGE_BUCKET,
+        gtm: {
+          id: process.env.GTM_ID,
+          serverUrl: process.env.GTM_SERVER_URL,
+          env: process.env.GTM_ENV,
+          serverMeasurementId: process.env.GTM_SERVER_MEASUREMENT_ID,
+          debug: process.env.GTM_DEBUG === 'true',
+        },
+        r2: process.env.R2_ENDPOINT ? {
+          endPoint: process.env.R2_ENDPOINT,
+          bucketName: process.env.R2_BUCKET_NAME,
+          accessKeyId: process.env.R2_ACCESS_KEY || '',
+          secretAccessKey: process.env.R2_ACCESS_SECRET || '',
+        } : null,
+      }),
+      appEndpoint: JSON.stringify({
+        customerV3App: process.env.CUSTOMER_V3_APP_URL,
+      }),
+      'process.env': JSON.stringify(process.env),
+    },
+  }
+
+  // return config
+  return fmmfVitePresent(config, env)
+})

package/KioskSettingView-BRJpaAwI.js

@@ -1,4 +0,0 @@
-import { _ as f } from "./app-gcisgtft.js";
-export {
-  f as default
-};

package/app.js

@@ -1,5 +0,0 @@
-import { a as o, r as p } from "./app-gcisgtft.js";
-export {
-  o as FmApp,
-  p as router
-};

package/frontend/mf-order/src/app.d.ts

@@ -1,2 +0,0 @@
-export { default as FmApp } from './App.vue';
-export { router } from '../src/router';