create-brainerce-store 1.9.1 → 1.11.0

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.9.0",
+      version: "1.11.0",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"

package/messages/en.json

@@ -77,7 +77,11 @@
     "increaseQuantity": "Increase quantity",
     "youMayAlsoLike": "You May Also Like",
     "similarProducts": "Similar Products",
-    "upgradeYourChoice": "Upgrade Your Choice"
+    "upgradeYourChoice": "Upgrade Your Choice",
+    "digitalProduct": "Digital Product",
+    "instantDownload": "Instant Download",
+    "downloadAfterPurchase": "Available for download after purchase",
+    "filesIncluded": "{count} files included"
   },
   "cart": {
     "pageTitle": "Shopping Cart",
@@ -261,7 +265,13 @@
     "save": "Save",
     "cancel": "Cancel",
     "profileUpdated": "Profile updated successfully",
-    "profileUpdateFailed": "Failed to update profile"
+    "profileUpdateFailed": "Failed to update profile",
+    "downloads": "Downloads",
+    "downloadFile": "Download",
+    "downloadsRemaining": "{used} of {limit} downloads used",
+    "unlimitedDownloads": "Unlimited downloads",
+    "expiresAt": "Expires {date}",
+    "noExpiry": "No expiry"
   },
   "orderConfirmation": {
     "pageTitle": "Order Confirmation",

package/messages/he.json

@@ -77,7 +77,11 @@
     "increaseQuantity": "הגדל כמות",
     "youMayAlsoLike": "אולי גם תאהבו",
     "similarProducts": "מוצרים דומים",
-    "upgradeYourChoice": "שדרגו את הבחירה"
+    "upgradeYourChoice": "שדרגו את הבחירה",
+    "digitalProduct": "מוצר דיגיטלי",
+    "instantDownload": "הורדה מיידית",
+    "downloadAfterPurchase": "זמין להורדה לאחר רכישה",
+    "filesIncluded": "{count} קבצים כלולים"
   },
   "cart": {
     "pageTitle": "עגלת קניות",
@@ -261,7 +265,13 @@
     "save": "שמירה",
     "cancel": "ביטול",
     "profileUpdated": "הפרופיל עודכן בהצלחה",
-    "profileUpdateFailed": "עדכון הפרופיל נכשל"
+    "profileUpdateFailed": "עדכון הפרופיל נכשל",
+    "downloads": "הורדות",
+    "downloadFile": "הורד",
+    "downloadsRemaining": "{used} מתוך {limit} הורדות נוצלו",
+    "unlimitedDownloads": "הורדות ללא הגבלה",
+    "expiresAt": "פג תוקף {date}",
+    "noExpiry": "ללא תפוגה"
   },
   "orderConfirmation": {
     "pageTitle": "אישור הזמנה",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.9.1",
+  "version": "1.11.0",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"

package/templates/nextjs/base/src/app/products/[slug]/page.tsx

@@ -10,7 +10,12 @@ import type {
   ProductImage,
   ProductMetafield,
   ProductRecommendationsResponse,
+  DownloadFile,
 } from 'brainerce';
+
+type ProductWithRecommendations = Product & {
+  recommendations?: ProductRecommendationsResponse;
+};
 import { getProductPriceInfo, getDescriptionContent } from 'brainerce';
 import { getClient } from '@/lib/brainerce';
 import { useCart } from '@/providers/store-provider';
@@ -112,7 +117,7 @@ export default function ProductDetailPage() {
   const { refreshCart } = useCart();
   const t = useTranslations('productDetail');
   const tc = useTranslations('common');
-  const [product, setProduct] = useState<Product | null>(null);
+  const [product, setProduct] = useState<ProductWithRecommendations | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [selectedVariant, setSelectedVariant] = useState<ProductVariant | null>(null);
@@ -120,9 +125,8 @@ export default function ProductDetailPage() {
   const [quantity, setQuantity] = useState(1);
   const [addingToCart, setAddingToCart] = useState(false);
   const [addedMessage, setAddedMessage] = useState(false);
-  const [recommendations, setRecommendations] = useState<ProductRecommendationsResponse | null>(
-    null
-  );
+
+  const recommendations = product?.recommendations ?? null;
 
   // Load product
   useEffect(() => {
@@ -132,15 +136,12 @@ export default function ProductDetailPage() {
         setError(null);
         const client = getClient();
         const p = await client.getProductBySlug(slug);
-        setProduct(p);
+        setProduct(p as ProductWithRecommendations);
 
         // Auto-select first variant
         if (p.variants && p.variants.length > 0) {
           setSelectedVariant(p.variants[0]);
         }
-
-        // Load recommendations in background
-        client.getProductRecommendations(p.id).then(setRecommendations).catch(() => {});
       } catch {
         setError(t('notFound'));
       } finally {
@@ -341,8 +342,43 @@ export default function ProductDetailPage() {
             size="lg"
           />
 
-          {/* Stock */}
-          <StockBadge inventory={inventory} lowStockThreshold={5} />
+          {/* Stock / Digital badge */}
+          {product.isDownloadable ? (
+            <span className="inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-800 dark:bg-green-950/30 dark:text-green-400">
+              <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+              </svg>
+              {t('instantDownload')}
+            </span>
+          ) : (
+            <StockBadge inventory={inventory} lowStockThreshold={5} />
+          )}
+
+          {/* Downloadable files info */}
+          {product.isDownloadable && product.downloads && product.downloads.length > 0 && (
+            <div className="bg-muted/50 rounded-lg border p-4">
+              <p className="text-foreground mb-2 text-sm font-medium">
+                {t('filesIncluded', { count: product.downloads.length })}
+              </p>
+              <ul className="space-y-1.5">
+                {product.downloads.map((file: DownloadFile) => (
+                  <li key={file.id} className="text-muted-foreground flex items-center gap-2 text-sm">
+                    <svg className="h-4 w-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                    </svg>
+                    <span className="truncate">{file.name}</span>
+                    {file.size && (
+                      <span className="flex-shrink-0 text-xs">
+                        ({file.size < 1024 * 1024
+                          ? `${(file.size / 1024).toFixed(0)} KB`
+                          : `${(file.size / (1024 * 1024)).toFixed(1)} MB`})
+                      </span>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
 
           {/* Variant Selector */}
           {product.type === 'VARIABLE' && product.variants && product.variants.length > 0 && (
@@ -406,6 +442,13 @@ export default function ProductDetailPage() {
             </button>
           </div>
 
+          {/* Download after purchase note */}
+          {product.isDownloadable && (
+            <p className="text-muted-foreground text-sm">
+              {t('downloadAfterPurchase')}
+            </p>
+          )}
+
           {/* Description */}
           {description && (
             <div className="border-border border-t pt-4">

package/templates/nextjs/base/src/components/account/order-history.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import Image from 'next/image';
-import type { Order, OrderStatus } from 'brainerce';
+import type { Order, OrderStatus, OrderDownloadLink } from 'brainerce';
 import { formatPrice } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
 
@@ -187,6 +188,11 @@ function OrderCard({ order }: { order: Order }) {
             </div>
           ))}
 
+          {/* Downloads section */}
+          {order.hasDownloads && (
+            <OrderDownloads orderId={order.id} />
+          )}
+
           <OrderFinancialSummary order={order} currency={currency} />
         </div>
       )}
@@ -194,6 +200,71 @@ function OrderCard({ order }: { order: Order }) {
   );
 }
 
+function OrderDownloads({ orderId }: { orderId: string }) {
+  const t = useTranslations('account');
+  const [downloads, setDownloads] = useState<OrderDownloadLink[] | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function fetch() {
+      try {
+        const client = getClient();
+        const links = await client.getOrderDownloads(orderId);
+        if (!cancelled) setDownloads(links);
+      } catch {
+        if (!cancelled) setDownloads([]);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    fetch();
+    return () => { cancelled = true; };
+  }, [orderId]);
+
+  if (loading) {
+    return (
+      <div className="border-border border-t pt-2">
+        <p className="text-muted-foreground animate-pulse text-xs">{t('downloads')}...</p>
+      </div>
+    );
+  }
+
+  if (!downloads || downloads.length === 0) return null;
+
+  return (
+    <div className="border-border space-y-2 border-t pt-2">
+      <p className="text-foreground text-sm font-medium">{t('downloads')}</p>
+      {downloads.map((link, idx) => (
+        <div key={idx} className="flex items-center gap-3">
+          <div className="min-w-0 flex-1">
+            <p className="text-foreground truncate text-sm">{link.fileName}</p>
+            <p className="text-muted-foreground text-xs">
+              {link.productName}
+              {' · '}
+              {link.downloadLimit != null
+                ? t('downloadsRemaining', { used: link.downloadsUsed, limit: link.downloadLimit })
+                : t('unlimitedDownloads')}
+              {' · '}
+              {link.expiresAt
+                ? t('expiresAt', { date: new Date(link.expiresAt).toLocaleDateString() })
+                : t('noExpiry')}
+            </p>
+          </div>
+          <a
+            href={link.downloadUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="bg-primary text-primary-foreground flex-shrink-0 rounded px-3 py-1 text-xs font-medium hover:opacity-90"
+          >
+            {t('downloadFile')}
+          </a>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 function OrderFinancialSummary({ order, currency }: { order: Order; currency: string }) {
   const tc = useTranslations('common');
   const totalAmount = order.totalAmount || order.total || '0';

package/templates/nextjs/base/src/components/products/product-card.tsx

@@ -17,6 +17,7 @@ interface ProductCardProps {
 
 export function ProductCard({ product, className }: ProductCardProps) {
   const t = useTranslations('common');
+  const tp = useTranslations('productDetail');
   const { price, originalPrice, isOnSale } = getProductPriceInfo(product);
   const mainImage = product.images?.[0];
   const imageUrl = mainImage?.url || null;
@@ -61,6 +62,11 @@ export function ProductCard({ product, className }: ProductCardProps) {
             </span>
           )}
           <DiscountBadge discount={product.discount} />
+          {product.isDownloadable && (
+            <span className="bg-primary text-primary-foreground rounded px-2 py-1 text-xs font-bold">
+              {tp('digitalProduct')}
+            </span>
+          )}
         </div>
       </div>
 

package/templates/nextjs/base/src/components/products/recommendation-section.tsx

@@ -13,7 +13,8 @@ interface RecommendationCardProps {
 }
 
 function RecommendationCard({ item, className }: RecommendationCardProps) {
-  const imageUrl = item.images?.[0]?.url || null;
+  const firstImage = item.images?.[0];
+  const imageUrl = typeof firstImage === 'string' ? firstImage : firstImage?.url || null;
   const slug = item.slug || item.id;
   const basePrice = parseFloat(item.basePrice);
   const salePrice = item.salePrice ? parseFloat(item.salePrice) : undefined;