Function Page

apps/webapp/app/routes/confirm-basic-details.tsx:122–244

()

const MotionHand = motion(HandIcon);

export default function Page() {
  const user = useUser();
  const lastSubmission = useActionData();
  const [enteredEmail, setEnteredEmail] = useState<string>(user.email ?? "");
  const { isManagedCloud } = useFeatures();

  const [form, { name, email, confirmEmail, referralSource }] = useForm({
    id: "confirm-basic-details",
    // TODO: type this
    lastSubmission: lastSubmission as any,
    onValidate({ formData }) {
      return parse(formData, { schema: createSchema() });
    },
    shouldRevalidate: "onSubmit",
  });

  const shouldShowConfirm = user.email !== enteredEmail || user.email === "";

  return (
    <AppContainer>
      <MainCenteredContainer className="max-w-[22rem]">
        <Form method="post" {...form.props}>
          <FormTitle
            title="Welcome to Trigger.dev"
            LeadingIcon={
              <MotionHand
                style={{
                  originY: 0.75,
                }}
                initial={{
                  rotate: 0,
                }}
                animate={{
                  rotate: [0, -20, 0, 20, 0, -20, 0, 20, 0],
                }}
                transition={{
                  delay: 1,
                  duration: 1,
                  repeatDelay: 5,
                  repeat: Infinity,
                  ease: "linear",
                }}
              />
            }
            description="We just need you to confirm a couple of details, it'll only take a minute."
          />
          <Fieldset>
            <InputGroup>
              <Label htmlFor={name.id}>Full name</Label>
              <Input
                {...conform.input(name, { type: "text" })}
                defaultValue={user.name ?? ""}
                placeholder="Your full name"
                icon="user"
                autoFocus
              />
              <Hint>Your team will see this name and we'll use it if we need to contact you.</Hint>
              <FormError id={name.errorId}>{name.error}</FormError>