create-brainerce-store 1.27.4 → 1.27.6

package/templates/nextjs/base/src/app/payment-complete/page.tsx

@@ -1,59 +1,59 @@
-'use client';
-
-import { useEffect } from 'react';
-import { useSearchParams } from 'next/navigation';
-import { Suspense } from 'react';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-
-/**
- * Lightweight callback page for iframe-based payment providers (e.g. CardCom).
- *
- * After the customer pays on the provider's hosted page (rendered inside an
- * iframe on the checkout page), the provider redirects *inside the iframe* to
- * this page. We extract the relevant query params and send them to the parent
- * window via postMessage so the checkout page can verify the payment
- * server-side and proceed to order confirmation.
- */
-function PaymentCompleteContent() {
-  const searchParams = useSearchParams();
-
-  useEffect(() => {
-    // Only send postMessage when running inside an iframe
-    if (window.parent === window) {
-      // Not in iframe — fallback: redirect to order-confirmation directly
-      const checkoutId = searchParams.get('checkout_id');
-      if (checkoutId) {
-        window.location.href = `/order-confirmation?${searchParams.toString()}`;
-      }
-      return;
-    }
-
-    // Collect all query params from the provider redirect
-    const data: Record<string, string> = {};
-    searchParams.forEach((value, key) => {
-      data[key] = value;
-    });
-
-    window.parent.postMessage({ type: 'brainerce:payment-complete', data }, window.location.origin);
-  }, [searchParams]);
-
-  return (
-    <div className="flex min-h-[200px] items-center justify-center">
-      <LoadingSpinner size="lg" />
-    </div>
-  );
-}
-
-export default function PaymentCompletePage() {
-  return (
-    <Suspense
-      fallback={
-        <div className="flex min-h-[200px] items-center justify-center">
-          <LoadingSpinner size="lg" />
-        </div>
-      }
-    >
-      <PaymentCompleteContent />
-    </Suspense>
-  );
-}
+'use client';
+
+import { useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { Suspense } from 'react';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+
+/**
+ * Lightweight callback page for iframe-based payment providers (e.g. CardCom).
+ *
+ * After the customer pays on the provider's hosted page (rendered inside an
+ * iframe on the checkout page), the provider redirects *inside the iframe* to
+ * this page. We extract the relevant query params and send them to the parent
+ * window via postMessage so the checkout page can verify the payment
+ * server-side and proceed to order confirmation.
+ */
+function PaymentCompleteContent() {
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    // Only send postMessage when running inside an iframe
+    if (window.parent === window) {
+      // Not in iframe — fallback: redirect to order-confirmation directly
+      const checkoutId = searchParams.get('checkout_id');
+      if (checkoutId) {
+        window.location.href = `/order-confirmation?${searchParams.toString()}`;
+      }
+      return;
+    }
+
+    // Collect all query params from the provider redirect
+    const data: Record<string, string> = {};
+    searchParams.forEach((value, key) => {
+      data[key] = value;
+    });
+
+    window.parent.postMessage({ type: 'brainerce:payment-complete', data }, window.location.origin);
+  }, [searchParams]);
+
+  return (
+    <div className="flex min-h-[200px] items-center justify-center">
+      <LoadingSpinner size="lg" />
+    </div>
+  );
+}
+
+export default function PaymentCompletePage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-[200px] items-center justify-center">
+          <LoadingSpinner size="lg" />
+        </div>
+      }
+    >
+      <PaymentCompleteContent />
+    </Suspense>
+  );
+}

package/templates/nextjs/base/src/app/products/[slug]/product-client-section.tsx

