prettier

app/api/newsletter/subscribe.ts

@@ -13,10 +13,7 @@ const bodySchema = zod.object({
 	email: zod.string().email(),
 });
 
-export default async function subscribeToNewsletter(
+export default async function subscribeToNewsletter(req: BlitzApiRequest, res: BlitzApiResponse<Response>) {
-	req: BlitzApiRequest,
-	res: BlitzApiResponse<Response>,
-) {
 	if (req.method !== "POST") {
 		const statusCode = 405;
 		const apiError: ApiError = {

app/auth/components/login-form.tsx

@@ -30,20 +30,14 @@ export const LoginForm = (props: LoginFormProps) => {
 						} else {
 							return {
 								[FORM_ERROR]:
-									"Sorry, we had an unexpected error. Please try again. - " +
+									"Sorry, we had an unexpected error. Please try again. - " + error.toString(),
-									error.toString(),
 							};
 						}
 					}
 				}}
 			>
 				<LabeledTextField name="email" label="Email" placeholder="Email" />
-				<LabeledTextField
+				<LabeledTextField name="password" label="Password" placeholder="Password" type="password" />
-					name="password"
-					label="Password"
-					placeholder="Password"
-					type="password"
-				/>
 				<div>
 					<Link href={Routes.ForgotPasswordPage()}>
 						<a>Forgot your password?</a>

app/auth/components/signup-form.tsx

@@ -35,12 +35,7 @@ export const SignupForm = (props: SignupFormProps) => {
 				}}
 			>
 				<LabeledTextField name="email" label="Email" placeholder="Email" />
-				<LabeledTextField
+				<LabeledTextField name="password" label="Password" placeholder="Password" type="password" />
-					name="password"
-					label="Password"
-					placeholder="Password"
-					type="password"
-				/>
 			</Form>
 		</div>
 	);

app/auth/mutations/forgot-password.test.ts

@@ -17,9 +17,7 @@ jest.mock("preview-email", () => jest.fn());
 
 describe.skip("forgotPassword mutation", () => {
 	it("does not throw error if user doesn't exist", async () => {
-		await expect(
+		await expect(forgotPassword({ email: "no-user@email.com" }, {} as Ctx)).resolves.not.toThrow();
-			forgotPassword({ email: "no-user@email.com" }, {} as Ctx),
-		).resolves.not.toThrow();
 	});
 
 	it("works correctly", async () => {

app/auth/mutations/reset-password.test.ts

@@ -58,17 +58,11 @@ describe.skip("resetPassword mutation", () => {
 
 		// Expired token
 		await expect(
-			resetPassword(
+			resetPassword({ token: expiredToken, password: newPassword, passwordConfirmation: newPassword }, mockCtx),
-				{ token: expiredToken, password: newPassword, passwordConfirmation: newPassword },
-				mockCtx,
-			),
 		).rejects.toThrowError();
 
 		// Good token
-		await resetPassword(
+		await resetPassword({ token: goodToken, password: newPassword, passwordConfirmation: newPassword }, mockCtx);
-			{ token: goodToken, password: newPassword, passwordConfirmation: newPassword },
-			mockCtx,
-		);
 
 		// Delete's the token
 		const numberOfTokens = await db.token.count({ where: { userId: user.id } });
@@ -76,8 +70,6 @@ describe.skip("resetPassword mutation", () => {
 
 		// Updates user's password
 		const updatedUser = await db.user.findFirst({ where: { id: user.id } });
-		expect(await SecurePassword.verify(updatedUser!.hashedPassword, newPassword)).toBe(
+		expect(await SecurePassword.verify(updatedUser!.hashedPassword, newPassword)).toBe(SecurePassword.VALID);
-			SecurePassword.VALID,
-		);
 	});
 });

app/auth/pages/forgot-password.tsx

@@ -17,10 +17,7 @@ const ForgotPasswordPage: BlitzPage = () => {
 			{isSuccess ? (
 				<div>
 					<h2>Request Submitted</h2>
-					<p>
+					<p>If your email is in our system, you will receive instructions to reset your password shortly.</p>
-						If your email is in our system, you will receive instructions to reset your
-						password shortly.
-					</p>
 				</div>
 			) : (
 				<Form
@@ -32,8 +29,7 @@ const ForgotPasswordPage: BlitzPage = () => {
 							await forgotPasswordMutation(values);
 						} catch (error) {
 							return {
-								[FORM_ERROR]:
+								[FORM_ERROR]: "Sorry, we had an unexpected error. Please try again.",
-									"Sorry, we had an unexpected error. Please try again.",
 							};
 						}
 					}}
@@ -47,8 +43,6 @@ const ForgotPasswordPage: BlitzPage = () => {
 
 ForgotPasswordPage.redirectAuthenticatedTo = Routes.Messages();
 
-ForgotPasswordPage.getLayout = (page) => (
+ForgotPasswordPage.getLayout = (page) => <BaseLayout title="Forgot Your Password?">{page}</BaseLayout>;
-	<BaseLayout title="Forgot Your Password?">{page}</BaseLayout>
-);
 
 export default ForgotPasswordPage;

app/auth/pages/reset-password.tsx

@@ -41,19 +41,14 @@ const ResetPasswordPage: BlitzPage = () => {
 								};
 							} else {
 								return {
-									[FORM_ERROR]:
+									[FORM_ERROR]: "Sorry, we had an unexpected error. Please try again.",
-										"Sorry, we had an unexpected error. Please try again.",
 								};
 							}
 						}
 					}}
 				>
 					<LabeledTextField name="password" label="New Password" type="password" />
-					<LabeledTextField
+					<LabeledTextField name="passwordConfirmation" label="Confirm New Password" type="password" />
-						name="passwordConfirmation"
-						label="Confirm New Password"
-						type="password"
-					/>
 				</Form>
 			)}
 		</div>

