reza changed product page buttons

temp
Reza_ashrafi 3 years ago
parent fcb2390215
commit 5a84cdb19a
  1. 27
      src/components/ButtonBetween/index.js
  2. 6
      src/router.js
  3. 147
      src/views/Product/index.js

@ -0,0 +1,27 @@
import React from "react";
import { connect } from "react-redux";
export const ButtonBetween = ({ item, status, onClick, width }) => {
return (
<button
className={
"flex justify-between items-center bg-green-50 bg-opacity-80 rounded-sm border-2 border-solid border-green-500"
}
onClick={() => onClick()}
style={{ width, padding : '18px 8px' }}
>
<strong className="text-tiny text-green-700 font-semibold">{item}</strong>
{status && (
<span className="pr-3 border-r border-solid border-green-600 text-tiny text-green-700 font-semibold">
{status}
</span>
)}
</button>
);
};
const mapStateToProps = (state) => ({});
const mapDispatchToProps = {};
export default connect(mapStateToProps, mapDispatchToProps)(ButtonBetween);

@ -130,8 +130,8 @@ function Router({ isDark, isMobile, headerOptions, dialog, menu, setMenu }) {
hamburgerMenu: false, hamburgerMenu: false,
title: false, title: false,
back: true, back: true,
menu: true, menu: false,
bookmark: true, bookmark: 'productId',
}} }}
/> />
} }
@ -196,7 +196,7 @@ function Router({ isDark, isMobile, headerOptions, dialog, menu, setMenu }) {
back: true, back: true,
shown: true, shown: true,
menu: true, menu: true,
bookmark: true, bookmark: false,
}} }}
/> />
} }

