create-magic-storefront 0.4.0 → 0.6.0

package/template/app/cart/page.tsx

@@ -1,120 +1,68 @@
 'use client';
 
-import { Image, Money, moneyAmount, useCart, useMagicStore } from '@magicstoreai/hydrogen';
+import { useCart, useMagicStore } from '@magicstoreai/hydrogen';
 import Link from 'next/link';
-import { useState } from 'react';
-import { describe } from '@/lib/errors';
+import { CartLines } from '@/components/cart/cart-lines';
+import { CartSummary } from '@/components/cart/cart-summary';
+import { buttonClass } from '@/components/ui/button';
+import { EmptyState } from '@/components/ui/empty-state';
+import { Skeleton } from '@/components/ui/skeleton';
 import { messages } from '@/lib/i18n';
 
+/**
+ * The cart: its lines beside a sticky summary from 990px, the summary after the lines below. The
+ * cart is the browser's (`useCart`); every amount is the API's.
+ */
 export default function CartPage() {
-  const { cart, status, error, updateLine, removeLine, setDiscountCodes } = useCart();
-  const [code, setCode] = useState('');
+  const { cart, status } = useCart();
   const t = messages(useMagicStore().locale);
 
   if (status === 'loading') {
-    return <p className="muted">{t.loadingCart}</p>;
+    return (
+      <div aria-busy="true">
+        <h1 className="page-title">{t.cart}</h1>
+        <p className="visually-hidden" role="status">
+          {t.loadingCart}
+        </p>
+        <div className="cart-page">
+          <div className="stack">
+            {[0, 1, 2].map((index) => (
+              <Skeleton key={index} height="7rem" />
+            ))}
+          </div>
+          <Skeleton height="18rem" />
+        </div>
+      </div>
+    );
   }
   if (cart === null || cart.lines.length === 0) {
     return (
-      <div className="stack">
-        <h1>{t.cartEmpty}</h1>
-        <Link href="/">{t.continueShopping}</Link>
-      </div>
+      <>
+        <h1 className="page-title">{t.cart}</h1>
+        <EmptyState
+          title={t.cartEmpty}
+          icon="cart"
+          action={
+            <Link href="/collections" className={buttonClass({ variant: 'primary' })}>
+              {t.shopNow}
+            </Link>
+          }
+        >
+          {t.cartEmptyHint}
+        </EmptyState>
+      </>
     );
   }
 
-  const applied = cart.discountCodes[0];
-
   return (
-    <div className="stack">
-      <h1>{t.cart}</h1>
-      <ul className="cart-lines">
-        {cart.lines.map((line) => (
-          <li key={line.id} className="cart-line">
-            <Image data={line.merchandise.image} width={64} height={64} alt="" />
-            <div>
-              <div>{line.merchandise.product?.title}</div>
-              {line.merchandise.variant &&
-                !/^Default( Title)?$/.test(line.merchandise.variant.title) && (
-                  <div className="muted">{line.merchandise.variant.title}</div>
-                )}
-              {!line.available && <div className="error">{t.notAvailable}</div>}
-            </div>
-            <div className="cart-line-controls">
-              <input
-                type="number"
-                min={0}
-                max={999}
-                value={line.quantity}
-                aria-label={t.quantity}
-                onChange={(event) =>
-                  void updateLine(line.id, Number(event.target.value)).catch(() => undefined)
-                }
-                style={{ width: 72 }}
-              />
-              <Money data={line.cost.total} />
-              <button onClick={() => void removeLine(line.id).catch(() => undefined)}>
-                {t.remove}
-              </button>
-            </div>
-          </li>
-        ))}
-      </ul>
-
-      <form
-        className="row"
-        onSubmit={(event) => {
-          event.preventDefault();
-          void setDiscountCodes(code.trim() ? [code.trim()] : []).catch(() => undefined);
-        }}
-      >
-        <input
-          value={code}
-          onChange={(event) => setCode(event.target.value)}
-          placeholder={t.discountCode}
-          aria-label={t.discountCode}
-        />
-        <button>{t.apply}</button>
-        {applied && (
-          <span className={applied.applicable ? 'muted' : 'error'}>
-            {applied.code}:{' '}
-            {applied.applicable ? t.codeApplied : `${t.codeNotApplied} (${applied.reasonCode})`}
-          </span>
-        )}
-      </form>
-
-      <table>
-        <tbody>
-          <tr>
-            <td>{t.subtotal}</td>
-            <td>
-              <Money data={cart.cost.subtotal} />
-            </td>
-          </tr>
-          {cart.cost.discountTotal && moneyAmount(cart.cost.discountTotal) > 0 && (
-            <tr>
-              <td>{t.discount}</td>
-              <td>
-                −<Money data={cart.cost.discountTotal} />
-              </td>
-            </tr>
-          )}
-          <tr>
-            <th>{t.total}</th>
-            <th>
-              <Money data={cart.cost.total} />
-            </th>
-          </tr>
-        </tbody>
-      </table>
-
-      {error && <p className="error">{describe(error, t.tryAgainLater)}</p>}
-      <div className="row">
-        <Link href="/checkout" className="button primary">
-          {t.checkout}
-        </Link>
-        {status === 'updating' && <span className="muted">{t.updating}</span>}
+    <>
+      <h1 className="page-title">{t.cart}</h1>
+      <div className="cart-page">
+        <section className="cart-page__lines" aria-label={t.cart}>
+          <CartLines />
+        </section>
+        <CartSummary cart={cart} />
       </div>
-    </div>
+    </>
   );
 }

