Gr donation summary fee toggle

apps/frontend/project.json

@@ -10,7 +10,7 @@
       "defaultConfiguration": "production",
       "options": {
         "outputPath": "dist/apps/frontend",
-        "configFile": "apps/frontend/vite.config.ts"
+        "configFile": "apps/frontend/vite.config.mts"
       },
       "configurations": {
         "development": {

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

@@ -4,6 +4,7 @@ import apiClient, {
 } from '../../api/apiClient';
 import React, { useState, FormEvent } from 'react';
 import './donations.css';
+import { DonationSummary } from './DonationSummary';
 
 type RecurringInterval = 'weekly' | 'bimonthly' | 'monthly' | 'quarterly';
 
@@ -377,6 +378,7 @@ export const DonationForm: React.FC<DonationFormProps> = ({
           Show dedication message publicly
         </label>
       </div>
+      <DonationSummary baseAmount={10} />
 
       <button type="submit" className="submit-button" disabled={isSubmitting}>
         {isSubmitting ? 'Processing...' : 'Submit Donation'}

apps/frontend/src/containers/donations/DonationSummary.spec.tsx

@@ -0,0 +1,93 @@
+/** @vitest-environment jsdom */
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { DonationSummary } from './DonationSummary';
+import { DONATION_FEE_RATE, DONATION_FIXED_FEE } from './DonationSummary';
+
+describe('DonationSummary Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  // unit tests for fee calculation
+
+  // fee calculation with default values
+  it('calculates the fee with default values', () => {
+    const baseAmount = Math.random() * 10;
+    const feeTotal = (
+      (baseAmount * DONATION_FEE_RATE) / 100 +
+      DONATION_FIXED_FEE
+    ).toFixed(2);
+    render(<DonationSummary baseAmount={baseAmount} />);
+    expect(
+      screen.queryByText(
+        new RegExp(
+          `Add \\$${feeTotal} to cover transaction fees and tip the fundraising platform to help keep it`,
+        ),
+      ),
+    ).not.toBeNull();
+  });
+
+  // fee calculation with custom values
+  it('calculates the fee with default values', () => {
+    const baseAmount = Math.random() * 10;
+    const feeRate = Math.random() * 10;
+    const fixedFee = Math.random() * 10;
+    const feeTotal = ((baseAmount * feeRate) / 100 + fixedFee).toFixed(2);
+    render(
+      <DonationSummary
+        baseAmount={baseAmount}
+        feeRate={feeRate}
+        fixedFee={fixedFee}
+      />,
+    );
+    expect(
+      screen.queryByText(
+        new RegExp(
+          `Add \\$${feeTotal} to cover transaction fees and tip the fundraising platform to help keep it`,
+        ),
+      ),
+    ).not.toBeNull();
+  });
+
+  // donation total calculation does not include fee when initially rendered
+  it('calculates total donation amount without fee when initially rendered', async () => {
+    const baseAmount = Math.random() * 10;
+
+    // initial rendering does not include fee in total donation calculation
+    render(<DonationSummary baseAmount={baseAmount} />);
+    expect(
+      screen.queryByText(new RegExp(`\\$${baseAmount.toFixed(2)}`)),
+    ).not.toBeNull();
+  });
+
+  // donation total calculation includes fee when toggle activated
+  it('calculates total donation amount with fee when toggle activated', async () => {
+    const baseAmount = Math.random() * 10;
+    const feeTotal =
+      (baseAmount * DONATION_FEE_RATE) / 100 + DONATION_FIXED_FEE;
+    render(<DonationSummary baseAmount={baseAmount} />);
+
+    // activate fee toggle
+    const feeToggle = screen.getAllByTestId('fee-toggle');
+    fireEvent.click(feeToggle[0]);
+
+    // donation total calculation should include fee
+    expect(
+      screen.queryByText(
+        new RegExp(`\\$${(baseAmount + feeTotal).toFixed(2)}`),
+      ),
+    ).not.toBeNull();
+
+    fireEvent.click(feeToggle[0]);
+
+    // donation total calculation should not include fee
+    expect(
+      screen.queryByText(new RegExp(`\\$${baseAmount.toFixed(2)}`)),
+    ).not.toBeNull();
+  });
+});

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

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import './donations.css';
+
+interface DonationSummaryData {
+  baseAmount: number;
+  feeRate?: number;
+  fixedFee?: number;
+}
+
+export const DONATION_FEE_RATE = 2.9;
+export const DONATION_FIXED_FEE = 0.3;
+
+export const DonationSummary: React.FC<DonationSummaryData> = ({
+  baseAmount,
+  feeRate,
+  fixedFee,
+}) => {
+  const [feeApplied, setFeeApplied] = useState<boolean>(false);
+  const [amount, setAmount] = useState<number>(baseAmount);
+
+  const rate = feeRate ?? DONATION_FEE_RATE;
+  const fee = fixedFee ?? DONATION_FIXED_FEE;
+  const feeTotal = (baseAmount * rate) / 100 + fee;
+
+  return (
+    <div className="donation-summary">
+      <div style={{ fontSize: '1rem' }}>
+        <b>Total:</b> ${amount.toFixed(2)}
+      </div>
+      <div
+        data-testid="fee-toggle"
+        className="toggle-container"
+        onClick={() => {
+          if (feeApplied) {
+            setAmount(baseAmount);
+          }
+          // fee is applied
+          else {
+            setAmount(baseAmount + feeTotal);
+          }
+          setFeeApplied(!feeApplied);
+        }}
+      >
+        <div className={`toggle-slider ${feeApplied ? 'on' : 'off'}`}>
+          <div className="toggle-circle"></div>
+        </div>
+        <span className="toggle-label">
+          Add ${feeTotal.toFixed(2)} to cover transaction fees and tip the
+          fundraising platform to help keep it{' '}
+          <a
+            style={{ color: 'black' }}
+            target="_blank"
+            href="https://www.givelively.org/free#what-it-means"
+            rel="noreferrer"
+          >
+            free for nonprofits.
+          </a>
+        </span>
+      </div>
+    </div>
+  );
+};

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

@@ -89,3 +89,71 @@
 .required {
   color: #d93025;
 }
+
+.toggle-container {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  cursor: pointer;
+  user-select: none;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.toggle-slider {
+  position: relative;
+  flex-shrink: 0;
+  width: 30px;
+  height: 18px;
+  background-color: #ccc;
+  border-radius: 9999px;
+  transition:
+    background-color 0.3s ease,
+    transform 0.3s ease;
+  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
+}
+
+.toggle-slider.on {
+  background-color: #2a7a73;
+}
+
+.toggle-circle {
+  position: absolute;
+  top: 50%;
+  left: 4px;
+  width: 40%;
+  height: 70%;
+  background-color: white;
+  border-radius: 50%;
+  transform: translateY(-50%);
+  transition:
+    left 0.3s ease,
+    transform 0.3s ease;
+}
+
+.toggle-slider.on .toggle-circle {
+  left: 55%;
+}
+
+.toggle-label {
+  font-size: 0.8rem;
+  color: #333;
+  line-height: 1.4;
+  text-align: left;
+  max-width: 320px;
+}
+
+.donation-summary {
+  font-size: 14px;
+  margin: 0 auto;
+  font-family: sans-serif;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  text-align: center;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 0.75rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}

apps/frontend/src/containers/root.tsx

@@ -1,5 +1,19 @@
+import { DonationSummary } from '@containers/donations/DonationSummary';
+import { DonationForm } from './donations/DonationForm';
+
 const Root: React.FC = () => {
-  return <>Welcome to scaffolding!</>;
+  return (
+    <>
+      <DonationForm
+        onSuccess={function (donationId: string): void {
+          throw new Error('Function not implemented.');
+        }}
+        onError={function (error: Error): void {
+          throw new Error('Function not implemented.');
+        }}
+      />
+    </>
+  );
 };
 
 export default Root;

package.json

@@ -71,6 +71,7 @@
     "@nx/react": "22.0.2",
     "@nx/vite": "22.0.2",
     "@nx/webpack": "22.0.2",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "16.1.0",
     "@types/jest": "30.0.0",
     "@types/node": "^20.19.0",