tsk-6: Send Message (#22)

Closes #6 Reviewed-on: phoenix/textsender#22 Co-authored-by: phoenix <kundeng00@pm.me> Co-committed-by: phoenix <kundeng00@pm.me>
2026-01-04 00:21:22 +00:00
parent a1a8b44da3
commit 34644d1cd2
24 changed files with 1690 additions and 146 deletions
@@ -0,0 +1,115 @@
+import React from 'react';
+import ContactSelection from './ContactSelection';
+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}
+          />
+        );
+      case 'confirm':
+        return (
+          <ConfirmationStep
+            selectedContacts={wizard.selectedContacts}
+            createdMessage={wizard.createdMessage}
+            message={wizard.message}
+            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',
+    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;