feat: auxiliary pages migrated to Next.js (Blog, Videos, Track, Success)

2026-06-12 01:17:03 +03:30 · 2026-06-12 01:17:03 +03:30 · ee0b8a5ff8
commit ee0b8a5ff8
parent 976dfcd610
8 changed files with 48 additions and 15 deletions
--- a/frontend/application/app/blog/page.tsx
+++ b/frontend/application/app/blog/page.tsx
@ -0,0 +1,5 @@
+import BlogPage from "../../components/BlogPage";
+
+export default function Blog() {
+  return <BlogPage />;
+}
--- a/frontend/application/app/checkout/success/[id]/page.tsx
+++ b/frontend/application/app/checkout/success/[id]/page.tsx
@ -0,0 +1,6 @@
+import OrderSuccess from "../../../../components/OrderSuccess";
+
+export default async function SuccessPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  return <OrderSuccess orderId={id} />;
+}
--- a/frontend/application/app/track/page.tsx
+++ b/frontend/application/app/track/page.tsx
@ -0,0 +1,5 @@
+import OrderTracking from "../../components/OrderTracking";
+
+export default function TrackPage() {
+  return <OrderTracking />;
+}
--- a/frontend/application/app/videos/page.tsx
+++ b/frontend/application/app/videos/page.tsx
@ -0,0 +1,5 @@
+import VideosPage from "../../components/VideosPage";
+
+export default function Videos() {
+  return <VideosPage />;
+}
--- a/frontend/application/components/BlogPage.tsx
+++ b/frontend/application/components/BlogPage.tsx
@ -42,7 +42,10 @@ const BLOG_POSTS = [
  }
 ];

