create-magic-storefront 0.1.0

package/template/app/account/page.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+import { Money, useCustomer, useStorefrontClient, useWishlist } from '@magicstoreai/hydrogen';
+import type { Schema } from '@magicstoreai/storefront-client';
+import { useEffect, useState } from 'react';
+import { describe } from '@/lib/errors';
+
+export default function AccountPage() {
+  const { customer, isSignedIn, signOut } = useCustomer();
+  return isSignedIn && customer ? (
+    <div className="stack">
+      <h1>{customer.name || customer.phone}</h1>
+      <Orders />
+      <SavedCount />
+      <div>
+        <button onClick={() => void signOut()}>Sign out</button>
+      </div>
+    </div>
+  ) : (
+    <SignIn />
+  );
+}
+
+function SignIn() {
+  const { requestOtp, verifyOtp } = useCustomer();
+  const [phone, setPhone] = useState('');
+  const [sent, setSent] = useState(false);
+  const [code, setCode] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  async function attempt(step: () => Promise<unknown>) {
+    setError(null);
+    try {
+      await step();
+    } catch (e) {
+      setError(describe(e));
+    }
+  }
+
+  return (
+    <form
+      className="stack"
+      style={{ maxWidth: 360 }}
+      onSubmit={(event) => {
+        event.preventDefault();
+        void attempt(async () => {
+          if (!sent) {
+            await requestOtp(phone);
+            setSent(true);
+          } else {
+            await verifyOtp(phone, code);
+          }
+        });
+      }}
+    >
+      <h1>Sign in</h1>
+      <input
+        value={phone}
+        onChange={(e) => setPhone(e.target.value)}
+        placeholder="+998 90 123 45 67"
+        required
+        disabled={sent}
+      />
+      {sent && (
+        <input
+          value={code}
+          onChange={(e) => setCode(e.target.value)}
+          placeholder="Code from the SMS"
+          inputMode="numeric"
+          required
+        />
+      )}
+      <button className="primary">{sent ? 'Sign in' : 'Send code'}</button>
+      {error && <p className="error">{error}</p>}
+    </form>
+  );
+}
+
+function Orders() {
+  const client = useStorefrontClient();
+  const [orders, setOrders] = useState<Schema<'Order'>[] | null>(null);
+
+  useEffect(() => {
+    void client.customerOrdersIndex({ query: { perPage: 20 } }).then(
+      ({ data }) => setOrders(data),
+      () => setOrders([]),
+    );
+  }, [client]);
+
+  if (orders === null) {
+    return <p className="muted">Loading orders…</p>;
+  }
+  return (
+    <section className="stack">
+      <h2>Orders</h2>
+      {orders.length === 0 && <p className="muted">No orders yet.</p>}
+      <table>
+        <tbody>
+          {orders.map((order) => (
+            <tr key={order.id}>
+              <td>#{order.number}</td>
+              <td>{order.status}</td>
+              <td>
+                <Money data={(order.cost as { total?: Schema<'Money'> | null }).total ?? null} />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </section>
+  );
+}
+
+function SavedCount() {
+  const { productIds } = useWishlist();
+  return <p className="muted">Saved products: {productIds.length}</p>;
+}

package/template/app/api/magicstore/webhook/route.ts

@@ -0,0 +1,9 @@
+import { createWebhookHandler } from '@magicstoreai/hydrogen/server';
+import { revalidateTag } from 'next/cache';
+
+const secret = process.env.MAGICSTORE_WEBHOOK_SECRET;
+
+/** The platform's webhook: a verified event revalidates the cached pages its topic covers. */
+export const POST = secret
+  ? createWebhookHandler({ secret, revalidateTag })
+  : () => new Response('MAGICSTORE_WEBHOOK_SECRET is not set', { status: 501 });

package/template/app/cart/page.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { Image, Money, moneyAmount, useCart } from '@magicstoreai/hydrogen';
+import Link from 'next/link';
+import { useState } from 'react';
+import { describe } from '@/lib/errors';
+
+export default function CartPage() {
+  const { cart, status, error, updateLine, removeLine, setDiscountCodes } = useCart();
+  const [code, setCode] = useState('');
+
+  if (status === 'loading') {
+    return <p className="muted">Loading your cart…</p>;
+  }
+  if (cart === null || cart.lines.length === 0) {
+    return (
+      <div className="stack">
+        <h1>Your cart is empty</h1>
+        <Link href="/">Continue shopping</Link>
+      </div>
+    );
+  }
+
+  const applied = cart.discountCodes[0];
+
+  return (
+    <div className="stack">
+      <h1>Cart</h1>
+      <table>
+        <tbody>
+          {cart.lines.map((line) => (
+            <tr key={line.id}>
+              <td style={{ width: 72 }}>
+                <Image data={line.merchandise.image} width={64} height={64} alt="" />
+              </td>
+              <td>
+                <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">Not available any more</div>}
+              </td>
+              <td>
+                <input
+                  type="number"
+                  min={0}
+                  max={999}
+                  value={line.quantity}
+                  aria-label="Quantity"
+                  onChange={(event) =>
+                    void updateLine(line.id, Number(event.target.value)).catch(() => undefined)
+                  }
+                  style={{ width: 72 }}
+                />
+              </td>
+              <td>
+                <Money data={line.cost.total} />
+              </td>
+              <td>
+                <button onClick={() => void removeLine(line.id).catch(() => undefined)}>
+                  Remove
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <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="Discount code"
+        />
+        <button>Apply</button>
+        {applied && (
+          <span className={applied.applicable ? 'muted' : 'error'}>
+            {applied.code}: {applied.applicable ? 'applied' : `not applied (${applied.reasonCode})`}
+          </span>
+        )}
+      </form>
+
+      <table>
+        <tbody>
+          <tr>
+            <td>Subtotal</td>
+            <td>
+              <Money data={cart.cost.subtotal} />
+            </td>
+          </tr>
+          {cart.cost.discountTotal && moneyAmount(cart.cost.discountTotal) > 0 && (
+            <tr>
+              <td>Discount</td>
+              <td>
+                −<Money data={cart.cost.discountTotal} />
+              </td>
+            </tr>
+          )}
+          <tr>
+            <th>Total</th>
+            <th>
+              <Money data={cart.cost.total} />
+            </th>
+          </tr>
+        </tbody>
+      </table>
+
+      {error && <p className="error">{describe(error)}</p>}
+      <div className="row">
+        <Link href="/checkout" className="button primary">
+          Checkout
+        </Link>
+        {status === 'updating' && <span className="muted">Updating…</span>}
+      </div>
+    </div>
+  );
+}

package/template/app/checkout/page.tsx

@@ -0,0 +1,268 @@
+'use client';
+
+import { Money, useCart, useCustomer, useStorefrontClient } from '@magicstoreai/hydrogen';
+import type { Schema } from '@magicstoreai/storefront-client';
+import Link from 'next/link';
+import { useCallback, useEffect, useState } from 'react';
+import { describe } from '@/lib/errors';
+
+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.
+ */
+export default function CheckoutPage() {
+  const client = useStorefrontClient();
+  const { cart, status: cartStatus } = useCart();
+  const { customer } = useCustomer();
+  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));
+    } finally {
+      setBusy(false);
+    }
+  }, []);
+
+  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],
+  );
+
+  if (completion) {
+    return (
+      <div className="stack">
+        <h1>Thank you!</h1>
+        <p>
+          Order <strong>{completion.order.number}</strong> — <Money data={completion.order.total} />
+        </p>
+        {completion.payment.status === 'PENDING' && completion.payment.redirectUrl && (
+          <a className="button primary" href={completion.payment.redirectUrl}>
+            Pay now
+          </a>
+        )}
+        <Link href="/">Continue shopping</Link>
+      </div>
+    );
+  }
+  if (cartStatus === 'loading') {
+    return <p className="muted">Loading your cart…</p>;
+  }
+  if (cart === null || cart.lines.length === 0) {
+    return (
+      <p>
+        Your cart is empty. <Link href="/">Continue shopping</Link>
+      </p>
+    );
+  }
+  if (checkout === null) {
+    return error ? <p className="error">{error}</p> : <p className="muted">Preparing checkout…</p>;
+  }
+
+  const id = checkout.id;
+  const missing = new Set(checkout.missing);
+
+  return (
+    <div className="stack">
+      <h1>Checkout</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>Contact {missing.has('CONTACT') ? '' : '✓'}</legend>
+          <input
+            name="name"
+            required
+            placeholder="Name"
+            defaultValue={checkout.contact?.name ?? customer?.name ?? ''}
+          />
+          <input
+            name="phone"
+            required
+            placeholder="+998 90 123 45 67"
+            defaultValue={checkout.contact?.phone ?? customer?.phone ?? ''}
+          />
+          <button disabled={busy}>Save contact</button>
+        </fieldset>
+      </form>
+
+      <fieldset className="stack">
+        <legend>
+          Delivery {missing.has('DELIVERY_ADDRESS') || missing.has('DELIVERY_OPTION') ? '' : '✓'}
+        </legend>
+        {locations.length > 0 && (
+          <div className="stack">
+            <strong>Pick up</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>
+        )}
+        <form
+          className="stack"
+          onSubmit={(event) => {
+            event.preventDefault();
+            const form = new FormData(event.currentTarget);
+            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;
+            });
+          }}
+        >
+          <strong>Or deliver to</strong>
+          <input name="address" placeholder="Street, house" />
+          <input name="city" placeholder="City" />
+          <div className="row">
+            <input name="latitude" required inputMode="decimal" placeholder="Latitude" />
+            <input name="longitude" required inputMode="decimal" placeholder="Longitude" />
+            <button type="button" onClick={(event) => fillMyLocation(event.currentTarget.form)}>
+              Use my location
+            </button>
+          </div>
+          <button disabled={busy}>Show delivery options</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="free" />
+          </label>
+        ))}
+      </fieldset>
+
+      <fieldset className="stack">
+        <legend>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>
+
+      <p>
+        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);
+          })
+        }
+      >
+        Place order
+      </button>
+    </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]/page.tsx

