make phone calls

app/features/core/components/service-worker-update-notifier.tsx

@@ -4,6 +4,10 @@ import { IoDownloadOutline } from "react-icons/io5";
 export default function ServiceWorkerUpdateNotifier() {
 	const [hasUpdate, setHasUpdate] = useState(false);
 	useEffect(() => {
+		if (!("serviceWorker" in navigator)) {
+			return;
+		}
+
 		(async () => {
 			const registration = await navigator.serviceWorker.getRegistration();
 			if (!registration) {

app/features/phone-calls/hooks/use-device.ts

@@ -1,26 +1,26 @@
 import { useEffect, useState } from "react";
-import { type TwilioError, Call, Device } from "@twilio/voice-sdk";
 import { useFetcher } from "@remix-run/react";
+import { type TwilioError, Call, Device } from "@twilio/voice-sdk";
+import { useAtom, atom } from "jotai";
 
 import type { TwilioTokenLoaderData } from "~/features/phone-calls/loaders/twilio-token";
 
 export default function useDevice() {
 	const jwt = useDeviceToken();
-	const [device, setDevice] = useState<Device | null>(null);
+	const [device, setDevice] = useAtom(deviceAtom);
-	const [isDeviceReady, setIsDeviceReady] = useState(() => device?.state === Device.State.Registered);
+	const [isDeviceReady, setIsDeviceReady] = useState(device?.state === Device.State.Registered);
 
 	useEffect(() => {
+		// init token
 		jwt.refresh();
 	}, []);
 
 	useEffect(() => {
-		if (jwt.token && device?.state === Device.State.Registered && device?.token !== jwt.token) {
+		// init device
-			device.updateToken(jwt.token);
+		if (!jwt.token) {
+			return;
 		}
-	}, [jwt.token, device]);
+		if (device && device.state !== Device.State.Unregistered) {
-
-	useEffect(() => {
-		if (!jwt.token || device?.state === Device.State.Registered) {
 			return;
 		}
 
@@ -30,9 +30,16 @@ export default function useDevice() {
 				[Device.SoundName.Disconnect]: undefined, // TODO
 			},
 		});
-		newDevice.register(); // TODO throwing an error
+		newDevice.register();
 		setDevice(newDevice);
-	}, [device?.state, jwt.token, setDevice]);
+	}, [device, jwt.token]);
+
+	useEffect(() => {
+		// refresh token
+		if (jwt.token && device?.state === Device.State.Registered && device?.token !== jwt.token) {
+			device.updateToken(jwt.token);
+		}
+	}, [device, jwt.token]);
 
 	useEffect(() => {
 		if (!device) {
@@ -100,6 +107,8 @@ export default function useDevice() {
 	}
 }
 
+const deviceAtom = atom<Device | null>(null);
+
 function useDeviceToken() {
 	const fetcher = useFetcher<TwilioTokenLoaderData>();
 

app/features/phone-calls/hooks/use-make-call.ts

@@ -32,6 +32,7 @@ export default function useMakeCall({ recipient, onHangUp }: Params) {
 
 	const makeCall = useCallback(
 		async function makeCall() {
+			console.log({ device, isDeviceReady });
 			if (!device || !isDeviceReady) {
 				console.warn("device is not ready yet, can't make the call");
 				return;

app/features/phone-calls/loaders/twilio-token.ts

@@ -2,7 +2,7 @@ import { type LoaderFunction } from "@remix-run/node";
 import Twilio from "twilio";
 
 import { refreshSessionData, requireLoggedIn } from "~/utils/auth.server";
-import { encrypt } from "~/utils/encryption";
+import { decrypt, encrypt } from "~/utils/encryption";
 import db from "~/utils/db.server";
 import { commitSession } from "~/utils/session.server";
 import getTwilioClient from "~/utils/twilio.server";
@@ -10,7 +10,7 @@ import getTwilioClient from "~/utils/twilio.server";
 export type TwilioTokenLoaderData = string;
 
 const loader: LoaderFunction = async ({ request }) => {
-	const { user, organization, twilio } = await requireLoggedIn(request);
+	const { user, twilio } = await requireLoggedIn(request);
 	if (!twilio) {
 		throw new Error("unreachable");
 	}
@@ -39,15 +39,15 @@ const loader: LoaderFunction = async ({ request }) => {
 		shouldRefreshSession = true;
 		const apiKey = await twilioClient.newKeys.create({ friendlyName: "Shellphone" });
 		apiKeySid = apiKey.sid;
-		apiKeySecret = apiKey.secret;
+		apiKeySecret = encrypt(apiKey.secret);
 		await db.twilioAccount.update({
 			where: { accountSid: twilioAccount.accountSid },
-			data: { apiKeySid: apiKey.sid, apiKeySecret: encrypt(apiKey.secret) },
+			data: { apiKeySid, apiKeySecret },
 		});
 	}
 
-	const accessToken = new Twilio.jwt.AccessToken(twilioAccount.accountSid, apiKeySid, apiKeySecret, {
+	const accessToken = new Twilio.jwt.AccessToken(twilioAccount.accountSid, apiKeySid, decrypt(apiKeySecret), {
-		identity: `${organization.id}__${user.id}`,
+		identity: `${twilio.accountSid}__${user.id}`,
 		ttl: 3600,
 	});
 	const grant = new Twilio.jwt.AccessToken.VoiceGrant({

app/routes/__app/outgoing-call.$recipient.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 import type { MetaFunction } from "@remix-run/node";
 import { useParams } from "@remix-run/react";
 import { IoCall } from "react-icons/io5";
@@ -38,6 +38,12 @@ export default function OutgoingCallPage() {
 		[call, pressDigit],
 	);
 
+	useEffect(() => {
+		if (isDeviceReady) {
+			call.makeCall();
+		}
+	}, [call, isDeviceReady]);
+
 	return (
 		<div className="w-96 h-full flex flex-col justify-around py-5 mx-auto text-center text-black bg-white">
 			<div className="h-16 text-3xl text-gray-700">

app/routes/webhook/call.ts

@@ -15,14 +15,14 @@ export const action: ActionFunction = async ({ request }) => {
 		return badRequest("Invalid header X-Twilio-Signature");
 	}
 
-	const body: Body = await request.json();
+	const body: Body = Object.fromEntries(await request.formData()) as any;
 	const isOutgoingCall = body.From.startsWith("client:");
 	if (isOutgoingCall) {
 		const recipient = body.To;
-		const organizationId = body.From.slice("client:".length).split("__")[0];
+		const accountSid = body.From.slice("client:".length).split("__")[0];
 
 		try {
-			const twilioAccount = await db.twilioAccount.findUnique({ where: { organizationId } });
+			const twilioAccount = await db.twilioAccount.findUnique({ where: { accountSid } });
 			if (!twilioAccount) {
 				// this shouldn't be happening
 				return new Response(null, { status: 402 });
@@ -57,7 +57,8 @@ export const action: ActionFunction = async ({ request }) => {
 			if (phoneNumber?.twilioAccount.organization.subscriptions.length === 0) {
 				// decline the outgoing call because
 				// the organization is on the free plan
-				return new Response(null, { status: 402 });
+				console.log("no active subscription"); // TODO: uncomment the line below
+				// return new Response(null, { status: 402 });
 			}
 
 			const encryptedAuthToken = phoneNumber?.twilioAccount.authToken;

app/service-worker/cache-utils.ts

@@ -59,6 +59,10 @@ const lastTimeRevalidated: Record<string, number> = {};
 
 export function fetchLoaderData(event: FetchEvent): Promise<Response> {
 	const url = new URL(event.request.url);
+	if (url.pathname === "/outgoing-call/twilio-token") {
+		return fetch(event.request);
+	}
+
 	const path = url.pathname + url.search;
 
 	return caches.match(event.request, { cacheName: DATA_CACHE }).then((cachedResponse) => {

app/utils/twilio.server.ts

@@ -17,9 +17,9 @@ export default function getTwilioClient({
 	return twilio(accountSid, decrypt(authToken));
 }
 
-export const smsUrl = `https://${serverConfig.app.baseUrl}/webhook/message`;
+export const smsUrl = `${serverConfig.app.baseUrl}/webhook/message`;
 
-export const voiceUrl = `https://${serverConfig.app.baseUrl}/webhook/call`;
+export const voiceUrl = `${serverConfig.app.baseUrl}/webhook/call`;
 
 export function getTwiMLName() {
 	switch (serverConfig.app.baseUrl) {