|
|
|
@ -1,6 +1,8 @@ |
|
|
|
|
import React, { useState, useEffect } from "react"; |
|
|
|
|
import { connect } from "react-redux"; |
|
|
|
|
import { publicApi } from "../../redux/actions"; |
|
|
|
|
import {toast} from 'react-toastify'; |
|
|
|
|
import { Link } from "react-router-dom"; |
|
|
|
|
import { publicApi, userProduct } from "../../redux/actions"; |
|
|
|
|
import location from "../../utils/location"; |
|
|
|
|
import Divider from "../../components/Divider"; |
|
|
|
|
import Season from "./components/Season"; |
|
|
|
@ -15,6 +17,9 @@ import poster from "../../assets/images/poster.svg"; |
|
|
|
|
import tickIcon from "../../components/ProductStatusCard/tick-circle.svg"; |
|
|
|
|
|
|
|
|
|
function Video({ |
|
|
|
|
isLogin, |
|
|
|
|
pushToCart, |
|
|
|
|
userId, |
|
|
|
|
product = { |
|
|
|
|
id: 0, |
|
|
|
|
type: "کتاب ها", |
|
|
|
@ -63,7 +68,7 @@ function Video({ |
|
|
|
|
const [type, setType] = useState(0); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
getBook({ bookId: 19 }); |
|
|
|
|
getBook({ bookId: Number(location.getId()) }); |
|
|
|
|
setHeaderOptions(headerOptions); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
@ -86,14 +91,14 @@ function Video({ |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<img |
|
|
|
|
src={product.imageUrl} |
|
|
|
|
src={`https://dnvn.ir/api/v1/file/${book?.fileIds}`} |
|
|
|
|
className="rounded-md absolute left-2 top-1/2 transform -translate-y-1/2" |
|
|
|
|
style={{ width: 70, height: 100 }} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
<div className="flex flex-col flex-1 justify-between pr-2"> |
|
|
|
|
<div className="flex flex-col"> |
|
|
|
|
<strong className="mt-2 text-blue5F text-lg dark:text-white"> |
|
|
|
|
<strong className="mt-2 text-blue5F text-base dark:text-white font-normal"> |
|
|
|
|
{book?.name} |
|
|
|
|
</strong> |
|
|
|
|
<span className="text-blueC0 text-sm mb-1 dark:text-greenBA mt-2"> |
|
|
|
@ -113,7 +118,7 @@ function Video({ |
|
|
|
|
<div className="flex flex-col w-11/12 min-h-screen mx-auto pb-20"> |
|
|
|
|
<header className="w-full flex flex-row gap-12"> |
|
|
|
|
<div className="w-9/12"> |
|
|
|
|
<Videos /> |
|
|
|
|
<Videos videos={book?.fileIds} /> |
|
|
|
|
<ProductTab |
|
|
|
|
tabs={[ |
|
|
|
|
{ |
|
|
|
@ -147,11 +152,11 @@ function Video({ |
|
|
|
|
{book?.name} |
|
|
|
|
</h1> |
|
|
|
|
<div className="text-blueC0 text-sm dark:text-greenBA"> |
|
|
|
|
{"پایه" + " " + (grades[book?.gradeId] || "پایه دوازدهم")} |
|
|
|
|
{"پایه" + " " + grades[book?.gradeId]} |
|
|
|
|
</div> |
|
|
|
|
<div className="flex justify-end"> |
|
|
|
|
<div className="p-2"> |
|
|
|
|
<StarRating /> |
|
|
|
|
<StarRating value={book?.rate || 4} /> |
|
|
|
|
</div> |
|
|
|
|
<div className="p-2 border-0 border-solid border-r border-gray-100 text-sm text-gray-400"> |
|
|
|
|
بیش از 160 نفر امتیاز داده اند |
|
|
|
@ -159,7 +164,7 @@ function Video({ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div className="bg-grayF9 w-full flex flex-col rounded-md divide-y divide-solid divide-gray-200 mb-4"> |
|
|
|
|
<div className="flex flex-row justify-center items-center w-full gap-5 py-3"> |
|
|
|
|
<div className="flex flex-row justify-center items-center w-full gap-5 my-5"> |
|
|
|
|
<img src={tickIcon} alt="" className="w-9" /> |
|
|
|
|
<p className="text-blue52 text-sm font-light">{`توسعه خرید توسط ${ |
|
|
|
|
book?.recommendedPeople || 4234 |
|
|
|
@ -167,16 +172,14 @@ function Video({ |
|
|
|
|
</div> |
|
|
|
|
<div className="flex flex-col w-full py-4 px-4"> |
|
|
|
|
<div className="flex flex-row items-center justify-center gap-2"> |
|
|
|
|
<strong className="text-blueC0 text-xl"> |
|
|
|
|
{book?.price || "56/894/000"} |
|
|
|
|
</strong> |
|
|
|
|
<strong className="text-blueC0 text-xl">{book?.price}</strong> |
|
|
|
|
<span className="text-sm text-gray-500">تومان</span> |
|
|
|
|
</div> |
|
|
|
|
<p className="text-gray-500 text-xs text-center mt-2 mb-4"> |
|
|
|
|
با خرید این کالا 540.000 صرفه جویی کنید |
|
|
|
|
</p> |
|
|
|
|
<Button |
|
|
|
|
title="اصافه کردن به سبد خرید" |
|
|
|
|
title="اضافه کردن به سبد خرید" |
|
|
|
|
backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"} |
|
|
|
|
border={{ |
|
|
|
|
color: isDark ? "#ffffff55" : "#196EC055", |
|
|
|
@ -185,19 +188,24 @@ function Video({ |
|
|
|
|
width="100%" |
|
|
|
|
color={"text-white"} |
|
|
|
|
selectable={true} |
|
|
|
|
onClick={() => {}} |
|
|
|
|
onClick={() => |
|
|
|
|
isLogin |
|
|
|
|
? pushToCart({ |
|
|
|
|
productId: book?.id, |
|
|
|
|
userId: userId, |
|
|
|
|
count: 1, |
|
|
|
|
}) |
|
|
|
|
: toast.info("ابتدا وارد حساب کاربری خود شوید.") |
|
|
|
|
} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<Button |
|
|
|
|
title="مشاهده دوره ویدئویی این محصول" |
|
|
|
|
backgroundColor="bg-blueC0" |
|
|
|
|
border={{ color: "#196EC055", width: "0px" }} |
|
|
|
|
bgOpacity="bg-opacity-10" |
|
|
|
|
width="100%" |
|
|
|
|
color={isDark ? "text-white" : "text-blueC0"} |
|
|
|
|
onClick={() => {}} |
|
|
|
|
/> |
|
|
|
|
<Link |
|
|
|
|
to={"/products/" + book?.id} |
|
|
|
|
className="bg-blueFF1 text-blueC0 text-sm rounded-md border border-solid border-blueC01 w-full py-4 text-center" |
|
|
|
|
> |
|
|
|
|
مشاهده کتاب این محصول |
|
|
|
|
</Link> |
|
|
|
|
</div> |
|
|
|
|
</header> |
|
|
|
|
</div> |
|
|
|
@ -210,11 +218,14 @@ const mapStateToProps = (state) => ({ |
|
|
|
|
book: state.publicApi.bookInfo, |
|
|
|
|
seasons: state.publicApi.categories, |
|
|
|
|
grades: state.publicApi.grades, |
|
|
|
|
isLogin: state.user.status, |
|
|
|
|
userId: state.user.status.id, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const mapDispatchToProps = { |
|
|
|
|
setHeaderOptions: publicApi.setHeaderOptions, |
|
|
|
|
getBook: publicApi.bookInfo, |
|
|
|
|
pushToCart: userProduct.add, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Video); |
|
|
|
|