base logig pages cart shipping and payment

src/app/cart/shipping/page.tsx

@@ -1,11 +1,63 @@
+'use client'
 import CartSummary from '@/components/CartSummary'
 import Layout from '@/hoc/Layout'
 import { NextPage } from 'next'
 import CartItem from '../components/CartItem'
 import TitleBack from '../components/TitleBack'
 import { Location } from 'iconsax-react'
+import { useGetCart, useShippingCost } from '../hooks/useCartData'
+import { CartItemType } from '../types/Types'
+import { useGetProfile } from '@/app/profile/hooks/useProfileData'
+import Link from 'next/link'
 
 const CartShipping: NextPage = () => {
+
+    const { data: cartData, isLoading: cartLoading, error: cartError } = useGetCart()
+    const { data: shippingData, isLoading: shippingLoading, error: shippingError } = useShippingCost()
+    const { data: profileData, isLoading: profileLoading, error: profileError } = useGetProfile()
+
+    if (cartLoading || shippingLoading || profileLoading) {
+        return (
+            <div className="mt-14 px-4 sm:px-6 lg:px-20">
+                <div className="flex items-center justify-center h-64">
+                    <div className="text-lg">در حال بارگذاری...</div>
+                </div>
+            </div>
+        )
+    }
+
+    if (cartError || shippingError || profileError) {
+        return (
+            <div className="mt-14 px-4 sm:px-6 lg:px-20">
+                <div className="flex items-center justify-center h-64">
+                    <div className="text-lg text-red-500">خطا در بارگذاری اطلاعات</div>
+                </div>
+            </div>
+        )
+    }
+
+    const cart = cartData?.results?.cart
+    const items = cart?.items || []
+    const profile = profileData?.results?.info
+
+    if (!items.length) {
+        return (
+            <div className="mt-14 px-4 sm:px-6 lg:px-20">
+                <div className="flex items-center justify-center h-64">
+                    <div className="text-lg">سبد خرید شما خالی است</div>
+                </div>
+            </div>
+        )
+    }
+
+    // محاسبه هزینه ارسال
+    const totalShippingCost = shippingData?.results?.shipping?.reduce((total, shop) => {
+        return total + (shop.shippers?.[0]?.totalShippingCost || 0)
+    }, 0) || 0
+
+    // محاسبه قیمت نهایی
+    const finalTotal = (cart?.payable_price || 0) + totalShippingCost
+
     return (
         <div className="mt-14 px-4 sm:px-6 lg:px-20">
 
@@ -19,25 +71,39 @@ const CartShipping: NextPage = () => {
                                 <div>
                                     آدرس تحویل سفارش
                                 </div>
-                                <div className='mt-2 text-sm text-black'>
-                                    اراک خیابان امام حسن غریبی خیابان 123
-                                </div>
-                                <div className='mt-2'>حمید ضرغامی</div>
+                                {profile?.userAddress && (
+                                    <div className='mt-2 text-sm text-black'>
+                                        {profile.userAddress.address}
+                                        {profile.userAddress.city && `، ${profile.userAddress.city.name}`}
+                                        {profile.userAddress.province && `، ${profile.userAddress.province.name}`}
+                                    </div>
+                                )}
                             </div>
                         </div>
-                        <div className='text-primary text-sm self-end sm:self-auto'>ویرایش</div>
+                        <Link href={'/profile'} className='text-primary text-sm self-end sm:self-auto'>ویرایش</Link>
                     </div>
                     <div className="flex-1 mt-5 border border-border p-4 sm:p-5 rounded-2xl">
-                        <CartItem noBorder />
-                        <CartItem />
+                        {items.map((item: CartItemType, index: number) => {
+                            if (!item || !item.product || !item.variant) {
+                                return null
+                            }
+                            return (
+                                <CartItem
+                                    key={`${item.product._id}-${item.variant._id}`}
+                                    item={item}
+                                    noBorder={index === 0}
+                                />
+                            )
+                        })}
                     </div>
                 </div>
                 <div className="w-full lg:w-[360px] lg:flex-shrink-0">
                     <CartSummary
-                        itemsCount={3}
-                        itemsPrice={580000}
-                        discount={580000}
-                        total={80580000}
+                        itemsCount={cart?.items_count || 0}
+                        itemsPrice={cart?.retail_price || 0}
+                        discount={cart?.total_discount || 0}
+                        shippingCost={totalShippingCost}
+                        total={finalTotal}
                         confirmHref="/cart/payment"
                         confirmLabel="پرداخت"
                         className="w-full"