create-magic-storefront 0.1.1 → 0.1.3

package/template/app/error.tsx

@@ -1,17 +1,19 @@
 'use client';
 
-import { MagicStoreError } from '@magicstoreai/hydrogen';
+import { MagicStoreError, useMagicStore } from '@magicstoreai/hydrogen';
+import { messages } from '@/lib/i18n';
 
 /** 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 t = messages(useMagicStore().locale);
   const unavailable = error instanceof MagicStoreError && error.code === 'STORE_UNAVAILABLE';
   return (
     <div className="stack">
-      <h1>{unavailable ? 'The shop is temporarily closed' : 'Something went wrong'}</h1>
+      <h1>{unavailable ? t.shopClosed : t.somethingWentWrong}</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>
+        <button onClick={reset}>{t.tryAgain}</button>
+        <a href="/">{t.backToShop}</a>
       </div>
     </div>
   );

package/template/app/globals.css

@@ -150,6 +150,35 @@ th {
   text-align: left;
   vertical-align: middle;
 }
+.cart-lines {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+/* Phone: image and title on one row, the controls under the title. Wider: all on one row. */
+.cart-line {
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr);
+  gap: 8px 12px;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--line);
+}
+.cart-line-controls {
+  grid-column: 2;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+@media (min-width: 720px) {
+  .cart-line {
+    grid-template-columns: 64px minmax(0, 1fr) auto;
+    align-items: center;
+  }
+  .cart-line-controls {
+    grid-column: auto;
+  }
+}
 .pager {
   display: flex;
   gap: 8px;

package/template/app/layout.tsx

@@ -5,6 +5,7 @@ import { Image } from '@magicstoreai/hydrogen';
 import { CartLink } from '@/components/cart-link';
 import { api, locale } from '@/lib/api';
 import { brandStyle } from '@/lib/brand';
+import { messages } from '@/lib/i18n';
 import { Providers } from './providers';
 import './globals.css';
 
@@ -27,6 +28,7 @@ export default async function RootLayout({ children }: { children: ReactNode })
     api.collectionsIndex({ query: { perPage: 6 } }),
     api.pagesIndex(),
   ]);
+  const t = messages(locale);
 
   return (
     // The merchant's colors, read per request: a change in the admin shows after SHOP_UPDATED.
@@ -47,8 +49,8 @@ export default async function RootLayout({ children }: { children: ReactNode })
                   {collection.title}
                 </Link>
               ))}
-              <Link href="/search">Search</Link>
-              <Link href="/account">Account</Link>
+              <Link href="/search">{t.search}</Link>
+              <Link href="/account">{t.account}</Link>
               <CartLink />
             </nav>
           </header>

package/template/app/not-found.tsx

@@ -1,10 +1,13 @@
 import Link from 'next/link';
+import { locale } from '@/lib/api';
+import { messages } from '@/lib/i18n';
 
 export default function NotFound() {
+  const t = messages(locale);
   return (
     <div className="stack">
-      <h1>Not found</h1>
-      <Link href="/">Back to the shop</Link>
+      <h1>{t.notFound}</h1>
+      <Link href="/">{t.backToShop}</Link>
     </div>
   );
 }

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

@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 import { pageMeta } from '@magicstoreai/hydrogen/seo';
-import { api, orNotFound } from '@/lib/api';
+import { api, locale, orNotFound } from '@/lib/api';
+import { messages } from '@/lib/i18n';
 
 type Props = { params: Promise<{ handle: string }> };
 
@@ -21,7 +22,7 @@ export default async function ContentPage({ params }: Props) {
       {page.body ? (
         <div dangerouslySetInnerHTML={{ __html: page.body }} />
       ) : (
-        <p className="muted">Nothing here yet.</p>
+        <p className="muted">{messages(locale).nothingHere}</p>
       )}
     </article>
   );

package/template/app/search/page.tsx

@@ -2,29 +2,34 @@ import type { Metadata } from 'next';
 import { SearchView } from '@/components/analytics-views';
 import { Pager } from '@/components/pager';
 import { ProductGrid } from '@/components/product-grid';
-import { api } from '@/lib/api';
+import { api, locale } from '@/lib/api';
+import { messages } from '@/lib/i18n';
 
 type Props = { searchParams: Promise<{ q?: string; page?: string }> };
 
 // Result pages are endless and change by the minute: keep them out of the index.
