Vitron-Front/app/components/product/ProductInfo.tsx
fazli 56fcce35c8 feat(product-detail): ProductDescription section + strict discount guard + category types
- app/components/product/ProductDescription.tsx: new below-fold section
  with a "توضیحات محصول" heading, whitespace-pre-line so multi-line seller
  copy (Instagram scrapes, victorwear WooCommerce imports) renders with
  its bullet-list line breaks preserved. Renders on both mobile and
  desktop; nothing shown when the product has no description.
- app/components/product/ProductInfo.tsx: removed the collapsed
  single-<p> mobile description; the new section replaces it.
- app/components/product/ProductDetailView.tsx: pricingOf now hides the
  discount when discount_price >= price (was only hiding when equal),
  so a stale row where the discount price accidentally matches or
  exceeds the base can never render as a fake promo. Mounts
  ProductDescription just above the mobile Contact button and reviews.
- app/components/product/index.ts: export ProductDescription.
- src/api/types/models/index.ts: ProductCategory now carries readonly
  parentId / parentName so the two-step category picker can build the
  parent→sub tree from a flat category list without an extra fetch.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-07-18 13:19:27 +00:00

33 lines
1.2 KiB
TypeScript

import discountRed from "~/assets/icons/product/discount-red.svg";
import { ProductDetail } from "src/api/types";
interface ProductInfoProps {
product: ProductDetail;
productDiscountPercent: number;
}
export const ProductInfo = ({
product,
productDiscountPercent,
}: ProductInfoProps) => (
<div className="flex flex-col gap-2 mt-8 px-4 lg:mt-2">
<div className="flex gap-3 items-center">
{productDiscountPercent && productDiscountPercent > 0 ? (
<div className="flex gap-[2px] items-center">
<p className="text-B14 font-bold text-RED mt-1">
{productDiscountPercent || "0"}
</p>
<img src={discountRed} alt="discount-red" className="w-6 h-6" />
</div>
) : null}
{productDiscountPercent && productDiscountPercent > 0 ? (
<div className="w-[6px] h-[6px] rounded-full bg-BLACK" />
) : null}
<p className="text-B18 lg:text-[26px] font-bold">{product.title}</p>
</div>
{/* Description moved into the dedicated ProductDescription section below
the buy actions so multi-line seller copy renders with line breaks and
appears on desktop too. */}
</div>
);