feat(InvoicePage): add addPayment button

packages/api/package.json

@@ -50,9 +50,9 @@
     "@fastify/cors": "^10.0.1",
     "@fastify/middie": "9.0.2",
     "@fastify/static": "8.0.1",
-    "@modular-api/api": "^0.5.5",
+    "@modular-api/api": "^0.5.6",
     "@modular-api/fastify-cart": "^0.3.0",
-    "@modular-api/fastify-checkout": "^0.4.5",
+    "@modular-api/fastify-checkout": "^0.4.6",
     "@modular-api/fastify-oidc": "^0.6.0",
     "@mollie/api-client": "^4.0.0",
     "@slimfact/app": "^0.1.0",

packages/app/package.json

@@ -43,8 +43,8 @@
   },
   "devDependencies": {
     "@modular-api/fastify-cart": "^0.3.0",
-    "@modular-api/fastify-checkout": "^0.4.4",
-    "@modular-api/quasar-components": "^0.3.1",
+    "@modular-api/fastify-checkout": "^0.4.6",
+    "@modular-api/quasar-components": "^0.3.2",
     "@quasar/extras": "1.16.12",
     "@quasar/quasar-ui-qcalendar": "4.0.0-beta.16",
     "@simsustech/quasar-components": "^0.10.6",

packages/app/src/lang/en-US.ts

@@ -199,7 +199,11 @@ const lang: Language = {
     },
     messages: {
       createReceipt: ({ clientDetails, totalIncludingTax }) =>
-        `Are you sure you want to create a receipt for the bill to ${clientDetails.companyName || clientDetails.contactPersonName} with the amount of ${totalIncludingTax}?`
+        `Are you sure you want to create a receipt for the bill to ${clientDetails.companyName || clientDetails.contactPersonName} with the amount of ${totalIncludingTax}?`,
+      addCashPayment: ({ clientDetails, totalIncludingTax }) =>
+        `Enter the amount that was paid in cash for the bill to ${clientDetails.companyName || clientDetails.contactPersonName} with the amount of ${totalIncludingTax}`,
+      addPinPayment: ({ clientDetails, totalIncludingTax }) =>
+        `Enter the amount that was paid by pin for the bill to ${clientDetails.companyName || clientDetails.contactPersonName} with the amount of ${totalIncludingTax}`
     }
   },
   checkout: {

packages/app/src/lang/index.ts

@@ -229,6 +229,20 @@ export interface Language {
         clientDetails: ClientDetails
         totalIncludingTax: number | string
       }) => string
