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

104 lines
3.2 KiB
TypeScript
Raw Normal View History

2021-07-31 14:33:18 +00:00
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"
2021-07-18 15:32:45 +00:00
2021-07-31 14:33:18 +00:00
import OnboardingLayout from "../../components/onboarding-layout"
import useCurrentCustomer from "../../../core/hooks/use-current-customer"
import setTwilioApiFields from "../../mutations/set-twilio-api-fields"
2021-07-18 15:32:45 +00:00
type Form = {
2021-07-31 14:33:18 +00:00
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 },
2021-07-31 14:33:18 +00:00
} = useForm<Form>()
const router = useRouter()
const { customer } = useCurrentCustomer()
const [setTwilioApiFieldsMutation] = useMutation(setTwilioApiFields)
2021-07-18 15:32:45 +00:00
2021-07-31 14:33:18 +00:00
const initialAuthToken = customer?.authToken ?? ""
const initialAccountSid = customer?.accountSid ?? ""
const hasTwilioCredentials = initialAccountSid.length > 0 && initialAuthToken.length > 0
2021-07-18 15:32:45 +00:00
useEffect(() => {
2021-07-31 14:33:18 +00:00
setValue("twilioAuthToken", initialAuthToken)
setValue("twilioAccountSid", initialAccountSid)
}, [initialAuthToken, initialAccountSid])
2021-07-18 15:32:45 +00:00
const onSubmit = handleSubmit(async ({ twilioAccountSid, twilioAuthToken }) => {
if (isSubmitting) {
2021-07-31 14:33:18 +00:00
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
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">
2021-07-31 14:33:18 +00:00
<label
htmlFor="twilioAccountSid"
className="block text-sm font-medium text-gray-700"
>
2021-07-18 15:32:45 +00:00
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">
2021-07-31 14:33:18 +00:00
<label
htmlFor="twilioAuthToken"
className="block text-sm font-medium text-gray-700"
>
2021-07-18 15:32:45 +00:00
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",
2021-07-31 14:33:18 +00:00
isSubmitting && "bg-primary-400 cursor-not-allowed"
2021-07-18 15:32:45 +00:00
)}
>
Save
</button>
</form>
</div>
</OnboardingLayout>
2021-07-31 14:33:18 +00:00
)
}
2021-07-18 15:32:45 +00:00
2021-07-31 14:33:18 +00:00
StepTwo.authenticate = true
2021-07-18 15:32:45 +00:00
2021-07-31 14:33:18 +00:00
export default StepTwo