Pedram Keshavarzi 3 years ago
commit ca84af9095
  1. 10
      src/assets/icons/delete.svg
  2. 1
      src/components/BG/index.js
  3. 2
      src/components/Button/index.js
  4. 400
      src/components/Navbar/index.js
  5. 2
      src/redux/actions/public.js
  6. 6
      src/redux/reducers/public.js
  7. 42
      src/router.js
  8. 13
      src/views/Products/index.js
  9. 4
      src/views/Products/layouts/Main.js
  10. 73
      src/views/ShoppingCart/Product/index.js
  11. 236
      src/views/ShoppingCart/index.js
  12. 25
      tailwind.config.js

@ -0,0 +1,10 @@
<svg id="vuesax_linear_trash" data-name="vuesax/linear/trash" xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 31 31">
<g id="trash">
<path id="Vector" d="M23.25.646C18.949.22,14.622,0,10.307,0A76.3,76.3,0,0,0,2.635.388L0,.646" transform="translate(3.875 7.078)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,3.836.284,2.144C.491.917.646,0,2.829,0H6.213C8.4,0,8.564.969,8.757,2.157l.284,1.679" transform="translate(10.979 2.583)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M17.7,0l-.84,13.007c-.142,2.028-.258,3.6-3.862,3.6H4.7c-3.6,0-3.72-1.576-3.862-3.6L0,0" transform="translate(6.652 11.806)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M0,0H4.3" transform="translate(13.343 21.313)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-5" data-name="Vector" d="M0,0H6.458" transform="translate(12.271 16.146)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-6" data-name="Vector" d="M0,0H31V31H0Z" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@ -12,6 +12,7 @@ export const BG = ({ isDark }) => {
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark, isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile
}); });
const mapDispatchToProps = {}; const mapDispatchToProps = {};

