105 lines
3.2 KiB
TypeScript
105 lines
3.2 KiB
TypeScript
|
import type { InferGetServerSidePropsType, NextPage } from "next";
|
||
|
|
import { useRouter } from "next/router";
|
||
|
|
import { useEffect } from "react";
|
||
|
|
import { useForm } from "react-hook-form";
|
||
|
|
import axios from "axios";
|
||
|
|
|
||
|
|
import { withPageAuthRequired } from "../../../lib/session-helpers";
|
||
|
|
import OnboardingLayout from "../../components/welcome/onboarding-layout";
|
||
|
|
import clsx from "clsx";
|
||
|
|
import { findCustomer } from "../../database/customer";
|
||
|
|
|
||
|
|
type Props = InferGetServerSidePropsType<typeof getServerSideProps>;
|
||
|
|
|
||
|
|
type Form = {
|
||
|
|
twilioAccountSid: string;
|
||
|
|
twilioAuthToken: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const StepTwo: NextPage<Props> = ({ accountSid, authToken }) => {
|
||
|
|
const {
|
||
|
|
register,
|
||
|
|
handleSubmit,
|
||
|
|
setValue,
|
||
|
|
formState: { isSubmitting },
|
||
|
|
} = useForm<Form>();
|
||
|
|
const router = useRouter();
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setValue("twilioAuthToken", authToken);
|
||
|
|
setValue("twilioAccountSid", accountSid);
|
||
|
|
});
|
||
|
|
|
||
|
|
const onSubmit = handleSubmit(async ({ twilioAccountSid, twilioAuthToken }) => {
|
||
|
|
if (isSubmitting) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
await axios.post("/api/user/update-user", {
|
||
|
|
twilioAccountSid,
|
||
|
|
twilioAuthToken,
|
||
|
|
}, { withCredentials: true });
|
||
|
|
await router.push("/welcome/step-three");
|
||
|
|
});
|
||
|
|
const hasTwilioCredentials = accountSid.length > 0 && authToken.length > 0;
|
||
|
|
|
||
|
|
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>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export const getServerSideProps = withPageAuthRequired(async (context, user) => {
|
||
|
|
const customer = await findCustomer(user.id);
|
||
|
|
|
||
|
|
return {
|
||
|
|
props: {
|
||
|
|
accountSid: customer.accountSid ?? "",
|
||
|
|
authToken: customer.authToken ?? "",
|
||
|
|
},
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
export default StepTwo;
|