migrate to blitzjs

app/onboarding/components/onboarding-layout.tsx

@@ -0,0 +1,113 @@
+import type { FunctionComponent } from "react"
+import { CheckIcon } from "@heroicons/react/solid"
+import clsx from "clsx"
+import { Link, Routes, useRouter } from "blitz"
+
+import useCustomerPhoneNumber from "../../core/hooks/use-customer-phone-number"
+
+type StepLink = {
+	href: string
+	label: string
+}
+
+type Props = {
+	currentStep: 1 | 2 | 3
+	previous?: StepLink
+	next?: StepLink
+}
+
+const steps = ["Welcome", "Twilio Credentials", "Pick a plan"] as const
+
+const OnboardingLayout: FunctionComponent<Props> = ({ children, currentStep, previous, next }) => {
+	const router = useRouter()
+	const customerPhoneNumber = useCustomerPhoneNumber()
+
+	if (customerPhoneNumber) {
+		throw router.push(Routes.Messages())
+	}
+
+	return (
+		<div className="bg-gray-800 fixed z-10 inset-0 overflow-y-auto">
+			<div className="min-h-screen text-center block p-0">
+				{/* This element is to trick the browser into centering the modal contents. */}
+				<span className="inline-block align-middle h-screen">&#8203;</span>
+				<div className="inline-flex flex-col bg-white rounded-lg text-left overflow-hidden shadow transform transition-all my-8 align-middle max-w-2xl w-[90%] pb-6">
+					<h3 className="text-lg leading-6 font-medium text-gray-900 px-6 py-5 border-b border-gray-100">
+						{steps[currentStep - 1]}
+					</h3>
+
+					<section className="px-6 pt-6 pb-12">{children}</section>
+
+					<nav className="grid grid-cols-1 gap-y-3 mx-auto">
+						{next ? (
+							<Link href={next.href}>
+								<a className="max-w-[240px] mx-auto w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm">
+									{next.label}
+								</a>
+							</Link>
+						) : null}
+
+						{previous ? (
+							<Link href={previous.href}>
+								<a className="max-w-[240px] mx-auto w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm">
+									{previous.label}
+								</a>
+							</Link>
+						) : null}
+
+						<ol className="flex items-center">
+							{steps.map((step, stepIdx) => {
+								const isComplete = currentStep > stepIdx + 1
+								const isCurrent = stepIdx + 1 === currentStep
+
+								return (
+									<li
+										key={step}
+										className={clsx(
+											stepIdx !== steps.length - 1 ? "pr-20 sm:pr-32" : "",
+											"relative"
+										)}
+									>
+										{isComplete ? (
+											<>
+												<div className="absolute inset-0 flex items-center">
+													<div className="h-0.5 w-full bg-primary-600" />
+												</div>
+												<a className="relative w-8 h-8 flex items-center justify-center bg-primary-600 rounded-full">
+													<CheckIcon className="w-5 h-5 text-white" />
+													<span className="sr-only">{step}</span>
+												</a>
+											</>
+										) : isCurrent ? (
+											<>
+												<div className="absolute inset-0 flex items-center">
+													<div className="h-0.5 w-full bg-gray-200" />
+												</div>
+												<a className="relative w-8 h-8 flex items-center justify-center bg-white border-2 border-primary-600 rounded-full">
+													<span className="h-2.5 w-2.5 bg-primary-600 rounded-full" />
+													<span className="sr-only">{step}</span>
+												</a>
+											</>
+										) : (
+											<>
+												<div className="absolute inset-0 flex items-center">
+													<div className="h-0.5 w-full bg-gray-200" />
+												</div>
+												<a className="group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full">
+													<span className="h-2.5 w-2.5 bg-transparent rounded-full" />
+													<span className="sr-only">{step}</span>
+												</a>
+											</>
+										)}
+									</li>
+								)
+							})}
+						</ol>
+					</nav>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default OnboardingLayout

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

@@ -0,0 +1,40 @@
+import { resolver } from "blitz"
+import { z } from "zod"
+import twilio from "twilio"
+
+import db from "../../../db"
+import getCurrentCustomer from "../../customers/queries/get-current-customer"
+import fetchMessagesQueue from "../../api/queue/fetch-messages"
+import fetchCallsQueue from "../../api/queue/fetch-calls"
+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 customer = await getCurrentCustomer(null, context)
+		const customerId = customer!.id
+		const phoneNumbers = await twilio(
+			customer!.accountSid!,
+			customer!.authToken!
+		).incomingPhoneNumbers.list()
+		const phoneNumber = phoneNumbers.find((phoneNumber) => phoneNumber.sid === phoneNumberSid)!
+		await db.phoneNumber.create({
+			data: {
+				customerId,
+				phoneNumberSid,
+				phoneNumber: phoneNumber.phoneNumber,
+			},
+		})
+
+		await Promise.all([
+			fetchMessagesQueue.enqueue({ customerId }, { id: `fetch-messages-${customerId}` }),
+			fetchCallsQueue.enqueue({ customerId }, { id: `fetch-messages-${customerId}` }),
+			setTwilioWebhooks.enqueue({ customerId }, { id: `set-twilio-webhooks-${customerId}` }),
+		])
+	}
+)

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