@ -13,7 +13,7 @@ export default function Button({
}) { }) {
return ( return (
<button <button
className={`rounded-md py-3 justify-center text-sm ${ className={`rounded-md py-3 justify-center text-sm cursor-pointer ${
selectable ? (active ? "bg-black" : backgroundColor) : backgroundColor selectable ? (active ? "bg-black" : backgroundColor) : backgroundColor
} ${selectable ? (active ? "text-blueC0" : color) : color} ${ } ${selectable ? (active ? "text-blueC0" : color) : color} ${
selectable ? (active ? "bg-opacity-10" : bgOpacity) : bgOpacity selectable ? (active ? "bg-opacity-10" : bgOpacity) : bgOpacity

@ -69,13 +69,12 @@ function Navbar({
if (!isMobile) { if (!isMobile) {
window.addEventListener("scroll", () => { window.addEventListener("scroll", () => {
if (window.scrollY >= 64) { if (window.scrollY >= 64) {
setDesktopMiddleFix(() => true); setDesktopMiddleFix(() => true);
} else { } else {
setDesktopMiddleFix(() => false); setDesktopMiddleFix(() => false);
} }
if (window.scrollY > lastScroll && window.scrollY >= 90) { if (window.scrollY > lastScroll && window.scrollY >= 90) {
setDesktopEndTransform(() => true); setDesktopEndTransform(() => true);
} else { } else {
@ -85,227 +84,214 @@ function Navbar({
}); });
} }
}, []); }, []);
return ( return isMobile ? (
<> <div
{isMobile ? ( className={_.join(
<div [
className={_.join( "z-50 flex flex-1 flex-row fixed left-0 top-0 justify-between w-full lg:bg-opacity-20 lg:bg-transparent lg:shadow-sm lg:backdrop-filter lg:backdrop-blur-md lg:px-5 xl:px-10 transition-all duration-300",
[ ],
"z-50 flex flex-1 flex-row fixed left-0 top-0 justify-between w-full lg:bg-opacity-20 lg:bg-transparent lg:shadow-sm lg:backdrop-filter lg:backdrop-blur-md lg:px-5 xl:px-10 transition-all duration-300", " "
], )}
" " style={{
backgroundColor: !top ? (isDark ? "#061B30" : "white") : "",
}}
>
{/* landscape start */}
{/* landscape end */}
{/* portrait start */}
<div className="w-full h-full relative flex flex-row items-center justify-between lg:hidden py-3 px-4">
<div className="relative">
{hamburgerMenu && (
<>
<span className="w-2.5 h-2.5 rounded-full bg-redFF1 absolute -left-1 -top-1 animate-bounce"></span>
<img
onClick={() => setDrawerOpen((prevState) => !prevState)}
src={isDark ? hamburgerIcon : hamburgerBlueIcon}
alt=""
className="w-7 h-7.5"
/>
</>
)} )}
style={{ {!title && back ? (
backgroundColor: !top ? (isDark ? "#061B30" : "white") : "", <img
}} src={isDark ? arrowWhiteIcon : arrowBlueIcon}
> alt="back"
{/* landscape start */} className={`w-6 ${isDark ? "transform rotate-180" : ""}`}
onClick={() => navigation(-1)}
/>
) : null}
{title && (
<strong className="text-blueC0 text-lg font-semibold dark:text-white">
{title}
</strong>
)}
</div>
{logo && (
<Link
to="/"
className="absolute left-1/2 transform -translate-y-1/2 top-1/2 -translate-x-1/2"
>
<img src={logoIcon} className="w-6 h-8" />
</Link>
)}
{/* landscape end */} <div className="flex flex-row items-center">
{/* portrait start */} {qr && (
<div className="w-full h-full relative flex flex-row items-center justify-between lg:hidden py-3 px-4"> <>
<div className="relative">
{hamburgerMenu && (
<>
<span className="w-2.5 h-2.5 rounded-full bg-redFF1 absolute -left-1 -top-1 animate-bounce"></span>
<img
onClick={() => setDrawerOpen((prevState) => !prevState)}
src={isDark ? hamburgerIcon : hamburgerBlueIcon}
alt=""
className="w-7 h-7.5"
/>
</>
)}
{!title && back ? (
<img
src={isDark ? arrowWhiteIcon : arrowBlueIcon}
alt="back"
className={`w-6 ${isDark ? "transform rotate-180" : ""}`}
onClick={() => navigation(-1)}
/>
) : null}
{title && (
<strong className="text-blueC0 text-lg font-semibold dark:text-white">
{title}
</strong>
)}
</div>
{logo && (
<Link <Link
to="/" to="/qr"
className="absolute left-1/2 transform -translate-y-1/2 top-1/2 -translate-x-1/2" className={_.join(
[
"rounded-sm p-1.5",
isDark ? "bg-gray36 ml-2" : "bg-blueFF1 ml-3 shadow-sm",
],
" "
)}
style={{
border: `1px solid ${isDark ? "#D7E3FC20" : "#D7E3FC"}`,
}}
> >
<img src={logoIcon} className="w-6 h-8" />
</Link>
)}
<div className="flex flex-row items-center">
{qr && (
<>
<Link
to="/qr"
className={_.join(
[
"rounded-sm p-1.5",
isDark
? "bg-gray36 ml-2"
: "bg-blueFF1 ml-3 shadow-sm",
],
" "
)}
style={{
border: `1px solid ${isDark ? "#D7E3FC20" : "#D7E3FC"}`,
}}
>
<img
src={isDark ? qrIcon : qrBlueIcon}
alt=""
className={_.join(["w-6"], " ")}
/>
</Link>
<Link
to="/ar"
className={_.join(
[
"rounded-sm p-1.5",
isDark ? "bg-gray36" : "bg-blueFF1 shadow-sm",
],
" "
)}
style={{
border: `1px solid ${isDark ? "#D7E3FC20" : "#D7E3FC"}`,
}}
>
<img
src={isDark ? arIcon : arBlueIcon}
alt=""
className={_.join(["w-6"], " ")}
/>
</Link>
</>
)}
{bookmark && (
<img
src={
isDark
? bookmarkDeactiveDarkIcon
: bookmarkDeactiveLightIcon
}
alt="bookmark"
className="w-7 ml-2"
/>
)}
{menu && (
<img <img
src={isDark ? dotsMenuDarkIcon : dotsMenuLightIcon} src={isDark ? qrIcon : qrBlueIcon}
alt="menu" alt=""
className="w-7" className={_.join(["w-6"], " ")}
/> />
)} </Link>
{title && back ? ( <Link
to="/ar"
className={_.join(
[
"rounded-sm p-1.5",
isDark ? "bg-gray36" : "bg-blueFF1 shadow-sm",
],
" "
)}
style={{
border: `1px solid ${isDark ? "#D7E3FC20" : "#D7E3FC"}`,
}}
>
<img <img
src={isDark ? arrowWhiteIcon : arrowBlueIcon} src={isDark ? arIcon : arBlueIcon}
alt="back" alt=""
className={`w-6 ${isDark ? "" : "transform -rotate-180"}`} className={_.join(["w-6"], " ")}
onClick={() => navigation(-1)}
/> />
) : null} </Link>
</div> </>
</div> )}
<Drawer drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} /> {bookmark && (
{/* portrait end */} <img
src={
isDark ? bookmarkDeactiveDarkIcon : bookmarkDeactiveLightIcon
}
alt="bookmark"
className="w-7 ml-2"
/>
)}
{menu && (
<img
src={isDark ? dotsMenuDarkIcon : dotsMenuLightIcon}
alt="menu"
className="w-7"
/>
)}
{title && back ? (
<img
src={isDark ? arrowWhiteIcon : arrowBlueIcon}
alt="back"
className={`w-6 ${isDark ? "" : "transform -rotate-180"}`}
onClick={() => navigation(-1)}
/>
) : null}
</div> </div>
) : ( </div>
<header className={`rounded-b-md w-full bg-transparent pb-4`}> <Drawer drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
<div className="flex flex-row justify-between items-center border-b border-gray-200 border-solid h-16 px-6"> {/* portrait end */}
<div className="divide-x flex flex-row-reverse transform translate-x-2"> </div>
<span className="text-sm font-normal text-blue52 mr-6"> ) : (
انتخاب کشور <header className={`rounded-b-md w-full bg-transparent pb-4`}>
</span> <div className="flex flex-row justify-between items-center border-b border-gray-200 border-solid h-16 px-6">
<span className="text-sm font-normal text-blue52"> <div className="divide-x flex flex-row-reverse transform translate-x-2">
پیگیری سفارش <span className="text-sm font-normal text-blue52 mr-6">
</span> انتخاب کشور
</div> </span>
<div className="divide-x"> <span className="text-sm font-normal text-blue52">پیگیری سفارش</span>
<span className="text-sm font-normal ml-6 text-blue52"> </div>
شکایات&nbsp; <div className="divide-x">
</span> <span className="text-sm font-normal ml-6 text-blue52">
<span className="text-sm font-normal text-blue52"> شکایات&nbsp;
ورود و ثبت نام </span>
</span> <span className="text-sm font-normal text-blue52">
</div> ورود و ثبت نام
</span>
</div>
</div>
<div
className={`w-full flex flex-col z-20 ${
desktopMiddleFix ? "fixed top-0 left-0" : ""
}`}
>
<div className="w-full flex flex-row items-center h-full relative bg-white justify-between py-4 px-5 z-20 border-b border-gray-200 border-solid ">
<div className="ml-10">
<span className={`text-sm font-bold ml-4 text-gray-700`}>
Design System
</span>
</div> </div>
<div <div
className={`w-full flex flex-col z-20 ${ className="hidden lg:flex items-center w-3/5 justify-around flex-1 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
desktopMiddleFix ? "fixed top-0 left-0" : "" style={{ maxWidth: "calc(100vw / 2)" }}
}`} ></div>
<div
className="flex w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
style={{ maxWidth: "calc(100vw / 2)" }}
> >
<div className="w-full flex flex-row items-center h-full relative bg-white justify-between py-4 px-5 z-20 border-b border-gray-200 border-solid "> <Search />
<div className="ml-10"> </div>
<span className={`text-sm font-bold ml-4 text-gray-700`}>
Design System
</span>
</div>
<div
className="hidden lg:flex items-center w-3/5 justify-around flex-1 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
style={{ maxWidth: "calc(100vw / 2)" }}
></div>
<div
className="flex w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
style={{ maxWidth: "calc(100vw / 2)" }}
>
<Search />
</div>
<div className="flex justify-end items-center"> <div className="flex justify-end items-center">
<img src={cartIcon} alt="" className="w-5 h-5 ml-2" /> <img src={cartIcon} alt="" className="w-5 h-5 ml-2" />
{/* <img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" /> */} {/* <img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" /> */}
{/* <img src={searchIcon} alt="" className="w-5 h-5 ml-2" /> */} {/* <img src={searchIcon} alt="" className="w-5 h-5 ml-2" /> */}
<img src={profileIcon} alt="" className="w-5 h-5" /> <img src={profileIcon} alt="" className="w-5 h-5" />
</div> </div>
</div> </div>
<div <div
className={`flex items-center relative w-full h-10 px-4 border-b border-solid border-gray-200 transform bg-white ${ className={`flex items-center relative w-full h-10 px-4 border-b border-solid border-gray-200 transform bg-white ${
desktopEndTransform ? "-translate-y-10" : "" desktopEndTransform ? "-translate-y-10" : ""
}`} }`}
style={{ style={{
transition: "all 0.3s", transition: "all 0.3s",
transitionDelay : '0.1s', }}
}} >
> <div className="ml-10 flex flex-row items-center">
<div className="ml-10 flex flex-row items-center"> <img
<img src={darkCrimsonHamburgerMenu}
src={darkCrimsonHamburgerMenu} alt=""
alt="" className="w-5 transform translate-y-1 ml-2"
className="w-5 transform translate-y-1 ml-2" />
/> {/* <img src={whiteHamburgerMenu} alt="" className="w-3 h-3" /> */}
{/* <img src={whiteHamburgerMenu} alt="" className="w-3 h-3" /> */} <span className={`text-sm text-blue52 ${productCategoryTextColor}`}>
<span دسته بندی کالاها&nbsp;&nbsp;
className={`text-sm text-blue52 ${productCategoryTextColor}`} </span>
> </div>
دسته بندی کالاها&nbsp;&nbsp; <div
</span> className="flex items-center justify-around w-3/5 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
</div> style={{ maxWidth: "calc(100vw / 2)" }}
<div >
className="flex items-center justify-around w-3/5 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2" {menuItems.map((item, index) => (
style={{ maxWidth: "calc(100vw / 2)" }} <a
href="#"
className={`text-sm text-blue52 ${menuItemsColor}`}
key={index}
> >
{menuItems.map((item, index) => ( {item}
<a </a>
href="#" ))}
className={`text-sm text-blue52 ${menuItemsColor}`}
key={index}
>
{item}
</a>
))}
</div>
</div>
</div> </div>
</header> </div>
)} </div>
</> </header>
); );
} }

@ -1,5 +1,7 @@
import proxy from "../proxy"; import proxy from "../proxy";
const publicApi = { const publicApi = {
setDesktopContentTransform: (data) => async (dispatch) =>
await dispatch({type : "public/setDesktopContentTransform", data}),
setHeaderOptions: (data) => async (dispatch) => setHeaderOptions: (data) => async (dispatch) =>
await dispatch({ type: "public/setHeaderOptions", data }), await dispatch({ type: "public/setHeaderOptions", data }),
setIsDark: (data) => async (dispatch) => setIsDark: (data) => async (dispatch) =>

@ -59,7 +59,8 @@ const initialState = {
menu : false, menu : false,
back : false, back : false,
title : false, title : false,
} },
desktopContentTransform : false,
}; };
const grades = [ const grades = [
@ -77,9 +78,12 @@ const grades = [
"یازدهم", "یازدهم",
"دوازدهم", "دوازدهم",
]; ];
export default function publicApi(state = initialState, action) { export default function publicApi(state = initialState, action) {
let { type, data } = action; let { type, data } = action;
switch (type) { switch (type) {
case "public/setDesktopContentTransform":
return {...state, desktopContentTransform : data };
case "public/setHeaderOptions": case "public/setHeaderOptions":
return {...state, headerOptions : data}; return {...state, headerOptions : data};
case "public/setIsDark": case "public/setIsDark":

@ -1,6 +1,7 @@
import React from "react"; import React, { useEffect } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom"; import { BrowserRouter, Routes, Route } from "react-router-dom";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { publicApi } from "./redux/actions";
import Navbar from "./components/Navbar"; import Navbar from "./components/Navbar";
import BG from "./components/BG"; import BG from "./components/BG";
import BottomNavigation from "./components/BottomNavigation"; import BottomNavigation from "./components/BottomNavigation";
@ -24,7 +25,20 @@ import Faq from "./views/Faq";
import Contact from "./views/Contact"; import Contact from "./views/Contact";
// import VideoTube from "./views/Home/VideoTube"; // import VideoTube from "./views/Home/VideoTube";
function Router({ isDark,isMobile, isLogin, headerOptions }) { function Router({ isDark, isMobile, isLogin, headerOptions, setDesktopContentTransform }) {
useEffect(() => {
window.addEventListener("scroll", () => {
if (!isMobile) {
window.addEventListener("scroll", () => {
if (window.scrollY >= 64) {
setDesktopContentTransform(true);
} else {
setDesktopContentTransform(false);
}
});
}
});
}, []);
return ( return (
<div className={_.join([isDark ? "dark" : ""], " ")}> <div className={_.join([isDark ? "dark" : ""], " ")}>
<div <div
@ -39,8 +53,12 @@ function Router({ isDark,isMobile, isLogin, headerOptions }) {
> >
<BrowserRouter> <BrowserRouter>
{headerOptions?.shown && <Navbar headerOptions={headerOptions} />} {headerOptions?.shown && <Navbar headerOptions={headerOptions} />}
<BG /> {isMobile && (
<BottomNavigation /> <>
<BG />
<BottomNavigation />
</>
)}
<Routes> <Routes>
<Route <Route
path="/" path="/"
@ -82,7 +100,9 @@ function Router({ isDark,isMobile, isLogin, headerOptions }) {
<Route <Route
path="/products" path="/products"
exact exact
element={<Products headerOptions={{ shown: isMobile ? false : true }} />} element={
<Products headerOptions={{ shown: isMobile ? false : true }} />
}
/> />
<Route <Route
path="/products/:id" path="/products/:id"
@ -108,8 +128,8 @@ function Router({ isDark,isMobile, isLogin, headerOptions }) {
<ShoppingCart <ShoppingCart
headerOptions={{ headerOptions={{
shown: true, shown: true,
title: "سبد خرید", title: isMobile && "سبد خرید",
back: true, back: isMobile && true,
}} }}
/> />
} }
@ -303,9 +323,13 @@ function Router({ isDark,isMobile, isLogin, headerOptions }) {
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark, isDark: state.publicApi.isDark,
isMobile : state.publicApi.isMobile, isMobile: state.publicApi.isMobile,
isLogin: state.user.status, isLogin: state.user.status,
headerOptions: state.publicApi.headerOptions, headerOptions: state.publicApi.headerOptions,
}); });
export default connect(mapStateToProps, {})(Router); const mapDispatchToProps = {
setDesktopContentTransform : publicApi.setDesktopContentTransform,
}
export default connect(mapStateToProps, mapDispatchToProps)(Router);

@ -21,13 +21,14 @@ export const Products = ({
gradeFilterBooks, gradeFilterBooks,
setHeaderOptions, setHeaderOptions,
headerOptions, headerOptions,
desktopContentTransform,
}) => { }) => {
const [filter, setFilter] = useState({ const [filter, setFilter] = useState({
search: "", search: "",
grade: "", grade: "",
productsType: "کتاب", productsType: "کتاب",
}); });
const [desktopContentTransform, setDesktopContentTransform] = useState(false);
const onChange = (name, value) => { const onChange = (name, value) => {
setFilter({ ...filter, [name]: value }); setFilter({ ...filter, [name]: value });
@ -36,15 +37,6 @@ export const Products = ({
useEffect(() => { useEffect(() => {
getList(); getList();
setHeaderOptions(headerOptions); setHeaderOptions(headerOptions);
if (!isMobile) {
window.addEventListener("scroll", () => {
if (window.scrollY >= 64) {
setDesktopContentTransform(() => true);
} else {
setDesktopContentTransform(() => false);
}
});
}
}, []); }, []);
useEffect(() => { useEffect(() => {
@ -182,6 +174,7 @@ const mapStateToProps = (state) => ({
grades: state.publicApi.grades, grades: state.publicApi.grades,
gradeFilterBooks: state.book.gradeFilterBooks, gradeFilterBooks: state.book.gradeFilterBooks,
selectedGrade: state.book.selectedGrade, selectedGrade: state.book.selectedGrade,
desktopContentTransform: state.publicApi.desktopContentTransform,
}); });
const mapDispatchToProps = { const mapDispatchToProps = {

@ -55,13 +55,13 @@ export const Main = ({ isMobile,
<ul className='flex justify-between w-3/4 px-4 py-0 '> <ul className='flex justify-between w-3/4 px-4 py-0 '>
{ {
filteringNavItems.map(e => ( filteringNavItems.map(e => (
<li className='text-sm rounded py-2 px-6 transition-all hover:bg-gray-300 hover:text-blueC0 cursor-pointer' onClick={() => console.log('a')}>{e.title}</li> <li className='text-sm rounded py-2 px-6 transition-all duration-700 hover:bg-gray-300 hover:text-blueC0 cursor-pointer' onClick={() => console.log('a')}>{e.title}</li>
)) ))
} }
</ul> </ul>
</div> </div>
<div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden justify-center"> <div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden justify-between">
{selectedGrade {selectedGrade
? gradeFilterBooks?.map((product, index) => ( ? gradeFilterBooks?.map((product, index) => (
<Product <Product

@ -5,9 +5,10 @@ import { userProduct } from "../../../redux/actions";
// assets // assets
import bookImage from "../../../assets/images/zist-11.svg"; import bookImage from "../../../assets/images/zist-11.svg";
import exitIcon from "../../../assets/icons/exit.svg"; import exitIcon from "../../../assets/icons/exit.svg";
import deleteIcon from "../../../assets/icons/delete.svg";
function Product({ product, grades, pushToCart }) { function Product({ product, grades, pushToCart, isMobile }) {
return ( return isMobile ? (
<div className="flex flex-row justify-between py-5 border-b border-solid border-grayDB dark:border-gray45"> <div className="flex flex-row justify-between py-5 border-b border-solid border-grayDB dark:border-gray45">
<div className="flex flex-row"> <div className="flex flex-row">
<img <img
@ -36,10 +37,10 @@ function Product({ product, grades, pushToCart }) {
{ {
productId: product?.productId, productId: product?.productId,
userId: product?.userId, userId: product?.userId,
count: product?.productType === 1 ? -1 : -product?.count, count: product?.productType === 1 ? -1 : -product?.count,
}, },
{}, {},
{id : product?.factorId} { id: product?.factorId }
) )
} }
/> />
@ -81,11 +82,75 @@ function Product({ product, grades, pushToCart }) {
</div> </div>
</div> </div>
</div> </div>
) : (
<div className="flex flex-row w-full gap-10 py-4 border-b border-solid border-gray-200">
<div className="w-1/2 flex flex-row">
<img
src={"https://dnvn.ir/api/v1/file/" + product?.product?.book?.fileIds}
className="rounded-md w-20"
/>
<div className="flex flex-col pr-4 pt-1">
<strong className="text-lg text-blue5F mb-1 dark:text-white font-semibold">
{product?.product?.book?.name}
</strong>
<div className="flex flex-row items-center mt-4">
<span className="w-2 h-2 bg-greenBA rounded-md ml-1"></span>
<div className="text-gray70 text-sm dark:text-greenBA">
{"پایه" + " " + grades[product?.product?.book?.gradeId]}
</div>
<span className="w-2 h-2 bg-greenBA rounded-md mr-5 ml-1"></span>
<div className="text-gray70 text-sm dark:text-greenBA">
{product?.productType === 2 ? "نسخه فیزیکی" : "نسخه دیجیتال"}
</div>
</div>
</div>
</div>
<div className="w-1/4 flex flex-row items-center">
<button
className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-blueC0 text-blueC0 text-lg"
onClick={() =>
pushToCart({
productId: product?.productId,
userId: product?.userId,
count: 1,
})
}
>
+
</button>
<span className="mx-2.5 font-semibold text-lg text-blueC0">
{product.count}
</span>
<button
className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-grayDB text-grayDB dark:border-blueC0 dark:text-blueC0 text-lg"
onClick={() =>
pushToCart({
productId: product?.productId,
userId: product?.userId,
count: -1,
})
}
>
-
</button>
</div>
<div className="w-1/4 flex flex-row items-center justify-end pl-4">
<strong className="font-semibold text-md text-blue5F dark:text-white">
&nbsp;{product?.product?.price}&nbsp;&nbsp;تومان
</strong>
<img
src={deleteIcon}
alt="delete"
className="border border-red-800 border-solid p-1 w-8 bg-red-100 rounded-md mr-4"
/>
</div>
</div>
); );
} }
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
grades: state.publicApi.grades, grades: state.publicApi.grades,
isMobile: state.publicApi.isMobile,
}); });
const mapDispatchToProps = { const mapDispatchToProps = {

@ -10,22 +10,6 @@ import alertIcon from "../../assets/icons/alert.svg";
import { connect } from "react-redux"; import { connect } from "react-redux";
const PriceStatus = ({ name, value, type, isDark }) => {
return (
<div className="w-full flex flex-row justify-between py-2">
<strong className="font-light text-sm dark:text-white">{name}</strong>
<span
className="font-bold text-sm dark:text-white"
style={{
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
}}
>
{value + " " + "تومان"}
</span>
</div>
);
};
function ShoppingCart({ function ShoppingCart({
isDark, isDark,
isMobile, isMobile,
@ -40,6 +24,7 @@ function ShoppingCart({
payFactor, payFactor,
headerOptions, headerOptions,
setHeaderOptions, setHeaderOptions,
desktopContentTransform,
}) { }) {
useEffect(() => { useEffect(() => {
getList(); getList();
@ -48,71 +33,173 @@ function ShoppingCart({
}, []); }, []);
const Table = () => { const Table = () => {
return (
} <div className="w-full flex flex-col">
return ( <header className="w-full flex flex-row gap-10">
<> <strong className="w-1/2 pb-2 border-b border-solid border-gray-200 text-gray70 text-sm font-normal">
{isMobile ? ( کالاهای انتخابی{" "}
<div className="w-full flex flex-col px-4"> </strong>
<strong className="w-1/4 pb-2 border-b border-solid border-gray-200 text-gray70 text-sm font-normal">
تعداد سفارش
</strong>
<strong className="w-1/4 pb-2 border-b border-solid border-gray-200 text-gray70 text-sm font-normal">
مبلغ
</strong>
</header>
<ul className="w-full mt-2 list-none p-0">
{list.map((product, index) => ( {list.map((product, index) => (
<Product key={index} product={product} /> <Product key={index} product={product} />
))} ))}
<Code /> </ul>
<div className="flex flex-col w-full border-t py-2 border-gray-300 border-b mt-6"> </div>
<PriceStatus );
name="مبلغ سبد خرید" };
value={factorInfo?.sumPrice}
type="normal" const PriceStatus = ({ name, value, type }) => {
isDark={isDark} return isMobile ? (
/> <div className="w-full flex flex-row justify-between py-2">
<PriceStatus <strong className="font-light text-sm dark:text-white">{name}</strong>
name="میزان تخفیف" <span
value={factorInfo?.offPrice} className="font-bold text-sm dark:text-white"
type="error" style={{
isDark={isDark} color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
/> }}
<PriceStatus >
name="مالیات بر ارزش افزوده" {value + " " + "تومان"}
value={factorInfo?.sumPrice * 0.009} </span>
type="error" </div>
isDark={isDark} ) : (
/> <div className="w-full flex flex-row justify-between py-4">
</div> <strong className="font-light text-base dark:text-white text-blue5F">
<div className="flex flex-row justify-between items-center w-full py-3"> {name}
<strong className="font-medium text-sm dark:text-white"> </strong>
جمع کل سبد خرید <span
</strong> className="font-medium text-xl dark:text-white"
<p className="font-medium text-greenBA text-xs dark:text-white"> style={{
{factorInfo?.payPrice + " " + "تومان"} color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
</p> }}
</div> >
<div {value}
className="w-full rounded-md flex flex-row justify-center items-center py-2.5 px-3 my-5" <span
style={{ backgroundColor: "#196EC01a" }} style={{
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
}}
className="text-sm mr-2"
> >
<img src={alertIcon} className="w-5 ml-2" /> تومان
<p className="text-xs text-blueC0 dark:text-white"> </span>
هزینه ارسال کالا پس از تعیین محل آدرس مشخص میشود </span>
</p> </div>
</div> );
<Button };
title="ادامه فرایند خرید"
backgroundColor="bg-blueC0" return isMobile ? (
border={{ color: "#196EC055", width: "1px" }} <div className="w-full flex flex-col px-4">
width="100%" {list.map((product, index) => (
color="text-white" <Product key={index} product={product} />
// onClick={() => } ))}
<Code />
<div className="flex flex-col w-full border-t py-2 border-gray-300 border-b mt-6">
<PriceStatus
name="مبلغ سبد خرید"
value={factorInfo?.sumPrice}
type="normal"
/>
<PriceStatus
name="میزان تخفیف"
value={factorInfo?.offPrice}
type="error"
/>
<PriceStatus
name="مالیات بر ارزش افزوده"
value={factorInfo?.sumPrice * 0.009}
type="error"
/>
</div>
<div className="flex flex-row justify-between items-center w-full py-3">
<strong className="font-medium text-sm dark:text-white">
جمع کل سبد خرید
</strong>
<p className="font-medium text-greenBA text-xs dark:text-white">
{factorInfo?.payPrice + " " + "تومان"}
</p>
</div>
<div
className="w-full rounded-md flex flex-row justify-center items-center py-2.5 px-3 my-5"
style={{ backgroundColor: "#196EC01a" }}
>
<img src={alertIcon} className="w-5 ml-2" />
<p className="text-xs text-blueC0 dark:text-white">
هزینه ارسال کالا پس از تعیین محل آدرس مشخص میشود
</p>
</div>
<Button
title="ادامه فرایند خرید"
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "1px" }}
width="100%"
color="text-white"
// onClick={() => }
/>
</div>
) : (
<div
className={`w-full flex flex-row relative gap-10 px-5 mt-10 ${
desktopContentTransform ? "top-24" : ""
}`}
>
<div className="flex flex-col w-3/4">
<Table />
</div>
<div
className="flex flex-col w-1/4 p-10 bg-grayF9 border border-solid border-grayDB rounded-md px-4 py-4"
style={{ height: "fit-content" }}
>
<div className="flex flex-col w-full border-t py-2 border-gray-300 border-b">
<PriceStatus
name="مبلغ سبد خرید"
value={factorInfo?.sumPrice}
type="normal"
/>
<PriceStatus
name="میزان تخفیف"
value={factorInfo?.offPrice}
type="error"
/>
<PriceStatus
name="مالیات بر ارزش افزوده"
value={factorInfo?.sumPrice * 0.009}
type="error"
/> />
</div> </div>
) : ( <div className="flex flex-row justify-between items-center w-full py-4 border-t border-b border-grayDB border-solid">
<div className="w-full flex flex-row"> <strong className="font-medium text-base text-blue5F dark:text-white">
<div className="flex flex-col"> جمع کل سبد خرید
<Table /> </strong>
</div> <p className="font-medium text-greenBA text-xl dark:text-white">
{factorInfo?.payPrice}
<span className="font-medium text-greenBA text-sm mr-2">تومان</span>
</p>
</div>
<div
className="w-full rounded-md flex flex-row justify-center items-center py-2.5 px-3 mt-10 mb-4"
style={{ backgroundColor: "#196EC01a" }}
>
<img src={alertIcon} className="w-5 ml-2" />
<p className="text-xs text-blueC0 dark:text-white text-justify">
هزینه ارسال کالا پس از تعیین محل آدرس مشخص میشود
</p>
</div> </div>
)} <Button
</> title="ادامه فرایند خرید"
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "1px" }}
width="100%"
color="text-white"
// onClick={() => }
/>
</div>
</div>
); );
} }
@ -124,6 +211,7 @@ const mapStateToProps = (state) => ({
factorInfo: state.userFactor.info, factorInfo: state.userFactor.info,
userId: state.user.status.id, userId: state.user.status.id,
hasPhysical: state.userProduct.hasPhysical, hasPhysical: state.userProduct.hasPhysical,
desktopContentTransform: state.publicApi.desktopContentTransform,
}); });
const mapDispatchToProps = { const mapDispatchToProps = {

@ -20,6 +20,7 @@ module.exports = {
yellow3: "#EFFF00", yellow3: "#EFFF00",
gray36: "#363636", gray36: "#363636",
orange1: "#FF6600", orange1: "#FF6600",
greenBA: "#06BACE",
green1: "#00FF80", green1: "#00FF80",
gray20: "#202020", gray20: "#202020",
gray2077: "#20202077", gray2077: "#20202077",
@ -75,18 +76,18 @@ module.exports = {
greenBA: "#06BACE", greenBA: "#06BACE",
}), }),
fontSize: { fontSize: {
'xs': 'clamp(calc(100vw / 38), 8, 13)', 'xs': 'clamp(9px, 2.78vw, 11px)',
'sm': '.875rem', 'sm': 'clamp(11px, 3.02vw , 13px)',
'tiny': '.875rem', 'tiny': 'clamp(13px,3.28vw, 15px)',
'base': '1rem', 'base': 'clamp(15px, 3.52vw, 17px)',
'lg': '1.125rem', 'lg': 'clamp(17px, 3.76vw, 19px)',
'xl': '1.25rem', 'xl': 'clamp(19px, 4vw, 21px)',
'2xl': '1.5rem', '2xl': 'clamp(21px, 4.24vw, 23px)',
'3xl': '1.875rem', '3xl': 'clamp(23px, 4.48vw, 25px)',
'4xl': '2.25rem', '4xl': 'clamp(25px, 4.72vw, 27px)',
'5xl': '3rem', '5xl': 'clamp(27px, 4.96vw, 29px)',
'6xl': '4rem', '6xl': 'clamp(29px, 5.22vw, 31px)',
'7xl': '5rem', '7xl': 'clamp(31px, 4.46vw, 33px)',
'sm-1': '0.5rem' 'sm-1': '0.5rem'
}, },
extend: { extend: {

Loading…
Cancel
Save