-export const metadata: Metadata = { title: 'Search', robots: { index: false, follow: true } };
+export const metadata: Metadata = {
+  title: messages(locale).search,
+  robots: { index: false, follow: true },
+};
 
 export default async function SearchPage({ searchParams }: Props) {
   const { q = '', page: pageParam } = await searchParams;
   const page = Math.max(1, Number(pageParam) || 1);
+  const t = messages(locale);
   const results = q.trim() ? await api.search({ query: { q, page, perPage: 24 } }) : null;
 
   return (
     <>
-      <h1>Search</h1>
+      <h1>{t.search}</h1>
       <form className="row" action="/search">
-        <input name="q" defaultValue={q} placeholder="What are you looking for?" />
-        <button className="primary">Search</button>
+        <input name="q" defaultValue={q} placeholder={t.searchPlaceholder} />
+        <button className="primary">{t.search}</button>
       </form>
       {results && (
         <>
           <SearchView query={q} resultsCount={results.meta.pagination.total} />
-          <p className="muted">{results.meta.pagination.total} found</p>
+          <p className="muted">{t.found(results.meta.pagination.total)}</p>
           <ProductGrid products={results.data} />
           <Pager
             meta={results.meta.pagination}

package/template/components/buy-box.tsx

@@ -5,17 +5,20 @@ import {
   Money,
   useAnalytics,
   useCart,
+  useMagicStore,
   useVariantSelection,
   useWishlist,
 } from '@magicstoreai/hydrogen';
 import type { Schema } from '@magicstoreai/storefront-client';
 import { useEffect, useState } from 'react';
+import { messages } from '@/lib/i18n';
 
 export function BuyBox({ product }: { product: Schema<'ProductDetail'> }) {
   const { selectedOptions, selectedVariant, setOption, isAvailable } = useVariantSelection(product);
   const { addLine, status } = useCart();
   const wishlist = useWishlist();
   const analytics = useAnalytics();
+  const t = messages(useMagicStore().locale);
   const [error, setError] = useState<string | null>(null);
   const [added, setAdded] = useState(false);
 
@@ -37,7 +40,7 @@ export function BuyBox({ product }: { product: Schema<'ProductDetail'> }) {
       await addLine({ productId: product.id, variantId, quantity: 1 });
       setAdded(true);
     } catch (e) {
-      setError(e instanceof MagicStoreError ? (e.detail ?? e.message) : 'Could not add.');
+      setError(e instanceof MagicStoreError ? (e.detail ?? e.message) : t.couldNotAdd);
     }
   }
 
@@ -73,13 +76,13 @@ export function BuyBox({ product }: { product: Schema<'ProductDetail'> }) {
         ))}
       <div className="row">
         <button className="primary" disabled={!forSale || status === 'updating'} onClick={add}>
-          {forSale ? 'Add to cart' : 'Sold out'}
+          {forSale ? t.addToCart : t.soldOut}
         </button>
         <button type="button" onClick={() => void wishlist.toggle(product.id)}>
-          {wishlist.has(product.id) ? '♥ Saved' : '♡ Save'}
+          {wishlist.has(product.id) ? `♥ ${t.saved}` : `♡ ${t.save}`}
         </button>
       </div>
-      {added && <p className="muted">Added to cart.</p>}
+      {added && <p className="muted">{t.addedToCart}</p>}
       {error && <p className="error">{error}</p>}
     </div>
   );

package/template/components/cart-link.tsx

@@ -1,9 +1,15 @@
 'use client';
 
-import { useCart } from '@magicstoreai/hydrogen';
+import { useCart, useMagicStore } from '@magicstoreai/hydrogen';
 import Link from 'next/link';
+import { messages } from '@/lib/i18n';
 
 export function CartLink() {
   const { totalQuantity } = useCart();
-  return <Link href="/cart">Cart ({totalQuantity})</Link>;
+  const t = messages(useMagicStore().locale);
+  return (
+    <Link href="/cart">
+      {t.cart} ({totalQuantity})
+    </Link>
+  );
 }

package/template/components/pager.tsx

@@ -1,5 +1,7 @@
 import { paginationState, type Pagination } from '@magicstoreai/hydrogen';
 import Link from 'next/link';
+import { locale } from '@/lib/api';
+import { messages } from '@/lib/i18n';
 
 /** Server-rendered page links (`paginationState` is plain arithmetic, no hooks). */
 export function Pager({ meta, href }: { meta: Pagination; href: (page: number) => string }) {
@@ -8,7 +10,7 @@ export function Pager({ meta, href }: { meta: Pagination; href: (page: number) =
   }
   const state = paginationState(meta);
   return (
-    <nav className="pager" aria-label="Pages">
+    <nav className="pager" aria-label={messages(locale).pages}>
       {state.pages.map((page, index) =>
         page === null ? (
           <span key={`gap-${index}`}>…</span>

package/template/components/product-grid.tsx

@@ -1,13 +1,16 @@
 import { Image, Money } from '@magicstoreai/hydrogen';
 import type { Schema } from '@magicstoreai/storefront-client';
 import Link from 'next/link';
+import { locale } from '@/lib/api';
+import { messages } from '@/lib/i18n';
 
 /** Badges come only from the product's data; at most two, so the card stays readable. */
 function ProductBadges({ product }: { product: Schema<'Product'> }) {
+  const t = messages(locale);
   const badges = [
-    product.preOrder && 'Pre-order',
-    product.compareAtPrice && 'Sale',
-    product.isNew && 'New',
+    product.preOrder && t.preOrder,
+    product.compareAtPrice && t.sale,
+    product.isNew && t.isNew,
   ]
     .filter((badge): badge is string => typeof badge === 'string')
     .slice(0, 2);
@@ -26,8 +29,9 @@ function ProductBadges({ product }: { product: Schema<'Product'> }) {
 }
 
 export function ProductGrid({ products }: { products: Schema<'Product'>[] }) {
+  const t = messages(locale);
   if (products.length === 0) {
-    return <p className="muted">Nothing here yet.</p>;
+    return <p className="muted">{t.nothingHere}</p>;
   }
   return (
     <div className="grid">
@@ -48,7 +52,7 @@ export function ProductGrid({ products }: { products: Schema<'Product'>[] }) {
               </s>
             )}
           </span>
-          {!product.availableForSale && <span className="muted">Sold out</span>}
+          {!product.availableForSale && <span className="muted">{t.soldOut}</span>}
         </Link>
       ))}
     </div>

package/template/components/sections/banner.tsx

@@ -1,5 +1,7 @@
 import { Image } from '@magicstoreai/hydrogen';
 import Link from 'next/link';
+import { locale } from '@/lib/api';
+import { messages } from '@/lib/i18n';
 
 import type { SectionOf } from './types';
 
@@ -25,7 +27,11 @@ export function Banner({ section }: { section: SectionOf<'BANNER'> }) {
     <section className="banner">
       {section.settings.slides.map((slide, index) => {
         const image = (
-          <Image data={slide.image} loading={index === 0 ? 'eager' : 'lazy'} alt="Banner" />
+          <Image
+            data={slide.image}
+            loading={index === 0 ? 'eager' : 'lazy'}
+            alt={messages(locale).banner}
+          />
         );
         const href = slideHref(slide.link);
         return href === null ? (

package/template/components/sections/deal-of-day.tsx

@@ -1,9 +1,12 @@
 import { Image, Money } from '@magicstoreai/hydrogen';
 import Link from 'next/link';
+import { api, locale } from '@/lib/api';
+import { messages } from '@/lib/i18n';
 
 import type { SectionOf } from './types';
 
-export function DealOfDay({ section }: { section: SectionOf<'DEAL_OF_DAY'> }) {
+export async function DealOfDay({ section }: { section: SectionOf<'DEAL_OF_DAY'> }) {
+  const t = messages(locale);
   const { product, image, price, compareAtPrice, endsAt, accentColor, badgeText, stock } =
     section.settings;
   return (
@@ -31,18 +34,26 @@ export function DealOfDay({ section }: { section: SectionOf<'DEAL_OF_DAY'> }) {
         {/* The merchant's "N of M left" bar — not the product's real stock. */}
         {stock && (
           <label className="stack">
-            <span className="muted">
-              {stock.remaining} of {stock.initial} left
-            </span>
+            <span className="muted">{t.stockLeft(stock.remaining, stock.initial)}</span>
             <progress value={stock.remaining} max={Math.max(stock.initial, stock.remaining, 1)} />
           </label>
         )}
         {endsAt && (
           <span className="muted">
-            Ends <time dateTime={endsAt}>{new Date(endsAt).toUTCString()}</time>
+            {t.endsAt} <time dateTime={endsAt}>{await endsAtText(endsAt)}</time>
           </span>
         )}
       </div>
     </section>
   );
 }
+
+/** The end of the deal in the shop's time zone, as the storefront's language writes dates. */
+async function endsAtText(endsAt: string): Promise<string> {
+  const { data: shop } = await api.shop();
+  return new Intl.DateTimeFormat(locale, {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+    timeZone: shop.timezone,
+  }).format(new Date(endsAt));
+}

package/template/components/sections/product-shelves.tsx

@@ -3,7 +3,8 @@ import Link from 'next/link';
 import type { ReactNode } from 'react';
 
 import { ProductGrid } from '@/components/product-grid';
-import { api } from '@/lib/api';
+import { api, locale } from '@/lib/api';
+import { messages } from '@/lib/i18n';
 
 import { SHELF_SIZE, type SectionOf } from './types';
 
@@ -27,7 +28,7 @@ function Shelf({
       <div className="row">
         <h2>{title}</h2>
         {children}
-        {href && <Link href={href}>See all</Link>}
+        {href && <Link href={href}>{messages(locale).seeAll}</Link>}
       </div>
       <ProductGrid products={products} />
     </section>
@@ -42,35 +43,35 @@ export async function NewArrivals({ section }: { section: ShelfSection }) {
   const { data } = await api.productsIndex({
     query: { sort: '-createdAt', perPage: section.settings.limit ?? SHELF_SIZE },
   });
-  return <Shelf title="New arrivals" products={data} />;
+  return <Shelf title={messages(locale).newArrivals} products={data} />;
 }
 
 export async function OnSale({ section }: { section: ShelfSection }) {
   const { data } = await api.productsIndex({
     query: { 'filter[onSale]': 'true', perPage: section.settings.limit ?? SHELF_SIZE },
   });
-  return <Shelf title="On sale" products={data} />;
+  return <Shelf title={messages(locale).onSale} products={data} />;
 }
 
 export async function Trending({ section }: { section: ShelfSection }) {
   const { data } = await api.productsIndex({
     query: { 'filter[trending]': 'true', perPage: section.settings.limit ?? SHELF_SIZE },
   });
-  return <Shelf title="Trending" products={data} />;
+  return <Shelf title={messages(locale).trending} products={data} />;
 }
 
 export async function Bestsellers({ section }: { section: ShelfSection }) {
   const { data } = await api.productsIndex({
     query: { sort: '-bestSellers', perPage: section.settings.limit ?? SHELF_SIZE },
   });
-  return <Shelf title="Bestsellers" products={data} />;
+  return <Shelf title={messages(locale).bestsellers} products={data} />;
 }
 
 export async function PreOrders({ section }: { section: ShelfSection }) {
   const { data } = await api.productsIndex({
     query: { 'filter[preOrder]': 'true', perPage: section.settings.limit ?? SHELF_SIZE },
   });
-  return <Shelf title="Pre-order" products={data} />;
+  return <Shelf title={messages(locale).preOrder} products={data} />;
 }
 
 /**

package/template/components/sections/store-reviews.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 
-import { api } from '@/lib/api';
+import { api, locale } from '@/lib/api';
+import { messages } from '@/lib/i18n';
 
 import type { SectionOf } from './types';
 
@@ -8,6 +9,7 @@ const SOURCE_LABELS = { GOOGLE: 'Google', YANDEX: 'Yandex', TWO_GIS: '2GIS', CUS
 
 /** Reviews of the shop itself (`GET /reviews/site`), dressed with what the merchant entered. */
 export async function StoreReviews({ section }: { section: SectionOf<'STORE_REVIEWS'> }) {
+  const t = messages(locale);
   const settings = section.settings;
   const { data: reviews, meta } = await api.reviewsSite({
     query: { perPage: settings.limit, sort: '-createdAt' },
@@ -17,17 +19,17 @@ export async function StoreReviews({ section }: { section: SectionOf<'STORE_REVI
   return (
     <section className="stack">
       {settings.overline && <span className="muted">{settings.overline}</span>}
-      <h2>{settings.title ?? 'What our customers say'}</h2>
+      <h2>{settings.title ?? t.customersSay}</h2>
       {settings.subtitle && <p className="muted">{settings.subtitle}</p>}
 
       <div className="row">
         {rating.average !== null && (
           <strong>
-            {rating.average} / 5 · {rating.count} reviews
+            {rating.average} / 5 · {t.reviewsCount(rating.count)}
           </strong>
         )}
         {settings.recommendPercent !== null && (
-          <span>{settings.recommendPercent}% recommend us</span>
+          <span>{t.recommendUs(settings.recommendPercent)}</span>
         )}
         {settings.externalRatings.map((external, index) => (
           <span key={index} className="muted">
@@ -59,7 +61,7 @@ export async function StoreReviews({ section }: { section: SectionOf<'STORE_REVI
       {settings.showLeaveReview && (
         // Leaving a site review needs a signed-in customer (POST /reviews/site).
         <Link href="/account" className="button">
-          Leave a review
+          {t.leaveReview}
         </Link>
       )}
     </section>

package/template/lib/errors.ts

@@ -1,9 +1,6 @@
 import { MagicStoreError } from '@magicstoreai/hydrogen';
 
 /** What to tell the buyer: the API's localized detail when there is one. */
-export function describe(
-  error: unknown,
-  fallback = 'Something went wrong. Please try again.',
-): string {
+export function describe(error: unknown, fallback: string): string {
   return error instanceof MagicStoreError ? (error.detail ?? error.message) : fallback;
 }