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.
229 lines
8.3 KiB
229 lines
8.3 KiB
import React, { useState, useEffect } from "react"; |
|
import { connect } from "react-redux"; |
|
import { toast } from "react-toastify"; |
|
import { Link } from "react-router-dom"; |
|
import { publicApi, userProduct } from "../../redux/actions"; |
|
import location from "../../utils/location"; |
|
import separate from "../../utils/separate"; |
|
import Season from "./components/Season"; |
|
import Videos from "./components/Desktop/Videos"; |
|
import StarRating from "../../components/StarRating"; |
|
import Button from "../../components/Button"; |
|
import ProductTab from "../../components/ProductTab"; |
|
import Table from "./components/Desktop/Table"; |
|
|
|
//assets |
|
import tickIcon from "../../components/ProductStatusCard/tick-circle.svg"; |
|
import arrow from "../../assets/icons/dropdown-blue.svg"; |
|
|
|
function Video({ |
|
isLogin, |
|
pushToCart, |
|
userId, |
|
isMobile, |
|
isDark, |
|
headerOptions, |
|
setHeaderOptions, |
|
grades, |
|
getBook, |
|
book, |
|
seasons, |
|
}) { |
|
useEffect(() => { |
|
getBook({ bookId: location.getId() }, { id: location.getId(), vod: true }); |
|
setHeaderOptions(headerOptions); |
|
}, []); |
|
|
|
return isMobile ? ( |
|
<div className="w-full flex flex-col px-4 pb-24"> |
|
<div className="w-full flex flex-col"> |
|
<div |
|
className="w-full flex flex-row flex-1 = relative overflow-hidden" |
|
style={{}} |
|
> |
|
<img |
|
src={`https://dnvn.ir/api/v1/file/${book?.fileIds}`} |
|
className="rounded-md" |
|
style={{ |
|
width: "calc(100vh / 7)", |
|
height: "calc(100vh / 7 * 4 / 3)", |
|
}} |
|
/> |
|
<div className="flex flex-col py-1 pr-3"> |
|
<strong className="text-blue5F text-lg dark:text-white font-black"> |
|
{"دوره ویدئویی" + " " + book?.product[2]?.name} |
|
</strong> |
|
<span className="text-blueC0 text-base dark:text-greenBA mt-3 mb-5"> |
|
{"پایه" + " " + (grades[book?.gradeId] || "پایه دوازدهم")} |
|
</span> |
|
</div> |
|
</div> |
|
<div className="flex flex-col flex-1 justify-between my-5"> |
|
<Button |
|
title={ |
|
"خرید با قیمت" + |
|
" " + |
|
separate(book?.product[2]?.price) + |
|
" " + |
|
"تومان" |
|
} |
|
backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"} |
|
border={{ |
|
color: isDark ? "#ffffff55" : "#196EC055", |
|
width: "0px", |
|
}} |
|
width="100%" |
|
color={"text-white"} |
|
selectable={true} |
|
onClick={() => |
|
isLogin |
|
? pushToCart({ |
|
productId: book?.id, |
|
userId: userId, |
|
count: 1, |
|
}) |
|
: toast.info("ابتدا وارد حساب کاربری خود شوید.") |
|
} |
|
/> |
|
</div> |
|
</div> |
|
<div className="flex flex-col"> |
|
{seasons |
|
?.sort((a, b) => a[0]?.categoryId - b[0]?.categoryId) |
|
?.map((season, index) => ( |
|
<Season season={season} key={index} id={book?.id} /> |
|
))} |
|
</div> |
|
</div> |
|
) : ( |
|
<div className="flex flex-col w-11/12 min-h-screen mx-auto pb-20 pt-24"> |
|
<header className="w-full flex flex-row gap-12"> |
|
<div className="w-9/12"> |
|
<Videos videos={book?.fileIds} /> |
|
{seasons?.length > 0 && ( |
|
<ProductTab |
|
tabs={[ |
|
{ |
|
title: "سر فصل ها", |
|
components: ( |
|
<div className="flex flex-col w-full mt-5 gap-5"> |
|
{seasons |
|
?.sort((a, b) => a[0]?.categoryId - b[0]?.categoryId) |
|
?.map((season, index) => ( |
|
<Season season={season} key={index} id={book?.id} /> |
|
))} |
|
</div> |
|
), |
|
}, |
|
{ |
|
title: "مشخصات", |
|
components: <Table />, |
|
}, |
|
{ |
|
title: "نقد و بررسی", |
|
components: ( |
|
<div className="bg-gray-100 rounded-md mt-4 w-full flex justify-center items-center h-40 text-green4F text-tiny"> |
|
این بخش فعلا قابل دسترسی نیست. |
|
</div> |
|
), |
|
}, |
|
{ |
|
title: "پرسش و پاسخ", |
|
components: ( |
|
<div className="bg-gray-100 rounded-md mt-4 w-full flex justify-center items-center h-40 text-green4F text-tiny"> |
|
این بخش فعلا قابل دسترسی نیست. |
|
</div> |
|
), |
|
}, |
|
]} |
|
/> |
|
)} |
|
</div> |
|
<div className="w-3/12 flex flex-col" style={{ minWidth: 350 }}> |
|
<div className="w-full flex flex-col pr-2 py-2 border-0"> |
|
<h1 className="text-blue5F mb-3 font-semibold text-xl dark:text-white"> |
|
{"دوره ویدئویی" + " " + book?.product[2]?.name} |
|
</h1> |
|
<div className="text-blueC0 text-sm dark:text-greenBA"> |
|
{"پایه" + " " + grades[book?.gradeId]} |
|
</div> |
|
<div className="flex justify-end"> |
|
<div className="p-2"> |
|
<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 نفر امتیاز داده اند |
|
</div> |
|
</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 my-5"> |
|
<img src={tickIcon} alt="" className="w-9" /> |
|
<p className="text-blue52 text-sm font-light">{`توسعه خرید توسط ${ |
|
book?.recommendedPeople || 4234 |
|
} نفر`}</p> |
|
</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"> |
|
{separate(book?.product[2]?.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="اضافه کردن به سبد خرید" |
|
backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"} |
|
border={{ |
|
color: isDark ? "#ffffff55" : "#196EC055", |
|
width: "0px", |
|
}} |
|
width="100%" |
|
color={"text-white"} |
|
selectable={true} |
|
onClick={() => |
|
isLogin |
|
? pushToCart({ |
|
productId: book?.product[2]?.id, |
|
userId: userId, |
|
count: 1, |
|
}) |
|
: toast.info("ابتدا وارد حساب کاربری خود شوید.") |
|
} |
|
/> |
|
</div> |
|
</div> |
|
<Link |
|
to={"/products/" + location.getId()} |
|
className="bg-blueC0 text-green7B bg-opacity-5 font-semibold text-tiny rounded-md border border-solid border-blueC0 w-full py-4 text-center flex flex-row items-center justify-center" |
|
> |
|
مشاهده کتاب این محصول |
|
<img src={arrow} alt="" className="mr-2 transform rotate-90 w-5" /> |
|
</Link> |
|
</div> |
|
</header> |
|
</div> |
|
); |
|
} |
|
|
|
const mapStateToProps = (state) => ({ |
|
isMobile: state.publicApi.isMobile, |
|
isDark: state.publicApi.isDark, |
|
book: state.book.info, |
|
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); |
|
|
|
Video.defaultProps = {};
|
|
|