Feat/ledger

.env.default

@@ -30,6 +30,11 @@ LOG_MAX_FILES=365
 NEXTAUTH_URL="http://localhost:80"
 NEXTAUTH_SECRET=cake_is_love_cake_is_life
 
+# Stripe
+STRIPE_SECRET_KEY=sk_...
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_...
+STRIPE_WEBHOOK_SECRET=whsec_...
+
 # Password Hashing and Encryption
 PASSWORD_SALT_ROUNDS="12"
 PASSWORD_ENCRYPTION_KEY="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" # Must be 256 bits (43 characters) long

docker-compose.base.yml

@@ -25,7 +25,9 @@ services:
             API_KEY_ENCRYPTION_KEY: ${API_KEY_ENCRYPTION_KEY}
             FEIDE_CLIENT_ID: ${FEIDE_CLIENT_ID}
             FEIDE_CLIENT_SECRET: ${FEIDE_CLIENT_SECRET}
-            MAIL_SERVER: ${MAIL_SERVER}
+            STRIPE_SECRET_KEY: ${STRIPE_SECRET_KEY}
+            NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: ${NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY}
+            STRIPE_WEBHOOK_SECRET: ${STRIPE_WEBHOOK_SECRET}
             MAIL_DOMAIN: ${MAIL_DOMAIN}
             DOMAIN: ${DOMAIN}
             JWT_PRIVATE_KEY: ${JWT_PRIVATE_KEY}

jest.config.ts

@@ -14,6 +14,11 @@ const config: Config = {
         // This is needed becaue jest doesn't handle the this code is inside node_modules
         '^@/prisma-dobbel-omega/(.*)$': '<rootDir>/node_modules/.prisma-dobbel-omega/$1',
     },
+    globals: {
+        'ts-jest': {
+            useESM: true,
+        },
+    }
 }
 
 export default async function jestConfig() {

package.json

@@ -33,6 +33,8 @@
     "@prisma/client": "^6.1.0",
     "@react-email/components": "^0.0.31",
     "@react-email/render": "^1.0.3",
+    "@stripe/react-stripe-js": "^3.3.0",
+    "@stripe/stripe-js": "^5.9.2",
     "bcrypt": "^5.1.1",
     "html5-qrcode": "^2.3.8",
     "jsonwebtoken": "^9.0.2",
@@ -55,6 +57,7 @@
     "sass": "^1.83.0",
     "server-only": "^0.0.1",
     "sharp": "^0.33.5",
+    "stripe": "^17.7.0",
     "unified": "^11.0.5",
     "uuid": "^10.0.0",
     "winston": "^3.17.0",

src/app/_components/Ledger/Accounts/LedgerAccountBalance.module.scss

@@ -0,0 +1,32 @@
+@use "@/styles/ohma";
+
+.LedgerAccountBalance {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-auto-flow: row;
+    grid-auto-columns: max-content;
+    column-gap: 2*ohma.$gap;
+    white-space: nowrap;
+    overflow: hidden;
+
+    // @include ohma.screenMobile {
+    //     grid-template-columns: auto 1fr;
+    // }
+    // align-items: center;
+    // justify-content: space-between;
+}
+
+.amountRow {
+    display: contents;
+    font-size: ohma.$fonts-xxl;
+}
+
+.feesRow {
+    display: contents;
+    font-size: ohma.$fonts-l;
+}
+
+.total {
+    text-align: right;
+    // width: 100%; // ensures it stretches to the container
+}

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

@@ -0,0 +1,26 @@
+import styles from './LedgerAccountBalance.module.scss'
+import { unwrapActionReturn } from '@/app/redirectToErrorPage'
+import { displayAmount } from '@/lib/currency/convert'
+import { calculateLedgerAccountBalanceAction } from '@/services/ledger/ledgerAccount/actions'
+
+type Props = {
+    ledgerAccountId: number,
+    showFees?: boolean,
+}
+
+export default async function LedgerAccountBalance({ ledgerAccountId: accountId, showFees }: Props) {
+    const balance = unwrapActionReturn(await calculateLedgerAccountBalanceAction({ id: accountId }))
+
+    return <div className={styles.LedgerAccountBalance}>
+        <div className={styles.amountRow}>
+            <div>Saldo</div>
+            <div className={styles.total}>{displayAmount(balance.amount)}</div>
+            <div className={styles.currencySymbol}>Muenter</div>
+        </div>
+        {showFees && <div className={styles.feesRow}>
+            <div>Avgifter</div>
+            <div className={styles.total}>{displayAmount(balance.fees)}</div>
+            <div className={styles.currencySymbol}>Muenter</div>
+        </div>}
+    </div>
+}

src/app/_components/Ledger/Accounts/LedgerAccountList.module.scss

@@ -0,0 +1,5 @@
+@use "@/styles/ohma";
+
+.ledgerAccountListTable {
+    @include ohma.table();
+}

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

@@ -0,0 +1,27 @@
+'use client'
+
+import styles from './LedgerAccountList.module.scss'
+import EndlessScroll from '@/components/PagingWrappers/EndlessScroll'
+import LedgerAccountPagingProvider, { LedgerAccountPagingContext } from '@/contexts/paging/LedgerAccountPaging'
+import Link from 'next/link'
+
+export default function LedgerAccountList() {
+    return <LedgerAccountPagingProvider startPage={{ page: 0, pageSize: 10 }} details={{ accountType: 'GROUP' }} serverRenderedData={[]}>
+        <table className={styles.ledgerAccountListTable}>
+            <thead>
+                <tr>
+                    <th>Navn</th>
+                    <th>Saldo</th>
+                </tr>
+            </thead>
+            <tbody>
+                <EndlessScroll pagingContext={LedgerAccountPagingContext} renderer={account =>
+                    <tr key={account.id}>
+                        <td><Link href={`accounts/${account.id}`}>{account.name}</Link></td>
+                        <td>19.19 Klinguende Muente</td>
+                    </tr>
+                }/>
+            </tbody>
+        </table>
+    </LedgerAccountPagingProvider>
+}

src/app/_components/Ledger/Accounts/LedgerAccountOverview.module.scss

@@ -0,0 +1,11 @@
+@use "@/styles/ohma";
+
+.ledgerAccountOverviewButtons {
+    margin-top: 3*ohma.$gap;
+    display: flex;
+    flex-direction: row;
+
+    .rightAligned {
+        margin-left: auto;
+    }
+}

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

@@ -0,0 +1,51 @@
+import styles from './LedgerAccountOverview.module.scss'
+import LedgerAccountBalance from './LedgerAccountBalance'
+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,
+    showFees?: boolean,
+    showDepositButton?: boolean,
+    showPayoutButton?: boolean,
+    showDeactivateButton?: boolean,
+}
+
+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} customerSessionClientSecret={customerSessionClientSecret} /> }
+            { showPayoutButton && <PayoutModal ledgerAccountId={ledgerAccountId} /> }
+            { showDeactivateButton && <Button color="red" className={styles.rightAligned}>Deaktiver</Button> }
+        </div>
+    </Card>
+}

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

