set your twilio things from settings

app/settings/api/queue/set-twilio-webhooks.ts

@@ -0,0 +1,78 @@
+import { Queue } from "quirrel/blitz";
+import type twilio from "twilio";
+import type { ApplicationInstance } from "twilio/lib/rest/api/v2010/account/application";
+
+import db from "db";
+import getTwilioClient, { getTwiMLName, smsUrl, voiceUrl } from "integrations/twilio";
+
+type Payload = {
+	organizationId: string;
+	phoneNumberId: string;
+};
+
+const setTwilioWebhooks = Queue<Payload>("api/queue/set-twilio-webhooks", async ({ organizationId, phoneNumberId }) => {
+	const phoneNumber = await db.phoneNumber.findFirst({
+		where: { id: phoneNumberId, organizationId },
+		include: { organization: true },
+	});
+	if (!phoneNumber) {
+		return;
+	}
+
+	const organization = phoneNumber.organization;
+	const twilioClient = getTwilioClient(organization);
+	const twimlApp = await getTwimlApplication(twilioClient, organization.twimlAppSid);
+	const twimlAppSid = twimlApp.sid;
+
+	await Promise.all([
+		db.organization.update({
+			where: { id: organizationId },
+			data: { twimlAppSid },
+		}),
+		twilioClient.incomingPhoneNumbers.get(phoneNumber.id).update({
+			smsApplicationSid: twimlAppSid,
+			voiceApplicationSid: twimlAppSid,
+		}),
+	]);
+});
+
+async function getTwimlApplication(
+	twilioClient: twilio.Twilio,
+	organizationTwimlAppSid: string | null,
+): Promise<ApplicationInstance> {
+	try {
+		if (organizationTwimlAppSid) {
+			return await updateTwimlApplication(twilioClient, organizationTwimlAppSid);
+		}
+	} catch {
+		// twiml app with sid `organizationTwimlAppSid` probably doesn't exist anymore
+	}
+
+	const twimlApps = await twilioClient.applications.list();
+	const twimlApp = twimlApps.find((app) => app.friendlyName.startsWith("Shellphone"));
+	if (twimlApp) {
+		return updateTwimlApplication(twilioClient, twimlApp.sid);
+	}
+
+	return twilioClient.applications.create({
+		friendlyName: getTwiMLName(),
+		smsUrl,
+		smsMethod: "POST",
+		voiceUrl,
+		voiceMethod: "POST",
+	});
+}
+
+async function updateTwimlApplication(twilioClient: twilio.Twilio, twimlAppSid: string) {
+	await twilioClient.applications.get(twimlAppSid).update({
+		friendlyName: getTwiMLName(),
+		smsUrl,
+		smsMethod: "POST",
+		voiceUrl,
+		voiceMethod: "POST",
+	});
+
+	return twilioClient.applications.get(twimlAppSid).fetch();
+}
+
+export default setTwilioWebhooks;

app/settings/api/queue/subscription-created.ts

@@ -9,7 +9,7 @@ import type { Metadata } from "integrations/paddle";
 import { translateSubscriptionStatus } from "integrations/paddle";
 import fetchMessagesQueue from "../../../messages/api/queue/fetch-messages";
 import fetchCallsQueue from "../../../phone-calls/api/queue/fetch-calls";
-import setTwilioWebhooks from "../../../onboarding/api/queue/set-twilio-webhooks";
+import setTwilioWebhooks from "./set-twilio-webhooks";
 
 const logger = appLogger.child({ queue: "subscription-created" });
 

app/settings/components/phone/help-modal.tsx

