|
| 1 | +import React from "react"; |
| 2 | +import { Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, Typography, CircularProgress, Alert } from "@mui/material"; |
| 3 | +import { ApiHelper } from "@churchapps/apphelper"; |
| 4 | + |
| 5 | +interface Props { |
| 6 | + // Group mode |
| 7 | + groupId?: string; |
| 8 | + groupName?: string; |
| 9 | + // Person mode |
| 10 | + personId?: string; |
| 11 | + personName?: string; |
| 12 | + phoneNumber?: string; |
| 13 | + // Common |
| 14 | + onClose: () => void; |
| 15 | +} |
| 16 | + |
| 17 | +interface PreviewData { |
| 18 | + totalMembers: number; |
| 19 | + eligibleCount: number; |
| 20 | + optedOutCount: number; |
| 21 | + noPhoneCount: number; |
| 22 | +} |
| 23 | + |
| 24 | +interface SendResult { |
| 25 | + totalMembers: number; |
| 26 | + recipientCount: number; |
| 27 | + successCount: number; |
| 28 | + failCount: number; |
| 29 | + optedOutCount: number; |
| 30 | + noPhoneCount: number; |
| 31 | +} |
| 32 | + |
| 33 | +export const SendTextDialog: React.FC<Props> = (props) => { |
| 34 | + const [message, setMessage] = React.useState(""); |
| 35 | + const [sending, setSending] = React.useState(false); |
| 36 | + const [result, setResult] = React.useState<SendResult | null>(null); |
| 37 | + const [error, setError] = React.useState(""); |
| 38 | + const [preview, setPreview] = React.useState<PreviewData | null>(null); |
| 39 | + const [loadingPreview, setLoadingPreview] = React.useState(false); |
| 40 | + |
| 41 | + const isGroupMode = !!props.groupId; |
| 42 | + const charCount = message.length; |
| 43 | + const segmentCount = charCount <= 160 ? 1 : Math.ceil(charCount / 153); |
| 44 | + |
| 45 | + React.useEffect(() => { |
| 46 | + if (!isGroupMode || !props.groupId) return; |
| 47 | + setLoadingPreview(true); |
| 48 | + ApiHelper.get("/texting/preview/" + props.groupId, "MessagingApi") |
| 49 | + .then((data) => { setPreview(data); }) |
| 50 | + .catch(() => { /* preview is optional — allow send even if it fails */ }) |
| 51 | + .finally(() => { setLoadingPreview(false); }); |
| 52 | + }, [isGroupMode, props.groupId]); |
| 53 | + |
| 54 | + const handleSend = async () => { |
| 55 | + if (!message.trim()) return; |
| 56 | + setSending(true); |
| 57 | + setError(""); |
| 58 | + try { |
| 59 | + let resp; |
| 60 | + if (isGroupMode) { |
| 61 | + resp = await ApiHelper.post("/texting/send", { groupId: props.groupId, message }, "MessagingApi"); |
| 62 | + } else { |
| 63 | + resp = await ApiHelper.post("/texting/sendPerson", { personId: props.personId, phoneNumber: props.phoneNumber, message }, "MessagingApi"); |
| 64 | + } |
| 65 | + if (resp.error) { |
| 66 | + setError(resp.error); |
| 67 | + } else { |
| 68 | + setResult(resp); |
| 69 | + } |
| 70 | + } catch (err: any) { |
| 71 | + setError(err?.message || "Failed to send text message."); |
| 72 | + } finally { |
| 73 | + setSending(false); |
| 74 | + } |
| 75 | + }; |
| 76 | + |
| 77 | + const getTitle = () => { |
| 78 | + if (isGroupMode) return `Text Group: ${props.groupName || ""}`; |
| 79 | + return `Text: ${props.personName || ""}`; |
| 80 | + }; |
| 81 | + |
| 82 | + const renderPreview = () => { |
| 83 | + if (!isGroupMode) return <Typography variant="body2" color="textSecondary" sx={{ mb: 2 }}>Sending to {props.phoneNumber || "phone on file"}.</Typography>; |
| 84 | + if (loadingPreview) return <Typography variant="body2" color="textSecondary" sx={{ mb: 2 }}>Loading recipients...</Typography>; |
| 85 | + if (!preview) return <Typography variant="body2" color="textSecondary" sx={{ mb: 2 }}>This will send an SMS to eligible group members.</Typography>; |
| 86 | + |
| 87 | + return ( |
| 88 | + <Alert severity={preview.eligibleCount > 0 ? "info" : "warning"} sx={{ mb: 2 }}> |
| 89 | + <strong>{preview.eligibleCount}</strong> of {preview.totalMembers} member{preview.totalMembers !== 1 ? "s" : ""} will receive this text. |
| 90 | + {preview.optedOutCount > 0 && <><br />{preview.optedOutCount} opted out.</>} |
| 91 | + {preview.noPhoneCount > 0 && <><br />{preview.noPhoneCount} ha{preview.noPhoneCount !== 1 ? "ve" : "s"} no phone number on file.</>} |
| 92 | + </Alert> |
| 93 | + ); |
| 94 | + }; |
| 95 | + |
| 96 | + const renderResult = () => { |
| 97 | + if (!result) return null; |
| 98 | + const isGroup = result.totalMembers !== undefined && result.totalMembers > 1; |
| 99 | + return ( |
| 100 | + <> |
| 101 | + <Alert severity={result.failCount === 0 ? "success" : "warning"} sx={{ mt: 1 }}> |
| 102 | + Sent to {result.successCount} of {result.recipientCount} eligible recipient{result.recipientCount !== 1 ? "s" : ""}. |
| 103 | + {result.failCount > 0 && <><br />{result.failCount} failed to send.</>} |
| 104 | + </Alert> |
| 105 | + {isGroup && (result.optedOutCount > 0 || result.noPhoneCount > 0) && ( |
| 106 | + <Alert severity="info" sx={{ mt: 1 }}> |
| 107 | + {result.optedOutCount > 0 && <>{result.optedOutCount} skipped (opted out).<br /></>} |
| 108 | + {result.noPhoneCount > 0 && <>{result.noPhoneCount} skipped (no phone number).</>} |
| 109 | + </Alert> |
| 110 | + )} |
| 111 | + </> |
| 112 | + ); |
| 113 | + }; |
| 114 | + |
| 115 | + const canSend = !sending && message.trim().length > 0 && (!isGroupMode || !preview || preview.eligibleCount > 0); |
| 116 | + |
| 117 | + return ( |
| 118 | + <Dialog open={true} onClose={props.onClose} maxWidth="sm" fullWidth> |
| 119 | + <DialogTitle>{getTitle()}</DialogTitle> |
| 120 | + <DialogContent> |
| 121 | + {result ? renderResult() : ( |
| 122 | + <> |
| 123 | + {renderPreview()} |
| 124 | + {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>} |
| 125 | + <TextField |
| 126 | + fullWidth |
| 127 | + multiline |
| 128 | + minRows={3} |
| 129 | + maxRows={6} |
| 130 | + label="Message" |
| 131 | + value={message} |
| 132 | + onChange={(e) => setMessage(e.target.value)} |
| 133 | + disabled={sending} |
| 134 | + inputProps={{ maxLength: 1600 }} |
| 135 | + /> |
| 136 | + <Typography variant="caption" color="textSecondary" sx={{ mt: 1, display: "block" }}> |
| 137 | + {charCount} character{charCount !== 1 ? "s" : ""} ({segmentCount} SMS segment{segmentCount !== 1 ? "s" : ""}) |
| 138 | + </Typography> |
| 139 | + </> |
| 140 | + )} |
| 141 | + </DialogContent> |
| 142 | + <DialogActions> |
| 143 | + {result ? ( |
| 144 | + <Button onClick={props.onClose}>Close</Button> |
| 145 | + ) : ( |
| 146 | + <> |
| 147 | + <Button onClick={props.onClose} disabled={sending}>Cancel</Button> |
| 148 | + <Button |
| 149 | + variant="contained" |
| 150 | + onClick={handleSend} |
| 151 | + disabled={!canSend} |
| 152 | + startIcon={sending ? <CircularProgress size={16} /> : null} |
| 153 | + > |
| 154 | + {sending ? "Sending..." : "Send"} |
| 155 | + </Button> |
| 156 | + </> |
| 157 | + )} |
| 158 | + </DialogActions> |
| 159 | + </Dialog> |
| 160 | + ); |
| 161 | +}; |
0 commit comments