create-magic-storefront 0.5.0 → 0.6.0

package/template/components/checkout/thank-you.tsx

@@ -0,0 +1,48 @@
+import { Money } from '@magicstoreai/hydrogen';
+import Link from 'next/link';
+
+import { buttonClass } from '@/components/ui/button';
+import { Icon } from '@/components/ui/icon';
+import type { Messages } from '@/lib/i18n';
+
+import type { Completion } from './use-checkout';
+
+/**
+ * The order is placed: its number and amount, and the payment link while the payment is pending
+ * (the page that receives the buyer back reads the payment's real state).
+ */
+export function ThankYou({ completion, t }: { completion: Completion; t: Messages }) {
+  const { order, payment } = completion;
+  const pay = payment.status === 'PENDING' ? payment.redirectUrl : null;
+  return (
+    <div className="thank-you">
+      <span className="thank-you__icon" aria-hidden="true">
+        <Icon name="check" size={28} />
+      </span>
+      <h1>{t.thankYou}</h1>
+      <p className="thank-you__order">
+        {t.order} <strong>{order.number}</strong>
+        {order.total && (
+          <>
+            {' · '}
+            <Money data={order.total} />
+          </>
+        )}
+      </p>
+      <p className="muted">{t.orderNumberHint}</p>
+      <div className="thank-you__actions">
+        {pay && (
+          <a className={buttonClass({ variant: 'primary', size: 'lg' })} href={pay}>
+            {t.payNow}
+          </a>
+        )}
+        <Link
+          href="/"
+          className={buttonClass({ variant: pay ? 'secondary' : 'primary', size: 'lg' })}
+        >
+          {t.continueShopping}
+        </Link>
+      </div>
+    </div>
+  );
+}

package/template/components/checkout/use-checkout.ts

@@ -0,0 +1,90 @@
+'use client';
+
+import { useCart, useStorefrontClient } from '@magicstoreai/hydrogen';
+import type { Schema } from '@magicstoreai/storefront-client';
+import { useCallback, useEffect, useState } from 'react';
+
+import { formErrors } from '@/lib/errors';
+
+export type Checkout = Schema<'Checkout'>;
+export type DeliveryOption = Schema<'DeliveryOption'>;
+export type Location = Schema<'Location'>;
+export type Completion = Schema<'CheckoutCompletion'>;
+/** A refused field's message, by the request member it names (`name`, `phone`, `latitude`…). */
+export type FieldErrors = Record<string, string>;
+
+/** The request members the checkout steps have an input for; a refusal of any other goes in `error`. */
+const CHECKOUT_FIELDS = ['name', 'phone', 'address', 'city', 'latitude', 'longitude'] as const;
+
+/**
+ * The checkout of the current cart: it is opened once the cart is in (`checkoutsStore`, safe to
+ * repeat), and every step answers the updated checkout. `run` wraps a step: busy while it runs, a
+ * failure as `error` — and, for `VALIDATION_FAILED`, as `fieldErrors` to show next to each field.
+ * The checkout id stays in this state: never in a URL, never on screen.
+ */
+export function useCheckout(fallbackError: string) {
+  const client = useStorefrontClient();
+  const { cart, status: cartStatus } = useCart();
+  const [checkout, setCheckout] = useState<Checkout | null>(null);
+  const [locations, setLocations] = useState<Location[]>([]);
+  const [options, setOptions] = useState<DeliveryOption[]>([]);
+  const [completion, setCompletion] = useState<Completion | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
+  const [busy, setBusy] = useState(false);
+
+  const run = useCallback(
+    async (step: () => Promise<{ data: Checkout } | void>) => {
+      setBusy(true);
+      setError(null);
+      setFieldErrors({});
+      try {
+        const result = await step();
+        if (result) {
+          setCheckout(result.data);
+        }
+      } catch (e) {
+        const { fields, summary } = formErrors(e, CHECKOUT_FIELDS, fallbackError);
+        setFieldErrors(fields);
+        setError(summary);
+      } finally {
+        setBusy(false);
+      }
+    },
+    [fallbackError],
+  );
+
+  useEffect(() => {
+    if (cart === null || checkout !== null) {
+      return;
+    }
+    void run(() => client.checkoutsStore({ body: { cartId: cart.id } }));
+    // Pickup points are optional: without them the buyer is offered delivery only.
+    void client.locationsIndex({ query: { perPage: 50 } }).then(
+      ({ data }) => setLocations(data),
+      () => setLocations([]),
+    );
+  }, [cart, checkout, client, run]);
+
+  const loadOptions = useCallback(
+    async (id: string) =>
+      setOptions((await client.checkoutsDeliveryOptions({ path: { id } })).data),
+    [client],
+  );
+
+  return {
+    client,
+    cart,
+    cartStatus,
+    checkout,
+    locations,
+    options,
+    completion,
+    setCompletion,
+    error,
+    fieldErrors,
+    busy,
+    run,
+    loadOptions,
+  };
+}

