Product card

"use client";

import { useEffect, useId, useState } from "react";
import type { ComponentProps, ReactNode } from "react";
import { Badge } from "./badge";
import { Button } from "./button";
import { Icon } from "./icon";
import { Price } from "./price";
import { Rating } from "./rating";
import "./product-card.css";

export type ProductCardLabels = {
  addToCart: string;
  adding: string;
  added: string;
  soldOut: string;
  /** Spoken once the item is in the cart: "{title} added to cart". */
  addedAnnouncement: string;
  /** Names the heart: "Save {title} to wishlist". */
  wishlist: string;
  /** "{count} colours". */
  colours: string;
  /** "Rated {rating} out of 5, {count} reviews". */
  rating: string;
  /** "Rated {rating} out of 5", when there is no review count. */
  ratingOnly: string;
  /** "{price} per {unit}". */
  unitPrice: string;
};

const english: ProductCardLabels = {
  addToCart: "Add to cart",
  adding: "Adding",
  added: "Added",
  soldOut: "Sold out",
  addedAnnouncement: "{title} added to cart",
  wishlist: "Save {title} to wishlist",
  colours: "{count} colours",
  rating: "Rated {rating} out of 5, {count} reviews",
  ratingOnly: "Rated {rating} out of 5",
  unitPrice: "{price} per {unit}",
};

export type ProductCardBadge = {
  label: string;
  tone?: "neutral" | "ok" | "warn" | "danger";
  variant?: "soft" | "solid";
};

export type ProductCardProps = Omit<ComponentProps<"article">, "title"> & {
  /** Product name. Also the card's one link. */
  title: string;
  href: string;
  /** The product picture: an img, picture or svg. Fills the frame and is cropped to it. */
  media?: ReactNode;
  /** Brand or a short subtitle, shown above the name. */
  brand?: ReactNode;
  /** Price in major units. */
  price: number;
  /** The earlier price, struck through when higher than price. */
  compareAt?: number;
  /** Unit price for groceries and the like, such as 1.20 per "100 g". */
  unitPrice?: { amount: number; per: string };
  currency?: string;
  locale?: string;
  /** Average stars. Shown with reviewCount as "4.6 (128)". */
  rating?: number;
  reviewCount?: number;
  /** Labels over the picture, such as New, Sale or Only 3 left. */
  badges?: ProductCardBadge[];
  /** Colours it comes in. Up to four dots are shown, then a count of the rest. */
  swatches?: { name: string; color: string }[];
  /** Shows the quick add button. May return a promise; the button shows progress until it settles. */
  onQuickAdd?: () => void | Promise<void>;
  /** Disables quick add and says Sold out. */
  soldOut?: boolean;
  /** Whether the item is saved, controlled. */
  wishlisted?: boolean;
  /** Whether the item starts saved, uncontrolled. Passing it alone shows the heart. */
  defaultWishlisted?: boolean;
  /** Called with the new saved state. The heart shows when this, wishlisted or defaultWishlisted is given. */
  onWishlistChange?: (wishlisted: boolean) => void;
  /** column stacks the picture over the details; row puts a thumbnail beside them. */
  layout?: "column" | "row";
  /** Shape of the picture frame in the column layout. */
  aspect?: "4/5" | "1/1";
  headingLevel?: 2 | 3 | 4;
  /** Wording, for another language. */
  labels?: Partial<ProductCardLabels>;
};

const fill = (template: string, values: Record<string, string>) =>
  template.replace(/\{(\w+)\}/g, (match, key: string) => values[key] ?? match);

