127 lines
3.5 KiB
React
127 lines
3.5 KiB
React
import React from 'react';
|
||
import ContactSelection from './ContactSelection';
|
||
import FutureTimeForm from './FutureTimeForm';
|
||
import MessageForm from './MessageForm';
|
||
import ConfirmationStep from './ConfirmationStep';
|
||
import StepNavigation from './StepNavigation';
|
||
import useSendMessageWizard from './useSendMessageWizard';
|
||
import styles from './SendMessageWizard.module.css';
|
||
|
||
function SendMessageWizardModal({ isOpen, onClose, onComplete }) {
|
||
const wizard = useSendMessageWizard();
|
||
|
||
if (!isOpen) return null;
|
||
|
||
const renderStep = () => {
|
||
switch (wizard.currentStep) {
|
||
case 'select':
|
||
return (
|
||
<ContactSelection
|
||
selectedContacts={wizard.selectedContacts}
|
||
onToggleContact={wizard.toggleContact}
|
||
/>
|
||
);
|
||
case 'message':
|
||
return (
|
||
<MessageForm
|
||
message={wizard.message}
|
||
onMessageChange={wizard.setMessage}
|
||
onMessageCreated={wizard.setCreatedMessage}
|
||
onToggleScheduled={wizard.toggleScheduled}
|
||
/>
|
||
);
|
||
case 'schedule':
|
||
return (
|
||
<FutureTimeForm
|
||
scheduledTime={wizard.scheduledTime}
|
||
setScheduledTime={wizard.setScheduledTime}
|
||
/>
|
||
);
|
||
case 'confirm':
|
||
return (
|
||
<ConfirmationStep
|
||
selectedContacts={wizard.selectedContacts}
|
||
createdMessage={wizard.createdMessage}
|
||
message={wizard.message}
|
||
scheduledTime={wizard.scheduledTime}
|
||
isSubmitting={wizard.isSubmitting}
|
||
/>
|
||
);
|
||
case 'result':
|
||
return (
|
||
<div className={styles.resultStep}>
|
||
{wizard.submissionError ? (
|
||
<div className={styles.error}>
|
||
<h3>Error Sending Messages</h3>
|
||
<p>{wizard.submissionError}</p>
|
||
</div>
|
||
) : (
|
||
<div className={styles.success}>
|
||
<h3>Messages Sent Successfully!</h3>
|
||
<p>
|
||
Your message has been sent to {wizard.selectedContacts.length}{' '}
|
||
contacts.
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
default:
|
||
return null;
|
||
}
|
||
};
|
||
|
||
const handleClose = () => {
|
||
wizard.reset();
|
||
onClose();
|
||
};
|
||
|
||
const handleComplete = () => {
|
||
wizard.reset();
|
||
onComplete();
|
||
};
|
||
|
||
const stepTitles = {
|
||
select: 'Select Contacts',
|
||
message: 'Compose Message',
|
||
schedule: 'Schedule message',
|
||
confirm: 'Review & Send',
|
||
result: 'Result',
|
||
};
|
||
|
||
return (
|
||
<div className={styles.modalOverlay}>
|
||
<div className={styles.modal}>
|
||
<div className={styles.modalHeader}>
|
||
<h2>{stepTitles[wizard.currentStep]}</h2>
|
||
<button
|
||
onClick={handleClose}
|
||
className={styles.closeButton}
|
||
aria-label="Close"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
<div className={styles.modalBody}>{renderStep()}</div>
|
||
|
||
<div className={styles.modalFooter}>
|
||
<StepNavigation
|
||
currentStep={wizard.currentStep}
|
||
onNext={wizard.nextStep}
|
||
onBack={wizard.prevStep}
|
||
onSubmit={wizard.submit}
|
||
onDone={handleComplete}
|
||
canProceed={wizard.canProceedToNextStep}
|
||
canGoBack={wizard.canGoBack}
|
||
isSubmitting={wizard.isSubmitting}
|
||
submissionError={wizard.submissionError}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default SendMessageWizardModal;
|