Danovin
/
application_17
5
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity

Merge branch 'master' of https://git.sitenevis.com/Reza_ashrafi/NewDanovin

Browse Source
temp
Pedram Keshavarzi 3 years ago
parent b073cb6190 ef98869598
commit ca84af9095
12 changed files with 494 additions and 320 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/assets/icons/delete.svg
  2. 1
      src/components/BG/index.js
  3. 2
      src/components/Button/index.js
  4. 398
      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

10
src/assets/icons/delete.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
src/components/BG/index.js
Unescape View File

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

2
src/components/Button/index.js
Unescape View File

@ -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

398
src/components/Navbar/index.js
Unescape View File

@ -69,7 +69,6 @@ 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 {
@ -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>
); );
} }

2
src/redux/actions/public.js
Unescape View File

@ -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) =>

6
src/redux/reducers/public.js
Unescape View File

@ -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":

42
src/router.js
Unescape View File

@ -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);

13
src/views/Products/index.js
Unescape View File

@ -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 = {

4
src/views/Products/layouts/Main.js
Unescape View File

@ -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

73
src/views/ShoppingCart/Product/index.js
Unescape View File

@ -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 = {

236
src/views/ShoppingCart/index.js
Unescape View File

@ -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>
)} <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>
<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 = {

25
tailwind.config.js
Unescape View File

@ -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: {

Write Preview
Loading…
Cancel
Save