create-magic-storefront 0.4.0 → 0.6.0

package/template/components/account/order-list.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { Money, useMagicStore, useStorefrontClient } from '@magicstoreai/hydrogen';
+import type { Schema } from '@magicstoreai/storefront-client';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+
+import { 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 { describe } from '@/lib/errors';
+import { messages } from '@/lib/i18n';
+
+import { formatDate, OrderStatus } from './order-status';
+
+type Order = Schema<'Order'>;
+
+/** The customer's orders, newest first, each a link to its page. */
+export function OrderList() {
+  const client = useStorefrontClient();
+  const { locale } = useMagicStore();
+  const t = messages(locale);
+  const [orders, setOrders] = useState<Order[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let current = true;
+    client.customerOrdersIndex({ query: { perPage: 20 } }).then(
+      ({ data }) => current && setOrders(data),
+      (e: unknown) => current && setError(describe(e, t.tryAgainLater)),
+    );
+    return () => {
+      current = false;
+    };
+  }, [client, t.tryAgainLater]);
+
+  if (error) {
+    return (
+      <p className="error" role="alert">
+        {error}
+      </p>
+    );
+  }
+  if (orders === null) {
+    return (
+      <div className="stack" aria-busy="true">
+        <p className="visually-hidden" role="status">
+          {t.loadingOrders}
+        </p>
+        {[0, 1, 2].map((index) => (
+          <Skeleton key={index} height="5.5rem" />
+        ))}
+      </div>
+    );
+  }
+  if (orders.length === 0) {
+    return (
+      <EmptyState
+        title={t.noOrders}
+        icon="cart"
+        action={
+          <Link href="/collections" className={buttonClass({ variant: 'primary' })}>
+            {t.shopNow}
+          </Link>
+        }
+      />
+    );
+  }
+  return (
+    <ul className="order-list">
+      {orders.map((order) => {
+        const date = formatDate(order.createdAt, locale);
+        return (
+          <li key={order.id}>
+            <Link href={`/account/orders/${order.id}`} className="order-card">
+              <span className="order-card__main">
+                <span className="order-card__number">{t.orderNumber(order.number)}</span>
+                <span className="muted text-sm">
+                  {[date && t.placedOn(date), t.itemsCount(order.totalQuantity)]
+                    .filter(Boolean)
+                    .join(' · ')}
+                </span>
+              </span>
+              <OrderStatus status={order.status} t={t} />
+              <Money data={order.cost.total} className="order-card__total" />
+              <Icon name="chevron-right" className="order-card__arrow" />
+            </Link>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/template/components/account/order-status.tsx

@@ -0,0 +1,19 @@
+import type { Schema } from '@magicstoreai/storefront-client';
+
+import type { Messages } from '@/lib/i18n';
+
+/** An order's status as a pill; the colour follows the status, the words come from `i18n`. */
+export function OrderStatus({ status, t }: { status: Schema<'Order'>['status']; t: Messages }) {
+  return (
+    <span className={`order-status order-status--${status.toLowerCase()}`}>
+      {t.orderStatus[status]}
+    </span>
+  );
+}
+
+/** A date as the shop's language writes it, or nothing. */
+export function formatDate(value: string | null, locale: string): string | null {
+  return value
+    ? new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }).format(new Date(value))
+    : null;
+}

package/template/components/account/profile.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import { useCustomer, useMagicStore, useStorefrontClient } from '@magicstoreai/hydrogen';
+import type { Schema } from '@magicstoreai/storefront-client';
+import { useId, useState, type FormEvent } from 'react';
+
+import { Button } from '@/components/ui/button';
+import { Field } from '@/components/ui/field';
+import { formErrors } from '@/lib/errors';
+import { messages } from '@/lib/i18n';
+
+type Gender = NonNullable<Schema<'CustomerUpdateRequest'>['gender']>;
+
+/** The languages a customer may choose (`CustomerUpdateRequest.locale`), each in its own words. */
+const LANGUAGES = { ru: 'Русский', uz: "O'zbekcha", en: 'English' } as const;
+
+/**
+ * The customer's details (`customerUpdate`): name, gender, language. The phone is how they sign in;
+ * it is shown, not edited here (changing it needs a code). Then sign out.
+ */
+export function Profile() {
+  const client = useStorefrontClient();
+  const { customer, reload, signOut } = useCustomer();
+  const { locale } = useMagicStore();
+  const t = messages(locale);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [error, setError] = useState<string | null>(null);
+  const [saved, setSaved] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const genderId = useId();
+  const languageId = useId();
+
+  if (customer === null) {
+    return null;
+  }
+
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const form = new FormData(event.currentTarget);
+    const gender = String(form.get('gender') ?? '');
+    setErrors({});
+    setError(null);
+    setSaved(false);
+    setBusy(true);
+    try {
+      await client.customerUpdate({
+        body: {
+          name: String(form.get('name') ?? '').trim(),
+          gender: gender === '' ? null : (gender as Gender),
+          locale: String(form.get('locale')) as keyof typeof LANGUAGES,
+        },
+      });
+      await reload();
+      setSaved(true);
+    } catch (e) {
+      const { fields, summary } = formErrors(e, ['name'], t.tryAgainLater);
+      setErrors(fields);
+      setError(summary);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="stack stack--loose">
+      <form className="profile-form" onSubmit={submit}>
+        <Field
+          label={t.name}
+          name="name"
+          autoComplete="name"
+          maxLength={255}
+          defaultValue={customer.name ?? ''}
+          error={errors.name}
+        />
+        {customer.phone && (
+          <div className="field">
+            <span className="field__label">{t.phone}</span>
+            <p>{customer.phone}</p>
+            <p className="muted text-sm">{t.phoneHint}</p>
+          </div>
+        )}
+        <div className="field">
+          <label className="field__label" htmlFor={genderId}>
+            {t.gender}
+          </label>
+          <select id={genderId} name="gender" defaultValue={customer.gender ?? ''}>
+            <option value="">{t.genderOptions.none}</option>
+            <option value="MALE">{t.genderOptions.MALE}</option>
+            <option value="FEMALE">{t.genderOptions.FEMALE}</option>
+          </select>
+        </div>
+        <div className="field">
+          <label className="field__label" htmlFor={languageId}>
+            {t.language}
+          </label>
+          <select
+            id={languageId}
+            name="locale"
+            defaultValue={
+              [customer.locale, locale].find((code) => code && code in LANGUAGES) ?? 'en'
+            }
+          >
+            {Object.entries(LANGUAGES).map(([code, name]) => (
+              <option key={code} value={code} lang={code}>
+                {name}
+              </option>
+            ))}
+          </select>
+        </div>
+        {error && (
+          <p className="error" role="alert">
+            {error}
+          </p>
+        )}
+        <div className="row">
+          <Button type="submit" variant="primary" loading={busy}>
+            {t.saveChanges}
+          </Button>
+          <span className="muted text-sm" role="status">
+            {saved ? t.changesSaved : ''}
+          </span>
+        </div>
+      </form>
+      <div>
+        <Button onClick={() => void signOut()}>{t.signOut}</Button>
+      </div>
+    </div>
+  );
+}

package/template/components/account/sign-in.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import {
+  useCustomer,
+  useMagicStore,
+  useTelegramSignIn,
+  useTelegramWebApp,
+} from '@magicstoreai/hydrogen';
+import { useState } from 'react';
+
+import { Button } from '@/components/ui/button';
+import { Field } from '@/components/ui/field';
+import { describe } from '@/lib/errors';
+import { messages } from '@/lib/i18n';
+
+/**
+ * Sign-in: inside a Telegram Mini App the Telegram button first, then the phone form (a code by
+ * SMS, or the phone alone where the shop has sign-in codes off).
+ */
+export function SignIn() {
+  const { status, isTelegram } = useTelegramWebApp();
+  const { locale, shop } = useMagicStore();
+  const t = messages(locale);
+  // Until the app has looked (`unknown`, server render included), a shop with a bot may be open in
+  // Telegram: hold the Telegram block's place so the phone form does not jump down after mount.
+  const maybeTelegram = status === 'unknown' && shop?.features.telegramBot === true;
+  return (
+    <div className="auth-card">
+      <h1 className="auth-card__title">{t.signIn}</h1>
+      {isTelegram && <TelegramBlock />}
+      {maybeTelegram && <TelegramBlock placeholder />}
+      <PhoneSignIn />
+    </div>
+  );
+}
+
+/**
+ * The Telegram sign-in above the phone form. As a `placeholder` it renders the same markup, hidden,
+ * so the reserved space always matches the real block.
+ */
+function TelegramBlock({ placeholder = false }: { placeholder?: boolean }) {
+  const t = messages(useMagicStore().locale);
+  return (
+    <div
+      className="stack"
+      aria-hidden={placeholder || undefined}
+      style={placeholder ? { visibility: 'hidden' } : undefined}
+    >
+      <TelegramSignIn />
+      <p className="auth-card__divider">{t.orWithPhone}</p>
+    </div>
+  );
+}
+
+/**
+ * Inside a Mini App: sign in with the launch data. The automatic sign-in runs in
+ * components/telegram-shell.tsx; this is the manual retry. The hook shares the attempt's state, so
+ * this shows the automatic attempt too: "Signing in…" while it runs, the relaunch hint when it failed.
+ */
+function TelegramSignIn() {
+  const { status, error, signIn } = useTelegramSignIn({ auto: false });
+  const t = messages(useMagicStore().locale);
+  // FORBIDDEN: the shop has no bot, so retrying is pointless.
+  const unavailable = error?.code === 'FORBIDDEN';
+  return (
+    <div className="stack">
+      {!unavailable && (
+        <button
+          className="button button--primary button--lg button--full"
+          disabled={status === 'signing-in'}
+          onClick={() => void signIn()}
+        >
+          {status === 'signing-in' ? t.signingIn : t.signInWithTelegram}
+        </button>
+      )}
+      {status === 'failed' && (
+        <p className="error" role="alert">
+          {error?.code === 'UNAUTHENTICATED'
+            ? t.telegramRelaunch
+            : unavailable
+              ? t.telegramUnavailable
+              : describe(error, t.tryAgainLater)}
+        </p>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Phone sign-in: a code by SMS, or — on a shop whose sign-in code is off
+ * (`shop.features.otpLogin === false`) — the phone alone.
+ */
+function PhoneSignIn() {
+  const { requestOtp, verifyOtp, signInWithPhone } = useCustomer();
+  const { locale, shop } = useMagicStore();
+  const t = messages(locale);
+  const withoutCode = shop?.features.otpLogin === false;
+  const [phone, setPhone] = useState('');
+  const [sent, setSent] = useState(false);
+  const [code, setCode] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function attempt(step: () => Promise<unknown>) {
+    setError(null);
+    setBusy(true);
+    try {
+      await step();
+    } catch (e) {
+      setError(describe(e, t.tryAgainLater));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <form
+      className="stack"
+      onSubmit={(event) => {
+        event.preventDefault();
+        void attempt(async () => {
+          if (withoutCode) {
+            await signInWithPhone(phone);
+          } else if (!sent) {
+            await requestOtp(phone);
+            setSent(true);
+          } else {
+            await verifyOtp(phone, code);
+          }
+        });
+      }}
+    >
+      <Field
+        label={t.phone}
+        value={phone}
+        onChange={(e) => setPhone(e.target.value)}
+        placeholder="+998 90 123 45 67"
+        type="tel"
+        autoComplete="tel"
+        required
+        disabled={sent}
+      />
+      {sent && (
+        <Field
+          label={t.smsCode}
+          value={code}
+          onChange={(e) => setCode(e.target.value)}
+          inputMode="numeric"
+          autoComplete="one-time-code"
+          required
+          autoFocus
+        />
+      )}
+      <Button type="submit" variant="primary" size="lg" full loading={busy}>
+        {sent || withoutCode ? t.signIn : t.sendCode}
+      </Button>
+      {error && (
+        <p className="error" role="alert">
+          {error}
+        </p>
+      )}
+    </form>
+  );
+}

package/template/components/article-body.tsx

@@ -1,6 +1,7 @@
 import { articleBodyBlocks, type ArticleBlock } from '@magicstoreai/hydrogen/core';
 import type { Schema } from '@magicstoreai/storefront-client';
-import { ProductCard } from '@/components/product-grid';
+import { ProductCard } from '@/components/product-card';
+import { locale } from '@/lib/api';
 
 type Product = Schema<'Product'>;
 
@@ -34,7 +35,7 @@ function Blocks({
         const product = products.get(block.handle);
         return product ? (
           <div key={index} className="article-product">
-            <ProductCard product={product} />
+            <ProductCard product={product} locale={locale} />
           </div>
         ) : null;
       }

package/template/components/article-card.tsx

@@ -22,19 +22,44 @@ function formatDate(iso: string, timeZone: string): string {
   }
 }
 
-/** One article as a card: cover, category, title, excerpt, author, date and reading time. */
-export function ArticleCard({ article, timeZone }: { article: Article; timeZone: string }) {
+/**
+ * One article as a card: cover, category, title, excerpt, then author, date and reading time.
+ * `feature` lays it out large, the cover beside the text: the blog's lead article.
+ */
+export function ArticleCard({
+  article,
+  timeZone,
+  feature = false,
+}: {
+  article: Article;
+  timeZone: string;
+  feature?: boolean;
+}) {
   const t = messages(locale);
   return (
-    <Link href={`/blog/${article.handle}`} className="card article-card">
-      <Image data={article.image} alt={article.title} fallback={<div className="noimg" />} />
-      {article.category && <span className="badge">{article.category.title}</span>}
-      <strong>{article.title}</strong>
-      {article.excerpt && <span className="muted">{article.excerpt}</span>}
-      <span className="row muted">
-        {article.authorName && <span>{article.authorName}</span>}
-        <ArticleDate iso={article.publishedAt} timeZone={timeZone} />
-        <span>{t.readingTime(article.readingMinutes)}</span>
+    <Link
+      href={`/blog/${article.handle}`}
+      className={feature ? 'article-card article-card--feature' : 'article-card'}
+    >
+      <span className="article-card__media">
+        <Image
+          data={article.image}
+          alt=""
+          loading={feature ? 'eager' : 'lazy'}
+          fallback={<span className="media-fallback" />}
+        />
+      </span>
+      <span className="article-card__body">
+        {article.category && (
+          <span className="article-card__category">{article.category.title}</span>
+        )}
+        <span className="article-card__title">{article.title}</span>
+        {article.excerpt && <span className="article-card__excerpt">{article.excerpt}</span>}
+        <span className="article-card__meta">
+          {article.authorName && <span>{article.authorName}</span>}
+          <ArticleDate iso={article.publishedAt} timeZone={timeZone} />
+          <span>{t.readingTime(article.readingMinutes)}</span>
+        </span>
       </span>
     </Link>
   );
@@ -45,7 +70,7 @@ export function ArticleGrid({ articles, timeZone }: { articles: Article[]; timeZ
     return <p className="muted">{messages(locale).nothingHere}</p>;
   }
   return (
-    <div className="grid articles">
+    <div className="article-grid">
       {articles.map((article) => (
         <ArticleCard key={article.id} article={article} timeZone={timeZone} />
       ))}

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

@@ -0,0 +1,149 @@
+'use client';
+
+import { Money, useCart, useMagicStore } from '@magicstoreai/hydrogen';
+import Link from 'next/link';
+import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from 'react';
+
+import { buttonClass } from '@/components/ui/button';
+import { Drawer } from '@/components/ui/drawer';
+import { EmptyState } from '@/components/ui/empty-state';
+import { describe } from '@/lib/errors';
+import { messages } from '@/lib/i18n';
+
+import { CartLines } from './cart-lines';
+
+/** `DRAWER`: adding opens the side panel; `PAGE`: the buyer stays and hears "added". */
+export type CartType = 'DRAWER' | 'PAGE';
+
+type CartDrawerContext = {
+  cartType: CartType;
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+  /** Call after a successful add: opens the drawer, or announces the add (`cartType: PAGE`). */
+  added: () => void;
+};
+
+const Context = createContext<CartDrawerContext | null>(null);
+
+/** The cart drawer's state, for the header icon and every add-to-cart button. */
+export function useCartDrawer(): CartDrawerContext {
+  const context = useContext(Context);
+  if (context === null) {
+    throw new Error(
+      'useCartDrawer() must be used inside <CartDrawerProvider> (app/providers.tsx).',
+    );
+  }
+  return context;
+}
+
+/**
+ * Holds the drawer's open state and renders the drawer once for the whole app, plus a polite live
+ * region that announces an add to screen readers whatever `cartType` is.
+ */
+export function CartDrawerProvider({
+  cartType,
+  children,
+}: {
+  cartType: CartType;
+  children: ReactNode;
+}) {
+  const t = messages(useMagicStore().locale);
+  const [isOpen, setOpen] = useState(false);
+  const [announcement, setAnnouncement] = useState('');
+  const open = useCallback(() => setOpen(true), []);
+  const close = useCallback(() => setOpen(false), []);
+  const added = useCallback(() => {
+    // A new string each time, so a second add is announced too.
+    setAnnouncement((previous) =>
+      previous === t.addedToCart ? `${t.addedToCart} ` : t.addedToCart,
+    );
+    if (cartType === 'DRAWER') {
+      setOpen(true);
+    }
+  }, [cartType, t.addedToCart]);
+  const value = useMemo(
+    () => ({ cartType, isOpen, open, close, added }),
+    [cartType, isOpen, open, close, added],
+  );
+
+  return (
+    <Context.Provider value={value}>
+      {children}
+      <CartDrawer open={isOpen} onClose={close} />
+      <p className="visually-hidden" aria-live="polite">
+        {announcement}
+      </p>
+    </Context.Provider>
+  );
+}
+
+/**
+ * The cart in a right-hand panel: its lines, the subtotal from the cart (never computed here), a
+ * note that delivery comes at checkout, and the ways on: checkout and the cart page.
+ */
+function CartDrawer({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const { cart, error } = useCart();
+  const t = messages(useMagicStore().locale);
+  const empty = cart === null || cart.lines.length === 0;
+
+  return (
+    <Drawer
+      open={open}
+      onClose={onClose}
+      title={t.cart}
+      closeLabel={t.close}
+      className="cart-drawer"
+      footer={
+        empty ? undefined : (
+          <div className="cart-drawer__summary">
+            <div className="cart-drawer__subtotal">
+              <span>{t.subtotal}</span>
+              <Money data={cart.cost.subtotal} />
+            </div>
+            <p className="cart-drawer__note">{t.deliveryAtCheckout}</p>
+            {error !== null && (
+              <p className="error" role="alert">
+                {describe(error, t.tryAgainLater)}
+              </p>
+            )}
+            <Link
+              href="/checkout"
+              className={buttonClass({ variant: 'primary', size: 'lg', full: true })}
+              onClick={onClose}
+            >
+              {t.checkout}
+            </Link>
+            <Link
+              href="/cart"
+              className={buttonClass({ variant: 'link', full: true })}
+              onClick={onClose}
+            >
+              {t.viewCart}
+            </Link>
+          </div>
+        )
+      }
+    >
+      {empty ? (
+        <EmptyState
+          title={t.cartEmpty}
+          icon="cart"
+          action={
+            <Link
+              href="/collections"
+              className={buttonClass({ variant: 'primary' })}
+              onClick={onClose}
+            >
+              {t.shopNow}
+            </Link>
+          }
+        >
+          {t.cartEmptyHint}
+        </EmptyState>
+      ) : (
+        <CartLines onNavigate={onClose} />
+      )}
+    </Drawer>
+  );
+}