create-magic-storefront 0.5.0 → 0.6.0

package/template/components/catalog/facets.tsx

@@ -0,0 +1,216 @@
+import { formatMoney, type MoneyFormat } from '@magicstoreai/hydrogen/core';
+import Link from 'next/link';
+
+import { Accordion } from '@/components/ui/accordion';
+import {
+  PRICE_MAX,
+  PRICE_MIN,
+  catalogQuery,
+  cleared,
+  filterParam,
+  hasFilters,
+  without,
+  type Catalog,
+  type Filter,
+} from '@/lib/catalog-params';
+import type { Messages } from '@/lib/i18n';
+
+import { CatalogForm } from './catalog-form';
+import { FacetsShell } from './facets-shell';
+
+/**
+ * The facets of a catalog page, from the filters endpoint (`collectionsFilters`, `searchFilters`):
+ * LIST as checkboxes with counts, PRICE_RANGE as two number fields, BOOLEAN as one checkbox, each in
+ * a collapsible group, open when it has a choice. `hidden` carries what the URL keeps besides
+ * the filters (the search query). Without filters only the (empty) form renders, for the sort.
+ */
+export function Facets({
+  filters,
+  catalog,
+  formId,
+  hidden = {},
+  t,
+}: {
+  filters: Filter[];
+  catalog: Catalog;
+  formId: string;
+  hidden?: Record<string, string>;
+  t: Messages;
+}) {
+  const hiddenFields = Object.entries(hidden).map(([name, value]) => (
+    <input key={name} type="hidden" name={name} value={value} />
+  ));
+  if (filters.length === 0) {
+    // No facets, but the sort select still submits through this form.
+    return <CatalogForm id={formId}>{hiddenFields}</CatalogForm>;
+  }
+  const activeCount =
+    Object.values(catalog.selected).reduce((sum, values) => sum + values.length, 0) +
+    (catalog.price.min !== undefined || catalog.price.max !== undefined ? 1 : 0);
+
+  return (
+    <FacetsShell activeCount={activeCount} formId={formId}>
+      <CatalogForm id={formId} className="facets">
+        {hiddenFields}
+        {filters.map((filter) => {
+          if (filter.type === 'PRICE_RANGE') {
+            const chosen = catalog.price.min !== undefined || catalog.price.max !== undefined;
+            return (
+              <Accordion key={filter.id} title={filter.label} open={chosen} className="facet">
+                <div className="facet__price">
+                  <label className="field">
+                    <span className="field__label">{t.priceFrom}</span>
+                    <input
+                      type="number"
+                      inputMode="decimal"
+                      name={PRICE_MIN}
+                      min={0}
+                      defaultValue={catalog.price.min}
+                      placeholder={filter.min?.amount.replace(/\.0+$/, '')}
+                    />
+                  </label>
+                  <label className="field">
+                    <span className="field__label">{t.priceTo}</span>
+                    <input
+                      type="number"
+                      inputMode="decimal"
+                      name={PRICE_MAX}
+                      min={0}
+                      defaultValue={catalog.price.max}
+                      placeholder={filter.max?.amount.replace(/\.0+$/, '')}
+                    />
+                  </label>
+                </div>
+              </Accordion>
+            );
+          }
+          const chosen = catalog.selected[filter.id] ?? [];
+          if (filter.type === 'BOOLEAN') {
+            return (
+              <label key={filter.id} className="facet facet--boolean choice">
+                <input
+                  type="checkbox"
+                  name={filterParam(filter.id)}
+                  value="true"
+                  defaultChecked={chosen.length > 0}
+                />
+                {filter.label}
+              </label>
+            );
+          }
+          if (filter.values.length === 0) {
+            return null;
+          }
+          return (
+            <Accordion
+              key={filter.id}
+              title={filter.label}
+              open={chosen.length > 0}
+              className="facet"
+            >
+              <fieldset className="facet__values">
+                <legend className="visually-hidden">{filter.label}</legend>
+                {filter.values.map((option) => (
+                  <label key={option.value} className="choice">
+                    <input
+                      type="checkbox"
+                      name={filterParam(filter.id)}
+                      value={option.value}
+                      defaultChecked={chosen.includes(option.value)}
+                    />
+                    <span>{option.label}</span>
+                    <span className="facet__count">{option.count}</span>
+                  </label>
+                ))}
+              </fieldset>
+            </Accordion>
+          );
+        })}
+        <button type="submit" className="button button--primary facets__apply">
+          {t.showResults}
+        </button>
+      </CatalogForm>
+    </FacetsShell>
+  );
+}
+
+/**
+ * The chosen filters as removable chips (plain links, so they work without JavaScript), and
+ * "Clear all". Price bounds are formatted as the shop formats money.
+ */
+export function ActiveFilters({
+  filters,
+  catalog,
+  path,
+  extra = {},
+  money,
+  t,
+}: {
+  filters: Filter[];
+  catalog: Catalog;
+  path: string;
+  extra?: Record<string, string>;
+  money: { locale: string; format: MoneyFormat | null };
+  t: Messages;
+}) {
+  if (!hasFilters(catalog)) {
+    return null;
+  }
+  const href = (next: Catalog) => `${path}${catalogQuery(next, extra)}`;
+  const chips: { key: string; label: string; href: string }[] = [];
+  for (const filter of filters) {
+    if (filter.type === 'PRICE_RANGE') {
+      const { min, max } = catalog.price;
+      if (min === undefined && max === undefined) {
+        continue;
+      }
+      const currencyCode = filter.min?.currencyCode ?? filter.max?.currencyCode ?? '';
+      const amount = (value: number) =>
+        formatMoney(
+          { amount: String(value), currencyCode },
+          { locale: money.locale, format: money.format },
+        );
+      const range = [
+        min !== undefined ? `${t.priceFrom} ${amount(min)}` : null,
+        max !== undefined ? `${t.priceTo} ${amount(max)}` : null,
+      ]
+        .filter(Boolean)
+        .join(' ');
+      chips.push({
+        key: 'price',
+        label: `${filter.label}: ${range}`,
+        href: href(without(catalog, 'price')),
+      });
+      continue;
+    }
+    for (const value of catalog.selected[filter.id] ?? []) {
+      const label =
+        filter.type === 'BOOLEAN'
+          ? filter.label
+          : `${filter.values.find((option) => option.value === value)?.label ?? value}`;
+      chips.push({
+        key: `${filter.id}:${value}`,
+        label,
+        href: href(without(catalog, filter.id, value)),
+      });
+    }
+  }
+
+  return (
+    <div className="active-filters">
+      <ul className="chips">
+        {chips.map((chip) => (
+          <li key={chip.key}>
+            <Link href={chip.href} scroll={false} aria-label={t.removeFilter(chip.label)}>
+              {chip.label}
+              <span aria-hidden="true">×</span>
+            </Link>
+          </li>
+        ))}
+      </ul>
+      <Link href={href(cleared(catalog))} scroll={false} className="active-filters__clear">
+        {t.clearAll}
+      </Link>
+    </div>
+  );
+}

