update router.js, src/views/Home/Portrait/Private/MyBooks/index.js, src/views/Products/index.js and src/views/ShoppingCart/index.js

master
Reza_ashrafi 3 years ago
parent 42e00c7ec0
commit 624fb8aaa9
  1. 24
      src/components/Modal/index.js
  2. 126
      src/views/Home/Portrait/Private/MyBooks/index.js
  3. 26
      src/views/ShoppingCart/index.js

@ -0,0 +1,24 @@
import React from "react";
export default function Modal({ children, open, onClose }) {
const [animationFlag, setAnimationFlag] = React.useState(false);
React.useEffect(() => {
setAnimationFlag(true);
return () => {
setAnimationFlag(false);
};
}, []);
return open ? (
<div
className={`w-full h-full fixed top-0 left-0 z-50 flex items-center justify-center backdrop-filter backdrop-blur-sm bg-black bg-opacity-25 transform transition-all duration-500 origin-center ${
animationFlag ? "scale-100" : "scale-0"
}`}
onClick={() => onClose()}
>
{children}
</div>
) : null;
}

@ -1,38 +1,83 @@
import React from "react"; import React from "react";
import { Link } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { ScrollingCarousel } from "@trendyol-js/react-carousel"; import { ScrollingCarousel } from "@trendyol-js/react-carousel";
//components
import Progress from "../../../../../components/Progress"; import Progress from "../../../../../components/Progress";
import Modal from "../../../../../components/Modal";
//assets
import exitImage from "../../../../../assets/icons/exit.svg";
function MyBooks({ books, grades, isMobile }) { function MyBooks({ books, grades, isMobile }) {
const Book = ({ book }) => { const [selectedModal, setSelectedModal] = React.useState(null);
return (
<li className=" flex flex-col lg:ml-6 lg:p-2 lg:border lg:border-solid lg:border-green-200 lg:rounded-md lg:pt-4"> const Book = React.useCallback(
<Link to={"/products/" + book.id}> ({ book }) => {
<img return (
src={`https://dnvn.ir/api/v1/file/${book.fileIds}`} <li className=" flex flex-col lg:ml-6 lg:p-2 lg:border lg:border-solid lg:border-green-200 lg:rounded-md lg:pt-4">
alt="" <div onClick={() => setSelectedModal(book?.id)}>
className="rounded-sm" <img
style={{ src={`https://dnvn.ir/api/v1/file/${book.fileIds}`}
height: isMobile ? "" : "calc(100vh / 4)", alt=""
width: isMobile ? "" : "calc(100vh / 4 * 3 / 4)", className="rounded-sm"
minHeight: isMobile ? "calc(100vh / 5)" : "", style={{
minWidth: isMobile ? "calc(100vh / 5 * 3 / 4)" : "", height: isMobile ? "" : "calc(100vh / 4)",
maxHeight: isMobile ? 100 : "", width: isMobile ? "" : "calc(100vh / 4 * 3 / 4)",
maxWidth: isMobile ? 70 : "", minHeight: isMobile ? "calc(100vh / 5)" : "",
}} minWidth: isMobile ? "calc(100vh / 5 * 3 / 4)" : "",
/> maxHeight: isMobile ? 100 : "",
<h2 className="mt-2 text-tiny lg:text-tiny font-semibold text-blue5F dark:text-white lg:mt-4"> maxWidth: isMobile ? 70 : "",
{book.name} }}
</h2> />
<p className="font-medium text-green7B dark:text-greenBA text-sm lg:text-sm mt-2 lg:mt-2">{`پایه ${
grades[book.gradeId] <h2 className="mt-2 text-tiny lg:text-tiny font-semibold text-blue5F dark:text-white lg:mt-4">
}`}</p> {book.name}
<Progress percent={60} direction="float-right" /> </h2>
</Link> <p className="font-medium text-green7B dark:text-greenBA text-sm lg:text-sm mt-2 lg:mt-2">{`پایه ${
</li> grades[book.gradeId]
); }`}</p>
}; <Progress percent={60} direction="float-right" />
</div>
<Modal
open={selectedModal === book?.id}
onClose={() => setSelectedModal(null)}
>
<div
className="w-2/3 rounded-md flex flex-col items-center p-2 gap-3 bg-white relative"
onClick={(e) => e.stopPropagation()}
>
<img
src={exitImage}
alt="خروج"
className="p-2 rounded-full w-8 bg-white absolute right-1 -top-6"
onClick={() => setSelectedModal(null)}
/>
<img
src={`https://dnvn.ir/api/v1/file/${book.fileIds}`}
alt={book?.name}
className="w-full object-cover"
/>
<Link
to={"/scan"}
className="w-full text-center py-3 bg-blueC0 text-white font-medium rounded-sm text-tiny"
>
اسکن کد QR
</Link>
<a
href={`https://ar.dnvn.ir/lunch?id=${book.id}`}
className="w-full text-center py-3 bg-gray-400 text-white font-medium rounded-sm text-tiny"
>
واقعیت افزوده
</a>
</div>
</Modal>
</li>
);
},
[isMobile, grades, books, selectedModal]
);
return ( return (
<div className="px-4 mb-5 lg:mb-0" style={{ maxWidth: "100%" }}> <div className="px-4 mb-5 lg:mb-0" style={{ maxWidth: "100%" }}>
@ -40,21 +85,18 @@ function MyBooks({ books, grades, isMobile }) {
<strong className="text-green7B dark:text-white font-bold text-base lg:text-base mb-2"> <strong className="text-green7B dark:text-white font-bold text-base lg:text-base mb-2">
کتابهای من کتابهای من
</strong> </strong>
{isMobile ? ( <ul className=" list-none w-full overflow-x-scroll pt-2 flex lg:hidden lg:pt-5 lg:flex-wrap lg:overflow-y-scroll gap-3 lg:gap-10 no-scrollbar">
<ul className="list-none w-full overflow-x-scroll pt-2 flex lg:pt-5 lg:flex-wrap lg:overflow-y-scroll gap-3 lg:gap-10 no-scrollbar"> {books?.slice(0, 5)?.map((book, index) => (
{books?.slice(0, 5)?.map((book, index) => ( <Book book={book} key={index} />
))}
</ul>
<div className="hidden lg:flex w-full scrolling-carousel mt-4 pb-2">
<ScrollingCarousel className="py-3">
{books?.map((book, index) => (
<Book book={book} key={index} /> <Book book={book} key={index} />
))} ))}
</ul> </ScrollingCarousel>
) : ( </div>
<div className="w-full scrolling-carousel mt-4 pb-2">
<ScrollingCarousel className="py-3">
{books?.map((book, index) => (
<Book book={book} key={index} />
))}
</ScrollingCarousel>
</div>
)}
</div> </div>
</div> </div>
); );

@ -211,12 +211,12 @@ function ShoppingCart({
<div className="flex flex-col w-full border-t border-gray-300 border-b"> <div className="flex flex-col w-full border-t border-gray-300 border-b">
<PriceStatus <PriceStatus
name="مبلغ سبد خرید" name="مبلغ سبد خرید"
value={productsLength ? factorInfo?.sumPrice : 0} value={factorInfo?.sumPrice ? factorInfo?.sumPrice : null}
type="normal" type="normal"
/> />
<PriceStatus <PriceStatus
name="میزان تخفیف" name="میزان تخفیف"
value={productsLength ? factorInfo?.offPrice : 0} value={factorInfo?.offPrice ? factorInfo?.offPrice : null}
type="error" type="error"
/> />
{/* <PriceStatus {/* <PriceStatus
@ -231,9 +231,7 @@ function ShoppingCart({
</strong> </strong>
{factorInfo?.payFactor ? ( {factorInfo?.payFactor ? (
<p className="font-medium text-greenBA text-lg dark:text-white"> <p className="font-medium text-greenBA text-lg dark:text-white">
{separate(factorInfo?.payPrice) + {separate(factorInfo?.payPrice) + " " + "تومان"}
" " +
"تومان"}
</p> </p>
) : null} ) : null}
</div> </div>
@ -295,7 +293,7 @@ function ShoppingCart({
<div className="flex flex-col w-full border-t py-2 border-gray-300 border-b"> <div className="flex flex-col w-full border-t py-2 border-gray-300 border-b">
<PriceStatus <PriceStatus
name="مبلغ سبد خرید" name="مبلغ سبد خرید"
value={factorInfo?.sumPrice ? factorInfo?.sumPrice : " "} value={factorInfo?.sumPrice ? factorInfo?.sumPrice : null}
type="normal" type="normal"
/> />
<PriceStatus <PriceStatus
@ -309,7 +307,7 @@ function ShoppingCart({
/> />
<PriceStatus <PriceStatus
name="میزان تخفیف" name="میزان تخفیف"
value={factorInfo?.offPrice ? factorInfo?.offPrice : " "} value={factorInfo?.offPrice ? factorInfo?.offPrice : null}
type="error" type="error"
/> />
{/* <PriceStatus {/* <PriceStatus
@ -326,12 +324,14 @@ function ShoppingCart({
<strong className="font-semibold text-tiny text-blue5F dark:text-white"> <strong className="font-semibold text-tiny text-blue5F dark:text-white">
جمع کل سبد خرید جمع کل سبد خرید
</strong> </strong>
<p className="font-medium text-greenBA text-lg dark:text-white"> {factorInfo?.payPrice ? (
{separate(productsLength ? factorInfo?.payPrice : "")} <p className="font-medium text-greenBA text-lg dark:text-white">
<span className="font-medium text-greenBA text-sm mr-2"> {separate(factorInfo?.payPrice)}
تومان <span className="font-medium text-greenBA text-sm mr-2">
</span> تومان
</p> </span>
</p>
) : null}
</div> </div>
{phase === "products" && ( {phase === "products" && (
<div <div

Loading…
Cancel
Save