Was this helpful?

"use client";
import { useState, type SyntheticEvent } from "react";
import {
  Button,
  Textarea,
  Thumbs,
  ToastProvider,
  useToast,
  type ThumbsValue,
} from "@nexera-ui/react";

/** Was this helpful? Thumbs up or down at the end of a help article, confirmed with a toast. */
export default function WasThisHelpful() {
  return (
    <ToastProvider aria-label="Notifications">
      <Article />
    </ToastProvider>
  );
}

function Article() {
  const toast = useToast();
  const [answer, setAnswer] = useState<ThumbsValue | null>(null);
  const [sent, setSent] = useState(false);

  const onChange = (value: ThumbsValue | null) => {
    setAnswer(value);
    setSent(false);
    if (value === "up") toast.add({ title: "Thanks for your feedback", tone: "success" });
  };

  const onSubmit = (event: SyntheticEvent<HTMLFormElement>) => {
    event.preventDefault();
    setSent(true); // replace with your feedback request
    toast.add({
      title: "Feedback sent",
      description: "The People Ops team reviews it every Monday.",
      tone: "success",
    });
  };

  return (
    <div className="@container bg-page px-4 py-8 @3xl:px-8">
      <article
        aria-labelledby="article-title"
        className="mx-auto grid max-w-2xl gap-5 rounded-xl border border-default bg-surface p-5 shadow-sm @3xl:p-8"
      >
        <header className="grid gap-1">
          <p className="text-body-small text-secondary">
            Help centre · Leave and time off · Updated 2 October 2026
          </p>
          <h2 id="article-title" className="text-heading-h3 text-primary">
            How to request parental leave
          </h2>
        </header>
        <p className="text-body-default text-secondary">
          Every Northwind employee gets 26 weeks of paid parental leave after six months of service.
          Request it at least eight weeks before you plan to start, so payroll and your team can
          prepare.
        </p>
        <ol className="grid list-decimal gap-2 ps-5 text-body-default text-secondary">
          <li>Open Time off and choose Request leave.</li>
          <li>Pick Parental leave and enter your expected start date.</li>
          <li>Attach the MATB1 certificate or adoption matching letter.</li>
          <li>Send the request. Your manager and People Ops both approve it.</li>
        </ol>
        <footer className="grid gap-4 border-t border-subtle pt-5">
          <Thumbs
            label="Was this article helpful?"
            name="helpful"
            value={answer}
            onChange={onChange}
          />
          {answer === "down" && !sent ? (
            <form className="grid gap-3" onSubmit={onSubmit}>
              <Textarea
                label="What was missing or unclear?"
                name="feedback"
                maxLength={500}
                isRequired
                errorMessage="Tell us what to improve, or close this by pressing the thumb again."
              />
              <Button type="submit" variant="secondary" size="md" className="justify-self-start">
                Send feedback
              </Button>
            </form>
          ) : null}
        </footer>
      </article>
    </div>
  );
}