From 6f6cf0fe0cbc99118f8f4ab3e3ae28b9d6e6eda8 Mon Sep 17 00:00:00 2001
From: Rexzell Abad <rellmontezor@gmail.com>
Date: Tue, 24 Mar 2026 09:42:58 +0800
Subject: [PATCH] Fix for the click to upload ID photo in guest information
 issue

---
 Components/Checkout.tsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/Components/Checkout.tsx b/Components/Checkout.tsx
index 07af856..ea13d1c 100644
--- a/Components/Checkout.tsx
+++ b/Components/Checkout.tsx
@@ -108,6 +108,11 @@ const Checkout = () => {
   // Track if initial sync from Redux is done
   const initialSyncDone = useRef(false);
 
+  // Track file input refs for resetting (fixes issue where removing file prevents re-upload)
+  const fileInputRefs = useRef<Record<string, HTMLInputElement | null>>({
+    mainValidId: null,
+  });
+
   // Handle clicks outside dropdowns
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -659,6 +664,13 @@ const Checkout = () => {
     }
   };
 
+  // Helper function to reset file input element
+  const resetFileInput = (key: string) => {
+    if (fileInputRefs.current[key]) {
+      fileInputRefs.current[key]!.value = '';
+    }
+  };
+
   const [showCamera, setShowCamera] = useState(false);
   const [cameraType, setCameraType] = useState<'id'>('id');
   const [cameraGuestIndex, setCameraGuestIndex] = useState<number | undefined>(undefined);
@@ -1570,6 +1582,7 @@ const Checkout = () => {
 
                         <div className="text-center">
                           <input
+                            ref={(el) => { fileInputRefs.current['mainValidId'] = el; }}
                             type="file"
                             accept="image/png,image/jpeg,image/jpg"
                             onChange={(e) => handleFileChange(e, 'id')}
@@ -1647,7 +1660,10 @@ const Checkout = () => {
                                       </button>
                                       <button
                                         type="button"
-                                        onClick={() => setFormData(prev => ({ ...prev, validId: null, validIdPreview: '' }))}
+                                        onClick={() => {
+                                          resetFileInput('mainValidId');
+                                          setFormData(prev => ({ ...prev, validId: null, validIdPreview: '' }));
+                                        }}
                                         className="px-3 py-1 bg-red-100 text-red-700 rounded-md text-sm hover:bg-red-200 transition-colors"
                                       >
                                         Remove
@@ -1807,6 +1823,7 @@ const Checkout = () => {
 
                             <div className="text-center">
                               <input
+                                ref={(el) => { fileInputRefs.current[`additionalValidId-${index}`] = el; }}
                                 type="file"
                                 accept="image/png,image/jpeg,image/jpg"
                                 onChange={(e) => handleFileChange(e, 'id', index)}
@@ -1882,6 +1899,7 @@ const Checkout = () => {
                                           <button
                                             type="button"
                                             onClick={() => {
+                                                resetFileInput(`additionalValidId-${index}`);
                                                 const updated = [...additionalGuests];
                                                 updated[index].validId = null;
                                                 updated[index].validIdPreview = '';