@ -2,19 +2,23 @@ import React, { useState, useEffect } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import { book, userProduct, publicApi } from "../../redux/actions"; import { book, userProduct, publicApi } from "../../redux/actions";
import { Link } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import proxy from "../../redux/proxy"; import proxy from "../../redux/proxy";
import location from "../../utils/location"; import location from "../../utils/location";
import separate from "../../utils/separate";
//components
import Button from "../../components/Button"; import Button from "../../components/Button";
import Header from "../../components/Header"; import Header from "../../components/Header";
import Comment from "./Comment"; import Comment from "./Comment";
import Rate from "./Rate"; import Rate from "./Rate";
import DesktopProductLayout from "./Desktop"; import DesktopProductLayout from "./Desktop";
import Loading from "../../components/Loading";
import ButtonBetween from "../../components/ButtonBetween";
//assets //assets
import arrow from "../../assets/icons/dropdown-blue.svg"; import arrow from "../../assets/icons/dropdown-blue.svg";
export const Product = ({ export const Product = ({
isMobile, isMobile,
productType, productType,
@ -29,6 +33,7 @@ export const Product = ({
}) => { }) => {
const [type, setType] = useState("physical"); const [type, setType] = useState("physical");
const [desktopContentTransform, setDesktopContentTransform] = useState(false); const [desktopContentTransform, setDesktopContentTransform] = useState(false);
const navigation = useNavigate();
useEffect(() => { useEffect(() => {
getInfo({ id: location.getId(), vod: true }); getInfo({ id: location.getId(), vod: true });
@ -43,11 +48,17 @@ export const Product = ({
}); });
} }
}, []); }, []);
return ( return (
<> <>
{/* Portrait */} {/* Portrait */}
{isMobile ? ( {isMobile ? (
<div className="w-full flex flex-col bg-transparent px-4 pb-24"> <div className="w-full flex flex-col bg-transparent 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>
)}
<header <header
className={`w-full flex ${ className={`w-full flex ${
productType === "book" ? "flex-row" : "flex-col" productType === "book" ? "flex-row" : "flex-col"
@ -56,13 +67,11 @@ export const Product = ({
<img <img
src={`https://dnvn.ir/api/v1/file/${book?.fileIds}`} src={`https://dnvn.ir/api/v1/file/${book?.fileIds}`}
alt="" alt=""
className="w-5/12 rounded-md" className="w-5/12 rounded-sm object-contain"
/> />
<div className="flex flex-1 flex-col pr-2 pt-2"> <div className="flex flex-1 flex-col pr-2 pt-2">
<h1 className="text-blue5F mb-3 font-semibold text-base dark:text-white"> <h1 className="text-blue5F mb-3 font-semibold text-base dark:text-white">
{type === "digital" {book?.name}
? book?.product[0]?.name
: book?.product[1]?.name}
</h1> </h1>
<div className="text-green7B text-tiny dark:text-greenBA"> <div className="text-green7B text-tiny dark:text-greenBA">
{"پایه" + " " + grades[book?.gradeId]} {"پایه" + " " + grades[book?.gradeId]}
@ -70,7 +79,7 @@ export const Product = ({
</div> </div>
</header> </header>
<ul <ul
className="list-none flex flex-row divide-x items-center mt-4" className="list-none flex flex-row divide-x items-center mt-5"
style={{ direction: "ltr" }} style={{ direction: "ltr" }}
> >
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-tiny leading-5 font-medium text-green7B dark:text-white"> <li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-tiny leading-5 font-medium text-green7B dark:text-white">
@ -83,96 +92,72 @@ export const Product = ({
{book?.rate} <br /> امتیاز {book?.rate} <br /> امتیاز
</li> </li>
</ul> </ul>
<h2 className="text-green7B text-sm font-semibold mt-7 dark:text-greenBA"> <h2 className="text-green7B text-base font-semibold mt-10 dark:text-greenBA">
نسخه محصول را انتخاب کنید نسخه محصول را انتخاب کنید
</h2> </h2>
<div className="w-full flex flex-row justify-between items-center mt-4"> <div className="w-full flex flex-row justify-between items-center mt-5">
<Button <ButtonBetween
title="نسخه فیزیکی" width="100%"
backgroundColor={isDark ? "bg-transparent" : "bg-white"} item={"خرید نسخه فیزیکی کتاب"}
border={{ status={separate(book?.product[1]?.price) + " " + "تومان"}
color: isDark ? "#ffffff55" : "#196EC055", onClick={() =>
width: "1px", userId
}} ? pushToCart({
width="49%" productId: book?.product[1]?.id,
color={isDark ? "text-white" : "text-blueC0"} userId,
active={type === "physical"} count: 1,
selectable={true} })
onClick={() => setType("physical")} : toast.info("ابتدا وارد حساب کاربری خود شوید.")
/> }
<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>
<div className="w-full flex flex-row justify-between items-center mt-4 gap-2"> <div className="w-full flex flex-row justify-between items-center mt-4 gap-2">
<Button <ButtonBetween
width="72%"
item={"خرید نسخه دیجیتال کتاب"}
status={separate(book?.product[1]?.price) + " " + "تومان"}
onClick={() => onClick={() =>
proxy.status() userId
? pushToCart({ ? pushToCart({
productId: productId: book?.product[0]?.id,
type === "digital" userId,
? book?.product[0]?.id
: book?.product[1]?.id,
userId: userId,
count: 1, count: 1,
}) })
: toast.info("ابتدا وارد حساب کاربری خود شوید.") : toast.info("ابتدا وارد حساب کاربری خود شوید.")
} }
title={
"خرید با قیمت" +
" " +
(type === "digital"
? book?.product[0]?.price
: book?.product[1]?.price) +
" " +
"تومان"
}
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "0px" }}
width="65%"
color="text-white"
/> />
<a href={`https://dnvn.ir/xpdf/${book?.sampleFileId}`} className="flex-1 py-3 border border-solid border-gray-300 rounded-md text-base font-bold text-blueC0 text-center"> <a
href={`https://dnvn.ir/xpdf/${book?.sampleFileId}`}
className="flex-1 border-2 border-solid border-green-500 bg-green-50 bg-opacity-70 rounded-sm text-tiny font-bold text-green-700 text-center"
style={{ padding: "18px 0px" }}
>
مشاهده نمونه مشاهده نمونه
</a> </a>
{/* <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>
<div className="w-full flex flex-row justify-between items-center mt-4"> <div className="w-full flex flex-row justify-between items-center mt-4">
<Link <ButtonBetween
to={"/videos/" + book?.id} width="72%"
className="bg-blueC0 text-green7B dark:text-blueC0 bg-opacity-5 font-semibold text-tiny rounded-md border border-solid border-blueC0 w-full py-3 text-center flex flex-row items-center justify-center" item={"خرید نسخه ویدئویی کتاب"}
> status={separate(book?.product[1]?.price) + " " + "تومان"}
مشاهده دوره ویدیویی این محصول onClick={() =>
<img userId
src={arrow} ? pushToCart({
alt="" productId: book?.product[2]?.id,
className="mr-2 transform rotate-90 w-5" userId,
/> count: 1,
</Link> })
: toast.info("ابتدا وارد حساب کاربری خود شوید.")
}
/>
<ButtonBetween
width="25%"
item={"پیش نمایش"}
onClick={() => navigation('/videos/' + book?.idK)}
/>
</div> </div>
<div className="w-full flex flex-col justify-between items-center mt-4"> <div className="w-full flex flex-col justify-between items-center mt-8">
<Header title="توضیحات" link="#" /> <Header title="توضیحات" link="#" />
<p className="text-sm text-gray70 mt-2 dark:text-white leading-5"> <p className="text-sm text-gray70 mt-2 dark:text-white leading-6">
خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ
ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ
ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ
@ -183,12 +168,12 @@ export const Product = ({
ﺩﺯﺩﯾﺪﻩ ﺍی... ﭘﺲ ﺩﺭ ﺯﻧﺪﮔﯽ ﻓﻘﻂ ﺩﺯﺩﯼ نکن{" "} ﺩﺯﺩﯾﺪﻩ ﺍی... ﭘﺲ ﺩﺭ ﺯﻧﺪﮔﯽ ﻓﻘﻂ ﺩﺯﺩﯼ نکن{" "}
</p> </p>
</div> </div>
<div className="w-full flex flex-col justify-between items-center mt-6"> <div className="w-full flex flex-col justify-between items-center mt-10">
<Header title="امتیازات و نظرات" link="#" /> <Header title="امتیازات و نظرات" link="#" />
<Rate /> <Rate />
</div> </div>
<div <div
className="flex flex-row w-full pb-4 mt-6 no-scrollbar" className="flex flex-row w-full pb-4 mt-10 no-scrollbar"
style={{ overflowX: "scroll" }} style={{ overflowX: "scroll" }}
> >
{[0, 1, 2, 2].map((comment, index) => ( {[0, 1, 2, 2].map((comment, index) => (

Loading…
Cancel
Save