create-magic-storefront 0.4.0 → 0.6.0

package/template/components/cart/cart-lines.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { Image, Money, useCart, useMagicStore } from '@magicstoreai/hydrogen';
+import Link from 'next/link';
+
+import { IconButton } from '@/components/ui/button';
+import { QuantityStepper } from '@/components/ui/quantity-stepper';
+import { messages } from '@/lib/i18n';
+
+/** A variant title worth showing: not the placeholder of a product without options. */
+function variantTitle(title: string | undefined): string | null {
+  return title && !/^Default( Title)?$/.test(title) ? title : null;
+}
+
+/**
+ * The cart's lines: thumbnail, title (a link to the product), variant, a quantity stepper bounded by
+ * the line's stock, remove, and the line total from the cart. A line's `issues` (sold out, too many,
+ * unpublished) are shown under it as the API reported them. Shared by the cart drawer and the cart
+ * page. A failed change stays in `useCart().error`; the parent shows it.
+ */
+export function CartLines({ onNavigate }: { onNavigate?: () => void }) {
+  const { cart, status, updateLine, removeLine } = useCart();
+  const t = messages(useMagicStore().locale);
+  if (cart === null) {
+    return null;
+  }
+  const busy = status === 'updating';
+
+  return (
+    <ul className="cart-lines">
+      {cart.lines.map((line) => {
+        const product = line.merchandise.product;
+        const href = product ? `/products/${product.handle}` : null;
+        const variant = variantTitle(line.merchandise.variant?.title);
+        const issues = [...new Set(line.issues.map((issue) => t.lineIssues[issue]))];
+        return (
+          <li key={line.id} className="cart-line">
+            <span className="cart-line__media">
+              <Image
+                data={line.merchandise.image}
+                width={80}
+                height={80}
+                alt=""
+                fallback={<span className="media-fallback" />}
+              />
+            </span>
+            <div className="cart-line__info">
+              {href ? (
+                <Link href={href} className="cart-line__title" onClick={onNavigate}>
+                  {product?.title}
+                </Link>
+              ) : (
+                <span className="cart-line__title">{product?.title}</span>
+              )}
+              {variant && <span className="cart-line__variant">{variant}</span>}
+              {!line.available && issues.length === 0 && (
+                <span className="cart-line__issue">{t.notAvailable}</span>
+              )}
+              {issues.map((issue) => (
+                <span key={issue} className="cart-line__issue">
+                  {issue}
+                </span>
+              ))}
+            </div>
+            <div className="cart-line__controls">
+              <QuantityStepper
+                value={line.quantity}
+                max={line.quantityAvailable}
+                label={t.quantity}
+                decreaseLabel={t.decreaseQuantity}
+                increaseLabel={t.increaseQuantity}
+                disabled={busy}
+                onChange={(quantity) => void updateLine(line.id, quantity).catch(() => undefined)}
+              />
+              <IconButton
+                icon="trash"
+                label={`${t.remove}: ${product?.title ?? ''}`}
+                className="cart-line__remove"
+                disabled={busy}
+                onClick={() => void removeLine(line.id).catch(() => undefined)}
+              />
+            </div>
+            <Money data={line.cost.total} className="cart-line__total" />
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/template/components/cart/cart-summary.tsx

@@ -0,0 +1,191 @@
+'use client';
+
+import { Money, moneyAmount, useCart, useMagicStore } from '@magicstoreai/hydrogen';
+import type { Schema } from '@magicstoreai/storefront-client';
+import Link from 'next/link';
+import { useId, useState, type FormEvent } from 'react';
+
+import { buttonClass, Button } from '@/components/ui/button';
+import { Icon } from '@/components/ui/icon';
+import { describe } from '@/lib/errors';
+import { messages, type Messages } from '@/lib/i18n';
+
+type Cart = Schema<'Cart'>;
+type MoneyValue = Schema<'Money'>;
+
+/**
+ * The cart page's summary: the discount code, the amounts exactly as `cart.cost` has them (a row
+ * per discount only when there is one), the note to the shop, and checkout. Nothing is added up
+ * here.
+ */
+export function CartSummary({ cart }: { cart: Cart }) {
+  const { error } = useCart();
+  const t = messages(useMagicStore().locale);
+  const { cost } = cart;
+
+  return (
+    <aside className="cart-summary" aria-labelledby="cart-summary-title">
+      <h2 id="cart-summary-title" className="cart-summary__title">
+        {t.summary}
+      </h2>
+      <DiscountCodes cart={cart} t={t} />
+      <dl className="cart-summary__rows">
+        <Row label={t.subtotal} value={cost.subtotal} />
+        <Row label={t.discount} value={cost.discountTotal} negative />
+        <Row label={t.welcomeDiscount} value={cost.welcomeDiscount} negative />
+        <Row label={t.pointsDiscount} value={cost.pointsDiscount} negative />
+        <div className="cart-summary__row cart-summary__row--total">
+          <dt>{t.total}</dt>
+          <dd>{cost.total && <Money data={cost.total} />}</dd>
+        </div>
+      </dl>
+      <p className="muted text-sm">{t.deliveryAtCheckout}</p>
+      <CartNote note={cart.note} t={t} />
+      {error && (
+        <p className="error" role="alert">
+          {describe(error, t.tryAgainLater)}
+        </p>
+      )}
+      <Link
+        href="/checkout"
+        className={buttonClass({ variant: 'primary', size: 'lg', full: true })}
+      >
+        {t.checkout}
+      </Link>
+      <Link href="/collections" className="cart-summary__continue">
+        {t.continueShopping}
+      </Link>
+    </aside>
+  );
+}
+
+/** A discount row, only when the cart has that discount. */
+function Row({
+  label,
+  value,
+  negative = false,
+}: {
+  label: string;
+  value: MoneyValue | null;
+  negative?: boolean;
+}) {
+  if (value === null || (negative && moneyAmount(value) <= 0)) {
+    return null;
+  }
+  return (
+    <div className="cart-summary__row">
+      <dt>{label}</dt>
+      <dd>
+        {negative && '−'}
+        <Money data={value} />
+      </dd>
+    </div>
+  );
+}
+
+/**
+ * The code field and the codes on the cart. A code that does not apply says why, next to the field
+ * (`reasonCode`), and can be removed.
+ */
+function DiscountCodes({ cart, t }: { cart: Cart; t: Messages }) {
+  const { setDiscountCodes, status } = useCart();
+  const [code, setCode] = useState('');
+  const errorId = useId();
+  const codes = cart.discountCodes;
+  const refused = codes.find((entry) => !entry.applicable);
+
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const next = code.trim();
+    if (next === '') {
+      return;
+    }
+    // A failed change lands in `useCart().error`, shown in the summary.
+    void setDiscountCodes([...codes.map((entry) => entry.code), next]).then(
+      () => setCode(''),
+      () => undefined,
+    );
+  }
+
+  return (
+    <div className="discount-codes">
+      <form className="discount-codes__form" onSubmit={submit}>
+        <label className="visually-hidden" htmlFor={`${errorId}-input`}>
+          {t.discountCode}
+        </label>
+        <input
+          id={`${errorId}-input`}
+          value={code}
+          onChange={(event) => setCode(event.target.value)}
+          placeholder={t.discountCode}
+          autoComplete="off"
+          autoCapitalize="characters"
+          aria-invalid={refused ? true : undefined}
+          aria-describedby={refused ? errorId : undefined}
+        />
+        <Button type="submit" loading={status === 'updating'}>
+          {t.apply}
+        </Button>
+      </form>
+      {refused?.reasonCode && (
+        <p id={errorId} className="error text-sm" role="alert">
+          {refused.code}: {t.discountReasons[refused.reasonCode]}
+        </p>
+      )}
+      {codes.length > 0 && (
+        <ul className="chips discount-codes__list">
+          {codes.map((entry) => (
+            <li key={entry.code}>
+              <button
+                type="button"
+                className={entry.applicable ? undefined : 'discount-codes__refused'}
+                aria-label={t.removeCode(entry.code)}
+                onClick={() =>
+                  void setDiscountCodes(
+                    codes.filter((other) => other.code !== entry.code).map((other) => other.code),
+                  ).catch(() => undefined)
+                }
+              >
+                {entry.code}
+                <Icon name="close" size={14} />
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+/** The note to the shop, saved when the field is left (`cartsNote`). */
+function CartNote({ note, t }: { note: string | null; t: Messages }) {
+  const { setNote } = useCart();
+  const [saved, setSaved] = useState(false);
+  const id = useId();
+  return (
+    <div className="field">
+      <label className="field__label" htmlFor={id}>
+        {t.orderNote}
+      </label>
+      <textarea
+        id={id}
+        rows={2}
+        maxLength={1000}
+        defaultValue={note ?? ''}
+        onChange={() => setSaved(false)}
+        onBlur={(event) => {
+          const next = event.target.value.trim() || null;
+          if (next !== note) {
+            void setNote(next).then(
+              () => setSaved(true),
+              () => undefined,
+            );
+          }
+        }}
+      />
+      <span className="text-sm muted" role="status">
+        {saved ? t.noteSaved : ''}
+      </span>
+    </div>
+  );
+}

package/template/components/catalog/catalog-form.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { usePathname, useRouter } from 'next/navigation';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+
+/** Above this width a change applies at once; below it the drawer's button applies the lot. */
+const DESKTOP = '(min-width: 990px)';
+
+/**
+ * The facets' GET form, enhanced. Without JavaScript it is a plain form: submitting loads the page
+ * with the filters in the URL. With it, a submit becomes a client navigation (empty fields left out,
+ * back to page 1), and on desktop every change submits at once. The sort `<select>` sits outside the
+ * form (`form={id}`) and always applies at once.
+ */
+export function CatalogForm({
+  id,
+  className,
+  children,
+}: {
+  id: string;
+  className?: string;
+  children: ReactNode;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  // After hydration the form applies changes itself: its plain submit button can go (CSS).
+  const [enhanced, setEnhanced] = useState(false);
+  const form = useRef<HTMLFormElement>(null);
+
+  function apply(form: HTMLFormElement) {
+    const params = new URLSearchParams();
+    for (const [name, value] of new FormData(form)) {
+      if (typeof value === 'string' && value.trim() !== '' && name !== 'page') {
+        params.append(name, value.trim());
+      }
+    }
+    const query = params.toString();
+    router.push(query ? `${pathname}?${query}` : pathname, { scroll: false });
+  }
+
+  // The native `change` (React's onChange fires on every keystroke): a typed price applies when
+  // the field is left, a checkbox when it is ticked.
+  const applyRef = useRef(apply);
+  applyRef.current = apply;
+  useEffect(() => {
+    setEnhanced(true);
+    const element = form.current!;
+    const changed = () => {
+      if (window.matchMedia(DESKTOP).matches) {
+        applyRef.current(element);
+      }
+    };
+    element.addEventListener('change', changed);
+    return () => element.removeEventListener('change', changed);
+  }, []);
+
+  return (
+    <form
+      ref={form}
+      id={id}
+      method="get"
+      action={pathname}
+      className={className}
+      data-enhanced={enhanced || undefined}
+      onSubmit={(event) => {
+        event.preventDefault();
+        apply(event.currentTarget);
+      }}
+    >
+      {children}
+    </form>
+  );
+}
+
+/**
+ * The sort `<select>`, outside the form in the toolbar. A change event on a control associated by
+ * `form=` does not bubble to the form element, so this one submits the form itself.
+ */
+export function SortSelect({
+  formId,
+  label,
+  value,
+  options,
+}: {
+  formId: string;
+  label: string;
+  value: string;
+  options: { value: string; label: string }[];
+}) {
+  return (
+    <label className="sort-select">
+      <span className="sort-select__label">{label}</span>
+      <select
+        name="sort"
+        form={formId}
+        defaultValue={value}
+        onChange={(event) => event.currentTarget.form?.requestSubmit()}
+      >
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}

package/template/components/catalog/catalog-layout.tsx

@@ -0,0 +1,82 @@
+import type { MoneyFormat } from '@magicstoreai/hydrogen/core';
+import type { Schema } from '@magicstoreai/storefront-client';
+import type { ReactNode } from 'react';
+
+import { Pager } from '@/components/pager';
+import { ProductGrid } from '@/components/product-grid';
+import { SORT_KEYS, catalogQuery, onPage, type Catalog, type Filter } from '@/lib/catalog-params';
+import type { Messages } from '@/lib/i18n';
+
+import { SortSelect } from './catalog-form';
+import { ActiveFilters, Facets } from './facets';
+
+const FORM_ID = 'catalog-facets';
+
+/**
+ * A catalog page's body, shared by the collection and search pages: facets (sidebar or drawer),
+ * the toolbar with the count and the sort, the active filters, the grid and the pager. `empty`
+ * renders in place of the grid when the page has no products; the page decides what it says.
+ */
+export function CatalogLayout({
+  filters,
+  catalog,
+  products,
+  path,
+  extra = {},
+  money,
+  locale,
+  t,
+  empty,
+}: {
+  filters: Filter[];
+  catalog: Catalog;
+  products: { data: Schema<'Product'>[]; meta: { pagination: Schema<'Pagination'> } };
+  path: string;
+  extra?: Record<string, string>;
+  money: { locale: string; format: MoneyFormat | null };
+  locale: string;
+  t: Messages;
+  empty: ReactNode;
+}) {
+  const total = products.meta.pagination.total;
+  return (
+    <div className={filters.length > 0 ? 'catalog catalog--with-facets' : 'catalog'}>
+      <aside className="catalog__facets" aria-label={t.filters}>
+        <Facets filters={filters} catalog={catalog} formId={FORM_ID} hidden={extra} t={t} />
+      </aside>
+      <div className="catalog__main">
+        <div className="catalog__toolbar">
+          <p className="catalog__count" aria-live="polite">
+            {t.productsCount(total)}
+          </p>
+          <SortSelect
+            formId={FORM_ID}
+            label={t.sortBy}
+            value={catalog.sort ?? ''}
+            options={[
+              { value: '', label: t.sortOptions.default },
+              ...SORT_KEYS.map((key) => ({ value: key, label: t.sortOptions[key] })),
+            ]}
+          />
+        </div>
+        <ActiveFilters
+          filters={filters}
+          catalog={catalog}
+          path={path}
+          extra={extra}
+          money={money}
+          t={t}
+        />
+        {products.data.length > 0 ? (
+          <ProductGrid products={products.data} locale={locale} />
+        ) : (
+          empty
+        )}
+        <Pager
+          meta={products.meta.pagination}
+          href={(page) => `${path}${catalogQuery(onPage(catalog, page), extra)}`}
+        />
+      </div>
+    </div>
+  );
+}

package/template/components/catalog/facets-shell.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { useMagicStore } from '@magicstoreai/hydrogen';
+import { useSearchParams } from 'next/navigation';
+import { useEffect, useState, type ReactNode } from 'react';
+
+import { Drawer } from '@/components/ui/drawer';
+import { Icon } from '@/components/ui/icon';
+import { messages } from '@/lib/i18n';
+
+/**
+ * Where the facets live: a sidebar at desktop width, a drawer from the left below it, opened by the
+ * "Filter and sort" button (with the number of active filters). The same form is rendered once:
+ * at desktop width the closed `<dialog>` is laid out in place by CSS (`.facets-drawer`).
+ * The drawer closes when the filters in the URL change.
+ */
+export function FacetsShell({
+  activeCount,
+  formId,
+  children,
+}: {
+  activeCount: number;
+  formId: string;
+  children: ReactNode;
+}) {
+  const t = messages(useMagicStore().locale);
+  const [open, setOpen] = useState(false);
+  const query = useSearchParams().toString();
+  useEffect(() => setOpen(false), [query]);
+
+  return (
+    <>
+      <button
+        type="button"
+        className="facets-button"
+        aria-haspopup="dialog"
+        onClick={() => setOpen(true)}
+      >
+        <Icon name="filter" size={18} />
+        {t.filters}
+        {activeCount > 0 && <span className="facets-button__count">{activeCount}</span>}
+      </button>
+      <Drawer
+        open={open}
+        onClose={() => setOpen(false)}
+        title={t.filters}
+        closeLabel={t.close}
+        side="left"
+        className="facets-drawer"
+        footer={
+          <button type="submit" form={formId} className="button button--primary button--full">
+            {t.showResults}
+          </button>
+        }
+      >
+        {children}
+      </Drawer>
+    </>
+  );
+}