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.
273 lines
10 KiB
273 lines
10 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"; |
|
|
|
//components |
|
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"; |
|
import Comments from "../../components/Comments"; |
|
import Loading from "../../components/Loading"; |
|
|
|
//assets |
|
import tickIcon from "../../components/ProductStatusCard/tick-circle.svg"; |
|
import arrow from "../../assets/icons/dropdown-blue.svg"; |
|
import bookmarkDeactiveLightIcon from "../../assets/icons/bookmark-deactive-light.svg"; |
|
import bookmarkDeactiveDarkIcon from "../../assets/icons/bookmark-deactive-dark.svg"; |
|
|
|
function Video({ |
|
isLogin, |
|
pushToCart, |
|
userId, |
|
isMobile, |
|
isDark, |
|
headerOptions, |
|
setHeaderOptions, |
|
grades, |
|
getBook, |
|
book, |
|
seasons, |
|
addToFavorite, |
|
}) { |
|
useEffect(() => { |
|
getBook({ bookId: location.getId() }, { id: location.getId(), vod: true }); |
|
setHeaderOptions(headerOptions); |
|
}, []); |
|
|
|
useEffect(() => { |
|
window.scrollTo(0, 0); |
|
}, []); |
|
|
|
const { bookmark } = headerOptions; |
|
|
|
return isMobile ? ( |
|
<div className="w-full flex flex-col 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> |
|
)} |
|
<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-sm w-5/12 object-contain" |
|
/> |
|
<div className="flex flex-col py-1 pr-3"> |
|
<strong className="text-blue5F leading-7 text-lg dark:text-white font-black"> |
|
{"دوره ویدئویی" + " " + book?.product[2]?.name} |
|
</strong> |
|
<span className="text-blueC0 text-base dark:text-greenBA font-semibold 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: "سر فصل ها", |
|
shown: true, |
|
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: "مشخصات", |
|
shown: book?.product.filter( |
|
(product) => product?.productType === 4 |
|
)?.properties?.length, |
|
components: ( |
|
<Table |
|
specifications={ |
|
book?.product.filter( |
|
(product) => product?.productType === 4 |
|
)?.properties |
|
} |
|
/> |
|
), |
|
}, |
|
{ |
|
title: "نقد و بررسی", |
|
shown: true, |
|
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: "پرسش و پاسخ", |
|
shown: true, |
|
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 leading-7 mb-3 font-semibold text-xl dark:text-white"> |
|
{"دوره ویدئویی" + " " + book?.product[2]?.name} |
|
</h1> |
|
<div className="text-blueC0 text-tiny dark:text-greenBA font-bold"> |
|
{"پایه" + " " + grades[book?.gradeId]} |
|
</div> |
|
<div className="flex justify-end"> |
|
<div className="p-2"> |
|
<StarRating value={book?.product[2]?.rate || 4} /> |
|
</div> |
|
<div className="p-2 border-0 border-solid border-r border-gray-100 text-sm text-gray-400"> |
|
بیش از {book?.product[2]?.suggestedCounter} نفر امتیاز داده اند |
|
</div> |
|
</div> |
|
</div> |
|
<div className="bg-grayF9 w-full flex flex-col rounded-md divide-y divide-solid divide-gray-200 mb-4 px-4"> |
|
<div className="flex flex-row items-center w-full gap-5 my-5"> |
|
<img src={tickIcon} alt="" className="w-9" /> |
|
<p className="text-blue52 text-sm font-light">{`توصیه خرید توسط ${book?.product[2]?.suggestedCounter} نفر`}</p> |
|
</div> |
|
<div className="flex flex-row items-center py-3"> |
|
<img |
|
src={ |
|
isDark ? bookmarkDeactiveDarkIcon : bookmarkDeactiveLightIcon |
|
} |
|
alt="bookmark" |
|
className="w-7" |
|
onClick={() => addToFavorite({ [bookmark]: location.getId() })} |
|
/> |
|
<span className="mr-3 text-sm"> |
|
اضافه کردن به لیست علاقه مندی ها |
|
</span> |
|
</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-5xl"> |
|
{separate(book?.product[2]?.price)} |
|
</strong> |
|
<span className="text-sm text-gray-500">تومان</span> |
|
</div> |
|
{book?.product[2]?.fakePrice ? ( |
|
<p className="text-gray-500 text-xs text-center mt-2 mb-4"> |
|
با خرید این کالا 540.000 صرفه جویی کنید |
|
</p> |
|
) : ( |
|
<div className="mb-4"></div> |
|
)} |
|
<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> |
|
<Comments indent={false} /> |
|
</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 = {};
|
|
|