feat: save payment method

Author: Paulijuz

src/app/_components/Ledger/Accounts/LedgerAccountOverviewCard.tsx

@@ -4,6 +4,8 @@ import Card from '@/components/UI/Card'
 import DepositModal from '@/components/Ledger/Modals/DepositModal'
 import PayoutModal from '@/components/Ledger/Modals/PayoutModal'
 import Button from '@/components/UI/Button'
+import { getUser } from '@/auth/getUser'
+import { createStripeCustomerSessionAction } from '@/services/stripeCustomers/actions'
 
 type Props = {
     ledgerAccountId: number,
@@ -13,17 +15,35 @@ type Props = {
     showDeactivateButton?: boolean,
 }
 
-export default function LedgerAccountOverview({
+const getCustomerSessionClientSecret = async () => {
+    const { user } = await getUser()
+    if (!user) {
+        return undefined
+    }
+
+    const customerSessionResult = await createStripeCustomerSessionAction({ userId: user.id })
+    if (!customerSessionResult.success) {
+        return undefined
+    }
+
+    return customerSessionResult.data.customerSessionClientSecret
+}
+
+export default async function LedgerAccountOverview({
     showFees,
     ledgerAccountId,
     showPayoutButton,
     showDepositButton,
     showDeactivateButton,
 }: Props) {
+    const customerSessionClientSecret = showDepositButton
+        ? await getCustomerSessionClientSecret()
+        : undefined
+
     return <Card heading="Kontooversikt">
         <LedgerAccountBalance ledgerAccountId={ledgerAccountId} showFees={showFees} />
         <div className={styles.ledgerAccountOverviewButtons}>
-            { showDepositButton && <DepositModal ledgerAccountId={ledgerAccountId} /> }
+            { showDepositButton && <DepositModal ledgerAccountId={ledgerAccountId} customerSessionClientSecret={customerSessionClientSecret} /> }
             { showPayoutButton && <PayoutModal ledgerAccountId={ledgerAccountId} /> }
             { showDeactivateButton && <Button color="red" className={styles.rightAligned}>Deaktiver</Button> }
         </div>

src/app/_components/Ledger/Accounts/LedgerAccountPaymentMethodsCard.tsx

@@ -4,13 +4,23 @@ import { unwrapActionReturn } from '@/app/redirectToErrorPage'
 import { readUserAction } from '@/services/users/actions'
 import BooleanIndicator from '@/components/UI/BooleanIndicator'
 import Link from 'next/link'
+import { createStripeCustomerSessionAction } from '@/services/stripeCustomers/actions'
 
 type Props = {
     userId: number,
 }
 
+const getCustomerSessionClientSecret = async (userId: number) => {
+    const customerSessionResult = await createStripeCustomerSessionAction({ userId})
+    if (customerSessionResult.success) {
+        return customerSessionResult.data.customerSessionClientSecret
+    }
+    return undefined
+}
+
 export default async function LedgerAccountPaymentMethods({ userId }: Props) {
     const user = unwrapActionReturn(await readUserAction({ id: userId }))
+    const customerSessionClientSecret = await getCustomerSessionClientSecret(userId)
 
     const hasBankCard = false // TODO: Actually check with Stripe
     const hasStudentCard = user.studentCard !== null
@@ -21,7 +31,7 @@ export default async function LedgerAccountPaymentMethods({ userId }: Props) {
             Du kan lagre kortinformasjonen din for senere betalinger.
             Kortinformasjonen lagres kun hos betalingsleverandøren vår, Stripe, og ikke på våre tjenere.
         </p>
-        <BankCardModal userId={userId} />
+        <BankCardModal customerSessionClientSecret={customerSessionClientSecret} />
         <h3>NTNU-kort <BooleanIndicator value={hasStudentCard} /></h3>
         <p>Kortnummer: <strong>{hasStudentCard ? user.studentCard : 'ikke registrert'}</strong></p>
         <p>For å benytte Kiogeskabet på Lophtet må et NTNU-kort være registrert.</p>

src/app/_components/Ledger/Modals/BankCardModal.tsx

@@ -7,18 +7,18 @@ import StripePayment from '@/components/Stripe/StripePayment'
 import StripeProvider from '@/components/Stripe/StripeProvider'
 
 type PropTypes = {
-    userId: number,
+    customerSessionClientSecret?: string,
 }
 
-export default function BankCardModal({ userId }: PropTypes) {
+export default function BankCardModal({ customerSessionClientSecret }: PropTypes) {
     return (
         <PopUp
             PopUpKey="BankAccountModal"
             customShowButton={(open) => <Button onClick={open}>Legg til bankkort</Button>}
         >
             <h3>Legg til bankkort</h3>
             <div className={styles.bankCardFormContainer}>
-                <StripeProvider mode="setup">
+                <StripeProvider mode="setup" customerSessionClientSecret={customerSessionClientSecret}>
                     <StripePayment />
                 </StripeProvider>
             </div>

src/app/_components/Ledger/Modals/DepositModal.tsx

@@ -28,9 +28,10 @@ const paymentProviderNames: Record<PaymentProvider, string> = {
 
 type Props = {
     ledgerAccountId: number,
+    customerSessionClientSecret?: string,
 }
 
-export default function DepositModal({ ledgerAccountId }: Props) {
+export default function DepositModal({ ledgerAccountId, customerSessionClientSecret }: Props) {
     const [funds, setFunds] = useState(MINIMUM_PAYMENT_AMOUNT)
     const [manualFees, setManualFees] = useState(0)
     const [selectedProvider, setSelectedProvider] = useState<PaymentProvider>(defaultPaymentProvider)
@@ -111,7 +112,7 @@ export default function DepositModal({ ledgerAccountId }: Props) {
                 </fieldset>
 
                 {selectedProvider === 'STRIPE' && (
-                    <StripeProvider mode="payment" amount={funds} >
+                    <StripeProvider mode="payment" amount={funds} customerSessionClientSecret={customerSessionClientSecret} >
                         <StripePayment ref={stripePaymentRef} />
                     </StripeProvider>
                 )}

src/app/_components/Stripe/StripeProvider.tsx

@@ -3,7 +3,6 @@
 import { MINIMUM_PAYMENT_AMOUNT } from '@/services/ledger/payments/config'
 import { Elements } from '@stripe/react-stripe-js'
 import { loadStripe } from '@stripe/stripe-js'
-import type { CustomerOptions } from '@stripe/stripe-js'
 import type { ReactNode } from 'react'
 
 if (!process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY) {
@@ -16,16 +15,16 @@ type Props = {
     children?: ReactNode,
     mode: 'payment' | 'setup',
     amount?: number,
-    customerOptions?: CustomerOptions,
+    customerSessionClientSecret?: string,
 }
 
-export default function StripeProvider({ children, mode, amount, customerOptions }: Props) {
+export default function StripeProvider({ children, mode, amount, customerSessionClientSecret }: Props) {
     return (
         <Elements stripe={stripe} options={{
             mode,
             currency: 'nok',
             amount: amount ? Math.max(MINIMUM_PAYMENT_AMOUNT, amount) : undefined,
-            customerOptions,
+            customerSessionClientSecret,
         }}>
             {children}
         </Elements>

src/prisma/schema/ledger.prisma

@@ -1,3 +1,21 @@
+// Join table between groups and their ledger accounts
+model GroupLedgerAccount {
+  id            Int           @id @default(autoincrement())
+  // TODO: Finnish this
+
+  // group         Group         @relation(fields: [groupId], references: [id], onDelete: Cascade, onUpdate: Cascade)
+  // groupId       Int
+  // ledgerAccount LedgerAccount @relation(fields: [ledgerAccountId], references: [id], onDelete: Cascade, onUpdate: Cascade)
+  // ledgerAccountId Int
+
+  createdAt     DateTime      @default(now())
+  updatedAt     DateTime      @updatedAt
+
+  // Index on IDs for faster look up
+  // @@index([groupId])
+  // @@index([ledgerAccountId])
+}
+
 // In theory the type of a ledger accounts could be inferred from its relations,
 // but to simplify logic an enum is used. In addition this also
 // makes the ledger account type known even after the relation is lost.

src/prisma/schema/user.prisma

@@ -17,45 +17,66 @@ model User {
   allergies     String?
   mobile        String?
   emailVerified DateTime?
-  createdAt     DateTime  @default(now())
-  updatedAt     DateTime  @updatedAt // is also updated manually
-  image         Image?    @relation(fields: [imageId], references: [id])
+  image         Image?    @relation(fields: [imageId], references: [id]) // TODO: Rename to "profilePicture"?
   imageId       Int?
   studentCard   String?   @unique
+  
+  createdAt     DateTime  @default(now())
+  updatedAt     DateTime  @updatedAt // is also updated manually
 
+  // Authentication info used for logging in.
   credentials  Credentials?
   feideAccount FeideAccount?
 
+  // Memberships to groups (committees, interest groups, classes, etc...).
   memberships Membership[]
 
+  // Lockers used by the user.
   LockerReservation LockerReservation[]
+
+  // Omega quotes posted by the user.
   omegaQuote        OmegaQuote[]
 
+  // Which ledger account (i.e. internal bank account) and
+  // stripe customer this user is associated with.
   ledgerAccount  LedgerAccount?
+  stripeCustomer StripeCustomer?
 
+  // What notifications the user whiches to received and
+  // which mailing lists the user is on.
   notificationSubscriptions NotificationSubscription[]
   mailingLists              MailingListUser[]
 
+  // Which admissions (a.k.a. "opptak") the user has taken
+  // and which admissions thay have registered for others.
   admissionTrials          AdmissionTrial[] @relation(name: "user")
   registeredAdmissionTrial AdmissionTrial[] @relation(name: "registeredBy")
 
+  // The user's applications to committees.
   Application Application[]
 
+  // Which events the user has registered for
+  // and which events they have created.
   EventRegistration EventRegistration[]
   Event             Event[]
 
+  // Which dots (a.k.a. "prikker") the user has received and given.
   dots        DotWrapper[] @relation(name: "dot_user")
   dotsAccused DotWrapper[] @relation(name: "dot_accuser")
 
+  // The queue used to determine who is registering cards at Kiogeskabet.
   registerStudentCardQueue RegisterStudentCardQueue[]
 
+  // Which cabin bookings the user has made.
   cabinBooking Booking[] @relation()
 
   // We need to explicitly mark the combination of 'id', 'username' and 'email' as
   // unique to make the relation to 'Credentials' work.
   @@unique([id, username, email])
 }
 
+// This model primaraly exists to keep the password hash separate from the user table.
+// This is to reduce the risk of leaking the password hashes..
 model Credentials {
   user                 User     @relation(fields: [userId, username, email], references: [id, username, email], onDelete: Cascade, onUpdate: Cascade)
   userId               Int      @unique
@@ -69,22 +90,36 @@ model Credentials {
   @@unique([userId, username, email])
 }
 
+// Associates each user with their Feide account.
 model FeideAccount {
   id          String   @id
   accessToken String   @db.Text
   email       String   @unique
   expiresAt   DateTime
   issuedAt    DateTime
-  userId      Int      @unique
   user        User     @relation(fields: [userId], references: [id], onDelete: Cascade, onUpdate: Cascade)
+  userId      Int      @unique
+}
+
+// Associates each user with their Stripe customer id.
+model StripeCustomer {
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade, onUpdate: Cascade)
+  userId Int @id
+  customerId String @unique
+
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
 }
 
+// When a user wants to register their student card, they are put in this queue.
+// Then they must scan their card with the card reader at Kiogeskabet.
 model RegisterStudentCardQueue {
   userId Int      @id
   user   User     @relation(fields: [userId], references: [id], onDelete: Cascade)
   expiry DateTime
 }
 
+// TODO: Someone should add a comment for ContactDetails because I have noe idea what it is for. Is it for anonymous users?
 model ContactDetails {
   id     Int     @id @default(autoincrement())
   name   String

src/services/ledger/stripeCustomer/methods.ts

@@ -0,0 +1,6 @@
+'use server'
+
+import { action } from "../action"
+import { StripeCustomerMethods } from "./methods"
+
+export const createStripeCustomerSessionAction = action(StripeCustomerMethods.createSession)