export function ProductCard({
  title,
  href,
  media,
  brand,
  price,
  compareAt,
  unitPrice,
  currency = "USD",
  locale = "en-US",
  rating,
  reviewCount,
  badges,
  swatches,
  onQuickAdd,
  soldOut = false,
  wishlisted,
  defaultWishlisted,
  onWishlistChange,
  layout = "column",
  aspect = "4/5",
  headingLevel = 3,
  labels,
  className,
  ...rest
}: ProductCardProps) {
  const id = useId();
  const words = { ...english, ...labels };
  const [savedInner, setSavedInner] = useState(defaultWishlisted ?? false);
  const saved = wishlisted ?? savedInner;
  // Set only from the click, so a card that starts saved does not pop on mount.
  const [popped, setPopped] = useState(false);
  const [phase, setPhase] = useState<"idle" | "pending" | "added">("idle");

  useEffect(() => {
    if (phase !== "added") return;
    const timer = setTimeout(() => setPhase("idle"), 2400);
    return () => clearTimeout(timer);
  }, [phase]);

  const toggleSaved = () => {
    const next = !saved;
    if (wishlisted === undefined) setSavedInner(next);
    setPopped(next);
    onWishlistChange?.(next);
  };

  const quickAdd = async () => {
    if (!onQuickAdd || phase === "pending") return;
    setPhase("pending");
    try {
      await onQuickAdd();
      setPhase("added");
    } catch {
      setPhase("idle");
    }
  };

  const whole = new Intl.NumberFormat(locale);
  const one = new Intl.NumberFormat(locale, { minimumFractionDigits: 1, maximumFractionDigits: 1 });
  const money = new Intl.NumberFormat(locale, { style: "currency", currency });
  const titleId = `${id}-title`;
  const Heading = `h${headingLevel}` as "h3";

  const shownSwatches = swatches?.slice(0, 4) ?? [];
  const moreSwatches = (swatches?.length ?? 0) - shownSwatches.length;

  const badgeList =
    badges && badges.length > 0 ? (
      <div className="eq-product-card-badges">
        {badges.map((b) => (
          <Badge key={b.label} tone={b.tone} variant={b.variant ?? (layout === "row" ? "soft" : "solid")}>
            {b.label}
          </Badge>
        ))}
      </div>
    ) : null;

  return (
    <article
      aria-labelledby={titleId}
      {...rest}
      className={["eq-product-card", className].filter(Boolean).join(" ")}
      data-layout={layout}
      data-aspect={layout === "column" ? aspect : undefined}
      data-sold-out={soldOut || undefined}
    >
      <div className="eq-product-card-info">
        <Heading className="eq-product-card-title" id={titleId}>
          <a className="eq-product-card-link" href={href}>
            {title}
          </a>
        </Heading>
        {brand != null && <p className="eq-product-card-brand">{brand}</p>}
        {layout === "row" && badgeList}
        {rating !== undefined && (
          <div className="eq-product-card-rating">
            {/* A row is narrow, so it shows one star beside the number instead of five. */}
            <Rating
              label={fill(words.ratingOnly, { rating: one.format(rating) })}
              value={layout === "row" ? 1 : rating}
              max={layout === "row" ? 1 : 5}
              readOnly
              allowHalf
              size="s"
              aria-hidden="true"
            />
            <span aria-hidden="true">
              {one.format(rating)}
              {reviewCount !== undefined && (
                <span className="eq-product-card-reviews"> ({whole.format(reviewCount)})</span>
              )}
            </span>
            <span className="eq-product-card-hidden">
              {fill(reviewCount === undefined ? words.ratingOnly : words.rating, {
                rating: one.format(rating),
                count: whole.format(reviewCount ?? 0),
              })}
            </span>
          </div>
        )}
        <div className="eq-product-card-price">
          <Price amount={price} compareAt={compareAt} currency={currency} locale={locale} size="s" />
          {unitPrice && (
            <span className="eq-product-card-unit">
              <span aria-hidden="true">
                {money.format(unitPrice.amount)} / {unitPrice.per}
              </span>
              <span className="eq-product-card-hidden">
                {fill(words.unitPrice, { price: money.format(unitPrice.amount), unit: unitPrice.per })}
              </span>
            </span>
          )}
        </div>
        {swatches && swatches.length > 0 && (
          <p className="eq-product-card-swatches">
            <span className="eq-product-card-dots" aria-hidden="true">
              {shownSwatches.map((s) => (
                <span key={s.name} className="eq-product-card-dot" style={{ background: s.color }} />
              ))}
              {moreSwatches > 0 && <span className="eq-product-card-more">+{whole.format(moreSwatches)}</span>}
            </span>
            <span className="eq-product-card-hidden">{fill(words.colours, { count: whole.format(swatches.length) })}</span>
          </p>
        )}
      </div>

      <div className="eq-product-card-media">{media}</div>
      {layout === "column" && badgeList}

      {(onWishlistChange || wishlisted !== undefined || defaultWishlisted !== undefined) && (
        <button
          type="button"
          className="eq-product-card-wish"
          aria-pressed={saved}
          aria-label={fill(words.wishlist, { title })}
          data-popped={popped || undefined}
          onClick={toggleSaved}
        >
          <Icon name="heart" className="eq-product-card-heart" filled={saved} size={layout === "row" ? 18 : 16} />
        </button>
      )}

      {(onQuickAdd || soldOut) && (
        <Button
          className="eq-product-card-add"
          size="s"
          variant="outline"
          disabled={soldOut}
          // Loading keeps keyboard focus on the button while the add runs.
          loading={phase === "pending"}
          aria-describedby={titleId}
          onClick={quickAdd}
          lead={
            phase === "added" ? (
              <Icon name="check" size="s" />
            ) : (
              <Icon name="cart" size="s" />
            )
          }
        >
          {soldOut ? words.soldOut : phase === "pending" ? words.adding : phase === "added" ? words.added : words.addToCart}
        </Button>
      )}

      <span className="eq-product-card-hidden" role="status">
        {phase === "pending" ? words.adding : phase === "added" ? fill(words.addedAnnouncement, { title }) : ""}
      </span>
    </article>
  );
}