refactor(website): show spinning button on account activation (#662)

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>
 	);

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>