Forms

import { Button } from "@/common/button"
import {
  AuthLayout,
  RichTextFormWrapper,
  formWrapperFragment,
} from "../_components/auth-layout"
import { Pump } from "basehub/react-pump"
import { ArrowRightIcon } from "@radix-ui/react-icons"
import { BackToHomeButton } from "../_components/back-to-home-button"
import { DemoForm } from "./client-form"

export default function RequestDemo() {
  return (
    <Pump
      queries={[
        {
          site: {
            requestDemo: {
              wrapper: {
                title: true,
                subtitle: {
                  json: {
                    content: true,
                  },
                },
                cta: buttonFragment,
              },
              submissions: { 
                ingestKey: true,
                schema: true,
              },
            },
          },
        },
      ]}
    >
      {async ([{ site }]) => {
        "use server"

        return (
          <AuthLayout
            subtitle={
              site.requestDemo.wrapper.subtitle ? (
                <RichTextFormWrapper>
                  {
                    site.requestDemo.wrapper.subtitle.json
                      .content
                  }
                </RichTextFormWrapper>
              ) : null
            }
            title={site.requestDemo.wrapper.title}
          >
            <DemoForm
              ingestKey={site.requestDemo.submissions.ingestKey}
              schema={site.requestDemo.submissions.schema} 
            >
              <div className="mt-3 flex items-center justify-between">
                <Button
                  icon={<ArrowRightIcon className="size-5" />}
                  iconSide="right"
                  intent={site.requestDemo.wrapper.cta.type}
                  type="submit"
                >
                  {site.requestDemo.wrapper.cta.label}
                </Button>
                <BackToHomeButton />
              </div>
            </DemoForm>
          </AuthLayout>
        )
      }}
    </Pump>
  )
}

"use client"
import * as React from "react"
import { sendEvent } from "basehub/events"
import { LabeledInput } from "../_components/labeled-input"
import { Field } from "basehub/react-form"
import { LabeledTextarea } from "../_components/labeled-input"
import { Submissions } from ".basehub/schema"

export function DemoForm({
  children,
  ingestKey,
  schema,
}: {
  children: React.ReactNode
  ingestKey: Submissions["ingestKey"]
  schema: Field[]
}) {
  const handleSubmit = React.useCallback(
    async (e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault()
      const form = e.target as HTMLFormElement
      const formData = new FormData(form)

      await sendEvent(ingestKey, { 
        eMail: String(formData.get("eMail")),
        firstName: String(formData.get("firstName")),
        lastName: String(formData.get("lastName")),
        message: String(formData.get("message")),
      }) 
    },
    [ingestKey],
  )

  return (
    <form
      className="flex flex-col gap-3"
      onSubmit={handleSubmit}
    >
      {schema.map((field) =>
        field.name === "message" ? ( 
          <LabeledTextarea
            key={field.id} 
            minLength={16} 
            rows={8} 
            className="max-h-64 min-h-16"
            // The "Field" type comes with required, placeholder,
            // defaultValue and other useful props
            {...field} 
          />
        ) : ( 
          <LabeledInput key={field.id} {...field} /> 
        ),
      )}
      {children}
    </form>
  )
}