Coupon field

"use client";

import { useEffect, useId, useLayoutEffect, useRef, useState, type ComponentProps, type KeyboardEvent } from "react";
import { Field } from "./field";
import { Button } from "./button";
import { Icon } from "./icon";
import "./coupon-field.css";

/** An applied code. */
export type CouponCode = {
  code: string;
  /** What it takes off, in major units, shown as "You save $12.00". */
  saving?: number;
  /** What it does, such as "10% off everything". */
  label?: string;
};

export type CouponResult = ({ ok: true } & Omit<CouponCode, "code">) | { ok: false; message: string };

export type CouponFieldProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "children"> & {
  /** Checks a code. Resolve { ok: true, saving, label } to apply it or { ok: false, message } to show why not. */
  onApply: (code: string) => Promise<CouponResult>;
  /** The applied code, when controlled. null means none. */
  value?: CouponCode | null;
  /** The applied code at first, when uncontrolled. */
  defaultValue?: CouponCode | null;
  /** Called when a code is applied or removed. */
  onValueChange?: (value: CouponCode | null) => void;
  /** Called with the code that was removed. */
  onRemove?: (code: string) => void;
  label?: string;
  placeholder?: string;
  /** Starts as a "Have a promo code?" disclosure. */
  collapsible?: boolean;
  /** Text of the disclosure. */
  collapsedLabel?: string;
  /** Submits the applied code with a form under this name. */
  name?: string;
  /** ISO 4217 code for the saving. */
  currency?: string;
  locale?: string;
  disabled?: boolean;
};

const normalise = (text: string) => text.toUpperCase();

