feature(website): support one-time donation

socialincome-san · Nov 13, 2023 · 9cee5af · 9cee5af
1 parent 77e0aba
commit 9cee5af
Show file tree

Hide file tree

Showing 39 changed files with 600 additions and 297 deletions.
diff --git a/shared/locales/de/website-home.json b/shared/locales/de/website-home.json
@@ -4,7 +4,10 @@
 		"title-2": "aus der Armut helfen?",
 		"title-3": "",
 		"income-text": "Gib dein monatliches Einkommen ein und schau, was du bewirken kannst.",
-		"button-text": "Beitrag berechnen"
+		"button-text": "Beitrag berechnen",
+		"privacy-commitment": "Wir verpflichten uns zum Datenschutz",
+		"tax-deductible": "Dein Beitrag ist in der Schweiz steuerbefreit",
+		"one-time-donation": "Make a one-time donation"
 	},
 	"section-2": {
 		"title-1": "Was würde sich in deinem Alltag ändern, ",

diff --git a/shared/locales/de/website-me.json b/shared/locales/de/website-me.json
@@ -1,19 +1,52 @@
 {
-	"tabs": {
-		"contact-details": "Kontaktangaben",
-		"contributions": "Zuwendungen"
+	"sections": {
+		"account": {
+			"title": "My Account",
+			"personal-info": "Personal Info",
+			"security": "Security"
+		},
+		"contributions": {
+			"title": "My Contributions",
+			"payments": "Payments",
+			"subscriptions": "Subscriptions"
+		}
 	},
 	"contributions": {
-		"amount": "Betrag",
+		"amount": "Amount",
+		"date": "Date",
+		"source": "Source",
+		"total": "Total",
 		"amount-currency": "{{ amount, currency }}",
-		"date": "Datum"
+		"sources": {
+			"benevity": "Benevity",
+			"cash": "Cash",
+			"stripe": "Stripe",
+			"wire-transfer": "Wire Transfer"
+		}
+	},
+	"subscriptions": {
+		"amount": "Amount",
+		"date": "Date",
+		"source": "Source",
+		"total": "Total",
+		"amount-currency": "{{ amount, currency }}",
+		"interval": "Interval",
+		"interval-1": "Monatlich",
+		"interval-3": "Quartalsweise",
+		"interval-12": "Jährlich",
+		"status": {
+			"active": "Aktiv",
+			"canceled": "Beendet",
+			"paused": "Pausiert"
+		}
 	},
 	"login": {
 		"title": "Melde dich an",
 		"email": "E-Mail",
 		"invalid-email": "Ungültige E-Mail-Adresse",
 		"password": "Passwort",
 		"forgot-password": "Passwort vergessen?",
+		"sign-in-with-google": "Mit Google anmelden",
 		"required-field": "Dieses Feld ist erforderlich",
 		"submit-button": "Anmelden",
 		"unknown-user": "Es gibt keinen Benutzer mit dieser E-Mail-Adresse",

diff --git a/shared/locales/en/website-home.json b/shared/locales/en/website-home.json
@@ -4,7 +4,11 @@
 		"title-2": "lift out of poverty ",
 		"title-3": "with 1% of your income?",
 		"income-text": "Enter your monthly income and calculate your impact.",
-		"button-text": "Show my Impact"
+		"amount": "Amount",
+		"button-text": "Show my Impact",
+		"privacy-commitment": "Our commitment to privacy",
+		"tax-deductible": "Contributions are tax-deductible in Switzerland",
+		"one-time-donation": "Make a one-time donation"
 	},
 	"section-2": {
 		"title-1": "What would change ",

diff --git a/shared/locales/en/website-me.json b/shared/locales/en/website-me.json
@@ -46,6 +46,7 @@
 		"invalid-email": "Invalid email address",
 		"password": "Password",
 		"forgot-password": "Forgot password?",
+		"sign-in-with-google": "Sign in with Google",
 		"required-field": "This field is required",
 		"submit-button": "Sign in",
 		"unknown-user": "This user does not exist",

diff --git a/ui/src/components/button.tsx b/ui/src/components/button.tsx
@@ -1,3 +1,4 @@
+import { IconType } from '@icons-pack/react-simple-icons/types';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
@@ -18,7 +19,7 @@ const buttonVariants = cva(
 			size: {
 				default: 'h-10 px-4 py-2',
 				sm: 'h-9 rounded-md px-3',
-				lg: 'h-16 rounded-md px-8 font-semibold',
+				lg: 'h-16 rounded-md px-8 font-semibold text-lg',
 				icon: 'h-10 w-10',
 			},
 		},
@@ -33,12 +34,18 @@ export interface ButtonProps
 	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
 		VariantProps<typeof buttonVariants> {
 	asChild?: boolean;
+	Icon?: IconType;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-	({ className, variant, size, asChild = false, ...props }, ref) => {
+	({ className, variant, size, asChild = false, Icon, children, ...props }, ref) => {
 		const Comp = asChild ? Slot : 'button';
-		return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+		return (
+			<Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props}>
+				{Icon && <Icon className={cn('h-4 w-4', { 'mr-2': size !== 'icon' })} />}
+				{children}
+			</Comp>
+		);
 	},
 );
 Button.displayName = 'Button';

diff --git a/ui/src/components/form.tsx b/ui/src/components/form.tsx
@@ -4,7 +4,6 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import { Slot } from '@radix-ui/react-slot';
 import * as React from 'react';
 import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from 'react-hook-form';
-
 import { cn } from '../lib/utils';
 import { Label } from './label';
 
@@ -22,9 +21,9 @@ const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFi
 const FormField = <
 	TFieldValues extends FieldValues = FieldValues,
 	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(
-	{ ...props }: ControllerProps<TFieldValues, TName>,
-) => {
+>({
+	...props
+}: ControllerProps<TFieldValues, TName>) => {
 	return (
 		<FormFieldContext.Provider value={{ name: props.name }}>
 			<Controller {...props} />
@@ -67,7 +66,7 @@ const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivEl
 
 		return (
 			<FormItemContext.Provider value={{ id }}>
-				<div ref={ref} className={cn('space-y-2', className)} {...props} />
+				<div ref={ref} className={cn('space-y-1', className)} {...props} />
 			</FormItemContext.Provider>
 		);
 	},
@@ -120,7 +119,15 @@ const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<
 		}
 
 		return (
-			<p ref={ref} id={formMessageId} className={cn('text-destructive text-sm font-medium', className)} {...props}>
+			<p
+				ref={ref}
+				id={formMessageId}
+				className={cn(
+					'text-destructive-foreground bg-destructive ml-1 rounded px-2 py-1 text-sm font-medium',
+					className,
+				)}
+				{...props}
+			>
 				{body}
 			</p>
 		);

diff --git 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 ring-offset-background placeholder:text-muted-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-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',
 				className,
 			)}
 			ref={ref}

diff --git a/ui/src/components/select.tsx b/ui/src/components/select.tsx
@@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef<
 	<SelectPrimitive.Trigger
 		ref={ref}
 		className={cn(
-			'border-input bg-popover ring-offset-background placeholder:text-muted-foreground 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-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',
 			className,
 		)}
 		{...props}
@@ -76,7 +76,7 @@ const SelectItem = React.forwardRef<
 	<SelectPrimitive.Item
 		ref={ref}
 		className={cn(
-			'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+			'focus:bg-popover focus:text-popover-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
 			className,
 		)}
 		{...props}

diff --git a/ui/src/globals.css b/ui/src/globals.css
@@ -3,82 +3,58 @@
 @tailwind utilities;
 
 @layer base {
-	:root,
-	.theme-default {
-		--si-yellow: hsl(48, 100%, 49%);
-		--background: hsl(219, 100%, 97%);
-		--foreground: hsl(20 14.3% 4.1%);
+    :root,
+    .theme-default {
+        --si-yellow: hsl(48, 100%, 49%);
+        --background: hsl(219, 100%, 97%);
+        --foreground: hsl(20 14.3% 4.1%);
 
-		--card: hsl(0 100% 100%);
-		--card-foreground: hsl(20 14.3% 4.1%);
+        --card: hsl(0 100% 100%);
+        --card-foreground: hsl(20 14.3% 4.1%);
 
-		--popover: hsl(0 100% 100%);
-		--popover-foreground: hsl(20 14.3% 4.1%);
+        --popover: hsl(0 100% 100%);
+        --popover-foreground: hsl(0, 0%, 40%);
 
-		--primary: hsl(216, 54%, 55%);
-		--primary-foreground: hsl(60 9.1% 97.8%);
+        --primary: hsl(216, 54%, 55%);
+        --primary-foreground: hsl(60 9.1% 97.8%);
 
-		--secondary: hsl(8, 89%, 62%);
-		--secondary-foreground: hsl(240, 2%, 21%);
+        --secondary: hsl(8, 89%, 62%);
+        --secondary-foreground: hsl(240, 2%, 21%);
 
-		--muted: hsl(60 4.8% 95.9%);
-		--muted-foreground: hsl(25 5.3% 44.7%);
+        --muted: hsl(60 4.8% 95.9%);
+        --muted-foreground: hsl(25 5.3% 44.7%);
 
-		--accent: hsl(219, 100%, 95%);
-		--accent-foreground: hsl(24 9.8% 10%);
+        --accent: hsl(219, 100%, 95%);
+        --accent-foreground: hsl(24 9.8% 10%);
 
-		--destructive: hsl(0, 75%, 42%);
-		--destructive-foreground: hsl(60 9.1% 97.8%);
+        --destructive: hsl(0, 75%, 42%);
+        --destructive-foreground: hsl(60 9.1% 97.8%);
 
-		--border: hsl(20 5.9% 80%);
-		--input: hsl(20 5.9% 90%);
-		--ring: hsl(216, 54%, 55%);
+        --border: hsl(20 5.9% 80%);
+        --input: hsl(20 5.9% 90%);
+        --ring: hsl(216, 54%, 55%);
 
-		--radius: 0.5rem;
-	}
+        --radius: 0.5rem;
+    }
 
-	.theme-light-blue {
-		--background: hsl(216, 54%, 95%);
-	}
+    .theme-light-blue {
+        --background: hsl(216, 54%, 95%);
+    }
 
-	.theme-dark-blue {
-		--si-yellow: hsl(48, 100%, 49%);
-		--background: hsl(216, 54%, 55%);
-		--foreground: hsl(60 9.1% 97.8%);
+    .theme-dark-blue {
+        --si-yellow: hsl(48, 100%, 49%);
+        --background: hsl(216, 54%, 55%);
+        --foreground: hsl(60 9.1% 97.8%);
 
-		--card: hsl(0 0% 100%);
-		--card-foreground: hsl(20 14.3% 4.1%);
-
-		--popover: hsl(216, 54%, 55%);
-		--popover-foreground: hsl(60 9.1% 97.8%);
-
-		--primary: hsl(60 9.1% 97.8%);
-		--primary-foreground: hsl(216, 54%, 55%);
-
-		--secondary: hsl(8, 89%, 62%);
-		--secondary-foreground: hsl(240, 2%, 21%);
-
-		--muted: hsl(60 4.8% 95.9%);
-		--muted-foreground: hsl(25 5.3% 44.7%);
-
-		--accent: hsl(216, 54%, 60%);
-		--accent-foreground: hsl(60 9.1% 97.8%);
-
-		--destructive: hsl(0, 75%, 42%);
-		--destructive-foreground: hsl(60 9.1% 97.8%);
-
-		--border: hsl(20 5.9% 90%);
-		--input: hsl(20 5.9% 90%);
-		--ring: hsl(216, 54%, 55%);
-
-		--radius: 0.5rem;
-	}
+        --primary: hsl(48, 100%, 49%);
+        --primary-foreground: hsl(0, 0%, 20%);
+    }
 }
 
 @layer base {
-	body,
-	.theme-default,
-	.theme-dark-blue {
-		@apply bg-background text-foreground;
-	}
+    body,
+    .theme-default,
+    .theme-dark-blue {
+        @apply bg-background text-foreground;
+    }
 }