@@ -0,0 +1,57 @@
+import type { FunctionComponent } from "react";
+import { useRef } from "react";
+
+import Modal, { ModalTitle } from "app/core/components/modal";
+
+type Props = {
+	isHelpModalOpen: boolean;
+	closeModal: () => void;
+};
+
+const HelpModal: FunctionComponent<Props> = ({ isHelpModalOpen, closeModal }) => {
+	const modalCloseButtonRef = useRef<HTMLButtonElement>(null);
+	return (
+		<Modal initialFocus={modalCloseButtonRef} isOpen={isHelpModalOpen} onClose={closeModal}>
+			<div className="md:flex md:items-start">
+				<div className="mt-3 text-center md:mt-0 md:ml-4 md:text-left">
+					<ModalTitle>Need help finding your Twilio credentials?</ModalTitle>
+					<div className="mt-6 space-y-3 text-gray-500">
+						<p>
+							You can check out our{" "}
+							<a className="underline" href="https://docs.shellphone.app/guide/getting-started">
+								getting started
+							</a>{" "}
+							guide to set up your account with your Twilio credentials.
+						</p>
+						<p>
+							If you feel stuck, pick a date & time on{" "}
+							<a className="underline" href="https://calendly.com/shellphone-onboarding">
+								our calendly
+							</a>{" "}
+							and we will help you get started!
+						</p>
+						<p>
+							Don&#39;t miss out on free $10 Twilio credit by using{" "}
+							<a className="underline" href="https://www.twilio.com/referral/gNvX8p">
+								our referral link
+							</a>
+							.
+						</p>
+					</div>
+				</div>
+			</div>
+			<div className="mt-5 md:mt-4 md:flex md:flex-row-reverse">
+				<button
+					ref={modalCloseButtonRef}
+					type="button"
+					className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-primary-500 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 md:mt-0 md:w-auto"
+					onClick={closeModal}
+				>
+					Noted, thanks the help!
+				</button>
+			</div>
+		</Modal>
+	);
+};
+
+export default HelpModal;

app/settings/components/phone/phone-number-form.tsx

@@ -0,0 +1,76 @@
+import { useEffect } from "react";
+import { useMutation, useQuery } from "blitz";
+import { useForm } from "react-hook-form";
+
+import setPhoneNumber from "../../mutations/set-phone-number";
+import getAvailablePhoneNumbers from "../../queries/get-available-phone-numbers";
+import useCurrentUser from "app/core/hooks/use-current-user";
+import useUserPhoneNumber from "app/core/hooks/use-current-phone-number";
+import Button from "../button";
+import SettingsSection from "../settings-section";
+
+type Form = {
+	phoneNumberSid: string;
+};
+
+export default function PhoneNumberForm() {
+	const { hasFilledTwilioCredentials } = useCurrentUser();
+	const currentPhoneNumber = useUserPhoneNumber();
+	const {
+		register,
+		handleSubmit,
+		setValue,
+		formState: { isSubmitting },
+	} = useForm<Form>();
+	const [setPhoneNumberMutation] = useMutation(setPhoneNumber);
+	const [availablePhoneNumbers] = useQuery(getAvailablePhoneNumbers, {}, { enabled: hasFilledTwilioCredentials });
+
+	useEffect(() => {
+		if (currentPhoneNumber) {
+			setValue("phoneNumberSid", currentPhoneNumber.id);
+		}
+	}, [currentPhoneNumber]);
+
+	const onSubmit = handleSubmit(async ({ phoneNumberSid }) => {
+		if (isSubmitting) {
+			return;
+		}
+
+		await setPhoneNumberMutation({ phoneNumberSid });
+	});
+
+	if (!hasFilledTwilioCredentials) {
+		return null;
+	}
+
+	return (
+		<form onSubmit={onSubmit} className="flex flex-col gap-6">
+			<SettingsSection
+				className="relative"
+				footer={
+					<div className="px-4 py-3 bg-gray-50 text-right text-sm font-medium sm:px-6">
+						<Button variant="default" type="submit" isDisabled={isSubmitting}>
+							{isSubmitting ? "Saving..." : "Save"}
+						</Button>
+					</div>
+				}
+			>
+				<label htmlFor="phoneNumberSid" className="block text-sm font-medium text-gray-700">
+					Phone number
+				</label>
+				<select
+					id="phoneNumberSid"
+					className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md"
+					{...register("phoneNumberSid")}
+				>
+					<option value="none" />
+					{availablePhoneNumbers?.map(({ sid, phoneNumber }) => (
+						<option value={sid} key={sid}>
+							{phoneNumber}
+						</option>
+					))}
+				</select>
+			</SettingsSection>
+		</form>
+	);
+}

app/settings/components/phone/twilio-api-form.tsx

