feat: add Twilio SMS/call integration with settings, templates, and conversation history
This commit is contained in:
Gitead
170
apps/Frontend/src/components/settings/twilio-settings-card.tsx
Normal file
170
apps/Frontend/src/components/settings/twilio-settings-card.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Eye, EyeOff, CheckCircle } from "lucide-react";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { apiRequest, queryClient } from "@/lib/queryClient";
|
||||
|
||||
type TwilioSettings = {
|
||||
id?: number;
|
||||
accountSid: string;
|
||||
authToken: string;
|
||||
phoneNumber: string;
|
||||
greetingMessage?: string | null;
|
||||
};
|
||||
|
||||
export function TwilioSettingsCard() {
|
||||
const { toast } = useToast();
|
||||
const [accountSid, setAccountSid] = useState("");
|
||||
const [authToken, setAuthToken] = useState("");
|
||||
const [phoneNumber, setPhoneNumber] = useState("");
|
||||
const [greetingMessage, setGreetingMessage] = useState("");
|
||||
const [showAuthToken, setShowAuthToken] = useState(false);
|
||||
|
||||
const { data: settings, isLoading } = useQuery<TwilioSettings | null>({
|
||||
queryKey: ["/api/twilio/settings"],
|
||||
queryFn: async () => {
|
||||
const res = await apiRequest("GET", "/api/twilio/settings");
|
||||
if (!res.ok) return null;
|
||||
return res.json();
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (settings) {
|
||||
setAccountSid(settings.accountSid ?? "");
|
||||
setAuthToken(settings.authToken ?? "");
|
||||
setPhoneNumber(settings.phoneNumber ?? "");
|
||||
setGreetingMessage(settings.greetingMessage ?? "");
|
||||
}
|
||||
}, [settings]);
|
||||
|
||||
const saveMutation = useMutation({
|
||||
mutationFn: async (data: TwilioSettings) => {
|
||||
const res = await apiRequest("PUT", "/api/twilio/settings", data);
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => null);
|
||||
throw new Error(err?.message || "Failed to save Twilio settings");
|
||||
}
|
||||
return res.json();
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/twilio/settings"] });
|
||||
toast({ title: "Twilio Settings Saved", description: "Your Twilio credentials have been saved." });
|
||||
},
|
||||
onError: (err: any) => {
|
||||
toast({ title: "Error", description: err?.message || "Failed to save settings", variant: "destructive" });
|
||||
},
|
||||
});
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!accountSid.trim() || !authToken.trim() || !phoneNumber.trim()) return;
|
||||
saveMutation.mutate({ accountSid: accountSid.trim(), authToken: authToken.trim(), phoneNumber: phoneNumber.trim(), greetingMessage: greetingMessage.trim() || null });
|
||||
};
|
||||
|
||||
const isConfigured = !!(settings?.accountSid && settings?.authToken && settings?.phoneNumber);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="space-y-4 py-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-lg font-semibold">Twilio Settings</h3>
|
||||
{isConfigured && (
|
||||
<span className="flex items-center gap-1 text-xs text-green-600 font-medium">
|
||||
<CheckCircle className="h-3.5 w-3.5" /> Configured
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-gray-500">
|
||||
Enter your Twilio credentials to enable SMS and calling features. Find these in your{" "}
|
||||
<span className="font-medium">Twilio Console</span> → Account Info.
|
||||
</p>
|
||||
|
||||
{isLoading ? (
|
||||
<p className="text-sm text-gray-400">Loading...</p>
|
||||
) : (
|
||||
<form className="space-y-4" onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<label className="block text-sm font-medium">Account SID</label>
|
||||
<input
|
||||
type="text"
|
||||
value={accountSid}
|
||||
onChange={(e) => setAccountSid(e.target.value)}
|
||||
className="mt-1 p-2 border rounded w-full font-mono text-sm"
|
||||
placeholder="ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium">Auth Token</label>
|
||||
<div className="relative mt-1">
|
||||
<input
|
||||
type={showAuthToken ? "text" : "password"}
|
||||
value={authToken}
|
||||
onChange={(e) => setAuthToken(e.target.value)}
|
||||
className="p-2 border rounded w-full pr-10 font-mono text-sm"
|
||||
placeholder="••••••••••••••••••••••••••••••••"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowAuthToken((v) => !v)}
|
||||
className="absolute inset-y-0 right-2 flex items-center text-gray-500 hover:text-gray-700"
|
||||
tabIndex={-1}
|
||||
>
|
||||
{showAuthToken ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium">Twilio Phone Number</label>
|
||||
<input
|
||||
type="text"
|
||||
value={phoneNumber}
|
||||
onChange={(e) => setPhoneNumber(e.target.value)}
|
||||
className="mt-1 p-2 border rounded w-full font-mono text-sm"
|
||||
placeholder="+1xxxxxxxxxx"
|
||||
required
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">Must be in E.164 format, e.g. +16175551234</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium">Voicemail Greeting</label>
|
||||
<textarea
|
||||
value={greetingMessage}
|
||||
onChange={(e) => setGreetingMessage(e.target.value)}
|
||||
className="mt-1 p-2 border rounded w-full text-sm resize-none"
|
||||
rows={3}
|
||||
placeholder="Thank you for calling. Please leave a message after the beep and we will get back to you shortly."
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">This message plays when a patient calls your Twilio number. Leave blank to use the default.</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 pt-1">
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-teal-600 text-white px-4 py-2 rounded hover:bg-teal-700 text-sm"
|
||||
disabled={saveMutation.isPending}
|
||||
>
|
||||
{saveMutation.isPending ? "Saving..." : "Save Twilio Settings"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isConfigured && (
|
||||
<div className="mt-2 p-3 bg-gray-50 rounded border text-xs text-gray-600 space-y-1">
|
||||
<p className="font-medium text-gray-700">Twilio Webhook URLs</p>
|
||||
<p>SMS: <code className="bg-white border px-1 rounded">https://communitydentistsoflowell.mydentalofficemanagement.com/api/twilio/webhook/sms</code></p>
|
||||
<p>Voice: <code className="bg-white border px-1 rounded">https://communitydentistsoflowell.mydentalofficemanagement.com/api/twilio/webhook/voice</code></p>
|
||||
<p className="text-gray-400">Set these in your Twilio Console → Phone Numbers → your number</p>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user