@tuturuuu/ui 0.4.1 → 0.6.0

package/src/components/ui/finance/wallets/wallets-page.tsx

@@ -1,10 +1,8 @@
-import {
-  type InternalApiClientOptions,
-  listWallets,
-  withForwardedInternalApiAuth,
-} from '@tuturuuu/internal-api';
-import type { Wallet } from '@tuturuuu/types/primitives/Wallet';
+import { FinanceBalanceModeToggle } from '@tuturuuu/ui/finance/shared/balance-mode-toggle';
 import { CreateDialogFeatureSummary } from '@tuturuuu/ui/finance/shared/create-dialog-feature-summary';
+import { FinanceNumbersVisibilityToggle } from '@tuturuuu/ui/finance/shared/numbers-visibility-toggle';
+import { WalletCheckpointHistoryDialog } from '@tuturuuu/ui/finance/wallets/checkpoints/wallet-checkpoint-history-dialog';
+import { WalletTotalCheckDialog } from '@tuturuuu/ui/finance/wallets/checkpoints/wallet-total-check-dialog';
 import { WalletForm } from '@tuturuuu/ui/finance/wallets/form';
 import { WalletsDataTable } from '@tuturuuu/ui/finance/wallets/wallets-data-table';
 import { Separator } from '@tuturuuu/ui/separator';
@@ -14,7 +12,6 @@ import {
   getWorkspaceConfig,
   type PermissionsResult,
 } from '@tuturuuu/utils/workspace-helper';
-import { headers } from 'next/headers';
 import { notFound } from 'next/navigation';
 import { getTranslations } from 'next-intl/server';
 
