From e6fbc136a7ce66b71cc373b59491ef61c3144dca Mon Sep 17 00:00:00 2001
From: gscott04 <gilliangscott@gmail.com>
Date: Mon, 1 Dec 2025 18:51:24 -0500
Subject: [PATCH 1/2] wip: step1 layout + config, need to work on styling

---
 apps/frontend/src/api/apiClient.ts            |   2 +-
 .../src/containers/donations/DonationForm.tsx |   2 +
 .../donations/donation-form.config.ts         |  31 ++
 .../donations/donation-form.types.ts          |  10 +-
 .../src/containers/donations/donations.css    |  89 +++++
 .../donations/steps/Step1Amount.tsx           | 329 +++++++++++++-----
 6 files changed, 366 insertions(+), 97 deletions(-)
 create mode 100644 apps/frontend/src/containers/donations/donation-form.config.ts

diff --git a/apps/frontend/src/api/apiClient.ts b/apps/frontend/src/api/apiClient.ts
index ad621f0..3d9e59e 100644
--- a/apps/frontend/src/api/apiClient.ts
+++ b/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 };
diff --git a/apps/frontend/src/containers/donations/DonationForm.tsx b/apps/frontend/src/containers/donations/DonationForm.tsx
index ce10f8d..76070a2 100644
--- a/apps/frontend/src/containers/donations/DonationForm.tsx
+++ b/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: '',
diff --git a/apps/frontend/src/containers/donations/donation-form.config.ts b/apps/frontend/src/containers/donations/donation-form.config.ts
new file mode 100644
index 0000000..77faf39
--- /dev/null
+++ b/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',
+  },
+];
diff --git a/apps/frontend/src/containers/donations/donation-form.types.ts b/apps/frontend/src/containers/donations/donation-form.types.ts
index d8ff930..74690a1 100644
--- a/apps/frontend/src/containers/donations/donation-form.types.ts
+++ b/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;
diff --git a/apps/frontend/src/containers/donations/donations.css b/apps/frontend/src/containers/donations/donations.css
index ec6c78e..7e132c0 100644
--- a/apps/frontend/src/containers/donations/donations.css
+++ b/apps/frontend/src/containers/donations/donations.css
@@ -157,3 +157,92 @@
   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;
+}
diff --git a/apps/frontend/src/containers/donations/steps/Step1Amount.tsx b/apps/frontend/src/containers/donations/steps/Step1Amount.tsx
index 40ba6e1..b7caf9e 100644
--- a/apps/frontend/src/containers/donations/steps/Step1Amount.tsx
+++ b/apps/frontend/src/containers/donations/steps/Step1Amount.tsx
@@ -1,5 +1,15 @@
 import React from 'react';
-import type { DonationFormData, FormErrors } from '../donation-form.types';
+import type {
+  DonationFormData,
+  FormErrors,
+  DedicationKind,
+} from '../donation-form.types';
+
+import {
+  DONATION_PRESET_AMOUNTS,
+  DONATION_RECURRENCE_OPTIONS,
+  type DonationRecurrenceOption,
+} from '../donation-form.config';
 
 interface Step1AmountProps {
   formData: DonationFormData;
@@ -12,34 +22,154 @@ interface Step1AmountProps {
   ) => void;
 }
 