@@ -0,0 +1,90 @@
+import { useEffect, useState } from "react";
+import { useMutation } from "blitz";
+import { useForm } from "react-hook-form";
+import { IoHelpCircle } from "react-icons/io5";
+
+import setTwilioApiFields from "../../mutations/set-twilio-api-fields";
+import useCurrentUser from "app/core/hooks/use-current-user";
+import HelpModal from "./help-modal";
+import Button from "../button";
+import SettingsSection from "../settings-section";
+
+type Form = {
+	twilioAccountSid: string;
+	twilioAuthToken: string;
+};
+
+export default function TwilioApiForm() {
+	const {
+		register,
+		handleSubmit,
+		setValue,
+		formState: { isSubmitting },
+	} = useForm<Form>();
+	const { organization, refetch } = useCurrentUser();
+	const [setTwilioApiFieldsMutation] = useMutation(setTwilioApiFields);
+	const [isHelpModalOpen, setIsHelpModalOpen] = useState(false);
+
+	useEffect(() => {
+		setValue("twilioAuthToken", organization?.twilioAuthToken ?? "");
+		setValue("twilioAccountSid", organization?.twilioAccountSid ?? "");
+	}, [setValue, organization?.twilioAuthToken, organization?.twilioAccountSid]);
+
+	const onSubmit = handleSubmit(async ({ twilioAccountSid, twilioAuthToken }) => {
+		if (isSubmitting) {
+			return;
+		}
+
+		await setTwilioApiFieldsMutation({ twilioAccountSid, twilioAuthToken });
+		await refetch();
+	});
+
+	return (
+		<>
+			<form onSubmit={onSubmit} className="flex flex-col gap-6">
+				<SettingsSection
+					className="relative"
+					footer={
+						<div className="px-4 py-3 bg-gray-50 text-right text-sm font-medium sm:px-6">
+							<Button variant="default" type="submit" isDisabled={isSubmitting}>
+								{isSubmitting ? "Saving..." : "Save"}
+							</Button>
+						</div>
+					}
+				>
+					<button onClick={() => setIsHelpModalOpen(true)} className="absolute top-2 right-2">
+						<IoHelpCircle className="w-6 h-6 text-primary-700" />
+					</button>
+					<article>
+						Shellphone needs some informations about your Twilio account to securely use your phone numbers.
+					</article>
+
+					<div className="w-full">
+						<label htmlFor="twilioAccountSid" className="block text-sm font-medium text-gray-700">
+							Twilio Account SID
+						</label>
+						<input
+							type="text"
+							id="twilioAccountSid"
+							className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
+							{...register("twilioAccountSid", { required: false })}
+						/>
+					</div>
+					<div className="w-full">
+						<label htmlFor="twilioAuthToken" className="block text-sm font-medium text-gray-700">
+							Twilio Auth Token
+						</label>
+						<input
+							type="text"
+							id="twilioAuthToken"
+							className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
+							{...register("twilioAuthToken", { required: false })}
+						/>
+					</div>
+				</SettingsSection>
+			</form>
+
+			<HelpModal closeModal={() => setIsHelpModalOpen(false)} isHelpModalOpen={isHelpModalOpen} />
+		</>
+	);
+}

app/settings/mutations/set-phone-number.ts

