fix(product): conditionally replace dosage calculator with topical usage notice for external care items
- Hide weight-based dosage calculator for topical/external care products (eye drops, paw balm, sprays, lotions) - Show dedicated topical usage guide card explaining that dosage is independent of body weight - Retain active dynamic weight calculator for all oral supplements (tablets, oils, gels, powders)
This commit is contained in:
parsa aghaei
parent
24ce3a44bf
commit
fb23831640
@ -340,64 +340,97 @@ export default function ProductPage({ productSlug }: { productSlug: string }) {
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Smart Dosage Calculator Utility Section */}
|
||||
<section className="bg-white rounded-[2.5rem] border border-medical-gray-200 p-8 md:p-10 shadow-md space-y-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-canina-blue text-white rounded-2xl flex items-center justify-center shadow-lg">
|
||||
<Clock className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-black text-medical-gray-900 italic font-vazir">ماشین حساب هوشمند مصرف</h3>
|
||||
<p className="text-xs text-medical-gray-400 font-bold font-vazir mt-1">تخمین دقیق دوز روزانه و ماندگاری هر بسته بر اساس مشخصات پت شما</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 items-center">
|
||||
{/* Manual Slider Inputs */}
|
||||
<div className="bg-medical-gray-50 rounded-[2rem] p-6 border border-medical-gray-100 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-black text-medical-gray-500 font-vazir">وزن پت (کیلوگرم)</span>
|
||||
<span className="text-lg font-black text-canina-blue font-vazir">{toPersian(weight)} کگ</span>
|
||||
{/* Smart Dosage Calculator Utility Section / Topical Usage Notice */}
|
||||
{fullProduct.categorySlug === 'special-care' ||
|
||||
fullProduct.name.toLowerCase().includes('pfotenpflege') ||
|
||||
fullProduct.name.toLowerCase().includes('augenpflege') ||
|
||||
fullProduct.unit?.includes('ml Lotion') ||
|
||||
fullProduct.unit?.includes('Balsam') ||
|
||||
fullProduct.nameFa?.includes('کرم') ||
|
||||
fullProduct.nameFa?.includes('قطره تمیزکننده') ||
|
||||
fullProduct.nameFa?.includes('اسپری') ? (
|
||||
<section className="bg-white rounded-[2.5rem] border border-medical-gray-200 p-8 md:p-10 shadow-md space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-canina-blue text-white rounded-2xl flex items-center justify-center shadow-lg">
|
||||
<Sparkles className="w-6 h-6" />
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="1" max="100"
|
||||
value={weight}
|
||||
onChange={(e) => setWeight(parseInt(e.target.value))}
|
||||
className="w-full h-2 bg-medical-gray-200 rounded-lg appearance-none cursor-pointer accent-canina-blue [&::-webkit-slider-thumb]:w-6 [&::-webkit-slider-thumb]:h-6 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-canina-blue [&::-webkit-slider-thumb]:appearance-none"
|
||||
/>
|
||||
|
||||
<div className="space-y-2">
|
||||
<span className="text-[10px] font-black text-medical-gray-400 font-vazir">سن حیوان</span>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={() => setPetType("young")} className={`flex-1 py-3 rounded-xl text-xs font-black transition-all border ${petType === "young" ? 'bg-canina-blue border-canina-blue text-white shadow-lg' : 'bg-white border-medical-gray-200 text-medical-gray-400'}`}>جوان</button>
|
||||
<button onClick={() => setPetType("adult")} className={`flex-1 py-3 rounded-xl text-xs font-black transition-all border ${petType === "adult" ? 'bg-canina-blue border-canina-blue text-white shadow-lg' : 'bg-white border-medical-gray-200 text-medical-gray-400'}`}>بالغ</button>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-black text-medical-gray-900 italic font-vazir">نحوه استفاده موضعی و کاربرد</h3>
|
||||
<p className="text-xs text-medical-gray-400 font-bold font-vazir mt-1">محصولات بهداشتی و بهداشت موضعی نیاز به دوزبندی بر اساس وزن ندارند</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Calculation Results Output */}
|
||||
<div className="bg-canina-blue rounded-[2rem] p-8 text-white border-b-8 border-white/20 shadow-2xl flex flex-col justify-between h-full min-h-[220px]">
|
||||
<div className="flex items-center gap-2 mb-4 opacity-90 border-b border-white/10 pb-3">
|
||||
<Sparkles className="w-4 h-4 text-white" />
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest font-vazir text-white">تخمین هوش مصنوعی (AI Advice)</span>
|
||||
<div className="bg-medical-gray-50 rounded-[2rem] p-6 border border-medical-gray-100 flex items-start gap-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-canina-blue/10 text-canina-blue flex items-center justify-center font-black flex-shrink-0">
|
||||
ℹ️
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-3xl font-black font-vazir text-white">{toPersian(calculation.duration)} روز</div>
|
||||
<div className="text-[10px] font-bold text-white/80 font-vazir whitespace-nowrap mt-1">تخمین اتمام مصرف بسته</div>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="text-2xl font-black font-vazir text-white">{toPersian(calculation.dailyDose)}</div>
|
||||
<div className="text-[10px] font-bold text-white/80 font-vazir whitespace-nowrap mt-1">دوز روزانه ({calculation.unit === 'g' ? 'گرم' : calculation.unit})</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-black text-medical-gray-900 mb-1 font-vazir">راهنمای مصرف موضعی</h4>
|
||||
<p className="text-xs text-medical-gray-600 font-bold font-vazir leading-relaxed">
|
||||
این محصول یک فرآورده موضعی/بهداشتی است و مقدار مصرف آن به صورت موضعی (روی پوست، چشم یا پنجه) اعمال میشود و وابسته به وزن بدن حیوان نمیباشد. ماندگاری بسته بسته به میزان و تکرار مصرف روزانه شما متفاوت خواهد بود.
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-[11px] text-white/60 font-bold font-vazir mt-6 leading-relaxed">
|
||||
* دوزها تخمینی هستند؛ توصیه میشود برای مصرف دقیق کاتالوگ محصول را مطالعه کنید.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
) : (
|
||||
<section className="bg-white rounded-[2.5rem] border border-medical-gray-200 p-8 md:p-10 shadow-md space-y-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-canina-blue text-white rounded-2xl flex items-center justify-center shadow-lg">
|
||||
<Clock className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-black text-medical-gray-900 italic font-vazir">ماشین حساب هوشمند مصرف</h3>
|
||||
<p className="text-xs text-medical-gray-400 font-bold font-vazir mt-1">تخمین دقیق دوز روزانه و ماندگاری هر بسته بر اساس مشخصات پت شما</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 items-center">
|
||||
{/* Manual Slider Inputs */}
|
||||
<div className="bg-medical-gray-50 rounded-[2rem] p-6 border border-medical-gray-100 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-black text-medical-gray-500 font-vazir">وزن پت (کیلوگرم)</span>
|
||||
<span className="text-lg font-black text-canina-blue font-vazir">{toPersian(weight)} کگ</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="1" max="100"
|
||||
value={weight}
|
||||
onChange={(e) => setWeight(parseInt(e.target.value))}
|
||||
className="w-full h-2 bg-medical-gray-200 rounded-lg appearance-none cursor-pointer accent-canina-blue [&::-webkit-slider-thumb]:w-6 [&::-webkit-slider-thumb]:h-6 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-canina-blue [&::-webkit-slider-thumb]:appearance-none"
|
||||
/>
|
||||
|
||||
<div className="space-y-2">
|
||||
<span className="text-[10px] font-black text-medical-gray-400 font-vazir">سن حیوان</span>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={() => setPetType("young")} className={`flex-1 py-3 rounded-xl text-xs font-black transition-all border ${petType === "young" ? 'bg-canina-blue border-canina-blue text-white shadow-lg' : 'bg-white border-medical-gray-200 text-medical-gray-400'}`}>جوان</button>
|
||||
<button onClick={() => setPetType("adult")} className={`flex-1 py-3 rounded-xl text-xs font-black transition-all border ${petType === "adult" ? 'bg-canina-blue border-canina-blue text-white shadow-lg' : 'bg-white border-medical-gray-200 text-medical-gray-400'}`}>بالغ</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Calculation Results Output */}
|
||||
<div className="bg-canina-blue rounded-[2rem] p-8 text-white border-b-8 border-white/20 shadow-2xl flex flex-col justify-between h-full min-h-[220px]">
|
||||
<div className="flex items-center gap-2 mb-4 opacity-90 border-b border-white/10 pb-3">
|
||||
<Sparkles className="w-4 h-4 text-white" />
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest font-vazir text-white">تخمین هوش مصنوعی (AI Advice)</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-3xl font-black font-vazir text-white">{toPersian(calculation.duration)} روز</div>
|
||||
<div className="text-[10px] font-bold text-white/80 font-vazir whitespace-nowrap mt-1">تخمین اتمام مصرف بسته</div>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="text-2xl font-black font-vazir text-white">{toPersian(calculation.dailyDose)}</div>
|
||||
<div className="text-[10px] font-bold text-white/80 font-vazir whitespace-nowrap mt-1">دوز روزانه ({calculation.unit === 'g' ? 'گرم' : calculation.unit})</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[11px] text-white/60 font-bold font-vazir mt-6 leading-relaxed">
|
||||
* دوزها تخمینی هستند؛ توصیه میشود برای مصرف دقیق کاتالوگ محصول را مطالعه کنید.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Ingredients Section */}
|
||||
<section className="space-y-8">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user