Added checkbox to trigger scheduling form

This commit is contained in:
2026-06-29 16:53:39 -04:00
parent cea2d0cf42
commit 55d54d3810
3 changed files with 41 additions and 1 deletions
@@ -3,9 +3,10 @@ import styles from './SendMessageWizard.module.css';
import { tokenService } from '../../services/TokenService'; import { tokenService } from '../../services/TokenService';
import { messageApi, CreateMessageRequest } from '../../api/messageApi'; import { messageApi, CreateMessageRequest } from '../../api/messageApi';
function MessageForm({ message, onMessageChange, onMessageCreated }) { function MessageForm({ message, onMessageChange, onMessageCreated, onToggleScheduled }) {
const [characterCount, setCharacterCount] = useState(message.length); const [characterCount, setCharacterCount] = useState(message.length);
const [isCreatingMessage, setIsCreatingMessage] = useState(false); const [isCreatingMessage, setIsCreatingMessage] = useState(false);
const [isScheduledChecked, setIsScheduledChecked] = useState(false);
const [createdMessage, setCreatedMessage] = useState(null); const [createdMessage, setCreatedMessage] = useState(null);
const handleMessageChange = (e) => { const handleMessageChange = (e) => {
@@ -14,6 +15,12 @@ function MessageForm({ message, onMessageChange, onMessageCreated }) {
setCharacterCount(newMessage.length); setCharacterCount(newMessage.length);
}; };
const handleIsScheduledCheckbox = (event) => {
console.log('Doing something to the checkbox');
setIsScheduledChecked(event.target.checked);
onToggleScheduled(event.target.checked);
};
const createMessage = async () => { const createMessage = async () => {
if (!message.trim()) { if (!message.trim()) {
return; return;
@@ -97,6 +104,17 @@ function MessageForm({ message, onMessageChange, onMessageCreated }) {
<li>Check spelling and grammar</li> <li>Check spelling and grammar</li>
</ul> </ul>
</div> </div>
<div>
<label>
<input
type="checkbox"
checked={isScheduledChecked}
onChange={handleIsScheduledCheckbox}
readOnly
/>
Schedule Message
</label>
</div>
</div> </div>
); );
} }
@@ -26,6 +26,7 @@ function SendMessageWizardModal({ isOpen, onClose, onComplete }) {
message={wizard.message} message={wizard.message}
onMessageChange={wizard.setMessage} onMessageChange={wizard.setMessage}
onMessageCreated={wizard.setCreatedMessage} onMessageCreated={wizard.setCreatedMessage}
onToggleScheduled={wizard.toggleScheduled}
/> />
); );
case 'confirm': case 'confirm':
@@ -13,6 +13,7 @@ const useSendMessageWizard = () => {
message: '', message: '',
createdMessage: null, createdMessage: null,
isSubmitting: false, isSubmitting: false,
isScheduled: false,
submissionError: null, submissionError: null,
}); });
@@ -44,6 +45,14 @@ const useSendMessageWizard = () => {
})); }));
}; };
const toggleScheduled = (scheduled) => {
console.log('Yup');
setState((prev) => ({
...prev,
isScheduled: scheduled
}));
};
const setMessage = (message) => { const setMessage = (message) => {
setState((prev) => ({ ...prev, message })); setState((prev) => ({ ...prev, message }));
}; };
@@ -56,6 +65,13 @@ const useSendMessageWizard = () => {
const nextStep = () => { const nextStep = () => {
if (!canProceedToNextStep()) return; if (!canProceedToNextStep()) return;
console.log('Going to next step');
console.log(state.isScheduled);
if (state.isScheduled) {
console.log('Scheduled Checked');
}
const stepOrder = ['select', 'message', 'confirm', 'result']; const stepOrder = ['select', 'message', 'confirm', 'result'];
const currentIndex = stepOrder.indexOf(state.step); const currentIndex = stepOrder.indexOf(state.step);
if (currentIndex < stepOrder.length - 1) { if (currentIndex < stepOrder.length - 1) {
@@ -109,6 +125,7 @@ const useSendMessageWizard = () => {
...prev, ...prev,
step: 'result', step: 'result',
isSubmitting: false, isSubmitting: false,
isScheduled: false,
})); }));
} }
} catch (error) { } catch (error) {
@@ -121,6 +138,7 @@ const useSendMessageWizard = () => {
...prev, ...prev,
submissionError: error.message || 'Failed to send messages', submissionError: error.message || 'Failed to send messages',
isSubmitting: false, isSubmitting: false,
isScheduled: false,
})); }));
} }
}; };
@@ -133,6 +151,7 @@ const useSendMessageWizard = () => {
message: '', message: '',
createdMessage: null, createdMessage: null,
isSubmitting: false, isSubmitting: false,
isScheduled: false,
submissionError: null, submissionError: null,
}); });
}; };
@@ -149,12 +168,14 @@ const useSendMessageWizard = () => {
message: state.message, message: state.message,
createdMessage: state.createdMessage, createdMessage: state.createdMessage,
isSubmitting: state.isSubmitting, isSubmitting: state.isSubmitting,
isScheduled: state.isScheduled,
submissionError: state.submissionError, submissionError: state.submissionError,
canProceedToNextStep: canProceedToNextStep(), canProceedToNextStep: canProceedToNextStep(),
canGoBack, canGoBack,
// Actions // Actions
toggleContact, toggleContact,
toggleScheduled,
setMessage, setMessage,
setCreatedMessage, setCreatedMessage,
nextStep, nextStep,