attach phone numbers to twilio account

app/features/settings/actions/phone.ts

@@ -41,7 +41,15 @@ const action: ActionFunction = async ({ request }) => {
 export type SetPhoneNumberActionData = FormActionData<typeof validations, "setPhoneNumber">;
 
 async function setPhoneNumber(request: Request, formData: unknown) {
-	const { organization } = await requireLoggedIn(request);
+	const { organization, twilio } = await requireLoggedIn(request);
+	if (!twilio) {
+		return badRequest<SetPhoneNumberActionData>({
+			setPhoneNumber: {
+				errors: { general: "Connect your Twilio account first" },
+			},
+		});
+	}
+
 	const validation = validate(validations.setPhoneNumber, formData);
 	if (validation.errors) {
 		return badRequest<SetPhoneNumberActionData>({ setPhoneNumber: { errors: validation.errors } });
@@ -49,7 +57,7 @@ async function setPhoneNumber(request: Request, formData: unknown) {
 
 	try {
 		await db.phoneNumber.update({
-			where: { organizationId_isCurrent: { organizationId: organization.id, isCurrent: true } },
+			where: { twilioAccountSid_isCurrent: { twilioAccountSid: twilio.accountSid, isCurrent: true } },
 			data: { isCurrent: false },
 		});
 	} catch (error: any) {
@@ -150,7 +158,7 @@ async function setTwilioCredentials(request: Request, formData: unknown) {
 				await db.phoneNumber.create({
 					data: {
 						id: phoneNumberId,
-						organizationId: organization.id,
+						twilioAccountSid,
 						number: phoneNumber.phoneNumber,
 						isCurrent: false,
 						isFetchingCalls: true,
@@ -187,7 +195,7 @@ async function setTwilioCredentials(request: Request, formData: unknown) {
 }
 
 async function refreshPhoneNumbers(request: Request) {
-	const { organization, twilio } = await requireLoggedIn(request);
+	const { twilio } = await requireLoggedIn(request);
 	if (!twilio) {
 		throw new Error("unreachable");
 	}
@@ -205,28 +213,28 @@ async function refreshPhoneNumbers(request: Request) {
 				await db.phoneNumber.create({
 					data: {
 						id: phoneNumberId,
-						organizationId: organization.id,
+						twilioAccountSid: twilioAccount.accountSid,
 						number: phoneNumber.phoneNumber,
 						isCurrent: false,
 						isFetchingCalls: true,
 						isFetchingMessages: true,
 					},
 				});
-
-				await Promise.all([
-					fetchPhoneCallsQueue.add(`fetch calls of id=${phoneNumberId}`, {
-						phoneNumberId,
-					}),
-					fetchMessagesQueue.add(`fetch messages of id=${phoneNumberId}`, {
-						phoneNumberId,
-					}),
-				]);
 			} catch (error: any) {
 				if (error.code !== "P2002") {
 					// if it's not a duplicate, it's a real error we need to handle
 					throw error;
 				}
 			}
+
+			await Promise.all([
+				fetchPhoneCallsQueue.add(`fetch calls of id=${phoneNumberId}`, {
+					phoneNumberId,
+				}),
+				fetchMessagesQueue.add(`fetch messages of id=${phoneNumberId}`, {
+					phoneNumberId,
+				}),
+			]);
 		}),
 	);
 

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

@@ -10,13 +10,16 @@ import type { SetPhoneNumberActionData } from "~/features/settings/actions/phone
 import clsx from "clsx";
 
 export default function PhoneNumberForm() {
-	const { twilio } = useSession();
+	const { twilio, phoneNumber } = useSession();
 	const fetcher = useFetcher();
 	const transition = useTransition();
 	const actionData = useActionData<SetPhoneNumberActionData>()?.setPhoneNumber;
 	const availablePhoneNumbers = useLoaderData<PhoneSettingsLoaderData>().phoneNumbers;
 
-	const isSubmitting = transition.state === "submitting";
+	const actionSubmitted = transition.submission?.formData.get("_action");
+	const isCurrentFormTransition =
+		!!actionSubmitted && ["setPhoneNumber", "refreshPhoneNumbers"].includes(actionSubmitted.toString());
+	const isSubmitting = isCurrentFormTransition && transition.state === "submitting";
 	const isSuccess = actionData?.submitted === true;
 	const errors = actionData?.errors;
 	const topErrorMessage = errors?.general ?? errors?.phoneNumberSid;

app/features/settings/components/phone/twilio-connect.tsx

@@ -20,7 +20,7 @@ export default function TwilioConnect() {
 
 	const topErrorMessage = actionData?.errors?.general;
 	const isError = typeof topErrorMessage !== "undefined";
-	const isCurrentFormTransition = transition.submission?.formData.get("_action") === "changePassword";
+	const isCurrentFormTransition = transition.submission?.formData.get("_action") === "setTwilioCredentials";
 	const isSubmitting = isCurrentFormTransition && transition.state === "submitting";
 
 	return (

app/features/settings/loaders/phone.ts

@@ -20,7 +20,7 @@ const loader: LoaderFunction = async ({ request }) => {
 	}
 
 	const phoneNumbers = await db.phoneNumber.findMany({
-		where: { organizationId: organization.id },
+		where: { twilioAccount: { organizationId: organization.id } },
 		select: { id: true, number: true, isCurrent: true },
 		orderBy: { id: Prisma.SortOrder.desc },
 	});