contact details form de-abstract

package.json

@@ -36,7 +36,7 @@
  "@gsap/react": "2.1.1",
  "@headlessui/react": "2.1.0",
  "@hookform/error-message": "2.0.1",
- "@hookform/resolvers": "3.3.4",
+ "@hookform/resolvers": "3.9.0",
  "@paypal/react-paypal-js": "8.3.0",
  "@radix-ui/react-slider": "1.1.2",
  "@radix-ui/react-tooltip": "1.1.2",
@@ -62,7 +62,7 @@
  "react-dropzone": "14.2.3",
  "react-fast-marquee": "1.6.4",
  "react-helmet": "6.1.0",
- "react-hook-form": "7.51.5",
+ "react-hook-form": "7.53.0",
  "react-player": "2.16.0",
  "react-redux": "9.1.2",
  "react-router-dom": "6.23.0",

src/pages/Registration/Steps/ContactDetails/Form/ReferralMethodSelector.tsx

@@ -0,0 +1,73 @@
+import {
+ Field,
+ Label,
+ Listbox,
+ ListboxButton,
+ ListboxOption,
+ ListboxOptions,
+} from "@headlessui/react";
+import Icon from "components/Icon";
+import { forwardRef } from "react";
+import { referralOptions } from "../constants";
+import type { ReferralOption } from "./schema";
+
+interface Props {
+ disabled?: boolean;
+ value: ReferralOption;
+ onChange: (value: ReferralOption) => void;
+ error?: string;
+ classes?: string;
+}
+
+function Star() {
+ return <span className="text-red">*</span>;
+}
+
+export const ReferralMethodSelector = forwardRef<HTMLButtonElement, Props>(
+ function List({ classes = "", ...props }, ref) {
+ return (
+ <Field className={`${classes} grid`}>
+ <Label className="text-sm mb-1 block">
+ How did you find about us? <Star />
+ </Label>
+ <Listbox
+ disabled={props.disabled}
+ value={props.value}
+ by="value"
+ onChange={props.onChange}
+ as="div"
+ className="group"
+ >
+ <ListboxButton
+ ref={ref}
+ className="group flex items-center focus:outline outline-2 outline-blue-d1 outline-offset-[3px] text-sm justify-between w-full px-4 py-3.5 text-navy-d4 border border-gray-l3 font-heading rounded disabled:bg-gray-l5 disabled:text-navy-l1"
+ >
+ <span>{props.value.label}</span>
+ <Icon
+ size={20}
+ className="group-data-[open]:rotate-180 transition-transform ease-in-out"
+ type="ChevronDown"
+ />
+ </ListboxButton>
+ <ListboxOptions
+ anchor={{ to: "bottom", gap: 5, padding: 10 }}
+ className="border border-gray-l3 w-[var(--button-width)] bg-white z-10 rounded h-40"
+ >
+ {referralOptions.map((o) => (
+ <ListboxOption
+ key={o.value}
+ value={o}
+ className="py-1 px-4 hover:bg-blue-l4 text-sm font-heading data-[selected]:text-blue"
+ >
+ {o.label}
+ </ListboxOption>
+ ))}
+ </ListboxOptions>
+ <p className="mt-1 text-right text-xs text-red empty:hidden">
+ {props.error}
+ </p>
+ </Listbox>
+ </Field>
+ );
+ }
+);

src/pages/Registration/Steps/ContactDetails/Form/RoleSelector.tsx

@@ -0,0 +1,74 @@
+import {
+ Field,
+ Label,
+ Listbox,
+ ListboxButton,
+ ListboxOption,
+ ListboxOptions,
+} from "@headlessui/react";
+import Icon from "components/Icon";
+import { forwardRef } from "react";
+import { roleOptions } from "../constants";
+import type { RoleOption } from "./schema";
+
+interface Props {
+ disabled?: boolean;
+ value: RoleOption;
+ onChange: (value: RoleOption) => void;
+ error?: string;
+ classes?: string;
+}
+
+function Star() {
+ return <span className="text-red">*</span>;
+}
+
+export const RoleSelector = forwardRef<HTMLButtonElement, Props>(function List(
+ { classes = "", ...props },
+ ref
+) {
+ return (
+ <Field className={`${classes} grid`}>
+ <Label className="text-sm mb-1 block">
+ What's your role within the organization? <Star />
+ </Label>
+ <Listbox
+ disabled={props.disabled}
+ value={props.value}
+ by="value"
+ onChange={props.onChange}
+ as="div"
+ className=""
+ >
+ <ListboxButton
+ ref={ref}
+ className="group focus:outline outline-2 outline-blue-d1 outline-offset-[3px] flex items-center text-sm justify-between w-full px-4 py-3.5 text-navy-d4 border border-gray-l3 font-heading rounded disabled:bg-gray-l5 disabled:text-navy-l1"
+ >
+ <span>{props.value.label}</span>
+ <Icon
+ size={20}
+ className="group-data-[open]:rotate-180 transition-transform ease-in-out"
+ type="ChevronDown"
+ />
+ </ListboxButton>
+ <ListboxOptions
+ anchor={{ to: "bottom", gap: 5, padding: 10 }}
+ className="border border-gray-l3 w-[var(--button-width)] bg-white z-10 rounded h-40"
+ >
+ {roleOptions.map((o) => (
+ <ListboxOption
+ key={o.value}
+ value={o}
+ className="py-1 px-4 hover:bg-blue-l4 text-sm font-heading data-[selected]:text-blue"
+ >
+ {o.label}
+ </ListboxOption>
+ ))}
+ </ListboxOptions>
+ <p className="mt-1 text-right text-xs text-red empty:hidden">
+ {props.error}
+ </p>
+ </Listbox>
+ </Field>
+ );
+});