@tuturuuu/ui 0.7.0 → 0.9.0

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

@@ -1,19 +1,30 @@
 'use client';
 
-import { ShoppingCart } from '@tuturuuu/icons';
+import { ArrowLeft } from '@tuturuuu/icons';
 import type {
   InventoryStorefront,
   InventoryStorefrontListing,
-  InventoryStorefrontSection,
 } from '@tuturuuu/internal-api/inventory';
 import { cn } from '@tuturuuu/utils/format';
-import type { ReactNode } from 'react';
+import { type ReactNode, useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '../dialog';
+import { StorefrontCartPopover } from './cart-popover';
 import { StorefrontCartSummary } from './cart-summary';
+import { StorefrontCheckoutOverlay } from './checkout-overlay';
 import { StorefrontEmptyListings } from './empty-listings';
 import { StorefrontHeroPanel } from './hero-panel';
-import { StorefrontImagePanel } from './image-panel';
 import { StorefrontListingCard } from './listing-card';
+import { StorefrontMerchSections } from './merch-sections';
+import { StorefrontProductDetail } from './product-detail';
+import { StorefrontProductDialog } from './product-dialog';
 import type {
+  StorefrontBuyerDefaults,
   StorefrontCartLine,
   StorefrontSurfaceLabels,
   StorefrontSurfaceMode,
@@ -21,7 +32,9 @@ import type {
 import { mergeStorefrontSurfaceLabels } from './types';
 import {
   getAccentStyle,
+  getStorefrontLinePrice,
   getStorefrontListingLimit,
+  getStorefrontVariantLimit,
   sanitizeStorefrontAccentColor,
   storefrontRadiusClasses,
   storefrontSurfaceClasses,
@@ -29,76 +42,175 @@ import {
 } from './utils';
 
 export function StorefrontSurface({
+  buyerDefaults,
   cartLines = [],
+  cartHref,
+  checkoutOpen,
   checkoutHref,
   className,
   compactLayout = false,
+  detailListingId,
   emptyAction,
   headerActions,
   isDemo: _isDemo = false,
+  isRedirecting = false,
   isSubmitting = false,
   labels: labelOverrides,
   listings,
   mode,
   notice,
+  onBuyNow,
+  onCheckoutOpen,
+  onCheckoutOpenChange,
   onCheckoutSubmit,
   onDecrement,
+  onDetailListingChange,
   onIncrement,
+  onInstantCheckout,
   selectedListingId,
   storefront,
+  storefrontHref,
 }: {
+  buyerDefaults?: StorefrontBuyerDefaults;
   cartLines?: StorefrontCartLine[];
+  cartHref?: string;
+  checkoutOpen?: boolean;
   checkoutHref?: string;
   className?: string;
   compactLayout?: boolean;
+  detailListingId?: string | null;
   emptyAction?: ReactNode;
   headerActions?: ReactNode;
   isDemo?: boolean;
+  isRedirecting?: boolean;
   isSubmitting?: boolean;
   labels?: Partial<StorefrontSurfaceLabels>;
   listings: InventoryStorefrontListing[];
   mode: StorefrontSurfaceMode;
   notice?: ReactNode;
+  onBuyNow?: (listingId: string, variantId?: string | null) => void;
+  onCheckoutOpen?: () => void;
+  onCheckoutOpenChange?: (open: boolean) => void;
   onCheckoutSubmit?: (formData: FormData) => void;
-  onDecrement?: (listingId: string) => void;
-  onIncrement?: (listingId: string, maxQuantity: number) => void;
+  onDecrement?: (listingId: string, variantId?: string | null) => void;
+  onDetailListingChange?: (listingId: string | null) => void;
+  onIncrement?: (
+    listingId: string,
+    maxQuantity: number,
+    variantId?: string | null
+  ) => void;
+  onInstantCheckout?: () => void;
   selectedListingId?: string;
   storefront: InventoryStorefront;
+  storefrontHref?: string;
 }) {
   const labels = mergeStorefrontSurfaceLabels(labelOverrides);
+  const [isCartPopoverOpen, setIsCartPopoverOpen] = useState(false);
   const accentColor = sanitizeStorefrontAccentColor(storefront.accentColor);
   const radius = storefrontRadiusClasses[storefront.cornerStyle];
+  const resolveVariant = (
+    listing: InventoryStorefrontListing,
+    variantId?: string | null
+  ) =>
+    variantId
+      ? (listing.variants ?? []).find((variant) => variant.id === variantId)
+      : undefined;
   const cartEntries = cartLines.flatMap((line) => {
     const listing = listings.find((item) => item.id === line.listingId);
-    return listing ? [{ line, listing }] : [];
-  });
-  const checkoutEntries = cartEntries.filter(({ line, listing }) => {
-    const quantity = Math.min(
-      line.quantity,
-      getStorefrontListingLimit(listing)
-    );
-    return quantity > 0;
+    if (!listing) return [];
+    return [
+      { line, listing, variant: resolveVariant(listing, line.variantId) },
+    ];
   });
-  const total = checkoutEntries.reduce((sum, { line, listing }) => {
-    const quantity = Math.min(
-      line.quantity,
-      getStorefrontListingLimit(listing)
+  const lineLimit = (entry: (typeof cartEntries)[number]) =>
+    entry.variant
+      ? getStorefrontVariantLimit(entry.listing, entry.variant)
+      : getStorefrontListingLimit(entry.listing);
+  const checkoutEntries = cartEntries.filter(
+    (entry) => Math.min(entry.line.quantity, lineLimit(entry)) > 0
+  );
+  const total = checkoutEntries.reduce((sum, entry) => {
+    const quantity = Math.min(entry.line.quantity, lineLimit(entry));
+    return (
+      sum + getStorefrontLinePrice(entry.listing, entry.variant) * quantity
     );
-    return sum + listing.price * quantity;
   }, 0);
   const cartQuantity = cartLines.reduce((sum, line) => sum + line.quantity, 0);
+  const detailListing = detailListingId
+    ? listings.find((listing) => listing.id === detailListingId)
+    : undefined;
+  const selectedListing = selectedListingId
+    ? listings.find((listing) => listing.id === selectedListingId)
+    : undefined;
+  const isProductDetail = mode === 'product' && Boolean(selectedListing);
   const visibleListings =
     mode === 'product' && selectedListingId
       ? listings.filter((listing) => listing.id === selectedListingId)
       : listings;
   const isCheckout = mode === 'checkout';
+  const isCheckoutDialogOpen = checkoutOpen ?? isCheckout;
   const isPreview = mode === 'preview';
-  const showCartListings = mode === 'cart' || isCheckout;
-  const listingRows = showCartListings
-    ? cartEntries.map(({ listing }) => listing)
-    : visibleListings;
+  const isCartPage = mode === 'cart';
+  const listingRows = visibleListings;
   const currency = storefront.currency ?? 'USD';
+  const handleCheckoutOpen = () => {
+    setIsCartPopoverOpen(false);
+    onCheckoutOpen?.();
+  };
 
+  const cartSummary = (
+    <StorefrontCartSummary
+      buyerDefaults={buyerDefaults}
+      cartEntries={checkoutEntries}
+      checkoutHref={checkoutHref}
+      currency={currency}
+      isCheckout={false}
+      isPreview={isPreview}
+      isSubmitting={isSubmitting}
+      labels={labels}
+      onCheckoutOpen={handleCheckoutOpen}
+      onCheckoutSubmit={onCheckoutSubmit}
+      onInstantCheckout={mode === 'cart' ? onInstantCheckout : undefined}
+      radius={radius}
+      storefront={storefront}
+      total={total}
+      variant="panel"
+    />
+  );
+  const cartPopoverSummary = (
+    <StorefrontCartSummary
+      buyerDefaults={buyerDefaults}
+      cartEntries={checkoutEntries}
+      checkoutHref={checkoutHref}
+      currency={currency}
+      isPreview={isPreview}
+      isSubmitting={isSubmitting}
+      labels={labels}
+      onCheckoutOpen={handleCheckoutOpen}
+      onCheckoutSubmit={onCheckoutSubmit}
+      radius={radius}
+      storefront={storefront}
+      total={total}
+      variant="popover"
+    />
+  );
+  const checkoutDialogSummary = (
+    <StorefrontCartSummary
+      buyerDefaults={buyerDefaults}
+      cartEntries={checkoutEntries}
+      checkoutHref={checkoutHref}
+      currency={currency}
+      isCheckout
+      isPreview={isPreview}
+      isSubmitting={isSubmitting}
+      labels={labels}
+      onCheckoutSubmit={onCheckoutSubmit}
+      radius={radius}
+      storefront={storefront}
+      total={total}
+      variant="checkout"
+    />
+  );
   return (
     <main
       className={cn(
@@ -114,11 +226,21 @@ export function StorefrontSurface({
         </div>
       ) : null}
 
-      <header className="border-border border-b bg-background/90 backdrop-blur">
+      <header className="sticky top-0 z-30 border-border border-b bg-background/80 backdrop-blur-md supports-[backdrop-filter]:bg-background/65">
         <div className="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-3 px-4 py-3">
           <div className="min-w-0">
             <h1 className="truncate font-semibold text-xl">
-              {storefront.name}
+              {storefrontHref ? (
+                <a
+                  className="block truncate rounded-sm transition hover:text-[var(--storefront-accent-text,var(--primary))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+                  href={storefrontHref}
+                  title={storefront.name}
+                >
+                  {storefront.name}
+                </a>
+              ) : (
+                storefront.name
+              )}
             </h1>
             {storefront.description ? (
               <p className="mt-0.5 line-clamp-1 text-muted-foreground text-sm">
@@ -128,151 +250,164 @@ export function StorefrontSurface({
           </div>
           <div className="flex items-center gap-2">
             {headerActions}
-            <span
-              className={cn(
-                'inline-flex h-9 min-w-12 items-center justify-center gap-2 border bg-card px-3 font-medium text-sm',
-                radius
-              )}
+            <StorefrontCartPopover
+              cartQuantity={cartQuantity}
+              labels={labels}
+              onOpenChange={setIsCartPopoverOpen}
+              open={isCartPopoverOpen}
+              radius={radius}
             >
-              <ShoppingCart className="h-4 w-4" />
-              {cartQuantity}
-            </span>
+              {cartPopoverSummary}
+            </StorefrontCartPopover>
           </div>
         </div>
       </header>
 
       <section
         className={cn(
-          'mx-auto grid max-w-7xl gap-4 px-4 py-5',
-          compactLayout ? 'grid-cols-1' : 'lg:grid-cols-[minmax(0,1fr)_340px]'
+          'mx-auto max-w-7xl px-4 py-5',
+          compactLayout ? 'max-w-5xl' : null
         )}
       >
-        <div className="min-w-0">
-          <StorefrontHeroPanel
-            currency={currency}
-            labels={labels}
-            listingsCount={listings.length}
-            radius={radius}
-            storefront={storefront}
-          />
+        {isCartPage ? (
+          <div className="mx-auto max-w-2xl">{cartSummary}</div>
+        ) : (
+          <div className="min-w-0">
+            {isProductDetail && selectedListing ? (
+              <>
+                {storefrontHref ? (
+                  <a
+                    className="mb-4 inline-flex items-center gap-1.5 text-muted-foreground text-sm transition hover:text-foreground"
+                    href={storefrontHref}
+                  >
+                    <ArrowLeft aria-hidden className="size-4" />
+                    {labels.browse}
+                  </a>
+                ) : null}
+                <StorefrontProductDetail
+                  cartHref={cartHref}
+                  cartLines={cartLines}
+                  currency={currency}
+                  isSubmitting={isSubmitting}
+                  labels={labels}
+                  listing={selectedListing}
+                  onBuyNow={onBuyNow}
+                  onDecrement={onDecrement}
+                  onIncrement={onIncrement}
+                  quantity={
+                    cartLines.find(
+                      (item) => item.listingId === selectedListing.id
+                    )?.quantity ?? 0
+                  }
+                  radius={radius}
+                  showInventoryBadges={storefront.showInventoryBadges}
+                  surfaceClassName={
+                    storefrontSurfaceClasses[storefront.surfaceStyle]
+                  }
+                />
+              </>
+            ) : (
+              <>
+                <StorefrontHeroPanel
+                  currency={currency}
+                  labels={labels}
+                  listingsCount={listings.length}
+                  radius={radius}
+                  storefront={storefront}
+                />
 
-          <StorefrontMerchSections
-            radius={radius}
-            sections={storefront.sections ?? []}
-          />
+                <StorefrontMerchSections
+                  radius={radius}
+                  sections={storefront.sections ?? []}
+                />
 
-          <div
-            className={cn(
-              'mt-4',
-              compactLayout || storefront.layoutStyle === 'list'
-                ? 'grid gap-3'
-                : 'grid gap-3 sm:grid-cols-2 xl:grid-cols-3',
-              !compactLayout &&
-                storefront.layoutStyle === 'feature' &&
-                '[&>article:first-child]:sm:col-span-2'
-            )}
-          >
-            {listingRows.length === 0 ? (
-              <StorefrontEmptyListings
-                action={emptyAction}
-                labels={labels}
-                radius={radius}
-              />
-            ) : (
-              listingRows.map((listing) => {
-                const line = cartLines.find(
-                  (item) => item.listingId === listing.id
-                );
+                <div
+                  className={cn(
+                    'mt-4 grid gap-4',
+                    compactLayout
+                      ? 'sm:grid-cols-2'
+                      : 'sm:grid-cols-2 xl:grid-cols-3'
+                  )}
+                >
+                  {listingRows.length === 0 ? (
+                    <StorefrontEmptyListings
+                      action={emptyAction}
+                      labels={labels}
+                      radius={radius}
+                    />
+                  ) : (
+                    listingRows.map((listing) => {
+                      const line = cartLines.find(
+                        (item) => item.listingId === listing.id
+                      );
 
-                return (
-                  <StorefrontListingCard
-                    currency={currency}
-                    isList={storefront.layoutStyle === 'list'}
-                    key={listing.id}
-                    labels={labels}
-                    listing={listing}
-                    onDecrement={onDecrement}
-                    onIncrement={onIncrement}
-                    quantity={line?.quantity ?? 0}
-                    radius={radius}
-                    showInventoryBadges={storefront.showInventoryBadges}
-                    surfaceClassName={
-                      storefrontSurfaceClasses[storefront.surfaceStyle]
-                    }
-                  />
-                );
-              })
+                      return (
+                        <StorefrontListingCard
+                          currency={currency}
+                          isList={false}
+                          key={listing.id}
+                          labels={labels}
+                          listing={listing}
+                          onDecrement={onDecrement}
+                          onIncrement={onIncrement}
+                          onOpenDetail={
+                            onDetailListingChange
+                              ? (id) => onDetailListingChange(id)
+                              : undefined
+                          }
+                          quantity={line?.quantity ?? 0}
+                          radius={radius}
+                          showInventoryBadges={storefront.showInventoryBadges}
+                          surfaceClassName={
+                            storefrontSurfaceClasses[storefront.surfaceStyle]
+                          }
+                        />
+                      );
+                    })
+                  )}
+                </div>
+              </>
             )}
           </div>
-        </div>
-
-        <StorefrontCartSummary
-          cartEntries={checkoutEntries}
-          checkoutHref={checkoutHref}
-          currency={currency}
-          isCheckout={isCheckout}
-          isPreview={isPreview}
-          isSubmitting={isSubmitting}
-          labels={labels}
-          onCheckoutSubmit={onCheckoutSubmit}
-          radius={radius}
-          storefront={storefront}
-          total={total}
-        />
+        )}
       </section>
-    </main>
-  );
-}
-
-function StorefrontMerchSections({
-  radius,
-  sections,
-}: {
-  radius: string;
-  sections: InventoryStorefrontSection[];
-}) {
-  const visibleSections = sections
-    .filter((section) => section.status === 'published')
-    .filter((section) => section.sectionType !== 'cover')
-    .sort((a, b) => a.sortOrder - b.sortOrder);
 
-  if (visibleSections.length === 0) return null;
+      <StorefrontProductDialog
+        cartHref={cartHref}
+        cartLines={cartLines}
+        currency={currency}
+        isSubmitting={isSubmitting}
+        labels={labels}
+        listing={detailListing ?? null}
+        onBuyNow={onBuyNow}
+        onDecrement={onDecrement}
+        onIncrement={onIncrement}
+        onOpenChange={(open) => {
+          if (!open) onDetailListingChange?.(null);
+        }}
+        radius={radius}
+        showInventoryBadges={storefront.showInventoryBadges}
+        surfaceClassName={storefrontSurfaceClasses[storefront.surfaceStyle]}
+      />
 
-  return (
-    <div className="mt-4 grid gap-3">
-      {visibleSections.map((section) => (
-        <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}
-            {section.href ? (
-              <a
-                className="mt-1 w-fit font-medium text-sm underline-offset-4 hover:underline"
-                href={section.href}
-              >
-                {section.href.replace(/^https?:\/\//u, '')}
-              </a>
-            ) : null}
+      <Dialog
+        onOpenChange={(open) => onCheckoutOpenChange?.(open)}
+        open={isCheckoutDialogOpen}
+      >
+        <DialogContent className="grid max-h-[92dvh] max-w-[min(42rem,calc(100vw-1rem))] grid-rows-[auto_minmax(0,1fr)] gap-0 overflow-hidden border-border/60 p-0 shadow-2xl sm:rounded-2xl">
+          <DialogHeader className="px-5 pt-5 pb-2 text-left sm:px-6">
+            <DialogTitle>{labels.checkout}</DialogTitle>
+            <DialogDescription>{labels.reservedCopy}</DialogDescription>
+          </DialogHeader>
+          <div className="min-h-0 overflow-y-auto px-5 pt-3 pb-5 sm:px-6">
+            {checkoutDialogSummary}
           </div>
-          <StorefrontImagePanel
-            className="min-h-36 md:min-h-full"
-            imageUrl={section.imageUrl}
-            label={section.title ?? 'Storefront section'}
-          />
-        </section>
-      ))}
-    </div>
+        </DialogContent>
+      </Dialog>
+
+      {isSubmitting || isRedirecting ? (
+        <StorefrontCheckoutOverlay label={labels.redirectingToCheckout} />
+      ) : null}
+    </main>
   );
 }

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

@@ -1,13 +1,23 @@
-import type { InventoryStorefrontListing } from '@tuturuuu/internal-api/inventory';
+import type {
+  InventoryListingVariant,
+  InventoryStorefrontListing,
+} from '@tuturuuu/internal-api/inventory';
 
 export type StorefrontCartLine = {
   listingId: string;
+  variantId?: string | null;
   quantity: number;
 };
 
 export type StorefrontCartEntry = {
   line: StorefrontCartLine;
   listing: InventoryStorefrontListing;
+  variant?: InventoryListingVariant;
+};
+
+export type StorefrontBuyerDefaults = {
+  email?: string | null;
+  name?: string | null;
 };
 
 export type StorefrontSurfaceMode =
@@ -22,13 +32,21 @@ export type StorefrontSurfaceLabels = {
   available: string;
   browse: string;
   bundle: string;
+  buyNow: string;
   cart: string;
   checkout: string;
   checkoutDisabled: string;
   checkoutDisabledBadge: string;
+  contactDetails: string;
   couponNote: string;
   demoBadge: string;
   emptyCart: string;
+  fromPrice: string;
+  instantCheckout: string;
+  orderSummary: string;
+  redirectingToCheckout: string;
+  selectOptions: string;
+  viewDetails: string;
   emptyListingsDescription: string;
   emptyListingsTitle: string;
   fallbackDescription: string;
@@ -56,13 +74,21 @@ export const defaultStorefrontSurfaceLabels: StorefrontSurfaceLabels = {
   available: 'available',
   browse: 'Browse',
   bundle: 'Bundle',
+  buyNow: 'Buy now',
   cart: 'Cart',
   checkout: 'Checkout',
   checkoutDisabled: 'Checkout is disabled in preview',
   checkoutDisabledBadge: 'Checkout disabled',
+  contactDetails: 'Contact details',
   couponNote: 'Have a coupon? You can apply it at checkout.',
   demoBadge: 'Demo',
   emptyCart: 'Add a listing to start checkout.',
+  fromPrice: 'From',
+  instantCheckout: 'Instant checkout',
+  orderSummary: 'Order summary',
+  redirectingToCheckout: 'Taking you to secure checkout…',
+  selectOptions: 'Select options',
+  viewDetails: 'View details',
   emptyListingsDescription:
     'Publish a listing to make this storefront ready for buyers.',
   emptyListingsTitle: 'No listings yet',