Add unique edit ID and email opt-in to RSVP submission

frontend/src/components/RSVPForm.tsx

@@ -29,6 +29,8 @@ interface RSVPFormData {
   guest_names: string[];
   items_bringing: string[];
   other_items: string;
+  send_email_confirmation: boolean; // New field for email opt-in
+  email_address: string; // New field for recipient email
 }
 
 const RSVPForm: React.FC = () => {
@@ -40,7 +42,9 @@ const RSVPForm: React.FC = () => {
     guest_count: 1,
     guest_names: [],
     items_bringing: [],
-    other_items: ''
+    other_items: '',
+    send_email_confirmation: false, // Initialize to false
+    email_address: '' // Initialize to empty
   });
   const [neededItems, setNeededItems] = useState<string[]>([]);
   const [claimedItems, setClaimedItems] = useState<string[]>([]);
@@ -184,6 +188,14 @@ const RSVPForm: React.FC = () => {
     }));
   };
 
+  const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, checked } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: checked
+    }));
+  };
+
   const handleSelectChange = (e: SelectChangeEvent<string>) => {
     const { name, value } = e.target;
     
@@ -196,7 +208,9 @@ const RSVPForm: React.FC = () => {
         guest_count: 0,
         guest_names: [],
         items_bringing: [], // Clear items when not attending
-        other_items: ''
+        other_items: '',
+        send_email_confirmation: false, // Also reset email opt-in
+        email_address: '' // And email address
       }));
     } else if (name === 'bringing_guests') {
           // When bringing guests is changed
@@ -280,7 +294,9 @@ const RSVPForm: React.FC = () => {
       const submissionData = {
         ...formData,
         items_bringing: formData.items_bringing,
-        other_items: splitOtherItems
+        other_items: splitOtherItems,
+        send_email_confirmation: formData.send_email_confirmation,
+        email_address: formData.email_address.trim()
       };
       const response = await axios.post(`/api/events/${slug}/rsvp`, submissionData);
       
@@ -290,6 +306,14 @@ const RSVPForm: React.FC = () => {
         axios.get(`/api/events/${slug}/rsvps`)
       ]);
       
+      // Optionally display success message with edit link if email was sent
+      if (formData.send_email_confirmation && formData.email_address.trim()) {
+        // The backend sends the email, we just need to confirm success here
+        setSuccess(true);
+      } else {
+        setSuccess(true); // Still show success even if email wasn't sent
+      }
+      
       // Process needed items
       let items: string[] = [];
       if (eventResponse.data.needed_items) {
@@ -586,6 +610,37 @@ const RSVPForm: React.FC = () => {
                 </>
               )}
 
+              {/* Email Notification Section */}
+              <Box sx={{ mt: 3, borderTop: '1px solid rgba(0, 0, 0, 0.12)', pt: 3 }}>
+                <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+                  To receive a link to edit your submission later, please enable email notifications below.
+                </Typography>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={formData.send_email_confirmation}
+                      onChange={handleCheckboxChange}
+                      name="send_email_confirmation"
+                    />
+                  }
+                  label="Send me an email confirmation with an edit link"
+                />
+                
+                {formData.send_email_confirmation && (
+                  <TextField
+                    fullWidth
+                    label="Your Email Address"
+                    name="email_address"
+                    type="email"
+                    value={formData.email_address}
+                    onChange={handleChange}
+                    variant="outlined"
+                    required // Make email required if checkbox is checked
+                    sx={{ mt: 2 }}
+                  />
+                )}
+              </Box>
+
               <Button
                 type="submit"
                 variant="contained"
@@ -595,7 +650,9 @@ const RSVPForm: React.FC = () => {
                   !formData.name.trim() || 
                   !formData.attending ||
                   (formData.attending === 'yes' && !formData.bringing_guests) ||
-                  (formData.bringing_guests === 'yes' && (formData.guest_count < 1 || formData.guest_names.some(name => !name.trim())))}
+                  (formData.bringing_guests === 'yes' && (formData.guest_count < 1 || formData.guest_names.some(name => !name.trim()))) ||
+                  (formData.send_email_confirmation && !formData.email_address.trim()) // Disable if email confirmation is checked but email is empty
+                }
                 sx={{ mt: 2 }}
               >
                 {isSubmitting ? 'Submitting...' : 'Submit RSVP'}