app/core/components/labeled-text-field.tsx

@@ -17,9 +17,7 @@ export const LabeledTextField = forwardRef<HTMLInputElement, LabeledTextFieldPro
 			register,
 			formState: { isSubmitting, errors },
 		} = useFormContext();
-		const error = Array.isArray(errors[name])
+		const error = Array.isArray(errors[name]) ? errors[name].join(", ") : errors[name]?.message || errors[name];
-			? errors[name].join(", ")
-			: errors[name]?.message || errors[name];
 
 		return (
 			<div {...outerProps}>

app/core/layouts/layout/index.tsx

@@ -23,12 +23,7 @@ type Props = {
 
 const logger = appLogger.child({ module: "Layout" });
 
-const Layout: FunctionComponent<Props> = ({
+const Layout: FunctionComponent<Props> = ({ children, title, pageTitle = title, hideFooter = false }) => {
-	children,
-	title,
-	pageTitle = title,
-	hideFooter = false,
-}) => {
 	return (
 		<>
 			{pageTitle ? (
@@ -60,13 +55,7 @@ type ErrorBoundaryState =
 			errorMessage: string;
 	  };
 
-const blitzErrors = [
+const blitzErrors = [RedirectError, AuthenticationError, AuthorizationError, CSRFTokenMismatchError, NotFoundError];
-	RedirectError,
-	AuthenticationError,
-	AuthorizationError,
-	CSRFTokenMismatchError,
-	NotFoundError,
-];
 
 const ErrorBoundary = withRouter(
 	class ErrorBoundary extends Component<WithRouterProps, ErrorBoundaryState> {

app/messages/api/queue/insert-incoming-message.ts

@@ -19,9 +19,7 @@ const insertIncomingMessageQueue = Queue<Payload>(
 		}
 
 		const encryptionKey = customer.encryptionKey;
-		const message = await twilio(customer.accountSid, customer.authToken)
+		const message = await twilio(customer.accountSid, customer.authToken).messages.get(messageSid).fetch();
-			.messages.get(messageSid)
-			.fetch();
 		await db.message.create({
 			data: {
 				customerId,

app/messages/api/queue/insert-messages.ts

@@ -9,28 +9,25 @@ type Payload = {
 	messages: MessageInstance[];
 };
 
-const insertMessagesQueue = Queue<Payload>(
+const insertMessagesQueue = Queue<Payload>("api/queue/insert-messages", async ({ messages, customerId }) => {
-	"api/queue/insert-messages",
+	const customer = await db.customer.findFirst({ where: { id: customerId } });
-	async ({ messages, customerId }) => {
+	const encryptionKey = customer!.encryptionKey;
-		const customer = await db.customer.findFirst({ where: { id: customerId } });
-		const encryptionKey = customer!.encryptionKey;
 
-		const sms = messages
+	const sms = messages
-			.map<Omit<Message, "id">>((message) => ({
+		.map<Omit<Message, "id">>((message) => ({
-				customerId,
+			customerId,
-				content: encrypt(message.body, encryptionKey),
+			content: encrypt(message.body, encryptionKey),
-				from: message.from,
+			from: message.from,
-				to: message.to,
+			to: message.to,
-				status: translateStatus(message.status),
+			status: translateStatus(message.status),
-				direction: translateDirection(message.direction),
+			direction: translateDirection(message.direction),
-				twilioSid: message.sid,
+			twilioSid: message.sid,
-				sentAt: new Date(message.dateCreated),
+			sentAt: new Date(message.dateCreated),
-			}))
+		}))
-			.sort((a, b) => a.sentAt.getTime() - b.sentAt.getTime());
+		.sort((a, b) => a.sentAt.getTime() - b.sentAt.getTime());
 
-		await db.message.createMany({ data: sms });
+	await db.message.createMany({ data: sms });
-	},
+});
-);
 
 export default insertMessagesQueue;
 

app/messages/api/queue/send-message.ts

@@ -17,10 +17,7 @@ const sendMessageQueue = Queue<Payload>(
 		const phoneNumber = await db.phoneNumber.findFirst({ where: { customerId } });
 
 		try {
-			const message = await twilio(
+			const message = await twilio(customer!.accountSid!, customer!.authToken!).messages.create({
-				customer!.accountSid!,
-				customer!.authToken!,
-			).messages.create({
 				body: content,
 				to,
 				from: phoneNumber!.phoneNumber,

app/messages/api/webhook/incoming-message.ts

@@ -57,12 +57,7 @@ export default async function incomingMessageHandler(req: BlitzApiRequest, res:
 		}
 
 		const url = `https://${serverRuntimeConfig.app.baseUrl}/api/webhook/incoming-message`;
-		const isRequestValid = twilio.validateRequest(
+		const isRequestValid = twilio.validateRequest(customer.authToken, twilioSignature, url, req.body);
-			customer.authToken,
-			twilioSignature,
-			url,
-			req.body,
-		);
 		if (!isRequestValid) {
 			const statusCode = 400;
 			const apiError: ApiError = {

app/messages/components/conversation.tsx

@@ -28,8 +28,7 @@ export default function Conversation() {
 						const isSameNext = message.from === nextMessage?.from;
 						const isSamePrevious = message.from === previousMessage?.from;
 						const differenceInMinutes = previousMessage
-							? (new Date(message.sentAt).getTime() -
+							? (new Date(message.sentAt).getTime() - new Date(previousMessage.sentAt).getTime()) /
-									new Date(previousMessage.sentAt).getTime()) /
 							  1000 /
 							  60
 							: 0;
@@ -63,9 +62,7 @@ export default function Conversation() {
 									<span
 										className={clsx(
 											"inline-block text-left w-[fit-content] p-2 rounded-lg text-white",
-											isOutbound
+											isOutbound ? "bg-[#3194ff] rounded-br-none" : "bg-black rounded-bl-none",
-												? "bg-[#3194ff] rounded-br-none"
-												: "bg-black rounded-bl-none",
 										)}
 									>
 										{message.content}

app/messages/components/conversations-list.tsx

@@ -23,9 +23,7 @@ export default function ConversationsList() {
 							<a className="flex flex-col">
 								<div className="flex flex-row justify-between">
 									<strong>{recipient}</strong>
-									<div>
+									<div>{new Date(lastMessage.sentAt).toLocaleString("fr-FR")}</div>
-										{new Date(lastMessage.sentAt).toLocaleString("fr-FR")}
-									</div>
 								</div>
 								<div>{lastMessage.content}</div>
 							</a>

app/messages/components/new-message-bottom-sheet.tsx

@@ -41,9 +41,7 @@ export default function NewMessageBottomSheet() {
 					<NewMessageArea
 						recipient={recipient}
 						onSend={() => {
-							router
+							router.push(Routes.ConversationPage({ recipient })).then(() => setIsOpen(false));
-								.push(Routes.ConversationPage({ recipient }))
-								.then(() => setIsOpen(false));
 						}}
 					/>
 				</Suspense>

app/messages/mutations/send-message.ts

@@ -16,45 +16,39 @@ const Body = z.object({
 	to: z.string(),
 });
 
-export default resolver.pipe(
+export default resolver.pipe(resolver.zod(Body), resolver.authorize(), async ({ content, to }, context) => {
-	resolver.zod(Body),
+	const customer = await getCurrentCustomer(null, context);
-	resolver.authorize(),
+	try {
-	async ({ content, to }, context) => {
+		await twilio(customer!.accountSid!, customer!.authToken!).lookups.v1.phoneNumbers(to).fetch();
-		const customer = await getCurrentCustomer(null, context);
+	} catch (error) {
-		try {
+		logger.error(error);
-			await twilio(customer!.accountSid!, customer!.authToken!)
+		return;
-				.lookups.v1.phoneNumbers(to)
+	}
-				.fetch();
-		} catch (error) {
-			logger.error(error);
-			return;
-		}
 
-		const customerId = customer!.id;
+	const customerId = customer!.id;
-		const customerPhoneNumber = await getCustomerPhoneNumber({ customerId }, context);
+	const customerPhoneNumber = await getCustomerPhoneNumber({ customerId }, context);
 
-		const message = await db.message.create({
+	const message = await db.message.create({
-			data: {
+		data: {
-				customerId,
+			customerId,
-				to,
+			to,
-				from: customerPhoneNumber!.phoneNumber,
+			from: customerPhoneNumber!.phoneNumber,
-				direction: Direction.Outbound,
+			direction: Direction.Outbound,
-				status: MessageStatus.Queued,
+			status: MessageStatus.Queued,
-				content: encrypt(content, customer!.encryptionKey),
+			content: encrypt(content, customer!.encryptionKey),
-				sentAt: new Date(),
+			sentAt: new Date(),
-			},
+		},
-		});
+	});
 
-		await sendMessageQueue.enqueue(
+	await sendMessageQueue.enqueue(
-			{
+		{
-				id: message.id,
+			id: message.id,
-				customerId,
+			customerId,
-				to,
+			to,
-				content,
+			content,
-			},
+		},
-			{
+		{
-				id: message.id,
+			id: message.id,
-			},
+		},
-		);
+	);
-	},
+});
-);

app/messages/pages/messages/[recipient].tsx

@@ -2,11 +2,7 @@ import { Suspense } from "react";
 import type { BlitzPage } from "blitz";
 import { Routes, useRouter } from "blitz";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
+import { faLongArrowLeft, faInfoCircle, faPhoneAlt as faPhone } from "@fortawesome/pro-regular-svg-icons";
-	faLongArrowLeft,
-	faInfoCircle,
-	faPhoneAlt as faPhone,
-} from "@fortawesome/pro-regular-svg-icons";
 
 import Layout from "../../../core/layouts/layout";
 import Conversation from "../../components/conversation";

app/messages/queries/get-conversation.ts

@@ -9,23 +9,19 @@ const GetConversations = z.object({
 	recipient: z.string(),
 });
 
-export default resolver.pipe(
+export default resolver.pipe(resolver.zod(GetConversations), resolver.authorize(), async ({ recipient }, context) => {
-	resolver.zod(GetConversations),
+	const customer = await getCurrentCustomer(null, context);
-	resolver.authorize(),
+	const conversation = await db.message.findMany({
-	async ({ recipient }, context) => {
+		where: {
-		const customer = await getCurrentCustomer(null, context);
+			OR: [{ from: recipient }, { to: recipient }],
-		const conversation = await db.message.findMany({
+		},
-			where: {
+		orderBy: { sentAt: Prisma.SortOrder.asc },
-				OR: [{ from: recipient }, { to: recipient }],
+	});
-			},
-			orderBy: { sentAt: Prisma.SortOrder.asc },
-		});
 
-		return conversation.map((message) => {
+	return conversation.map((message) => {
-			return {
+		return {
-				...message,
+			...message,
-				content: decrypt(message.content, customer!.encryptionKey),
+			content: decrypt(message.content, customer!.encryptionKey),
-			};
+		};
-		});
+	});
-	},
+});
-);

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

@@ -7,37 +7,32 @@ type Payload = {
 	customerId: string;
 };
 
-const setTwilioWebhooks = Queue<Payload>(
+const setTwilioWebhooks = Queue<Payload>("api/queue/set-twilio-webhooks", async ({ customerId }) => {
-	"api/queue/set-twilio-webhooks",
+	const customer = await db.customer.findFirst({ where: { id: customerId } });
-	async ({ customerId }) => {
+	const twimlApp = customer!.twimlAppSid
-		const customer = await db.customer.findFirst({ where: { id: customerId } });
+		? await twilio(customer!.accountSid!, customer!.authToken!).applications.get(customer!.twimlAppSid).fetch()
-		const twimlApp = customer!.twimlAppSid
+		: await twilio(customer!.accountSid!, customer!.authToken!).applications.create({
-			? await twilio(customer!.accountSid!, customer!.authToken!)
+				friendlyName: "Virtual Phone",
-					.applications.get(customer!.twimlAppSid)
+				smsUrl: "https://phone.mokhtar.dev/api/webhook/incoming-message",
-					.fetch()
+				smsMethod: "POST",
-			: await twilio(customer!.accountSid!, customer!.authToken!).applications.create({
+				voiceUrl: "https://phone.mokhtar.dev/api/webhook/incoming-call",
-					friendlyName: "Virtual Phone",
+				voiceMethod: "POST",
-					smsUrl: "https://phone.mokhtar.dev/api/webhook/incoming-message",
+		  });
-					smsMethod: "POST",
+	const twimlAppSid = twimlApp.sid;
-					voiceUrl: "https://phone.mokhtar.dev/api/webhook/incoming-call",
+	const phoneNumber = await db.phoneNumber.findFirst({ where: { customerId } });
-					voiceMethod: "POST",
-			  });
-		const twimlAppSid = twimlApp.sid;
-		const phoneNumber = await db.phoneNumber.findFirst({ where: { customerId } });
 
-		await Promise.all([
+	await Promise.all([
-			db.customer.update({
+		db.customer.update({
-				where: { id: customerId },
+			where: { id: customerId },
-				data: { twimlAppSid },
+			data: { twimlAppSid },
+		}),
+		twilio(customer!.accountSid!, customer!.authToken!)
+			.incomingPhoneNumbers.get(phoneNumber!.phoneNumberSid)
+			.update({
+				smsApplicationSid: twimlAppSid,
+				voiceApplicationSid: twimlAppSid,
 			}),
-			twilio(customer!.accountSid!, customer!.authToken!)
+	]);
-				.incomingPhoneNumbers.get(phoneNumber!.phoneNumberSid)
+});
-				.update({
-					smsApplicationSid: twimlAppSid,
-					voiceApplicationSid: twimlAppSid,
-				}),
-		]);
-	},
-);
 
 export default setTwilioWebhooks;

app/pages/_app.tsx

@@ -17,13 +17,8 @@ export default function App({ Component, pageProps }: AppProps) {
 	const getLayout = Component.getLayout || ((page) => page);
 
 	return (
-		<ErrorBoundary
+		<ErrorBoundary FallbackComponent={RootErrorFallback} onReset={useQueryErrorResetBoundary().reset}>
-			FallbackComponent={RootErrorFallback}
+			<Suspense fallback="Silence, ca pousse">{getLayout(<Component {...pageProps} />)}</Suspense>
-			onReset={useQueryErrorResetBoundary().reset}
-		>
-			<Suspense fallback="Silence, ca pousse">
-				{getLayout(<Component {...pageProps} />)}
-			</Suspense>
 		</ErrorBoundary>
 	);
 }
@@ -32,18 +27,8 @@ function RootErrorFallback({ error, resetErrorBoundary }: ErrorFallbackProps) {
 	if (error instanceof AuthenticationError) {
 		return <LoginForm onSuccess={resetErrorBoundary} />;
 	} else if (error instanceof AuthorizationError) {
-		return (
+		return <ErrorComponent statusCode={error.statusCode} title="Sorry, you are not authorized to access this" />;
-			<ErrorComponent
-				statusCode={error.statusCode}
-				title="Sorry, you are not authorized to access this"
-			/>
-		);
 	} else {
-		return (
+		return <ErrorComponent statusCode={error.statusCode || 400} title={error.message || error.name} />;
-			<ErrorComponent
-				statusCode={error.statusCode || 400}
-				title={error.message || error.name}
-			/>
-		);
 	}
 }

app/pages/index.tsx

@@ -138,9 +138,8 @@ const Home: BlitzPage = () => {
 				body {
 					padding: 0;
 					margin: 0;
-					font-family: "Libre Franklin", -apple-system, BlinkMacSystemFont, Segoe UI,
+					font-family: "Libre Franklin", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
-						Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
+						Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-						sans-serif;
 				}
 
 				* {

app/phone-calls/api/queue/fetch-calls.ts

@@ -20,9 +20,7 @@ const fetchCallsQueue = Queue<Payload>("api/queue/fetch-calls", async ({ custome
 			to: phoneNumber!.phoneNumber,
 		}),
 	]);
-	const calls = [...callsSent, ...callsReceived].sort(
+	const calls = [...callsSent, ...callsReceived].sort((a, b) => a.dateCreated.getTime() - b.dateCreated.getTime());
-		(a, b) => a.dateCreated.getTime() - b.dateCreated.getTime(),
-	);
 
 	await insertCallsQueue.enqueue(
 		{

app/phone-calls/queries/get-phone-calls.ts

@@ -1,8 +1,7 @@
 import { paginate, resolver } from "blitz";
 import db, { Prisma, Customer } from "db";
 
-interface GetPhoneCallsInput
+interface GetPhoneCallsInput extends Pick<Prisma.PhoneCallFindManyArgs, "where" | "orderBy" | "skip" | "take"> {
-	extends Pick<Prisma.PhoneCallFindManyArgs, "where" | "orderBy" | "skip" | "take"> {
 	customerId: Customer["id"];
 }
 

app/settings/components/alert.tsx

@@ -82,14 +82,8 @@ export default function Alert({ title, message, variant }: Props) {
 			<div className="flex">
 				<div className="flex-shrink-0">{variantProperties.icon}</div>
 				<div className="ml-3">
-					<h3
+					<h3 className={`text-sm leading-5 font-medium ${variantProperties.titleTextColor}`}>{title}</h3>
-						className={`text-sm leading-5 font-medium ${variantProperties.titleTextColor}`}
+					<div className={`mt-2 text-sm leading-5 ${variantProperties.messageTextColor}`}>{message}</div>
-					>
-						{title}
-					</h3>
-					<div className={`mt-2 text-sm leading-5 ${variantProperties.messageTextColor}`}>
-						{message}
-					</div>
 				</div>
 			</div>
 		</div>

app/settings/components/danger-zone.tsx

@@ -28,38 +28,28 @@ export default function DangerZone() {
 		<SettingsSection title="Danger Zone" description="Highway to the Danger Zone 𝅘𝅥𝅮">
 			<div className="shadow border border-red-300 sm:rounded-md sm:overflow-hidden">
 				<div className="flex justify-between items-center flex-row px-4 py-5 bg-white sm:p-6">
-					<p>
+					<p>Once you delete your account, all of its data will be permanently deleted.</p>
-						Once you delete your account, all of its data will be permanently deleted.
-					</p>
 
 					<span className="text-base font-medium">
-						<Button
+						<Button variant="error" type="button" onClick={() => setIsConfirmationModalOpen(true)}>
-							variant="error"
-							type="button"
-							onClick={() => setIsConfirmationModalOpen(true)}
-						>
 							Delete my account
 						</Button>
 					</span>
 				</div>
 			</div>
 
-			<Modal
+			<Modal initialFocus={modalCancelButtonRef} isOpen={isConfirmationModalOpen} onClose={closeModal}>
-				initialFocus={modalCancelButtonRef}
-				isOpen={isConfirmationModalOpen}
-				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>Delete my account</ModalTitle>
 						<div className="mt-2 text-sm text-gray-500">
 							<p>
-								Are you sure you want to delete your account? Your subscription will
+								Are you sure you want to delete your account? Your subscription will be cancelled and
-								be cancelled and your data permanently deleted.
+								your data permanently deleted.
 							</p>
 							<p>
-								You are free to create a new account with the same email address if
+								You are free to create a new account with the same email address if you ever wish to
-								you ever wish to come back.
+								come back.
 							</p>
 						</div>
 					</div>

app/settings/components/modal.tsx

@@ -32,9 +32,7 @@ const Modal: FunctionComponent<Props> = ({ children, initialFocus, isOpen, onClo
 					</Transition.Child>
 
 					{/* This element is to trick the browser into centering the modal contents. */}
-					<span className="hidden md:inline-block md:align-middle md:h-screen">
+					<span className="hidden md:inline-block md:align-middle md:h-screen">&#8203;</span>
-						&#8203;
-					</span>
 					<Transition.Child
 						as={Fragment}
 						enter="ease-out duration-300"

app/settings/components/profile-informations.tsx

@@ -61,31 +61,20 @@ const ProfileInformations: FunctionComponent = () => {
 			<form onSubmit={onSubmit}>
 				{errorMessage ? (
 					<div className="mb-8">
-						<Alert
+						<Alert title="Oops, there was an issue" message={errorMessage} variant="error" />
-							title="Oops, there was an issue"
-							message={errorMessage}
-							variant="error"
-						/>
 					</div>
 				) : null}
 
 				{isSubmitSuccessful ? (
 					<div className="mb-8">
-						<Alert
+						<Alert title="Saved successfully" message="Your changes have been saved." variant="success" />
-							title="Saved successfully"
-							message="Your changes have been saved."
-							variant="success"
-						/>
 					</div>
 				) : null}
 
 				<div className="shadow sm:rounded-md sm:overflow-hidden">
 					<div className="px-4 py-5 bg-white space-y-6 sm:p-6">
 						<div className="col-span-3 sm:col-span-2">
-							<label
+							<label htmlFor="name" className="block text-sm font-medium leading-5 text-gray-700">
-								htmlFor="name"
-								className="block text-sm font-medium leading-5 text-gray-700"
-							>
 								Name
 							</label>
 							<div className="mt-1 rounded-md shadow-sm">
@@ -101,10 +90,7 @@ const ProfileInformations: FunctionComponent = () => {
 						</div>
 
 						<div>
-							<label
+							<label htmlFor="email" className="block text-sm font-medium leading-5 text-gray-700">
-								htmlFor="email"
-								className="block text-sm font-medium leading-5 text-gray-700"
-							>
 								Email address
 							</label>
 							<div className="mt-1 rounded-md shadow-sm">

app/settings/components/update-password.tsx

@@ -60,21 +60,13 @@ const UpdatePassword: FunctionComponent = () => {
 			<form onSubmit={onSubmit}>
 				{errorMessage ? (
 					<div className="mb-8">
-						<Alert
+						<Alert title="Oops, there was an issue" message={errorMessage} variant="error" />
-							title="Oops, there was an issue"
-							message={errorMessage}
-							variant="error"
-						/>
 					</div>
 				) : null}
 
 				{isSubmitSuccessful ? (
 					<div className="mb-8">
-						<Alert
+						<Alert title="Saved successfully" message="Your changes have been saved." variant="success" />
-							title="Saved successfully"
-							message="Your changes have been saved."
-							variant="success"
-						/>
 					</div>
 				) : null}
 

app/settings/pages/settings.tsx

@@ -15,16 +15,12 @@ const navigation = [
 	{
 		name: "Account",
 		href: "/settings/account",
-		icon: ({ className = "w-8 h-8" }) => (
+		icon: ({ className = "w-8 h-8" }) => <FontAwesomeIcon size="lg" className={className} icon={faUserCircle} />,
-			<FontAwesomeIcon size="lg" className={className} icon={faUserCircle} />
-		),
 	},
 	{
 		name: "Billing",
 		href: "/settings/billing",
-		icon: ({ className = "w-8 h-8" }) => (
+		icon: ({ className = "w-8 h-8" }) => <FontAwesomeIcon size="lg" className={className} icon={faCreditCard} />,
-			<FontAwesomeIcon size="lg" className={className} icon={faCreditCard} />
-		),
 	},
 ];
 /* eslint-enable react/display-name */

db/_encryption.ts

@@ -7,9 +7,7 @@ const IV_LENGTH = 16;
 const ALGORITHM = "aes-256-cbc";
 
 export function encrypt(text: string, encryptionKey: Buffer | string) {
-	const encryptionKeyAsBuffer = Buffer.isBuffer(encryptionKey)
+	const encryptionKeyAsBuffer = Buffer.isBuffer(encryptionKey) ? encryptionKey : Buffer.from(encryptionKey, "hex");
-		? encryptionKey
-		: Buffer.from(encryptionKey, "hex");
 	const iv = crypto.randomBytes(IV_LENGTH);
 	const cipher = crypto.createCipheriv(ALGORITHM, encryptionKeyAsBuffer, iv);
 	const encrypted = cipher.update(text);
@@ -19,9 +17,7 @@ export function encrypt(text: string, encryptionKey: Buffer | string) {
 }
 
 export function decrypt(encryptedHexText: string, encryptionKey: Buffer | string) {
-	const encryptionKeyAsBuffer = Buffer.isBuffer(encryptionKey)
+	const encryptionKeyAsBuffer = Buffer.isBuffer(encryptionKey) ? encryptionKey : Buffer.from(encryptionKey, "hex");
-		? encryptionKey
-		: Buffer.from(encryptionKey, "hex");
 	const [hexIv, hexText] = encryptedHexText.split(":");
 	const iv = Buffer.from(hexIv!, "hex");
 	const encryptedText = Buffer.from(hexText!, "hex");

mailers/forgot-password-mailer.ts

@@ -35,9 +35,7 @@ export function forgotPasswordMailer({ to, token }: ResetPasswordMailer) {
 			if (process.env.NODE_ENV === "production") {
 				// TODO - send the production email, like this:
 				// await postmark.sendEmail(msg)
-				throw new Error(
+				throw new Error("No production email implementation in mailers/forgotPasswordMailer");
-					"No production email implementation in mailers/forgotPasswordMailer",
-				);
 			} else {
 				// Preview email in the browser
 				await previewEmail(msg);

test/utils.tsx

@@ -24,17 +24,12 @@ export * from "@testing-library/react";
 //   router: { pathname: '/my-custom-pathname' },
 // });
 // --------------------------------------------------
-export function render(
+export function render(ui: RenderUI, { wrapper, router, dehydratedState, ...options }: RenderOptions = {}) {
-	ui: RenderUI,
-	{ wrapper, router, dehydratedState, ...options }: RenderOptions = {},
-) {
 	if (!wrapper) {
 		// Add a default context wrapper if one isn't supplied from the test
 		wrapper = ({ children }) => (
 			<BlitzProvider dehydratedState={dehydratedState}>
-				<RouterContext.Provider value={{ ...mockRouter, ...router }}>
+				<RouterContext.Provider value={{ ...mockRouter, ...router }}>{children}</RouterContext.Provider>
-					{children}
-				</RouterContext.Provider>
 			</BlitzProvider>
 		);
 	}
@@ -52,17 +47,12 @@ export function render(
 //   router: { pathname: '/my-custom-pathname' },
 // });
 // --------------------------------------------------
-export function renderHook(
+export function renderHook(hook: RenderHook, { wrapper, router, dehydratedState, ...options }: RenderHookOptions = {}) {
-	hook: RenderHook,
-	{ wrapper, router, dehydratedState, ...options }: RenderHookOptions = {},
-) {
 	if (!wrapper) {
 		// Add a default context wrapper if one isn't supplied from the test
 		wrapper = ({ children }) => (
 			<BlitzProvider dehydratedState={dehydratedState}>
-				<RouterContext.Provider value={{ ...mockRouter, ...router }}>
+				<RouterContext.Provider value={{ ...mockRouter, ...router }}>{children}</RouterContext.Provider>
-					{children}
-				</RouterContext.Provider>
 			</BlitzProvider>
 		);
 	}