From df12d117b986586468c9b48d8443ed8db12eecbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20K=C3=BCndig?= <michael@socialincome.org>
Date: Sat, 10 Aug 2024 19:14:10 +0200
Subject: [PATCH] feature(website): update monthly income section on new
 landing page (#890)

---
 ui/src/components/button.tsx                  |   6 +-
 ui/src/components/input.tsx                   |   2 +-
 ui/src/components/select.tsx                  |   6 +-
 .../v2/(home)/(components)/income-input.tsx   | 116 +++++++++++++-----
 .../v2/(home)/(sections)/monthly-income.tsx   |  25 ++--
 5 files changed, 103 insertions(+), 52 deletions(-)

diff --git a/ui/src/components/button.tsx b/ui/src/components/button.tsx
index 959119d58..6b7f5da74 100644
--- a/ui/src/components/button.tsx
+++ b/ui/src/components/button.tsx
@@ -6,13 +6,13 @@ import { ComponentType } from 'react';
 import { cn } from '../lib/utils';
 
 const buttonVariants = cva(
-	'inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-all duration-200 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+	'inline-flex items-center justify-center rounded-xl text-sm ring-offset-background transition-all duration-200 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
 	{
 		variants: {
 			size: {
 				default: 'h-10 px-4 py-2',
-				sm: 'h-9 rounded-md px-3',
-				lg: 'h-16 rounded-md px-8 text-lg',
+				sm: 'h-9 rounded-xl px-3',
+				lg: 'h-16 rounded-xl px-8 text-lg',
 				icon: 'h-10 w-10',
 			},
 			variant: {
diff --git a/ui/src/components/input.tsx b/ui/src/components/input.tsx
index 2a72d1640..edad3c057 100644
--- a/ui/src/components/input.tsx
+++ b/ui/src/components/input.tsx
@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
 		<input
 			type={type}
 			className={cn(
-				'border-input bg-popover text-popover-foreground ring-offset-background placeholder:text-popover-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+				'border-input bg-popover text-popover-foreground ring-offset-background placeholder:text-popover-foreground focus-visible:ring-ring flex h-10 w-full rounded-xl border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
 				className,
 			)}
 			ref={ref}
diff --git a/ui/src/components/select.tsx b/ui/src/components/select.tsx
index b7b4d4941..b32e00de0 100644
--- a/ui/src/components/select.tsx
+++ b/ui/src/components/select.tsx
@@ -18,14 +18,14 @@ const SelectTrigger = React.forwardRef<
 	<SelectPrimitive.Trigger
 		ref={ref}
 		className={cn(
-			'border-input bg-popover text-popover-foreground ring-offset-background focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+			'border-input bg-popover text-popover-foreground ring-offset-background focus:ring-ring flex h-10 w-full items-center justify-between rounded-xl border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
 			className,
 		)}
 		{...props}
 	>
 		{children}
 		<SelectPrimitive.Icon asChild>
-			<ChevronDown className="h-4 w-4 opacity-50" />
+			<ChevronDown className="h-4 w-4 opacity-80" />
 		</SelectPrimitive.Icon>
 	</SelectPrimitive.Trigger>
 ));
@@ -39,7 +39,7 @@ const SelectContent = React.forwardRef<
 		<SelectPrimitive.Content
 			ref={ref}
 			className={cn(
-				'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md',
+				'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 min-w-[8rem] overflow-hidden rounded-xl border shadow-md',
 				position === 'popper' &&
 					'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
 				className,
diff --git a/website/src/app/[lang]/[region]/v2/(home)/(components)/income-input.tsx b/website/src/app/[lang]/[region]/v2/(home)/(components)/income-input.tsx
index 042597b09..f8a06d0a9 100644
--- a/website/src/app/[lang]/[region]/v2/(home)/(components)/income-input.tsx
+++ b/website/src/app/[lang]/[region]/v2/(home)/(components)/income-input.tsx
@@ -1,38 +1,94 @@
 'use client';
 
-import { ChevronDownIcon } from '@heroicons/react/24/outline';
-import { Button, Popover, PopoverContent, PopoverTrigger, Typography } from '@socialincome/ui';
+import { useI18n } from '@/components/providers/context-providers';
+import { websiteCurrencies } from '@/i18n';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	Input,
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '@socialincome/ui';
+import classNames from 'classnames';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import * as z from 'zod';
 
 export function IncomeInput() {
-	const choices = ['CHF', 'USD'];
+	const { currency } = useI18n();
+
+	const formSchema = z.object({
+		value: z.string(),
+		currency: z.enum(websiteCurrencies as any),
+	});
+
+	type FormSchema = z.infer<typeof formSchema>;
+	const form = useForm<FormSchema>({
+		resolver: zodResolver(formSchema),
+		defaultValues: { value: '5000' as any, currency: currency },
+	});
+
+	useEffect(() => {
+		form.setValue('currency', currency);
+	}, [currency]);
+
+	const onSubmit = async (values: FormSchema) => {
+		alert(`You entered: ${values.value} ${values.currency}`);
+	};
 
 	return (
-		<div className="flex flex-col text-white">
-			<div className="align-center flex items-center justify-center">
-				<Typography weight="medium" className=" mr-1 w-48 py-2 text-right text-7xl opacity-40">
-					6
-				</Typography>
-				<Popover openDelay={100} closeDelay={200}>
-					<PopoverTrigger asChild>
-						<Button className="flex items-center space-x-1 bg-inherit">
-							<Typography>{choices[0]}</Typography>
-							<ChevronDownIcon className="h-4 w-4" />
-						</Button>
-					</PopoverTrigger>
-					<PopoverContent asChild className="bg-popover w-12 p-0">
-						<ul className="divide-muted divide-y">
-							{choices.map((choice, index) => (
-								<li key={index} className="hover:bg-popover-muted py-2 text-center">
-									<Typography size="xs">{choice}</Typography>
-								</li>
-							))}
-						</ul>
-					</PopoverContent>
-				</Popover>
-			</div>
-			<div className="w-64 self-center opacity-40">
-				<hr />
-			</div>
-		</div>
+		<Form {...form}>
+			<form
+				className="mx-auto flex max-w-72 items-center justify-center border-b border-white border-opacity-40 pb-3 text-white"
+				onSubmit={form.handleSubmit(onSubmit)}
+			>
+				<FormField
+					control={form.control}
+					name="value"
+					render={({ field }) => (
+						<FormItem>
+							<FormControl>
+								<Input
+									type="number"
+									className={classNames(
+										'bg-background w-full border-none text-right text-5xl text-white opacity-40 focus-visible:opacity-100 focus-visible:ring-0',
+										'[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none', // hide arrows
+									)}
+									{...field}
+								/>
+							</FormControl>
+						</FormItem>
+					)}
+				/>
+				<FormField
+					control={form.control}
+					name="currency"
+					render={({ field }) => (
+						<FormItem>
+							<Select onValueChange={field.onChange}>
+								<FormControl>
+									<SelectTrigger className="w-20 border-none bg-transparent text-lg text-white focus:ring-0">
+										<SelectValue placeholder={field.value} />
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									{websiteCurrencies.map((currency) => (
+										<SelectItem key={currency} value={currency}>
+											{currency}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+						</FormItem>
+					)}
+				/>
+			</form>
+		</Form>
 	);
 }
diff --git a/website/src/app/[lang]/[region]/v2/(home)/(sections)/monthly-income.tsx b/website/src/app/[lang]/[region]/v2/(home)/(sections)/monthly-income.tsx
index c0a1c7a12..587013433 100644
--- a/website/src/app/[lang]/[region]/v2/(home)/(sections)/monthly-income.tsx
+++ b/website/src/app/[lang]/[region]/v2/(home)/(sections)/monthly-income.tsx
@@ -3,27 +3,22 @@ import { Translator } from '@socialincome/shared/src/utils/i18n';
 import { BaseContainer, Typography } from '@socialincome/ui';
 import { IncomeInput } from '../(components)/income-input';
 
-export async function MonthlyIncome({ lang, region }: DefaultParams) {
+export async function MonthlyIncome({ lang }: DefaultParams) {
 	const translator = await Translator.getInstance({
 		language: lang,
 		namespaces: ['website-home2', 'common'],
 	});
 
 	return (
-		// <BaseContainer backgroundColor="bg-foreground-dark" className="py-3">
-		<BaseContainer className="theme-blue-v2 py-3">
-			{' '}
-			{/* Is there a way to use theme-blue-v2 to set background blue? */}
-			<div className="my-4 py-12 text-center text-white">
-				<Typography size="lg" className="opacity-40">
-					{translator.t('section-3.title-faded')}
-				</Typography>
-				<Typography size="3xl" className="py-8">
-					{translator.t('section-3.title')}
-				</Typography>
-				<IncomeInput />
-				<Typography className="pb-2 pt-8 opacity-40">{translator.t('section-3.subtitle')}</Typography>
-			</div>
+		<BaseContainer className="theme-blue-v2 my-4 py-20 text-center">
+			<Typography size="lg" className="opacity-40">
+				{translator.t('section-3.title-faded')}
+			</Typography>
+			<Typography size="3xl" className="py-8">
+				{translator.t('section-3.title')}
+			</Typography>
+			<IncomeInput />
+			<Typography className="pb-2 pt-8 opacity-40">{translator.t('section-3.subtitle')}</Typography>
 		</BaseContainer>
 	);
 }