Got the flow almost working. Can schedule, but nothing sent

src/components/SendMessageWizard/ConfirmationStep.jsx

@@ -5,6 +5,7 @@ function ConfirmationStep({
   selectedContacts,
   createdMessage,
   message,
+  scheduledTime,
   isSubmitting,
 }) {
   // In a real app, you might fetch full contact details here
@@ -88,6 +89,11 @@ function ConfirmationStep({
           </div>
         </div>
 
+        { /* Scheduled time Section */}
+        <div>
+          Scheduled time: {scheduledTime ? scheduledTime.toISOString() : 'No schedule date'}
+        </div>
+
         {/* Summary Section */}
         <div className={styles.confirmationSection}>
           <div className={styles.sectionHeader}>

src/components/SendMessageWizard/FutureTimeForm.jsx

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+
+function FutureTimeForm({scheduledTime, setScheduledTime}) {
+  const [selectedTime, setSelectedTime] = useState(new Date());
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+
+  const handleTimeChange = (e) => {
+    setSelectedTime(e.target.value);
+    setScheduledTime(new Date(e.target.value));
+    // Clear errors when user starts typing again
+    console.log(`Scheduled Time: ${scheduledTime}`)
+    console.log(`Selected Time: ${selectedTime}`)
+    setError('');
+    setSuccess('');
+  };
+
+  const validateAndSubmit = (e) => {
+    e.preventDefault();
+
+    if (!selectedTime) {
+      setError('Please select a date and time.');
+      return;
+    }
+
+    console.log(`Time: ${selectedTime}`)
+
+    const now = new Date();
+    const inputDate = new Date(selectedTime);
+    
+    // Calculate the minimum allowed time (Now + 10 minutes)
+    const minAllowedTime = new Date(now.getTime() + 10 * 60000);
+
+    if (inputDate < minAllowedTime) {
+      setError('The time must be at least 10 minutes in the future.');
+      setSuccess('');
+      setScheduledTime(null);
+    } else {
+      setError('');
+      setSuccess('Time validated successfully!');
+      setScheduledTime(inputDate);
+      console.log('Form submitted with time (selected):', selectedTime);
+      console.log('Form submitted with time (scheduled):', scheduledTime);
+    }
+  };
+
+  return (
+    <div style={{ maxWidth: '400px', margin: '2rem auto', fontFamily: 'Arial' }}>
+      <h2>Schedule Event</h2>
+      <form onSubmit={validateAndSubmit}>
+        <div style={{ marginBottom: '1rem' }}>
+          <label htmlFor="future-time" style={{ display: 'block', marginBottom: '0.5rem' }}>
+            Select Date and Time:
+          </label>
+          <input 
+            type="datetime-local" 
+            id="future-time"
+            value={selectedTime} 
+            onChange={handleTimeChange} 
+            style={{ 
+              padding: '8px', 
+              width: '100%', 
+              borderColor: error ? 'red' : '#ccc' 
+            }} 
+          />
+        </div>
+
+        {error && <p style={{ color: 'red', fontSize: '0.9rem' }}>{error}</p>}
+        {success && <p style={{ color: 'green', fontSize: '0.9rem' }}>{success}</p>}
+
+        <button 
+          type="submit" 
+          style={{ 
+            padding: '10px 20px', 
+            backgroundColor: '#007BFF', 
+            color: 'white', 
+            border: 'none', 
+            borderRadius: '4px', 
+            cursor: 'pointer' 
+          }}
+        >
+          Submit
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default FutureTimeForm;

src/components/SendMessageWizard/SendMessageWizardModal.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ContactSelection from './ContactSelection';
+import FutureTimeForm from './FutureTimeForm';
 import MessageForm from './MessageForm';
 import ConfirmationStep from './ConfirmationStep';
 import StepNavigation from './StepNavigation';
@@ -31,12 +32,19 @@ function SendMessageWizardModal({ isOpen, onClose, onComplete }) {
         );
       case 'schedule':
       // TODO: Add form for schedule step
+        return (
+        <FutureTimeForm
+            scheduledTime={wizard.scheduledTime}
+            setScheduledTime={wizard.setScheduledTime}
+            />
+        );
       case 'confirm':
         return (
           <ConfirmationStep
             selectedContacts={wizard.selectedContacts}
             createdMessage={wizard.createdMessage}
             message={wizard.message}
+            scheduledTime={wizard.scheduledTime}
             isSubmitting={wizard.isSubmitting}
           />
         );

src/components/SendMessageWizard/StepNavigation.jsx

@@ -49,7 +49,7 @@ function StepNavigation({
               disabled={!canProceed}
               className={`${styles.navButton} ${styles.nextButton}`}
             >
-              {currentStep === 'select' ? 'Next' : 'Review'}
+              {currentStep === 'schedule' ? 'Next' : 'Review'}
             </button>
           </>
         );

src/components/SendMessageWizard/useSendMessageWizard.js

@@ -10,6 +10,7 @@ const useSendMessageWizard = () => {
   const [state, setState] = useState({
     step: 'select',
     selectedContacts: [],
+    scheduledTime: null,
     message: '',
     createdMessage: null,
     isSubmitting: false,
@@ -28,13 +29,26 @@ const useSendMessageWizard = () => {
         return state.message.trim().length > 0;
       case 'schedule':
         // TODO: Handle this
-        return false;
+        // return state.scheduledTime != null;
+        console.log('Checking to see if schedule can go to the next step');
+        console.log(state.scheduledTime);
+        console.log(state.message);
+        // const result = state.scheduledTime instanceof Date && isNaN(state.scheduledTime.getTime());
+        if (state.scheduledTime == null) {
+          return false;
+        }
+        console.log('Scheduled time is not null');
+        // const result = isNaN(state.scheduledTime.getTime());
+        const result = state.scheduledTime instanceof Date && isNaN(state.scheduledTime.getTime());
+        console.log(result);
+        console.log(state.scheduledTime);
+        return !result;
       case 'confirm':
         return true;
       default:
         return false;
     }
-  }, [state.step, state.selectedContacts.length, state.message]);
+  }, [state.step, state.selectedContacts.length, state.message, state.scheduledTime]);
 
   const canGoBack = state.step !== 'select';
 
@@ -65,6 +79,11 @@ const useSendMessageWizard = () => {
     setState((prev) => ({ ...prev, createdMessage: message }));
   };
 
+  const setScheduledTime = (selectedTime) => {
+    console.log('Setting scheduled time');
+    setState((prev) => ({ ...prev, scheduledTime: selectedTime }));
+  };
+
   const nextStep = () => {
     if (!canProceedToNextStep()) return;
 
@@ -75,16 +94,34 @@ const useSendMessageWizard = () => {
       console.log('Scheduled Checked');
     }
 
+    console.log(`Step: ${state.step}`);
+
     // TODO: Handle navigation for schedule form
 
     const stepOrder = ['select', 'message', 'schedule', 'confirm', 'result'];
     const currentIndex = stepOrder.indexOf(state.step);
     if (currentIndex < stepOrder.length - 1) {
-      setState((prev) => ({
+      if (state.step === 'message') {
-        ...prev,
+        if (state.isScheduled) {
-        step: stepOrder[currentIndex + 1],
+          setState((prev) => ({
-        submissionError: null,
+            ...prev,
-      }));
+            step: stepOrder[currentIndex + 1],
+            submissionError: null,
+          }));
+        } else {
+          setState((prev) => ({
+            ...prev,
+            step: stepOrder[currentIndex + 2],
+            submissionError: null,
+          }));
+        }
+      } else {
+        setState((prev) => ({
+          ...prev,
+          step: stepOrder[currentIndex + 1],
+          submissionError: null,
+        }));
+      }
     }
   };
 
@@ -92,12 +129,30 @@ const useSendMessageWizard = () => {
     // TODO: Handle navigation for schedule form
     const stepOrder = ['select', 'message', 'schedule', 'confirm', 'result'];
     const currentIndex = stepOrder.indexOf(state.step);
+    console.log(`Stepping back: ${state.step} isSheduled: ${state.isScheduled}`);
+
     if (currentIndex > 0) {
-      setState((prev) => ({
+      if (state.step === 'confirm') {
-        ...prev,
+        if (state.isScheduled) {
-        step: stepOrder[currentIndex - 1],
+          setState((prev) => ({
-        submissionError: null,
+            ...prev,
-      }));
+            step: stepOrder[currentIndex - 1],
+            submissionError: null,
+          }));
+        } else {
+          setState((prev) => ({
+            ...prev,
+            step: stepOrder[currentIndex - 2],
+            submissionError: null,
+          }));
+        }
+      } else {
+        setState((prev) => ({
+          ...prev,
+          step: stepOrder[currentIndex - 1],
+          submissionError: null,
+        }));
+      }
     }
   };
 
@@ -132,6 +187,7 @@ const useSendMessageWizard = () => {
           step: 'result',
           isSubmitting: false,
           isScheduled: false,
+          scheduledTime: null,
         }));
       }
     } catch (error) {
@@ -145,6 +201,7 @@ const useSendMessageWizard = () => {
         submissionError: error.message || 'Failed to send messages',
         isSubmitting: false,
         isScheduled: false,
+          scheduledTime: null,
       }));
     }
   };
@@ -154,6 +211,7 @@ const useSendMessageWizard = () => {
     setState({
       step: 'select',
       selectedContacts: [],
+      scheduledTime: null,
       message: '',
       createdMessage: null,
       isSubmitting: false,
@@ -171,6 +229,7 @@ const useSendMessageWizard = () => {
     // Getters
     currentStep: state.step,
     selectedContacts: state.selectedContacts,
+    scheduledTime: state.scheduledTime,
     message: state.message,
     createdMessage: state.createdMessage,
     isSubmitting: state.isSubmitting,
@@ -184,6 +243,7 @@ const useSendMessageWizard = () => {
     toggleScheduled,
     setMessage,
     setCreatedMessage,
+    setScheduledTime,
     nextStep,
     prevStep,
     submit,