...
;
+}
+```
+
+**After:**
+```typescript
+import { MyDataItem } from '../types/domain';
+
+interface MyComponentProps {
+ items: MyDataItem[];
+ onSelect: (item: MyDataItem) => void;
+ isEnabled?: boolean;
+}
+
+export function MyComponent({ items, onSelect, isEnabled = true }: MyComponentProps) {
+ const [data, setData] = useState...
;
+}
+```
+
+---
+
+## Common Patterns and Solutions
+
+### Pattern 1: GraphQL Subscriptions
+
+**Problem:** Subscription types are complex
+**Solution:**
+```typescript
+import { GraphQLResult } from '@aws-amplify/api';
+
+interface SubscriptionEvent...
;
+};
+```
+
+**Alternative syntax (preferred for complex components):**
+```typescript
+export function MyComponent({ event, track, onSelect, isLoading = false }: MyComponentProps) {
+ // Component implementation
+ return ...
;
+}
+```
+
+---
+
+### 2. useState Hook
+
+```typescript
+// Simple types
+const [name, setName] = useStateBrowser Detection Test Page
+ +
+
+
+ Current Browser Information:
+User Agent:
+Browser Capabilities:
+Would use legacy mode:
+
+
+
+ Test Links:
+ Normal Car Activation (auto-detects browser) + Force Legacy Mode (for testing) + Direct Legacy Page +
+
+
+
+
+
\ No newline at end of file
diff --git a/website/public/car-activation-legacy.html b/website/public/car-activation-legacy.html
new file mode 100644
index 00000000..453a57ed
--- /dev/null
+++ b/website/public/car-activation-legacy.html
@@ -0,0 +1,490 @@
+
+
+
+
+
+ How to Test Legacy Mode in Modern Browsers:
+-
+
- URL Parameter: Add
?legacy=trueto the car activation URL
+ - Browser DevTools User Agent Override:
+
-
+
- Chrome/Edge: F12 → Network tab → "No throttling" dropdown → Add custom device with Firefox 84.0 user agent +
- Firefox: F12 → Settings (gear icon) → Check "Show custom format" → Enter custom user agent +
+ - Firefox 84.0 User Agent:
Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:84.0) Gecko/20100101 Firefox/84.0
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/website/src/App.js b/website/src/App.tsx
similarity index 53%
rename from website/src/App.js
rename to website/src/App.tsx
index dae55dca..87777422 100644
--- a/website/src/App.js
+++ b/website/src/App.tsx
@@ -7,9 +7,9 @@ import {
View,
} from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
-import { Amplify } from 'aws-amplify';
+import { Amplify, type ResourcesConfig } from 'aws-amplify';
import { AwsRum } from 'aws-rum-web';
-import React, { Suspense } from 'react';
+import { Suspense } from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import './App.css';
@@ -21,23 +21,112 @@ import { StoreProvider } from './store/contexts/storeProvider';
import initDataStores from './store/initStore';
import { translations } from '@aws-amplify/ui-react';
-import { I18n } from 'aws-amplify';
+import { I18n } from 'aws-amplify/utils';
import { useTranslation } from 'react-i18next';
+
+/**
+ * Form data structure for custom sign up validation
+ */
+interface SignUpFormData {
+ username: string;
+ acknowledgement?: string;
+ 'custom:countryCode'?: string;
+ [key: string]: any;
+}
+
+/**
+ * Validation errors object
+ */
+interface ValidationErrors {
+ [key: string]: string;
+}
+
+/**
+ * Legacy config shape produced by generate_amplify_config_cfn.py
+ * We map this to Amplify v6 ResourcesConfig at runtime (Option A)
+ * so the CDK scripts don't need to change.
+ */
+interface LegacyConfig {
+ Auth: {
+ region: string;
+ userPoolId: string;
+ userPoolWebClientId: string;
+ identityPoolId: string;
+ };
+ Storage: {
+ region: string;
+ bucket: string;
+ uploadBucket: string;
+ identityPoolId: string;
+ };
+ API: {
+ aws_appsync_graphqlEndpoint: string;
+ aws_appsync_region: string;
+ aws_appsync_authenticationType: string;
+ };
+ Urls?: {
+ termsAndConditionsUrl: string;
+ leaderboardWebsite?: string;
+ streamingOverlayWebsite?: string;
+ };
+ Rum?: {
+ drem: {
+ config: string;
+ id: string;
+ region: string;
+ };
+ };
+}
+
+const config = awsconfig as LegacyConfig;
+
+/** Map legacy config.json → Amplify v6 ResourcesConfig */
+function buildAmplifyConfig(legacy: LegacyConfig): ResourcesConfig {
+ return {
+ Auth: {
+ Cognito: {
+ userPoolId: legacy.Auth.userPoolId,
+ userPoolClientId: legacy.Auth.userPoolWebClientId,
+ identityPoolId: legacy.Auth.identityPoolId,
+ },
+ },
+ API: {
+ GraphQL: {
+ endpoint: legacy.API.aws_appsync_graphqlEndpoint,
+ region: legacy.API.aws_appsync_region,
+ defaultAuthMode: 'userPool',
+ },
+ },
+ Storage: {
+ S3: {
+ bucket: legacy.Storage.bucket,
+ region: legacy.Storage.region,
+ },
+ },
+ };
+}
+
I18n.putVocabularies(translations);
-Amplify.configure(awsconfig);
+Amplify.configure(buildAmplifyConfig(config));
+
+// Expose AppSync endpoint for legacy browser pages (e.g. car-activation-legacy.html)
+(window as any).__DREM_APPSYNC_ENDPOINT__ = config.API.aws_appsync_graphqlEndpoint;
+sessionStorage.setItem('drem_appsync_endpoint', config.API.aws_appsync_graphqlEndpoint);
initDataStores();
-let awsRum = null;
+let awsRum: AwsRum | null = null;
try {
- const config = JSON.parse(awsconfig.Rum.drem.config);
- const APPLICATION_ID = awsconfig.Rum.drem.id;
+ const rumConfig = JSON.parse(config.Rum?.drem.config || '{}');
+ const APPLICATION_ID = config.Rum?.drem.id || '';
const APPLICATION_VERSION = '1.0.0';
- const APPLICATION_REGION = awsconfig.Rum.drem.region;
+ const APPLICATION_REGION = config.Rum?.drem.region || '';
/*eslint no-unused-vars: ["error", { "varsIgnorePattern": "awsRum" }]*/
- awsRum = new AwsRum(APPLICATION_ID, APPLICATION_VERSION, APPLICATION_REGION, config);
+ if (APPLICATION_ID && APPLICATION_REGION) {
+ awsRum = new AwsRum(APPLICATION_ID, APPLICATION_VERSION, APPLICATION_REGION, rumConfig);
+ }
} catch (error) {
// Ignore errors thrown during CloudWatch RUM web client initialization
}
@@ -58,11 +147,14 @@ const components = {
{/* Re-use default `Authenticator.SignUp.FormFields` */}
+
+ Legacy Browser Mode: You are using an older browser. This simplified interface provides the core car activation functionality.
+
User Agent: +
+
+
+
+
+
+
+ User Agent: +
+
+ );
+ }
+
+ // If legacy browser, show a fallback message (shouldn't normally be seen due to redirect)
+ if (shouldUseLegacy) {
+ return (
+ Loading car activation...
+
+
+ );
+ }
+
+ // Modern browser - render the full React component
+ return Redirecting to Legacy Interface...
+Your browser requires the simplified car activation interface.
+If you are not redirected automatically, click here.
+