feat: add pin paymentHandler

packages/api/src/setup.ts

@@ -14,9 +14,11 @@ import {
   createInvoiceHandler,
   createMolliePaymentHandler,
   createBankTransferPaymentHandler,
-  createSmartpinPaymentHandler
+  createSmartpinPaymentHandler,
+  createPinPaymentHandler
 } from '@modular-api/fastify-checkout'
 import { initialize } from './pgboss.js'
+import type { ClientMetadata } from 'oidc-provider'
 
 const getString = (str: string) => str
 const host = getString(__HOST__)
@@ -82,6 +84,11 @@ export default async function (fastify: FastifyInstance) {
     kysely
   })
 
+  const pinPaymentHandler = createPinPaymentHandler({
+    fastify,
+    kysely
+  })
+
   let molliePaymentHandler:
     | CheckoutPluginOptionsPaymentHandlers['mollie']
     | undefined
@@ -156,11 +163,12 @@ export default async function (fastify: FastifyInstance) {
       mollie: molliePaymentHandler,
       cash: cashPaymentHandler,
       bankTransfer: bankTransferPaymentHandler,
-      smartpin: smartpinPaymentHandler
+      smartpin: smartpinPaymentHandler,
+      pin: pinPaymentHandler
     }
   })
 
-  const clients = [
+  const clients: ClientMetadata[] = [
     {
       client_id:
         env.read('OIDC_CLIENT_ID') ||

packages/app/src/components/invoice/InvoiceExpansionItem.vue

@@ -241,7 +241,9 @@
                     modelValue.status
                   ) &&
                   modelValue.amountDue &&
-                  (onAddPaymentCash || onAddPaymentBankTransfer)
+                  (onAddPaymentCash ||
+                    onAddPaymentBankTransfer ||
+                    onAddPaymentPin)
                 "
                 clickable
               >
@@ -284,6 +286,21 @@
                         </q-item-label>
                       </q-item-section>
                     </q-item>
+                    <q-item
+                      v-if="onAddPaymentPin"
+                      v-close-popup
+                      clickable
+                      @click="addPaymentPin(modelValue)"
+                    >
+                      <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-item
                       v-if="onAddPaymentIdeal"
                       v-close-popup
@@ -468,6 +485,7 @@ import { InvoiceStatus } from '@slimfact/api/zod'
 
 export interface Props {
   modelValue: Invoice
+  onAddPaymentPin?: unknown
   onAddPaymentCash?: unknown
   onAddPaymentBankTransfer?: unknown
   onAddPaymentIdeal?: unknown
@@ -556,6 +574,16 @@ const emit = defineEmits<{
       done: (success?: boolean) => void
     }
   ): void
+  (
+    e: 'addPaymentPin',
+    {
+      data,
+      done
+    }: {
+      data: Invoice
+      done: (success?: boolean) => void
+    }
+  ): void
   (
     e: 'sendReceipt',
     {
@@ -638,6 +666,12 @@ const addPaymentIdeal = (data: Invoice) => {
   }
   emit('addPaymentIdeal', { data: data, done })
 }
+const addPaymentPin = (data: Invoice) => {
+  function done() {
+    //
+  }
+  emit('addPaymentPin', { data: data, done })
+}
 const sendReceipt = (data: Invoice) => {
   function done() {
     //

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

@@ -218,7 +218,8 @@ const lang: Language = {
     methods: {
       cash: 'Cash',
       bankTransfer: 'Bank transfer',
-      ideal: 'iDEAL'
+      ideal: 'iDEAL',
+      pin: 'PIN'
     },
     messages: {
       scanQrOrUseInformationBelow:

packages/app/src/lang/index.ts

@@ -243,6 +243,7 @@ export interface Language {
       cash: string
       bankTransfer: string
       ideal: string
+      pin: string
     }
     messages: {
       scanQrOrUseInformationBelow: string

packages/app/src/lang/nl.ts

@@ -220,7 +220,8 @@ const lang: Language = {
     methods: {
       cash: 'Contant',
       bankTransfer: 'Bank overschrijving',
-      ideal: 'iDEAL'
+      ideal: 'iDEAL',
+      pin: 'PIN'
     },
     messages: {
       scanQrOrUseInformationBelow:

packages/app/src/pages/admin/BillsPage.vue

@@ -41,6 +41,7 @@
           @update="openUpdateDialog"
           @send-receipt="($event) => openSendBillDialog('receipt')!($event)"
           @add-payment-cash="openAddCashPaymentDialog"
+          @add-payment-pin="openAddPinPaymentDialog"
           @cancel="openCancelDialog"
         />
       </q-list>
@@ -109,7 +110,8 @@ import { InvoiceStatus } from '@slimfact/api/zod'
 import { useQuasar, QSelect } from 'quasar'
 import CompanySelect from '../../components/company/CompanySelect.vue'
 import ClientSelect from '../../components/client/ClientSelect.vue'
-import PriceInputDialog from 'src/components/PriceInputDialog.vue'
+import PriceInputDialog from '../../components/PriceInputDialog.vue'
+import AddPaymentDialog from '../../components/AddPaymentDialog.vue'
 
 const { useQuery, useMutation } = await createUseTrpc()
 
@@ -290,6 +292,48 @@ const openAddCashPaymentDialog: InstanceType<
     })
 }
 
+const openAddPinPaymentDialog: InstanceType<
+  typeof InvoiceExpansionItem
+>['$props']['onMarkPaid'] = async ({ data, done }) => {
+  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.invoice.messages.addBankTransferPayment({
+          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()
+      }
+    })
+}
+
 const openCancelDialog: InstanceType<
   typeof InvoiceExpansionItem
 >['$props']['onCancel'] = async ({ data, done }) => {

packages/app/src/pages/admin/InvoicesPage.vue

@@ -47,6 +47,7 @@
           @cancel="openCancelDialog"
           @add-payment-cash="openAddCashPaymentDialog"
           @add-payment-bank-transfer="openAddBankTransferPaymentDialog"
+          @add-payment-pin="openAddPinPaymentDialog"
         />
       </q-list>
     </div>
@@ -414,6 +415,48 @@ const openAddBankTransferPaymentDialog: InstanceType<
       }
     })
 }
+
+const openAddPinPaymentDialog: InstanceType<
+  typeof InvoiceExpansionItem
+>['$props']['onMarkPaid'] = async ({ data, done }) => {
+  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.invoice.messages.addBankTransferPayment({
+          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()
+      }
+    })
+}
 // const openMarkPaidDialog: InstanceType<
 //   typeof InvoiceExpansionItem
 // >['$props']['onMarkPaid'] = async ({ data, done }) => {