create-magic-storefront 0.5.0 → 0.6.0

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

@@ -1,14 +1,31 @@
 import type { Metadata } from 'next';
+import Link from 'next/link';
+import { Image } from '@magicstoreai/hydrogen';
 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 { CatalogLayout } from '@/components/catalog/catalog-layout';
+import { Accordion } from '@/components/ui/accordion';
+import { Breadcrumbs } from '@/components/ui/breadcrumbs';
+import { buttonClass } from '@/components/ui/button';
+import { EmptyState } from '@/components/ui/empty-state';
 import { api, locale, orNotFound } from '@/lib/api';
+import {
+  apiQuery,
+  catalogQuery,
+  cleared,
+  hasFilters,
+  parseCatalog,
+  type SearchParams,
+} from '@/lib/catalog-params';
 import { messages } from '@/lib/i18n';
 
-type Props = { params: Promise<{ handle: string }>; searchParams: Promise<{ page?: string }> };
+type Props = { params: Promise<{ handle: string }>; searchParams: Promise<SearchParams> };
+type ProductsQuery = NonNullable<Parameters<typeof api.collectionsProducts>[0]['query']>;
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+/** 24 a page, the API's default: four full rows at desktop width. */
+const PER_PAGE = 24;
+
+export async function generateMetadata({ params, searchParams }: Props): Promise<Metadata> {
   const { handle } = await params;
   const { data: collection } = await orNotFound(api.collectionsShow({ path: { handle } }));
   const meta = pageMeta({
@@ -16,16 +33,51 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
     title: collection.title,
     description: collection.description,
   });
-  return { title: meta.title, description: meta.description };
+  const filtered = Object.keys(await searchParams).some((key) => key !== 'page');
+  return {
+    title: meta.title,
+    description: meta.description,
+    // Filtered and sorted views repeat the collection: keep them out of the index.
+    ...(filtered && { robots: { index: false, follow: true } }),
+  };
 }
 
