|
|
|
@ -2,19 +2,23 @@ import React, { useState, useEffect } from "react"; |
|
|
|
|
import { connect } from "react-redux"; |
|
|
|
|
import { toast } from "react-toastify"; |
|
|
|
|
import { book, userProduct, publicApi } from "../../redux/actions"; |
|
|
|
|
import { Link } from "react-router-dom"; |
|
|
|
|
import { Link, useNavigate } from "react-router-dom"; |
|
|
|
|
import proxy from "../../redux/proxy"; |
|
|
|
|
import location from "../../utils/location"; |
|
|
|
|
import separate from "../../utils/separate"; |
|
|
|
|
|
|
|
|
|
//components
|
|
|
|
|
import Button from "../../components/Button"; |
|
|
|
|
import Header from "../../components/Header"; |
|
|
|
|
import Comment from "./Comment"; |
|
|
|
|
import Rate from "./Rate"; |
|
|
|
|
import DesktopProductLayout from "./Desktop"; |
|
|
|
|
import Loading from "../../components/Loading"; |
|
|
|
|
import ButtonBetween from "../../components/ButtonBetween"; |
|
|
|
|
|
|
|
|
|
//assets
|
|
|
|
|
import arrow from "../../assets/icons/dropdown-blue.svg"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export const Product = ({ |
|
|
|
|
isMobile, |
|
|
|
|
productType, |
|
|
|
@ -29,6 +33,7 @@ export const Product = ({ |
|
|
|
|
}) => { |
|
|
|
|
const [type, setType] = useState("physical"); |
|
|
|
|
const [desktopContentTransform, setDesktopContentTransform] = useState(false); |
|
|
|
|
const navigation = useNavigate(); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
getInfo({ id: location.getId(), vod: true }); |
|
|
|
@ -43,11 +48,17 @@ export const Product = ({ |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
{/* Portrait */} |
|
|
|
|
{isMobile ? ( |
|
|
|
|
<div className="w-full flex flex-col bg-transparent px-4 pb-24"> |
|
|
|
|
{!book && ( |
|
|
|
|
<div className="w-full h-screen flex justify-center items-center bg-white bg-opacity-20 backdrop-filter backdrop-blur-xl fixed left-0 top-0 z-50"> |
|
|
|
|
<Loading size={4} color="bg-green-400" /> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
<header |
|
|
|
|
className={`w-full flex ${ |
|
|
|
|
productType === "book" ? "flex-row" : "flex-col" |
|
|
|
@ -56,13 +67,11 @@ export const Product = ({ |
|
|
|
|
<img |
|
|
|
|
src={`https://dnvn.ir/api/v1/file/${book?.fileIds}`} |
|
|
|
|
alt="" |
|
|
|
|
className="w-5/12 rounded-md" |
|
|
|
|
className="w-5/12 rounded-sm object-contain" |
|
|
|
|
/> |
|
|
|
|
<div className="flex flex-1 flex-col pr-2 pt-2"> |
|
|
|
|
<h1 className="text-blue5F mb-3 font-semibold text-base dark:text-white"> |
|
|
|
|
{type === "digital" |
|
|
|
|
? book?.product[0]?.name |
|
|
|
|
: book?.product[1]?.name} |
|
|
|
|
{book?.name} |
|
|
|
|
</h1> |
|
|
|
|
<div className="text-green7B text-tiny dark:text-greenBA"> |
|
|
|
|
{"پایه" + " " + grades[book?.gradeId]} |
|
|
|
@ -70,7 +79,7 @@ export const Product = ({ |
|
|
|
|
</div> |
|
|
|
|
</header> |
|
|
|
|
<ul |
|
|
|
|
className="list-none flex flex-row divide-x items-center mt-4" |
|
|
|
|
className="list-none flex flex-row divide-x items-center mt-5" |
|
|
|
|
style={{ direction: "ltr" }} |
|
|
|
|
> |
|
|
|
|
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-tiny leading-5 font-medium text-green7B dark:text-white"> |
|
|
|
@ -83,96 +92,72 @@ export const Product = ({ |
|
|
|
|
{book?.rate} <br /> امتیاز |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<h2 className="text-green7B text-sm font-semibold mt-7 dark:text-greenBA"> |
|
|
|
|
<h2 className="text-green7B text-base font-semibold mt-10 dark:text-greenBA"> |
|
|
|
|
نسخه محصول را انتخاب کنید |
|
|
|
|
</h2> |
|
|
|
|
<div className="w-full flex flex-row justify-between items-center mt-4"> |
|
|
|
|
<Button |
|
|
|
|
title="نسخه فیزیکی" |
|
|
|
|
backgroundColor={isDark ? "bg-transparent" : "bg-white"} |
|
|
|
|
border={{ |
|
|
|
|
color: isDark ? "#ffffff55" : "#196EC055", |
|
|
|
|
width: "1px", |
|
|
|
|
}} |
|
|
|
|
width="49%" |
|
|
|
|
color={isDark ? "text-white" : "text-blueC0"} |
|
|
|
|
active={type === "physical"} |
|
|
|
|
selectable={true} |
|
|
|
|
onClick={() => setType("physical")} |
|
|
|
|
/> |
|
|
|
|
<Button |
|
|
|
|
title="نسخه دیجیتال" |
|
|
|
|
backgroundColor={isDark ? "bg-transparent" : "bg-white"} |
|
|
|
|
border={{ |
|
|
|
|
color: isDark ? "#ffffff55" : "#196EC055", |
|
|
|
|
width: "1px", |
|
|
|
|
}} |
|
|
|
|
width="49%" |
|
|
|
|
selectable={true} |
|
|
|
|
active={type === "digital"} |
|
|
|
|
color={isDark ? "text-white" : "text-blueC0"} |
|
|
|
|
onClick={() => setType("digital")} |
|
|
|
|
<div className="w-full flex flex-row justify-between items-center mt-5"> |
|
|
|
|
<ButtonBetween |
|
|
|
|
width="100%" |
|
|
|
|
item={"خرید نسخه فیزیکی کتاب"} |
|
|
|
|
status={separate(book?.product[1]?.price) + " " + "تومان"} |
|
|
|
|
onClick={() => |
|
|
|
|
userId |
|
|
|
|
? pushToCart({ |
|
|
|
|
productId: book?.product[1]?.id, |
|
|
|
|
userId, |
|
|
|
|
count: 1, |
|
|
|
|
}) |
|
|
|
|
: toast.info("ابتدا وارد حساب کاربری خود شوید.") |
|
|
|
|
} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
<div className="w-full flex flex-row justify-between items-center mt-4 gap-2"> |
|
|
|
|
<Button |
|
|
|
|
<ButtonBetween |
|
|
|
|
width="72%" |
|
|
|
|
item={"خرید نسخه دیجیتال کتاب"} |
|
|
|
|
status={separate(book?.product[1]?.price) + " " + "تومان"} |
|
|
|
|
onClick={() => |
|
|
|
|
proxy.status() |
|
|
|
|
userId |
|
|
|
|
? pushToCart({ |
|
|
|
|
productId: |
|
|
|
|
type === "digital" |
|
|
|
|
? book?.product[0]?.id |
|
|
|
|
: book?.product[1]?.id, |
|
|
|
|
userId: userId, |
|
|
|
|
productId: book?.product[0]?.id, |
|
|
|
|
userId, |
|
|
|
|
count: 1, |
|
|
|
|
}) |
|
|
|
|
: toast.info("ابتدا وارد حساب کاربری خود شوید.") |
|
|
|
|
} |
|
|
|
|
title={ |
|
|
|
|
"خرید با قیمت" + |
|
|
|
|
" " + |
|
|
|
|
(type === "digital" |
|
|
|
|
? book?.product[0]?.price |
|
|
|
|
: book?.product[1]?.price) + |
|
|
|
|
" " + |
|
|
|
|
"تومان" |
|
|
|
|
} |
|
|
|
|
backgroundColor="bg-blueC0" |
|
|
|
|
border={{ color: "#196EC055", width: "0px" }} |
|
|
|
|
width="65%" |
|
|
|
|
color="text-white" |
|
|
|
|
/> |
|
|
|
|
<a href={`https://dnvn.ir/xpdf/${book?.sampleFileId}`} className="flex-1 py-3 border border-solid border-gray-300 rounded-md text-base font-bold text-blueC0 text-center"> |
|
|
|
|
<a |
|
|
|
|
href={`https://dnvn.ir/xpdf/${book?.sampleFileId}`} |
|
|
|
|
className="flex-1 border-2 border-solid border-green-500 bg-green-50 bg-opacity-70 rounded-sm text-tiny font-bold text-green-700 text-center" |
|
|
|
|
style={{ padding: "18px 0px" }} |
|
|
|
|
> |
|
|
|
|
مشاهده نمونه |
|
|
|
|
</a> |
|
|
|
|
{/* <Button |
|
|
|
|
title="" |
|
|
|
|
backgroundColor={isDark ? "bg-transparent" : "bg-white"} |
|
|
|
|
border={{ |
|
|
|
|
color: isDark ? "#ffffff55" : "#196EC055", |
|
|
|
|
width: "1px", |
|
|
|
|
}} |
|
|
|
|
width="33%" |
|
|
|
|
color={isDark ? "text-white" : "text-blueC0"} |
|
|
|
|
onClick={() => {}} |
|
|
|
|
/> */} |
|
|
|
|
</div> |
|
|
|
|
<div className="w-full flex flex-row justify-between items-center mt-4"> |
|
|
|
|
<Link |
|
|
|
|
to={"/videos/" + book?.id} |
|
|
|
|
className="bg-blueC0 text-green7B dark:text-blueC0 bg-opacity-5 font-semibold text-tiny rounded-md border border-solid border-blueC0 w-full py-3 text-center flex flex-row items-center justify-center" |
|
|
|
|
> |
|
|
|
|
مشاهده دوره ویدیویی این محصول |
|
|
|
|
<img |
|
|
|
|
src={arrow} |
|
|
|
|
alt="" |
|
|
|
|
className="mr-2 transform rotate-90 w-5" |
|
|
|
|
<ButtonBetween |
|
|
|
|
width="72%" |
|
|
|
|
item={"خرید نسخه ویدئویی کتاب"} |
|
|
|
|
status={separate(book?.product[1]?.price) + " " + "تومان"} |
|
|
|
|
onClick={() => |
|
|
|
|
userId |
|
|
|
|
? pushToCart({ |
|
|
|
|
productId: book?.product[2]?.id, |
|
|
|
|
userId, |
|
|
|
|
count: 1, |
|
|
|
|
}) |
|
|
|
|
: toast.info("ابتدا وارد حساب کاربری خود شوید.") |
|
|
|
|
} |
|
|
|
|
/> |
|
|
|
|
<ButtonBetween |
|
|
|
|
width="25%" |
|
|
|
|
item={"پیش نمایش"} |
|
|
|
|
onClick={() => navigation('/videos/' + book?.idK)} |
|
|
|
|
/> |
|
|
|
|
</Link> |
|
|
|
|
</div> |
|
|
|
|
<div className="w-full flex flex-col justify-between items-center mt-4"> |
|
|
|
|
<div className="w-full flex flex-col justify-between items-center mt-8"> |
|
|
|
|
<Header title="توضیحات" link="#" /> |
|
|
|
|
<p className="text-sm text-gray70 mt-2 dark:text-white leading-5"> |
|
|
|
|
<p className="text-sm text-gray70 mt-2 dark:text-white leading-6"> |
|
|
|
|
خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ |
|
|
|
|
ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ |
|
|
|
|
ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ |
|
|
|
@ -183,12 +168,12 @@ export const Product = ({ |
|
|
|
|
ﺩﺯﺩﯾﺪﻩ ﺍی... ﭘﺲ ﺩﺭ ﺯﻧﺪﮔﯽ ﻓﻘﻂ ﺩﺯﺩﯼ نکن{" "} |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
<div className="w-full flex flex-col justify-between items-center mt-6"> |
|
|
|
|
<div className="w-full flex flex-col justify-between items-center mt-10"> |
|
|
|
|
<Header title="امتیازات و نظرات" link="#" /> |
|
|
|
|
<Rate /> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
className="flex flex-row w-full pb-4 mt-6 no-scrollbar" |
|
|
|
|
className="flex flex-row w-full pb-4 mt-10 no-scrollbar" |
|
|
|
|
style={{ overflowX: "scroll" }} |
|
|
|
|
> |
|
|
|
|
{[0, 1, 2, 2].map((comment, index) => ( |
|
|
|
|