shellphone.app/app/onboarding/components/onboarding-layout.tsx

114 lines
4.0 KiB
TypeScript
Raw Normal View History

2021-07-31 14:33:18 +00:00
import type { FunctionComponent } from "react"
import { CheckIcon } from "@heroicons/react/solid"
import clsx from "clsx"
import { Link, Routes, useRouter } from "blitz"
import useCustomerPhoneNumber from "../../core/hooks/use-customer-phone-number"
2021-07-18 15:32:45 +00:00
type StepLink = {
2021-07-31 14:33:18 +00:00
href: string
label: string
2021-07-18 15:32:45 +00:00
}
type Props = {
2021-07-31 14:33:18 +00:00
currentStep: 1 | 2 | 3
previous?: StepLink
next?: StepLink
}
const steps = ["Welcome", "Twilio Credentials", "Pick a plan"] as const
2021-07-18 15:32:45 +00:00
2021-07-31 14:33:18 +00:00
const OnboardingLayout: FunctionComponent<Props> = ({ children, currentStep, previous, next }) => {
const router = useRouter()
const customerPhoneNumber = useCustomerPhoneNumber()
if (customerPhoneNumber) {
throw router.push(Routes.Messages())
}
2021-07-18 15:32:45 +00:00
return (
<div className="bg-gray-800 fixed z-10 inset-0 overflow-y-auto">
<div className="min-h-screen text-center block p-0">
{/* This element is to trick the browser into centering the modal contents. */}
2021-07-31 14:33:18 +00:00
<span className="inline-block align-middle h-screen">&#8203;</span>
2021-07-18 15:32:45 +00:00
<div className="inline-flex flex-col bg-white rounded-lg text-left overflow-hidden shadow transform transition-all my-8 align-middle max-w-2xl w-[90%] pb-6">
2021-07-31 14:33:18 +00:00
<h3 className="text-lg leading-6 font-medium text-gray-900 px-6 py-5 border-b border-gray-100">
{steps[currentStep - 1]}
</h3>
2021-07-18 15:32:45 +00:00
<section className="px-6 pt-6 pb-12">{children}</section>
<nav className="grid grid-cols-1 gap-y-3 mx-auto">
2021-07-31 14:33:18 +00:00
{next ? (
<Link href={next.href}>
<a className="max-w-[240px] mx-auto w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm">
{next.label}
</a>
</Link>
) : null}
2021-07-18 15:32:45 +00:00
2021-07-31 14:33:18 +00:00
{previous ? (
<Link href={previous.href}>
<a className="max-w-[240px] mx-auto w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm">
{previous.label}
</a>
</Link>
) : null}
2021-07-18 15:32:45 +00:00
<ol className="flex items-center">
{steps.map((step, stepIdx) => {
2021-07-31 14:33:18 +00:00
const isComplete = currentStep > stepIdx + 1
const isCurrent = stepIdx + 1 === currentStep
2021-07-18 15:32:45 +00:00
return (
2021-07-31 14:33:18 +00:00
<li
key={step}
className={clsx(
stepIdx !== steps.length - 1 ? "pr-20 sm:pr-32" : "",
"relative"
)}
>
2021-07-18 15:32:45 +00:00
{isComplete ? (
<>
<div className="absolute inset-0 flex items-center">
<div className="h-0.5 w-full bg-primary-600" />
</div>
<a className="relative w-8 h-8 flex items-center justify-center bg-primary-600 rounded-full">
<CheckIcon className="w-5 h-5 text-white" />
<span className="sr-only">{step}</span>
</a>
</>
) : isCurrent ? (
<>
<div className="absolute inset-0 flex items-center">
<div className="h-0.5 w-full bg-gray-200" />
</div>
<a className="relative w-8 h-8 flex items-center justify-center bg-white border-2 border-primary-600 rounded-full">
<span className="h-2.5 w-2.5 bg-primary-600 rounded-full" />
<span className="sr-only">{step}</span>
</a>
</>
) : (
<>
<div className="absolute inset-0 flex items-center">
<div className="h-0.5 w-full bg-gray-200" />
</div>
<a className="group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full">
<span className="h-2.5 w-2.5 bg-transparent rounded-full" />
<span className="sr-only">{step}</span>
</a>
</>
)}
</li>
)
})}
</ol>
</nav>
</div>
</div>
</div>
2021-07-31 14:33:18 +00:00
)
}
2021-07-18 15:32:45 +00:00
2021-07-31 14:33:18 +00:00
export default OnboardingLayout