@tuturuuu/ui 0.18.0 → 0.19.0

package/src/components/ui/finance/wallets/wallets-data-table.test.tsx

@@ -105,6 +105,16 @@ describe('wallets data table infinite loading', () => {
     mocks.searchParams = new URLSearchParams();
 
     globalThis.IntersectionObserver = class IntersectionObserver {
+      readonly callback: IntersectionObserverCallback;
+      readonly options?: IntersectionObserverInit;
+
+      constructor(
+        callback: IntersectionObserverCallback,
+        options?: IntersectionObserverInit
+      ) {
+        this.callback = callback;
+        this.options = options;
+      }
       disconnect() {}
       observe() {}
       takeRecords() {

package/src/components/ui/legacy/calendar/calendar-cell.tsx

@@ -804,7 +804,7 @@ export const CalendarCell = ({ date, hour }: CalendarCellProps) => {
           maxWidth: 200,
           zIndex: 10000,
           whiteSpace: 'nowrap',
-          opacity: showTooltip ? 1 : 0,
+          opacity: 1,
           transition: 'opacity 0.15s',
         }}
       >

package/src/components/ui/storefront/accent-button.tsx

@@ -5,11 +5,13 @@ import type { ReactNode } from 'react';
 
 export function AccentButton({
   children,
+  className,
   disabled,
   onClick,
   radius,
 }: {
   children: ReactNode;
+  className?: string;
   disabled?: boolean;
   onClick?: () => void;
   radius: string;
@@ -21,7 +23,8 @@ export function AccentButton({
         'bg-primary text-primary-foreground hover:bg-primary/90',
         '[--accent-bg:var(--storefront-accent,var(--primary))] [--accent-fg:var(--storefront-accent-foreground,var(--primary-foreground))]',
         'bg-[var(--accent-bg)] text-[var(--accent-fg)] hover:opacity-90',
-        radius
+        radius,
+        className
       )}
       disabled={disabled}
       onClick={onClick}

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

@@ -16,12 +16,14 @@ type BrowseFilter = 'all' | 'bundle' | 'product';
 export function StorefrontBrowsePanel({
   compactLayout,
   emptyListings,
+  flushTop = false,
   labels,
   listings,
   renderListing,
 }: {
   compactLayout: boolean;
   emptyListings: ReactNode;
+  flushTop?: boolean;
   labels: StorefrontSurfaceLabels;
   listings: InventoryStorefrontListing[];
   renderListing: (listing: InventoryStorefrontListing) => ReactNode;
@@ -47,7 +49,10 @@ export function StorefrontBrowsePanel({
   const hasActiveFilters = filter !== 'all' || query.trim().length > 0;
 
   return (
-    <section aria-labelledby="storefront-shop-heading" className="mt-10">
+    <section
+      aria-labelledby="storefront-shop-heading"
+      className={flushTop ? undefined : 'mt-10'}
+    >
       <div className="flex flex-col gap-5 border-border border-b pb-5 lg:flex-row lg:items-end lg:justify-between">
         <div>
           <p className="font-mono text-muted-foreground text-xs uppercase tracking-[0.16em]">

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

@@ -14,6 +14,7 @@ import { AccentButton } from './accent-button';
 import type {
   StorefrontBuyerDefaults,
   StorefrontCartEntry,
+  StorefrontLinkComponent,
   StorefrontSurfaceLabels,
 } from './types';
 import {
@@ -68,6 +69,7 @@ export function CartActions({
   isPreview,
   isSubmitting,
   labels,
+  linkComponent,
   onCheckoutOpen,
   onInstantCheckout,
   radius,
@@ -78,13 +80,20 @@ export function CartActions({
   isPreview: boolean;
   isSubmitting: boolean;
   labels: StorefrontSurfaceLabels;
+  linkComponent?: StorefrontLinkComponent;
   onCheckoutOpen?: () => void;
   onInstantCheckout?: () => void;
   radius: string;
 }) {
+  const NavigationLink = linkComponent ?? 'a';
   if (isPreview || isCheckoutDisabled) {
     return (
-      <Button className={cn('w-full', radius)} disabled type="button">
+      <Button
+        className={cn('w-full', radius)}
+        disabled
+        type="button"
+        variant="secondary"
+      >
         {labels.checkoutDisabled}
       </Button>
     );
@@ -92,7 +101,12 @@ export function CartActions({
 
   if (!canOpenCheckout) {
     return (
-      <Button className={cn('w-full', radius)} disabled type="button">
+      <Button
+        className={cn('w-full', radius)}
+        disabled
+        type="button"
+        variant="secondary"
+      >
         {labels.checkout}
         <ArrowRight className="size-4 shrink-0" />
       </Button>
@@ -122,10 +136,10 @@ export function CartActions({
         </AccentButton>
       ) : (
         <Button asChild className={cn('w-full', radius)} variant="outline">
-          <a href={checkoutHref}>
+          <NavigationLink href={checkoutHref ?? '#'}>
             {labels.checkout}
             <ArrowRight className="size-4 shrink-0" />
-          </a>
+          </NavigationLink>
         </Button>
       )}
     </div>

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { ArrowRight } from '@tuturuuu/icons';
+import { ArrowRight, ShoppingCart } from '@tuturuuu/icons';
 import type { InventoryStorefront } from '@tuturuuu/internal-api/inventory';
 import { cn } from '@tuturuuu/utils/format';
 import type { FormEvent } from 'react';
@@ -15,6 +15,7 @@ import {
 import type {
   StorefrontBuyerDefaults,
   StorefrontCartEntry,
+  StorefrontLinkComponent,
   StorefrontSurfaceLabels,
 } from './types';
 import { formatStorefrontPrice, storefrontSurfaceClasses } from './utils';
@@ -31,6 +32,7 @@ export function StorefrontCartSummary({
   isPreview,
   isSubmitting,
   labels,
+  linkComponent,
   onCheckoutOpen,
   onCheckoutSubmit,
   onInstantCheckout,
@@ -48,6 +50,7 @@ export function StorefrontCartSummary({
   isPreview: boolean;
   isSubmitting: boolean;
   labels: StorefrontSurfaceLabels;
+  linkComponent?: StorefrontLinkComponent;
   onCheckoutOpen?: () => void;
   onCheckoutSubmit?: (formData: FormData) => void;
   onInstantCheckout?: () => void;
@@ -113,19 +116,31 @@ export function StorefrontCartSummary({
       className={cn(
         'h-fit',
         presentation === 'panel'
-          ? cn('p-4', storefrontSurfaceClasses[storefront.surfaceStyle], radius)
+          ? cn(
+              'grid gap-5 p-5 sm:p-6',
+              storefrontSurfaceClasses[storefront.surfaceStyle],
+              radius
+            )
           : 'grid gap-4',
         className
       )}
     >
-      <div>
-        <div className="flex items-center justify-between gap-3">
-          <p className="font-semibold">{labels.cart}</p>
+      <div className="grid gap-2">
+        <div className="flex items-center gap-3">
+          <span
+            className={cn(
+              'grid size-9 shrink-0 place-items-center border border-border bg-background',
+              radius
+            )}
+          >
+            <ShoppingCart className="size-4" />
+          </span>
+          <p className="min-w-0 flex-1 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">
+        <p className="text-pretty text-muted-foreground text-sm leading-6">
           {labels.reservedCopy}
         </p>
       </div>
@@ -146,6 +161,7 @@ export function StorefrontCartSummary({
         isPreview={isPreview}
         isSubmitting={isSubmitting}
         labels={labels}
+        linkComponent={linkComponent}
         onCheckoutOpen={onCheckoutOpen}
         onInstantCheckout={onInstantCheckout}
         radius={radius}

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

@@ -21,6 +21,8 @@ export function StorefrontHeroPanel({
 }) {
   const heroImage = storefront.coverImageUrl ?? storefront.heroImageUrl;
 
+  if (!heroImage) return null;
+
   return (
     <section
       className={cn(
@@ -38,9 +40,11 @@ export function StorefrontHeroPanel({
           <h2 className="text-balance font-semibold text-4xl tracking-[-0.035em] sm:text-5xl lg:text-6xl">
             {storefront.name}
           </h2>
-          <p className="mt-4 max-w-xl text-pretty text-muted-foreground leading-7">
-            {storefront.description ?? labels.fallbackDescription}
-          </p>
+          {storefront.description?.trim() ? (
+            <p className="mt-4 max-w-xl text-pretty text-muted-foreground leading-7">
+              {storefront.description.trim()}
+            </p>
+          ) : null}
           <div className="mt-6 flex flex-wrap gap-2">
             <Badge className="border-border bg-background" variant="outline">
               {listingsCount} {labels.product}
@@ -58,20 +62,12 @@ export function StorefrontHeroPanel({
       </div>
 
       <div className="relative min-h-64 border-border border-t md:min-h-full md:border-t-0 md:border-l">
-        {heroImage ? (
-          <StorefrontImagePanel
-            className="absolute inset-0 h-full w-full"
-            imageUrl={heroImage}
-            label={storefront.name}
-            priority
-          />
-        ) : (
-          <div className="absolute inset-0 grid place-items-center bg-muted/35">
-            <div className="grid size-24 place-items-center rounded-xl border border-border bg-background/80">
-              <Store className="size-8 text-muted-foreground" />
-            </div>
-          </div>
-        )}
+        <StorefrontImagePanel
+          className="absolute inset-0 h-full w-full"
+          imageUrl={heroImage}
+          label={storefront.name}
+          priority
+        />
       </div>
     </section>
   );

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

@@ -6,11 +6,13 @@ export type {
   StorefrontBuyerDefaults,
   StorefrontCartEntry,
   StorefrontCartLine,
+  StorefrontLinkComponent,
   StorefrontSurfaceLabels,
   StorefrontSurfaceMode,
 } from './types';
 export {
   formatStorefrontPrice,
+  getAccentStyle,
   getStorefrontLinePrice,
   getStorefrontListingFromPrice,
   getStorefrontListingLimit,

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

@@ -59,7 +59,7 @@ export function StorefrontListingCard({
       className={cn(
         surfaceClassName,
         radius,
-        'group relative overflow-hidden transition duration-200 hover:border-foreground/20 hover:shadow-foreground/5 hover:shadow-sm',
+        'group relative overflow-hidden transition duration-200 [contain-intrinsic-size:auto_420px] [content-visibility:auto] hover:border-foreground/20 hover:shadow-foreground/5 hover:shadow-sm',
         isList
           ? 'grid gap-4 p-3 sm:grid-cols-[112px_minmax(0,1fr)_auto] sm:items-center'
           : 'flex min-h-full flex-col'
@@ -106,9 +106,11 @@ export function StorefrontListingCard({
             {listing.listingType === 'bundle' ? labels.bundle : labels.product}
           </Badge>
         </div>
-        <p className="mt-1 line-clamp-2 text-muted-foreground text-sm leading-6">
-          {listing.description ?? labels.fallbackDescription}
-        </p>
+        {listing.description?.trim() ? (
+          <p className="mt-1 line-clamp-2 text-muted-foreground text-sm leading-6">
+            {listing.description.trim()}
+          </p>
+        ) : null}
         {showInventoryBadges ? (
           <p className="mt-2 text-muted-foreground text-xs">
             {limit === 0

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

@@ -20,7 +20,11 @@ import { Badge } from '../badge';
 import { Button } from '../button';
 import { AccentButton } from './accent-button';
 import { StorefrontImagePanel } from './image-panel';
-import type { StorefrontCartLine, StorefrontSurfaceLabels } from './types';
+import type {
+  StorefrontCartLine,
+  StorefrontLinkComponent,
+  StorefrontSurfaceLabels,
+} from './types';
 import {
   formatStorefrontPrice,
   getStorefrontLinePrice,
@@ -43,6 +47,7 @@ export function StorefrontProductDetail({
   currency,
   isSubmitting = false,
   labels,
+  linkComponent,
   listing,
   onBuyNow,
   onDecrement,
@@ -59,6 +64,7 @@ export function StorefrontProductDetail({
   currency: string;
   isSubmitting?: boolean;
   labels: StorefrontSurfaceLabels;
+  linkComponent?: StorefrontLinkComponent;
   listing: InventoryStorefrontListing;
   onBuyNow?: (listingId: string, variantId?: string | null) => void;
   onDecrement?: (listingId: string, variantId?: string | null) => void;
@@ -73,6 +79,7 @@ export function StorefrontProductDetail({
   showInventoryBadges: boolean;
   surfaceClassName: string;
 }) {
+  const NavigationLink = linkComponent ?? 'a';
   const options = listing.options ?? [];
   const variants = useMemo(
     () => getStorefrontListingVariants(listing),
@@ -130,13 +137,15 @@ export function StorefrontProductDetail({
   const isDialog = presentation === 'dialog';
   const isSquareTerminal = checkoutMode === 'square_terminal';
   const isPolar = checkoutMode === 'polar';
+  const description = listing.description?.trim();
+  const hasMatchedActions = canChange && Boolean(onBuyNow);
 
   return (
     <div
       className={cn(
         'grid min-w-0',
         isDialog
-          ? 'lg:grid-cols-[minmax(0,1.08fr)_minmax(22rem,0.92fr)]'
+          ? 'lg:h-[min(44rem,88dvh)] lg:grid-cols-[minmax(0,1.08fr)_minmax(22rem,0.92fr)]'
           : 'gap-6 lg:grid-cols-2'
       )}
     >
@@ -150,7 +159,7 @@ export function StorefrontProductDetail({
         <StorefrontImagePanel
           className={cn(
             isDialog
-              ? 'aspect-[4/3] min-h-72 lg:aspect-auto lg:h-full lg:min-h-[36rem]'
+              ? 'aspect-[4/3] min-h-72 lg:aspect-auto lg:h-full lg:min-h-0'
               : 'aspect-square'
           )}
           imageUrl={imageUrl}
@@ -162,8 +171,7 @@ export function StorefrontProductDetail({
       <div
         className={cn(
           'flex min-w-0 flex-col gap-5',
-          isDialog &&
-            'p-5 sm:p-7 lg:max-h-[min(44rem,90dvh)] lg:overflow-y-auto lg:p-9'
+          isDialog && 'p-5 sm:p-7 lg:h-full lg:overflow-y-auto lg:p-9'
         )}
       >
         <div className="flex flex-wrap items-center gap-2">
@@ -253,9 +261,11 @@ export function StorefrontProductDetail({
           </p>
         ) : null}
 
-        <p className="text-pretty text-muted-foreground leading-7">
-          {listing.description ?? labels.fallbackDescription}
-        </p>
+        {description ? (
+          <p className="text-pretty text-muted-foreground leading-7">
+            {description}
+          </p>
+        ) : null}
 
         {isSquareTerminal || isPolar ? (
           <div
@@ -291,14 +301,24 @@ export function StorefrontProductDetail({
           </div>
         ) : null}
 
-        <div className="mt-auto flex flex-wrap items-center gap-3 border-border border-t pt-5">
+        <div
+          className={cn(
+            'mt-auto grid w-full grid-cols-1 gap-2 border-border border-t pt-5',
+            hasMatchedActions && 'grid-cols-2'
+          )}
+        >
           {canChange ? (
             needsSelection ? (
-              <Button className={cn('h-11', radius)} disabled type="button">
+              <Button
+                className={cn('h-11 w-full', radius)}
+                disabled
+                type="button"
+                variant="secondary"
+              >
                 {labels.selectOptions}
               </Button>
             ) : cartQuantity > 0 ? (
-              <div className="flex items-center gap-1">
+              <div className="grid h-11 w-full grid-cols-[2.75rem_minmax(2.5rem,1fr)_2.75rem] items-center gap-1">
                 <Button
                   aria-label={`${labels.quantity} -`}
                   className={cn('h-11 w-11 p-0', radius)}
@@ -323,36 +343,46 @@ export function StorefrontProductDetail({
                 </Button>
               </div>
             ) : (
-              <AccentButton
+              <Button
+                className={cn('h-11 w-full', radius)}
                 disabled={addDisabled}
                 onClick={() => onIncrement?.(listing.id, limit, variantId)}
-                radius={radius}
+                type="button"
+                variant="secondary"
               >
                 <Plus className="h-4 w-4" />
                 {soldOut ? labels.soldOut : labels.add}
-              </AccentButton>
+              </Button>
             )
           ) : null}
 
           {onBuyNow ? (
-            <Button
-              className={cn('h-11', radius)}
+            <AccentButton
+              className="h-11 w-full"
               disabled={buyNowDisabled}
               onClick={() => onBuyNow(listing.id, variantId)}
-              type="button"
+              radius={radius}
             >
               <Zap className="size-4 shrink-0" />
               {labels.buyNow}
-            </Button>
+            </AccentButton>
           ) : null}
 
           {cartHref && cartQuantity > 0 ? (
-            <Button asChild className={cn('h-11', radius)} variant="outline">
-              <a href={cartHref}>
+            <Button
+              asChild
+              className={cn(
+                'h-11 w-full',
+                hasMatchedActions && 'col-span-2',
+                radius
+              )}
+              variant="outline"
+            >
+              <NavigationLink href={cartHref}>
                 <ShoppingCart className="size-4 shrink-0" />
                 {labels.cart}
                 <ArrowRight className="size-4 shrink-0" />
-              </a>
+              </NavigationLink>
             </Button>
           ) : null}
         </div>

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

@@ -3,7 +3,11 @@
 import type { InventoryStorefrontListing } from '@tuturuuu/internal-api/inventory';
 import { Dialog, DialogContent, DialogTitle } from '../dialog';
 import { StorefrontProductDetail } from './product-detail';
-import type { StorefrontCartLine, StorefrontSurfaceLabels } from './types';
+import type {
+  StorefrontCartLine,
+  StorefrontLinkComponent,
+  StorefrontSurfaceLabels,
+} from './types';
 
 /**
  * Large product detail dialog opened from a listing card. Reuses the same
@@ -17,6 +21,7 @@ export function StorefrontProductDialog({
   currency,
   isSubmitting,
   labels,
+  linkComponent,
   listing,
   onBuyNow,
   onDecrement,
@@ -32,6 +37,7 @@ export function StorefrontProductDialog({
   currency: string;
   isSubmitting?: boolean;
   labels: StorefrontSurfaceLabels;
+  linkComponent?: StorefrontLinkComponent;
   listing: InventoryStorefrontListing | null;
   onBuyNow?: (listingId: string, variantId?: string | null) => void;
   onDecrement?: (listingId: string, variantId?: string | null) => void;
@@ -58,6 +64,7 @@ export function StorefrontProductDialog({
               currency={currency}
               isSubmitting={isSubmitting}
               labels={labels}
+              linkComponent={linkComponent}
               listing={listing}
               onBuyNow={onBuyNow}
               onDecrement={onDecrement}

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', () => {