package/template/components/checkout/order-summary.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { Image, Money, moneyAmount } from '@magicstoreai/hydrogen';
+import type { Schema } from '@magicstoreai/storefront-client';
+
+import type { Messages } from '@/lib/i18n';
+
+import type { Checkout } from './use-checkout';
+
+type MoneyValue = Schema<'Money'>;
+
+/** The order as the checkout prices it: its lines, then the amounts from `checkout.cost`. */
+export function OrderSummary({ checkout, t }: { checkout: Checkout; t: Messages }) {
+  const { cost } = checkout;
+  return (
+    <div className="order-summary">
+      <ul className="order-summary__lines">
+        {checkout.cart.lines.map((line) => (
+          <li key={line.id} className="order-summary__line">
+            <span className="order-summary__media">
+              <Image
+                data={line.merchandise.image}
+                width={56}
+                height={56}
+                alt=""
+                fallback={<span className="media-fallback" />}
+              />
+              <span className="order-summary__quantity">{line.quantity}</span>
+            </span>
+            <span className="order-summary__name">
+              {line.merchandise.product?.title}
+              {line.merchandise.variant?.title &&
+                !/^Default( Title)?$/.test(line.merchandise.variant.title) && (
+                  <span className="muted text-sm">{line.merchandise.variant.title}</span>
+                )}
+            </span>
+            <Money data={line.cost.total} className="order-summary__price" />
+          </li>
+        ))}
+      </ul>
+      <dl className="order-summary__rows">
+        <Row label={t.subtotal} value={cost.subtotal} />
+        <Row label={t.discount} value={cost.discountTotal} negative />
+        <Row label={t.welcomeDiscount} value={cost.welcomeDiscount} negative />
+        <Row label={t.pointsDiscount} value={cost.pointsDiscount} negative />
+        {checkout.selectedDeliveryOption && (
+          <div className="order-summary__row">
+            <dt>{t.delivery}</dt>
+            <dd>
+              <Money data={cost.deliveryTotal} fallback={t.free} />
+            </dd>
+          </div>
+        )}
+        <div className="order-summary__row order-summary__row--total">
+          <dt>{t.total}</dt>
+          <dd>{cost.total && <Money data={cost.total} />}</dd>
+        </div>
+      </dl>
+    </div>
+  );
+}
+
+function Row({
+  label,
+  value,
+  negative = false,
+}: {
+  label: string;
+  value: MoneyValue | null;
+  negative?: boolean;
+}) {
+  if (value === null || (negative && moneyAmount(value) <= 0)) {
+    return null;
+  }
+  return (
+    <div className="order-summary__row">
+      <dt>{label}</dt>
+      <dd>
+        {negative && '−'}
+        <Money data={value} />
+      </dd>
+    </div>
+  );
+}