package/template/components/footer/site-footer.tsx

@@ -0,0 +1,132 @@
+import type { Schema } from '@magicstoreai/storefront-client';
+import Link from 'next/link';
+
+import { Icon } from '@/components/ui/icon';
+import type { Messages } from '@/lib/i18n';
+import { hasContacts, SOCIAL_NAMES, telHref } from '@/lib/contacts';
+import type { NavItem } from '@/lib/menu';
+
+type Contacts = Schema<'Contacts'>;
+
+/**
+ * The site footer. Columns, each only when it has something: the `footer` menu (its columns and
+ * links, or the shop's pages without one), the top collections, and the contacts (phones, email,
+ * hours, social links). Then the merchant's `footerText`, policy links and the copyright line.
+ * It always renders: a shop with no pages still gets its name and contacts.
+ */
+export function SiteFooter({
+  shop,
+  nav,
+  collections,
+  contacts,
+  t,
+}: {
+  shop: Pick<Schema<'Shop'>, 'name' | 'branding'>;
+  nav: { columns: NavItem[]; links: NavItem[]; policies: NavItem[] };
+  collections: NavItem[];
+  contacts: Contacts | null;
+  t: Messages;
+}) {
+  const hours = contacts?.headOffice?.hoursSummary ?? null;
+  // The same test as the contacts page and the phone menu: a head office alone still links there.
+  const reachable = contacts !== null && hasContacts(contacts);
+  const year = new Date().getFullYear();
+
+  return (
+    <footer className="site-footer">
+      <div className="site-footer__inner">
+        <div className="site-footer__columns">
+          {nav.columns.map((column) => (
+            <FooterColumn key={column.href} title={column.title} links={column.children} />
+          ))}
+          {nav.links.length > 0 && <FooterColumn title={t.information} links={nav.links} />}
+          {collections.length > 0 && <FooterColumn title={t.catalog} links={collections} />}
+          {reachable && (
+            <section className="site-footer__column">
+              <h2 className="site-footer__heading">{t.contacts}</h2>
+              <ul className="site-footer__list">
+                {contacts.phones.map((phone) => (
+                  <li key={phone.number}>
+                    <a href={telHref(phone.number)} className="site-footer__contact">
+                      <Icon name="phone" size={16} />
+                      <span>
+                        {phone.number}
+                        {phone.label && <span className="muted"> {phone.label}</span>}
+                      </span>
+                    </a>
+                  </li>
+                ))}
+                {contacts.email && (
+                  <li>
+                    <a href={`mailto:${contacts.email}`} className="site-footer__contact">
+                      <Icon name="mail" size={16} />
+                      <span>{contacts.email}</span>
+                    </a>
+                  </li>
+                )}
+                {hours && (
+                  <li className="site-footer__contact">
+                    <Icon name="clock" size={16} />
+                    <span>
+                      <span className="visually-hidden">{t.openingHours}: </span>
+                      {hours}
+                    </span>
+                  </li>
+                )}
+                <li>
+                  <Link href="/contacts" className="site-footer__contact">
+                    <Icon name="map-pin" size={16} />
+                    <span>{t.allContacts}</span>
+                  </Link>
+                </li>
+              </ul>
+              {contacts.socials.length > 0 && (
+                <ul className="site-footer__socials" aria-label={t.socialMedia}>
+                  {contacts.socials.map((social) => (
+                    <li key={social.url}>
+                      <a href={social.url} target="_blank" rel="noopener">
+                        {SOCIAL_NAMES[social.network]}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </section>
+          )}
+        </div>
+        {shop.branding.footerText && (
+          <p className="site-footer__text">{shop.branding.footerText}</p>
+        )}
+        <div className="site-footer__bottom">
+          <span>
+            © {year} {shop.name}
+          </span>
+          {nav.policies.length > 0 && (
+            <ul className="site-footer__policies">
+              {nav.policies.map((policy) => (
+                <li key={policy.href}>
+                  <Link href={policy.href}>{policy.title}</Link>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+function FooterColumn({ title, links }: { title: string; links: NavItem[] }) {
+  return (
+    <nav className="site-footer__column" aria-label={title}>
+      <h2 className="site-footer__heading">{title}</h2>
+      <ul className="site-footer__list">
+        {links.map((link) => (
+          <li key={link.href}>
+            <Link href={link.href}>{link.title}</Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}

package/template/components/header/cart-button.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { useCart, useMagicStore } from '@magicstoreai/hydrogen';
+import Link from 'next/link';
+
+import { useCartDrawer } from '@/components/cart/cart-drawer';
+import { Icon } from '@/components/ui/icon';
+import { messages } from '@/lib/i18n';
+
+/**
+ * The header's cart: an icon with the live item count; its accessible name says the count. It
+ * opens the cart drawer, or goes to `/cart` when the theme's `cartType` is `PAGE`.
+ */
+export function CartButton() {
+  const { totalQuantity } = useCart();
+  const { cartType, open } = useCartDrawer();
+  const t = messages(useMagicStore().locale);
+  const content = (
+    <>
+      <Icon name="cart" />
+      {totalQuantity > 0 && (
+        <span className="header-cart__count" aria-hidden="true">
+          {totalQuantity > 99 ? '99+' : totalQuantity}
+        </span>
+      )}
+    </>
+  );
+  return cartType === 'DRAWER' ? (
+    <button
+      type="button"
+      className="icon-button header-cart"
+      aria-label={t.cartCount(totalQuantity)}
+      aria-haspopup="dialog"
+      onClick={open}
+    >
+      {content}
+    </button>
+  ) : (
+    <Link href="/cart" className="icon-button header-cart" aria-label={t.cartCount(totalQuantity)}>
+      {content}
+    </Link>
+  );
+}

package/template/components/header/desktop-nav.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { useMagicStore } from '@magicstoreai/hydrogen';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useEffect, useId, useRef, useState } from 'react';
+
+import { Icon } from '@/components/ui/icon';
+import { messages } from '@/lib/i18n';
+import type { NavItem } from '@/lib/menu';
+
+/**
+ * The header's links at desktop width. A top item with children gets its own toggle (a disclosure
+ * button beside the link, so the link still leads to the collection): it opens on hover, on click
+ * and on Enter / Space, and closes on Esc (focus back on the toggle), a click outside, leaving the
+ * header, or a route change. The panel is a full-width row under the header; a child with children
+ * of its own makes it a mega panel with one column per child.
+ */
+export function DesktopNav({ items }: { items: NavItem[] }) {
+  const t = messages(useMagicStore().locale);
+  const [open, setOpen] = useState<number | null>(null);
+  const nav = useRef<HTMLElement>(null);
+  const pathname = usePathname();
+  const id = useId();
+
+  useEffect(() => setOpen(null), [pathname]);
+
+  useEffect(() => {
+    if (open === null) {
+      return;
+    }
+    const outside = (event: PointerEvent) => {
+      if (!nav.current?.contains(event.target as Node)) {
+        setOpen(null);
+      }
+    };
+    const escape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setOpen(null);
+        nav.current?.querySelector<HTMLElement>(`[aria-controls="${id}-${open}"]`)?.focus();
+      }
+    };
+    document.addEventListener('pointerdown', outside);
+    document.addEventListener('keydown', escape);
+    return () => {
+      document.removeEventListener('pointerdown', outside);
+      document.removeEventListener('keydown', escape);
+    };
+  }, [open, id]);
+
+  return (
+    <nav ref={nav} className="desktop-nav" aria-label={t.menu} onMouseLeave={() => setOpen(null)}>
+      <ul className="desktop-nav__list">
+        {items.map((item, index) => {
+          const current = pathname === item.href;
+          if (item.children.length === 0) {
+            return (
+              <li key={item.href} className="desktop-nav__item">
+                <Link
+                  href={item.href}
+                  className="desktop-nav__link"
+                  aria-current={current ? 'page' : undefined}
+                  onMouseEnter={() => setOpen(null)}
+                >
+                  {item.title}
+                </Link>
+              </li>
+            );
+          }
+          const panelId = `${id}-${index}`;
+          const expanded = open === index;
+          const mega = item.children.some((child) => child.children.length > 0);
+          return (
+            <li key={item.href} className="desktop-nav__item" onMouseEnter={() => setOpen(index)}>
+              <Link
+                href={item.href}
+                className="desktop-nav__link"
+                aria-current={current ? 'page' : undefined}
+              >
+                {item.title}
+              </Link>
+              <button
+                type="button"
+                className="desktop-nav__toggle"
+                aria-expanded={expanded}
+                aria-controls={panelId}
+                aria-label={t.submenu(item.title)}
+                onClick={() => setOpen(expanded ? null : index)}
+              >
+                <Icon name="chevron-down" size={16} />
+              </button>
+              <div
+                id={panelId}
+                className={mega ? 'nav-panel nav-panel--mega' : 'nav-panel'}
+                hidden={!expanded}
+              >
+                <div className="nav-panel__inner">
+                  {mega ? (
+                    item.children.map((child) => (
+                      <div key={child.href} className="nav-panel__column">
+                        <Link href={child.href} className="nav-panel__heading">
+                          {child.title}
+                        </Link>
+                        <ul className="nav-panel__list">
+                          {child.children.map((grandchild) => (
+                            <li key={grandchild.href}>
+                              <Link href={grandchild.href}>{grandchild.title}</Link>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    ))
+                  ) : (
+                    <ul className="nav-panel__list">
+                      {item.children.map((child) => (
+                        <li key={child.href}>
+                          <Link href={child.href}>{child.title}</Link>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                  <Link href={item.href} className="nav-panel__all">
+                    {t.seeAll}
+                  </Link>
+                </div>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}

package/template/components/header/mobile-menu.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { useMagicStore } from '@magicstoreai/hydrogen';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+import { IconButton } from '@/components/ui/button';
+import { Drawer } from '@/components/ui/drawer';
+import { Icon } from '@/components/ui/icon';
+import { messages } from '@/lib/i18n';
+import type { NavItem } from '@/lib/menu';
+
+/**
+ * The menu below desktop width: a button that opens a drawer from the left. A level with children
+ * opens in place (a back button returns), so a deep collection tree never becomes one long list.
+ * `secondary` links (blog, account…) sit under the top level. Closes on navigation.
+ */
+export function MobileMenu({ items, secondary }: { items: NavItem[]; secondary: NavItem[] }) {
+  const text = messages(useMagicStore().locale);
+  const [open, setOpen] = useState(false);
+  const [path, setPath] = useState<NavItem[]>([]);
+  const pathname = usePathname();
+
+  function close() {
+    setOpen(false);
+    setPath([]);
+  }
+
+  // Back/forward navigation; a tapped link closes the drawer itself, even one to this very page.
+  useEffect(() => close(), [pathname]);
+
+  const level = path.at(-1);
+  const list = level ? level.children : items;
+
+  return (
+    <>
+      <IconButton
+        icon="menu"
+        label={text.menu}
+        className="mobile-menu__button"
+        aria-expanded={open}
+        onClick={() => setOpen(true)}
+      />
+      <Drawer
+        open={open}
+        onClose={close}
+        title={text.menu}
+        closeLabel={text.close}
+        side="left"
+        className="mobile-menu"
+      >
+        {level && (
+          <div className="mobile-menu__level">
+            <button
+              type="button"
+              className="mobile-menu__back"
+              onClick={() => setPath(path.slice(0, -1))}
+            >
+              <Icon name="chevron-left" size={18} />
+              {text.back}
+            </button>
+            <Link href={level.href} className="mobile-menu__current" onClick={close}>
+              {level.title}
+              <span className="muted">{text.seeAll}</span>
+            </Link>
+          </div>
+        )}
+        <ul className="mobile-menu__list">
+          {list.map((item) => (
+            <li key={item.href} className="mobile-menu__item">
+              <Link href={item.href} className="mobile-menu__link" onClick={close}>
+                {item.title}
+              </Link>
+              {item.children.length > 0 && (
+                <button
+                  type="button"
+                  className="mobile-menu__open"
+                  aria-label={text.submenu(item.title)}
+                  onClick={() => setPath([...path, item])}
+                >
+                  <Icon name="chevron-right" size={18} />
+                </button>
+              )}
+            </li>
+          ))}
+        </ul>
+        {!level && secondary.length > 0 && (
+          <ul className="mobile-menu__secondary">
+            {secondary.map((item) => (
+              <li key={item.href}>
+                <Link href={item.href} onClick={close}>
+                  {item.title}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        )}
+      </Drawer>
+    </>
+  );
+}

package/template/components/header/site-header.tsx

@@ -0,0 +1,78 @@
+import { Image } from '@magicstoreai/hydrogen';
+import type { Schema } from '@magicstoreai/storefront-client';
+import Link from 'next/link';
+
+import { Icon } from '@/components/ui/icon';
+import type { Messages } from '@/lib/i18n';
+import type { NavItem } from '@/lib/menu';
+
+import { PredictiveSearch } from '@/components/search/predictive-search';
+
+import { CartButton } from './cart-button';
+import { DesktopNav } from './desktop-nav';
+import { MobileMenu } from './mobile-menu';
+
+/**
+ * The site header: logo (the merchant's image, else the name as a wordmark), the main navigation,
+ * and icons for search, account, wishlist (only with `features.wishlist`) and the cart. Below
+ * desktop width the navigation moves into a drawer and the logo sits in the middle.
+ */
+export function SiteHeader({
+  shop,
+  nav,
+  showContacts,
+  t,
+}: {
+  shop: Schema<'Shop'>;
+  nav: NavItem[];
+  /** Whether the shop gave any contacts, so `/contacts` has something to show. */
+  showContacts: boolean;
+  t: Messages;
+}) {
+  const secondary: NavItem[] = [
+    { title: t.catalog, href: '/collections', children: [] },
+    ...(shop.features.blog ? [{ title: t.blog, href: '/blog', children: [] }] : []),
+    ...(showContacts ? [{ title: t.contacts, href: '/contacts', children: [] }] : []),
+    { title: t.account, href: '/account', children: [] },
+  ];
+  return (
+    <header className="site-header">
+      <div className="site-header__inner">
+        <div className="site-header__start">
+          <MobileMenu items={nav} secondary={secondary} />
+          <PredictiveSearch className="site-header__search-mobile" />
+        </div>
+        <Link href="/" className="site-header__logo">
+          {shop.branding.logo ? (
+            <Image data={shop.branding.logo} alt={shop.name} height={40} loading="eager" />
+          ) : (
+            shop.name
+          )}
+        </Link>
+        <DesktopNav items={nav} />
+        <div className="site-header__icons">
+          <PredictiveSearch className="site-header__search" />
+          {/* Only when an article is readable in this language (`features.blog`). */}
+          {shop.features.blog && (
+            <Link href="/blog" className="site-header__text-link">
+              {t.blog}
+            </Link>
+          )}
+          <Link href="/account" className="icon-button site-header__account" aria-label={t.account}>
+            <Icon name="user" />
+          </Link>
+          {shop.features.wishlist && (
+            <Link
+              href="/wishlist"
+              className="icon-button site-header__wishlist"
+              aria-label={t.wishlist}
+            >
+              <Icon name="heart" />
+            </Link>
+          )}
+          <CartButton />
+        </div>
+      </div>
+    </header>
+  );
+}

package/template/components/page-loading.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+
+import { locale } from '@/lib/api';
+import { messages } from '@/lib/i18n';
+
+/**
+ * A route's loading state (`loading.tsx`): the page's skeleton, announced once to screen readers.
+ * Skeletons take the final layout's sizes; `.site-main` is a screen tall, so the footer waits below
+ * the fold and nothing on screen shifts when the content arrives.
+ */
+export function PageLoading({ children }: { children: ReactNode }) {
+  return (
+    <div aria-busy="true">
+      <p className="visually-hidden" role="status">
+        {messages(locale).loading}
+      </p>
+      {children}
+    </div>
+  );
+}

package/template/components/pager.tsx

@@ -21,7 +21,9 @@ export function Pager({ meta, href }: { meta: Pagination; href: (page: number) =
         page === null ? (
           <span key={`gap-${index}`}>…</span>
         ) : page === state.page ? (
-          <strong key={page}>{page}</strong>
+          <span key={page} aria-current="page">
+            {page}
+          </span>
         ) : (
           <Link key={page} href={href(page)}>
             {page}