@tuturuuu/ui 0.7.0 → 0.8.0

package/src/components/ui/money-input.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { getCurrencyLocale } from '@tuturuuu/utils/format';
+import {
+  getCurrencyFractionDigits,
+  majorToMinor,
+  minorToMajor,
+} from '@tuturuuu/utils/money';
+import { useMemo } from 'react';
+import { CurrencyInput, type CurrencyInputProps } from './currency-input';
+
+export interface MoneyInputProps
+  extends Omit<
+    CurrencyInputProps,
+    'value' | 'onChange' | 'locale' | 'maximumFractionDigits' | 'currencySuffix'
+  > {
+  /** ISO currency code (e.g. 'USD', 'VND'). Drives precision + locale. */
+  currency: string;
+  /** Amount in integer minor units (cents for USD, whole units for JPY/VND). */
+  value: number | undefined;
+  /** Emits the amount in integer minor units. */
+  onChange: (minorValue: number) => void;
+  /** Show the currency code as a muted suffix (defaults to true). */
+  showCurrencySuffix?: boolean;
+}
+
+/**
+ * Currency-aware money input. The `value`/`onChange` boundary is always in
+ * integer **minor units** (the canonical storage format); the field renders and
+ * edits in localized major units with the correct precision for the currency.
+ *
+ * Wraps the shared {@link CurrencyInput} so all money entry across the platform
+ * shares one polished input (cursor preservation, quick-action helpers) while
+ * keeping the minor-unit conversion centralized in one place.
+ */
+export function MoneyInput({
+  currency,
+  value,
+  onChange,
+  showCurrencySuffix = true,
+  ...props
+}: MoneyInputProps) {
+  const fractionDigits = useMemo(
+    () => getCurrencyFractionDigits(currency),
+    [currency]
+  );
+  const locale = useMemo(() => getCurrencyLocale(currency), [currency]);
+  const majorValue = useMemo(
+    () => (value === undefined ? undefined : minorToMajor(value, currency)),
+    [currency, value]
+  );
+
+  return (
+    <CurrencyInput
+      {...props}
+      value={majorValue}
+      onChange={(major) => onChange(majorToMinor(major, currency))}
+      locale={locale}
+      maximumFractionDigits={fractionDigits}
+      currencySuffix={showCurrencySuffix ? currency.toUpperCase() : undefined}
+    />
+  );
+}

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

@@ -1,16 +1,28 @@
 'use client';
 
