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

157 lines
4.9 KiB
TypeScript
Raw Normal View History

2021-08-01 12:04:04 +00:00
import type { FunctionComponent } from "react";
2021-08-03 18:46:47 +00:00
import { Suspense, useEffect, useState } from "react";
2021-07-31 17:22:48 +00:00
import type { BlitzPage, GetServerSideProps } from "blitz";
import { getSession, Routes, useMutation, useRouter } from "blitz";
import clsx from "clsx";
import { useForm } from "react-hook-form";
2021-08-03 18:46:47 +00:00
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faQuestionCircle } from "@fortawesome/pro-solid-svg-icons";
2021-07-18 15:32:45 +00:00
2021-07-31 17:22:48 +00:00
import db from "db";
import setTwilioApiFields from "../../mutations/set-twilio-api-fields";
import OnboardingLayout from "../../components/onboarding-layout";
2021-08-03 18:46:47 +00:00
import HelpModal from "../../components/help-modal";
2021-08-05 17:07:15 +00:00
import useCurrentUser from "../../../core/hooks/use-current-user";
2021-07-18 15:32:45 +00:00
type Form = {
twilioAccountSid: string;
twilioAuthToken: string;
};
2021-07-18 15:32:45 +00:00
2021-07-31 14:33:18 +00:00
const StepTwo: BlitzPage = () => {
2021-07-18 15:32:45 +00:00
const {
register,
handleSubmit,
setValue,
formState: { isSubmitting },
} = useForm<Form>();
const router = useRouter();
2021-08-05 17:07:15 +00:00
const { organization } = useCurrentUser();
const [setTwilioApiFieldsMutation] = useMutation(setTwilioApiFields);
2021-08-03 18:46:47 +00:00
const [isHelpModalOpen, setIsHelpModalOpen] = useState(false);
2021-07-18 15:32:45 +00:00
useEffect(() => {
2021-08-05 17:07:15 +00:00
setValue("twilioAuthToken", organization?.twilioAuthToken ?? "");
setValue("twilioAccountSid", organization?.twilioAccountSid ?? "");
}, [setValue, organization?.twilioAuthToken, organization?.twilioAccountSid]);
2021-07-18 15:32:45 +00:00
const onSubmit = handleSubmit(async ({ twilioAccountSid, twilioAuthToken }) => {
if (isSubmitting) {
return;
2021-07-18 15:32:45 +00:00
}
2021-07-31 14:33:18 +00:00
await setTwilioApiFieldsMutation({
2021-07-18 15:32:45 +00:00
twilioAccountSid,
twilioAuthToken,
});
2021-07-31 14:33:18 +00:00
await router.push(Routes.StepThree());
});
2021-07-18 15:32:45 +00:00
2021-08-01 03:05:40 +00:00
return (
2021-08-03 18:46:47 +00:00
<>
<div className="flex flex-col space-y-4 items-center relative">
<button onClick={() => setIsHelpModalOpen(true)} className="absolute top-0 right-0">
<FontAwesomeIcon size="lg" className="w-6 h-6 text-primary-700" icon={faQuestionCircle} />
2021-08-01 03:05:40 +00:00
</button>
2021-08-03 18:46:47 +00:00
<form onSubmit={onSubmit} className="flex flex-col gap-6">
2021-08-20 00:18:35 +00:00
<article>
Shellphone needs some informations about your Twilio account to securely use your phone numbers.
</article>
2021-08-03 18:46:47 +00:00
<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>
<HelpModal closeModal={() => setIsHelpModalOpen(false)} isHelpModalOpen={isHelpModalOpen} />
</>
2021-08-01 03:05:40 +00:00
);
};
2021-08-01 12:04:04 +00:00
StepTwo.getLayout = (page) => {
return (
<Suspense fallback="Silence, ca pousse">
<StepTwoLayout>{page}</StepTwoLayout>
</Suspense>
);
};
const StepTwoLayout: FunctionComponent = ({ children }) => {
2021-08-05 17:07:15 +00:00
const { organization } = useCurrentUser();
const initialAuthToken = organization?.twilioAuthToken ?? "";
const initialAccountSid = organization?.twilioAccountSid ?? "";
2021-08-01 03:05:40 +00:00
const hasTwilioCredentials = initialAccountSid.length > 0 && initialAuthToken.length > 0;
2021-07-18 15:32:45 +00:00
return (
<OnboardingLayout
currentStep={2}
2021-08-01 14:01:51 +00:00
next={hasTwilioCredentials ? { href: Routes.StepThree().pathname, label: "Next" } : undefined}
2021-08-01 03:05:40 +00:00
previous={{ href: Routes.StepOne().pathname, label: "Back" }}
2021-07-18 15:32:45 +00:00
>
2021-08-01 12:04:04 +00:00
{children}
2021-07-18 15:32:45 +00:00
</OnboardingLayout>
);
};
2021-07-18 15:32:45 +00:00
2021-08-01 03:05:40 +00:00
StepTwo.authenticate = { redirectTo: Routes.SignIn() };
2021-07-18 15:32:45 +00:00
2021-07-31 17:22:48 +00:00
export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
const session = await getSession(req, res);
if (!session.userId) {
await session.$revoke();
return {
redirect: {
2021-08-26 19:17:46 +00:00
destination: Routes.LandingPage().pathname,
2021-07-31 17:22:48 +00:00
permanent: false,
},
};
}
2021-08-05 17:07:15 +00:00
const phoneNumber = await db.phoneNumber.findFirst({ where: { organizationId: session.orgId } });
2021-08-01 14:01:51 +00:00
if (phoneNumber) {
await session.$setPublicData({ hasCompletedOnboarding: true });
return {
redirect: {
destination: Routes.Messages().pathname,
permanent: false,
},
};
2021-07-31 17:22:48 +00:00
}
2021-08-01 14:01:51 +00:00
return { props: {} };
2021-07-31 17:22:48 +00:00
};
export default StepTwo;