@@ -0,0 +1,40 @@
+import BankCardModal from '@/components/Ledger/Modals/BankCardModal'
+import Card from '@/components/UI/Card'
+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
+
+    return <Card heading="Betalingsalternativer">
+        <h3>Bankkort <BooleanIndicator value={hasBankCard} /></h3>
+        <p>
+            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 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>
+        <Link href={`/users/${user.username}/settings`}>Gå til siden for kortregistrering.</Link>
+    </Card>
+}

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

@@ -0,0 +1,25 @@
+import Card from '@/components/UI/Card'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faArrowRight } from '@fortawesome/free-solid-svg-icons'
+import Link from 'next/link'
+
+type Props = {
+    ledgerAccountId: number,
+    transactionsHref?: string,
+}
+
+export default function LedgerAccountTransactionSummary({ transactionsHref }: Props) {
+    return <Card heading="Transaksjoner">
+        <table>
+            <tbody>
+                <tr>
+                    <td>En transaksjon</td>
+                </tr>
+                <tr>
+                    <td>En annen transaksjon</td>
+                </tr>
+            </tbody>
+        </table>
+        { transactionsHref && <Link href={transactionsHref}>Se alle transaksjoner <FontAwesomeIcon icon={faArrowRight} /></Link> }
+    </Card>
+}

src/app/_components/Ledger/Modals/BankCardModal.module.scss

@@ -0,0 +1,10 @@
+@use "@/styles/ohma";
+
+.bankCardFormContainer {
+    width: 500px; // TODO: Is there a better way to do this?
+    margin: ohma.$gap * 3;
+}
+
+.paymentDetails {
+    min-height: 50px;
+}

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

@@ -0,0 +1,27 @@
+'use client'
+
+import styles from './BankCardModal.module.scss'
+import PopUp from '@/app/_components/PopUp/PopUp'
+import Button from '@/app/_components/UI/Button'
+import StripePayment from '@/components/Stripe/StripePayment'
+import StripeProvider from '@/components/Stripe/StripeProvider'
+
+type PropTypes = {
+    customerSessionClientSecret?: string,
+}
+
+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" customerSessionClientSecret={customerSessionClientSecret}>
+                    <StripePayment />
+                </StripeProvider>
+            </div>
+        </PopUp>
+    )
+}

src/app/_components/Ledger/Modals/CheckoutModal.module.scss

@@ -0,0 +1,7 @@
+.checkoutFormContainer {
+    width: 500px; // TODO: Is there a better way to do this?
+}
+
+.paymentDetails {
+    min-height: 50px;
+}