package/template/app/checkout/layout.tsx

@@ -0,0 +1,14 @@
+import type { Metadata } from 'next';
+import type { ReactNode } from 'react';
+import { locale } from '@/lib/api';
+import { messages } from '@/lib/i18n';
+
+// The checkout is a client component; its title and robots come from here. Personal: not indexed.
+export const metadata: Metadata = {
+  title: messages(locale).checkoutTitle,
+  robots: { index: false, follow: false },
+};
+
+export default function CheckoutLayout({ children }: { children: ReactNode }) {
+  return children;
+}

package/template/app/checkout/page.tsx

@@ -1,316 +1,133 @@
 'use client';
 
-import {
-  Money,
-  useCart,
-  useCustomer,
-  useMagicStore,
-  useStorefrontClient,
-} from '@magicstoreai/hydrogen';
-import type { Schema } from '@magicstoreai/storefront-client';
+import { Money, useMagicStore } from '@magicstoreai/hydrogen';
 import Link from 'next/link';
-import { useCallback, useEffect, useState } from 'react';
-import { describe } from '@/lib/errors';
+import { OrderSummary } from '@/components/checkout/order-summary';
+import { StepIndicator } from '@/components/checkout/step-indicator';
+import { ContactStep, DeliveryStep, PaymentStep } from '@/components/checkout/steps';
+import { ThankYou } from '@/components/checkout/thank-you';
+import { useCheckout } from '@/components/checkout/use-checkout';
+import { Button, buttonClass } from '@/components/ui/button';
+import { EmptyState } from '@/components/ui/empty-state';
+import { Icon } from '@/components/ui/icon';
+import { Skeleton } from '@/components/ui/skeleton';
 import { messages } from '@/lib/i18n';
 
