feature(general): initial swiss qr bill integration

website/package.json

@@ -1,69 +1,70 @@
 {
-	"name": "@socialincome/website",
-	"version": "1.0.0",
-	"private": true,
-	"scripts": {
-		"serve": "next dev -p 3001",
-		"serve:emulator": "firebase emulators:exec --project demo-social-income-local --only firestore --config ../firebase.json --import ../seed  'npm run serve'",
-		"build": "next build",
-		"build:emulator": "firebase emulators:exec --project demo-social-income-local --only firestore --config ../firebase.json --import ../seed  'npm run build'",
-		"start": "next start -p 3001",
-		"start:emulator": "firebase emulators:exec --project demo-social-income-local --only firestore --config ../firebase.json --import ../seed  'npm run start'",
-		"test": "jest --passWithNoTests",
-		"test:emulator": "firebase emulators:exec --project demo-social-income-local --only firestore --config ../firebase.json --import ../seed  'npm run test'",
-		"test:e2e": "npx playwright install --with-deps && playwright test",
-		"test:e2e:emulator": "firebase emulators:exec --project demo-social-income-local --only firestore --config ../firebase.json --import ../seed  'npm run test:e2e'",
-		"test:e2e:update": "npx playwright install --with-deps && playwright test --update-snapshots",
-		"test:e2e:update:emulator": "firebase emulators:exec --project demo-social-income-local --only firestore --config ../firebase.json --import ../seed  'npm run test:e2e:update'",
-		"lint": "next lint"
-	},
-	"dependencies": {
-		"@heroicons/react": "^2.1.5",
-		"@icons-pack/react-simple-icons": "^10.0.0",
-		"@lottiefiles/react-lottie-player": "^3.5.4",
-		"@mux/mux-video-react": "^0.12.0",
-		"@sentry/nextjs": "^8.33.1",
-		"@socialincome/shared": "^1.0.0",
-		"@socialincome/ui": "^1.0.0",
-		"@tanstack/react-query": "^5.59.0",
-		"@types/js-cookie": "^3.0.6",
-		"@vercel/analytics": "^1.3.1",
-		"@vercel/functions": "^1.5.2",
-		"@vimeo/player": "^2.24.0",
-		"accept-language-parser": "^1.5.0",
-		"classnames": "^2.5.1",
-		"country-flag-icons": "^1.5.13",
-		"firebase": "^10.14.0",
-		"i18next": "^23.15.2",
-		"js-cookie": "^3.0.5",
-		"lodash": "^4.17.21",
-		"luxon": "^3.5.0",
-		"next": "14.2.19",
-		"react": "18.3.1",
-		"react-dom": "18.3.1",
-		"react-hot-toast": "^2.4.1",
-		"reactfire": "^4.2.3",
-		"recharts": "^2.12.7",
-		"server-only": "^0.0.1",
-		"sharp": "^0.33.5",
-		"stripe": "^17.1.0",
-		"survey-core": "^1.12.4",
-		"survey-react-ui": "^1.12.4",
-		"tailwind-merge": "^2.5.3",
-		"usehooks-ts": "^3.1.0",
-		"zod": "^3.23.8"
-	},
-	"devDependencies": {
-		"@types/accept-language-parser": "^1.5.6",
-		"@types/node": "^22.7.4",
-		"@types/react": "^18.3.18",
-		"@types/react-dom": "^18.3.5",
-		"@types/vimeo__player": "^2.18.3",
-		"autoprefixer": "^10.4.20",
-		"eslint": "^8.57.1",
-		"eslint-config-next": "^14.2.14",
-		"postcss": "^8.4.47",
-		"tailwindcss": "^3.4.13",
-		"typescript": "^5.6.2"
-	}
+  "name": "@socialincome/website",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "serve": "next dev -p 3001",
+    "serve:emulator": "firebase emulators:exec --project demo-social-income-local --only firestore --config ../firebase.json --import ../seed  'npm run serve'",
+    "build": "next build",
+    "build:emulator": "firebase emulators:exec --project demo-social-income-local --only firestore --config ../firebase.json --import ../seed  'npm run build'",
+    "start": "next start -p 3001",
+    "start:emulator": "firebase emulators:exec --project demo-social-income-local --only firestore --config ../firebase.json --import ../seed  'npm run start'",
+    "test": "jest --passWithNoTests",
+    "test:emulator": "firebase emulators:exec --project demo-social-income-local --only firestore --config ../firebase.json --import ../seed  'npm run test'",
+    "test:e2e": "npx playwright install --with-deps && playwright test",
+    "test:e2e:emulator": "firebase emulators:exec --project demo-social-income-local --only firestore --config ../firebase.json --import ../seed  'npm run test:e2e'",
+    "test:e2e:update": "npx playwright install --with-deps && playwright test --update-snapshots",
+    "test:e2e:update:emulator": "firebase emulators:exec --project demo-social-income-local --only firestore --config ../firebase.json --import ../seed  'npm run test:e2e:update'",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.1.5",
+    "@icons-pack/react-simple-icons": "^10.0.0",
+    "@lottiefiles/react-lottie-player": "^3.5.4",
+    "@mux/mux-video-react": "^0.12.0",
+    "@sentry/nextjs": "^8.33.1",
+    "@socialincome/shared": "^1.0.0",
+    "@socialincome/ui": "^1.0.0",
+    "@tanstack/react-query": "^5.59.0",
+    "@types/js-cookie": "^3.0.6",
+    "@vercel/analytics": "^1.3.1",
+    "@vercel/functions": "^1.5.2",
+    "@vimeo/player": "^2.24.0",
+    "accept-language-parser": "^1.5.0",
+    "classnames": "^2.5.1",
+    "country-flag-icons": "^1.5.13",
+    "firebase": "^10.14.0",
+    "i18next": "^23.15.2",
+    "js-cookie": "^3.0.5",
+    "lodash": "^4.17.21",
+    "luxon": "^3.5.0",
+    "next": "14.2.19",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-hot-toast": "^2.4.1",
+    "reactfire": "^4.2.3",
+    "recharts": "^2.12.7",
+    "server-only": "^0.0.1",
+    "sharp": "^0.33.5",
+    "stripe": "^17.1.0",
+    "survey-core": "^1.12.4",
+    "survey-react-ui": "^1.12.4",
+    "swissqrbill": "^4.0.2",
+    "tailwind-merge": "^2.5.3",
+    "usehooks-ts": "^3.1.0",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@types/accept-language-parser": "^1.5.6",
+    "@types/node": "^22.7.4",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@types/vimeo__player": "^2.18.3",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.1",
+    "eslint-config-next": "^14.2.14",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.13",
+    "typescript": "^5.6.2"
+  }
 }

