From 17edfc87940112effbac2886337b794a82de8282 Mon Sep 17 00:00:00 2001
From: DaX <daxdax89@msn.com>
Date: Wed, 19 Nov 2025 18:56:08 +0100
Subject: [PATCH] Fix CloudFront routing and TypeScript type safety

- Update CloudFront Function to handle Next.js static export .html files
- Fix TypeScript interface for color request service (add required user_phone field)
- Update ColorRequestForm component to include phone field
---
 src/components/ColorRequestForm.tsx | 22 +++++++++++++++++++++-
 src/services/api.ts                 |  3 ++-
 terraform/cloudfront-function.js    |  5 +++--
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/components/ColorRequestForm.tsx b/src/components/ColorRequestForm.tsx
index 03ac6b4..557140d 100644
--- a/src/components/ColorRequestForm.tsx
+++ b/src/components/ColorRequestForm.tsx
@@ -14,6 +14,7 @@ export default function ColorRequestForm({ onSuccess }: ColorRequestFormProps) {
     finish_type: 'Basic',
     user_name: '',
     user_email: '',
+    user_phone: '',
     description: '',
     reference_url: ''
   });
@@ -37,6 +38,7 @@ export default function ColorRequestForm({ onSuccess }: ColorRequestFormProps) {
         finish_type: 'Basic',
         user_name: '',
         user_email: '',
+        user_phone: '',
         description: '',
         reference_url: ''
       });
@@ -136,12 +138,13 @@ export default function ColorRequestForm({ onSuccess }: ColorRequestFormProps) {
 
           <div>
             <label htmlFor="user_email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-              Email (opciono)
+              Email *
             </label>
             <input
               type="email"
               id="user_email"
               name="user_email"
+              required
               value={formData.user_email}
               onChange={handleChange}
               className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none"
@@ -150,6 +153,23 @@ export default function ColorRequestForm({ onSuccess }: ColorRequestFormProps) {
           </div>
         </div>
 
+        <div className="grid md:grid-cols-2 gap-4">
+          <div>
+            <label htmlFor="user_phone" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Telefon *
+            </label>
+            <input
+              type="tel"
+              id="user_phone"
+              name="user_phone"
+              required
+              value={formData.user_phone}
+              onChange={handleChange}
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none"
+              placeholder="063 123 4567"
+            />
+          </div>
+        </div>
 
         <div className="flex justify-end">
           <button
diff --git a/src/services/api.ts b/src/services/api.ts
index 3ea1b3f..76494fe 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -111,7 +111,8 @@ export const colorRequestService = {
     color_name: string;
     material_type: string;
     finish_type?: string;
-    user_email?: string;
+    user_email: string;
+    user_phone: string;
     user_name?: string;
     description?: string;
     reference_url?: string;
diff --git a/terraform/cloudfront-function.js b/terraform/cloudfront-function.js
index 535fa11..0cb0016 100644
--- a/terraform/cloudfront-function.js
+++ b/terraform/cloudfront-function.js
@@ -8,8 +8,9 @@ function handler(event) {
         if (uri.endsWith('/')) {
             request.uri += 'index.html';
         } else {
-            // Add /index.html to directory paths
-            request.uri += '/index.html';
+            // For Next.js static export, try .html first
+            // CloudFront will handle 404s via custom error response
+            request.uri += '.html';
         }
     }