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. 24
      src/components/Navbar/index.js
  5. 2
      src/redux/actions/public.js
  6. 6
      src/redux/reducers/public.js
  7. 38
      src/router.js
  8. 13
      src/views/Products/index.js
  9. 4
      src/views/Products/layouts/Main.js
  10. 71
      src/views/ShoppingCart/Product/index.js
  11. 144
      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) => ({
isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile
});
const mapDispatchToProps = {};

@ -13,7 +13,7 @@ export default function Button({
}) {
return (
<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 ? "text-blueC0" : color) : color} ${
selectable ? (active ? "bg-opacity-10" : bgOpacity) : bgOpacity

@ -69,7 +69,6 @@ function Navbar({
if (!isMobile) {
window.addEventListener("scroll", () => {
if (window.scrollY >= 64) {
setDesktopMiddleFix(() => true);
} else {
@ -85,9 +84,7 @@ function Navbar({
});
}
}, []);
return (
<>
{isMobile ? (
return isMobile ? (
<div
className={_.join(
[
@ -147,9 +144,7 @@ function Navbar({
className={_.join(
[
"rounded-sm p-1.5",
isDark
? "bg-gray36 ml-2"
: "bg-blueFF1 ml-3 shadow-sm",
isDark ? "bg-gray36 ml-2" : "bg-blueFF1 ml-3 shadow-sm",
],
" "
)}
@ -187,9 +182,7 @@ function Navbar({
{bookmark && (
<img
src={
isDark
? bookmarkDeactiveDarkIcon
: bookmarkDeactiveLightIcon
isDark ? bookmarkDeactiveDarkIcon : bookmarkDeactiveLightIcon
}
alt="bookmark"
className="w-7 ml-2"
@ -222,9 +215,7 @@ function Navbar({
<span className="text-sm font-normal text-blue52 mr-6">
انتخاب کشور
</span>
<span className="text-sm font-normal text-blue52">
پیگیری سفارش
</span>
<span className="text-sm font-normal text-blue52">پیگیری سفارش</span>
</div>
<div className="divide-x">
<span className="text-sm font-normal ml-6 text-blue52">
@ -271,7 +262,6 @@ function Navbar({
}`}
style={{
transition: "all 0.3s",
transitionDelay : '0.1s',
}}
>
<div className="ml-10 flex flex-row items-center">
@ -281,9 +271,7 @@ function Navbar({
className="w-5 transform translate-y-1 ml-2"
/>
{/* <img src={whiteHamburgerMenu} alt="" className="w-3 h-3" /> */}
<span
className={`text-sm text-blue52 ${productCategoryTextColor}`}
>
<span className={`text-sm text-blue52 ${productCategoryTextColor}`}>
دسته بندی کالاها&nbsp;&nbsp;
</span>
</div>
@ -304,8 +292,6 @@ function Navbar({
</div>
</div>
</header>
)}
</>
);
}

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

@ -59,7 +59,8 @@ const initialState = {
menu : false,
back : false,
title : false,
}
},
desktopContentTransform : false,
};
const grades = [
@ -77,9 +78,12 @@ const grades = [
"یازدهم",
"دوازدهم",
];
export default function publicApi(state = initialState, action) {
let { type, data } = action;
switch (type) {
case "public/setDesktopContentTransform":
return {...state, desktopContentTransform : data };
case "public/setHeaderOptions":
return {...state, headerOptions : data};
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 { connect } from "react-redux";
import { publicApi } from "./redux/actions";
import Navbar from "./components/Navbar";
import BG from "./components/BG";
import BottomNavigation from "./components/BottomNavigation";
@ -24,7 +25,20 @@ import Faq from "./views/Faq";
import Contact from "./views/Contact";
// 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 (
<div className={_.join([isDark ? "dark" : ""], " ")}>
<div
@ -39,8 +53,12 @@ function Router({ isDark,isMobile, isLogin, headerOptions }) {
>
<BrowserRouter>
{headerOptions?.shown && <Navbar headerOptions={headerOptions} />}
{isMobile && (
<>
<BG />
<BottomNavigation />
</>
)}
<Routes>
<Route
path="/"
@ -82,7 +100,9 @@ function Router({ isDark,isMobile, isLogin, headerOptions }) {
<Route
path="/products"
exact
element={<Products headerOptions={{ shown: isMobile ? false : true }} />}
element={
<Products headerOptions={{ shown: isMobile ? false : true }} />
}
/>
<Route
path="/products/:id"
@ -108,8 +128,8 @@ function Router({ isDark,isMobile, isLogin, headerOptions }) {
<ShoppingCart
headerOptions={{
shown: true,
title: "سبد خرید",
back: true,
title: isMobile && "سبد خرید",
back: isMobile && true,
}}
/>
}
@ -303,9 +323,13 @@ function Router({ isDark,isMobile, isLogin, headerOptions }) {
const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark,
isMobile : state.publicApi.isMobile,
isMobile: state.publicApi.isMobile,
isLogin: state.user.status,
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,
setHeaderOptions,
headerOptions,
desktopContentTransform,
}) => {
const [filter, setFilter] = useState({
search: "",
grade: "",
productsType: "کتاب",
});
const [desktopContentTransform, setDesktopContentTransform] = useState(false);
const onChange = (name, value) => {
setFilter({ ...filter, [name]: value });
@ -36,15 +37,6 @@ export const Products = ({
useEffect(() => {
getList();
setHeaderOptions(headerOptions);
if (!isMobile) {
window.addEventListener("scroll", () => {
if (window.scrollY >= 64) {
setDesktopContentTransform(() => true);
} else {
setDesktopContentTransform(() => false);
}
});
}
}, []);
useEffect(() => {
@ -182,6 +174,7 @@ const mapStateToProps = (state) => ({
grades: state.publicApi.grades,
gradeFilterBooks: state.book.gradeFilterBooks,
selectedGrade: state.book.selectedGrade,
desktopContentTransform: state.publicApi.desktopContentTransform,
});
const mapDispatchToProps = {

@ -55,13 +55,13 @@ export const Main = ({ isMobile,
<ul className='flex justify-between w-3/4 px-4 py-0 '>
{
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>
</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
? gradeFilterBooks?.map((product, index) => (
<Product

@ -5,9 +5,10 @@ import { userProduct } from "../../../redux/actions";
// assets
import bookImage from "../../../assets/images/zist-11.svg";
import exitIcon from "../../../assets/icons/exit.svg";
import deleteIcon from "../../../assets/icons/delete.svg";
function Product({ product, grades, pushToCart }) {
return (
function Product({ product, grades, pushToCart, isMobile }) {
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">
<img
@ -39,7 +40,7 @@ function Product({ product, grades, pushToCart }) {
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 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) => ({
grades: state.publicApi.grades,
isMobile: state.publicApi.isMobile,
});
const mapDispatchToProps = {

@ -10,22 +10,6 @@ import alertIcon from "../../assets/icons/alert.svg";
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({
isDark,
isMobile,
@ -40,6 +24,7 @@ function ShoppingCart({
payFactor,
headerOptions,
setHeaderOptions,
desktopContentTransform,
}) {
useEffect(() => {
getList();
@ -48,11 +33,67 @@ function ShoppingCart({
}, []);
const Table = () => {
}
return (
<>
{isMobile ? (
<div className="w-full flex flex-col">
<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">
کالاهای انتخابی{" "}
</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) => (
<Product key={index} product={product} />
))}
</ul>
</div>
);
};
const PriceStatus = ({ name, value, type }) => {
return isMobile ? (
<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>
) : (
<div className="w-full flex flex-row justify-between py-4">
<strong className="font-light text-base dark:text-white text-blue5F">
{name}
</strong>
<span
className="font-medium text-xl dark:text-white"
style={{
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
}}
>
{value}
<span
style={{
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
}}
className="text-sm mr-2"
>
تومان
</span>
</span>
</div>
);
};
return isMobile ? (
<div className="w-full flex flex-col px-4">
{list.map((product, index) => (
<Product key={index} product={product} />
@ -63,19 +104,16 @@ function ShoppingCart({
name="مبلغ سبد خرید"
value={factorInfo?.sumPrice}
type="normal"
isDark={isDark}
/>
<PriceStatus
name="میزان تخفیف"
value={factorInfo?.offPrice}
type="error"
isDark={isDark}
/>
<PriceStatus
name="مالیات بر ارزش افزوده"
value={factorInfo?.sumPrice * 0.009}
type="error"
isDark={isDark}
/>
</div>
<div className="flex flex-row justify-between items-center w-full py-3">
@ -105,14 +143,63 @@ function ShoppingCart({
/>
</div>
) : (
<div className="w-full flex flex-row">
<div className="flex flex-col">
<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 className="flex flex-row justify-between items-center w-full py-4 border-t border-b border-grayDB border-solid">
<strong className="font-medium text-base text-blue5F dark:text-white">
جمع کل سبد خرید
</strong>
<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>
<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,
userId: state.user.status.id,
hasPhysical: state.userProduct.hasPhysical,
desktopContentTransform: state.publicApi.desktopContentTransform,
});
const mapDispatchToProps = {

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

Loading…
Cancel
Save