@@ -0,0 +1,26 @@
+import { resolver } from "blitz"
+import { z } from "zod"
+
+import db from "../../../db"
+import getCurrentCustomer from "../../customers/queries/get-current-customer"
+
+const Body = z.object({
+	twilioAccountSid: z.string(),
+	twilioAuthToken: z.string(),
+})
+
+export default resolver.pipe(
+	resolver.zod(Body),
+	resolver.authorize(),
+	async ({ twilioAccountSid, twilioAuthToken }, context) => {
+		const customer = await getCurrentCustomer(null, context)
+		const customerId = customer!.id
+		await db.customer.update({
+			where: { id: customerId },
+			data: {
+				accountSid: twilioAccountSid,
+				authToken: twilioAuthToken,
+			},
+		})
+	}
+)

app/onboarding/pages/welcome/step-one.tsx

@@ -0,0 +1,23 @@
+import type { BlitzPage } from "blitz"
+
+import OnboardingLayout from "../../components/onboarding-layout"
+import useCurrentCustomer from "../../../core/hooks/use-current-customer"
+
+const StepOne: BlitzPage = () => {
+	useCurrentCustomer() // preload for step two
+
+	return (
+		<OnboardingLayout
+			currentStep={1}
+			next={{ href: "/welcome/step-two", label: "Set up your phone number" }}
+		>
+			<div className="flex flex-col space-y-4 items-center">
+				<span>Welcome, let’s set up your virtual phone!</span>
+			</div>
+		</OnboardingLayout>
+	)
+}
+
+StepOne.authenticate = true
+
+export default StepOne

app/onboarding/pages/welcome/step-three.tsx

@@ -0,0 +1,124 @@
+import type { BlitzPage, GetServerSideProps } from "blitz"
+import { Routes, getSession, useRouter, useMutation } from "blitz"
+import { useEffect } from "react"
+import twilio from "twilio"
+import { useForm } from "react-hook-form"
+import clsx from "clsx"
+
+import db from "../../../../db"
+import OnboardingLayout from "../../components/onboarding-layout"
+import setPhoneNumber from "../../mutations/set-phone-number"
+
+type PhoneNumber = {
+	phoneNumber: string
+	sid: string
+}
+
+type Props = {
+	availablePhoneNumbers: PhoneNumber[]
+}
+
+type Form = {
+	phoneNumberSid: string
+}
+
+const StepThree: BlitzPage<Props> = ({ availablePhoneNumbers }) => {
+	const {
+		register,
+		handleSubmit,
+		setValue,
+		formState: { isSubmitting },
+	} = useForm<Form>()
+	const router = useRouter()
+	const [setPhoneNumberMutation] = useMutation(setPhoneNumber)
+
+	useEffect(() => {
+		if (availablePhoneNumbers[0]) {
+			setValue("phoneNumberSid", availablePhoneNumbers[0].sid)
+		}
+	})
+
+	const onSubmit = handleSubmit(async ({ phoneNumberSid }) => {
+		if (isSubmitting) {
+			return
+		}
+
+		await setPhoneNumberMutation({ phoneNumberSid })
+		await router.push(Routes.Messages())
+	})
+
+	return (
+		<OnboardingLayout currentStep={3} previous={{ href: "/welcome/step-two", label: "Back" }}>
+			<div className="flex flex-col space-y-4 items-center">
+				<form onSubmit={onSubmit}>
+					<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")}
+					>
+						{availablePhoneNumbers.map(({ sid, phoneNumber }) => (
+							<option value={sid} key={sid}>
+								{phoneNumber}
+							</option>
+						))}
+					</select>
+
+					<button
+						type="submit"
+						className={clsx(
+							"max-w-[240px] mt-6 mx-auto w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm",
+							!isSubmitting && "bg-primary-600 hover:bg-primary-700",
+							isSubmitting && "bg-primary-400 cursor-not-allowed"
+						)}
+					>
+						Save
+					</button>
+				</form>
+			</div>
+		</OnboardingLayout>
+	)
+}
+
+StepThree.authenticate = true
+
+export const getServerSideProps: GetServerSideProps<Props> = async ({ req, res }) => {
+	const session = await getSession(req, res)
+	const customer = await db.customer.findFirst({ where: { id: session.userId! } })
+	if (!customer) {
+		return {
+			redirect: {
+				destination: Routes.StepOne().pathname,
+				permanent: false,
+			},
+		}
+	}
+
+	if (!customer.accountSid || !customer.authToken) {
+		return {
+			redirect: {
+				destination: Routes.StepTwo().pathname,
+				permanent: false,
+			},
+		}
+	}
+
+	const incomingPhoneNumbers = await twilio(
+		customer.accountSid,
+		customer.authToken
+	).incomingPhoneNumbers.list()
+	const phoneNumbers = incomingPhoneNumbers.map(({ phoneNumber, sid }) => ({ phoneNumber, sid }))
+
+	return {
+		props: {
+			availablePhoneNumbers: phoneNumbers,
+		},
+	}
+}
+
+export default StepThree