export function CouponField({
  onApply,
  value,
  defaultValue = null,
  onValueChange,
  onRemove,
  label = "Promo code",
  placeholder,
  collapsible = false,
  collapsedLabel = "Have a promo code?",
  name,
  currency = "USD",
  locale = "en-US",
  disabled = false,
  className,
  ...rest
}: CouponFieldProps) {
  const id = useId();
  const errorId = `${id}-error`;
  const inputRef = useRef<HTMLInputElement>(null);
  const appliedRef = useRef<HTMLDivElement>(null);
  const request = useRef(0);
  const caret = useRef<{ start: number; end: number } | null>(null);
  const focusNext = useRef<"input" | "applied" | null>(null);

  const [inner, setInner] = useState<CouponCode | null>(defaultValue);
  const [draft, setDraft] = useState("");
  const [error, setError] = useState("");
  const [pending, setPending] = useState(false);
  const [status, setStatus] = useState("");
  const [open, setOpen] = useState(false);

  const applied = value !== undefined ? value : inner;
  const money = new Intl.NumberFormat(locale, { style: "currency", currency });

  /* Uppercasing rewrites the value, so put the caret back where the person was typing. */
  useLayoutEffect(() => {
    const at = caret.current;
    if (at && inputRef.current && document.activeElement === inputRef.current) {
      inputRef.current.setSelectionRange(at.start, at.end);
    }
    caret.current = null;
  }, [draft]);

  useEffect(() => {
    const want = focusNext.current;
    if (!want) return;
    const target = want === "input" ? inputRef.current : appliedRef.current;
    if (!target) return;
    target.focus();
    focusNext.current = null;
  });

  /* A result that lands after unmount is dropped. */
  useEffect(() => () => void (request.current += 1), []);

  const set = (next: CouponCode | null) => {
    if (value === undefined) setInner(next);
    onValueChange?.(next);
  };

  const apply = async () => {
    if (pending || disabled) return;
    const code = draft.trim();
    if (!code) {
      setError("Enter a code first.");
      inputRef.current?.focus();
      return;
    }
    /* Clicking Apply disables it while pending, so keep focus in the field rather than lose it. */
    inputRef.current?.focus();
    const ticket = ++request.current;
    setPending(true);
    setError("");
    setStatus("");
    let result: CouponResult;
    try {
      result = await onApply(code);
    } catch {
      result = { ok: false, message: "That code could not be checked. Try again." };
    }
    if (ticket !== request.current) return;
    setPending(false);
    if (result.ok) {
      const next: CouponCode = { code, saving: result.saving, label: result.label };
      setDraft("");
      set(next);
      setStatus(
        `Code ${code} applied.${result.saving != null ? ` You save ${money.format(result.saving)}.` : ""}`,
      );
      focusNext.current = "applied";
    } else {
      setError(result.message);
      focusNext.current = "input";
    }
  };

  const remove = () => {
    if (!applied) return;
    const code = applied.code;
    set(null);
    onRemove?.(code);
    setStatus(`Code ${code} removed.`);
    setOpen(true);
    focusNext.current = "input";
  };

  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
    /* Enter applies the code and never submits a surrounding form. */
    if (event.key === "Enter") {
      event.preventDefault();
      void apply();
    }
  };

  const entry = (
    <div className="eq-coupon-field-entry">
      <div className="eq-coupon-field-row">
        <Field
          ref={inputRef}
          id={`${id}-input`}
          className="eq-coupon-field-field"
          label={label}
          placeholder={placeholder}
          value={draft}
          autoComplete="off"
          autoCapitalize="characters"
          spellCheck={false}
          enterKeyHint="go"
          disabled={disabled}
          readOnly={pending}
          aria-invalid={error ? true : undefined}
          aria-describedby={error ? errorId : undefined}
          onKeyDown={onKeyDown}
          onChange={(event) => {
            const el = event.target;
            caret.current = { start: el.selectionStart ?? el.value.length, end: el.selectionEnd ?? el.value.length };
            setDraft(normalise(el.value));
            if (error) setError("");
          }}
        />
        <Button
          type="button"
          className="eq-coupon-field-apply"
          variant="outline"
          loading={pending}
          disabled={disabled}
          onClick={() => void apply()}
        >
          Apply
        </Button>
      </div>
      <p className="eq-coupon-field-error" id={errorId} aria-live="polite">
        {error && (
          <>
            <Icon name="error" size="s" />
            {error}
          </>
        )}
      </p>
    </div>
  );

  return (
    <div
      {...rest}
      className={["eq-coupon-field", className].filter(Boolean).join(" ")}
      aria-busy={pending || undefined}
      data-state={applied ? "applied" : pending ? "pending" : "empty"}
    >
      {applied ? (
        <div className="eq-coupon-field-applied" ref={appliedRef} tabIndex={-1} role="group" aria-label={`${label} applied`}>
          <Icon name="tag" size="s" className="eq-coupon-field-tag" />
          <span className="eq-coupon-field-details">
            <code className="eq-coupon-field-code">{applied.code}</code>
            {applied.label && <span className="eq-coupon-field-label">{applied.label}</span>}
            {applied.saving != null && (
              <span className="eq-coupon-field-saving">You save {money.format(applied.saving)}</span>
            )}
          </span>
          <Button
            className="eq-coupon-field-remove"
            variant="ghost"
            size="s"
            aria-label={`Remove code ${applied.code}`}
            lead={<Icon name="close" size="s" />}
            disabled={disabled}
            onClick={remove}
          />
          {name && <input type="hidden" name={name} value={applied.code} />}
        </div>
      ) : collapsible ? (
        <details
          className="eq-coupon-field-disclosure"
          open={open}
          onToggle={(event) => {
            const isOpen = event.currentTarget.open;
            setOpen(isOpen);
            if (isOpen && !focusNext.current) focusNext.current = "input";
          }}
        >
          <summary className="eq-coupon-field-toggle">
            {collapsedLabel}
            <Icon name="chevron-down" size="s" className="eq-coupon-field-chevron" />
          </summary>
          {entry}
        </details>
      ) : (
        entry
      )}
      <p className="eq-coupon-field-status" role="status">
        {status}
      </p>
    </div>
  );
}