@@ -0,0 +1,51 @@
+import { resolver } from "blitz";
+import { z } from "zod";
+import twilio from "twilio";
+
+import db from "db";
+import getCurrentUser from "app/users/queries/get-current-user";
+import setTwilioWebhooks from "../api/queue/set-twilio-webhooks";
+
+const Body = z.object({
+	phoneNumberSid: z.string(),
+});
+
+export default resolver.pipe(resolver.zod(Body), resolver.authorize(), async ({ phoneNumberSid }, context) => {
+	const user = await getCurrentUser(null, context);
+	const organization = user?.memberships[0]!.organization;
+	if (!user || !organization || !organization.twilioAccountSid || !organization.twilioAuthToken) {
+		return;
+	}
+
+	const phoneNumbers = await twilio(
+		organization.twilioAccountSid,
+		organization.twilioAuthToken,
+	).incomingPhoneNumbers.list();
+	const phoneNumber = phoneNumbers.find((phoneNumber) => phoneNumber.sid === phoneNumberSid)!;
+	const organizationId = organization.id;
+	await db.phoneNumber.create({
+		data: {
+			organizationId,
+			id: phoneNumberSid,
+			number: phoneNumber.phoneNumber,
+		},
+	});
+
+	const mainTwilioClient = twilio(organization.twilioAccountSid, organization.twilioAuthToken);
+	const apiKey = await mainTwilioClient.newKeys.create({ friendlyName: "Shellphone API key" });
+	await db.organization.update({
+		where: { id: organizationId },
+		data: {
+			twilioApiKey: apiKey.sid,
+			twilioApiSecret: apiKey.secret,
+		},
+	});
+
+	const phoneNumberId = phoneNumberSid;
+	await Promise.all([
+		setTwilioWebhooks.enqueue(
+			{ organizationId, phoneNumberId },
+			{ id: `set-twilio-webhooks-${organizationId}-${phoneNumberId}` },
+		),
+	]);
+});

app/settings/mutations/set-twilio-api-fields.ts

@@ -0,0 +1,42 @@
+import { resolver } from "blitz";
+import { z } from "zod";
+
+import db from "db";
+import getCurrentUser from "app/users/queries/get-current-user";
+
+const Body = z.object({
+	twilioAccountSid: z.string(),
+	twilioAuthToken: z.string(),
+});
+
+export default resolver.pipe(
+	resolver.zod(Body),
+	resolver.authorize(),
+	async ({ twilioAccountSid, twilioAuthToken }, context) => {
+		const user = await getCurrentUser(null, context);
+		if (!user) {
+			return;
+		}
+
+		const organizationId = user.memberships[0]!.organizationId;
+		await db.organization.update({
+			where: { id: organizationId },
+			data: {
+				twilioAccountSid: twilioAccountSid,
+				twilioAuthToken: twilioAuthToken,
+			},
+		});
+
+		const phoneNumber = await db.phoneNumber.findFirst({ where: { organizationId } });
+		if (phoneNumber) {
+			await db.phoneNumber.delete({
+				where: {
+					organizationId_id: {
+						organizationId,
+						id: phoneNumber.id,
+					},
+				},
+			});
+		}
+	},
+);

app/settings/pages/settings/phone.tsx

@@ -1,12 +1,26 @@
+import { Suspense } from "react";
 import type { BlitzPage } from "blitz";
-import { Routes } from "blitz";
+import { Routes, dynamic } from "blitz";
 
 import SettingsLayout from "../../components/settings-layout";
+import PhoneNumberForm from "../../components/phone/phone-number-form";
 
 const PhoneSettings: BlitzPage = () => {
-	return <div>Coming soon</div>;
+	return (
+		<div className="flex flex-col space-y-6">
+			<Suspense fallback="Loading...">
+				<TwilioApiForm />
+				<PhoneNumberForm />
+			</Suspense>
+		</div>
+	);
 };
 
+const TwilioApiForm = dynamic(() => import("../../components/phone/twilio-api-form"), {
+	ssr: false,
+	loading: () => null,
+});
+
 PhoneSettings.getLayout = (page) => <SettingsLayout>{page}</SettingsLayout>;
 
 PhoneSettings.authenticate = { redirectTo: Routes.SignIn() };

app/settings/queries/get-available-phone-numbers.ts

@@ -0,0 +1,21 @@
+import { NotFoundError, resolver } from "blitz";
+
+import db from "db";
+import twilio from "twilio";
+
+export default resolver.pipe(resolver.authorize(), async (_ = null, { session }) => {
+	if (!session.orgId) {
+		throw new NotFoundError();
+	}
+
+	const organization = await db.organization.findFirst({ where: { id: session.orgId } });
+	if (!organization || !organization.twilioAccountSid || !organization.twilioAuthToken) {
+		throw new NotFoundError();
+	}
+
+	const incomingPhoneNumbers = await twilio(
+		organization.twilioAccountSid,
+		organization.twilioAuthToken,
+	).incomingPhoneNumbers.list();
+	return incomingPhoneNumbers.map(({ phoneNumber, sid }) => ({ phoneNumber, sid }));
+});