@tuturuuu/ui 0.17.0 → 0.19.0

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

@@ -162,6 +162,22 @@ describe('StorefrontSurface', () => {
     expect(sanitizeStorefrontAccentColor('red')).toBeNull();
   });
 
+  it('omits the duplicate hero card when no cover media is configured', () => {
+    render(
+      <StorefrontSurface
+        listings={[listing]}
+        mode="store"
+        storefront={storefront}
+      />
+    );
+
+    expect(screen.getAllByText('Preview Store')).toHaveLength(1);
+    expect(screen.queryByText('Buyer-facing copy')).not.toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', { name: 'Shop' }).closest('section')
+    ).not.toHaveClass('mt-10');
+  });
+
   it('renders a preview empty state without enabling checkout', () => {
     render(
       <StorefrontSurface
@@ -176,7 +192,7 @@ describe('StorefrontSurface', () => {
       />
     );
 
-    expect(screen.getAllByText('Preview Store')).toHaveLength(2);
+    expect(screen.getAllByText('Preview Store')).toHaveLength(1);
     expect(screen.getByText('No buyer listings')).toBeInTheDocument();
     expect(screen.getByText('Create a listing next.')).toBeInTheDocument();
     fireEvent.click(screen.getByRole('button', { name: 'Cart: 0' }));
@@ -244,6 +260,7 @@ describe('StorefrontSurface', () => {
   it('opens a wide, readable Square Terminal product dialog', () => {
     const longListing = {
       ...listing,
+      description: null,
       title: 'Shikishi Board (8.8 x 10 inches, 253 mm x 225 mm)',
     };
 
@@ -252,6 +269,7 @@ describe('StorefrontSurface', () => {
         detailListingId={longListing.id}
         labels={{
           buyNow: 'Pay at terminal',
+          fallbackDescription: 'Available from this workspace storefront.',
           squareTerminal: 'Square Terminal',
           squareTerminalDescription: 'Finish payment on the counter device.',
         }}
@@ -259,6 +277,7 @@ describe('StorefrontSurface', () => {
         mode="store"
         onBuyNow={() => undefined}
         onDetailListingChange={() => undefined}
+        onIncrement={() => undefined}
         storefront={{ ...storefront, checkoutMode: 'square_terminal' }}
       />
     );
@@ -283,6 +302,16 @@ describe('StorefrontSurface', () => {
     expect(
       screen.getByRole('button', { name: 'Pay at terminal' })
     ).toBeEnabled();
+    expect(
+      screen.queryByText('Available from this workspace storefront.')
+    ).not.toBeInTheDocument();
+
+    const addButton = screen.getByRole('button', { name: 'Add' });
+    const payButton = screen.getByRole('button', { name: 'Pay at terminal' });
+    expect(addButton).toHaveClass('h-11', 'w-full', 'bg-secondary');
+    expect(payButton).toHaveClass('h-11', 'w-full');
+    expect(addButton.parentElement).toBe(payButton.parentElement);
+    expect(addButton.parentElement).toHaveClass('grid-cols-2');
   });
 
   it('keeps the compatibility cart page as a full cart review', () => {
@@ -299,7 +328,12 @@ describe('StorefrontSurface', () => {
       />
     );
 
-    expect(screen.getByRole('region', { name: 'Cart' })).toBeInTheDocument();
+    expect(screen.getByRole('region', { name: 'Cart' })).toHaveClass(
+      'grid',
+      'gap-5',
+      'p-5',
+      'sm:p-6'
+    );
     expect(screen.getByText('1:1 Mentoring')).toBeInTheDocument();
     expect(screen.getAllByText('$2.00')).toHaveLength(2);
     expect(screen.getByRole('button', { name: /Checkout/ })).toBeEnabled();
@@ -379,6 +413,48 @@ describe('StorefrontSurface', () => {
     );
   });
 
+  it('keeps a configured bundle fixed price independent of component count', () => {
+    const fixedBundle: InventoryBundle = {
+      ...categoryBundle,
+      id: 'fixed-bundle',
+      name: 'Three for two dollars',
+      price: 200,
+      pricingMode: 'fixed_price',
+    };
+    const fixedListing: InventoryStorefrontListing = {
+      ...bundleListing,
+      bundleId: fixedBundle.id,
+      id: 'fixed-bundle-listing',
+      price: 200,
+      title: fixedBundle.name,
+    };
+
+    render(
+      <StorefrontSurface
+        bundles={[fixedBundle]}
+        cartLines={[
+          {
+            bundleSelections: {
+              'component-keychains': [
+                { listingId: 'listing-keychain-a', quantity: 1 },
+                { listingId: 'listing-keychain-b', quantity: 1 },
+                { listingId: 'listing-keychain-c', quantity: 1 },
+              ],
+            },
+            listingId: fixedListing.id,
+            quantity: 1,
+          },
+        ]}
+        listings={[fixedListing]}
+        mode="cart"
+        storefront={storefront}
+      />
+    );
+
+    expect(screen.getAllByText('$2.00').length).toBeGreaterThan(0);
+    expect(screen.queryByText('$27.00')).not.toBeInTheDocument();
+  });
+
   it('prefills checkout buyer details while keeping editable form fields', () => {
     render(
       <StorefrontSurface
@@ -420,7 +496,7 @@ describe('StorefrontSurface', () => {
     );
 
     expect(screen.queryByText('Simulated checkout')).not.toBeInTheDocument();
-    expect(screen.getAllByText('Preview Store')).toHaveLength(2);
+    expect(screen.getAllByText('Preview Store')).toHaveLength(1);
   });
 
   it('blocks disabled checkout without showing checkout mode badges', () => {

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

@@ -7,7 +7,7 @@ import type {
   InventoryStorefrontListing,
 } from '@tuturuuu/internal-api/inventory';
 import { cn } from '@tuturuuu/utils/format';
-import { type ReactNode, useState } from 'react';
+import { type ReactNode, useMemo, useState } from 'react';
 import {
   Dialog,
   DialogContent,
@@ -29,6 +29,7 @@ import { StorefrontProductDialog } from './product-dialog';
 import type {
   StorefrontBuyerDefaults,
   StorefrontCartLine,
+  StorefrontLinkComponent,
   StorefrontSurfaceLabels,
   StorefrontSurfaceMode,
 } from './types';
@@ -59,6 +60,7 @@ export function StorefrontSurface({
   isDemo: _isDemo = false,
   isRedirecting = false,
   isSubmitting = false,
+  linkComponent,
   labels: labelOverrides,
   listings,
   mode,
@@ -75,6 +77,7 @@ export function StorefrontSurface({
   selectedListingId,
   storefront,
   storefrontHref,
+  withinSharedShell = false,
 }: {
   bundles?: InventoryBundle[];
   buyerDefaults?: StorefrontBuyerDefaults;
@@ -90,6 +93,7 @@ export function StorefrontSurface({
   isDemo?: boolean;
   isRedirecting?: boolean;
   isSubmitting?: boolean;
+  linkComponent?: StorefrontLinkComponent;
   labels?: Partial<StorefrontSurfaceLabels>;
   listings: InventoryStorefrontListing[];
   mode: StorefrontSurfaceMode;
@@ -110,77 +114,112 @@ export function StorefrontSurface({
   selectedListingId?: string;
   storefront: InventoryStorefront;
   storefrontHref?: string;
+  withinSharedShell?: boolean;
 }) {
   const labels = mergeStorefrontSurfaceLabels(labelOverrides);
+  const NavigationLink = linkComponent ?? 'a';
   const [isCartPopoverOpen, setIsCartPopoverOpen] = useState(false);
   const [bundleSelectionListingId, setBundleSelectionListingId] = useState<
     string | null
   >(null);
   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);
-    if (!listing) return [];
-    return [
-      {
-        bundle: listing.bundleId
-          ? bundles.find((bundle) => bundle.id === listing.bundleId)
-          : undefined,
-        line,
-        listing,
-        variant: resolveVariant(listing, line.variantId),
-      },
-    ];
-  });
-  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 listingsById = useMemo(
+    () => new Map(listings.map((listing) => [listing.id, listing])),
+    [listings]
+  );
+  const bundlesById = useMemo(
+    () => new Map(bundles.map((bundle) => [bundle.id, bundle])),
+    [bundles]
+  );
+  const cartEntries = useMemo(
+    () =>
+      cartLines.flatMap((line) => {
+        const listing = listingsById.get(line.listingId);
+        if (!listing) return [];
+        return [
+          {
+            bundle: listing.bundleId
+              ? bundlesById.get(listing.bundleId)
+              : undefined,
+            line,
+            listing,
+            variant: line.variantId
+              ? (listing.variants ?? []).find(
+                  (variant) => variant.id === line.variantId
+                )
+              : undefined,
+          },
+        ];
+      }),
+    [bundlesById, cartLines, listingsById]
+  );
+  const checkoutEntries = useMemo(
+    () =>
+      cartEntries.filter((entry) => {
+        const limit = entry.variant
+          ? getStorefrontVariantLimit(entry.listing, entry.variant)
+          : getStorefrontListingLimit(entry.listing);
+        return Math.min(entry.line.quantity, limit) > 0;
+      }),
+    [cartEntries]
+  );
+  const total = useMemo(
+    () =>
+      checkoutEntries.reduce((sum, entry) => {
+        const limit = entry.variant
+          ? getStorefrontVariantLimit(entry.listing, entry.variant)
+          : getStorefrontListingLimit(entry.listing);
+        const quantity = Math.min(entry.line.quantity, limit);
+        return (
+          sum +
+          getStorefrontCartLineSubtotal({
+            bundle: entry.bundle,
+            line: { ...entry.line, quantity },
+            listing: entry.listing,
+            variant: entry.variant,
+          })
+        );
+      }, 0),
+    [checkoutEntries]
+  );
+  const cartQuantityByListing = useMemo(() => {
+    const quantities = new Map<string, number>();
+
+    for (const line of cartLines) {
+      quantities.set(
+        line.listingId,
+        (quantities.get(line.listingId) ?? 0) + line.quantity
+      );
+    }
+
+    return quantities;
+  }, [cartLines]);
+  const cartQuantity = useMemo(
+    () => cartLines.reduce((sum, line) => sum + line.quantity, 0),
+    [cartLines]
   );
-  const total = checkoutEntries.reduce((sum, entry) => {
-    const quantity = Math.min(entry.line.quantity, lineLimit(entry));
-    return (
-      sum +
-      getStorefrontCartLineSubtotal({
-        bundle: entry.bundle,
-        line: { ...entry.line, quantity },
-        listing: entry.listing,
-        variant: entry.variant,
-      })
-    );
-  }, 0);
-  const cartQuantity = cartLines.reduce((sum, line) => sum + line.quantity, 0);
   const detailListing = detailListingId
-    ? listings.find((listing) => listing.id === detailListingId)
+    ? listingsById.get(detailListingId)
     : undefined;
   const selectedListing = selectedListingId
-    ? listings.find((listing) => listing.id === selectedListingId)
+    ? listingsById.get(selectedListingId)
     : undefined;
   const isProductDetail = mode === 'product' && Boolean(selectedListing);
-  const visibleListings =
-    mode === 'product' && selectedListingId
-      ? listings.filter((listing) => listing.id === selectedListingId)
-      : listings;
+  const visibleListings = useMemo(
+    () =>
+      mode === 'product' && selectedListing ? [selectedListing] : listings,
+    [listings, mode, selectedListing]
+  );
   const isCheckout = mode === 'checkout';
   const isCheckoutDialogOpen = checkoutOpen ?? isCheckout;
   const isPreview = mode === 'preview';
   const isCartPage = mode === 'cart';
   const bundleSelectionListing = bundleSelectionListingId
-    ? listings.find((listing) => listing.id === bundleSelectionListingId)
+    ? listingsById.get(bundleSelectionListingId)
     : null;
   const bundleSelectionBundle = bundleSelectionListing?.bundleId
-    ? (bundles.find(
-        (bundle) => bundle.id === bundleSelectionListing.bundleId
-      ) ?? null)
+    ? (bundlesById.get(bundleSelectionListing.bundleId) ?? null)
     : null;
   const currency = storefront.currency ?? 'USD';
   const handleCheckoutOpen = () => {
@@ -198,6 +237,7 @@ export function StorefrontSurface({
       isPreview={isPreview}
       isSubmitting={isSubmitting}
       labels={labels}
+      linkComponent={linkComponent}
       onCheckoutOpen={handleCheckoutOpen}
       onCheckoutSubmit={onCheckoutSubmit}
       onInstantCheckout={mode === 'cart' ? onInstantCheckout : undefined}
@@ -216,6 +256,7 @@ export function StorefrontSurface({
       isPreview={isPreview}
       isSubmitting={isSubmitting}
       labels={labels}
+      linkComponent={linkComponent}
       onCheckoutOpen={handleCheckoutOpen}
       onCheckoutSubmit={onCheckoutSubmit}
       radius={radius}
@@ -234,6 +275,7 @@ export function StorefrontSurface({
       isPreview={isPreview}
       isSubmitting={isSubmitting}
       labels={labels}
+      linkComponent={linkComponent}
       onCheckoutSubmit={onCheckoutSubmit}
       radius={radius}
       storefront={storefront}
@@ -244,7 +286,9 @@ export function StorefrontSurface({
   return (
     <main
       className={cn(
-        'min-h-dvh bg-background text-foreground',
+        withinSharedShell
+          ? 'min-h-[calc(100dvh-4.3125rem)] bg-background text-foreground'
+          : 'min-h-dvh bg-background text-foreground',
         storefrontThemeClasses[storefront.themePreset],
         className
       )}
@@ -256,51 +300,53 @@ export function StorefrontSurface({
         </div>
       ) : null}
 
-      <header className="sticky top-0 z-30 border-border border-b bg-background/95 backdrop-blur-md supports-[backdrop-filter]:bg-background/85">
-        <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-5 py-3 sm:px-6">
-          <div className="min-w-0">
-            <h1 className="truncate font-semibold text-base tracking-tight">
-              {storefrontHref ? (
-                <a
-                  className="flex min-w-0 items-center gap-3 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}
-                >
-                  <span
-                    aria-hidden
-                    className="grid size-8 shrink-0 place-items-center rounded-lg border border-border bg-muted/35 font-mono text-xs uppercase"
-                  >
-                    {storefront.name.slice(0, 1)}
-                  </span>
-                  <span className="truncate">{storefront.name}</span>
-                </a>
-              ) : (
-                <span className="flex min-w-0 items-center gap-3">
-                  <span
-                    aria-hidden
-                    className="grid size-8 shrink-0 place-items-center rounded-lg border border-border bg-muted/35 font-mono text-xs uppercase"
+      {withinSharedShell ? null : (
+        <header className="sticky top-0 z-30 border-border border-b bg-background/95 backdrop-blur-md supports-[backdrop-filter]:bg-background/85">
+          <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-5 py-3 sm:px-6">
+            <div className="min-w-0">
+              <h1 className="truncate font-semibold text-base tracking-tight">
+                {storefrontHref ? (
+                  <NavigationLink
+                    className="flex min-w-0 items-center gap-3 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.slice(0, 1)}
+                    <span
+                      aria-hidden
+                      className="grid size-8 shrink-0 place-items-center rounded-lg border border-border bg-muted/35 font-mono text-xs uppercase"
+                    >
+                      {storefront.name.slice(0, 1)}
+                    </span>
+                    <span className="truncate">{storefront.name}</span>
+                  </NavigationLink>
+                ) : (
+                  <span className="flex min-w-0 items-center gap-3">
+                    <span
+                      aria-hidden
+                      className="grid size-8 shrink-0 place-items-center rounded-lg border border-border bg-muted/35 font-mono text-xs uppercase"
+                    >
+                      {storefront.name.slice(0, 1)}
+                    </span>
+                    <span className="truncate">{storefront.name}</span>
                   </span>
-                  <span className="truncate">{storefront.name}</span>
-                </span>
-              )}
-            </h1>
+                )}
+              </h1>
+            </div>
+            <div className="flex items-center gap-2">
+              {headerActions}
+              <StorefrontCartPopover
+                cartQuantity={cartQuantity}
+                labels={labels}
+                onOpenChange={setIsCartPopoverOpen}
+                open={isCartPopoverOpen}
+                radius={radius}
+              >
+                {cartPopoverSummary}
+              </StorefrontCartPopover>
+            </div>
           </div>
-          <div className="flex items-center gap-2">
-            {headerActions}
-            <StorefrontCartPopover
-              cartQuantity={cartQuantity}
-              labels={labels}
-              onOpenChange={setIsCartPopoverOpen}
-              open={isCartPopoverOpen}
-              radius={radius}
-            >
-              {cartPopoverSummary}
-            </StorefrontCartPopover>
-          </div>
-        </div>
-      </header>
+        </header>
+      )}
 
       <section
         className={cn(
@@ -315,13 +361,13 @@ export function StorefrontSurface({
             {isProductDetail && selectedListing ? (
               <>
                 {storefrontHref ? (
-                  <a
+                  <NavigationLink
                     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>
+                  </NavigationLink>
                 ) : null}
                 <StorefrontProductDetail
                   cartHref={cartHref}
@@ -330,6 +376,7 @@ export function StorefrontSurface({
                   currency={currency}
                   isSubmitting={isSubmitting}
                   labels={labels}
+                  linkComponent={linkComponent}
                   listing={selectedListing}
                   onBuyNow={onBuyNow}
                   onDecrement={onDecrement}
@@ -370,15 +417,18 @@ export function StorefrontSurface({
                       radius={radius}
                     />
                   }
+                  flushTop={
+                    !storefront.coverImageUrl &&
+                    !storefront.heroImageUrl &&
+                    (storefront.sections?.length ?? 0) === 0
+                  }
                   labels={labels}
                   listings={visibleListings}
                   renderListing={(listing) => {
                     const listingBundle = listing.bundleId
-                      ? bundles.find((bundle) => bundle.id === listing.bundleId)
+                      ? bundlesById.get(listing.bundleId)
                       : undefined;
-                    const quantity = cartLines
-                      .filter((item) => item.listingId === listing.id)
-                      .reduce((sum, item) => sum + item.quantity, 0);
+                    const quantity = cartQuantityByListing.get(listing.id) ?? 0;
 
                     return (
                       <StorefrontListingCard
@@ -422,6 +472,7 @@ export function StorefrontSurface({
         currency={currency}
         isSubmitting={isSubmitting}
         labels={labels}
+        linkComponent={linkComponent}
         listing={detailListing ?? null}
         onBuyNow={onBuyNow}
         onDecrement={onDecrement}

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

@@ -4,6 +4,9 @@ import type {
   InventoryListingVariant,
   InventoryStorefrontListing,
 } from '@tuturuuu/internal-api/inventory';
+import type { ElementType } from 'react';
+
+export type StorefrontLinkComponent = ElementType<{ href: string }>;
 
 export type StorefrontCartLine = {
   listingId: string;

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

@@ -187,7 +187,11 @@ export function getStorefrontBundleSelectionSubtotal(
   bundle: InventoryBundle | undefined,
   line: StorefrontCartLine
 ) {
-  if (!bundle?.categoryComponents?.length || !line.bundleSelections) {
+  if (
+    !bundle?.categoryComponents?.length ||
+    !line.bundleSelections ||
+    bundle.pricingMode === 'fixed_price'
+  ) {
     return null;
   }