+/**
+ * A collection: its banner (image, title, description, count), its child collections, then the
+ * catalog (facets from `collectionsFilters`, sort, active filters, grid, pager), and its FAQ. The
+ * URL holds the filters, so every view is a link; what the API does not offer is dropped first
+ * (`lib/catalog-params.ts`).
+ */
 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([
+  const t = messages(locale);
+  const [{ data: collection }, { data: filters }, { data: shop }] = await Promise.all([
     orNotFound(api.collectionsShow({ path: { handle } })),
-    orNotFound(api.collectionsProducts({ path: { handle }, query: { page, perPage: 24 } })),
+    orNotFound(api.collectionsFilters({ path: { handle } })),
+    api.shop(),
+  ]);
+  const catalog = parseCatalog(await searchParams, filters);
+  const [products, children] = await Promise.all([
+    orNotFound(
+      api.collectionsProducts({
+        path: { handle },
+        query: { perPage: PER_PAGE, ...apiQuery(catalog) } as ProductsQuery,
+      }),
+    ),
+    collection.hasChildren
+      ? api.collectionsIndex({
+          // The contract types this filter as an integer while every id is a string: a backend
+          // follow-up (magicbot). Until then the string id goes as its number.
+          query: { 'filter[parentId]': Number(collection.id), perPage: 50 },
+        })
+      : null,
   ]);
+  const path = `/collections/${collection.handle}`;
+  const crumbs = [
+    { name: t.home, href: '/' },
+    { name: t.catalog, href: '/collections' },
+    { name: collection.title, href: path },
+  ];
 
   return (
     <>
@@ -33,17 +85,81 @@ export default async function CollectionPage({ params, searchParams }: Props) {
         type="application/ld+json"
         dangerouslySetInnerHTML={{
           __html: jsonLdScript(
-            breadcrumbJsonLd([
-              { name: messages(locale).home, url: '/' },
-              { name: collection.title, url: `/collections/${collection.handle}` },
-            ]),
+            breadcrumbJsonLd(crumbs.map((crumb) => ({ name: crumb.name, url: crumb.href }))),
           ),
         }}
       />
       <CollectionView collectionId={collection.id} />
-      <h1>{collection.title}</h1>
-      <ProductGrid products={products.data} />
-      <Pager meta={products.meta.pagination} href={(p) => `/collections/${handle}?page=${p}`} />
+      <Breadcrumbs items={crumbs} label={t.breadcrumbs} />
+      <header
+        className={collection.image ? 'collection-hero collection-hero--image' : 'collection-hero'}
+      >
+        {collection.image && (
+          <div className="collection-hero__media">
+            <Image data={collection.image} alt="" loading="eager" />
+          </div>
+        )}
+        <div className="collection-hero__text">
+          <h1>{collection.title}</h1>
+          {collection.description && (
+            <p className="collection-hero__description">{collection.description}</p>
+          )}
+        </div>
+      </header>
+      {children && children.data.length > 0 && (
+        <nav className="chips collection-children" aria-label={collection.title}>
+          {children.data.map((child) => (
+            <Link key={child.id} href={`/collections/${child.handle}`}>
+              {child.title}
+            </Link>
+          ))}
+        </nav>
+      )}
+      <CatalogLayout
+        filters={filters}
+        catalog={catalog}
+        products={products}
+        path={path}
+        money={{ locale, format: shop.moneyFormat }}
+        locale={locale}
+        t={t}
+        empty={
+          hasFilters(catalog) ? (
+            <EmptyState
+              title={t.noMatches}
+              icon="filter"
+              action={
+                <Link href={`${path}${catalogQuery(cleared(catalog))}`} className={buttonClass()}>
+                  {t.clearAll}
+                </Link>
+              }
+            >
+              {t.noMatchesHint}
+            </EmptyState>
+          ) : (
+            <EmptyState
+              title={t.collectionEmpty}
+              action={
+                <Link href="/collections" className={buttonClass({ variant: 'primary' })}>
+                  {t.shopNow}
+                </Link>
+              }
+            >
+              {t.collectionEmptyHint}
+            </EmptyState>
+          )
+        }
+      />
+      {collection.faq.length > 0 && (
+        <section className="collection-faq">
+          <h2>{t.faq}</h2>
+          {collection.faq.map((entry, index) => (
+            <Accordion key={index} title={entry.question}>
+              <p>{entry.answer}</p>
+            </Accordion>
+          ))}
+        </section>
+      )}
     </>
   );
 }

package/template/app/collections/page.tsx

@@ -0,0 +1,49 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import { pageMeta } from '@magicstoreai/hydrogen/seo';
+import { CollectionTiles } from '@/components/sections/collections';
+import { Breadcrumbs } from '@/components/ui/breadcrumbs';
+import { buttonClass } from '@/components/ui/button';
+import { EmptyState } from '@/components/ui/empty-state';
+import { api, locale } from '@/lib/api';
+import { messages } from '@/lib/i18n';
+
+/** The API's ceiling for one page: a shop's top level fits in it. */
+const PER_PAGE = 100;
+
+export function generateMetadata(): Metadata {
+  const meta = pageMeta({ title: messages(locale).catalog });
+  return { title: meta.title, description: meta.description };
+}
+
+/** The catalog: every top-level collection as a tile (image, title, number of products). */
+export default async function CollectionsPage() {
+  const t = messages(locale);
+  const { data: collections } = await api.collectionsIndex({
+    query: { 'filter[root]': 'true', perPage: PER_PAGE },
+  });
+
+  return (
+    <>
+      <Breadcrumbs
+        items={[{ name: t.home, href: '/' }, { name: t.catalog }]}
+        label={t.breadcrumbs}
+      />
+      <h1 className="page-title">{t.catalog}</h1>
+      {collections.length > 0 ? (
+        <CollectionTiles collections={collections} count={t.productsCount} />
+      ) : (
+        <EmptyState
+          title={t.collectionEmpty}
+          action={
+            <Link href="/search" className={buttonClass({ variant: 'primary' })}>
+              {t.search}
+            </Link>
+          }
+        >
+          {t.collectionEmptyHint}
+        </EmptyState>
+      )}
+    </>
+  );
+}

package/template/app/contacts/page.tsx

@@ -0,0 +1,196 @@
+import type { Metadata } from 'next';
+import type { Schema } from '@magicstoreai/storefront-client';
+import { pageMeta } from '@magicstoreai/hydrogen/seo';
+import { Breadcrumbs } from '@/components/ui/breadcrumbs';
+import { EmptyState } from '@/components/ui/empty-state';
+import { Icon } from '@/components/ui/icon';
+import { api, locale } from '@/lib/api';
+import { hasContacts, mapHref, SOCIAL_NAMES, telHref } from '@/lib/contacts';
+import { messages, type Messages } from '@/lib/i18n';
+
+type Contacts = Schema<'Contacts'>;
+type Location = Schema<'Location'>;
+
+export async function generateMetadata(): Promise<Metadata> {
+  const { data: shop } = await api.shop();
+  const meta = pageMeta({ title: messages(locale).contacts, shop });
+  return { title: meta.title, description: meta.description };
+}
+
+/**
+ * How to reach the shop (`GET /contacts`): phones, email, socials, the head office with its hours,
+ * the branches, and the company details. Each block only when the shop filled it; a map is a plain
+ * link to the point, no embedded script. No contact form: the API has none.
+ */
+export default async function ContactsPage() {
+  const t = messages(locale);
+  const { data: contacts } = await api.contacts();
+
+  return (
+    <div className="contacts-page">
+      <Breadcrumbs
+        items={[{ name: t.home, href: '/' }, { name: t.contacts }]}
+        label={t.breadcrumbs}
+      />
+      <h1 className="page-title">{t.contacts}</h1>
+      {hasContacts(contacts) ? (
+        <div className="contacts-page__grid">
+          <Reach contacts={contacts} t={t} />
+          {contacts.headOffice && <HeadOffice contacts={contacts} t={t} />}
+          {contacts.branches.length > 0 && (
+            <section className="contacts-card contacts-card--wide">
+              <h2 className="contacts-card__title">{t.branches}</h2>
+              <ul className="contacts-branches">
+                {contacts.branches.map((branch) => (
+                  <Branch key={branch.id} branch={branch} t={t} />
+                ))}
+              </ul>
+            </section>
+          )}
+          {contacts.requisites.length > 0 && (
+            <section className="contacts-card contacts-card--wide">
+              <h2 className="contacts-card__title">{t.requisites}</h2>
+              <dl className="contacts-requisites">
+                {contacts.requisites.map((row) => (
+                  <div key={row.label}>
+                    <dt>{row.label}</dt>
+                    <dd>{row.value}</dd>
+                  </div>
+                ))}
+              </dl>
+            </section>
+          )}
+          {contacts.disclaimer && (
+            <p className="contacts-page__disclaimer muted">{contacts.disclaimer}</p>
+          )}
+        </div>
+      ) : (
+        <EmptyState title={t.contactsEmpty} icon="phone" />
+      )}
+    </div>
+  );
+}
+
+/** Phones, email and socials: the ways to reach the shop right away. */
+function Reach({ contacts, t }: { contacts: Contacts; t: Messages }) {
+  if (contacts.phones.length === 0 && !contacts.email && contacts.socials.length === 0) {
+    return null;
+  }
+  return (
+    <section className="contacts-card">
+      <h2 className="contacts-card__title">{t.contacts}</h2>
+      {(contacts.phones.length > 0 || contacts.email) && (
+        <ul className="contacts-list">
+          {contacts.phones.map((phone) => (
+            <li key={phone.number}>
+              <Icon name="phone" size={18} />
+              <span>
+                <a href={telHref(phone.number)}>{phone.number}</a>
+                {(phone.label || phone.note) && (
+                  <span className="muted text-sm">
+                    {' '}
+                    {[phone.label, phone.note].filter(Boolean).join(' · ')}
+                  </span>
+                )}
+              </span>
+            </li>
+          ))}
+          {contacts.email && (
+            <li>
+              <Icon name="mail" size={18} />
+              <a href={`mailto:${contacts.email}`}>{contacts.email}</a>
+            </li>
+          )}
+        </ul>
+      )}
+      {contacts.socials.length > 0 && (
+        <ul className="chips" aria-label={t.socialMedia}>
+          {contacts.socials.map((social) => (
+            <li key={social.url}>
+              <a href={social.url} target="_blank" rel="noopener">
+                {SOCIAL_NAMES[social.network]}
+                {social.handle && <span className="muted">{social.handle}</span>}
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}
+
+/** The head office: address, landmark, map link, and the week's hours (or their summary). */
+function HeadOffice({ contacts, t }: { contacts: Contacts; t: Messages }) {
+  const office = contacts.headOffice!;
+  const address = [office.address, office.city].filter(Boolean).join(', ');
+  const days = new Intl.DateTimeFormat(locale, { weekday: 'long' });
+  // 2024-01-01 was a Monday: ISO day `n` is January `n`.
+  const dayName = (day: number) => days.format(new Date(Date.UTC(2024, 0, day, 12)));
+  return (
+    <section className="contacts-card">
+      <h2 className="contacts-card__title">{office.name || t.headOffice}</h2>
+      <ul className="contacts-list">
+        {address && (
+          <li>
+            <Icon name="map-pin" size={18} />
+            <span>
+              {address}
+              {office.landmark && (
+                <span className="muted text-sm">
+                  {' '}
+                  · {t.landmark}: {office.landmark}
+                </span>
+              )}
+              {office.coordinates && (
+                <>
+                  <br />
+                  <a href={mapHref(office.coordinates)} target="_blank" rel="noopener">
+                    {t.showOnMap}
+                  </a>
+                </>
+              )}
+            </span>
+          </li>
+        )}
+        {office.hoursSummary && contacts.openingHours.length === 0 && (
+          <li>
+            <Icon name="clock" size={18} />
+            <span>{office.hoursSummary}</span>
+          </li>
+        )}
+      </ul>
+      {contacts.openingHours.length > 0 && (
+        <dl className="contacts-hours" aria-label={t.openingHours}>
+          {contacts.openingHours.map((day) => (
+            <div key={day.day}>
+              <dt>{dayName(day.day)}</dt>
+              <dd>{day.opens && day.closes ? `${day.opens}–${day.closes}` : t.closed}</dd>
+            </div>
+          ))}
+        </dl>
+      )}
+    </section>
+  );
+}
+
+function Branch({ branch, t }: { branch: Location; t: Messages }) {
+  const address = [branch.address, branch.apartment, branch.city].filter(Boolean).join(', ');
+  return (
+    <li className="contacts-branch">
+      {branch.name && <h3 className="contacts-branch__name">{branch.name}</h3>}
+      {address && <p>{address}</p>}
+      {branch.landmark && (
+        <p className="muted text-sm">
+          {t.landmark}: {branch.landmark}
+        </p>
+      )}
+      {branch.hours && <p className="muted text-sm">{branch.hours}</p>}
+      {branch.phone && <a href={telHref(branch.phone)}>{branch.phone}</a>}
+      {branch.coordinates && (
+        <a href={mapHref(branch.coordinates)} target="_blank" rel="noopener">
+          {t.showOnMap}
+        </a>
+      )}
+    </li>
+  );
+}

package/template/app/error.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { MagicStoreError, useMagicStore } from '@magicstoreai/hydrogen';
+import { Button, buttonClass } from '@/components/ui/button';
+import { EmptyState } from '@/components/ui/empty-state';
 import { messages } from '@/lib/i18n';
 
 /** Any failure a page did not handle itself: the API's detail when there is one, and a retry. */
@@ -8,13 +10,22 @@ export default function ErrorPage({ error, reset }: { error: Error; reset: () =>
   const t = messages(useMagicStore().locale);
   const unavailable = error instanceof MagicStoreError && error.code === 'STORE_UNAVAILABLE';
   return (
-    <div className="stack">
-      <h1>{unavailable ? t.shopClosed : t.somethingWentWrong}</h1>
-      {error instanceof MagicStoreError && error.detail && <p>{error.detail}</p>}
-      <div className="row">
-        <button onClick={reset}>{t.tryAgain}</button>
-        <a href="/">{t.backToShop}</a>
-      </div>
-    </div>
+    <EmptyState
+      as="h1"
+      title={unavailable ? t.shopClosed : t.somethingWentWrong}
+      action={
+        <div className="row">
+          <Button variant="primary" onClick={reset}>
+            {t.tryAgain}
+          </Button>
+          {/* A full load, not a client navigation: the app may be what failed. */}
+          <a href="/" className={buttonClass({ variant: 'link' })}>
+            {t.backToShop}
+          </a>
+        </div>
+      }
+    >
+      {error instanceof MagicStoreError && error.detail && <span role="alert">{error.detail}</span>}
+    </EmptyState>
   );
 }

package/template/app/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2021 The Onest Project Authors (https://github.com/googlefonts/onest)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/template/app/fonts/index.ts

@@ -0,0 +1,14 @@
+import localFont from 'next/font/local';
+
+/**
+ * Onest (OFL, `OFL.txt`): one variable file, weights 100 to 900, subset to Latin, Latin Extended
+ * (Uzbek `oʻ gʻ`) and Cyrillic. Self-hosted, so a build needs no network. `app/layout.tsx` puts its
+ * class on <html>; `app/styles/tokens.css` reads `--font-onest`.
+ */
+export const onest = localFont({
+  src: './onest-variable.woff2',
+  weight: '100 900',
+  display: 'swap',
+  variable: '--font-onest',
+  adjustFontFallback: 'Arial',
+});