@tuturuuu/ui 0.16.0 → 0.17.0

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

@@ -213,6 +213,78 @@ describe('StorefrontSurface', () => {
     expect(screen.getAllByText('1M')).toHaveLength(1);
   });
 
+  it('filters and searches the buyer catalog without losing the store context', () => {
+    render(
+      <StorefrontSurface
+        bundles={[categoryBundle]}
+        listings={[listing, bundleListing]}
+        mode="store"
+        storefront={storefront}
+      />
+    );
+
+    expect(screen.getByText('1:1 Mentoring')).toBeInTheDocument();
+    expect(screen.getByText('Buy 2 Get 1 Keychains')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Bundles' }));
+    expect(screen.queryByText('1:1 Mentoring')).not.toBeInTheDocument();
+    expect(screen.getByText('Buy 2 Get 1 Keychains')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('tab', { name: 'All' }));
+    fireEvent.change(
+      screen.getByRole('searchbox', { name: 'Search this store' }),
+      {
+        target: { value: '1:1' },
+      }
+    );
+    expect(screen.getByText('1:1 Mentoring')).toBeInTheDocument();
+    expect(screen.queryByText('Buy 2 Get 1 Keychains')).not.toBeInTheDocument();
+  });
+
+  it('opens a wide, readable Square Terminal product dialog', () => {
+    const longListing = {
+      ...listing,
+      title: 'Shikishi Board (8.8 x 10 inches, 253 mm x 225 mm)',
+    };
+
+    render(
+      <StorefrontSurface
+        detailListingId={longListing.id}
+        labels={{
+          buyNow: 'Pay at terminal',
+          squareTerminal: 'Square Terminal',
+          squareTerminalDescription: 'Finish payment on the counter device.',
+        }}
+        listings={[longListing]}
+        mode="store"
+        onBuyNow={() => undefined}
+        onDetailListingChange={() => undefined}
+        storefront={{ ...storefront, checkoutMode: 'square_terminal' }}
+      />
+    );
+
+    expect(screen.getByRole('dialog')).toHaveClass(
+      'sm:max-w-6xl',
+      'overflow-hidden',
+      'p-0'
+    );
+    const visibleHeading = screen
+      .getAllByRole('heading', { name: longListing.title })
+      .find((heading) => !heading.classList.contains('sr-only'));
+    expect(visibleHeading).toHaveClass(
+      'break-words',
+      'text-2xl',
+      'sm:text-3xl'
+    );
+    expect(screen.getByText('Square Terminal')).toBeInTheDocument();
+    expect(
+      screen.getByText('Finish payment on the counter device.')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Pay at terminal' })
+    ).toBeEnabled();
+  });
+
   it('keeps the compatibility cart page as a full cart review', () => {
     render(
       <StorefrontSurface

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

@@ -15,6 +15,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '../dialog';
+import { StorefrontBrowsePanel } from './browse-panel';
 import { StorefrontBundleSelectionDialog } from './bundle-selection-dialog';
 import { StorefrontCartPopover } from './cart-popover';
 import { StorefrontCartSummary } from './cart-summary';
@@ -173,7 +174,6 @@ export function StorefrontSurface({
   const isCheckoutDialogOpen = checkoutOpen ?? isCheckout;
   const isPreview = mode === 'preview';
   const isCartPage = mode === 'cart';
-  const listingRows = visibleListings;
   const bundleSelectionListing = bundleSelectionListingId
     ? listings.find((listing) => listing.id === bundleSelectionListingId)
     : null;
@@ -256,27 +256,36 @@ export function StorefrontSurface({
         </div>
       ) : null}
 
-      <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">
+      <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-xl">
+            <h1 className="truncate font-semibold text-base tracking-tight">
               {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"
+                  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}
+                  <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>
               ) : (
-                storefront.name
+                <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>
               )}
             </h1>
-            {storefront.description ? (
-              <p className="mt-0.5 line-clamp-1 text-muted-foreground text-sm">
-                {storefront.description}
-              </p>
-            ) : null}
           </div>
           <div className="flex items-center gap-2">
             {headerActions}
@@ -295,7 +304,7 @@ export function StorefrontSurface({
 
       <section
         className={cn(
-          'mx-auto max-w-7xl px-4 py-5',
+          'mx-auto max-w-7xl px-5 py-8 sm:px-6 sm:py-10',
           compactLayout ? 'max-w-5xl' : null
         )}
       >
@@ -317,6 +326,7 @@ export function StorefrontSurface({
                 <StorefrontProductDetail
                   cartHref={cartHref}
                   cartLines={cartLines}
+                  checkoutMode={storefront.checkoutMode}
                   currency={currency}
                   isSubmitting={isSubmitting}
                   labels={labels}
@@ -351,61 +361,54 @@ export function StorefrontSurface({
                   sections={storefront.sections ?? []}
                 />
 
-                <div
-                  className={cn(
-                    'mt-4 grid gap-4',
-                    compactLayout
-                      ? 'sm:grid-cols-2'
-                      : 'sm:grid-cols-2 xl:grid-cols-3'
-                  )}
-                >
-                  {listingRows.length === 0 ? (
+                <StorefrontBrowsePanel
+                  compactLayout={compactLayout}
+                  emptyListings={
                     <StorefrontEmptyListings
                       action={emptyAction}
                       labels={labels}
                       radius={radius}
                     />
-                  ) : (
-                    listingRows.map((listing) => {
-                      const listingBundle = listing.bundleId
-                        ? bundles.find(
-                            (bundle) => bundle.id === listing.bundleId
-                          )
-                        : undefined;
-                      const quantity = cartLines
-                        .filter((item) => item.listingId === listing.id)
-                        .reduce((sum, item) => sum + item.quantity, 0);
+                  }
+                  labels={labels}
+                  listings={visibleListings}
+                  renderListing={(listing) => {
+                    const listingBundle = listing.bundleId
+                      ? bundles.find((bundle) => bundle.id === listing.bundleId)
+                      : undefined;
+                    const quantity = cartLines
+                      .filter((item) => item.listingId === listing.id)
+                      .reduce((sum, item) => sum + item.quantity, 0);
 
-                      return (
-                        <StorefrontListingCard
-                          currency={currency}
-                          isList={false}
-                          key={listing.id}
-                          labels={labels}
-                          listing={listing}
-                          onDecrement={onDecrement}
-                          onConfigureBundle={
-                            listingBundle?.categoryComponents.length
-                              ? () => setBundleSelectionListingId(listing.id)
-                              : undefined
-                          }
-                          onIncrement={onIncrement}
-                          onOpenDetail={
-                            onDetailListingChange
-                              ? (id) => onDetailListingChange(id)
-                              : undefined
-                          }
-                          quantity={quantity}
-                          radius={radius}
-                          showInventoryBadges={storefront.showInventoryBadges}
-                          surfaceClassName={
-                            storefrontSurfaceClasses[storefront.surfaceStyle]
-                          }
-                        />
-                      );
-                    })
-                  )}
-                </div>
+                    return (
+                      <StorefrontListingCard
+                        currency={currency}
+                        isList={false}
+                        key={listing.id}
+                        labels={labels}
+                        listing={listing}
+                        onDecrement={onDecrement}
+                        onConfigureBundle={
+                          listingBundle?.categoryComponents.length
+                            ? () => setBundleSelectionListingId(listing.id)
+                            : undefined
+                        }
+                        onIncrement={onIncrement}
+                        onOpenDetail={
+                          onDetailListingChange
+                            ? (id) => onDetailListingChange(id)
+                            : undefined
+                        }
+                        quantity={quantity}
+                        radius={radius}
+                        showInventoryBadges={storefront.showInventoryBadges}
+                        surfaceClassName={
+                          storefrontSurfaceClasses[storefront.surfaceStyle]
+                        }
+                      />
+                    );
+                  }}
+                />
               </>
             )}
           </div>
@@ -415,6 +418,7 @@ export function StorefrontSurface({
       <StorefrontProductDialog
         cartHref={cartHref}
         cartLines={cartLines}
+        checkoutMode={storefront.checkoutMode}
         currency={currency}
         isSubmitting={isSubmitting}
         labels={labels}
@@ -453,7 +457,7 @@ export function StorefrontSurface({
         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">
+        <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 p-0 shadow-sm sm:rounded-xl">
           <DialogHeader className="px-5 pt-5 pb-2 text-left sm:px-6">
             <DialogTitle>{labels.checkout}</DialogTitle>
             <DialogDescription>{labels.reservedCopy}</DialogDescription>

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

@@ -34,9 +34,11 @@ export type StorefrontSurfaceMode =
 
 export type StorefrontSurfaceLabels = {
   add: string;
+  allItems: string;
   available: string;
   browse: string;
   bundle: string;
+  bundles: string;
   bundleSelectionTitle: string;
   buyNow: string;
   cart: string;
@@ -44,6 +46,7 @@ export type StorefrontSurfaceLabels = {
   checkout: string;
   checkoutDisabled: string;
   checkoutDisabledBadge: string;
+  clearFilters: string;
   contactDetails: string;
   couponNote: string;
   demoBadge: string;
@@ -51,15 +54,20 @@ export type StorefrontSurfaceLabels = {
   fromPrice: string;
   instantCheckout: string;
   orderSummary: string;
+  onlineCheckout: string;
+  onlineCheckoutDescription: string;
   redirectingToCheckout: string;
   requiredItems: string;
   selectOptions: string;
   searchBundleItems: string;
+  searchStore: string;
   selectedItems: string;
   viewDetails: string;
   emptyListingsDescription: string;
   emptyListingsTitle: string;
   fallbackDescription: string;
+  noResultsDescription: string;
+  noResultsTitle: string;
   form: {
     email: string;
     name: string;
@@ -69,6 +77,7 @@ export type StorefrontSurfaceLabels = {
   privateStore: string;
   previewBadge: string;
   product: string;
+  products: string;
   publicStore: string;
   quantity: string;
   reserve: string;
@@ -76,14 +85,20 @@ export type StorefrontSurfaceLabels = {
   reservedCopy: string;
   simulatedBadge: string;
   soldOut: string;
+  squareTerminal: string;
+  squareTerminalDescription: string;
+  shopTitle: string;
   total: string;
+  visibleItems: string;
 };
 
 export const defaultStorefrontSurfaceLabels: StorefrontSurfaceLabels = {
   add: 'Add',
+  allItems: 'All',
   available: 'available',
   browse: 'Browse',
   bundle: 'Bundle',
+  bundles: 'Bundles',
   bundleSelectionTitle: 'Build bundle',
   buyNow: 'Buy now',
   cart: 'Cart',
@@ -91,6 +106,7 @@ export const defaultStorefrontSurfaceLabels: StorefrontSurfaceLabels = {
   checkout: 'Checkout',
   checkoutDisabled: 'Checkout is disabled in preview',
   checkoutDisabledBadge: 'Checkout disabled',
+  clearFilters: 'Clear filters',
   contactDetails: 'Contact details',
   couponNote: 'Have a coupon? You can apply it at checkout.',
   demoBadge: 'Demo',
@@ -98,16 +114,22 @@ export const defaultStorefrontSurfaceLabels: StorefrontSurfaceLabels = {
   fromPrice: 'From',
   instantCheckout: 'Instant checkout',
   orderSummary: 'Order summary',
+  onlineCheckout: 'Secure online checkout',
+  onlineCheckoutDescription:
+    'Continue to Polar to complete payment securely online.',
   redirectingToCheckout: 'Taking you to secure checkout…',
   requiredItems: 'Select {count} items',
   selectOptions: 'Select options',
   searchBundleItems: 'Search items',
+  searchStore: 'Search this store',
   selectedItems: '{selected} of {required} selected',
   viewDetails: 'View details',
   emptyListingsDescription:
     'Publish a listing to make this storefront ready for buyers.',
   emptyListingsTitle: 'No listings yet',
   fallbackDescription: 'This listing is available for checkout.',
+  noResultsDescription: 'Try another search or show every item.',
+  noResultsTitle: 'No matching items',
   form: {
     email: 'Email',
     name: 'Name',
@@ -117,6 +139,7 @@ export const defaultStorefrontSurfaceLabels: StorefrontSurfaceLabels = {
   privateStore: 'Private',
   previewBadge: 'Preview',
   product: 'Product',
+  products: 'Products',
   publicStore: 'Public',
   quantity: 'Qty',
   reserve: 'Reserve with Polar',
@@ -125,7 +148,12 @@ export const defaultStorefrontSurfaceLabels: StorefrontSurfaceLabels = {
     'Review your cart, then continue with the available checkout mode.',
   simulatedBadge: 'Simulated checkout',
   soldOut: 'Sold out',
+  squareTerminal: 'Square Terminal',
+  squareTerminalDescription:
+    'Complete payment in person on the paired terminal at the counter.',
+  shopTitle: 'Shop',
   total: 'Total',
+  visibleItems: '{count} items',
 };
 
 export function mergeStorefrontSurfaceLabels(

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

@@ -15,8 +15,8 @@ import type { StorefrontCartLine } from './types';
 // in the data model for backwards compatibility, but every value resolves to the
 // same refined look so the experience is consistent across all storefronts.
 
-/** One soft, modern corner radius for every surface. */
-export const STOREFRONT_RADIUS = 'rounded-2xl';
+/** One restrained corner radius for every storefront surface. */
+export const STOREFRONT_RADIUS = 'rounded-xl';
 
 export const storefrontRadiusClasses: Record<
   InventoryStorefront['cornerStyle'],
@@ -27,9 +27,8 @@ export const storefrontRadiusClasses: Record<
   soft: STOREFRONT_RADIUS,
 };
 
-/** One elevated card surface for every storefront. */
-export const STOREFRONT_SURFACE =
-  'border border-border/60 bg-card shadow-sm shadow-foreground/5';
+/** One quiet, border-led card surface for every storefront. */
+export const STOREFRONT_SURFACE = 'border border-border bg-card';
 
 export const storefrontSurfaceClasses: Record<
   InventoryStorefront['surfaceStyle'],

package/src/components/ui/tu-do/boards/boardId/board-column-external-retry.test.tsx

@@ -2,7 +2,14 @@
  * @vitest-environment jsdom
  */
 
-import { act, render, waitFor } from '@testing-library/react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import type { Task } from '@tuturuuu/types/primitives/Task';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type { ListPaginationState } from '../../shared/progressive-loader-context';
@@ -82,6 +89,19 @@ const loadedExternalState: ListPaginationState = {
   totalCount: 0,
 };
 
+const regularColumn: TaskList = {
+  ...externalColumn,
+  color: 'BLUE',
+  id: 'list-1',
+  is_external_staging: false,
+  name: 'In progress',
+};
+
+const regularTasks = [
+  { id: 'task-1', list_id: regularColumn.id, name: 'First task' },
+  { id: 'task-2', list_id: regularColumn.id, name: 'Second task' },
+] as Task[];
+
 function renderExternalColumn() {
   return (
     <BoardColumn
@@ -124,4 +144,42 @@ describe('BoardColumn external lane retry behavior', () => {
       externalSortBy: 'created-desc',
     });
   });
+
+  it('replaces the status icon with a stable select-all checkbox in bulk mode', () => {
+    mocks.pagination = {
+      [regularColumn.id]: {
+        ...loadedExternalState,
+        hasMore: false,
+        totalCount: regularTasks.length,
+      },
+    };
+    const onTaskSelect = vi.fn();
+
+    render(
+      <BoardColumn
+        boardId="board-1"
+        column={regularColumn}
+        isMultiSelectMode
+        onTaskSelect={onTaskSelect}
+        selectedTasks={new Set(['task-1'])}
+        setIsMultiSelectMode={vi.fn()}
+        tasks={regularTasks}
+        wsId="workspace-1"
+      />
+    );
+
+    const checkbox = screen.getByRole('checkbox', {
+      name: 'select_all_tasks',
+    });
+    expect(checkbox).toHaveAttribute('data-state', 'indeterminate');
+    expect(checkbox).toHaveClass('size-4');
+
+    fireEvent.click(checkbox);
+
+    expect(onTaskSelect).toHaveBeenCalledTimes(1);
+    expect(onTaskSelect).toHaveBeenCalledWith(
+      'task-2',
+      expect.objectContaining({ shiftKey: false })
+    );
+  });
 });

package/src/components/ui/tu-do/boards/boardId/board-column.tsx

@@ -22,6 +22,7 @@ import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
 import { Badge } from '@tuturuuu/ui/badge';
 import { Button } from '@tuturuuu/ui/button';
 import { Card } from '@tuturuuu/ui/card';
+import { Checkbox } from '@tuturuuu/ui/checkbox';
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -469,6 +470,14 @@ export function BoardColumn({
       ? Math.max(listState.totalCount, visibleTasks.length)
       : visibleTasks.length
     : visibleTasks.length;
+  const selectedVisibleTaskCount = visibleTasks.reduce(
+    (count, task) => count + (selectedTasks?.has(task.id) ? 1 : 0),
+    0
+  );
+  const allVisibleTasksSelected =
+    visibleTasks.length > 0 && selectedVisibleTaskCount === visibleTasks.length;
+  const someVisibleTasksSelected =
+    selectedVisibleTaskCount > 0 && !allVisibleTasksSelected;
   const externalFilterCount =
     (externalIncludeDocuments ? 1 : 0) + (externalIncludeDoneClosed ? 1 : 0);
   const pinListLabel = specialPinned
@@ -496,13 +505,15 @@ export function BoardColumn({
     [attributes, listeners, isDragging, isOverlay, t]
   );
 
-  const handleSelectAll = () => {
-    if (!onTaskSelect || !setIsMultiSelectMode || tasks.length === 0) return;
+  const handleToggleAll = () => {
+    if (!onTaskSelect || !setIsMultiSelectMode || visibleTasks.length === 0)
+      return;
+
+    if (!allVisibleTasksSelected) setIsMultiSelectMode(true);
 
-    setIsMultiSelectMode(true);
-    // Select all tasks in this list
-    tasks.forEach((task) => {
-      if (selectedTasks?.has(task.id)) return;
+    visibleTasks.forEach((task) => {
+      const isSelected = selectedTasks?.has(task.id) ?? false;
+      if (allVisibleTasksSelected ? !isSelected : isSelected) return;
 
       const fakeEvent = {
         shiftKey: false,
@@ -606,7 +617,25 @@ export function BoardColumn({
       <div className="flex items-center gap-2 rounded-t-xl border-b p-3">
         {!readOnly && !isExternalStaging && DragHandle}
         <div className="flex flex-1 items-center gap-2">
-          <span className="text-sm">{statusIcon}</span>
+          {isMultiSelectMode && !readOnly && visibleTasks.length > 0 ? (
+            <Checkbox
+              aria-label={t('select_all_tasks')}
+              checked={
+                allVisibleTasksSelected
+                  ? true
+                  : someVisibleTasksSelected
+                    ? 'indeterminate'
+                    : false
+              }
+              className="size-4"
+              onCheckedChange={handleToggleAll}
+              title={t('select_all_tasks')}
+            />
+          ) : (
+            <span className="inline-flex size-4 items-center justify-center text-sm">
+              {statusIcon}
+            </span>
+          )}
           <h3
             className={cn(
               'font-semibold text-foreground/90 text-sm',
@@ -830,7 +859,7 @@ export function BoardColumn({
                   boardId={boardId}
                   wsId={wsId}
                   onUpdate={handleUpdate}
-                  onSelectAll={handleSelectAll}
+                  onSelectAll={handleToggleAll}
                   isEditOpen={isEditOpen}
                   onEditOpenChange={setIsEditOpen}
                 />