@tuturuuu/ui 0.8.0 → 0.9.0

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

@@ -1,216 +1,155 @@
 'use client';
 
-import { ArrowRight, Tag, TriangleAlert, Zap } 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 { StorefrontImagePanel } from './image-panel';
+import {
+  CartActions,
+  CartContents,
+  CheckoutContactFields,
+  CheckoutSection,
+} from './cart-summary-parts';
 import type {
   StorefrontBuyerDefaults,
   StorefrontCartEntry,
   StorefrontSurfaceLabels,
 } from './types';
-import {
-  formatStorefrontPrice,
-  getStorefrontLinePrice,
-  getStorefrontVariantLabel,
-  storefrontCartLineKey,
-  storefrontSurfaceClasses,
-} from './utils';
+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 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';
+  const canOpenCheckout = hasCart && Boolean(checkoutHref || onCheckoutOpen);
 
-  return (
-    <aside
-      className={cn(
-        'h-fit p-4 lg:sticky lg:top-4',
-        isCheckout ? 'p-5 sm:p-6' : null,
-        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 -mr-1 grid max-h-72 gap-2.5 overflow-y-auto pr-1">
-        {cartEntries.map(({ line, listing, variant }) => {
-          const unitPrice = getStorefrontLinePrice(listing, variant);
-          const variantLabel = variant
-            ? getStorefrontVariantLabel(variant)
-            : null;
-          return (
-            <div
-              className="flex items-center gap-3 text-sm"
-              key={storefrontCartLineKey(line.listingId, line.variantId)}
-            >
-              <StorefrontImagePanel
-                className={cn('size-10 shrink-0 rounded-md', radius)}
-                imageUrl={variant?.imageUrl ?? listing.imageUrl}
-                label={listing.title}
-              />
-              <div className="min-w-0 flex-1">
-                <p className="truncate font-medium">{listing.title}</p>
-                {variantLabel ? (
-                  <p className="truncate text-muted-foreground text-xs">
-                    {variantLabel}
-                  </p>
-                ) : null}
-                <p className="truncate text-muted-foreground text-xs tabular-nums">
-                  {line.quantity} × {formatStorefrontPrice(unitPrice, currency)}
-                </p>
-              </div>
-              <span className="shrink-0 whitespace-nowrap font-medium tabular-nums">
-                {formatStorefrontPrice(unitPrice * line.quantity, currency)}
-              </span>
-            </div>
-          );
-        })}
-      </div>
-      <div className="mt-4 flex items-center justify-between gap-2 border-border border-t pt-4">
-        <span className="text-muted-foreground text-sm">{labels.total}</span>
-        <span className="shrink-0 whitespace-nowrap font-semibold tabular-nums">
-          {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-5 grid gap-3"
+          className="grid gap-5"
           onSubmit={(event: FormEvent<HTMLFormElement>) => {
             event.preventDefault();
             onCheckoutSubmit?.(new FormData(event.currentTarget));
           }}
         >
-          <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"
+          <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}
             />
-          </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"
+          </CheckoutSection>
+
+          <CheckoutSection defaultOpen title={labels.contactDetails}>
+            <CheckoutContactFields
+              buyerDefaults={buyerDefaults}
+              labels={labels}
             />
-          </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}
-          />
+          </CheckoutSection>
+
           <AccentButton disabled={submitDisabled} radius={radius}>
             {isSubmitting ? labels.reserving : labels.reserve}
             <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 ? (
-        <div className="mt-4 grid gap-2">
-          {onInstantCheckout ? (
-            <AccentButton
-              disabled={isSubmitting}
-              onClick={onInstantCheckout}
-              radius={radius}
-            >
-              <Zap className="size-4 shrink-0" />
-              {isSubmitting ? labels.reserving : labels.instantCheckout}
-            </AccentButton>
-          ) : null}
-          <Button asChild className={cn('w-full', radius)} variant="outline">
-            <a href={checkoutHref}>
-              {labels.checkout}
-              <ArrowRight className="size-4 shrink-0" />
-            </a>
-          </Button>
-        </div>
-      ) : (
-        <Button className={cn('mt-4 w-full', radius)} disabled type="button">
-          {labels.checkout}
-          <ArrowRight className="size-4 shrink-0" />
-        </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

@@ -3,10 +3,9 @@
 import { Loader2 } from '@tuturuuu/icons';
 
 /**
- * Full-screen blocking overlay shown while a checkout session is being created
- * and while the browser is redirecting to the Polar-hosted checkout. Kept
- * visible across the redirect (the page is navigating away) so the buyer always
- * sees progress instead of a frozen button.
+ * 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 (
@@ -17,7 +16,7 @@ export function StorefrontCheckoutOverlay({ label }: { label: string }) {
       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,var(--primary))]/10 text-[var(--storefront-accent,var(--primary))]">
+        <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>

package/src/components/ui/storefront/listing-card.tsx

@@ -92,7 +92,7 @@ export function StorefrontListingCard({
       <div className="min-w-0">
         <div className="flex flex-wrap items-center gap-2">
           <button
-            className="min-w-0 truncate text-left font-semibold transition hover:text-[var(--storefront-accent,var(--primary))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-default disabled:hover:text-foreground"
+            className="min-w-0 truncate text-left font-semibold transition hover:text-[var(--storefront-accent-text,var(--primary))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-default disabled:hover:text-foreground"
             disabled={!openDetail}
             onClick={openDetail}
             type="button"

package/src/components/ui/storefront/merch-sections.tsx

@@ -0,0 +1,70 @@
+import type { InventoryStorefrontSection } from '@tuturuuu/internal-api/inventory';
+import { cn } from '@tuturuuu/utils/format';
+import { StorefrontImagePanel } from './image-panel';
+import { getSafeStorefrontHttpUrl } from './utils';
+
+export function StorefrontMerchSections({
+  radius,
+  sections,
+}: {
+  radius: string;
+  sections: InventoryStorefrontSection[];
+}) {
+  const visibleSections = sections
+    .filter((section) => section.status === 'published')
+    .filter((section) => section.sectionType !== 'cover')
+    .filter((section) => {
+      const sectionHref = getSafeStorefrontHttpUrl(section.href);
+      return Boolean(
+        section.title?.trim() ||
+          section.description?.trim() ||
+          section.imageUrl?.trim() ||
+          sectionHref
+      );
+    })
+    .sort((a, b) => a.sortOrder - b.sortOrder);
+
+  if (visibleSections.length === 0) return null;
+
+  return (
+    <div className="mt-4 grid gap-3">
+      {visibleSections.map((section) => {
+        const sectionHref = getSafeStorefrontHttpUrl(section.href);
+
+        return (
+          <section
+            className={cn(
+              'grid overflow-hidden border border-border bg-card md:grid-cols-[minmax(0,1fr)_280px]',
+              radius
+            )}
+            key={section.id}
+          >
+            <div className="flex min-w-0 flex-col justify-center gap-2 p-4">
+              {section.title ? (
+                <h2 className="font-semibold text-lg">{section.title}</h2>
+              ) : null}
+              {section.description ? (
+                <p className="text-muted-foreground text-sm leading-6">
+                  {section.description}
+                </p>
+              ) : null}
+              {sectionHref ? (
+                <a
+                  className="mt-1 w-fit font-medium text-sm underline-offset-4 hover:underline"
+                  href={sectionHref}
+                >
+                  {sectionHref.replace(/^https?:\/\//u, '')}
+                </a>
+              ) : null}
+            </div>
+            <StorefrontImagePanel
+              className="min-h-36 md:min-h-full"
+              imageUrl={section.imageUrl}
+              label={section.title ?? 'Storefront section'}
+            />
+          </section>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/ui/storefront/product-detail.tsx

@@ -182,7 +182,7 @@ export function StorefrontProductDetail({
                           'inline-flex h-10 items-center justify-center border px-3 font-medium text-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',
                           radius,
                           isActive
-                            ? 'border-[var(--storefront-accent,var(--primary))] bg-[var(--storefront-accent,var(--primary))]/10 text-[var(--storefront-accent,var(--primary))]'
+                            ? 'border-[var(--storefront-accent-border,var(--border))] bg-[var(--storefront-accent-soft,var(--muted))] text-[var(--storefront-accent-text,var(--primary))]'
                             : 'border-border bg-card hover:bg-muted/45'
                         )}
                         key={value.id}

package/src/components/ui/storefront/storefront-surface.test.tsx

@@ -1,11 +1,11 @@
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import type {
   InventoryStorefront,
   InventoryStorefrontListing,
 } from '@tuturuuu/internal-api/inventory';
 import { describe, expect, it } from 'vitest';
 import { StorefrontSurface } from './storefront-surface';
-import { sanitizeStorefrontAccentColor } from './utils';
+import { formatStorefrontPrice, sanitizeStorefrontAccentColor } from './utils';
 
 const storefront: InventoryStorefront = {
   accentColor: '#abc',
@@ -56,6 +56,15 @@ const listing: InventoryStorefrontListing = {
   wsId: storefront.wsId,
 };
 
+const secondListing: InventoryStorefrontListing = {
+  ...listing,
+  id: 'listing-2',
+  price: 2500,
+  productId: 'product-2',
+  title: 'Team Workshop With Long Name',
+  unitId: 'unit-2',
+};
+
 describe('StorefrontSurface', () => {
   it('sanitizes hex accent colors only', () => {
     expect(sanitizeStorefrontAccentColor('#abc')).toBe('#aabbcc');
@@ -80,10 +89,11 @@ describe('StorefrontSurface', () => {
     expect(screen.getAllByText('Preview Store')).toHaveLength(2);
     expect(screen.getByText('No buyer listings')).toBeInTheDocument();
     expect(screen.getByText('Create a listing next.')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Cart: 0' }));
     expect(screen.getByText('Preview checkout disabled')).toBeDisabled();
   });
 
-  it('links storefront chrome back to the store and keeps the cart icon stable', () => {
+  it('links storefront chrome back to the store and opens cart from the header popover', () => {
     render(
       <StorefrontSurface
         cartHref="/preview-store/cart"
@@ -100,10 +110,68 @@ describe('StorefrontSurface', () => {
       '/preview-store'
     );
 
-    const cartLink = screen.getByRole('link', { name: 'Cart: 2' });
-    expect(cartLink).toHaveAttribute('href', '/preview-store/cart');
-    expect(cartLink).toHaveClass('h-11', 'min-w-14', 'shrink-0');
-    expect(cartLink.querySelector('svg')).toHaveClass('size-5', 'shrink-0');
+    expect(screen.queryByText('$2.00')).not.toBeInTheDocument();
+
+    const cartButton = screen.getByRole('button', { name: 'Cart: 2' });
+    expect(cartButton).toHaveClass('h-11', 'min-w-14', 'shrink-0');
+    expect(cartButton.querySelector('svg')).toHaveClass('size-5', 'shrink-0');
+
+    fireEvent.click(cartButton);
+
+    expect(screen.getByRole('region', { name: 'Cart' })).toBeInTheDocument();
+    expect(screen.getAllByText('$2.00')).toHaveLength(2);
+    expect(screen.getAllByText('1M')).toHaveLength(1);
+  });
+
+  it('keeps the compatibility cart page as a full cart review', () => {
+    render(
+      <StorefrontSurface
+        cartHref="/preview-store/cart"
+        cartLines={[{ listingId: listing.id, quantity: 2 }]}
+        checkoutHref="/preview-store/checkout"
+        listings={[listing]}
+        mode="cart"
+        onCheckoutOpen={() => undefined}
+        storefront={storefront}
+        storefrontHref="/preview-store"
+      />
+    );
+
+    expect(screen.getByRole('region', { name: 'Cart' })).toBeInTheDocument();
+    expect(screen.getByText('1:1 Mentoring')).toBeInTheDocument();
+    expect(screen.getAllByText('$2.00')).toHaveLength(2);
+    expect(screen.getByRole('button', { name: /Checkout/ })).toBeEnabled();
+  });
+
+  it('keeps long item names and large totals inside the cart row bounds', () => {
+    const largeListing: InventoryStorefrontListing = {
+      ...listing,
+      price: 123_456_789,
+      title:
+        'A very long product title with specifications, measurements, and buyer-facing detail',
+    };
+    const expectedTotal = formatStorefrontPrice(largeListing.price * 5, 'USD');
+
+    render(
+      <StorefrontSurface
+        cartLines={[{ listingId: largeListing.id, quantity: 5 }]}
+        listings={[largeListing]}
+        mode="cart"
+        storefront={storefront}
+      />
+    );
+
+    const amount = screen.getByTitle(expectedTotal);
+    expect(amount).toHaveClass(
+      'max-w-[9rem]',
+      'overflow-hidden',
+      'text-ellipsis',
+      'text-right'
+    );
+    expect(screen.getByText(largeListing.title)).toHaveClass(
+      'line-clamp-2',
+      'break-words'
+    );
   });
 
   it('prefills checkout buyer details while keeping editable form fields', () => {
@@ -113,14 +181,23 @@ describe('StorefrontSurface', () => {
           email: 'buyer@example.com',
           name: 'Sokora Buyer',
         }}
-        cartLines={[{ listingId: listing.id, quantity: 1 }]}
-        listings={[listing]}
+        cartLines={[
+          { listingId: listing.id, quantity: 1 },
+          { listingId: secondListing.id, quantity: 1 },
+        ]}
+        listings={[listing, secondListing]}
         mode="checkout"
         onCheckoutSubmit={() => undefined}
         storefront={storefront}
       />
     );
 
+    expect(
+      screen.getByRole('button', { name: /Order summary/ })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Contact details' })
+    ).toBeInTheDocument();
     expect(screen.getByLabelText('Name')).toHaveValue('Sokora Buyer');
     expect(screen.getByLabelText('Email')).toHaveValue('buyer@example.com');
     expect(screen.getByLabelText('Name')).toBeEnabled();
@@ -155,6 +232,7 @@ describe('StorefrontSurface', () => {
     );
 
     expect(screen.queryByText('Checkout disabled')).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Cart: 0' }));
     expect(screen.getByText('Checkout unavailable')).toBeDisabled();
   });
 
@@ -166,6 +244,22 @@ describe('StorefrontSurface', () => {
         storefront={{
           ...storefront,
           sections: [
+            {
+              createdAt: null,
+              description: null,
+              href: null,
+              id: 'section-empty',
+              imageUrl: null,
+              items: [],
+              metadata: {},
+              sectionType: 'promo',
+              sortOrder: 0,
+              status: 'published',
+              storefrontId: storefront.id,
+              title: null,
+              updatedAt: null,
+              wsId: storefront.wsId,
+            },
             {
               createdAt: null,
               description: null,
@@ -175,7 +269,7 @@ describe('StorefrontSurface', () => {
               items: [],
               metadata: {},
               sectionType: 'promo',
-              sortOrder: 0,
+              sortOrder: 1,
               status: 'published',
               storefrontId: storefront.id,
               title: 'Unsafe section',
@@ -191,7 +285,7 @@ describe('StorefrontSurface', () => {
               items: [],
               metadata: {},
               sectionType: 'promo',
-              sortOrder: 1,
+              sortOrder: 2,
               status: 'published',
               storefrontId: storefront.id,
               title: 'Safe section',
@@ -204,6 +298,7 @@ describe('StorefrontSurface', () => {
     );
 
     expect(screen.getByText('Safe section')).toBeInTheDocument();
+    expect(screen.queryByText('Storefront section')).not.toBeInTheDocument();
     expect(
       screen.getByRole('link', { name: 'example.com/promo' })
     ).toHaveAttribute('href', 'https://example.com/promo');