migrate to blitzjs

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