create-magic-storefront 0.5.0 → 0.6.0

package/template/components/account/account-shell.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { useCustomer, useMagicStore, useTelegramWebApp } from '@magicstoreai/hydrogen';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useState, type ReactNode } from 'react';
+
+import { Button } from '@/components/ui/button';
+import { describePhoneShare } from '@/lib/errors';
+import { messages } from '@/lib/i18n';
+
+import { SignIn } from './sign-in';
+
+/**
+ * Every account page: signed out, the sign-in card instead of the page; signed in, the customer's
+ * name, the account navigation, then the page. Inside a Mini App, a customer without a phone is
+ * asked to share it first.
+ */
+export function AccountShell({ children }: { children: ReactNode }) {
+  const { customer, isSignedIn } = useCustomer();
+  const { canRequestContact } = useTelegramWebApp();
+  const { locale, shop } = useMagicStore();
+  const pathname = usePathname();
+  const t = messages(locale);
+
+  if (!isSignedIn || !customer) {
+    return <SignIn />;
+  }
+  const links = [
+    { href: '/account', label: t.overview },
+    { href: '/account/addresses', label: t.addresses },
+    { href: '/account/profile', label: t.profile },
+    ...(shop?.features.wishlist ? [{ href: '/wishlist', label: t.wishlist }] : []),
+  ];
+  const current = (href: string) =>
+    href === '/account'
+      ? pathname === '/account' || pathname?.startsWith('/account/orders') === true
+      : pathname?.startsWith(href) === true;
+
+  return (
+    <div className="account">
+      <header className="account__header">
+        <h1 className="account__name">{customer.name || customer.phone}</h1>
+        {customer.name && customer.phone && <p className="muted">{customer.phone}</p>}
+      </header>
+      {/* A customer who only ever signed in through Telegram has no phone yet; older Telegram
+          clients cannot share it. */}
+      {canRequestContact && !customer.phone && <SharePhone />}
+      <nav className="account__nav" aria-label={t.accountNav}>
+        {links.map((link) => (
+          <Link
+            key={link.href}
+            href={link.href}
+            aria-current={current(link.href) ? 'page' : undefined}
+          >
+            {link.label}
+          </Link>
+        ))}
+      </nav>
+      <div className="account__content">{children}</div>
+    </div>
+  );
+}
+
+/**
+ * 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="account__notice">
+      <p>{t.sharePhoneHint}</p>
+      <Button variant="primary" loading={busy} onClick={() => void share()}>
+        {t.sharePhone}
+      </Button>
+      {error && (
+        <p className="error" role="alert">
+          {error}
+        </p>
+      )}
+    </section>
+  );
+}

package/template/components/account/addresses.tsx

@@ -0,0 +1,247 @@
+'use client';
+
+import { useMagicStore, useStorefrontClient } from '@magicstoreai/hydrogen';
+import type { Schema } from '@magicstoreai/storefront-client';
+import { useEffect, useState, type FormEvent } from 'react';
+
+import { Button } from '@/components/ui/button';
+import { Field } from '@/components/ui/field';
+import { Skeleton } from '@/components/ui/skeleton';
+import { describe, formErrors } from '@/lib/errors';
+import { messages, type Messages } from '@/lib/i18n';
+
+type Address = Schema<'CustomerAddress'>;
+type Errors = Record<string, string>;
+
+/** The request members the address form has an input for. */
+const ADDRESS_FIELDS = ['address', 'address2', 'city'] as const;
+
+function line(address: Address): string {
+  return [address.address, address.address2, address.city].filter(Boolean).join(', ');
+}
+
+/**
+ * The address book (`customerAddresses*`): each address with edit, delete and "make default", and
+ * a form to add one. A refused field says why under it.
+ */
+export function Addresses() {
+  const client = useStorefrontClient();
+  const t = messages(useMagicStore().locale);
+  const [addresses, setAddresses] = useState<Address[] | null>(null);
+  // `null`: no form open; `'new'`: adding; an id: editing that address.
+  const [editing, setEditing] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  async function reload() {
+    setAddresses((await client.customerAddressesIndex()).data);
+  }
+
+  useEffect(() => {
+    let current = true;
+    client.customerAddressesIndex().then(
+      ({ data }) => current && setAddresses(data),
+      (e: unknown) => current && setError(describe(e, t.tryAgainLater)),
+    );
+    return () => {
+      current = false;
+    };
+  }, [client, t.tryAgainLater]);
+
+  async function change(step: () => Promise<unknown>) {
+    setError(null);
+    try {
+      await step();
+      await reload();
+    } catch (e) {
+      setError(describe(e, t.tryAgainLater));
+    }
+  }
+
+  if (addresses === null) {
+    return error ? (
+      <p className="error" role="alert">
+        {error}
+      </p>
+    ) : (
+      <div className="stack" aria-busy="true">
+        <Skeleton height="5rem" />
+        <Skeleton height="5rem" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="stack stack--loose">
+      {addresses.length === 0 && editing !== 'new' && <p className="muted">{t.noAddresses}</p>}
+      <ul className="address-list">
+        {addresses.map((address) =>
+          editing === address.id ? (
+            <li key={address.id}>
+              <AddressForm
+                address={address}
+                t={t}
+                onCancel={() => setEditing(null)}
+                onSave={async (body) => {
+                  await client.customerAddressesUpdate({ path: { addressId: address.id }, body });
+                  await reload();
+                  setEditing(null);
+                }}
+              />
+            </li>
+          ) : (
+            <li key={address.id} className="address-card">
+              <div className="address-card__text">
+                <p>{line(address)}</p>
+                {address.isDefault && (
+                  <span className="badge badge--neutral">{t.defaultAddress}</span>
+                )}
+              </div>
+              <div className="address-card__actions">
+                <Button variant="link" onClick={() => setEditing(address.id)}>
+                  {t.editAddress}
+                </Button>
+                {!address.isDefault && address.address && (
+                  <Button
+                    variant="link"
+                    onClick={() =>
+                      void change(() =>
+                        client.customerAddressesUpdate({
+                          path: { addressId: address.id },
+                          body: {
+                            address: address.address ?? '',
+                            address2: address.address2,
+                            city: address.city,
+                            latitude: address.latitude,
+                            longitude: address.longitude,
+                            isDefault: true,
+                          },
+                        }),
+                      )
+                    }
+                  >
+                    {t.makeDefault}
+                  </Button>
+                )}
+                <Button
+                  variant="link"
+                  aria-label={t.deleteAddress(line(address))}
+                  onClick={() =>
+                    void change(() =>
+                      client.customerAddressesDestroy({ path: { addressId: address.id } }),
+                    )
+                  }
+                >
+                  {t.remove}
+                </Button>
+              </div>
+            </li>
+          ),
+        )}
+      </ul>
+      {error && (
+        <p className="error" role="alert">
+          {error}
+        </p>
+      )}
+      {editing === 'new' ? (
+        <AddressForm
+          address={null}
+          t={t}
+          onCancel={() => setEditing(null)}
+          onSave={async (body) => {
+            await client.customerAddressesStore({ body });
+            await reload();
+            setEditing(null);
+          }}
+        />
+      ) : (
+        <div>
+          <Button variant="primary" onClick={() => setEditing('new')}>
+            {t.addAddress}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+type AddressBody = Schema<'CustomerAddressRequest'>;
+
+/** Add or edit one address; the API's refusals show under their fields. */
+function AddressForm({
+  address,
+  t,
+  onSave,
+  onCancel,
+}: {
+  address: Address | null;
+  t: Messages;
+  onSave: (body: AddressBody) => Promise<void>;
+  onCancel: () => void;
+}) {
+  const [errors, setErrors] = useState<Errors>({});
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const form = new FormData(event.currentTarget);
+    const text = (name: string) => String(form.get(name) ?? '').trim();
+    setErrors({});
+    setError(null);
+    setBusy(true);
+    try {
+      await onSave({
+        address: text('address'),
+        address2: text('address2') || null,
+        city: text('city') || null,
+        latitude: address?.latitude ?? null,
+        longitude: address?.longitude ?? null,
+      });
+    } catch (e) {
+      const { fields, summary } = formErrors(e, ADDRESS_FIELDS, t.tryAgainLater);
+      setErrors(fields);
+      setError(summary);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <form className="address-form" onSubmit={submit}>
+      <Field
+        label={t.street}
+        name="address"
+        required
+        autoComplete="street-address"
+        defaultValue={address?.address ?? ''}
+        error={errors.address}
+      />
+      <Field
+        label={t.address2}
+        name="address2"
+        autoComplete="address-line2"
+        defaultValue={address?.address2 ?? ''}
+        error={errors.address2}
+      />
+      <Field
+        label={t.city}
+        name="city"
+        autoComplete="address-level2"
+        defaultValue={address?.city ?? ''}
+        error={errors.city}
+      />
+      {error && (
+        <p className="error" role="alert">
+          {error}
+        </p>
+      )}
+      <div className="row">
+        <Button type="submit" variant="primary" loading={busy}>
+          {t.saveChanges}
+        </Button>
+        <Button onClick={onCancel}>{t.cancel}</Button>
+      </div>
+    </form>
+  );
+}

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

@@ -0,0 +1,281 @@
+'use client';
+
+import {
+  Image,
+  MagicStoreError,
+  Money,
+  moneyAmount,
+  useCart,
+  useMagicStore,
+  useStorefrontClient,
+} from '@magicstoreai/hydrogen';
+import type { Schema } from '@magicstoreai/storefront-client';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+
+import { useCartDrawer } from '@/components/cart/cart-drawer';
+import { Button } 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, type Messages } from '@/lib/i18n';
+
+import { formatDate, OrderStatus } from './order-status';
+
+type Order = Schema<'Order'>;
+type MoneyValue = Schema<'Money'>;
+
+/**
+ * One of the customer's orders (`customerOrdersShow`; another customer's is `NOT_FOUND`): its
+ * lines, amounts, delivery and payment, "order again" (a new cart, then the cart drawer) and, while
+ * `cancellable`, a cancel with a confirm step.
+ */
+export function OrderDetail({ id }: { id: string }) {
+  const client = useStorefrontClient();
+  const { reorder } = useCart();
+  const drawer = useCartDrawer();
+  const { locale } = useMagicStore();
+  const t = messages(locale);
+  const [order, setOrder] = useState<Order | null>(null);
+  const [missing, setMissing] = useState(false);
+  const [confirming, setConfirming] = useState(false);
+  const [busy, setBusy] = useState<'reorder' | 'cancel' | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let current = true;
+    client.customerOrdersShow({ path: { id } }).then(
+      ({ data }) => current && setOrder(data),
+      (e: unknown) => {
+        if (!current) {
+          return;
+        }
+        if (e instanceof MagicStoreError && e.code === 'NOT_FOUND') {
+          setMissing(true);
+        } else {
+          setError(describe(e, t.tryAgainLater));
+        }
+      },
+    );
+    return () => {
+      current = false;
+    };
+  }, [client, id, t.tryAgainLater]);
+
+  async function act(kind: 'reorder' | 'cancel', step: () => Promise<void>) {
+    setBusy(kind);
+    setError(null);
+    try {
+      await step();
+    } catch (e) {
+      setError(describe(e, t.tryAgainLater));
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  if (missing) {
+    return <EmptyState title={t.notFound} action={<Link href="/account">{t.backToOrders}</Link>} />;
+  }
+  if (order === null) {
+    return error ? (
+      <p className="error" role="alert">
+        {error}
+      </p>
+    ) : (
+      <div className="stack" aria-busy="true">
+        <Skeleton height="2rem" width="40%" />
+        <Skeleton height="12rem" />
+      </div>
+    );
+  }
+
+  const date = formatDate(order.createdAt, locale);
+  const address = order.shippingAddress;
+  const pickup = order.delivery?.pickupLocation ?? null;
+
+  return (
+    <article className="order-detail">
+      <Link href="/account" className="order-detail__back">
+        <Icon name="chevron-left" size={16} />
+        {t.backToOrders}
+      </Link>
+      <header className="order-detail__header">
+        <div>
+          <h2 className="order-detail__title">{t.orderNumber(order.number)}</h2>
+          {date && <p className="muted text-sm">{t.placedOn(date)}</p>}
+        </div>
+        <OrderStatus status={order.status} t={t} />
+      </header>
+      {order.status === 'CANCELLED' && <p className="muted">{t.orderCancelledNote}</p>}
+
+      <ul className="order-detail__lines">
+        {order.lineItems.map((line) => (
+          <li key={line.id} className="order-detail__line">
+            <span className="order-detail__media">
+              <Image
+                data={line.image}
+                width={64}
+                height={64}
+                alt=""
+                fallback={<span className="media-fallback" />}
+              />
+            </span>
+            <span className="order-detail__name">
+              {line.productHandle ? (
+                <Link href={`/products/${line.productHandle}`}>{line.title}</Link>
+              ) : (
+                line.title
+              )}
+              <span className="muted text-sm">
+                {[line.variantTitle, `× ${line.quantity}`].filter(Boolean).join(' · ')}
+              </span>
+            </span>
+            <Money data={line.cost.total} className="order-detail__price" />
+          </li>
+        ))}
+      </ul>
+
+      <div className="order-detail__grid">
+        <dl className="order-summary__rows">
+          <Row label={t.subtotal} value={order.cost.subtotal} />
+          <Row label={t.discount} value={order.cost.discountTotal} negative />
+          <Row label={t.pointsDiscount} value={order.cost.pointsDiscount} negative />
+          <Row label={t.delivery} value={order.cost.deliveryTotal} />
+          <div className="order-summary__row order-summary__row--total">
+            <dt>{t.total}</dt>
+            <dd>{order.cost.total && <Money data={order.cost.total} />}</dd>
+          </div>
+        </dl>
+        <div className="order-detail__facts">
+          {(pickup || address) && (
+            <section>
+              <h3 className="order-detail__fact-title">
+                {pickup ? t.pickupPoint : t.deliveryAddress}
+              </h3>
+              <p className="muted">
+                {pickup
+                  ? [pickup.name, pickup.address].filter(Boolean).join(', ')
+                  : [address?.address, address?.address2, address?.city].filter(Boolean).join(', ')}
+              </p>
+            </section>
+          )}
+          {order.payment && (
+            <section>
+              <h3 className="order-detail__fact-title">{t.payment}</h3>
+              <p className="muted">
+                {[order.payment.methodTitle, t.paymentStatus[order.payment.status]]
+                  .filter(Boolean)
+                  .join(' · ')}
+              </p>
+            </section>
+          )}
+        </div>
+      </div>
+
+      {error && (
+        <p className="error" role="alert">
+          {error}
+        </p>
+      )}
+      <Actions
+        order={order}
+        t={t}
+        busy={busy}
+        confirming={confirming}
+        setConfirming={setConfirming}
+        onReorder={() =>
+          void act('reorder', async () => {
+            await reorder(order.id);
+            drawer.added();
+          })
+        }
+        onCancel={() =>
+          void act('cancel', async () => {
+            try {
+              const { data } = await client.customerOrdersCancellation({ path: { id: order.id } });
+              setOrder(data);
+            } catch (e) {
+              // The shop refused (cancellation off, already in progress, paid): `detail` says why,
+              // and offering the button again would only repeat the refusal.
+              if (e instanceof MagicStoreError && e.code === 'ORDER_NOT_CANCELLABLE') {
+                setOrder({ ...order, cancellable: false });
+              }
+              throw e;
+            } finally {
+              setConfirming(false);
+            }
+          })
+        }
+      />
+    </article>
+  );
+}
+
+function Actions({
+  order,
+  t,
+  busy,
+  confirming,
+  setConfirming,
+  onReorder,
+  onCancel,
+}: {
+  order: Order;
+  t: Messages;
+  busy: 'reorder' | 'cancel' | null;
+  confirming: boolean;
+  setConfirming: (confirming: boolean) => void;
+  onReorder: () => void;
+  onCancel: () => void;
+}) {
+  if (confirming) {
+    return (
+      <div className="order-detail__confirm" role="group" aria-label={t.cancelOrder}>
+        <p>{t.cancelOrderConfirm}</p>
+        <div className="row">
+          <Button variant="primary" loading={busy === 'cancel'} onClick={onCancel}>
+            {t.cancelOrder}
+          </Button>
+          <Button onClick={() => setConfirming(false)}>{t.keepOrder}</Button>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="order-detail__actions">
+      <Button variant="primary" loading={busy === 'reorder'} onClick={onReorder}>
+        {t.orderAgain}
+      </Button>
+      {order.cancellable && (
+        <Button variant="link" onClick={() => setConfirming(true)}>
+          {t.cancelOrder}
+        </Button>
+      )}
+    </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>
+  );
+}