Add email subscription and footer to static layout

app/package.json

@@ -33,6 +33,7 @@
     "@tanstack/react-query-devtools": "^5.83.0",
     "dayjs": "^1.11.13",
     "framer-motion": "^12.23.24",
+    "jsonp": "^0.2.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-plotly.js": "^2.6.0",
@@ -49,6 +50,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/jsonp": "^0.2.3",
     "@types/node": "^22.15.11",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
@@ -76,4 +78,4 @@
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.3"
   }
-}
+}

app/src/components/Footer.tsx

@@ -7,18 +7,21 @@ import {
   IconBrandYoutube,
 } from '@tabler/icons-react';
 import { Anchor, Box, Container, Group, SimpleGrid, Stack, Text } from '@mantine/core';
+import type { CountryId } from '@/api/report';
 import PolicyEngineLogo from '@/assets/policyengine-logo.svg';
 import FooterSubscribe from '@/components/FooterSubscribe';
 import { colors, spacing, typography } from '@/designTokens';
+import { useCurrentCountry } from '@/hooks/useCurrentCountry';
 
-const CONTACT_LINKS = {
+const getContactLinks = (countryId: CountryId) => ({
   email: 'mailto:hello@policyengine.org',
-  about: '#',
-  donate: '#',
-  privacy: '#',
-  terms: '#',
-  developerTools: '#',
-};
+  about: `/${countryId}/team`,
+  donate: `/${countryId}/donate`,
+  privacy: `/${countryId}/privacy`,
+  terms: `/${countryId}/terms`,
+  // TODO: Add developer-tools page once it's built out
+  // developerTools: `/${countryId}/developer-tools`,
+});
 
 const SOCIAL_LINKS = [
   { icon: IconBrandTwitter, href: 'https://twitter.com/ThePolicyEngine' },
@@ -30,6 +33,8 @@ const SOCIAL_LINKS = [
 ];
 
 export default function Footer() {
+  const countryId = useCurrentCountry();
+  const CONTACT_LINKS = getContactLinks(countryId);
   return (
     <Box
       component="footer"
@@ -86,8 +91,9 @@ export default function Footer() {
                 underline="never"
                 ff={typography.fontFamily.primary}
               >
-                Terms and conditions
+                Terms and Conditions
               </Anchor>
+              {/* TODO: Uncomment when developer-tools page is built
               <Anchor
                 href={CONTACT_LINKS.developerTools}
                 c={colors.white}
@@ -97,6 +103,7 @@ export default function Footer() {
               >
                 Developer tools
               </Anchor>
+              */}
             </Stack>
 
             <Stack gap="md">

app/src/components/FooterSubscribe.tsx

@@ -1,13 +1,41 @@
 import { useState } from 'react';
 import { Button, Stack, Text, TextInput } from '@mantine/core';
 import { colors, typography } from '@/designTokens';
+import { submitToMailchimp } from '@/utils/mailchimpSubscription';
 
 export default function FooterSubscribe() {
   const [email, setEmail] = useState('');
+  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+  const [message, setMessage] = useState('');
 
-  const handleSubscribe = () => {
-    // Functionality to handle subscription to be added
-    // alert(`Subscribe button clicked with email: ${email}`);
+  const handleSubscribe = async () => {
+    if (!email) {
+      setStatus('error');
+      setMessage('Please enter a valid email address.');
+      return;
+    }
+
+    setStatus('loading');
+    setMessage('');
+
+    try {
+      const result = await submitToMailchimp(email);
+      if (result.isSuccessful) {
+        setStatus('success');
+        setMessage(result.message);
+        setEmail('');
+      } else {
+        setStatus('error');
+        setMessage(result.message);
+      }
+    } catch (error) {
+      setStatus('error');
+      setMessage(
+        error instanceof Error
+          ? error.message
+          : 'There was an issue processing your subscription; please try again later.'
+      );
+    }
   };
 
   return (
@@ -28,15 +56,28 @@ export default function FooterSubscribe() {
           styles={{
             input: { backgroundColor: colors.white, flex: 1 },
           }}
+          disabled={status === 'loading'}
         />
         <Button
           color={colors.primary[500]}
           size="md"
           ff={typography.fontFamily.primary}
           onClick={handleSubscribe}
+          loading={status === 'loading'}
+          disabled={status === 'loading'}
         >
           SUBSCRIBE
         </Button>
+        {message && (
+          <Text
+            fz="sm"
+            c={status === 'success' ? colors.success : colors.error}
+            ff={typography.fontFamily.primary}
+            ta="center"
+          >
+            {message}
+          </Text>
+        )}
       </Stack>
     </Stack>
   );

app/src/components/StaticLayout.tsx

@@ -1,11 +1,13 @@
 import { Outlet } from 'react-router-dom';
+import Footer from '@/components/Footer';
 import HeaderNavigation from '@/components/shared/HomeHeader';
 
 export default function StaticLayout() {
   return (
     <>
       <HeaderNavigation />
       <Outlet />
+      <Footer />
     </>
   );
 }

app/src/tests/unit/components/FooterSubscribe.test.tsx

@@ -0,0 +1,154 @@
+import { render, screen, userEvent } from '@test-utils';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+import FooterSubscribe from '@/components/FooterSubscribe';
+import { submitToMailchimp } from '@/utils/mailchimpSubscription';
+
+// Mock the mailchimp subscription utility
+vi.mock('@/utils/mailchimpSubscription', () => ({
+  submitToMailchimp: vi.fn(),
+}));
+
+describe('FooterSubscribe', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('given component renders then displays title and input', () => {
+    // When
+    render(<FooterSubscribe />);
+
+    // Then
+    expect(screen.getByText('Subscribe to PolicyEngine')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Enter your email address')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /subscribe/i })).toBeInTheDocument();
+  });
+
+  test('given user enters email and clicks subscribe then submits to mailchimp', async () => {
+    // Given
+    const user = userEvent.setup();
+    vi.mocked(submitToMailchimp).mockResolvedValue({
+      isSuccessful: true,
+      message: 'Thank you for subscribing!',
+    });
+
+    render(<FooterSubscribe />);
+
+    // When
+    await user.type(screen.getByPlaceholderText('Enter your email address'), 'test@example.com');
+    await user.click(screen.getByRole('button', { name: /subscribe/i }));
+
+    // Then
+    expect(submitToMailchimp).toHaveBeenCalledWith('test@example.com');
+  });
+
+  test('given successful subscription then displays success message', async () => {
+    // Given
+    const user = userEvent.setup();
+    vi.mocked(submitToMailchimp).mockResolvedValue({
+      isSuccessful: true,
+      message: 'Thank you for subscribing!',
+    });
+
+    render(<FooterSubscribe />);
+
+    // When
+    await user.type(screen.getByPlaceholderText('Enter your email address'), 'test@example.com');
+    await user.click(screen.getByRole('button', { name: /subscribe/i }));
+
+    // Then
+    expect(await screen.findByText('Thank you for subscribing!')).toBeInTheDocument();
+  });
+
+  test('given failed subscription then displays error message', async () => {
+    // Given
+    const user = userEvent.setup();
+    vi.mocked(submitToMailchimp).mockResolvedValue({
+      isSuccessful: false,
+      message: 'This email is already subscribed.',
+    });
+
+    render(<FooterSubscribe />);
+
+    // When
+    await user.type(screen.getByPlaceholderText('Enter your email address'), 'test@example.com');
+    await user.click(screen.getByRole('button', { name: /subscribe/i }));
+
+    // Then
+    expect(await screen.findByText('This email is already subscribed.')).toBeInTheDocument();
+  });
+
+  test('given network error then displays error message', async () => {
+    // Given
+    const user = userEvent.setup();
+    vi.mocked(submitToMailchimp).mockRejectedValue(
+      new Error('There was an issue processing your subscription; please try again later.')
+    );
+
+    render(<FooterSubscribe />);
+
+    // When
+    await user.type(screen.getByPlaceholderText('Enter your email address'), 'test@example.com');
+    await user.click(screen.getByRole('button', { name: /subscribe/i }));
+
+    // Then
+    expect(
+      await screen.findByText(
+        'There was an issue processing your subscription; please try again later.'
+      )
+    ).toBeInTheDocument();
+  });
+
+  test('given empty email then displays validation error', async () => {
+    // Given
+    const user = userEvent.setup();
+    render(<FooterSubscribe />);
+
+    // When
+    await user.click(screen.getByRole('button', { name: /subscribe/i }));
+
+    // Then
+    expect(await screen.findByText('Please enter a valid email address.')).toBeInTheDocument();
+    expect(submitToMailchimp).not.toHaveBeenCalled();
+  });
+
+  test('given successful subscription then clears email input', async () => {
+    // Given
+    const user = userEvent.setup();
+    vi.mocked(submitToMailchimp).mockResolvedValue({
+      isSuccessful: true,
+      message: 'Thank you for subscribing!',
+    });
+
+    render(<FooterSubscribe />);
+    const input = screen.getByPlaceholderText('Enter your email address') as HTMLInputElement;
+
+    // When
+    await user.type(input, 'test@example.com');
+    await user.click(screen.getByRole('button', { name: /subscribe/i }));
+
+    // Then
+    await screen.findByText('Thank you for subscribing!');
+    expect(input.value).toBe('');
+  });
+
+  test('given loading state then disables input and button', async () => {
+    // Given
+    const user = userEvent.setup();
+    vi.mocked(submitToMailchimp).mockImplementation(
+      () => new Promise((resolve) => setTimeout(resolve, 1000))
+    );
+
+    render(<FooterSubscribe />);
+
+    // When
+    await user.type(screen.getByPlaceholderText('Enter your email address'), 'test@example.com');
+    const button = screen.getByRole('button', { name: /subscribe/i });
+    const input = screen.getByPlaceholderText('Enter your email address');
+
+    await user.click(button);
+
+    // Then
+    expect(button).toBeDisabled();
+    expect(input).toBeDisabled();
+  });
+});