+// helpers to synthesize events so we can reuse DonationForm.handleInputChange
+
+const triggerTextChange = (
+  onChange: Step1AmountProps['onChange'],
+  name: string,
+  value: string,
+) => {
+  onChange({
+    target: {
+      name,
+      value,
+      type: 'text',
+    },
+  } as React.ChangeEvent<HTMLInputElement>);
+};
+
+const triggerCheckboxToggle = (
+  onChange: Step1AmountProps['onChange'],
+  name: string,
+  checked: boolean,
+) => {
+  onChange({
+    target: {
+      name,
+      type: 'checkbox',
+      checked,
+      value: checked ? 'on' : '',
+    },
+  } as React.ChangeEvent<HTMLInputElement>);
+};
+
 export const Step1Amount: React.FC<Step1AmountProps> = ({
   formData,
   errors,
   isSubmitting,
   onChange,
 }) => {
+  // donation amount presets
+  const handlePresetAmountClick = (amount: number) => {
+    triggerTextChange(onChange, 'amount', String(amount));
+  };
+
+  const isAmountSelected = (amount: number) =>
+    formData.amount === String(amount);
+
+  // donation recurrence btns
+  const handleRecurrenceClick = (option: DonationRecurrenceOption) => {
+    // always set donationType
+    triggerTextChange(onChange, 'donationType', option.donationType);
+
+    // for recurring options, also set the recurringInterval field
+    if (option.donationType === 'recurring' && option.recurringInterval) {
+      triggerTextChange(
+        onChange,
+        'recurringInterval',
+        option.recurringInterval,
+      );
+    }
+  };
+
+  const isRecurrenceSelected = (option: DonationRecurrenceOption) => {
+    if (option.donationType === 'one_time') {
+      return formData.donationType === 'one_time';
+    }
+    return (
+      formData.donationType === 'recurring' &&
+      option.recurringInterval === formData.recurringInterval
+    );
+  };
+
+  // dedication btns
+  const handleDedicationKindClick = (kind: DedicationKind) => {
+    triggerTextChange(onChange, 'dedicationKind', kind);
+  };
+
+  const isDedicationKindSelected = (kind: DedicationKind) =>
+    formData.dedicationKind === kind;
+
   return (
     <section>
-      <h3>Step 1: Choose amount</h3>
+      <h3>Step 1: Choose amount &amp; frequency</h3>
+
+      <div className="form-group">
+        <label>Donation Recurrence</label>
+        <div className="recurrence-options">
+          {DONATION_RECURRENCE_OPTIONS.map((option) => (
+            <button
+              key={option.label}
+              type="button"
+              className={
+                'recurrence-option' +
+                (isRecurrenceSelected(option) ? ' selected' : '')
+              }
+              onClick={() => handleRecurrenceClick(option)}
+              disabled={isSubmitting}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+        {errors.recurringInterval && (
+          <span className="error-message">{errors.recurringInterval}</span>
+        )}
+      </div>
 
       <div className="form-group">
         <label htmlFor="amount">
           Donation Amount <span className="required">*</span>
         </label>
-        <input
-          type="text"
-          id="amount"
-          name="amount"
-          inputMode="decimal"
-          pattern="\\d+(\\.\\d{1,2})?"
-          placeholder="0.00"
-          value={formData.amount}
-          onChange={onChange}
-          className={errors.amount ? 'error' : ''}
-          disabled={isSubmitting}
-          aria-invalid={!!errors.amount}
-          aria-describedby={errors.amount ? 'amount-error' : undefined}
-        />
+
+        <div className="amount-grid">
+          {DONATION_PRESET_AMOUNTS.map((amount) => (
+            <button
+              key={amount}
+              type="button"
+              className={
+                'amount-button' + (isAmountSelected(amount) ? ' selected' : '')
+              }
+              onClick={() => handlePresetAmountClick(amount)}
+              disabled={isSubmitting}
+            >
+              ${amount}
+            </button>
+          ))}
+        </div>
+
+        <div className="amount-custom-row">
+          <span className="amount-custom-label">Custom Amount</span>
+          <div className="amount-custom-input">
+            <span className="amount-currency-prefix">$</span>
+            <input
+              type="text"
+              id="amount"
+              name="amount"
+              inputMode="decimal"
+              pattern="\\d+(\\.\\d{1,2})?"
+              placeholder="0.00"
+              value={formData.amount}
+              onChange={onChange}
+              className={errors.amount ? 'error' : ''}
+              disabled={isSubmitting}
+              aria-invalid={!!errors.amount}
+              aria-describedby={errors.amount ? 'amount-error' : undefined}
+            />
+            <span className="amount-currency-suffix">USD</span>
+          </div>
+        </div>
+
         {errors.amount && (
           <span id="amount-error" className="error-message">
             {errors.amount}
@@ -48,88 +178,105 @@ export const Step1Amount: React.FC<Step1AmountProps> = ({
       </div>
 
       <div className="form-group">
-        <label htmlFor="donationType">
-          Donation Type <span className="required">*</span>
-        </label>
-        <select
-          id="donationType"
-          name="donationType"
-          value={formData.donationType}
-          onChange={onChange}
-          disabled={isSubmitting}
+        <label>Donation Anonymity</label>
+        <div
+          className="toggle-container"
+          role="switch"
+          aria-checked={formData.isAnonymous}
+          onClick={() =>
+            triggerCheckboxToggle(
+              onChange,
+              'isAnonymous',
+              !formData.isAnonymous,
+            )
+          }
         >
-          <option value="one_time">One-time</option>
-          <option value="recurring">Recurring</option>
-        </select>
-      </div>
-
-      {formData.donationType === 'recurring' && (
-        <div className="form-group">
-          <label htmlFor="recurringInterval">
-            Recurring Interval <span className="required">*</span>
-          </label>
-          <select
-            id="recurringInterval"
-            name="recurringInterval"
-            value={formData.recurringInterval}
-            onChange={onChange}
-            className={errors.recurringInterval ? 'error' : ''}
-            disabled={isSubmitting}
-            aria-invalid={!!errors.recurringInterval}
-            aria-describedby={
-              errors.recurringInterval ? 'recurringInterval-error' : undefined
-            }
+          <div
+            className={'toggle-slider ' + (formData.isAnonymous ? 'on' : 'off')}
           >
-            <option value="weekly">Weekly</option>
-            <option value="bimonthly">Bi-monthly</option>
-            <option value="monthly">Monthly</option>
-            <option value="quarterly">Quarterly</option>
-          </select>
-          {errors.recurringInterval && (
-            <span id="recurringInterval-error" className="error-message">
-              {errors.recurringInterval}
-            </span>
-          )}
+            <div className="toggle-circle" />
+          </div>
+          <span className="toggle-label">
+            Display name as anonymous when publicly shown
+          </span>
         </div>
-      )}
-
-      <div className="form-group checkbox-group">
-        <label>
-          <input
-            type="checkbox"
-            name="isAnonymous"
-            checked={formData.isAnonymous}
-            onChange={onChange}
-            disabled={isSubmitting}
-          />
-          Make this donation anonymous
-        </label>
       </div>
 
       <div className="form-group">
-        <label htmlFor="dedicationMessage">Dedication Message (optional)</label>
-        <textarea
-          id="dedicationMessage"
-          name="dedicationMessage"
-          value={formData.dedicationMessage}
-          onChange={onChange}
-          rows={4}
-          disabled={isSubmitting}
-          placeholder="Add a special message or dedication..."
-        />
-      </div>
+        <label>Dedicate This Donation</label>
+        <div
+          className="toggle-container"
+          role="switch"
+          aria-checked={!!formData.isDedicated}
+          onClick={() =>
+            triggerCheckboxToggle(
+              onChange,
+              'isDedicated',
+              !formData.isDedicated,
+            )
+          }
+        >
+          <div
+            className={'toggle-slider ' + (formData.isDedicated ? 'on' : 'off')}
+          >
+            <div className="toggle-circle" />
+          </div>
+        </div>
 
-      <div className="form-group checkbox-group">
-        <label>
-          <input
-            type="checkbox"
-            name="showDedicationPublicly"
-            checked={formData.showDedicationPublicly}
-            onChange={onChange}
-            disabled={isSubmitting}
-          />
-          Show dedication message publicly
-        </label>
+        {formData.isDedicated && (
+          <>
+            <div className="recurrence-options">
+              <button
+                type="button"
+                className={
+                  'recurrence-option' +
+                  (isDedicationKindSelected('honor') ? ' selected' : '')
+                }
+                onClick={() => handleDedicationKindClick('honor')}
+                disabled={isSubmitting}
+              >
+                In Honor Of
+              </button>
+              <button
+                type="button"
+                className={
+                  'recurrence-option' +
+                  (isDedicationKindSelected('memory') ? ' selected' : '')
+                }
+                onClick={() => handleDedicationKindClick('memory')}
+                disabled={isSubmitting}
+              >
+                In Memory Of
+              </button>
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="dedicationMessage">Write a message..</label>
+              <textarea
+                id="dedicationMessage"
+                name="dedicationMessage"
+                value={formData.dedicationMessage}
+                onChange={onChange}
+                rows={4}
+                disabled={isSubmitting}
+                placeholder="Write a message.."
+              />
+            </div>
+
+            <div className="form-group checkbox-group">
+              <label>
+                <input
+                  type="checkbox"
+                  name="showDedicationPublicly"
+                  checked={formData.showDedicationPublicly}
+                  onChange={onChange}
+                  disabled={isSubmitting}
+                />
+                Show dedication message publicly
+              </label>
+            </div>
+          </>
+        )}
       </div>
     </section>
   );

From 6eb0c584140aede453e99850f3c6d7720b92478c Mon Sep 17 00:00:00 2001
From: Gauri Rajesh <rajesh.ga@northeastern.edu>
Date: Thu, 4 Dec 2025 19:17:03 -0500
Subject: [PATCH 2/2] donation form global styles

---
 .../src/containers/donations/DonationForm.tsx | 19 +++++++++++--
 .../src/containers/donations/donations.css    | 28 +++++++++++++++++--
 apps/frontend/src/containers/root.tsx         | 28 ++++++++++++-------
 3 files changed, 61 insertions(+), 14 deletions(-)

diff --git a/apps/frontend/src/containers/donations/DonationForm.tsx b/apps/frontend/src/containers/donations/DonationForm.tsx
index 76070a2..f7e1df3 100644
--- a/apps/frontend/src/containers/donations/DonationForm.tsx
+++ b/apps/frontend/src/containers/donations/DonationForm.tsx
@@ -267,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}
diff --git a/apps/frontend/src/containers/donations/donations.css b/apps/frontend/src/containers/donations/donations.css
index 7e132c0..4054872 100644
--- a/apps/frontend/src/containers/donations/donations.css
+++ b/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;
@@ -246,3 +246,27 @@
   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;
+}
diff --git a/apps/frontend/src/containers/root.tsx b/apps/frontend/src/containers/root.tsx
index 1f62113..e4bd39e 100644
--- a/apps/frontend/src/containers/root.tsx
+++ b/apps/frontend/src/containers/root.tsx
@@ -3,16 +3,24 @@ import { DonationForm } from './donations/DonationForm';
 
 const Root: React.FC = () => {
   return (
-    <>
-      <DonationForm
-        onSuccess={function (donationId: string): void {
-          throw new Error('Function not implemented.');
-        }}
-        onError={function (error: Error): void {
-          throw new Error('Function not implemented.');
-        }}
-      />
-    </>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+      }}
+    >
+      <div style={{ width: '50%' }}>
+        <DonationForm
+          onSuccess={function (donationId: string): void {
+            throw new Error('Function not implemented.');
+          }}
+          onError={function (error: Error): void {
+            throw new Error('Function not implemented.');
+          }}
+        />
+      </div>
+    </div>
   );
 };