src/components/SendMessageWizard/MessageForm.jsx

@@ -3,7 +3,12 @@ import styles from './SendMessageWizard.module.css';
 import { tokenService } from '../../services/TokenService';
 import { messageApi, CreateMessageRequest } from '../../api/messageApi';
 
-function MessageForm({ message, onMessageChange, onMessageCreated, onToggleScheduled }) {
+function MessageForm({
+  message,
+  onMessageChange,
+  onMessageCreated,
+  onToggleScheduled,
+}) {
   const [characterCount, setCharacterCount] = useState(message.length);
   const [isCreatingMessage, setIsCreatingMessage] = useState(false);
   const [isScheduledChecked, setIsScheduledChecked] = useState(false);
@@ -106,7 +111,7 @@ function MessageForm({ message, onMessageChange, onMessageCreated, onToggleSched
       </div>
       <div>
         <label>
-          <input 
+          <input
             type="checkbox"
             checked={isScheduledChecked}
             onChange={handleIsScheduledCheckbox}

src/components/SendMessageWizard/SendMessageWizardModal.jsx

@@ -29,6 +29,8 @@ function SendMessageWizardModal({ isOpen, onClose, onComplete }) {
             onToggleScheduled={wizard.toggleScheduled}
           />
         );
+      case 'schedule':
+      // TODO: Add form for schedule step
       case 'confirm':
         return (
           <ConfirmationStep
@@ -75,6 +77,7 @@ function SendMessageWizardModal({ isOpen, onClose, onComplete }) {
   const stepTitles = {
     select: 'Select Contacts',
     message: 'Compose Message',
+    schedule: 'Schedule message',
     confirm: 'Review & Send',
     result: 'Result',
   };

src/components/SendMessageWizard/StepNavigation.jsx

@@ -34,6 +34,25 @@ function StepNavigation({
             </button>
           </>
         );
+      case 'schedule':
+        return (
+          <>
+            <button
+              onClick={onBack}
+              disabled={!canGoBack}
+              className={`${styles.navButton} ${styles.backButton}`}
+            >
+              Back
+            </button>
+            <button
+              onClick={onNext}
+              disabled={!canProceed}
+              className={`${styles.navButton} ${styles.nextButton}`}
+            >
+              {currentStep === 'select' ? 'Next' : 'Review'}
+            </button>
+          </>
+        );
       case 'confirm':
         return (
           <>

src/components/SendMessageWizard/useSendMessageWizard.js

@@ -26,6 +26,9 @@ const useSendMessageWizard = () => {
         return state.selectedContacts.length > 0;
       case 'message':
         return state.message.trim().length > 0;
+      case 'schedule':
+        // TODO: Handle this
+        return false;
       case 'confirm':
         return true;
       default:
@@ -49,7 +52,7 @@ const useSendMessageWizard = () => {
     console.log('Yup');
     setState((prev) => ({
       ...prev,
-      isScheduled: scheduled
+      isScheduled: scheduled,
     }));
   };
 
@@ -72,7 +75,9 @@ const useSendMessageWizard = () => {
       console.log('Scheduled Checked');
     }
 
-    const stepOrder = ['select', 'message', 'confirm', 'result'];
+    // 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) => ({
@@ -84,7 +89,8 @@ const useSendMessageWizard = () => {
   };
 
   const prevStep = () => {
-    const stepOrder = ['select', 'message', 'confirm', 'result'];
+    // TODO: Handle navigation for schedule form
+    const stepOrder = ['select', 'message', 'schedule', 'confirm', 'result'];
     const currentIndex = stepOrder.indexOf(state.step);
     if (currentIndex > 0) {
       setState((prev) => ({