app/onboarding/pages/welcome/step-two.tsx

@@ -0,0 +1,103 @@
+import type { BlitzPage } from "blitz"
+import { Routes, useMutation, useRouter } from "blitz"
+import clsx from "clsx"
+import { useEffect } from "react"
+import { useForm } from "react-hook-form"
+
+import OnboardingLayout from "../../components/onboarding-layout"
+import useCurrentCustomer from "../../../core/hooks/use-current-customer"
+import setTwilioApiFields from "../../mutations/set-twilio-api-fields"
+
+type Form = {
+	twilioAccountSid: string
+	twilioAuthToken: string
+}
+
+const StepTwo: BlitzPage = () => {
+	const {
+		register,
+		handleSubmit,
+		setValue,
+		formState: { isSubmitting },
+	} = useForm<Form>()
+	const router = useRouter()
+	const { customer } = useCurrentCustomer()
+	const [setTwilioApiFieldsMutation] = useMutation(setTwilioApiFields)
+
+	const initialAuthToken = customer?.authToken ?? ""
+	const initialAccountSid = customer?.accountSid ?? ""
+	const hasTwilioCredentials = initialAccountSid.length > 0 && initialAuthToken.length > 0
+	useEffect(() => {
+		setValue("twilioAuthToken", initialAuthToken)
+		setValue("twilioAccountSid", initialAccountSid)
+	}, [initialAuthToken, initialAccountSid])
+
+	const onSubmit = handleSubmit(async ({ twilioAccountSid, twilioAuthToken }) => {
+		if (isSubmitting) {
+			return
+		}
+
+		await setTwilioApiFieldsMutation({
+			twilioAccountSid,
+			twilioAuthToken,
+		})
+
+		await router.push(Routes.StepThree())
+	})
+
+	return (
+		<OnboardingLayout
+			currentStep={2}
+			next={hasTwilioCredentials ? { href: "/welcome/step-three", label: "Next" } : undefined}
+			previous={{ href: "/welcome/step-one", label: "Back" }}
+		>
+			<div className="flex flex-col space-y-4 items-center">
+				<form onSubmit={onSubmit} className="flex flex-col gap-6">
+					<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: true })}
+						/>
+					</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: true })}
+						/>
+					</div>
+
+					<button
+						type="submit"
+						className={clsx(
+							"max-w-[240px] mx-auto w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm",
+							!isSubmitting && "bg-primary-600 hover:bg-primary-700",
+							isSubmitting && "bg-primary-400 cursor-not-allowed"
+						)}
+					>
+						Save
+					</button>
+				</form>
+			</div>
+		</OnboardingLayout>
+	)
+}
+
+StepTwo.authenticate = true
+
+export default StepTwo