create-magic-storefront 0.5.0 → 0.6.0

package/template/app/account/page.tsx

@@ -1,253 +1,21 @@
 'use client';
 
-import {
-  Money,
-  useCustomer,
-  useMagicStore,
-  useStorefrontClient,
-  useTelegramSignIn,
-  useTelegramWebApp,
-  useWishlist,
-} from '@magicstoreai/hydrogen';
-import type { Schema } from '@magicstoreai/storefront-client';
-import { useEffect, useState } from 'react';
-import { describe, describePhoneShare } from '@/lib/errors';
+import { useMagicStore } from '@magicstoreai/hydrogen';
+import { AccountShell } from '@/components/account/account-shell';
+import { OrderList } from '@/components/account/order-list';
 import { messages } from '@/lib/i18n';
 
+/** The account's front page: the customer's orders. Signed out, the sign-in card. */
 export default function AccountPage() {
-  const { customer, isSignedIn, signOut } = useCustomer();
-  const { status, isTelegram, canRequestContact } = 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 isSignedIn && customer ? (
-    <div className="stack">
-      <h1>{customer.name || customer.phone}</h1>
-      {/* A customer who only ever signed in through Telegram has no phone yet; older Telegram
-          clients cannot share it. */}
-      {canRequestContact && !customer.phone && <SharePhone />}
-      <Orders />
-      <SavedCount />
-      <div>
-        <button onClick={() => void signOut()}>{t.signOut}</button>
-      </div>
-    </div>
-  ) : (
-    <div className="stack" style={{ maxWidth: 360 }}>
-      <h1>{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="muted">{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="primary"
-          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 [error, setError] = useState<string | null>(null);
-
-  async function attempt(step: () => Promise<unknown>) {
-    setError(null);
-    try {
-      await step();
-    } catch (e) {
-      setError(describe(e, t.tryAgainLater));
-    }
-  }
-
-  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);
-          }
-        });
-      }}
-    >
-      <input
-        value={phone}
-        onChange={(e) => setPhone(e.target.value)}
-        placeholder="+998 90 123 45 67"
-        aria-label={t.phone}
-        type="tel"
-        autoComplete="tel"
-        required
-        disabled={sent}
-      />
-      {sent && (
-        <input
-          value={code}
-          onChange={(e) => setCode(e.target.value)}
-          placeholder={t.smsCode}
-          aria-label={t.smsCode}
-          inputMode="numeric"
-          autoComplete="one-time-code"
-          required
-        />
-      )}
-      <button className="primary">{sent || withoutCode ? t.signIn : t.sendCode}</button>
-      {error && (
-        <p className="error" role="alert">
-          {error}
-        </p>
-      )}
-    </form>
-  );
-}
-
-/**
- * Signed in inside a Mini App without a phone: share the Telegram contact, which proves the phone.
- * A declined request changes nothing.
- */
-function SharePhone() {
-  const { shareTelegramPhone } = useCustomer();
-  const t = messages(useMagicStore().locale);
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  async function share() {
-    setBusy(true);
-    setError(null);
-    try {
-      await shareTelegramPhone();
-    } catch (e) {
-      setError(describePhoneShare(e, t));
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  return (
-    <section className="stack">
-      <p className="muted">{t.sharePhoneHint}</p>
-      <div>
-        <button className="primary" disabled={busy} onClick={() => void share()}>
-          {t.sharePhone}
-        </button>
-      </div>
-      {error && (
-        <p className="error" role="alert">
-          {error}
-        </p>
-      )}
-    </section>
-  );
-}
-
-function Orders() {
-  const client = useStorefrontClient();
-  const [orders, setOrders] = useState<Schema<'Order'>[] | null>(null);
-  const t = messages(useMagicStore().locale);
-
-  useEffect(() => {
-    void client.customerOrdersIndex({ query: { perPage: 20 } }).then(
-      ({ data }) => setOrders(data),
-      () => setOrders([]),
-    );
-  }, [client]);
-
-  if (orders === null) {
-    return <p className="muted">{t.loadingOrders}</p>;
-  }
-  return (
-    <section className="stack">
-      <h2>{t.orders}</h2>
-      {orders.length === 0 && <p className="muted">{t.noOrders}</p>}
-      <table>
-        <tbody>
-          {orders.map((order) => (
-            <tr key={order.id}>
-              <td>#{order.number}</td>
-              <td>{t.orderStatus[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();
   const t = messages(useMagicStore().locale);
   return (
-    <p className="muted">
-      {t.savedProducts}: {productIds.length}
-    </p>
+    <AccountShell>
+      <section aria-labelledby="account-orders">
+        <h2 id="account-orders" className="account__section-title">
+          {t.orders}
+        </h2>
+        <OrderList />
+      </section>
+    </AccountShell>
   );
 }

package/template/app/account/profile/page.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { useMagicStore } from '@magicstoreai/hydrogen';
+import { AccountShell } from '@/components/account/account-shell';
+import { Profile } from '@/components/account/profile';
+import { messages } from '@/lib/i18n';
+
+export default function ProfilePage() {
+  const t = messages(useMagicStore().locale);
+  return (
+    <AccountShell>
+      <h2 className="account__section-title">{t.profile}</h2>
+      <Profile />
+    </AccountShell>
+  );
+}

package/template/app/blog/(index)/loading.tsx

@@ -0,0 +1,22 @@
+import { PageLoading } from '@/components/page-loading';
+import { Skeleton, TitleSkeleton } from '@/components/ui/skeleton';
+
+export default function BlogLoading() {
+  return (
+    <PageLoading>
+      <div className="blog">
+        <TitleSkeleton width="25%" />
+        <Skeleton height="2.75rem" width="60%" />
+        <div className="article-grid">
+          {[0, 1, 2].map((index) => (
+            <div key={index} className="stack">
+              <Skeleton ratio="16 / 9" />
+              <Skeleton height="1.25rem" width="80%" />
+              <Skeleton height="1rem" width="50%" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </PageLoading>
+  );
+}

package/template/app/blog/{page.tsx → (index)/page.tsx}

@@ -1,8 +1,9 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
 import { breadcrumbJsonLd, jsonLdScript, pageMeta } from '@magicstoreai/hydrogen/seo';
-import { ArticleGrid } from '@/components/article-card';
+import { ArticleCard, ArticleGrid } from '@/components/article-card';
 import { ArticleListing, CategoryNav, pageParam, sortParam } from '@/components/blog-listing';
+import { Icon } from '@/components/ui/icon';
 import { api, locale } from '@/lib/api';
 import { messages } from '@/lib/i18n';
 
@@ -45,7 +46,7 @@ export default async function BlogPage({ searchParams }: Props) {
   };
 
   return (
-    <div className="stack">
+    <div className="blog">
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{
@@ -57,31 +58,47 @@ export default async function BlogPage({ searchParams }: Props) {
           ),
         }}
       />
-      <h1>{shop.blog?.title || t.blog}</h1>
-      {shop.blog?.description && <p className="muted">{shop.blog.description}</p>}
+      <header className="blog-header">
+        <h1>{shop.blog?.title || t.blog}</h1>
+        {shop.blog?.description && <p className="muted">{shop.blog.description}</p>}
+      </header>
       <CategoryNav />
-      <form className="row" action="/blog">
-        <input name="q" defaultValue={q} placeholder={t.searchArticles} maxLength={200} />
-        <button className="primary">{t.search}</button>
-      </form>
-      <nav className="row chips" aria-label={t.sortNewest}>
-        <Link
-          href={q ? `/blog?q=${encodeURIComponent(q)}` : '/blog'}
-          aria-current={!sort ? 'page' : undefined}
-        >
-          {t.sortNewest}
-        </Link>
-        <Link
-          href={`/blog?${new URLSearchParams({ ...(q && { q }), sort: '-recentViews' })}`}
-          aria-current={sort === '-recentViews' ? 'page' : undefined}
-        >
-          {t.sortPopular}
-        </Link>
-      </nav>
+      <div className="blog-toolbar">
+        <form role="search" action="/blog" className="search-form blog-toolbar__search">
+          <Icon name="search" className="search-form__icon" />
+          <input
+            type="search"
+            name="q"
+            defaultValue={q}
+            placeholder={t.searchArticles}
+            aria-label={t.searchArticles}
+            maxLength={200}
+          />
+          <button type="submit" className="button">
+            {t.search}
+          </button>
+        </form>
+        <nav className="chips" aria-label={t.sortBy}>
+          <Link
+            href={q ? `/blog?q=${encodeURIComponent(q)}` : '/blog'}
+            aria-current={!sort ? 'page' : undefined}
+          >
+            {t.sortNewest}
+          </Link>
+          <Link
+            href={`/blog?${new URLSearchParams({ ...(q && { q }), sort: '-recentViews' })}`}
+            aria-current={sort === '-recentViews' ? 'page' : undefined}
+          >
+            {t.sortPopular}
+          </Link>
+        </nav>
+      </div>
       {featured.length > 0 && (
-        <section className="stack">
-          <h2>{t.featured}</h2>
-          <ArticleGrid articles={featured} timeZone={shop.timezone} />
+        <section className="blog-featured" aria-label={t.featured}>
+          <ArticleCard article={featured[0]!} timeZone={shop.timezone} feature />
+          {featured.length > 1 && (
+            <ArticleGrid articles={featured.slice(1)} timeZone={shop.timezone} />
+          )}
         </section>
       )}
       {/* The picks are not repeated below; a blog of only picks shows no second list. */}

package/template/app/blog/[handle]/page.tsx

@@ -12,12 +12,18 @@ import { ArticleView } from '@/components/analytics-views';
 import { ArticleBody } from '@/components/article-body';
 import { ArticleDate, ArticleGrid } from '@/components/article-card';
 import { ArticleVote } from '@/components/article-vote';
+import { ShareButton } from '@/components/share-button';
+import { Breadcrumbs } from '@/components/ui/breadcrumbs';
 import { api, locale, orNotFound } from '@/lib/api';
+import { outlineArticle } from '@/lib/article-outline';
 import { messages } from '@/lib/i18n';
 import { siteOrigin } from '@/lib/site';
 
 type Props = { params: Promise<{ handle: string }> };
 
+/** A table of contents from this many headings up; a short article reads without one. */
+const TOC_MIN_HEADINGS = 3;
+
 /**
  * An article is served only in the languages it is written in: in any other one the API answers
  * 404, and so does this page.
@@ -51,9 +57,20 @@ export default async function ArticlePage({ params }: Props) {
   );
   const url = `${siteOrigin(shop)}/blog/${found.handle}`;
   const blogTitle = shop.blog?.title || t.blog;
+  const crumbs = [
+    { name: t.home, href: '/' },
+    { name: blogTitle, href: '/blog' },
+    ...(found.category
+      ? [{ name: found.category.title, href: `/blog/category/${found.category.handle}` }]
+      : []),
+    { name: found.title, href: `/blog/${found.handle}` },
+  ];
+  // Anchors for the table of contents, shown only for a body long enough to need one.
+  const body = outlineArticle(found.bodyHtml);
+  const toc = body.headings.length >= TOC_MIN_HEADINGS ? body.headings : [];
 
   return (
-    <article className="stack article">
+    <article className="article">
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{
@@ -64,70 +81,89 @@ export default async function ArticlePage({ params }: Props) {
         type="application/ld+json"
         dangerouslySetInnerHTML={{
           __html: jsonLdScript(
-            breadcrumbJsonLd([
-              { name: t.home, url: '/' },
-              { name: blogTitle, url: '/blog' },
-              ...(found.category
-                ? [{ name: found.category.title, url: `/blog/category/${found.category.handle}` }]
-                : []),
-              { name: found.title, url: `/blog/${found.handle}` },
-            ]),
+            breadcrumbJsonLd(crumbs.map((crumb) => ({ name: crumb.name, url: crumb.href }))),
           ),
         }}
       />
       <ArticleView articleId={found.id} />
-      <nav className="row muted" aria-label={blogTitle}>
-        <Link href="/blog">{blogTitle}</Link>
+      <Breadcrumbs items={crumbs} label={t.breadcrumbs} />
+      <header className="article__header">
         {found.category && (
-          <>
-            <span aria-hidden="true">/</span>
-            <Link href={`/blog/category/${found.category.handle}`}>{found.category.title}</Link>
-          </>
-        )}
-      </nav>
-      <h1>{found.h1 ?? found.title}</h1>
-      <p className="row muted">
-        {found.author ? (
-          <Link href={`/blog/author/${found.author.handle}`}>{found.authorName}</Link>
-        ) : (
-          found.authorName && <span>{found.authorName}</span>
+          <Link href={`/blog/category/${found.category.handle}`} className="article__category">
+            {found.category.title}
+          </Link>
         )}
-        <ArticleDate iso={found.publishedAt} timeZone={shop.timezone} />
-        <span>{t.readingTime(found.readingMinutes)}</span>
-      </p>
+        <h1 className="article__title">{found.h1 ?? found.title}</h1>
+        <p className="article__meta">
+          {found.author ? (
+            <Link href={`/blog/author/${found.author.handle}`}>{found.authorName}</Link>
+          ) : (
+            found.authorName && <span>{found.authorName}</span>
+          )}
+          <ArticleDate iso={found.publishedAt} timeZone={shop.timezone} />
+          <span>{t.readingTime(found.readingMinutes)}</span>
+        </p>
+      </header>
       {/* The cover is the page's largest image: loaded at once, not lazily. */}
-      <Image data={found.image} alt={found.title} loading="eager" className="article-cover" />
-      <div className="prose">
-        <ArticleBody
-          bodyHtml={found.bodyHtml}
-          products={new Map(products.map((product) => [product.handle, product]))}
-        />
-      </div>
-      {found.tags.length > 0 && (
-        <nav className="row chips" aria-label={t.tag}>
-          {found.tags.map((tag) => (
-            <Link key={tag.handle} href={`/blog/tag/${tag.handle}`}>
-              #{tag.title}
-            </Link>
-          ))}
-        </nav>
-      )}
-      {found.author && (
-        <aside className="row author">
-          <Image data={found.author.avatar} alt={found.author.name} width={64} height={64} />
-          <div className="stack">
-            <Link href={`/blog/author/${found.author.handle}`}>
-              <strong>{found.author.name}</strong>
-            </Link>
-            {found.author.role && <span className="muted">{found.author.role}</span>}
-            {found.authorBio && <p>{found.authorBio}</p>}
+      <Image
+        data={found.image}
+        alt={found.title}
+        loading="eager"
+        fetchPriority="high"
+        className="article__cover"
+      />
+      <div className={toc.length > 0 ? 'article__layout article__layout--toc' : 'article__layout'}>
+        {toc.length > 0 && (
+          <nav className="article__toc" aria-label={t.tableOfContents}>
+            <p className="article__toc-title">{t.tableOfContents}</p>
+            <ol>
+              {toc.map((heading) => (
+                <li key={heading.id} className={`article__toc-item--h${heading.level}`}>
+                  <a href={`#${heading.id}`}>{heading.text}</a>
+                </li>
+              ))}
+            </ol>
+          </nav>
+        )}
+        <div className="article__main">
+          <div className="prose">
+            <ArticleBody
+              bodyHtml={body.html}
+              products={new Map(products.map((product) => [product.handle, product]))}
+            />
           </div>
-        </aside>
-      )}
-      <ArticleVote handle={found.handle} helpfulCount={found.helpfulCount} />
+          {found.tags.length > 0 && (
+            <nav className="chips article__tags" aria-label={t.tag}>
+              {found.tags.map((tag) => (
+                <Link key={tag.handle} href={`/blog/tag/${tag.handle}`}>
+                  #{tag.title}
+                </Link>
+              ))}
+            </nav>
+          )}
+          <div className="article__actions">
+            <ArticleVote handle={found.handle} helpfulCount={found.helpfulCount} />
+            <ShareButton title={found.title} />
+          </div>
+          {found.author && (
+            <aside className="author-card">
+              <Image data={found.author.avatar} alt={found.author.name} width={64} height={64} />
+              <div className="stack">
+                <Link href={`/blog/author/${found.author.handle}`}>
+                  <strong>{found.author.name}</strong>
+                </Link>
+                {found.author.role && <span className="muted">{found.author.role}</span>}
+                {found.authorBio && <p>{found.authorBio}</p>}
+              </div>
+            </aside>
+          )}
+        </div>
+      </div>
       {related.data.length > 0 && (
-        <section className="stack">
-          <h2>{t.relatedArticles}</h2>
+        <section className="article__related">
+          <div className="section-header">
+            <h2>{t.relatedArticles}</h2>
+          </div>
           <ArticleGrid articles={related.data} timeZone={shop.timezone} />
         </section>
       )}

package/template/app/blog/author/[handle]/page.tsx

@@ -27,7 +27,7 @@ export default async function BlogAuthorPage({ params, searchParams }: Props) {
 
   return (
     <div className="stack">
-      <header className="row author">
+      <header className="author-card">
         <Image data={found.avatar} alt={found.name} width={64} height={64} />
         <div>
           <h1>{found.name}</h1>

package/template/app/cart/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 cart page is a client component; its title and robots come from here. Personal: not indexed.
+export const metadata: Metadata = {
+  title: messages(locale).cart,
+  robots: { index: false, follow: false },
+};
+
+export default function CartLayout({ children }: { children: ReactNode }) {
+  return children;
+}