wip: step1 layout + config, need to work on styling (#33)

apps/frontend/src/api/apiClient.ts

@@ -12,7 +12,7 @@ export type DonationCreateRequest = {
   donationType: 'one_time' | 'recurring';
   dedicationMessage: string; // allow '' from ui
   showDedicationPublicly: boolean;
-  recurringInterval?: 'weekly' | 'bimonthly' | 'monthly' | 'quarterly';
+  recurringInterval?: 'weekly' | 'monthly' | 'yearly';
 };
 
 export type CreateDonationResponse = { id: string };

apps/frontend/src/containers/donations/DonationForm.tsx

@@ -30,6 +30,8 @@ export const DonationForm: React.FC<DonationFormProps> = ({
     dedicationMessage: '',
     showDedicationPublicly: false,
     recurringInterval: 'monthly',
+    isDedicated: false,
+    dedicationKind: null,
     cardNumber: '',
     cardExpiry: '',
     cardCvc: '',
@@ -265,8 +267,23 @@ export const DonationForm: React.FC<DonationFormProps> = ({
       onSubmit={(e) => e.preventDefault()}
       noValidate
     >
-      <h2>Make a Donation</h2>
-
+      <div className="progress-bar-container">
+        <div
+          className={
+            currentStep === 1 ? 'progress-bar-purple' : 'progress-bar-grey'
+          }
+        ></div>
+        <div
+          className={
+            currentStep === 2 ? 'progress-bar-purple' : 'progress-bar-grey'
+          }
+        ></div>
+        <div
+          className={
+            currentStep === 3 ? 'progress-bar-purple' : 'progress-bar-grey'
+          }
+        ></div>
+      </div>
       {submitError && (
         <div className="error-banner" role="alert" aria-live="assertive">
           {submitError}

apps/frontend/src/containers/donations/donation-form.config.ts

@@ -0,0 +1,31 @@
+import type { RecurringInterval } from './donation-form.types';
+
+export const DONATION_PRESET_AMOUNTS: number[] = [10, 30, 50, 100];
+
+export interface DonationRecurrenceOption {
+  donationType: 'one_time' | 'recurring';
+  label: string;
+  recurringInterval?: RecurringInterval;
+}
+
+export const DONATION_RECURRENCE_OPTIONS: DonationRecurrenceOption[] = [
+  {
+    donationType: 'one_time',
+    label: 'One Time',
+  },
+  {
+    donationType: 'recurring',
+    label: 'Weekly',
+    recurringInterval: 'weekly',
+  },
+  {
+    donationType: 'recurring',
+    label: 'Monthly',
+    recurringInterval: 'monthly',
+  },
+  {
+    donationType: 'recurring',
+    label: 'Yearly',
+    recurringInterval: 'yearly',
+  },
+];

apps/frontend/src/containers/donations/donation-form.types.ts

@@ -1,8 +1,6 @@
-export type RecurringInterval =
-  | 'weekly'
-  | 'bimonthly'
-  | 'monthly'
-  | 'quarterly';
+export type RecurringInterval = 'weekly' | 'monthly' | 'yearly';
+
+export type DedicationKind = 'honor' | 'memory';
 
 export type DonationStep = 1 | 2 | 3 | 4;
 
@@ -13,6 +11,8 @@ export interface DonationFormData {
   amount: string;
   donationType: 'one_time' | 'recurring';
   recurringInterval: RecurringInterval;
+  isDedicated?: boolean;
+  dedicationKind?: DedicationKind | null;
   isAnonymous: boolean;
   dedicationMessage: string;
   showDedicationPublicly: boolean;

apps/frontend/src/containers/donations/donations.css

@@ -1,7 +1,7 @@
 .donation-form {
-  max-width: 500px;
+  aspect-ratio: 7/10;
+  width: 100%;
   margin: 0 auto;
-  padding: 1.5rem;
   border: 1px solid #ddd;
   border-radius: 8px;
   background-color: #fff;
@@ -157,3 +157,116 @@
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+
+.recurrence-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.recurrence-option {
+  padding: 0.4rem 0.8rem;
+  border-radius: 9999px;
+  border: 1px solid #ccc;
+  background-color: #fff;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.recurrence-option.selected {
+  border-color: #2a7a73;
+  background-color: #e0f2f1;
+  font-weight: 600;
+}
+
+.recurrence-option:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.amount-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.amount-button {
+  flex: 1 1 20%;
+  padding: 0.5rem 0.75rem;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  background-color: #fff;
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.amount-button.selected {
+  border-color: #2a7a73;
+  background-color: #e0f2f1;
+  font-weight: 600;
+}
+
+.amount-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.amount-custom-row {
+  margin-top: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.amount-custom-label {
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.amount-custom-input {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.amount-custom-input input {
+  flex: 1;
+}
+
+.amount-currency-prefix,
+.amount-currency-suffix {
+  font-size: 0.85rem;
+  color: #555;
+}
+
+.progress-bar-container {
+  height: 2%;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 3%;
+}
+
+.progress-bar-grey {
+  width: 31%;
+  aspect-ratio: 14 / 1;
+  border-radius: 10px;
+  background: #b3b3b3;
+}
+
+.progress-bar-purple {
+  width: 31%;
+  aspect-ratio: 14 / 1;
+  border-radius: 10px;
+  background: #650d77;
+}