+      addCashPayment: ({
+        clientDetails,
+        totalIncludingTax
+      }: {
+        clientDetails: ClientDetails
+        totalIncludingTax: number | string
+      }) => string
+      addPinPayment: ({
+        clientDetails,
+        totalIncludingTax
+      }: {
+        clientDetails: ClientDetails
+        totalIncludingTax: number | string
+      }) => string
     }
   }
   checkout: {

packages/app/src/lang/nl.ts

@@ -201,7 +201,11 @@ const lang: Language = {
     },
     messages: {
       createReceipt: ({ clientDetails, totalIncludingTax }) =>
-        `Weet u zeker dat u een bon wilt maken voor de rekening aan ${clientDetails.companyName || clientDetails.contactPersonName} ter hoogte van ${totalIncludingTax}?`
+        `Weet u zeker dat u een kwitantie wilt maken voor de rekening aan ${clientDetails.companyName || clientDetails.contactPersonName} ter hoogte van ${totalIncludingTax}?`,
+      addCashPayment: ({ clientDetails, totalIncludingTax }) =>
+        `Vul het bedrag in dat contant is betaald aan de rekening aan ${clientDetails.companyName || clientDetails.contactPersonName} ter hoogte van ${totalIncludingTax}.`,
+      addPinPayment: ({ clientDetails, totalIncludingTax }) =>
+        `Vul het bedrag in dat per pin is betaald aan de rekening aan ${clientDetails.companyName || clientDetails.contactPersonName} ter hoogte van ${totalIncludingTax}.`
     }
   },
   checkout: {

packages/app/src/pages/InvoicePage.vue

@@ -89,14 +89,57 @@
     <q-btn
       v-if="
         invoice &&
-        invoice.amountDue &&
+        invoice.amountDue !== void 0 &&
+        invoice.amountDue !== null &&
         invoice.amountDue < 0 &&
         user?.roles?.includes('administrator')
       "
       :label="`${lang.refund.refund} ${format(-invoice.amountDue)}`"
       color="primary"
       @click="refund"
     />
+
+    <q-btn-dropdown
+      v-if="
+        invoice &&
+        invoice.amountDue !== void 0 &&
+        invoice.amountDue !== null &&
+        invoice.amountDue > 0 &&
+        user?.roles?.includes('administrator')
+      "
+      :label="lang.payment.addPayment"
+      color="primary"
+    >
+      <q-item
+        v-close-popup
+        clickable
+        @click="openAddCashPaymentDialog({ data: invoice })"
+      >
+        <q-item-section avatar>
+          <q-icon name="attach_money"></q-icon>
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>
+            {{ lang.payment.methods.cash }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+
+      <q-item
+        v-close-popup
+        clickable
+        @click="openAddPinPaymentDialog({ data: invoice })"
+      >
+        <q-item-section avatar>
+          <q-icon name="credit_card"></q-icon>
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>
+            {{ lang.payment.methods.pin }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </q-btn-dropdown>
   </div>
 
   <div
@@ -227,6 +270,10 @@ import { ResponsiveDialog } from '@simsustech/quasar-components'
 import Price from '../components/Price.vue'
 import { loadConfiguration, useConfiguration } from '../configuration.js'
 import { useOAuthClient, user, oAuthClient } from '../oauth.js'
+import PriceInputDialog from '../components/PriceInputDialog.vue'
+import { PaymentMethod } from '@modular-api/fastify-checkout/types'
+import AddPaymentDialog from '../components/AddPaymentDialog.vue'
+import type { Invoice } from '@modular-api/fastify-checkout'
 
 const { useQuery, useMutation } = await createUseTrpc()
 const lang = useLang()
@@ -243,7 +290,7 @@ const slimfactDownloaderUrl = ref(
 const uuid = ref(
   Array.isArray(route.params.uuid) ? route.params.uuid[0] : route.params.uuid
 )
-const { data: invoice } = useQuery('public.getInvoice', {
+const { data: invoice, execute } = useQuery('public.getInvoice', {
   args: reactive({
     uuid
   }),
@@ -286,9 +333,9 @@ const qrSvg = computed(() => {
   if (invoice.value) {
     const data = generateEpcQrCodeData({
       name: invoice.value.companyDetails.name,
-      bic: 'RABONL2U' || invoice.value.companyDetails.bic,
-      iban: 'NL82RABO6579776978' || invoice.value.companyDetails.iban,
-      amount: invoice.value.amountDue,
+      bic: invoice.value.companyDetails.bic,
+      iban: invoice.value.companyDetails.iban,
+      amount: invoice.value.amountDue || 0,
       currency: invoice.value.currency,
       information: description.value,
       unstructuredReference: invoice.value.uuid
@@ -415,6 +462,85 @@ const format = (value: number) =>
   }).format(value / 100)
 
 const language = ref($q.lang.isoName)
+
+const openAddCashPaymentDialog = async ({ data }: { data: Invoice }) => {
+  const format = (value: number) =>
+    Intl.NumberFormat(data.locale, {
+      maximumFractionDigits: 2,
+      style: 'currency',
+      currency: data.currency
+    }).format(value / 100)
+  return $q
+    .dialog({
+      component: PriceInputDialog,
+      componentProps: {
+        message: lang.value.bill.messages.addCashPayment({
+          clientDetails: data.clientDetails,
+          totalIncludingTax: format(data.totalIncludingTax)
+        }),
+        currency: data.currency
+      }
+    })
+    .onOk(async (amount) => {
+      const result = useMutation('admin.addPaymentToInvoice', {
+        args: {
+          id: data.id,
+          payment: {
+            amount,
+            currency: data.currency,
+            description: new Date().toISOString().slice(0, 10),
+            method: PaymentMethod.cash
+          }
+        },
+        immediate: true
+      })
+
+      await result.immediatePromise
+
+      if (!result.error.value) execute()
+    })
+}
+
+const openAddPinPaymentDialog = async ({ data }: { data: Invoice }) => {
+  const format = (value: number) =>
+    Intl.NumberFormat($q.lang.isoName, {
+      maximumFractionDigits: 2,
+      style: 'currency',
+      currency: data.currency
+    }).format(value / 100)
+  return $q
+    .dialog({
+      component: AddPaymentDialog,
+      componentProps: {
+        message: lang.value.bill.messages.addPinPayment({
+          clientDetails: data.clientDetails,
+          totalIncludingTax: format(data.totalIncludingTax)
+        }),
+        currency: data.currency
+      }
+    })
+    .onOk(async ({ amount, transactionReference }) => {
+      const result = useMutation('admin.addPaymentToInvoice', {
+        args: {
+          id: data.id,
+          payment: {
+            amount,
+            currency: data.currency,
+            description: new Date().toISOString().slice(0, 10),
+            transactionReference,
+            method: PaymentMethod.pin
+          }
+        },
+        immediate: true
+      })
+      await result.immediatePromise
+
+      if (!result.error.value) {
+        await execute()
+      }
+    })
+}
+
 onMounted(async () => {
   if (__IS_PWA__) {
     await import('../pwa.js')
@@ -423,14 +549,15 @@ onMounted(async () => {
   await loadConfiguration(language)
 
   await useOAuthClient()
-  await oAuthClient.value?.getUserInfo()
 
   try {
     await oAuthClient.value?.signInSilently({})
   } catch (e) {
     console.error('Failed to sign in silently')
   }
 
+  await oAuthClient.value?.getUserInfo()
+
   if (oAuthClient.value?.getAccessToken()) {
     user.value = await oAuthClient.value?.getUser()
   }