@@ -0,0 +1,48 @@
+import type { Metadata } from 'next';
+import { breadcrumbJsonLd, jsonLdScript, pageMeta } from '@magicstoreai/hydrogen/seo';
+import { CollectionView } from '@/components/analytics-views';
+import { Pager } from '@/components/pager';
+import { ProductGrid } from '@/components/product-grid';
+import { api, orNotFound } from '@/lib/api';
+
+type Props = { params: Promise<{ handle: string }>; searchParams: Promise<{ page?: string }> };
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { handle } = await params;
+  const { data: collection } = await orNotFound(api.collectionsShow({ path: { handle } }));
+  const meta = pageMeta({
+    seo: collection.seo,
+    title: collection.title,
+    description: collection.description,
+  });
+  return { title: meta.title, description: meta.description };
+}
+
+export default async function CollectionPage({ params, searchParams }: Props) {
+  const { handle } = await params;
+  const page = Math.max(1, Number((await searchParams).page) || 1);
+  const [{ data: collection }, products] = await Promise.all([
+    orNotFound(api.collectionsShow({ path: { handle } })),
+    orNotFound(api.collectionsProducts({ path: { handle }, query: { page, perPage: 24 } })),
+  ]);
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: jsonLdScript(
+            breadcrumbJsonLd([
+              { name: 'Home', url: '/' },
+              { name: collection.title, url: `/collections/${collection.handle}` },
+            ]),
+          ),
+        }}
+      />
+      <CollectionView collectionId={collection.id} />
+      <h1>{collection.title}</h1>
+      <ProductGrid products={products.data} />
+      <Pager meta={products.meta.pagination} href={(p) => `/collections/${handle}?page=${p}`} />
+    </>
+  );
+}

package/template/app/error.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { MagicStoreError } from '@magicstoreai/hydrogen';
+
+/** Any failure a page did not handle itself: the API's detail when there is one, and a retry. */
+export default function ErrorPage({ error, reset }: { error: Error; reset: () => void }) {
+  const unavailable = error instanceof MagicStoreError && error.code === 'STORE_UNAVAILABLE';
+  return (
+    <div className="stack">
+      <h1>{unavailable ? 'The shop is temporarily closed' : 'Something went wrong'}</h1>
+      {error instanceof MagicStoreError && error.detail && <p>{error.detail}</p>}
+      <div className="row">
+        <button onClick={reset}>Try again</button>
+        <a href="/">Back to the shop</a>
+      </div>
+    </div>
+  );
+}