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. 60
      src/views/Home/Portrait/Private/MyBooks/index.js
  3. 16
      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,14 +1,23 @@
import React from "react";
import { Link } from "react-router-dom";
import { Link, useNavigate } from "react-router-dom";
import { connect } from "react-redux";
import { ScrollingCarousel } from "@trendyol-js/react-carousel";
//components
import Progress from "../../../../../components/Progress";
import Modal from "../../../../../components/Modal";
//assets
import exitImage from "../../../../../assets/icons/exit.svg";
function MyBooks({ books, grades, isMobile }) {
const Book = ({ book }) => {
const [selectedModal, setSelectedModal] = React.useState(null);
const Book = React.useCallback(
({ book }) => {
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">
<Link to={"/products/" + book.id}>
<div onClick={() => setSelectedModal(book?.id)}>
<img
src={`https://dnvn.ir/api/v1/file/${book.fileIds}`}
alt=""
@ -22,6 +31,7 @@ function MyBooks({ books, grades, isMobile }) {
maxWidth: isMobile ? 70 : "",
}}
/>
<h2 className="mt-2 text-tiny lg:text-tiny font-semibold text-blue5F dark:text-white lg:mt-4">
{book.name}
</h2>
@ -29,10 +39,45 @@ function MyBooks({ books, grades, isMobile }) {
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 (
<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>
{isMobile ? (
<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">
<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">
{books?.slice(0, 5)?.map((book, index) => (
<Book book={book} key={index} />
))}
</ul>
) : (
<div className="w-full scrolling-carousel mt-4 pb-2">
<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} />
))}
</ScrollingCarousel>
</div>
)}
</div>
</div>
);

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

Loading…
Cancel
Save