@@ -157,20 +157,35 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
   // Price info - use variant price if selected, else product price
   const priceInfo = useMemo(() => {
     if (selectedVariant?.price) {
+      const variantBase = parseFloat(selectedVariant.price);
+      const variantSale = selectedVariant.salePrice ? parseFloat(selectedVariant.salePrice) : null;
+      const variantEffective =
+        variantSale != null && variantSale < variantBase ? variantSale : variantBase;
+
+      // Overlay any product-level discount rule onto the variant price using the rule's ratio
+      if (product.discount) {
+        const ruleOriginal = parseFloat(product.discount.originalPrice) || 0;
+        const ruleDiscounted = parseFloat(product.discount.discountedPrice) || 0;
+        const ratio = ruleOriginal > 0 ? ruleDiscounted / ruleOriginal : 1;
+        const discounted = variantEffective * ratio;
+        const amount = Math.max(0, variantEffective - discounted);
+        return {
+          price: discounted,
+          originalPrice: variantEffective,
+          isOnSale: discounted < variantEffective,
+          discountAmount: amount,
+          discountPercent:
+            variantEffective > 0 ? Math.round((amount / variantEffective) * 100) : 0,
+        };
+      }
+
       return {
-        price: parseFloat(selectedVariant.salePrice || selectedVariant.price),
-        originalPrice: parseFloat(selectedVariant.price),
-        isOnSale:
-          selectedVariant.salePrice != null &&
-          parseFloat(selectedVariant.salePrice) < parseFloat(selectedVariant.price),
+        price: variantEffective,
+        originalPrice: variantBase,
+        isOnSale: variantEffective < variantBase,
         discountPercent:
-          selectedVariant.salePrice != null &&
-          parseFloat(selectedVariant.salePrice) < parseFloat(selectedVariant.price)
-            ? Math.round(
-                ((parseFloat(selectedVariant.price) - parseFloat(selectedVariant.salePrice)) /
-                  parseFloat(selectedVariant.price)) *
-                  100
-              )
+          variantEffective < variantBase && variantBase > 0
+            ? Math.round(((variantBase - variantEffective) / variantBase) * 100)
             : 0,
       };
     }

package/templates/nextjs/base/src/app/products/page.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { Suspense, useEffect, useState, useCallback, useRef } from 'react';
-import { useSearchParams, useRouter } from 'next/navigation';
+import { useSearchParams } from 'next/navigation';
+import { useRouter } from '@/lib/navigation';
 import type { Product } from 'brainerce';
 import type { ProductQueryParams } from 'brainerce';
 import { getClient } from '@/lib/brainerce';
@@ -378,7 +379,9 @@ function ProductsContent() {
             >
               <option value="">{t('allBrands')}</option>
               {brands.map((b) => (
-                <option key={b.id} value={b.id}>{b.name}</option>
+                <option key={b.id} value={b.id}>
+                  {b.name}
+                </option>
               ))}
             </select>
           )}
@@ -392,7 +395,9 @@ function ProductsContent() {
             >
               <option value="">{t('allTags')}</option>
               {tags.map((tg) => (
-                <option key={tg.id} value={tg.id}>{tg.name}</option>
+                <option key={tg.id} value={tg.id}>
+                  {tg.name}
+                </option>
               ))}
             </select>
           )}

package/templates/nextjs/base/src/app/register/page.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import Link from 'next/link';
+import { useRouter, Link } from '@/lib/navigation';
 import { useAuth } from '@/providers/store-provider';
 import { proxyRegister } from '@/lib/auth';
 import { RegisterForm } from '@/components/auth/register-form';

package/templates/nextjs/base/src/app/reset-password/page.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import Link from 'next/link';
+import { useRouter, Link } from '@/lib/navigation';
 import { proxyResetPassword } from '@/lib/auth';
 import { LoadingSpinner } from '@/components/shared/loading-spinner';
 import { useTranslations } from '@/lib/translations';

package/templates/nextjs/base/src/app/verify-email/page.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import { Suspense, useState, useRef, useEffect, useCallback } from 'react';
-import { useRouter } from 'next/navigation';
-import Link from 'next/link';
+import { useRouter, Link } from '@/lib/navigation';
 import { useAuth } from '@/providers/store-provider';
 import { proxyVerifyEmail, proxyResendVerification } from '@/lib/auth';
 import { LoadingSpinner } from '@/components/shared/loading-spinner';

package/templates/nextjs/base/src/components/auth/login-form.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import Link from 'next/link';
+import { Link } from '@/lib/navigation';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
 import { LoadingSpinner } from '@/components/shared/loading-spinner';