fix(dashboard,checkout): reuse PetProfile in user dashboard tabs and fix mobile horizontal overflow on checkout
All checks were successful
Deploy Canina / deploy (push) Successful in 1m35s
All checks were successful
Deploy Canina / deploy (push) Successful in 1m35s
This commit is contained in:
parsa aghaei
parent
884b0486cc
commit
13300236f3
@ -209,11 +209,11 @@ export default function CheckoutPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-medical-gray-50 py-12 px-6 font-vazir" dir="rtl">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="min-h-screen bg-medical-gray-50 py-6 sm:py-12 px-3 sm:px-6 font-vazir w-full max-w-full overflow-x-hidden" dir="rtl">
|
||||
<div className="max-w-7xl mx-auto w-full">
|
||||
|
||||
{/* Mobile Navigation & Breadcrumbs */}
|
||||
<div className="lg:hidden mb-10 space-y-4">
|
||||
<div className="lg:hidden mb-6 sm:mb-10 space-y-4">
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="flex items-center gap-2 text-medical-gray-500 font-bold hover:text-canina-blue transition-colors"
|
||||
@ -236,11 +236,11 @@ export default function CheckoutPage() {
|
||||
<span className="text-canina-blue">درگاه پرداخت امن و نهاییسازی</span>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-12 gap-8 lg:gap-12">
|
||||
<div className="grid lg:grid-cols-12 gap-6 lg:gap-12 w-full">
|
||||
{/* Main Form */}
|
||||
<div className="lg:col-span-8 space-y-6 sm:space-y-8">
|
||||
<div className="lg:col-span-8 space-y-6 sm:space-y-8 w-full min-w-0">
|
||||
{/* Step 1: Shipping */}
|
||||
<section className="bg-white rounded-[2rem] sm:rounded-[3rem] border border-medical-gray-200 p-5 sm:p-10 overflow-hidden relative">
|
||||
<section className="bg-white rounded-[2rem] sm:rounded-[3rem] border border-medical-gray-200 p-4 sm:p-10 overflow-hidden relative w-full">
|
||||
<div className="absolute top-0 right-0 w-2.5 sm:w-3 h-full bg-canina-blue opacity-20" />
|
||||
<div className="flex items-center gap-3 sm:gap-4 mb-6 sm:mb-10">
|
||||
<div className="w-10 h-10 sm:w-12 sm:h-12 bg-medical-gray-900 text-white rounded-2xl flex items-center justify-center font-black text-sm sm:text-base">۱</div>
|
||||
@ -248,25 +248,25 @@ export default function CheckoutPage() {
|
||||
</div>
|
||||
|
||||
{isLoggedIn && profile.addresses && profile.addresses.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="space-y-4 w-full">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-2">
|
||||
<p className="text-xs font-bold text-medical-gray-500">انتخاب آدرس جهت تحویل سفارش:</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowAddressModal(true)}
|
||||
className="flex items-center gap-1.5 text-canina-blue font-black text-xs hover:underline bg-canina-blue/5 border border-canina-blue/20 px-3 py-1.5 rounded-xl transition-all"
|
||||
className="self-start sm:self-auto flex items-center gap-1.5 text-canina-blue font-black text-xs hover:underline bg-canina-blue/5 border border-canina-blue/20 px-3 py-1.5 rounded-xl transition-all"
|
||||
>
|
||||
<PlusCircle className="w-4 h-4" />
|
||||
<span>+ افزودن آدرس جدید</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid gap-3">
|
||||
<div className="grid gap-3 w-full">
|
||||
{profile.addresses.map((addr) => (
|
||||
<div
|
||||
key={addr.id}
|
||||
onClick={() => setSelectedAddressId(addr.id)}
|
||||
className={cn(
|
||||
"p-4 rounded-2xl border-2 cursor-pointer transition-all flex items-start gap-3",
|
||||
"p-3 sm:p-4 rounded-2xl border-2 cursor-pointer transition-all flex items-start gap-2.5 sm:gap-3 w-full min-w-0 max-w-full overflow-hidden",
|
||||
selectedAddressId === addr.id ? "border-canina-blue bg-canina-blue/5" : "border-medical-gray-100 hover:border-medical-gray-200"
|
||||
)}
|
||||
>
|
||||
@ -275,17 +275,17 @@ export default function CheckoutPage() {
|
||||
name="selectedAddress"
|
||||
checked={selectedAddressId === addr.id}
|
||||
onChange={() => setSelectedAddressId(addr.id)}
|
||||
className="mt-1"
|
||||
className="mt-1 shrink-0"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<div className="flex-1 min-w-0 break-words">
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
<span className="font-black text-sm text-medical-gray-900">{addr.title}</span>
|
||||
{addr.isDefault && (
|
||||
<span className="bg-canina-blue/10 text-canina-blue text-[9px] font-black px-2 py-0.5 rounded-full">پیشفرض</span>
|
||||
<span className="bg-canina-blue/10 text-canina-blue text-[9px] font-black px-2 py-0.5 rounded-full shrink-0">پیشفرض</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-medical-gray-600 leading-relaxed truncate">{addr.province}، {addr.city}، {addr.detail}</p>
|
||||
<p className="text-[10px] text-medical-gray-400 font-bold mt-1">گیرنده: {addr.receptorName} | همراه: {toPersian(addr.phone)}</p>
|
||||
<p className="text-xs text-medical-gray-600 leading-relaxed break-words line-clamp-3 sm:line-clamp-none">{addr.province}، {addr.city}، {addr.detail}</p>
|
||||
<p className="text-[10px] text-medical-gray-400 font-bold mt-1 break-words">گیرنده: {addr.receptorName} | همراه: {toPersian(addr.phone)}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@ -36,9 +36,10 @@ import api from "../lib/services/api";
|
||||
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
export default function PetProfile({ initialView }: {
|
||||
export default function PetProfile({ initialView, advisorNeed, embedded = false }: {
|
||||
initialView?: "index" | "detail" | "add" | "edit",
|
||||
advisorNeed?: string | null
|
||||
advisorNeed?: string | null,
|
||||
embedded?: boolean
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const { pets, addPet, removePet, setActivePet, getActivePet, updatePet, addReminder, toggleReminder, addHealthLog } = usePetStore();
|
||||
@ -262,7 +263,7 @@ export default function PetProfile({ initialView }: {
|
||||
// 1. Pet Index Page
|
||||
if (view === "index") {
|
||||
return (
|
||||
<div className="min-h-screen bg-medical-gray-50 py-20 px-4 font-vazir" dir="rtl">
|
||||
<div className={cn(embedded ? "w-full font-vazir" : "min-h-screen bg-medical-gray-50 py-12 sm:py-20 px-2 sm:px-4 font-vazir")} dir="rtl">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="flex flex-col md:flex-row justify-between items-center mb-12 gap-6">
|
||||
<div>
|
||||
@ -386,7 +387,7 @@ export default function PetProfile({ initialView }: {
|
||||
if (view === "add" || view === "edit") {
|
||||
if (view === "add" && pets.length === 0) {
|
||||
return (
|
||||
<div className="min-h-screen bg-medical-gray-50 py-8 px-4 font-vazir" dir="rtl">
|
||||
<div className={cn(embedded ? "w-full font-vazir" : "min-h-screen bg-medical-gray-50 py-8 px-2 sm:px-4 font-vazir")} dir="rtl">
|
||||
<div className="max-w-5xl mx-auto space-y-6">
|
||||
{/* Render SmartAdvisor directly without redundant top banner */}
|
||||
<SmartAdvisor
|
||||
@ -403,9 +404,9 @@ export default function PetProfile({ initialView }: {
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="min-h-screen bg-medical-gray-50 py-20 px-4 font-vazir" dir="rtl">
|
||||
<div className={cn(embedded ? "w-full font-vazir" : "min-h-screen bg-medical-gray-50 py-12 sm:py-20 px-2 sm:px-4 font-vazir")} dir="rtl">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="bg-white rounded-[3rem] p-12 border border-medical-gray-200 shadow-2xl relative overflow-hidden">
|
||||
<div className="bg-white rounded-[2rem] sm:rounded-[3rem] p-6 sm:p-12 border border-medical-gray-200 shadow-2xl relative overflow-hidden">
|
||||
{/* Progress Bar */}
|
||||
<div className="absolute top-0 left-0 w-full h-1.5 bg-medical-gray-100 font-vazir">
|
||||
<motion.div
|
||||
@ -652,7 +653,7 @@ export default function PetProfile({ initialView }: {
|
||||
if (!activePet) return null;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-medical-gray-50 py-12 px-4 font-vazir" dir="rtl">
|
||||
<div className={cn(embedded ? "w-full font-vazir" : "min-h-screen bg-medical-gray-50 py-8 sm:py-12 px-2 sm:px-4 font-vazir")} dir="rtl">
|
||||
<div className="max-w-7xl mx-auto space-y-10">
|
||||
|
||||
{/* Navigation Bar */}
|
||||
|
||||
@ -14,6 +14,7 @@ import DeleteConfirmModal from "./DeleteConfirmModal";
|
||||
import TopUpModal from "./TopUpModal";
|
||||
import { ticketService, Ticket, TicketMessage } from "../lib/services/ticketService";
|
||||
import { usePetStore } from "../lib/store/usePetStore";
|
||||
import PetProfile from "./PetProfile";
|
||||
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
|
||||
@ -656,132 +657,8 @@ export default function UserDashboard() {
|
||||
)}
|
||||
|
||||
{activeTab === "pets" && (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h3 className="text-2xl font-black text-medical-gray-900 italic">پتهای من (حیوانات خانگی)</h3>
|
||||
<p className="text-xs text-medical-gray-500 mt-1 font-medium">مدیریت مشخصات، سوابق سلامت، رژیم غذایی و پت فعال</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => router.push('/profile')}
|
||||
className="px-6 py-3 bg-canina-blue text-white rounded-2xl font-black text-xs flex items-center gap-2 hover:bg-canina-dark transition-all shadow-lg shadow-canina-blue/10 cursor-pointer"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
افزودن پت جدید
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{(pets || []).length === 0 ? (
|
||||
<div className="text-center py-20 bg-white border-2 border-dashed border-medical-gray-200 rounded-[3rem] p-8">
|
||||
<div className="w-20 h-20 bg-canina-blue/10 rounded-full flex items-center justify-center text-canina-blue mx-auto mb-4">
|
||||
<Dog className="w-10 h-10" />
|
||||
</div>
|
||||
<h4 className="text-lg font-black text-medical-gray-900 mb-2">هنوز حیوانی ثبت نکردهاید</h4>
|
||||
<p className="text-xs text-medical-gray-400 font-medium max-w-md mx-auto mb-6">
|
||||
با ثبت اطلاعات پت خود، پیشنهادهای اختصاصی مکمل، دوز مصرفی دقیق و یادآورهای پزشکی دریافت کنید.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => router.push('/profile')}
|
||||
className="px-8 py-3.5 bg-canina-blue text-white rounded-2xl font-black text-xs inline-flex items-center gap-2 hover:bg-canina-dark transition-all shadow-xl shadow-canina-blue/20 cursor-pointer"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
ثبت اولین پت
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
|
||||
{pets.map((p) => {
|
||||
const isActive = p.id === activePetId;
|
||||
const isDog = p.type === 'سگ' || (p.type as string) === 'dog';
|
||||
return (
|
||||
<div
|
||||
key={p.id}
|
||||
className={cn(
|
||||
"bg-white rounded-3xl p-5 sm:p-6 border-2 transition-all shadow-sm flex flex-col justify-between relative group",
|
||||
isActive ? "border-canina-blue ring-2 ring-canina-blue/10" : "border-medical-gray-100 hover:border-canina-blue/40"
|
||||
)}
|
||||
>
|
||||
<div>
|
||||
<div className="flex items-start justify-between gap-4 mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-14 h-14 rounded-2xl bg-medical-gray-50 border border-medical-gray-100 overflow-hidden flex items-center justify-center shrink-0">
|
||||
{p.imageUrl || p.image ? (
|
||||
<img src={p.imageUrl || p.image} alt={p.name} className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<span className="text-2xl">{isDog ? '🐶' : '🐱'}</span>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h4 className="text-base font-black text-medical-gray-900">{p.name}</h4>
|
||||
{isActive && (
|
||||
<span className="px-2 py-0.5 bg-emerald-100 text-emerald-700 text-[10px] font-black rounded-full flex items-center gap-1">
|
||||
<CheckCircle2 className="w-3 h-3" /> پت فعال
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-medical-gray-400 font-bold mt-0.5">
|
||||
{isDog ? 'سگ' : 'گربه'} {p.breed ? `• نژاد ${p.breed}` : ''}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPetToDelete({ id: p.id, name: p.name })}
|
||||
className="w-8 h-8 rounded-xl bg-red-50 text-red-500 hover:bg-red-500 hover:text-white flex items-center justify-center transition-colors cursor-pointer"
|
||||
title="حذف پت"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2 p-3 bg-medical-gray-50/80 rounded-2xl mb-4 text-center">
|
||||
<div>
|
||||
<span className="text-[10px] text-medical-gray-400 block font-bold">سن</span>
|
||||
<span className="text-xs font-black text-medical-gray-800">{toPersian(p.age)} ساله</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[10px] text-medical-gray-400 block font-bold">وزن</span>
|
||||
<span className="text-xs font-black text-medical-gray-800">{toPersian(p.weight)} کیلو</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[10px] text-medical-gray-400 block font-bold">فعالیت</span>
|
||||
<span className="text-xs font-black text-medical-gray-800">{p.activityLevel || 'متوسط'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 pt-3 border-t border-medical-gray-100">
|
||||
{!isActive && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setActivePet(p.id);
|
||||
toast.success(`${p.name} به عنوان پت فعال انتخاب شد`);
|
||||
}}
|
||||
className="flex-1 py-2.5 bg-medical-gray-100 hover:bg-canina-blue hover:text-white rounded-xl text-xs font-black text-medical-gray-700 transition-colors flex items-center justify-center gap-1.5 cursor-pointer"
|
||||
>
|
||||
<CheckCircle className="w-3.5 h-3.5" />
|
||||
انتخاب به عنوان پت فعال
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.push('/profile')}
|
||||
className={cn(
|
||||
"py-2.5 px-4 rounded-xl text-xs font-black transition-colors flex items-center justify-center gap-1.5 cursor-pointer",
|
||||
isActive ? "flex-1 bg-canina-blue text-white hover:bg-canina-dark" : "bg-medical-gray-50 text-medical-gray-600 hover:bg-medical-gray-200"
|
||||
)}
|
||||
>
|
||||
<Activity className="w-3.5 h-3.5" />
|
||||
شناسنامه و رژیم سلامت
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<div className="w-full">
|
||||
<PetProfile embedded={true} initialView={pets.length > 0 ? "index" : "add"} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -1547,41 +1424,6 @@ export default function UserDashboard() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pet Delete Confirmation Modal */}
|
||||
{petToDelete && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-fade-in font-vazir">
|
||||
<div className="bg-white w-full max-w-sm rounded-3xl p-6 shadow-2xl text-center space-y-4" dir="rtl">
|
||||
<div className="w-14 h-14 bg-red-50 text-red-500 rounded-2xl flex items-center justify-center mx-auto">
|
||||
<Trash2 className="w-7 h-7" />
|
||||
</div>
|
||||
<h3 className="text-base font-black text-gray-900">حذف پروفایل {petToDelete.name}</h3>
|
||||
<p className="text-xs text-gray-500 font-medium leading-relaxed">
|
||||
آیا از حذف اطلاعات و پرونده پزشکی «{petToDelete.name}» اطمینان دارید؟ این عملیات قابل بازگشت نیست.
|
||||
</p>
|
||||
<div className="flex gap-3 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPetToDelete(null)}
|
||||
className="flex-1 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl text-xs font-black cursor-pointer transition-colors"
|
||||
>
|
||||
انصراف
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
removePet(petToDelete.id);
|
||||
toast.success(`پروفایل ${petToDelete.name} با موفقیت حذف شد`);
|
||||
setPetToDelete(null);
|
||||
}}
|
||||
className="flex-1 py-2.5 bg-red-600 hover:bg-red-700 text-white rounded-xl text-xs font-black cursor-pointer transition-colors shadow-md shadow-red-200"
|
||||
>
|
||||
بله، حذف کن
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user