From c93a581924a5223ede78386a356618e2245fb3ef Mon Sep 17 00:00:00 2001 From: phoenix Date: Tue, 30 Jun 2026 10:40:46 -0400 Subject: [PATCH] Got the flow almost working. Can schedule, but nothing sent --- .../SendMessageWizard/ConfirmationStep.jsx | 6 ++ .../SendMessageWizard/FutureTimeForm.jsx | 89 +++++++++++++++++++ .../SendMessageWizardModal.jsx | 8 ++ .../SendMessageWizard/StepNavigation.jsx | 2 +- .../SendMessageWizard/useSendMessageWizard.js | 84 ++++++++++++++--- 5 files changed, 176 insertions(+), 13 deletions(-) create mode 100644 src/components/SendMessageWizard/FutureTimeForm.jsx diff --git a/src/components/SendMessageWizard/ConfirmationStep.jsx b/src/components/SendMessageWizard/ConfirmationStep.jsx index 5991d7b..9122f94 100644 --- a/src/components/SendMessageWizard/ConfirmationStep.jsx +++ b/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({ + { /* Scheduled time Section */} +
+ Scheduled time: {scheduledTime ? scheduledTime.toISOString() : 'No schedule date'} +
+ {/* Summary Section */}
diff --git a/src/components/SendMessageWizard/FutureTimeForm.jsx b/src/components/SendMessageWizard/FutureTimeForm.jsx new file mode 100644 index 0000000..b6068a0 --- /dev/null +++ b/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 ( +
+

Schedule Event

+
+
+ + +
+ + {error &&

{error}

} + {success &&

{success}

} + + +
+
+ ); +}; + +export default FutureTimeForm; diff --git a/src/components/SendMessageWizard/SendMessageWizardModal.jsx b/src/components/SendMessageWizard/SendMessageWizardModal.jsx index d7d39fc..dfdedd0 100644 --- a/src/components/SendMessageWizard/SendMessageWizardModal.jsx +++ b/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 ( + + ); case 'confirm': return ( ); diff --git a/src/components/SendMessageWizard/StepNavigation.jsx b/src/components/SendMessageWizard/StepNavigation.jsx index a961417..d81a148 100644 --- a/src/components/SendMessageWizard/StepNavigation.jsx +++ b/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'} ); diff --git a/src/components/SendMessageWizard/useSendMessageWizard.js b/src/components/SendMessageWizard/useSendMessageWizard.js index 5785bf5..d1b02cc 100644 --- a/src/components/SendMessageWizard/useSendMessageWizard.js +++ b/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) => ({ - ...prev, - step: stepOrder[currentIndex + 1], - submissionError: null, - })); + if (state.step === 'message') { + if (state.isScheduled) { + setState((prev) => ({ + ...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) => ({ - ...prev, - step: stepOrder[currentIndex - 1], - submissionError: null, - })); + if (state.step === 'confirm') { + if (state.isScheduled) { + setState((prev) => ({ + ...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,