Added checkbox to trigger scheduling form
This commit is contained in:
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user