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

144 lines
3.7 KiB
TypeScript
Raw Normal View History

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";
2021-07-31 14:33:18 +00:00
import db from "../../../../db";
import OnboardingLayout from "../../components/onboarding-layout";
import setPhoneNumber from "../../mutations/set-phone-number";
2021-07-31 14:33:18 +00:00
type PhoneNumber = {
phoneNumber: string;
sid: string;
};
2021-07-31 14:33:18 +00:00
type Props = {
availablePhoneNumbers: PhoneNumber[];
};
2021-07-31 14:33:18 +00:00
type Form = {
phoneNumberSid: string;
};
2021-07-31 14:33:18 +00:00
const StepThree: BlitzPage<Props> = ({ availablePhoneNumbers }) => {
const {
register,
handleSubmit,
setValue,
formState: { isSubmitting },
} = useForm<Form>();
const router = useRouter();
const [setPhoneNumberMutation] = useMutation(setPhoneNumber);
2021-07-31 14:33:18 +00:00
useEffect(() => {
if (availablePhoneNumbers[0]) {
setValue("phoneNumberSid", availablePhoneNumbers[0].sid);
2021-07-31 14:33:18 +00:00
}
});
2021-07-31 14:33:18 +00:00
const onSubmit = handleSubmit(async ({ phoneNumberSid }) => {
if (isSubmitting) {
return;
2021-07-31 14:33:18 +00:00
}
await setPhoneNumberMutation({ phoneNumberSid });
await router.push(Routes.Messages());
});
2021-07-31 14:33:18 +00:00
return (
2021-08-01 03:05:40 +00:00
<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>
2021-07-31 14:33:18 +00:00
2021-08-01 03:05:40 +00:00
<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",
2021-08-01 12:04:04 +00:00
isSubmitting && "bg-primary-400 cursor-not-allowed",
2021-08-01 03:05:40 +00:00
)}
>
Save
</button>
</form>
</div>
);
};
2021-07-31 14:33:18 +00:00
2021-08-01 03:05:40 +00:00
StepThree.getLayout = (page) => (
<OnboardingLayout currentStep={3} previous={{ href: Routes.StepTwo().pathname, label: "Back" }}>
{page}
</OnboardingLayout>
);
StepThree.authenticate = { redirectTo: Routes.SignIn() };
2021-07-31 14:33:18 +00:00
export const getServerSideProps: GetServerSideProps<Props> = async ({ req, res }) => {
const session = await getSession(req, res);
2021-07-31 17:22:48 +00:00
if (!session.userId) {
await session.$revoke();
return {
redirect: {
destination: Routes.Home().pathname,
permanent: false,
},
};
}
const phoneNumber = await db.phoneNumber.findFirst({ where: { customerId: session.userId } });
if (phoneNumber) {
2021-08-01 14:01:51 +00:00
await session.$setPublicData({ hasCompletedOnboarding: true });
2021-07-31 17:22:48 +00:00
return {
redirect: {
destination: Routes.Messages().pathname,
permanent: false,
},
};
}
const customer = await db.customer.findFirst({ where: { id: session.userId } });
2021-07-31 14:33:18 +00:00
if (!customer) {
return {
redirect: {
destination: Routes.StepOne().pathname,
permanent: false,
},
};
2021-07-31 14:33:18 +00:00
}
if (!customer.accountSid || !customer.authToken) {
return {
redirect: {
destination: Routes.StepTwo().pathname,
permanent: false,
},
};
2021-07-31 14:33:18 +00:00
}
2021-08-01 14:01:51 +00:00
const incomingPhoneNumbers = await twilio(customer.accountSid, customer.authToken).incomingPhoneNumbers.list();
const phoneNumbers = incomingPhoneNumbers.map(({ phoneNumber, sid }) => ({ phoneNumber, sid }));
2021-07-31 14:33:18 +00:00
return {
props: {
availablePhoneNumbers: phoneNumbers,
},
};
};
2021-07-31 14:33:18 +00:00
export default StepThree;