package/template/components/checkout/radio-card.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+
+/**
+ * One choice of a group (delivery option, pickup point, payment method) as a card: a native radio
+ * inside a label, so arrows move between cards and the whole card is the target.
+ */
+export function RadioCard({
+  name,
+  checked,
+  disabled = false,
+  onSelect,
+  title,
+  aside,
+  children,
+}: {
+  name: string;
+  checked: boolean;
+  disabled?: boolean;
+  onSelect: () => void;
+  title: ReactNode;
+  aside?: ReactNode;
+  children?: ReactNode;
+}) {
+  return (
+    <label className={disabled ? 'radio-card radio-card--disabled' : 'radio-card'}>
+      <input type="radio" name={name} checked={checked} disabled={disabled} onChange={onSelect} />
+      <span className="radio-card__body">
+        <span className="radio-card__title">{title}</span>
+        {children && <span className="radio-card__detail">{children}</span>}
+      </span>
+      {aside && <span className="radio-card__aside">{aside}</span>}
+    </label>
+  );
+}

package/template/components/checkout/step-indicator.tsx

@@ -0,0 +1,56 @@
+import type { Messages } from '@/lib/i18n';
+
+import type { Checkout } from './use-checkout';
+
+export type Step = 'contact' | 'delivery' | 'payment';
+
+/** Which step a `missing` entry belongs to. */
+const STEP_OF: Record<Checkout['missing'][number], Step> = {
+  CONTACT: 'contact',
+  DELIVERY_ADDRESS: 'delivery',
+  DELIVERY_OPTION: 'delivery',
+  PAYMENT_METHOD: 'payment',
+};
+
+const STEPS: Step[] = ['contact', 'delivery', 'payment'];
+
+/** The step to fill next: the first one `missing` names; none once the checkout is ready. */
+export function currentStep(missing: Checkout['missing']): Step | null {
+  return missing.length > 0 ? STEP_OF[missing[0]!] : null;
+}
+
+export function isDone(step: Step, missing: Checkout['missing']): boolean {
+  return !missing.some((entry) => STEP_OF[entry] === step);
+}
+
+/** Contact → delivery → payment, each marked done from `checkout.missing`. */
+export function StepIndicator({ missing, t }: { missing: Checkout['missing']; t: Messages }) {
+  const current = currentStep(missing);
+  const labels: Record<Step, string> = {
+    contact: t.contact,
+    delivery: t.delivery,
+    payment: t.payment,
+  };
+  return (
+    <ol className="checkout-steps" aria-label={t.checkoutSteps}>
+      {STEPS.map((step, index) => {
+        const done = isDone(step, missing);
+        return (
+          <li
+            key={step}
+            className={
+              done ? 'checkout-steps__step checkout-steps__step--done' : 'checkout-steps__step'
+            }
+            aria-current={step === current ? 'step' : undefined}
+          >
+            <span className="checkout-steps__number" aria-hidden="true">
+              {index + 1}
+            </span>
+            {labels[step]}
+            {done && <span className="visually-hidden"> ({t.stepDone})</span>}
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

package/template/components/checkout/steps.tsx

@@ -0,0 +1,264 @@
+'use client';
+
+import { Money, useCustomer } from '@magicstoreai/hydrogen';
+import type { ReactNode } from 'react';
+
+import { Button } from '@/components/ui/button';
+import { Icon } from '@/components/ui/icon';
+import type { Messages } from '@/lib/i18n';
+
+import { Field } from '@/components/ui/field';
+import { RadioCard } from './radio-card';
+import { isDone, type Step } from './step-indicator';
+import type { useCheckout } from './use-checkout';
+
+type State = ReturnType<typeof useCheckout>;
+type Ready = State & { checkout: NonNullable<State['checkout']> };
+
+/** A numbered step: a heading with its done mark, then its fields. */
+function Section({
+  step,
+  index,
+  title,
+  done,
+  children,
+}: {
+  step: Step;
+  index: number;
+  title: string;
+  done: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <section className="checkout-section" aria-labelledby={`checkout-${step}`}>
+      <h2 id={`checkout-${step}`} className="checkout-section__title">
+        <span className="checkout-section__number" aria-hidden="true">
+          {done ? <Icon name="check" size={16} /> : index}
+        </span>
+        {title}
+      </h2>
+      {children}
+    </section>
+  );
+}
+
+/** Contact: name and phone (`checkoutsContact`), prefilled from the checkout or the customer. */
+export function ContactStep({ state, t }: { state: Ready; t: Messages }) {
+  const { client, checkout, run, busy, fieldErrors } = state;
+  const { customer } = useCustomer();
+  const done = isDone('contact', checkout.missing);
+  return (
+    <Section step="contact" index={1} title={t.contact} done={done}>
+      <form
+        className="checkout-form"
+        onSubmit={(event) => {
+          event.preventDefault();
+          const form = new FormData(event.currentTarget);
+          void run(() =>
+            client.checkoutsContact({
+              path: { id: checkout.id },
+              body: { name: String(form.get('name')), phone: String(form.get('phone')) },
+            }),
+          );
+        }}
+      >
+        <div className="checkout-form__row">
+          <Field
+            label={t.name}
+            name="name"
+            required
+            autoComplete="name"
+            defaultValue={checkout.contact?.name ?? customer?.name ?? ''}
+            error={fieldErrors.name}
+          />
+          <Field
+            label={t.phone}
+            name="phone"
+            required
+            type="tel"
+            autoComplete="tel"
+            placeholder="+998 90 123 45 67"
+            defaultValue={checkout.contact?.phone ?? customer?.phone ?? ''}
+            error={fieldErrors.phone}
+          />
+        </div>
+        <Button type="submit" variant={done ? 'secondary' : 'primary'} loading={busy}>
+          {t.saveContact}
+        </Button>
+      </form>
+    </Section>
+  );
+}
+
+/**
+ * Delivery: a pickup point (`checkoutsPickupLocation`), or an address (`checkoutsShippingAddress`)
+ * and then one of the options the API offers for it (`checkoutsDeliveryOption`).
+ */
+export function DeliveryStep({ state, t }: { state: Ready; t: Messages }) {
+  const { client, checkout, run, busy, fieldErrors, locations, options, loadOptions } = state;
+  const id = checkout.id;
+  const done = isDone('delivery', checkout.missing);
+  const needsAddress = checkout.missing.includes('DELIVERY_ADDRESS');
+  return (
+    <Section step="delivery" index={2} title={t.delivery} done={done}>
+      {locations.length > 0 && (
+        <fieldset className="checkout-choices">
+          <legend className="checkout-choices__legend">{t.pickUp}</legend>
+          {locations.map((location) => (
+            <RadioCard
+              key={location.id}
+              name="pickup"
+              checked={checkout.pickupLocation?.id === location.id}
+              onSelect={() =>
+                void run(() =>
+                  client.checkoutsPickupLocation({
+                    path: { id },
+                    body: { locationId: location.id },
+                  }),
+                )
+              }
+              title={location.name}
+            >
+              {[location.address, location.hours].filter(Boolean).join(' · ')}
+            </RadioCard>
+          ))}
+        </fieldset>
+      )}
+      <form
+        className="checkout-form"
+        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;
+          });
+        }}
+      >
+        <p className="checkout-choices__legend">
+          {locations.length > 0 ? t.orDeliverTo : t.deliverTo}
+        </p>
+        <Field
+          label={t.street}
+          name="address"
+          autoComplete="street-address"
+          defaultValue={checkout.shippingAddress?.address ?? ''}
+          error={fieldErrors.address}
+        />
+        <Field
+          label={t.city}
+          name="city"
+          autoComplete="address-level2"
+          defaultValue={checkout.shippingAddress?.city ?? ''}
+          error={fieldErrors.city}
+        />
+        <div className="checkout-form__row checkout-form__row--location">
+          <Field
+            label={t.latitude}
+            name="latitude"
+            required
+            inputMode="decimal"
+            defaultValue={checkout.shippingAddress?.latitude ?? ''}
+            error={fieldErrors.latitude}
+          />
+          <Field
+            label={t.longitude}
+            name="longitude"
+            required
+            inputMode="decimal"
+            defaultValue={checkout.shippingAddress?.longitude ?? ''}
+            error={fieldErrors.longitude}
+          />
+          <Button
+            className="checkout-form__locate"
+            onClick={(event) => fillMyLocation(event.currentTarget.form)}
+          >
+            <Icon name="map-pin" size={18} />
+            {t.useMyLocation}
+          </Button>
+        </div>
+        <Button type="submit" variant={needsAddress ? 'primary' : 'secondary'} loading={busy}>
+          {t.showDeliveryOptions}
+        </Button>
+      </form>
+      {options.length > 0 && (
+        <fieldset className="checkout-choices">
+          <legend className="checkout-choices__legend">{t.delivery}</legend>
+          {options.map((option) => (
+            <RadioCard
+              key={option.id}
+              name="delivery"
+              disabled={!option.available}
+              checked={checkout.selectedDeliveryOption?.id === option.id}
+              onSelect={() =>
+                void run(() =>
+                  client.checkoutsDeliveryOption({
+                    path: { id },
+                    body: { deliveryOptionId: option.id },
+                  }),
+                )
+              }
+              title={option.title}
+              aside={<Money data={option.price} fallback={t.free} />}
+            >
+              {option.etaMinutes !== null ? t.etaMinutes(option.etaMinutes) : null}
+            </RadioCard>
+          ))}
+        </fieldset>
+      )}
+    </Section>
+  );
+}
+
+/** Payment: one of the methods the checkout lists (`checkoutsPaymentMethod`). */
+export function PaymentStep({ state, t }: { state: Ready; t: Messages }) {
+  const { client, checkout, run } = state;
+  return (
+    <Section step="payment" index={3} title={t.payment} done={isDone('payment', checkout.missing)}>
+      <fieldset className="checkout-choices">
+        <legend className="visually-hidden">{t.payment}</legend>
+        {checkout.paymentMethods.map((method) => (
+          <RadioCard
+            key={method.id}
+            name="payment"
+            checked={checkout.selectedPaymentMethod?.id === method.id}
+            onSelect={() =>
+              void run(() =>
+                client.checkoutsPaymentMethod({
+                  path: { id: checkout.id },
+                  body: { paymentMethodId: method.id },
+                }),
+              )
+            }
+            title={method.title}
+          >
+            {method.description}
+          </RadioCard>
+        ))}
+      </fieldset>
+    </Section>
+  );
+}
+
+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);
+  });
+}