Merge pull request #396 from PolicyEngine/PavelMakarchuk/issue395

Migrate RI CTC Calculator to App V2

Author: MaxGhenis

app/src/Router.tsx

@@ -14,13 +14,15 @@ import PopulationsPage from './pages/Populations.page';
 import PrivacyPage from './pages/Privacy.page';
 import ReportOutputPage from './pages/ReportOutput.page';
 import ReportsPage from './pages/Reports.page';
+import RICTCCalculatorPage from './pages/RICTCCalculator.page';
 import SimulationsPage from './pages/Simulations.page';
 import SupportersPage from './pages/Supporters.page';
 import TeamPage from './pages/Team.page';
 import TermsPage from './pages/Terms.page';
 import { CountryGuard } from './routing/guards/CountryGuard';
 import { MetadataGuard } from './routing/guards/MetadataGuard';
 import { MetadataLazyLoader } from './routing/guards/MetadataLazyLoader';
+import { USOnlyGuard } from './routing/guards/USOnlyGuard';
 import { RedirectToCountry } from './routing/RedirectToCountry';
 import { RedirectToLegacy } from './routing/RedirectToLegacy';
 
@@ -150,6 +152,21 @@ const router = createBrowserRouter(
             },
           ],
         },
+        // US-only routes
+        {
+          element: <USOnlyGuard />,
+          children: [
+            {
+              element: <StaticLayout />,
+              children: [
+                {
+                  path: 'rhode-island-ctc-calculator',
+                  element: <RICTCCalculatorPage />,
+                },
+              ],
+            },
+          ],
+        },
         // Legacy routes - redirect to legacy.policyengine.org
         {
           children: [
@@ -179,10 +196,6 @@ const router = createBrowserRouter(
               path: 'two-child-limit-comparison',
               element: <RedirectToLegacy />,
             },
-            {
-              path: 'rhode-island-ctc-calculator',
-              element: <RedirectToLegacy />,
-            },
             // Country-specific legacy routes (must come before :appName catch-all)
             {
               path: 'cec',

app/src/components/IframeContent.tsx

@@ -0,0 +1,112 @@
+import { useState } from 'react';
+
+interface IframeContentProps {
+  url: string;
+  title?: string;
+}
+
+export default function IframeContent({ url, title = 'Embedded content' }: IframeContentProps) {
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+
+  return (
+    <div style={{ position: 'relative', height: '100%' }}>
+      {isLoading && (
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: '#f9fafb',
+            zIndex: 1,
+          }}
+        >
+          <div style={{ textAlign: 'center', padding: '2rem' }}>
+            <div
+              style={{
+                width: '48px',
+                height: '48px',
+                border: '4px solid #e5e7eb',
+                borderTop: '4px solid #2c6496',
+                borderRadius: '50%',
+                margin: '0 auto 1rem',
+                animation: 'spin 1s linear infinite',
+              }}
+            />
+            <p style={{ color: '#6b7280', fontSize: '14px' }}>Loading calculator...</p>
+          </div>
+        </div>
+      )}
+      {hasError && (
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: '#f9fafb',
+            zIndex: 1,
+          }}
+        >
+          <div
+            style={{
+              textAlign: 'center',
+              padding: '2rem',
+              maxWidth: '500px',
+            }}
+          >
+            <h2 style={{ color: '#1f2937', marginBottom: '1rem' }}>Unable to load calculator</h2>
+            <p style={{ color: '#6b7280', marginBottom: '1rem' }}>
+              The embedded calculator could not be loaded. You can try opening it directly:
+            </p>
+            <a
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{
+                display: 'inline-block',
+                padding: '0.5rem 1rem',
+                backgroundColor: '#2c6496',
+                color: 'white',
+                textDecoration: 'none',
+                borderRadius: '4px',
+              }}
+            >
+              Open Calculator in New Tab
+            </a>
+          </div>
+        </div>
+      )}
+      <iframe
+        src={url}
+        style={{
+          width: '100%',
+          height: 'calc(100vh - var(--header-height, 58px))',
+          border: 'none',
+          display: 'block',
+        }}
+        title={title}
+        onLoad={() => setIsLoading(false)}
+        onError={() => {
+          setIsLoading(false);
+          setHasError(true);
+        }}
+      />
+      <style>{`
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+      `}</style>
+    </div>
+  );
+}

app/src/pages/RICTCCalculator.page.tsx

@@ -0,0 +1,10 @@
+import IframeContent from '@/components/IframeContent';
+
+export default function RICTCCalculatorPage() {
+  return (
+    <IframeContent
+      url="https://ri-ctc-calculator-policy-engine.vercel.app/"
+      title="Rhode Island Child Tax Credit Calculator"
+    />
+  );
+}

app/src/routing/guards/USOnlyGuard.tsx

@@ -0,0 +1,15 @@
+import { Navigate, Outlet, useParams } from 'react-router-dom';
+
+/**
+ * Guard component that only allows access for US country routes.
+ * Redirects to root for any other country.
+ */
+export function USOnlyGuard() {
+  const { countryId } = useParams<{ countryId: string }>();
+
+  if (countryId !== 'us') {
+    return <Navigate to="/" replace />;
+  }
+
+  return <Outlet />;
+}