@@ -22,15 +19,10 @@ interface Props {
   wsId: string;
   searchParams: {
     create?: string;
-    q: string;
-    page: string;
-    pageSize: string;
+    q?: string;
   };
-  page?: string;
-  pageSize?: string;
   currency?: string;
   financePrefix?: string;
-  internalApiOptions?: InternalApiClientOptions;
   openCreateDialog?: boolean;
   permissions?: PermissionsResult;
   workspace?: {
@@ -41,11 +33,8 @@ interface Props {
 export default async function WalletsPage({
   wsId,
   searchParams,
-  page,
-  pageSize,
   currency,
   financePrefix = '/finance',
-  internalApiOptions,
   openCreateDialog = false,
   permissions,
   workspace,
@@ -65,19 +54,8 @@ export default async function WalletsPage({
   const canCreateWallets = containsPermission('create_wallets');
   const canUpdateWallets = containsPermission('update_wallets');
   const canDeleteWallets = containsPermission('delete_wallets');
-  const resolvedInternalApiOptions =
-    internalApiOptions ?? withForwardedInternalApiAuth(await headers());
-  const { data: rawData, count } = await getData(
-    wsId,
-    searchParams,
-    resolvedInternalApiOptions
-  );
-
-  const data = rawData.map((d) => ({
-    ...d,
-    href: `/${wsId}${financePrefix}/wallets/${d.id}`,
-    ws_id: wsId,
-  }));
+  const canCreateTransactions = containsPermission('create_transactions');
+  const isCreditCardCreate = searchParams.create === 'credit-card';
 
   return (
     <>
@@ -87,50 +65,48 @@ export default async function WalletsPage({
         description={t('ws-wallets.description')}
         createTitle={t('ws-wallets.create')}
         createDescription={t('ws-wallets.create_description')}
-        defaultOpen={openCreateDialog || searchParams.create === 'wallet'}
-        form={canCreateWallets ? <WalletForm wsId={wsId} /> : undefined}
+        defaultOpen={
+          openCreateDialog ||
+          searchParams.create === 'wallet' ||
+          isCreditCardCreate
+        }
+        form={
+          canCreateWallets ? (
+            <WalletForm
+              wsId={wsId}
+              defaultType={isCreditCardCreate ? 'CREDIT' : 'STANDARD'}
+            />
+          ) : undefined
+        }
       />
       <Separator className="my-4" />
+      <div className="mb-4 flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
+        <div className="flex flex-wrap gap-2">
+          <FinanceBalanceModeToggle />
+          <FinanceNumbersVisibilityToggle />
+        </div>
+        <div className="flex flex-wrap gap-2 lg:justify-end">
+          <WalletCheckpointHistoryDialog
+            wsId={wsId}
+            financePrefix={financePrefix}
+            canCreateTransactions={canCreateTransactions}
+          />
+          <WalletTotalCheckDialog
+            wsId={wsId}
+            currency={resolvedCurrency ?? 'USD'}
+            canUpdateWallets={canUpdateWallets}
+          />
+        </div>
+      </div>
       <WalletsDataTable
         wsId={wsId}
-        data={data}
-        count={count}
         canUpdateWallets={canUpdateWallets}
         canDeleteWallets={canDeleteWallets}
         currency={resolvedCurrency ?? 'USD'}
+        financePrefix={financePrefix}
         isPersonalWorkspace={!!resolvedWorkspace?.personal}
-        page={page}
-        pageSize={pageSize}
+        query={searchParams.q}
       />
     </>
   );
 }
-
-async function getData(
-  wsId: string,
-  {
-    q,
-    page = '1',
-    pageSize = '10',
-  }: { q?: string; page?: string; pageSize?: string },
-  internalApiOptions: Parameters<typeof listWallets>[1]
-) {
-  const wallets = await listWallets(wsId, internalApiOptions);
-  const normalizedQuery = q?.trim().toLowerCase();
-  const filteredWallets = wallets
-    .filter((wallet) =>
-      normalizedQuery
-        ? wallet.name?.toLowerCase().includes(normalizedQuery)
-        : true
-    )
-    .sort((a, b) => (a.name || '').localeCompare(b.name || ''));
-
-  const parsedPage = parseInt(page, 10);
-  const parsedPageSize = parseInt(pageSize, 10);
-  const start = (parsedPage - 1) * parsedPageSize;
-
-  return {
-    data: filteredWallets.slice(start, start + parsedPageSize) as Wallet[],
-    count: filteredWallets.length,
-  };
-}

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

@@ -0,0 +1,33 @@
+'use client';
+
+import { cn } from '@tuturuuu/utils/format';
+import type { ReactNode } from 'react';
+
+export function AccentButton({
+  children,
+  disabled,
+  onClick,
+  radius,
+}: {
+  children: ReactNode;
+  disabled?: boolean;
+  onClick?: () => void;
+  radius: string;
+}) {
+  return (
+    <button
+      className={cn(
+        'inline-flex h-9 items-center justify-center gap-2 px-3 font-medium text-sm transition disabled:pointer-events-none disabled:opacity-50',
+        '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
+      )}
+      disabled={disabled}
+      onClick={onClick}
+      type={onClick ? 'button' : 'submit'}
+    >
+      {children}
+    </button>
+  );
+}

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

@@ -0,0 +1,140 @@
+'use client';
+
+import { ArrowRight, TriangleAlert } 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';
+
+export function StorefrontCartSummary({
+  cartEntries,
+  checkoutHref,
+  currency,
+  isCheckout,
+  isPreview,
+  isSubmitting,
+  labels,
+  onCheckoutSubmit,
+  radius,
+  storefront,
+  total,
+}: {
+  cartEntries: StorefrontCartEntry[];
+  checkoutHref?: string;
+  currency: string;
+  isCheckout: boolean;
+  isPreview: boolean;
+  isSubmitting: boolean;
+  labels: StorefrontSurfaceLabels;
+  onCheckoutSubmit?: (formData: FormData) => void;
+  radius: string;
+  storefront: InventoryStorefront;
+  total: number;
+}) {
+  const hasCart = cartEntries.length > 0;
+  const isCheckoutDisabled = storefront.checkoutMode === 'disabled';
+  const submitDisabled = !hasCart || isSubmitting || isCheckoutDisabled;
+
+  return (
+    <aside
+      className={cn(
+        'h-fit p-4 lg:sticky lg:top-4',
+        storefrontSurfaceClasses[storefront.surfaceStyle],
+        radius
+      )}
+    >
+      <div className="flex items-center justify-between gap-3">
+        <p className="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">
+        {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>
+      <div className="mt-4 flex items-center justify-between border-border border-t pt-4">
+        <span className="text-muted-foreground text-sm">{labels.total}</span>
+        <span className="font-semibold">
+          {formatStorefrontPrice(total, currency)}
+        </span>
+      </div>
+      {!hasCart ? (
+        <p className="mt-4 flex items-center gap-2 rounded-md border border-border bg-muted/40 px-3 py-2 text-muted-foreground text-sm">
+          <TriangleAlert className="h-4 w-4" />
+          {labels.emptyCart}
+        </p>
+      ) : null}
+      {isCheckout ? (
+        <form
+          className="mt-4 grid gap-2"
+          onSubmit={(event: FormEvent<HTMLFormElement>) => {
+            event.preventDefault();
+            onCheckoutSubmit?.(new FormData(event.currentTarget));
+          }}
+        >
+          <input
+            className="h-10 rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+            name="name"
+            placeholder={labels.form.name}
+            required
+          />
+          <input
+            className="h-10 rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+            name="email"
+            placeholder={labels.form.email}
+            required
+            type="email"
+          />
+          <input
+            className="h-10 rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+            name="phone"
+            placeholder={labels.form.phone}
+          />
+          <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"
+            name="note"
+            placeholder={labels.form.note}
+          />
+          <AccentButton disabled={submitDisabled} radius={radius}>
+            {isSubmitting ? labels.reserving : labels.reserve}
+            <ArrowRight className="h-4 w-4" />
+          </AccentButton>
+        </form>
+      ) : isPreview || isCheckoutDisabled ? (
+        <Button className={cn('mt-4 w-full', radius)} disabled type="button">
+          {labels.checkoutDisabled}
+        </Button>
+      ) : (
+        <Button
+          asChild
+          className={cn('mt-4 w-full', radius)}
+          disabled={!hasCart}
+        >
+          <a aria-disabled={!hasCart} href={hasCart ? checkoutHref : undefined}>
+            {labels.checkout}
+            <ArrowRight className="h-4 w-4" />
+          </a>
+        </Button>
+      )}
+    </aside>
+  );
+}

package/src/components/ui/storefront/empty-listings.tsx

@@ -0,0 +1,32 @@
+import { PackageOpen } from '@tuturuuu/icons';
+import { cn } from '@tuturuuu/utils/format';
+import type { ReactNode } from 'react';
+import type { StorefrontSurfaceLabels } from './types';
+
+export function StorefrontEmptyListings({
+  action,
+  labels,
+  radius,
+}: {
+  action?: ReactNode;
+  labels: StorefrontSurfaceLabels;
+  radius: string;
+}) {
+  return (
+    <div
+      className={cn(
+        'grid min-h-56 place-items-center border border-dashed bg-muted/25 p-6 text-center sm:col-span-2 xl:col-span-3',
+        radius
+      )}
+    >
+      <div className="max-w-sm">
+        <PackageOpen className="mx-auto h-8 w-8 text-muted-foreground" />
+        <p className="mt-3 font-semibold">{labels.emptyListingsTitle}</p>
+        <p className="mt-1 text-muted-foreground text-sm leading-6">
+          {labels.emptyListingsDescription}
+        </p>
+        {action ? <div className="mt-4">{action}</div> : null}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,70 @@
+import { Store } from '@tuturuuu/icons';
+import type { InventoryStorefront } from '@tuturuuu/internal-api/inventory';
+import { cn } from '@tuturuuu/utils/format';
+import { Badge } from '../badge';
+import { StorefrontImagePanel } from './image-panel';
+import type { StorefrontSurfaceLabels } from './types';
+import { storefrontSurfaceClasses } from './utils';
+
+export function StorefrontHeroPanel({
+  currency,
+  labels,
+  listingsCount,
+  radius,
+  storefront,
+}: {
+  currency: string;
+  labels: StorefrontSurfaceLabels;
+  listingsCount: number;
+  radius: string;
+  storefront: InventoryStorefront;
+}) {
+  return (
+    <section
+      className={cn(
+        'grid min-h-44 overflow-hidden',
+        storefrontSurfaceClasses[storefront.surfaceStyle],
+        radius,
+        storefront.themePreset === 'editorial'
+          ? 'md:grid-cols-[minmax(0,1.15fr)_360px]'
+          : 'md:grid-cols-[minmax(0,1fr)_280px]'
+      )}
+    >
+      <div className="flex min-w-0 flex-col justify-between gap-6 p-5">
+        <div>
+          <div className="flex items-center gap-2 text-muted-foreground text-xs">
+            <Store className="h-4 w-4" />
+            <span>{labels.browse}</span>
+          </div>
+          <h2
+            className={cn(
+              'mt-3 text-balance font-semibold tracking-normal',
+              storefront.themePreset === 'editorial'
+                ? 'text-3xl md:text-4xl'
+                : 'text-2xl'
+            )}
+          >
+            {storefront.name}
+          </h2>
+          <p className="mt-2 max-w-2xl text-muted-foreground text-sm leading-6">
+            {storefront.description ?? labels.fallbackDescription}
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <Badge className="border-border bg-background" variant="outline">
+            {listingsCount} {labels.product}
+          </Badge>
+          <Badge className="border-border bg-background" variant="outline">
+            {currency}
+          </Badge>
+        </div>
+      </div>
+
+      <StorefrontImagePanel
+        className="min-h-44 md:min-h-full"
+        imageUrl={storefront.heroImageUrl}
+        label={storefront.name}
+      />
+    </section>
+  );
+}

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

@@ -0,0 +1,40 @@
+import { PackageOpen } from '@tuturuuu/icons';
+import { cn } from '@tuturuuu/utils/format';
+import { getListingInitials } from './utils';
+
+export function StorefrontImagePanel({
+  className,
+  imageUrl,
+  label,
+}: {
+  className?: string;
+  imageUrl: string | null;
+  label: string;
+}) {
+  if (imageUrl) {
+    return (
+      // biome-ignore lint/performance/noImgElement: storefront images are workspace-controlled external URLs
+      <img
+        alt=""
+        className={cn('w-full object-cover', className)}
+        src={imageUrl}
+      />
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'grid w-full place-items-center border-border bg-muted/55 text-muted-foreground',
+        className
+      )}
+    >
+      <div className="grid place-items-center gap-2 text-center">
+        <PackageOpen className="h-6 w-6" />
+        <span className="max-w-24 truncate font-semibold text-sm">
+          {getListingInitials(label) || label}
+        </span>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,12 @@
+export { StorefrontSurface } from './storefront-surface';
+export type {
+  StorefrontCartEntry,
+  StorefrontCartLine,
+  StorefrontSurfaceLabels,
+  StorefrontSurfaceMode,
+} from './types';
+export {
+  formatStorefrontPrice,
+  getStorefrontListingLimit,
+  sanitizeStorefrontAccentColor,
+} from './utils';

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

@@ -0,0 +1,129 @@
+'use client';
+
+import { Minus, Plus } from '@tuturuuu/icons';
+import type { InventoryStorefrontListing } from '@tuturuuu/internal-api/inventory';
+import { cn } from '@tuturuuu/utils/format';
+import { Badge } from '../badge';
+import { Button } from '../button';
+import { AccentButton } from './accent-button';
+import { StorefrontImagePanel } from './image-panel';
+import type { StorefrontSurfaceLabels } from './types';
+import { formatStorefrontPrice, getStorefrontListingLimit } from './utils';
+
+export function StorefrontListingCard({
+  currency,
+  isList,
+  labels,
+  listing,
+  onDecrement,
+  onIncrement,
+  quantity,
+  radius,
+  showInventoryBadges,
+  surfaceClassName,
+}: {
+  currency: string;
+  isList: boolean;
+  labels: StorefrontSurfaceLabels;
+  listing: InventoryStorefrontListing;
+  onDecrement?: (listingId: string) => void;
+  onIncrement?: (listingId: string, maxQuantity: number) => void;
+  quantity: number;
+  radius: string;
+  showInventoryBadges: boolean;
+  surfaceClassName: string;
+}) {
+  const limit = getStorefrontListingLimit(listing);
+  const disabled = limit === 0 || quantity >= limit;
+  const canChange = Boolean(onIncrement || onDecrement);
+
+  return (
+    <article
+      className={cn(
+        surfaceClassName,
+        radius,
+        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'
+      )}
+    >
+      <StorefrontImagePanel
+        className={cn(isList ? 'aspect-square' : 'aspect-[4/3]')}
+        imageUrl={listing.imageUrl}
+        label={listing.title}
+      />
+      <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>
+          <Badge className="border-border bg-background" variant="outline">
+            {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>
+        {showInventoryBadges ? (
+          <p className="mt-2 text-muted-foreground text-xs">
+            {limit === 0
+              ? labels.soldOut
+              : `${listing.availableQuantity ?? labels.available} ${
+                  typeof listing.availableQuantity === 'number'
+                    ? labels.available
+                    : ''
+                }`.trim()}
+          </p>
+        ) : null}
+      </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">
+              {formatStorefrontPrice(listing.compareAtPrice, currency)}
+            </p>
+          ) : null}
+        </div>
+        {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)}
+                type="button"
+                variant="outline"
+              >
+                <Minus className="h-4 w-4" />
+              </Button>
+              <span className="min-w-8 text-center font-medium text-sm">
+                {quantity}
+              </span>
+              <Button
+                aria-label={`${labels.quantity} +`}
+                className={cn('h-8 w-8 p-0', radius)}
+                disabled={disabled}
+                onClick={() => onIncrement?.(listing.id, limit)}
+                type="button"
+                variant="outline"
+              >
+                <Plus className="h-4 w-4" />
+              </Button>
+            </div>
+          ) : (
+            <AccentButton
+              disabled={disabled}
+              onClick={() => onIncrement?.(listing.id, limit)}
+              radius={radius}
+            >
+              <Plus className="h-4 w-4" />
+              {limit === 0 ? labels.soldOut : labels.add}
+            </AccentButton>
+          )
+        ) : null}
+      </div>
+    </article>
+  );
+}