website/src/app/[lang]/[region]/(website)/me/security/page.tsx

@@ -1,5 +1,6 @@
 import { DefaultPageProps } from '@/app/[lang]/[region]';
 import { SignOutButton } from '@/app/[lang]/[region]/(website)/me/security/sign-out-button';
+import SwissQrBillSection from '@/app/[lang]/[region]/(website)/me/security/swiss-qr-bill';
 import UpdatePasswordForm from '@/app/[lang]/[region]/(website)/me/security/update-password-form';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
 
@@ -24,6 +25,7 @@ export default async function Page({ params }: DefaultPageProps) {
 					buttonText: translator.t('security.sign-out.button'),
 				}}
 			/>
+			<SwissQrBillSection />
 		</div>
 	);
 }

website/src/app/[lang]/[region]/(website)/me/security/swiss-qr-bill.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { useApi } from '@/hooks/useApi';
+import { useQuery } from '@tanstack/react-query';
+import { useUser } from 'reactfire';
+
+type SwissQrBillSectionProps = {};
+
+export default function SwissQrBillSection({}: SwissQrBillSectionProps) {
+	const { data: authUser } = useUser();
+	const api = useApi();
+
+	const { data: qrBillSVG } = useQuery({
+		queryKey: ['qr-bill', authUser?.uid],
+		queryFn: async () => {
+			const response = await api.post('/api/swiss-qr-bill', { amount: 1 });
+			return await response.json();
+		},
+		staleTime: 1000 * 60 * 60, // 1 hour
+	});
+
+	console.log(qrBillSVG);
+
+	return <>{qrBillSVG && <div dangerouslySetInnerHTML={{ __html: qrBillSVG.svg }}></div>}</>;
+}

website/src/app/[lang]/[region]/(website)/me/security/update-password-form.tsx

@@ -10,7 +10,7 @@ import toast from 'react-hot-toast';
 import { useAuth, useUser } from 'reactfire';
 import * as z from 'zod';
 
-type LoginFormProps = {
+type UpdatePasswordFormProps = {
 	translations: {
 		title: string;
 		password: string;
@@ -22,7 +22,7 @@ type LoginFormProps = {
 	};
 };
 
-export default function UpdatePasswordForm({ translations }: LoginFormProps) {
+export default function UpdatePasswordForm({ translations }: UpdatePasswordFormProps) {
 	const auth = useAuth();
 	const router = useRouter();
 	const { data: authUser } = useUser();

website/src/app/api/swiss-qr-bill/route.ts

@@ -0,0 +1,39 @@
+import { NextResponse } from 'next/server';
+const { SwissQRCode } = require('swissqrbill/svg');
+
+export type CreateSwissQrBill = { amount: number };
+type CreateSwissQrBillRequest = { json(): Promise<CreateSwissQrBill> } & Request;
+
+export async function POST(request: CreateSwissQrBillRequest) {
+	const { amount } = await request.json();
+
+	const data = {
+		amount,
+		currency: 'CHF',
+		creditor: {
+			account: 'CH6730000001151126386',
+			name: 'Social Income',
+			address: 'Zweierstrasse',
+			buildingNumber: 103,
+			city: 'Zürich',
+			zip: 8003,
+			country: 'CH',
+		},
+		av1: 'av1: test1234',
+		av2: 'av2: test1234',
+		message: 'Contribution by test1234',
+		reference: '000000017013512241470000010',
+		// debtor: {
+		// 	address: 'Musterstrasse',
+		// 	buildingNumber: 1,
+		// 	city: 'Musterstadt',
+		// 	country: 'CH',
+		// 	name: 'Peter Muster',
+		// 	zip: 1234,
+		// },
+	};
+
+	const svg = new SwissQRCode(data);
+
+	return NextResponse.json({ svg: svg.toString() });
+}

website/src/hooks/useApi.ts

@@ -12,7 +12,7 @@ export class ApiClient {
 		return this.request('GET', path);
 	}
 
-	post(path: string, body: Object) {
+	post(path: string, body?: Object) {
 		return this.request('POST', path, body);
 	}