@tuturuuu/ui 0.7.0 → 0.9.0

package/src/components/ui/storefront/cart-summary-parts.tsx

@@ -0,0 +1,290 @@
+'use client';
+
+import { ArrowRight, Tag, TriangleAlert, Zap } from '@tuturuuu/icons';
+import { ChevronDownIcon } from '@tuturuuu/icons/lucide-static';
+import { cn } from '@tuturuuu/utils/format';
+import type { ReactNode } from 'react';
+import { Button } from '../button';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '../collapsible';
+import { AccentButton } from './accent-button';
+import type {
+  StorefrontBuyerDefaults,
+  StorefrontCartEntry,
+  StorefrontSurfaceLabels,
+} from './types';
+import {
+  formatStorefrontPrice,
+  getStorefrontLinePrice,
+  getStorefrontVariantLabel,
+  storefrontCartLineKey,
+} from './utils';
+
+export function CartContents({
+  cartEntries,
+  currency,
+  hasCart,
+  isCheckoutDisabled,
+  labels,
+  total,
+}: {
+  cartEntries: StorefrontCartEntry[];
+  currency: string;
+  hasCart: boolean;
+  isCheckoutDisabled: boolean;
+  labels: StorefrontSurfaceLabels;
+  total: number;
+}) {
+  return (
+    <div className="grid gap-4">
+      {hasCart ? (
+        <CartLines cartEntries={cartEntries} currency={currency} />
+      ) : null}
+      <CartTotal currency={currency} labels={labels} total={total} />
+      {hasCart && !isCheckoutDisabled ? (
+        <p className="flex items-center gap-2 rounded-md border border-border border-dashed bg-muted/30 px-3 py-2 text-muted-foreground text-xs leading-5">
+          <Tag className="h-3.5 w-3.5 shrink-0" />
+          {labels.couponNote}
+        </p>
+      ) : null}
+      {!hasCart ? (
+        <p className="flex items-center gap-2 rounded-md border border-border bg-muted/40 px-3 py-2 text-muted-foreground text-sm">
+          <TriangleAlert className="h-4 w-4 shrink-0" />
+          {labels.emptyCart}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+export function CartActions({
+  canOpenCheckout,
+  checkoutHref,
+  isCheckoutDisabled,
+  isPreview,
+  isSubmitting,
+  labels,
+  onCheckoutOpen,
+  onInstantCheckout,
+  radius,
+}: {
+  canOpenCheckout: boolean;
+  checkoutHref?: string;
+  isCheckoutDisabled: boolean;
+  isPreview: boolean;
+  isSubmitting: boolean;
+  labels: StorefrontSurfaceLabels;
+  onCheckoutOpen?: () => void;
+  onInstantCheckout?: () => void;
+  radius: string;
+}) {
+  if (isPreview || isCheckoutDisabled) {
+    return (
+      <Button className={cn('w-full', radius)} disabled type="button">
+        {labels.checkoutDisabled}
+      </Button>
+    );
+  }
+
+  if (!canOpenCheckout) {
+    return (
+      <Button className={cn('w-full', radius)} disabled type="button">
+        {labels.checkout}
+        <ArrowRight className="size-4 shrink-0" />
+      </Button>
+    );
+  }
+
+  return (
+    <div className="grid gap-2">
+      {onInstantCheckout ? (
+        <AccentButton
+          disabled={isSubmitting}
+          onClick={onInstantCheckout}
+          radius={radius}
+        >
+          <Zap className="size-4 shrink-0" />
+          {isSubmitting ? labels.reserving : labels.instantCheckout}
+        </AccentButton>
+      ) : null}
+      {onCheckoutOpen ? (
+        <AccentButton
+          disabled={isSubmitting}
+          onClick={onCheckoutOpen}
+          radius={radius}
+        >
+          {labels.checkout}
+          <ArrowRight className="size-4 shrink-0" />
+        </AccentButton>
+      ) : (
+        <Button asChild className={cn('w-full', radius)} variant="outline">
+          <a href={checkoutHref}>
+            {labels.checkout}
+            <ArrowRight className="size-4 shrink-0" />
+          </a>
+        </Button>
+      )}
+    </div>
+  );
+}
+
+export function CheckoutSection({
+  children,
+  defaultOpen,
+  meta,
+  title,
+}: {
+  children: ReactNode;
+  defaultOpen?: boolean;
+  meta?: string;
+  title: string;
+}) {
+  return (
+    <Collapsible defaultOpen={defaultOpen}>
+      <div className="rounded-lg bg-muted/25 px-3 py-2">
+        <CollapsibleTrigger
+          className="group flex w-full items-center gap-3 text-left"
+          type="button"
+        >
+          <span className="min-w-0 flex-1 font-semibold text-sm">{title}</span>
+          {meta ? (
+            <span className="max-w-[9rem] overflow-hidden text-ellipsis whitespace-nowrap text-right font-semibold text-sm tabular-nums">
+              {meta}
+            </span>
+          ) : null}
+          <ChevronDownIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
+        </CollapsibleTrigger>
+        <CollapsibleContent className="pt-4">{children}</CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}
+
+export function CheckoutContactFields({
+  buyerDefaults,
+  labels,
+}: {
+  buyerDefaults?: StorefrontBuyerDefaults;
+  labels: StorefrontSurfaceLabels;
+}) {
+  const buyerEmail = buyerDefaults?.email?.trim() || undefined;
+  const buyerName = buyerDefaults?.name?.trim() || undefined;
+  const inputClassName =
+    'h-11 rounded-md border border-input bg-background px-3 text-sm outline-none transition focus-visible:ring-2 focus-visible:ring-ring/40';
+  const labelClassName = 'grid gap-1.5 text-sm';
+
+  return (
+    <div className="grid gap-3">
+      <label className={labelClassName}>
+        <span className="font-medium text-xs">{labels.form.name}</span>
+        <input
+          autoComplete="name"
+          className={inputClassName}
+          defaultValue={buyerName}
+          name="customerName"
+          placeholder={labels.form.name}
+          required
+        />
+      </label>
+      <label className={labelClassName}>
+        <span className="font-medium text-xs">{labels.form.email}</span>
+        <input
+          autoComplete="email"
+          className={inputClassName}
+          defaultValue={buyerEmail}
+          name="customerEmail"
+          placeholder={labels.form.email}
+          required
+          type="email"
+        />
+      </label>
+      <label className={labelClassName}>
+        <span className="font-medium text-xs">{labels.form.phone}</span>
+        <input
+          autoComplete="tel"
+          className={inputClassName}
+          name="customerPhone"
+          placeholder={labels.form.phone}
+          type="tel"
+        />
+      </label>
+      <textarea
+        className="min-h-24 rounded-md border border-input bg-background px-3 py-2.5 text-sm outline-none transition focus-visible:ring-2 focus-visible:ring-ring/40"
+        name="note"
+        placeholder={labels.form.note}
+      />
+    </div>
+  );
+}
+
+function CartLines({
+  cartEntries,
+  currency,
+}: {
+  cartEntries: StorefrontCartEntry[];
+  currency: string;
+}) {
+  return (
+    <div className="-mr-1 grid max-h-72 gap-3 overflow-y-auto pr-1">
+      {cartEntries.map(({ line, listing, variant }) => {
+        const unitPrice = getStorefrontLinePrice(listing, variant);
+        const variantLabel = variant
+          ? getStorefrontVariantLabel(variant)
+          : null;
+        const lineTotal = formatStorefrontPrice(
+          unitPrice * line.quantity,
+          currency
+        );
+
+        return (
+          <div
+            className="grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 gap-y-1 text-sm"
+            key={storefrontCartLineKey(line.listingId, line.variantId)}
+          >
+            <div className="min-w-0">
+              <p className="line-clamp-2 break-words font-medium leading-5">
+                {listing.title}
+              </p>
+              {variantLabel ? (
+                <p className="line-clamp-1 break-words text-muted-foreground text-xs">
+                  {variantLabel}
+                </p>
+              ) : null}
+              <p className="text-muted-foreground text-xs tabular-nums">
+                {line.quantity} × {formatStorefrontPrice(unitPrice, currency)}
+              </p>
+            </div>
+            <span
+              className="max-w-[9rem] justify-self-end overflow-hidden text-ellipsis whitespace-nowrap text-right font-medium tabular-nums leading-5 sm:max-w-[11rem]"
+              title={lineTotal}
+            >
+              {lineTotal}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function CartTotal({
+  currency,
+  labels,
+  total,
+}: {
+  currency: string;
+  labels: StorefrontSurfaceLabels;
+  total: number;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3 border-border border-t pt-4">
+      <span className="text-muted-foreground text-sm">{labels.total}</span>
+      <span className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-right font-semibold tabular-nums">
+        {formatStorefrontPrice(total, currency)}
+      </span>
+    </div>
+  );
+}

package/src/components/ui/storefront/cart-summary.tsx

@@ -1,131 +1,155 @@
 'use client';
 
-import { ArrowRight, Tag, TriangleAlert } from '@tuturuuu/icons';
+import { ArrowRight } from '@tuturuuu/icons';
 import type { InventoryStorefront } from '@tuturuuu/internal-api/inventory';
 import { cn } from '@tuturuuu/utils/format';
 import type { FormEvent } from 'react';
 import { Badge } from '../badge';
-import { Button } from '../button';
 import { AccentButton } from './accent-button';
-import type { StorefrontCartEntry, StorefrontSurfaceLabels } from './types';
+import {
+  CartActions,
+  CartContents,
+  CheckoutContactFields,
+  CheckoutSection,
+} from './cart-summary-parts';
+import type {
+  StorefrontBuyerDefaults,
+  StorefrontCartEntry,
+  StorefrontSurfaceLabels,
+} from './types';
 import { formatStorefrontPrice, storefrontSurfaceClasses } from './utils';
 
+type StorefrontCartSummaryVariant = 'checkout' | 'panel' | 'popover';
+
 export function StorefrontCartSummary({
+  buyerDefaults,
   cartEntries,
   checkoutHref,
+  className,
   currency,
   isCheckout,
   isPreview,
   isSubmitting,
   labels,
+  onCheckoutOpen,
   onCheckoutSubmit,
+  onInstantCheckout,
   radius,
   storefront,
   total,
+  variant,
 }: {
+  buyerDefaults?: StorefrontBuyerDefaults;
   cartEntries: StorefrontCartEntry[];
   checkoutHref?: string;
+  className?: string;
   currency: string;
-  isCheckout: boolean;
+  isCheckout?: boolean;
   isPreview: boolean;
   isSubmitting: boolean;
   labels: StorefrontSurfaceLabels;
+  onCheckoutOpen?: () => void;
   onCheckoutSubmit?: (formData: FormData) => void;
+  onInstantCheckout?: () => void;
   radius: string;
   storefront: InventoryStorefront;
   total: number;
+  variant?: StorefrontCartSummaryVariant;
 }) {
+  const presentation = variant ?? (isCheckout ? 'checkout' : 'panel');
   const hasCart = cartEntries.length > 0;
   const isCheckoutDisabled = storefront.checkoutMode === 'disabled';
   const submitDisabled =
     !hasCart || isSubmitting || isCheckoutDisabled || !onCheckoutSubmit;
-  const canOpenCheckout = hasCart && Boolean(checkoutHref);
+  const canOpenCheckout = hasCart && Boolean(checkoutHref || onCheckoutOpen);
 
-  return (
-    <aside
-      className={cn(
-        'h-fit p-4 lg:sticky lg:top-4',
-        storefrontSurfaceClasses[storefront.surfaceStyle],
-        radius
-      )}
-    >
-      <div className="flex items-center justify-between gap-3">
-        <p className="font-semibold">{labels.cart}</p>
-        <Badge className="border-border bg-background" variant="outline">
-          {cartEntries.length}
-        </Badge>
-      </div>
-      <p className="mt-2 text-muted-foreground text-sm leading-6">
-        {labels.reservedCopy}
-      </p>
-      <div className="mt-4 grid gap-2">
-        {cartEntries.map(({ line, listing }) => (
-          <div
-            className="flex items-center justify-between gap-3 text-sm"
-            key={line.listingId}
-          >
-            <span className="min-w-0 truncate">
-              {line.quantity} x {listing.title}
-            </span>
-            <span className="font-medium">
-              {formatStorefrontPrice(listing.price * line.quantity, currency)}
-            </span>
-          </div>
-        ))}
-      </div>
-      <div className="mt-4 flex items-center justify-between border-border border-t pt-4">
-        <span className="text-muted-foreground text-sm">{labels.total}</span>
-        <span className="font-semibold">
-          {formatStorefrontPrice(total, currency)}
-        </span>
-      </div>
-      {hasCart && !isCheckoutDisabled ? (
-        <p className="mt-3 flex items-center gap-2 rounded-md border border-border border-dashed bg-muted/30 px-3 py-2 text-muted-foreground text-xs leading-5">
-          <Tag className="h-3.5 w-3.5 shrink-0" />
-          {labels.couponNote}
-        </p>
-      ) : null}
-      {!hasCart ? (
-        <p className="mt-4 flex items-center gap-2 rounded-md border border-border bg-muted/40 px-3 py-2 text-muted-foreground text-sm">
-          <TriangleAlert className="h-4 w-4" />
-          {labels.emptyCart}
-        </p>
-      ) : null}
-      {isCheckout ? (
+  if (presentation === 'checkout') {
+    return (
+      <section
+        aria-label={labels.checkout}
+        className={cn('grid gap-5', className)}
+      >
         <form
-          className="mt-4 grid gap-2"
+          className="grid gap-5"
           onSubmit={(event: FormEvent<HTMLFormElement>) => {
             event.preventDefault();
             onCheckoutSubmit?.(new FormData(event.currentTarget));
           }}
         >
-          <textarea
-            className="min-h-20 rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
-            name="note"
-            placeholder={labels.form.note}
-          />
+          <CheckoutSection
+            defaultOpen={cartEntries.length > 1}
+            meta={formatStorefrontPrice(total, currency)}
+            title={labels.orderSummary}
+          >
+            <CartContents
+              cartEntries={cartEntries}
+              currency={currency}
+              hasCart={hasCart}
+              isCheckoutDisabled={isCheckoutDisabled}
+              labels={labels}
+              total={total}
+            />
+          </CheckoutSection>
+
+          <CheckoutSection defaultOpen title={labels.contactDetails}>
+            <CheckoutContactFields
+              buyerDefaults={buyerDefaults}
+              labels={labels}
+            />
+          </CheckoutSection>
+
           <AccentButton disabled={submitDisabled} radius={radius}>
             {isSubmitting ? labels.reserving : labels.reserve}
-            <ArrowRight className="h-4 w-4" />
+            <ArrowRight className="size-4 shrink-0" />
           </AccentButton>
         </form>
-      ) : isPreview || isCheckoutDisabled ? (
-        <Button className={cn('mt-4 w-full', radius)} disabled type="button">
-          {labels.checkoutDisabled}
-        </Button>
-      ) : canOpenCheckout ? (
-        <Button asChild className={cn('mt-4 w-full', radius)}>
-          <a href={checkoutHref}>
-            {labels.checkout}
-            <ArrowRight className="h-4 w-4" />
-          </a>
-        </Button>
-      ) : (
-        <Button className={cn('mt-4 w-full', radius)} disabled type="button">
-          {labels.checkout}
-          <ArrowRight className="h-4 w-4" />
-        </Button>
+      </section>
+    );
+  }
+
+  return (
+    <section
+      aria-label={labels.cart}
+      className={cn(
+        'h-fit',
+        presentation === 'panel'
+          ? cn('p-4', storefrontSurfaceClasses[storefront.surfaceStyle], radius)
+          : 'grid gap-4',
+        className
       )}
-    </aside>
+    >
+      <div>
+        <div className="flex items-center justify-between gap-3">
+          <p className="font-semibold">{labels.cart}</p>
+          <Badge className="border-border bg-background" variant="outline">
+            {cartEntries.length}
+          </Badge>
+        </div>
+        <p className="mt-2 text-muted-foreground text-sm leading-6">
+          {labels.reservedCopy}
+        </p>
+      </div>
+
+      <CartContents
+        cartEntries={cartEntries}
+        currency={currency}
+        hasCart={hasCart}
+        isCheckoutDisabled={isCheckoutDisabled}
+        labels={labels}
+        total={total}
+      />
+
+      <CartActions
+        canOpenCheckout={canOpenCheckout}
+        checkoutHref={checkoutHref}
+        isCheckoutDisabled={isCheckoutDisabled}
+        isPreview={isPreview}
+        isSubmitting={isSubmitting}
+        labels={labels}
+        onCheckoutOpen={onCheckoutOpen}
+        onInstantCheckout={onInstantCheckout}
+        radius={radius}
+      />
+    </section>
   );
 }

package/src/components/ui/storefront/checkout-overlay.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { Loader2 } from '@tuturuuu/icons';
+
+/**
+ * Full-screen blocking overlay shown while the checkout session or embedded
+ * payment intent is opening, so the buyer sees progress instead of a frozen
+ * button.
+ */
+export function StorefrontCheckoutOverlay({ label }: { label: string }) {
+  return (
+    <div
+      aria-busy="true"
+      aria-live="assertive"
+      className="fixed inset-0 z-[100] grid place-items-center bg-background/80 backdrop-blur-sm"
+      role="status"
+    >
+      <div className="flex flex-col items-center gap-4 px-6 text-center">
+        <span className="grid size-14 place-items-center rounded-full bg-[var(--storefront-accent-soft,var(--muted))] text-[var(--storefront-accent-text,var(--primary))]">
+          <Loader2 className="size-7 animate-spin" />
+        </span>
+        <p className="font-medium text-sm">{label}</p>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/storefront/hero-panel.tsx

@@ -36,6 +36,7 @@ export function StorefrontHeroPanel({
             className="absolute inset-0 h-full w-full"
             imageUrl={heroImage}
             label={storefront.name}
+            priority
           />
         ) : (
           <div className="absolute inset-0 bg-gradient-to-br from-muted via-muted/60 to-background" />
@@ -51,14 +52,7 @@ export function StorefrontHeroPanel({
             <Store className="h-4 w-4" />
             <span>{labels.browse}</span>
           </div>
-          <h2
-            className={cn(
-              'mt-2 text-balance font-semibold tracking-normal',
-              storefront.themePreset === 'editorial'
-                ? 'text-3xl md:text-4xl'
-                : 'text-2xl'
-            )}
-          >
+          <h2 className="mt-2 text-balance font-semibold text-3xl tracking-tight md:text-4xl">
             {storefront.name}
           </h2>
           <p className="mt-2 max-w-2xl text-muted-foreground text-sm leading-6">

package/src/components/ui/storefront/image-panel.tsx

@@ -6,10 +6,13 @@ export function StorefrontImagePanel({
   className,
   imageUrl,
   label,
+  priority = false,
 }: {
   className?: string;
   imageUrl: string | null;
   label: string;
+  /** Eager-load above-the-fold images (e.g. the hero) to protect LCP. */
+  priority?: boolean;
 }) {
   if (imageUrl) {
     return (
@@ -17,6 +20,9 @@ export function StorefrontImagePanel({
       <img
         alt=""
         className={cn('w-full object-cover', className)}
+        decoding="async"
+        fetchPriority={priority ? 'high' : 'auto'}
+        loading={priority ? 'eager' : 'lazy'}
         src={imageUrl}
       />
     );

package/src/components/ui/storefront/index.ts

@@ -1,5 +1,9 @@
+export { StorefrontCheckoutOverlay } from './checkout-overlay';
+export { StorefrontProductDetail } from './product-detail';
+export { StorefrontProductDialog } from './product-dialog';
 export { StorefrontSurface } from './storefront-surface';
 export type {
+  StorefrontBuyerDefaults,
   StorefrontCartEntry,
   StorefrontCartLine,
   StorefrontSurfaceLabels,
@@ -7,6 +11,13 @@ export type {
 } from './types';
 export {
   formatStorefrontPrice,
+  getStorefrontLinePrice,
+  getStorefrontListingFromPrice,
   getStorefrontListingLimit,
+  getStorefrontListingVariants,
+  getStorefrontVariantLabel,
+  getStorefrontVariantLimit,
+  listingHasVariants,
   sanitizeStorefrontAccentColor,
+  storefrontCartLineKey,
 } from './utils';