create-brainerce-store 1.42.0 → 1.43.0

package/templates/nextjs/base/src/components/cart/cart-bundle-offer.tsx

@@ -1,112 +1,111 @@
-'use client';
-
-import { useState } from 'react';
-import Image from 'next/image';
-import type { CartBundleOffer as CartBundleOfferType } from 'brainerce';
-import { formatPrice } from 'brainerce';
-import { useStoreInfo } from '@/providers/store-provider';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
-
-interface CartBundleOfferCardProps {
-  offer: CartBundleOfferType;
-  cartId: string;
-  onAdd: () => void;
-  className?: string;
-}
-
-export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBundleOfferCardProps) {
-  const { storeInfo } = useStoreInfo();
-  const t = useTranslations('cart');
-  const currency = storeInfo?.currency || process.env.NEXT_PUBLIC_STORE_CURRENCY || 'USD';
-  const [adding, setAdding] = useState(false);
-
-  const offered = offer.offeredProducts;
-
-  const totalOriginal = parseFloat(offer.totalOriginalPrice);
-  const totalDiscounted = parseFloat(offer.totalDiscountedPrice);
-  const discountLabel =
-    offer.discountType === 'PERCENTAGE'
-      ? `${offer.discountValue}%`
-      : (formatPrice(parseFloat(offer.discountValue), { currency }) as string);
-
-  async function handleAdd() {
-    if (adding) return;
-    try {
-      setAdding(true);
-      const { getClient } = await import('@/lib/brainerce');
-      const client = getClient();
-      // No variant selections in the default template — products with
-      // variants are best handled with a dedicated picker per offered item.
-      await client.addBundleToCart(cartId, offer.id);
-      onAdd();
-    } catch (err) {
-      console.error('Failed to add bundle:', err);
-    } finally {
-      setAdding(false);
-    }
-  }
-
-  return (
-    <div className={cn('bg-background border-border rounded-lg border p-4', className)}>
-      <div className="mb-3">
-        <p className="text-foreground text-sm font-medium">{offer.name}</p>
-        {offer.description && (
-          <p className="text-muted-foreground mt-0.5 text-xs">{offer.description}</p>
-        )}
-      </div>
-
-      <ul className="space-y-2">
-        {offered.map((p) => {
-          const firstImage = p.images?.[0];
-          const imageUrl = firstImage?.url ?? null;
-          return (
-            <li key={p.id} className="flex items-center gap-3">
-              <div className="bg-muted relative h-12 w-12 flex-shrink-0 overflow-hidden rounded">
-                {imageUrl ? (
-                  <Image src={imageUrl} alt={p.name} fill sizes="48px" className="object-cover" />
-                ) : null}
-              </div>
-              <div className="min-w-0 flex-1">
-                <p className="text-foreground truncate text-sm">{p.name}</p>
-                <div className="mt-0.5 flex items-center gap-2">
-                  <span className="text-muted-foreground text-xs line-through">
-                    {formatPrice(parseFloat(p.originalPrice), { currency }) as string}
-                  </span>
-                  <span className="text-foreground text-xs font-semibold">
-                    {formatPrice(parseFloat(p.discountedPrice), { currency }) as string}
-                  </span>
-                </div>
-              </div>
-            </li>
-          );
-        })}
-      </ul>
-
-      <div className="border-border mt-3 flex items-center justify-between border-t pt-3">
-        <div className="flex items-center gap-2">
-          <span className="text-muted-foreground text-sm line-through">
-            {formatPrice(totalOriginal, { currency }) as string}
-          </span>
-          <span className="text-foreground text-sm font-semibold">
-            {formatPrice(totalDiscounted, { currency }) as string}
-          </span>
-          <span className="bg-destructive/10 text-destructive rounded px-1.5 py-0.5 text-xs font-medium">
-            -{discountLabel}
-          </span>
-        </div>
-        <button
-          type="button"
-          onClick={handleAdd}
-          disabled={adding}
-          className={cn(
-            'bg-primary text-primary-foreground flex-shrink-0 rounded px-4 py-2 text-xs font-medium transition-opacity hover:opacity-90',
-            'disabled:cursor-not-allowed disabled:opacity-50'
-          )}
-        >
-          {adding ? t('addingBundle') : t('addBundleItem')}
-        </button>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import type { CartBundleOffer as CartBundleOfferType } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { useCurrency } from '@/lib/use-currency';
+import { useTranslations } from '@/lib/translations';
+import { cn } from '@/lib/utils';
+
+interface CartBundleOfferCardProps {
+  offer: CartBundleOfferType;
+  cartId: string;
+  onAdd: () => void;
+  className?: string;
+}
+
+export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBundleOfferCardProps) {
+  const t = useTranslations('cart');
+  const currency = useCurrency();
+  const [adding, setAdding] = useState(false);
+
+  const offered = offer.offeredProducts;
+
+  const totalOriginal = parseFloat(offer.totalOriginalPrice);
+  const totalDiscounted = parseFloat(offer.totalDiscountedPrice);
+  const discountLabel =
+    offer.discountType === 'PERCENTAGE'
+      ? `${offer.discountValue}%`
+      : (formatPrice(parseFloat(offer.discountValue), { currency }) as string);
+
+  async function handleAdd() {
+    if (adding) return;
+    try {
+      setAdding(true);
+      const { getClient } = await import('@/lib/brainerce');
+      const client = getClient();
+      // No variant selections in the default template — products with
+      // variants are best handled with a dedicated picker per offered item.
+      await client.addBundleToCart(cartId, offer.id);
+      onAdd();
+    } catch (err) {
+      console.error('Failed to add bundle:', err);
+    } finally {
+      setAdding(false);
+    }
+  }
+
+  return (
+    <div className={cn('bg-background border-border rounded-lg border p-4', className)}>
+      <div className="mb-3">
+        <p className="text-foreground text-sm font-medium">{offer.name}</p>
+        {offer.description && (
+          <p className="text-muted-foreground mt-0.5 text-xs">{offer.description}</p>
+        )}
+      </div>
+
+      <ul className="space-y-2">
+        {offered.map((p) => {
+          const firstImage = p.images?.[0];
+          const imageUrl = firstImage?.url ?? null;
+          return (
+            <li key={p.id} className="flex items-center gap-3">
+              <div className="bg-muted relative h-12 w-12 flex-shrink-0 overflow-hidden rounded">
+                {imageUrl ? (
+                  <Image src={imageUrl} alt={p.name} fill sizes="48px" className="object-cover" />
+                ) : null}
+              </div>
+              <div className="min-w-0 flex-1">
+                <p className="text-foreground truncate text-sm">{p.name}</p>
+                <div className="mt-0.5 flex items-center gap-2">
+                  <span className="text-muted-foreground text-xs line-through">
+                    {formatPrice(parseFloat(p.originalPrice), { currency }) as string}
+                  </span>
+                  <span className="text-foreground text-xs font-semibold">
+                    {formatPrice(parseFloat(p.discountedPrice), { currency }) as string}
+                  </span>
+                </div>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+
+      <div className="border-border mt-3 flex items-center justify-between border-t pt-3">
+        <div className="flex items-center gap-2">
+          <span className="text-muted-foreground text-sm line-through">
+            {formatPrice(totalOriginal, { currency }) as string}
+          </span>
+          <span className="text-foreground text-sm font-semibold">
+            {formatPrice(totalDiscounted, { currency }) as string}
+          </span>
+          <span className="bg-destructive/10 text-destructive rounded px-1.5 py-0.5 text-xs font-medium">
+            -{discountLabel}
+          </span>
+        </div>
+        <button
+          type="button"
+          onClick={handleAdd}
+          disabled={adding}
+          className={cn(
+            'bg-primary text-primary-foreground flex-shrink-0 rounded px-4 py-2 text-xs font-medium transition-opacity hover:opacity-90',
+            'disabled:cursor-not-allowed disabled:opacity-50'
+          )}
+        >
+          {adding ? t('addingBundle') : t('addBundleItem')}
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/components/cart/cart-item.tsx

@@ -1,153 +1,152 @@
-'use client';
-
-import { useState } from 'react';
-import Image from 'next/image';
-import type { CartItem as CartItemType } from 'brainerce';
-import { getCartItemImage, formatPrice } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useTranslations } from '@/lib/translations';
-import { useStoreInfo } from '@/providers/store-provider';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { cn } from '@/lib/utils';
-
-interface CartItemProps {
-  item: CartItemType;
-  onUpdate: () => void;
-  className?: string;
-}
-
-export function CartItem({ item, onUpdate, className }: CartItemProps) {
-  const t = useTranslations('common');
-  const td = useTranslations('productDetail');
-  const { storeInfo } = useStoreInfo();
-  const currency = storeInfo?.currency || process.env.NEXT_PUBLIC_STORE_CURRENCY || 'USD';
-  const [updating, setUpdating] = useState(false);
-  const [removing, setRemoving] = useState(false);
-
-  const productName = item.product.name;
-  const imageUrl = getCartItemImage(item);
-  const variantName = item.variant?.name;
-  const unitPrice = parseFloat(item.unitPrice);
-  const lineTotal = unitPrice * item.quantity;
-
-  async function handleQuantityChange(newQuantity: number) {
-    if (newQuantity < 1 || updating) return;
-
-    try {
-      setUpdating(true);
-      const client = getClient();
-      await client.smartUpdateCartItem(item.productId, newQuantity, item.variantId || undefined);
-      onUpdate();
-    } catch (err) {
-      console.error('Failed to update quantity:', err);
-    } finally {
-      setUpdating(false);
-    }
-  }
-
-  async function handleRemove() {
-    if (removing) return;
-
-    try {
-      setRemoving(true);
-      const client = getClient();
-      await client.smartRemoveFromCart(item.productId, item.variantId || undefined);
-      onUpdate();
-    } catch (err) {
-      console.error('Failed to remove item:', err);
-    } finally {
-      setRemoving(false);
-    }
-  }
-
-  return (
-    <div
-      className={cn(
-        'border-border flex gap-4 border-b py-4 last:border-0',
-        (updating || removing) && 'opacity-60',
-        className
-      )}
-    >
-      {/* Image */}
-      <div className="bg-muted relative h-20 w-20 flex-shrink-0 overflow-hidden rounded">
-        {imageUrl ? (
-          <Image src={imageUrl} alt={productName} fill sizes="80px" className="object-cover" />
-        ) : (
-          <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
-            <svg className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={1.5}
-                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-              />
-            </svg>
-          </div>
-        )}
-      </div>
-
-      {/* Details */}
-      <div className="min-w-0 flex-1">
-        <h3 className="text-foreground truncate text-sm font-medium">{productName}</h3>
-
-        {/* Variant name */}
-        {variantName && <p className="text-muted-foreground mt-1 text-xs">{variantName}</p>}
-
-        {/* Unit price */}
-        <p className="text-muted-foreground mt-1 text-sm">
-          {formatPrice(unitPrice, { currency }) as string}
-        </p>
-
-        {/* Quantity controls */}
-        <div className="mt-2 flex items-center gap-3">
-          <div className="border-border flex items-center rounded border">
-            <button
-              type="button"
-              onClick={() => handleQuantityChange(item.quantity - 1)}
-              disabled={updating || item.quantity <= 1}
-              className="text-foreground hover:bg-muted px-2 py-1 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40"
-              aria-label={td('decreaseQuantity')}
-            >
-              -
-            </button>
-            <span className="text-foreground min-w-[2.5rem] px-3 py-1 text-center text-sm font-medium">
-              {updating ? (
-                <LoadingSpinner
-                  size="sm"
-                  className="border-muted-foreground/30 border-t-foreground mx-auto"
-                />
-              ) : (
-                item.quantity
-              )}
-            </span>
-            <button
-              type="button"
-              onClick={() => handleQuantityChange(item.quantity + 1)}
-              disabled={updating}
-              className="text-foreground hover:bg-muted px-2 py-1 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40"
-              aria-label={td('increaseQuantity')}
-            >
-              +
-            </button>
-          </div>
-
-          <button
-            type="button"
-            onClick={handleRemove}
-            disabled={removing}
-            className="text-destructive hover:text-destructive/80 text-xs transition-colors disabled:opacity-40"
-          >
-            {removing ? t('removing') : t('remove')}
-          </button>
-        </div>
-      </div>
-
-      {/* Line total */}
-      <div className="flex-shrink-0 text-end">
-        <span className="text-foreground text-sm font-medium">
-          {formatPrice(lineTotal, { currency }) as string}
-        </span>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import type { CartItem as CartItemType } from 'brainerce';
+import { getCartItemImage, formatPrice } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+import { useTranslations } from '@/lib/translations';
+import { useCurrency } from '@/lib/use-currency';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { cn } from '@/lib/utils';
+
+interface CartItemProps {
+  item: CartItemType;
+  onUpdate: () => void;
+  className?: string;
+}
+
+export function CartItem({ item, onUpdate, className }: CartItemProps) {
+  const t = useTranslations('common');
+  const td = useTranslations('productDetail');
+  const currency = useCurrency();
+  const [updating, setUpdating] = useState(false);
+  const [removing, setRemoving] = useState(false);
+
+  const productName = item.product.name;
+  const imageUrl = getCartItemImage(item);
+  const variantName = item.variant?.name;
+  const unitPrice = parseFloat(item.unitPrice);
+  const lineTotal = unitPrice * item.quantity;
+
+  async function handleQuantityChange(newQuantity: number) {
+    if (newQuantity < 1 || updating) return;
+
+    try {
+      setUpdating(true);
+      const client = getClient();
+      await client.smartUpdateCartItem(item.productId, newQuantity, item.variantId || undefined);
+      onUpdate();
+    } catch (err) {
+      console.error('Failed to update quantity:', err);
+    } finally {
+      setUpdating(false);
+    }
+  }
+
+  async function handleRemove() {
+    if (removing) return;
+
+    try {
+      setRemoving(true);
+      const client = getClient();
+      await client.smartRemoveFromCart(item.productId, item.variantId || undefined);
+      onUpdate();
+    } catch (err) {
+      console.error('Failed to remove item:', err);
+    } finally {
+      setRemoving(false);
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        'border-border flex gap-4 border-b py-4 last:border-0',
+        (updating || removing) && 'opacity-60',
+        className
+      )}
+    >
+      {/* Image */}
+      <div className="bg-muted relative h-20 w-20 flex-shrink-0 overflow-hidden rounded">
+        {imageUrl ? (
+          <Image src={imageUrl} alt={productName} fill sizes="80px" className="object-cover" />
+        ) : (
+          <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
+            <svg className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+              />
+            </svg>
+          </div>
+        )}
+      </div>
+
+      {/* Details */}
+      <div className="min-w-0 flex-1">
+        <h3 className="text-foreground truncate text-sm font-medium">{productName}</h3>
+
+        {/* Variant name */}
+        {variantName && <p className="text-muted-foreground mt-1 text-xs">{variantName}</p>}
+
+        {/* Unit price */}
+        <p className="text-muted-foreground mt-1 text-sm">
+          {formatPrice(unitPrice, { currency }) as string}
+        </p>
+
+        {/* Quantity controls */}
+        <div className="mt-2 flex items-center gap-3">
+          <div className="border-border flex items-center rounded border">
+            <button
+              type="button"
+              onClick={() => handleQuantityChange(item.quantity - 1)}
+              disabled={updating || item.quantity <= 1}
+              className="text-foreground hover:bg-muted px-2 py-1 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+              aria-label={td('decreaseQuantity')}
+            >
+              -
+            </button>
+            <span className="text-foreground min-w-[2.5rem] px-3 py-1 text-center text-sm font-medium">
+              {updating ? (
+                <LoadingSpinner
+                  size="sm"
+                  className="border-muted-foreground/30 border-t-foreground mx-auto"
+                />
+              ) : (
+                item.quantity
+              )}
+            </span>
+            <button
+              type="button"
+              onClick={() => handleQuantityChange(item.quantity + 1)}
+              disabled={updating}
+              className="text-foreground hover:bg-muted px-2 py-1 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+              aria-label={td('increaseQuantity')}
+            >
+              +
+            </button>
+          </div>
+
+          <button
+            type="button"
+            onClick={handleRemove}
+            disabled={removing}
+            className="text-destructive hover:text-destructive/80 text-xs transition-colors disabled:opacity-40"
+          >
+            {removing ? t('removing') : t('remove')}
+          </button>
+        </div>
+      </div>
+
+      {/* Line total */}
+      <div className="flex-shrink-0 text-end">
+        <span className="text-foreground text-sm font-medium">
+          {formatPrice(lineTotal, { currency }) as string}
+        </span>
+      </div>
+    </div>
+  );
+}