You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
216 lines
8.5 KiB
216 lines
8.5 KiB
import React, { useState, useEffect } from "react"; |
|
import { connect } from "react-redux"; |
|
import { toast } from "react-toastify"; |
|
import { book, userProduct, publicApi } from "../../redux/actions"; |
|
import proxy from "../../redux/proxy"; |
|
import location from "../../utils/location"; |
|
import Button from "../../components/Button"; |
|
import Header from "../../components/Header"; |
|
import Comment from "./Comment"; |
|
import Rate from "./Rate"; |
|
import DesktopProductLayout from "./Desktop"; |
|
|
|
export const Product = ({ |
|
isMobile, |
|
productType, |
|
getInfo, |
|
book, |
|
grades, |
|
isDark, |
|
userId, |
|
pushToCart, |
|
headerOptions, |
|
setHeaderOptions, |
|
}) => { |
|
const [type, setType] = useState("physical"); |
|
const [desktopContentTransform, setDesktopContentTransform] = useState(false); |
|
|
|
useEffect(() => { |
|
getInfo({ id: location.getId(), vod : true }); |
|
setHeaderOptions(headerOptions); |
|
if (!isMobile) { |
|
window.addEventListener("scroll", () => { |
|
if (window.scrollY >= 64) { |
|
setDesktopContentTransform(() => true); |
|
} else { |
|
setDesktopContentTransform(() => false); |
|
} |
|
}); |
|
} |
|
}, []); |
|
return ( |
|
<> |
|
{/* Portrait */} |
|
{isMobile ? ( |
|
<div className="w-full flex flex-col bg-transparent px-4"> |
|
<header |
|
className={`w-full flex ${ |
|
productType === "book" ? "flex-row" : "flex-col" |
|
}`} |
|
> |
|
<img |
|
src={`https://dnvn.ir/api/v1/file/${book?.fileIds}`} |
|
alt="" |
|
className="w-5/12 rounded-md" |
|
/> |
|
<div className="flex flex-1 flex-col pr-2 pt-2"> |
|
<h1 className="text-blue5F mb-3 font-semibold text-sm dark:text-white"> |
|
{type === "digital" |
|
? book?.product[0]?.name |
|
: book?.product[1]?.name} |
|
</h1> |
|
<div className="text-blueC0 text-xs dark:text-greenBA"> |
|
{"پایه" + " " + grades[book?.gradeId]} |
|
</div> |
|
</div> |
|
</header> |
|
<ul |
|
className="list-none flex flex-row divide-x items-center mt-4" |
|
style={{ direction: "ltr" }} |
|
> |
|
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white"> |
|
{book?.pagesNum} <br /> صفحه |
|
</li> |
|
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white"> |
|
{"فیزیکی - دیجیتالی"} <br /> در دسترس |
|
</li> |
|
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white"> |
|
{book?.rate} <br /> امتیاز |
|
</li> |
|
</ul> |
|
<h2 className="text-blueC0 text-sm font-semibold mt-7 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> |
|
<div className="w-full flex flex-row justify-between items-center mt-4"> |
|
<Button |
|
onClick={() => |
|
proxy.status() |
|
? pushToCart({ |
|
productId: |
|
type === "digital" |
|
? book?.product[0]?.id |
|
: book?.product[1]?.id, |
|
userId: userId, |
|
count: 1, |
|
}) |
|
: toast.info("ابتدا وارد حساب کاربری خود شوید.") |
|
} |
|
title={ |
|
"خرید با قیمت" + |
|
" " + |
|
(type === "digital" |
|
? book?.product[0]?.price |
|
: book?.product[1]?.price) + |
|
" " + |
|
"تومان" |
|
} |
|
backgroundColor="bg-blueC0" |
|
border={{ color: "#196EC055", width: "1px" }} |
|
width="65%" |
|
color="text-white" |
|
/> |
|
<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"> |
|
<Button |
|
title="مشاهده دوره ویدئویی این محصول" |
|
backgroundColor="bg-blueC0" |
|
border={{ color: "#196EC055", width: "0px" }} |
|
bgOpacity="bg-opacity-10" |
|
width="100%" |
|
color={isDark ? "text-white" : "text-blueC0"} |
|
onClick={() => {}} |
|
/> |
|
</div> |
|
<div className="w-full flex flex-col justify-between items-center mt-4"> |
|
<Header title="توضیحات" link="#" /> |
|
<p className="text-xs text-gray1 mt-2 dark:text-white"> |
|
خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ |
|
ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ |
|
ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ |
|
ﻫﺮﮔﺰ ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ﺩﺍﺩ : |
|
ﺩﺭ ﺯﻧﺪﮔﯽ ﺩﺭﻭﻍ ﻧﮕﻮ ﭼﺮﺍ ﮐﻪ ﺍﮔﺮ ﮔﻔﺘﯽ ﺻﺪﺍﻗﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﯿﺎﻧﺖ ﻧﮑﻦ ﮐﻪ |
|
ﺍﮔﺮ ﮐﺮﺩﯼ ﻋﺸﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﺸﻮﻧﺖ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﻣﺤﺒﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، |
|
ﻧﺎ ﺣﻖ ﻧﮕﻮ ﺍﮔﺮ ﮔﻔﺘﯽ ﺣﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺑﯽ ﺣﯿﺎﯾﯽ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﺷﺮﺍﻓﺖ ﺭﺍ |
|
ﺩﺯﺩﯾﺪﻩ ﺍی... ﭘﺲ ﺩﺭ ﺯﻧﺪﮔﯽ ﻓﻘﻂ ﺩﺯﺩﯼ نکن{" "} |
|
</p> |
|
</div> |
|
<div className="w-full flex flex-col justify-between items-center mt-4"> |
|
<Header title="امتیازات و نظرات" link="#" /> |
|
<Rate /> |
|
</div> |
|
<div |
|
className="flex flex-row w-full pb-4 mt-6" |
|
style={{ overflowX: "scroll" }} |
|
> |
|
{[0, 1, 2, 2].map((comment, index) => ( |
|
<Comment key={index} /> |
|
))} |
|
</div> |
|
</div> |
|
) : ( |
|
<div className="flex flex-col items-center justify-center lg:py-24"> |
|
<DesktopProductLayout /> |
|
</div> |
|
)} |
|
</> |
|
); |
|
}; |
|
|
|
const mapStateToProps = (state) => ({ |
|
book: state.book.info, |
|
grades: state.publicApi.grades, |
|
isMobile: state.publicApi.isMobile, |
|
isDark: state.publicApi.isDark, |
|
userId: state.user.status?.id, |
|
}); |
|
|
|
const mapDispatchToProps = { |
|
getInfo: book.info, |
|
pushToCart: userProduct.add, |
|
setHeaderOptions: publicApi.setHeaderOptions, |
|
}; |
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Product); |
|
|
|
Product.defaultProps = { |
|
productType: "book", |
|
};
|
|
|