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 (
+
+ );
+};
+
+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,