-import { ArrowRight, Tag, TriangleAlert } from '@tuturuuu/icons';
+import { ArrowRight, Tag, TriangleAlert, Zap } 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 type { StorefrontCartEntry, StorefrontSurfaceLabels } from './types';
-import { formatStorefrontPrice, storefrontSurfaceClasses } from './utils';
+import { StorefrontImagePanel } from './image-panel';
+import type {
+  StorefrontBuyerDefaults,
+  StorefrontCartEntry,
+  StorefrontSurfaceLabels,
+} from './types';
+import {
+  formatStorefrontPrice,
+  getStorefrontLinePrice,
+  getStorefrontVariantLabel,
+  storefrontCartLineKey,
+  storefrontSurfaceClasses,
+} from './utils';
 
 export function StorefrontCartSummary({
+  buyerDefaults,
   cartEntries,
   checkoutHref,
   currency,
@@ -19,10 +31,12 @@ export function StorefrontCartSummary({
   isSubmitting,
   labels,
   onCheckoutSubmit,
+  onInstantCheckout,
   radius,
   storefront,
   total,
 }: {
+  buyerDefaults?: StorefrontBuyerDefaults;
   cartEntries: StorefrontCartEntry[];
   checkoutHref?: string;
   currency: string;
@@ -31,6 +45,7 @@ export function StorefrontCartSummary({
   isSubmitting: boolean;
   labels: StorefrontSurfaceLabels;
   onCheckoutSubmit?: (formData: FormData) => void;
+  onInstantCheckout?: () => void;
   radius: string;
   storefront: InventoryStorefront;
   total: number;
@@ -40,11 +55,17 @@ export function StorefrontCartSummary({
   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';
 
   return (
     <aside
       className={cn(
         'h-fit p-4 lg:sticky lg:top-4',
+        isCheckout ? 'p-5 sm:p-6' : null,
         storefrontSurfaceClasses[storefront.surfaceStyle],
         radius
       )}
@@ -58,24 +79,43 @@ export function StorefrontCartSummary({
       <p className="mt-2 text-muted-foreground text-sm leading-6">
         {labels.reservedCopy}
       </p>
-      <div className="mt-4 grid gap-2">
-        {cartEntries.map(({ line, listing }) => (
-          <div
-            className="flex items-center justify-between gap-3 text-sm"
-            key={line.listingId}
-          >
-            <span className="min-w-0 truncate">
-              {line.quantity} x {listing.title}
-            </span>
-            <span className="font-medium">
-              {formatStorefrontPrice(listing.price * line.quantity, currency)}
-            </span>
-          </div>
-        ))}
+      <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 border-border border-t pt-4">
+      <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="font-semibold">
+        <span className="shrink-0 whitespace-nowrap font-semibold tabular-nums">
           {formatStorefrontPrice(total, currency)}
         </span>
       </div>
@@ -93,20 +133,53 @@ export function StorefrontCartSummary({
       ) : null}
       {isCheckout ? (
         <form
-          className="mt-4 grid gap-2"
+          className="mt-5 grid gap-3"
           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"
+            />
+          </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"
+            />
+          </label>
           <textarea
-            className="min-h-20 rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+            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}
           />
           <AccentButton disabled={submitDisabled} radius={radius}>
             {isSubmitting ? labels.reserving : labels.reserve}
-            <ArrowRight className="h-4 w-4" />
+            <ArrowRight className="size-4 shrink-0" />
           </AccentButton>
         </form>
       ) : isPreview || isCheckoutDisabled ? (
@@ -114,16 +187,28 @@ export function StorefrontCartSummary({
           {labels.checkoutDisabled}
         </Button>
       ) : canOpenCheckout ? (
-        <Button asChild className={cn('mt-4 w-full', radius)}>
-          <a href={checkoutHref}>
-            {labels.checkout}
-            <ArrowRight className="h-4 w-4" />
-          </a>
-        </Button>
+        <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="h-4 w-4" />
+          <ArrowRight className="size-4 shrink-0" />
         </Button>
       )}
     </aside>

package/src/components/ui/storefront/checkout-overlay.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+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.
+ */
+export function StorefrontCheckoutOverlay({ label }: { label: string }) {
+  return (
+    <div
+      aria-busy="true"
+      aria-live="assertive"
+      className="fixed inset-0 z-[100] grid place-items-center bg-background/80 backdrop-blur-sm"
+      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))]">
+          <Loader2 className="size-7 animate-spin" />
+        </span>
+        <p className="font-medium text-sm">{label}</p>
+      </div>
+    </div>
+  );
+}

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

@@ -36,6 +36,7 @@ export function StorefrontHeroPanel({
             className="absolute inset-0 h-full w-full"
             imageUrl={heroImage}
             label={storefront.name}
+            priority
           />
         ) : (
           <div className="absolute inset-0 bg-gradient-to-br from-muted via-muted/60 to-background" />
@@ -51,14 +52,7 @@ export function StorefrontHeroPanel({
             <Store className="h-4 w-4" />
             <span>{labels.browse}</span>
           </div>
-          <h2
-            className={cn(
-              'mt-2 text-balance font-semibold tracking-normal',
-              storefront.themePreset === 'editorial'
-                ? 'text-3xl md:text-4xl'
-                : 'text-2xl'
-            )}
-          >
+          <h2 className="mt-2 text-balance font-semibold text-3xl tracking-tight md:text-4xl">
             {storefront.name}
           </h2>
           <p className="mt-2 max-w-2xl text-muted-foreground text-sm leading-6">

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

@@ -6,10 +6,13 @@ export function StorefrontImagePanel({
   className,
   imageUrl,
   label,
+  priority = false,
 }: {
   className?: string;
   imageUrl: string | null;
   label: string;
+  /** Eager-load above-the-fold images (e.g. the hero) to protect LCP. */
+  priority?: boolean;
 }) {
   if (imageUrl) {
     return (
@@ -17,6 +20,9 @@ export function StorefrontImagePanel({
       <img
         alt=""
         className={cn('w-full object-cover', className)}
+        decoding="async"
+        fetchPriority={priority ? 'high' : 'auto'}
+        loading={priority ? 'eager' : 'lazy'}
         src={imageUrl}
       />
     );

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

@@ -1,5 +1,9 @@
+export { StorefrontCheckoutOverlay } from './checkout-overlay';
+export { StorefrontProductDetail } from './product-detail';
+export { StorefrontProductDialog } from './product-dialog';
 export { StorefrontSurface } from './storefront-surface';
 export type {
+  StorefrontBuyerDefaults,
   StorefrontCartEntry,
   StorefrontCartLine,
   StorefrontSurfaceLabels,
@@ -7,6 +11,13 @@ export type {
 } from './types';
 export {
   formatStorefrontPrice,
+  getStorefrontLinePrice,
+  getStorefrontListingFromPrice,
   getStorefrontListingLimit,
+  getStorefrontListingVariants,
+  getStorefrontVariantLabel,
+  getStorefrontVariantLimit,
+  listingHasVariants,
   sanitizeStorefrontAccentColor,
+  storefrontCartLineKey,
 } from './utils';

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { Minus, Plus } from '@tuturuuu/icons';
+import { Minus, Plus, SlidersHorizontal } from '@tuturuuu/icons';
 import type { InventoryStorefrontListing } from '@tuturuuu/internal-api/inventory';
 import { cn } from '@tuturuuu/utils/format';
 import { Badge } from '../badge';
@@ -8,7 +8,12 @@ import { Button } from '../button';
 import { AccentButton } from './accent-button';
 import { StorefrontImagePanel } from './image-panel';
 import type { StorefrontSurfaceLabels } from './types';
-import { formatStorefrontPrice, getStorefrontListingLimit } from './utils';
+import {
+  formatStorefrontPrice,
+  getStorefrontListingFromPrice,
+  getStorefrontListingLimit,
+  listingHasVariants,
+} from './utils';
 
 export function StorefrontListingCard({
   currency,
@@ -17,6 +22,7 @@ export function StorefrontListingCard({
   listing,
   onDecrement,
   onIncrement,
+  onOpenDetail,
   quantity,
   radius,
   showInventoryBadges,
@@ -26,35 +32,73 @@ export function StorefrontListingCard({
   isList: boolean;
   labels: StorefrontSurfaceLabels;
   listing: InventoryStorefrontListing;
-  onDecrement?: (listingId: string) => void;
-  onIncrement?: (listingId: string, maxQuantity: number) => void;
+  onDecrement?: (listingId: string, variantId?: string | null) => void;
+  onIncrement?: (
+    listingId: string,
+    maxQuantity: number,
+    variantId?: string | null
+  ) => void;
+  onOpenDetail?: (listingId: string) => void;
   quantity: number;
   radius: string;
   showInventoryBadges: boolean;
   surfaceClassName: string;
 }) {
+  const hasVariants = listingHasVariants(listing);
   const limit = getStorefrontListingLimit(listing);
   const disabled = limit === 0 || quantity >= limit;
   const canChange = Boolean(onIncrement || onDecrement);
+  const fromPrice = getStorefrontListingFromPrice(listing);
+  const openDetail = onOpenDetail ? () => onOpenDetail(listing.id) : undefined;
 
   return (
     <article
       className={cn(
         surfaceClassName,
         radius,
+        'group relative overflow-hidden transition duration-200 hover:-translate-y-0.5 hover:shadow-foreground/10 hover:shadow-md',
         isList
-          ? 'grid gap-3 p-3 sm:grid-cols-[112px_minmax(0,1fr)_auto] sm:items-center'
-          : 'grid min-h-full gap-4 p-3'
+          ? 'grid gap-4 p-3 sm:grid-cols-[112px_minmax(0,1fr)_auto] sm:items-center'
+          : 'flex min-h-full flex-col gap-4 p-3'
       )}
     >
-      <StorefrontImagePanel
-        className={cn(isList ? 'aspect-square' : 'aspect-[4/3]')}
-        imageUrl={listing.imageUrl}
-        label={listing.title}
-      />
+      <div className="relative">
+        <button
+          aria-label={listing.title}
+          className={cn(
+            'block w-full overflow-hidden text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',
+            radius
+          )}
+          disabled={!openDetail}
+          onClick={openDetail}
+          type="button"
+        >
+          <StorefrontImagePanel
+            className={cn(
+              'overflow-hidden transition duration-300 group-hover:scale-[1.02]',
+              radius,
+              isList ? 'aspect-square' : 'aspect-[4/3]'
+            )}
+            imageUrl={listing.imageUrl}
+            label={listing.title}
+          />
+        </button>
+        {limit === 0 ? (
+          <span className="absolute inset-x-2 top-2 inline-flex w-fit items-center rounded-full bg-foreground/85 px-2.5 py-0.5 font-medium text-background text-xs">
+            {labels.soldOut}
+          </span>
+        ) : null}
+      </div>
       <div className="min-w-0">
         <div className="flex flex-wrap items-center gap-2">
-          <p className="min-w-0 truncate font-semibold">{listing.title}</p>
+          <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"
+            disabled={!openDetail}
+            onClick={openDetail}
+            type="button"
+          >
+            {listing.title}
+          </button>
           <Badge className="border-border bg-background" variant="outline">
             {listing.listingType === 'bundle' ? labels.bundle : labels.product}
           </Badge>
@@ -76,23 +120,41 @@ export function StorefrontListingCard({
       </div>
 
       <div className="mt-auto flex flex-wrap items-center justify-between gap-3">
-        <div>
-          <p className="font-semibold">
-            {formatStorefrontPrice(listing.price, currency)}
-          </p>
-          {listing.compareAtPrice ? (
-            <p className="text-muted-foreground text-xs line-through">
+        <div className="min-w-0">
+          {hasVariants ? (
+            <p className="truncate font-semibold tabular-nums">
+              <span className="font-normal text-muted-foreground text-xs">
+                {labels.fromPrice}{' '}
+              </span>
+              {formatStorefrontPrice(fromPrice, currency)}
+            </p>
+          ) : (
+            <p className="truncate font-semibold tabular-nums">
+              {formatStorefrontPrice(listing.price, currency)}
+            </p>
+          )}
+          {!hasVariants && listing.compareAtPrice ? (
+            <p className="truncate text-muted-foreground text-xs line-through">
               {formatStorefrontPrice(listing.compareAtPrice, currency)}
             </p>
           ) : null}
         </div>
-        {canChange ? (
+        {hasVariants ? (
+          <AccentButton
+            disabled={limit === 0 || !openDetail}
+            onClick={openDetail}
+            radius={radius}
+          >
+            <SlidersHorizontal className="h-4 w-4" />
+            {limit === 0 ? labels.soldOut : labels.selectOptions}
+          </AccentButton>
+        ) : canChange ? (
           quantity > 0 ? (
             <div className="flex items-center gap-1">
               <Button
                 aria-label={`${labels.quantity} -`}
                 className={cn('h-8 w-8 p-0', radius)}
-                onClick={() => onDecrement?.(listing.id)}
+                onClick={() => onDecrement?.(listing.id, null)}
                 type="button"
                 variant="outline"
               >
@@ -105,7 +167,7 @@ export function StorefrontListingCard({
                 aria-label={`${labels.quantity} +`}
                 className={cn('h-8 w-8 p-0', radius)}
                 disabled={disabled}
-                onClick={() => onIncrement?.(listing.id, limit)}
+                onClick={() => onIncrement?.(listing.id, limit, null)}
                 type="button"
                 variant="outline"
               >
@@ -115,7 +177,7 @@ export function StorefrontListingCard({
           ) : (
             <AccentButton
               disabled={disabled}
-              onClick={() => onIncrement?.(listing.id, limit)}
+              onClick={() => onIncrement?.(listing.id, limit, null)}
               radius={radius}
             >
               <Plus className="h-4 w-4" />