-type Checkout = Schema<'Checkout'>;
-type DeliveryOption = Schema<'DeliveryOption'>;
-type Location = Schema<'Location'>;
-type Completion = Schema<'CheckoutCompletion'>;
-
 /**
  * One page, filled in the order the checkout's `missing` lists: contact → delivery (pickup point,
- * or an address and a delivery option) → payment method → place the order. The server prices
- * everything; this page only shows what it answers.
+ * or an address and a delivery option) → payment method → place the order. Steps on the left, the
+ * order on the right (a collapsible bar with the total on phones). The server prices everything;
+ * this page only shows what it answers.
  */
 export default function CheckoutPage() {
-  const client = useStorefrontClient();
-  const { cart, status: cartStatus } = useCart();
-  const { customer } = useCustomer();
   const t = messages(useMagicStore().locale);
-  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 [busy, setBusy] = useState(false);
-
-  const run = useCallback(
-    async (step: () => Promise<{ data: Checkout } | void>) => {
-      setBusy(true);
-      setError(null);
-      try {
-        const result = await step();
-        if (result) {
-          setCheckout(result.data);
-        }
-      } catch (e) {
-        setError(describe(e, t.tryAgainLater));
-      } finally {
-        setBusy(false);
-      }
-    },
-    [t],
-  );
-
-  useEffect(() => {
-    if (cart === null || checkout !== null) {
-      return;
-    }
-    void run(() => client.checkoutsStore({ body: { cartId: cart.id } }));
-    void client.locationsIndex({ query: { perPage: 50 } }).then(
-      ({ data }) => setLocations(data),
-      () => undefined,
-    );
-  }, [cart, checkout, client, run]);
-
-  const loadOptions = useCallback(
-    async (id: string) =>
-      setOptions((await client.checkoutsDeliveryOptions({ path: { id } })).data),
-    [client],
-  );
+  const state = useCheckout(t.tryAgainLater);
+  const { client, cart, cartStatus, checkout, completion, setCompletion, error, busy, run } = state;
 
   if (completion) {
+    return <ThankYou completion={completion} t={t} />;
+  }
+  if (
+    cartStatus === 'loading' ||
+    (cart !== null && cart.lines.length > 0 && checkout === null && !error)
+  ) {
     return (
-      <div className="stack">
-        <h1>{t.thankYou}</h1>
-        <p>
-          {t.order} <strong>{completion.order.number}</strong> —{' '}
-          <Money data={completion.order.total} />
+      <div className="checkout" aria-busy="true">
+        <p className="visually-hidden" role="status">
+          {cartStatus === 'loading' ? t.loadingCart : t.preparingCheckout}
         </p>
-        {completion.payment.status === 'PENDING' && completion.payment.redirectUrl && (
-          <a className="button primary" href={completion.payment.redirectUrl}>
-            {t.payNow}
-          </a>
-        )}
-        <Link href="/">{t.continueShopping}</Link>
+        <div className="checkout__main stack">
+          <Skeleton height="2.5rem" width="60%" />
+          <Skeleton height="10rem" />
+          <Skeleton height="14rem" />
+        </div>
+        <Skeleton height="16rem" />
       </div>
     );
   }
-  if (cartStatus === 'loading') {
-    return <p className="muted">{t.loadingCart}</p>;
-  }
   if (cart === null || cart.lines.length === 0) {
     return (
-      <p>
-        {t.cartEmpty}. <Link href="/">{t.continueShopping}</Link>
-      </p>
+      <EmptyState
+        title={t.cartEmpty}
+        icon="cart"
+        action={
+          <Link href="/collections" className={buttonClass({ variant: 'primary' })}>
+            {t.shopNow}
+          </Link>
+        }
+      >
+        {t.cartEmptyHint}
+      </EmptyState>
     );
   }
   if (checkout === null) {
-    return error ? (
-      <p className="error">{error}</p>
-    ) : (
-      <p className="muted">{t.preparingCheckout}</p>
+    return (
+      <EmptyState
+        title={t.somethingWentWrong}
+        action={
+          <Link href="/cart" className={buttonClass()}>
+            {t.backToCart}
+          </Link>
+        }
+      >
+        <span role="alert">{error}</span>
+      </EmptyState>
     );
   }
 
-  const id = checkout.id;
-  const missing = new Set(checkout.missing);
+  const ready = { ...state, checkout };
 
   return (
-    <div className="stack">
-      <h1>{t.checkoutTitle}</h1>
-
-      <form
-        className="stack"
-        onSubmit={(event) => {
-          event.preventDefault();
-          const form = new FormData(event.currentTarget);
-          void run(() =>
-            client.checkoutsContact({
-              path: { id },
-              body: { name: String(form.get('name')), phone: String(form.get('phone')) },
-            }),
-          );
-        }}
-      >
-        <fieldset className="stack">
-          <legend>
-            {t.contact} {missing.has('CONTACT') ? '' : '✓'}
-          </legend>
-          <input
-            name="name"
-            required
-            placeholder={t.name}
-            aria-label={t.name}
-            autoComplete="name"
-            defaultValue={checkout.contact?.name ?? customer?.name ?? ''}
-          />
-          <input
-            name="phone"
-            required
-            placeholder="+998 90 123 45 67"
-            aria-label={t.phone}
-            type="tel"
-            autoComplete="tel"
-            defaultValue={checkout.contact?.phone ?? customer?.phone ?? ''}
-          />
-          <button disabled={busy}>{t.saveContact}</button>
-        </fieldset>
-      </form>
+    <div className="checkout">
+      <details className="checkout__summary-toggle">
+        <summary>
+          <span className="checkout__summary-label">
+            <Icon name="cart" size={18} />
+            {t.showOrderSummary}
+            <Icon name="chevron-down" size={16} className="checkout__summary-chevron" />
+          </span>
+          <strong>{checkout.cost.total && <Money data={checkout.cost.total} />}</strong>
+        </summary>
+        <OrderSummary checkout={checkout} t={t} />
+      </details>
 
-      <fieldset className="stack">
-        <legend>
-          {t.delivery}{' '}
-          {missing.has('DELIVERY_ADDRESS') || missing.has('DELIVERY_OPTION') ? '' : '✓'}
-        </legend>
-        {locations.length > 0 && (
-          <div className="stack">
-            <strong>{t.pickUp}</strong>
-            {locations.map((location) => (
-              <label key={location.id} className="row">
-                <input
-                  type="radio"
-                  name="pickup"
-                  checked={checkout.pickupLocation?.id === location.id}
-                  onChange={() =>
-                    void run(() =>
-                      client.checkoutsPickupLocation({
-                        path: { id },
-                        body: { locationId: location.id },
-                      }),
-                    )
-                  }
-                />
-                {location.name}{' '}
-                {location.address && <span className="muted">— {location.address}</span>}
-              </label>
-            ))}
-          </div>
+      <div className="checkout__main">
+        <h1 className="page-title">{t.checkoutTitle}</h1>
+        <StepIndicator missing={checkout.missing} t={t} />
+        <ContactStep state={ready} t={t} />
+        <DeliveryStep state={ready} t={t} />
+        <PaymentStep state={ready} t={t} />
+        {error && (
+          <p className="error" role="alert">
+            {error}
+          </p>
         )}
-        <form
-          className="stack"
-          onSubmit={(event) => {
-            event.preventDefault();
-            const form = new FormData(event.currentTarget);
+        <Button
+          variant="primary"
+          size="lg"
+          full
+          className="checkout__place"
+          disabled={!checkout.readyForCompletion}
+          loading={busy}
+          onClick={() =>
             void run(async () => {
-              const answer = await client.checkoutsShippingAddress({
-                path: { id },
-                body: {
-                  address: String(form.get('address') || '') || null,
-                  address2: null,
-                  city: String(form.get('city') || '') || null,
-                  latitude: Number(form.get('latitude')),
-                  longitude: Number(form.get('longitude')),
-                },
-              });
-              await loadOptions(id);
-              return answer;
-            });
-          }}
+              const { data } = await client.checkoutsCompletion({ path: { id: checkout.id } });
+              setCompletion(data);
+            })
+          }
         >
-          <strong>{locations.length > 0 ? t.orDeliverTo : t.deliverTo}</strong>
-          <input
-            name="address"
-            placeholder={t.street}
-            aria-label={t.street}
-            autoComplete="street-address"
-          />
-          <input
-            name="city"
-            placeholder={t.city}
-            aria-label={t.city}
-            autoComplete="address-level2"
-          />
-          <div className="row">
-            <input
-              name="latitude"
-              required
-              inputMode="decimal"
-              placeholder={t.latitude}
-              aria-label={t.latitude}
-            />
-            <input
-              name="longitude"
-              required
-              inputMode="decimal"
-              placeholder={t.longitude}
-              aria-label={t.longitude}
-            />
-            <button type="button" onClick={(event) => fillMyLocation(event.currentTarget.form)}>
-              {t.useMyLocation}
-            </button>
-          </div>
-          <button disabled={busy}>{t.showDeliveryOptions}</button>
-        </form>
-        {options.map((option) => (
-          <label key={option.id} className="row">
-            <input
-              type="radio"
-              name="delivery"
-              disabled={!option.available}
-              checked={checkout.selectedDeliveryOption?.id === option.id}
-              onChange={() =>
-                void run(() =>
-                  client.checkoutsDeliveryOption({
-                    path: { id },
-                    body: { deliveryOptionId: option.id },
-                  }),
-                )
-              }
-            />
-            {option.title} — <Money data={option.price} fallback={t.free} />
-          </label>
-        ))}
-      </fieldset>
-
-      <fieldset className="stack">
-        <legend>
-          {t.payment} {missing.has('PAYMENT_METHOD') ? '' : '✓'}
-        </legend>
-        {checkout.paymentMethods.map((method) => (
-          <label key={method.id} className="row">
-            <input
-              type="radio"
-              name="payment"
-              checked={checkout.selectedPaymentMethod?.id === method.id}
-              onChange={() =>
-                void run(() =>
-                  client.checkoutsPaymentMethod({
-                    path: { id },
-                    body: { paymentMethodId: method.id },
-                  }),
-                )
-              }
-            />
-            {method.title}
-          </label>
-        ))}
-      </fieldset>
+          {t.placeOrder}
+        </Button>
+        <Link href="/cart" className="checkout__back">
+          <Icon name="chevron-left" size={16} />
+          {t.backToCart}
+        </Link>
+      </div>
 
-      <p>
-        {t.total}:{' '}
-        <strong>
-          <Money data={checkout.cost.total} />
-        </strong>
-      </p>
-      {error && <p className="error">{error}</p>}
-      <button
-        className="primary"
-        disabled={busy || !checkout.readyForCompletion}
-        onClick={() =>
-          void run(async () => {
-            const { data } = await client.checkoutsCompletion({ path: { id } });
-            setCompletion(data);
-          })
-        }
-      >
-        {t.placeOrder}
-      </button>
+      <aside className="checkout__aside" aria-label={t.summary}>
+        <h2 className="checkout__aside-title">{t.summary}</h2>
+        <OrderSummary checkout={checkout} t={t} />
+      </aside>
     </div>
   );
 }
-
-function fillMyLocation(form: HTMLFormElement | null): void {
-  navigator.geolocation?.getCurrentPosition((position) => {
-    const set = (name: string, value: number) => {
-      const input = form?.elements.namedItem(name);
-      if (input instanceof HTMLInputElement) {
-        input.value = value.toFixed(6);
-      }
-    };
-    set('latitude', position.coords.latitude);
-    set('longitude', position.coords.longitude);
-  });
-}

package/template/app/collections/[handle]/layout.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+
+import { api, orNotFound } from '@/lib/api';
+
+/**
+ * The collection must exist before the page streams: `loading.tsx` below sends the headers, so a
+ * `notFound()` in the page would answer 200. Checked here, a missing handle is a real 404. The page
+ * reads the same request from the cache.
+ */
+export default async function CollectionLayout({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: Promise<{ handle: string }>;
+}) {
+  const { handle } = await params;
+  await orNotFound(api.collectionsShow({ path: { handle } }));
+  return children;
+}

package/template/app/collections/[handle]/loading.tsx

@@ -0,0 +1,23 @@
+import { PageLoading } from '@/components/page-loading';
+import { ProductGridSkeleton, Skeleton, TitleSkeleton } from '@/components/ui/skeleton';
+
+export default function CollectionLoading() {
+  return (
+    <PageLoading>
+      <Skeleton height="1rem" width="12rem" className="breadcrumbs" />
+      <TitleSkeleton />
+      <div className="catalog catalog--with-facets">
+        <div className="catalog__facets">
+          <Skeleton height="20rem" />
+        </div>
+        <div className="catalog__main">
+          <div className="catalog__toolbar">
+            <Skeleton height="1rem" width="6rem" />
+            <Skeleton height="2.5rem" width="12rem" />
+          </div>
+          <ProductGridSkeleton />
+        </div>
+      </div>
+    </PageLoading>
+  );
+}