-export default function BlogPage({ onBack, onProductClick }: { onBack: () => void, onProductClick: (p: Product) => void }) {
+import { useRouter } from 'next/navigation';
+
+export default function BlogPage() {
+  const router = useRouter();
  const [selectedPost, setSelectedPost] = React.useState<typeof BLOG_POSTS[0] | null>(null);
  const [products, setProducts] = React.useState<Product[]>([]);

@ -56,7 +59,7 @@ export default function BlogPage({ onBack, onProductClick }: { onBack: () => voi
        <div className="max-w-7xl mx-auto">
          {/* Breadcrumbs */}
          <div className="flex items-center gap-2 text-[10px] font-black text-medical-gray-400 uppercase tracking-widest mb-10">
-             <span className="cursor-pointer hover:text-canina-blue" onClick={onBack}>خانه</span>
+             <span className="cursor-pointer hover:text-canina-blue" onClick={() => router.push('/')}>خانه</span>
             <ChevronRight className="w-2.5 h-2.5" />
             <span className="cursor-pointer hover:text-canina-blue" onClick={() => setSelectedPost(null)}>مجله سلامت</span>
             <ChevronRight className="w-2.5 h-2.5" />
@ -123,7 +126,7 @@ export default function BlogPage({ onBack, onProductClick }: { onBack: () => voi
                      {products.slice(4, 7).map(p => (
                        <div 
                           key={p.id}
-                           onClick={() => onProductClick(p)}
+                           onClick={() => router.push(`/shop/${p.id}`)}
                           className="bg-white/10 border border-white/20 p-4 rounded-3xl flex items-center gap-4 cursor-pointer hover:bg-white/20 transition-all group"
                        >
                           <div className="w-16 h-16 bg-white rounded-2xl p-2 shrink-0 group-hover:scale-110 transition-transform">
@ -182,7 +185,7 @@ export default function BlogPage({ onBack, onProductClick }: { onBack: () => voi
              </p>
           </div>
           <button 
-             onClick={onBack}
+             onClick={() => router.push('/')}
             className="px-8 py-3 bg-white border border-medical-gray-200 rounded-2xl text-medical-gray-700 shadow-sm flex items-center gap-2 font-black hover:bg-medical-gray-50 transition-all"
           >
             <ChevronRight className="w-5 h-5" />
@ -316,7 +319,7 @@ export default function BlogPage({ onBack, onProductClick }: { onBack: () => voi
                      تمامی مقالات این وبلاگ بر اساس کاتالوگ‌های رسمی و نتایج آزمایشگاهی کمپانی کانی‌نا آلمان تدوین شده است.
                  </p>
                  <button 
-                    onClick={() => onBack()}
+                    onClick={() => router.push('/shop')}
                    className="bg-white text-canina-blue px-8 py-4 rounded-2xl font-black hover:scale-105 transition-transform"
                  >
                    مشاهده محصولات تخصصی
@ -326,7 +329,7 @@ export default function BlogPage({ onBack, onProductClick }: { onBack: () => voi
                  {products.slice(0, 2).map((p) => (
                    <div 
                      key={p.id}
-                      onClick={() => onProductClick(p)}
+                      onClick={() => router.push(`/shop/${p.id}`)}
                      className="bg-white/10 border border-white/20 p-6 rounded-3xl cursor-pointer hover:bg-white/20 transition-all text-center group"
                    >
                       <img src={p.image} alt={p.name} className="w-20 h-20 mx-auto mb-4 object-contain filter brightness-0 invert group-hover:scale-110 transition-transform" />
--- a/frontend/application/components/OrderSuccess.tsx
+++ b/frontend/application/components/OrderSuccess.tsx
@ -13,7 +13,10 @@ import {
 import { useCartStore } from "../store/cartStore";
 import { usePetStore } from "../store/usePetStore";

-export default function OrderSuccess({ orderId, onNavigate }: { orderId: string; onNavigate: (v: any) => void }) {
+import { useRouter } from 'next/navigation';
+
+export default function OrderSuccess({ orderId }: { orderId: string }) {
+  const router = useRouter();
  const { orders } = useCartStore();
  const { getActivePet } = usePetStore();
  const order = orders.find(o => o.id === orderId);
@ -90,13 +93,13 @@ export default function OrderSuccess({ orderId, onNavigate }: { orderId: string;

          <div className="space-y-4">
            <button 
-              onClick={() => onNavigate('order-tracking')}
+              onClick={() => router.push('/track')}
              className="w-full bg-medical-gray-900 text-white py-5 rounded-2xl font-black text-lg hover:bg-canina-blue transition-all"
            >
              مشاهده و پیگیری زنده سفارش
            </button>
            <button 
-              onClick={() => onNavigate('shop')}
+              onClick={() => router.push('/shop')}
              className="flex items-center justify-center gap-2 w-full text-medical-gray-400 font-bold hover:text-canina-blue transition-colors"
            >
              <ChevronLeft className="w-4 h-4" />
--- a/frontend/application/components/OrderTracking.tsx
+++ b/frontend/application/components/OrderTracking.tsx
@ -14,7 +14,10 @@ import {
 } from "lucide-react";
 import { useCartStore } from "../store/cartStore";

-export default function OrderTracking({ onNavigate, onBack }: { onNavigate: (v: any) => void, onBack?: () => void }) {
+import { useRouter } from 'next/navigation';
+
+export default function OrderTracking() {
+  const router = useRouter();
  const { orders } = useCartStore();
  const [searchId, setSearchId] = useState("");
  const [activeOrder, setActiveOrder] = useState(orders[0] || null);
@ -40,7 +43,7 @@ export default function OrderTracking({ onNavigate, onBack }: { onNavigate: (v:
        {/* Mobile Navigation & Breadcrumbs */}
        <div className="lg:hidden mb-12 space-y-4">
          <button 
-            onClick={onBack || (() => onNavigate('home'))}
+            onClick={() => router.back()}
            className="flex items-center gap-2 text-medical-gray-500 font-bold hover:text-canina-blue transition-colors"
          >
            <ChevronRight className="w-5 h-5 font-vazir" />
@ -48,7 +51,7 @@ export default function OrderTracking({ onNavigate, onBack }: { onNavigate: (v:
          </button>
          
          <div className="flex items-center gap-2 text-[10px] font-black text-medical-gray-400 uppercase tracking-widest overflow-x-auto whitespace-nowrap pb-2">
-            <span className="cursor-pointer hover:text-canina-blue" onClick={onBack || (() => onNavigate('home'))}>کانینا</span>
+            <span className="cursor-pointer hover:text-canina-blue" onClick={() => router.push('/')}>کانینا</span>
            <ChevronLeft className="w-2.5 h-2.5" />
            <span className="text-canina-blue">پیگیری سفارش</span>
          </div>
@ -56,7 +59,7 @@ export default function OrderTracking({ onNavigate, onBack }: { onNavigate: (v:

        {/* Desktop Breadcrumbs */}
        <div className="hidden lg:flex items-center gap-2 text-[10px] font-black text-medical-gray-400 uppercase tracking-widest mb-12">
-           <span className="cursor-pointer hover:text-canina-blue" onClick={onBack || (() => onNavigate('home'))}>خانه</span>
+           <span className="cursor-pointer hover:text-canina-blue" onClick={() => router.push('/')}>خانه</span>
           <ChevronLeft className="w-2.5 h-2.5" />
           <span className="text-canina-blue">رهگیری هوشمند محموله</span>
        </div>
--- a/frontend/application/components/VideosPage.tsx
+++ b/frontend/application/components/VideosPage.tsx
@ -52,7 +52,10 @@ const ALL_VIDEOS = [
  }
 ];

-export default function VideosPage({ onBack }: { onBack: () => void }) {
+import { useRouter } from 'next/navigation';
+
+export default function VideosPage() {
+  const router = useRouter();
  const [selectedVideo, setSelectedVideo] = useState<typeof ALL_VIDEOS[0] | null>(null);
  const [search, setSearch] = useState("");

@ -75,7 +78,7 @@ export default function VideosPage({ onBack }: { onBack: () => void }) {
               </h1>
            </div>
            <button 
-              onClick={onBack}
+              onClick={() => router.push('/')}
              className="px-8 py-3 bg-white/5 border border-white/10 rounded-2xl text-white shadow-sm flex items-center gap-2 font-black hover:bg-white/10 transition-all"
            >
              <ChevronRight className="w-5 h-5" />