import type { Schema, Cond, Form, Return } from "@formity/react";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import {
Step,
Layout,
TextField,
YesNo,
NextButton,
BackButton,
} from "@/components";
import { MultiStep } from "@/multi-step";
export type Values = [
Form<{ working: boolean }>,
Cond<{
then: [
Form<{ company: string }>,
Return<{
working: true;
company: string;
}>
];
else: [
Form<{ searching: boolean }>,
Return<{
working: false;
searching: boolean;
}>
];
}>
];
export const schema: Schema<Values> = [
{
form: {
values: () => ({
working: [true, []],
}),
render: ({ values, ...rest }) => (
<MultiStep step="working" {...rest}>
<Step
defaultValues={values}
resolver={zodResolver(
z.object({
working: z.boolean(),
})
)}
>
<Layout
heading="Are you currently working?"
description="We would like to know if you are working for a company"
fields={[<YesNo key="working" name="working" label="Working" />]}
button={<NextButton>Next</NextButton>}
/>
</Step>
</MultiStep>
),
},
},
{
cond: {
if: ({ working }) => working,
then: [
{
form: {
values: () => ({
company: ["", []],
}),
render: ({ values, ...rest }) => (
<MultiStep step="company" {...rest}>
<Step
defaultValues={values}
resolver={zodResolver(
z.object({
company: z.string().nonempty("Required"),
})
)}
>
<Layout
heading="At what company?"
description="We would like to know the name of the company"
fields={[
<TextField
key="company"
name="company"
label="Company"
/>,
]}
button={<NextButton>Next</NextButton>}
back={<BackButton />}
/>
</Step>
</MultiStep>
),
},
},
{
return: ({ company }) => ({
working: true,
company,
}),
},
],
else: [
{
form: {
values: () => ({
searching: [false, []],
}),
render: ({ values, ...rest }) => (
<MultiStep step="searching" {...rest}>
<Step
defaultValues={values}
resolver={zodResolver(
z.object({
searching: z.boolean(),
})
)}
>
<Layout
heading="Are you looking for a job?"
description="If you are looking for a job, we would like to know"
fields={[
<YesNo
key="searching"
name="searching"
label="Searching"
/>,
]}
button={<NextButton>Next</NextButton>}
back={<BackButton />}
/>
</Step>
</MultiStep>
),
},
},
{
return: ({ searching }) => ({
working: false,
searching,
}),
},
],
},
},
];