From 45d2ec0fbfaa36f8a5f9c7aedcdafa70cf20dc33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20K=C3=BCndig?= <michael@socialincome.org>
Date: Thu, 30 Nov 2023 14:46:43 +0100
Subject: [PATCH] refactor(website): show spinning button on account activation
 (#662)

---
 .../success/stripe/[session]/activate/create-user-form.tsx | 7 ++++++-
 .../donate/success/stripe/[session]/success-form.tsx       | 7 ++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/website/src/app/[lang]/[region]/donate/success/stripe/[session]/activate/create-user-form.tsx b/website/src/app/[lang]/[region]/donate/success/stripe/[session]/activate/create-user-form.tsx
index f0eb3f9a1..3af82ebd9 100644
--- a/website/src/app/[lang]/[region]/donate/success/stripe/[session]/activate/create-user-form.tsx
+++ b/website/src/app/[lang]/[region]/donate/success/stripe/[session]/activate/create-user-form.tsx
@@ -5,6 +5,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Button, Form, FormControl, FormField, FormItem, FormMessage, Input, Typography } from '@socialincome/ui';
 import { createUserWithEmailAndPassword } from 'firebase/auth';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useAuth } from 'reactfire';
 import * as z from 'zod';
@@ -27,6 +28,7 @@ type CreateUserFormProps = {
 export function CreateUserForm({ checkoutSessionId, email, onSuccessURL, translations }: CreateUserFormProps) {
 	const router = useRouter();
 	const auth = useAuth();
+	const [submitting, setSubmitting] = useState(false);
 
 	const formSchema = z
 		.object({
@@ -50,6 +52,7 @@ export function CreateUserForm({ checkoutSessionId, email, onSuccessURL, transla
 	});
 
 	const onSubmit = async (values: FormSchema) => {
+		setSubmitting(true);
 		createUserWithEmailAndPassword(auth, email, values.password)
 			.then(async (result) => {
 				const data: UpdateUserData = {
@@ -108,7 +111,9 @@ export function CreateUserForm({ checkoutSessionId, email, onSuccessURL, transla
 						</FormItem>
 					)}
 				/>
-				<Button type="submit">{translations.submitButton}</Button>
+				<Button type="submit" showLoadingSpinner={submitting}>
+					{translations.submitButton}
+				</Button>
 			</form>
 		</Form>
 	);
diff --git a/website/src/app/[lang]/[region]/donate/success/stripe/[session]/success-form.tsx b/website/src/app/[lang]/[region]/donate/success/stripe/[session]/success-form.tsx
index 9650ce7a0..052796df3 100644
--- a/website/src/app/[lang]/[region]/donate/success/stripe/[session]/success-form.tsx
+++ b/website/src/app/[lang]/[region]/donate/success/stripe/[session]/success-form.tsx
@@ -23,6 +23,7 @@ import {
 	SelectValue,
 } from '@socialincome/ui';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';
 
@@ -66,6 +67,7 @@ export function SuccessForm({
 	const router = useRouter();
 	const commonTranslator = useTranslator(lang, 'common');
 	const countryTranslator = useTranslator(lang, 'countries');
+	const [submitting, setSubmitting] = useState(false);
 	const [firstCountry, ...restCountries] = COUNTRY_CODES;
 
 	const formSchema = z.object({
@@ -89,7 +91,7 @@ export function SuccessForm({
 	});
 
 	const onSubmit = async (values: FormSchema) => {
-		console.log(values);
+		setSubmitting(true);
 		const data: UpdateUserData = {
 			stripeCheckoutSessionId: stripeCheckoutSessionId,
 			user: {
@@ -106,7 +108,6 @@ export function SuccessForm({
 				},
 			},
 		};
-
 		fetch('/api/user/update', { method: 'POST', body: JSON.stringify(data) }).then((response) => {
 			if (!response.ok) throw new Error('Failed to update user data');
 			router.push(`/${lang}/${region}/donate/success/stripe/${stripeCheckoutSessionId}/activate`);
@@ -229,7 +230,7 @@ export function SuccessForm({
 						</FormItem>
 					)}
 				/>
-				<Button type="submit" className="md:col-span-2 md:mt-4">
+				<Button type="submit" showLoadingSpinner={submitting} className="md:col-span-2 md:mt-4">
 					{translations.submitButton}
 				</Button>
 			</form>