store twilio stuff in TwilioAccount table and remodel session data

app/features/settings/actions/account.ts

@@ -19,23 +19,25 @@ const action: ActionFunction = async ({ request }) => {
 	}
 
 	switch (formData._action as Action) {
-	case "deleteUser":
-		return deleteUser(request);
-	case "changePassword":
-		return changePassword(request, formData);
-	case "updateUser":
-		return updateUser(request, formData);
-	default:
-		const errorMessage = `POST /settings with an invalid _action=${formData._action}`;
-		logger.error(errorMessage);
-		return badRequest({ errorMessage });
+		case "deleteUser":
+			return deleteUser(request);
+		case "changePassword":
+			return changePassword(request, formData);
+		case "updateUser":
+			return updateUser(request, formData);
+		default:
+			const errorMessage = `POST /settings with an invalid _action=${formData._action}`;
+			logger.error(errorMessage);
+			return badRequest({ errorMessage });
 	}
 };
 
 export default action;
 
 async function deleteUser(request: Request) {
-	const { id } = await requireLoggedIn(request);
+	const {
+		user: { id },
+	} = await requireLoggedIn(request);
 
 	await db.user.update({
 		where: { id },
@@ -64,7 +66,9 @@ async function changePassword(request: Request, formData: unknown) {
 		});
 	}
 
-	const { id } = await requireLoggedIn(request);
+	const {
+		user: { id },
+	} = await requireLoggedIn(request);
 	const user = await db.user.findUnique({ where: { id } });
 	const { currentPassword, newPassword } = validation.data;
 	const verificationResult = await verifyPassword(user!.hashedPassword!, currentPassword);
@@ -99,7 +103,7 @@ async function updateUser(request: Request, formData: unknown) {
 		});
 	}
 
-	const user = await requireLoggedIn(request);
+	const { user } = await requireLoggedIn(request);
 	const { email, fullName } = validation.data;
 	await db.user.update({
 		where: { id: user.id },

app/features/settings/actions/phone.ts

@@ -5,14 +5,14 @@ import { z } from "zod";
 import db from "~/utils/db.server";
 import { type FormError, validate } from "~/utils/validation.server";
 import { requireLoggedIn } from "~/utils/auth.server";
+import setTwilioWebhooksQueue from "~/queues/set-twilio-webhooks.server";
 
 type SetPhoneNumberFailureActionData = { errors: FormError<typeof bodySchema>; submitted?: never };
 type SetPhoneNumberSuccessfulActionData = { errors?: never; submitted: true };
 export type SetPhoneNumberActionData = SetPhoneNumberFailureActionData | SetPhoneNumberSuccessfulActionData;
 
 const action: ActionFunction = async ({ request }) => {
-	const { organizations } = await requireLoggedIn(request);
-	const organization = organizations[0];
+	const { organization } = await requireLoggedIn(request);
 	const formData = Object.fromEntries(await request.formData());
 	const validation = validate(bodySchema, formData);
 	if (validation.errors) {
@@ -35,6 +35,11 @@ const action: ActionFunction = async ({ request }) => {
 		where: { id: validation.data.phoneNumberSid },
 		data: { isCurrent: true },
 	});
+	await setTwilioWebhooksQueue.add(`set twilio webhooks for phoneNumberId=${validation.data.phoneNumberSid}`, {
+		phoneNumberId: validation.data.phoneNumberSid,
+		organizationId: organization.id,
+	});
+	console.log("queued");
 
 	return json<SetPhoneNumberActionData>({ submitted: true });
 };

app/features/settings/components/account/profile-informations.tsx

@@ -8,7 +8,7 @@ import Button from "../button";
 import SettingsSection from "../settings-section";
 
 const ProfileInformations: FunctionComponent = () => {
-	const user = useSession();
+	const { user } = useSession();
 	const transition = useTransition();
 	const actionData = useActionData<UpdateUserActionData>()?.updateUser;
 

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

@@ -10,7 +10,7 @@ import type { SetPhoneNumberActionData } from "~/features/settings/actions/phone
 export default function PhoneNumberForm() {
 	const transition = useTransition();
 	const actionData = useActionData<SetPhoneNumberActionData>();
-	const { currentOrganization } = useSession();
+	const { twilioAccount } = useSession();
 	const availablePhoneNumbers = useLoaderData<PhoneSettingsLoaderData>().phoneNumbers;
 
 	const isSubmitting = transition.state === "submitting";
@@ -18,8 +18,8 @@ export default function PhoneNumberForm() {
 	const errors = actionData?.errors;
 	const topErrorMessage = errors?.general ?? errors?.phoneNumberSid;
 	const isError = typeof topErrorMessage !== "undefined";
-	const currentPhoneNumber = availablePhoneNumbers.find(phoneNumber => phoneNumber.isCurrent === true);
-	const hasFilledTwilioCredentials = Boolean(currentOrganization.twilioAccountSid)
+	const currentPhoneNumber = availablePhoneNumbers.find((phoneNumber) => phoneNumber.isCurrent === true);
+	const hasFilledTwilioCredentials = twilioAccount !== null;
 
 	if (!hasFilledTwilioCredentials) {
 		return null;

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

@@ -6,7 +6,7 @@ import SettingsSection from "../settings-section";
 import useSession from "~/features/core/hooks/use-session";
 
 export default function TwilioConnect() {
-	const { currentOrganization } = useSession();
+	const { twilioAccount } = useSession();
 	const [isHelpModalOpen, setIsHelpModalOpen] = useState(false);
 
 	return (
@@ -20,7 +20,7 @@ export default function TwilioConnect() {
 						Shellphone needs to connect to your Twilio account to securely use your phone numbers.
 					</article>
 
-					{currentOrganization.twilioAccountSid === null ? (
+					{twilioAccount === null ? (
 						<a
 							href="https://www.twilio.com/authorize/CN01675d385a9ee79e6aa58adf54abe3b3"
 							rel="noopener noreferrer"