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

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 = {};