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

reza added desktop cart

Browse Source
temp
Reza_ashrafi 3 years ago
parent 888d26a69e
commit 0ddd33e62c
8 changed files with 382 additions and 296 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/components/BG/index.js
  2. 400
      src/components/Navbar/index.js
  3. 2
      src/redux/actions/public.js
  4. 6
      src/redux/reducers/public.js
  5. 42
      src/router.js
  6. 13
      src/views/Products/index.js
  7. 63
      src/views/ShoppingCart/Product/index.js
  8. 151
      src/views/ShoppingCart/index.js

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

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

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

@ -69,13 +69,12 @@ function Navbar({
if (!isMobile) {
window.addEventListener("scroll", () => {
if (window.scrollY >= 64) {
setDesktopMiddleFix(() => true);
} else {
setDesktopMiddleFix(() => false);
}
if (window.scrollY > lastScroll && window.scrollY >= 90) {
setDesktopEndTransform(() => true);
} else {
@ -85,227 +84,214 @@ function Navbar({
});
}
}, []);
return (
<>
{isMobile ? (
<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",
],
" "
return isMobile ? (
<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",
],
" "
)}
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={{
backgroundColor: !top ? (isDark ? "#061B30" : "white") : "",
}}
>
{/* landscape start */}
{!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
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 */}
{/* 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"
/>
</>
)}
{!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 && (
<div className="flex flex-row items-center">
{qr && (
<>
<Link
to="/"
className="absolute left-1/2 transform -translate-y-1/2 top-1/2 -translate-x-1/2"
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={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
src={isDark ? dotsMenuDarkIcon : dotsMenuLightIcon}
alt="menu"
className="w-7"
src={isDark ? qrIcon : qrBlueIcon}
alt=""
className={_.join(["w-6"], " ")}
/>
)}
{title && back ? (
</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 ? arrowWhiteIcon : arrowBlueIcon}
alt="back"
className={`w-6 ${isDark ? "" : "transform -rotate-180"}`}
onClick={() => navigation(-1)}
src={isDark ? arIcon : arBlueIcon}
alt=""
className={_.join(["w-6"], " ")}
/>
) : null}
</div>
</div>
<Drawer drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
{/* portrait end */}
</Link>
</>
)}
{bookmark && (
<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>
) : (
<header className={`rounded-b-md w-full bg-transparent pb-4`}>
<div className="flex flex-row justify-between items-center border-b border-gray-200 border-solid h-16 px-6">
<div className="divide-x flex flex-row-reverse transform translate-x-2">
<span className="text-sm font-normal text-blue52 mr-6">
انتخاب کشور
</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">
شکایات&nbsp;
</span>
<span className="text-sm font-normal text-blue52">
ورود و ثبت نام
</span>
</div>
</div>
<Drawer drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
{/* portrait end */}
</div>
) : (
<header className={`rounded-b-md w-full bg-transparent pb-4`}>
<div className="flex flex-row justify-between items-center border-b border-gray-200 border-solid h-16 px-6">
<div className="divide-x flex flex-row-reverse transform translate-x-2">
<span className="text-sm font-normal text-blue52 mr-6">
انتخاب کشور
</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">
شکایات&nbsp;
</span>
<span className="text-sm font-normal text-blue52">
ورود و ثبت نام
</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
className={`w-full flex flex-col z-20 ${
desktopMiddleFix ? "fixed top-0 left-0" : ""
}`}
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)" }}
>
<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
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>
<Search />
</div>
<div className="flex justify-end items-center">
<img src={cartIcon} 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={profileIcon} alt="" className="w-5 h-5" />
</div>
</div>
<div className="flex justify-end items-center">
<img src={cartIcon} 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={profileIcon} alt="" className="w-5 h-5" />
</div>
</div>
<div
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" : ""
}`}
style={{
transition: "all 0.3s",
transitionDelay : '0.1s',
}}
>
<div className="ml-10 flex flex-row items-center">
<img
src={darkCrimsonHamburgerMenu}
alt=""
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}`}
>
دسته بندی کالاها&nbsp;&nbsp;
</span>
</div>
<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"
style={{ maxWidth: "calc(100vw / 2)" }}
<div
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" : ""
}`}
style={{
transition: "all 0.3s",
}}
>
<div className="ml-10 flex flex-row items-center">
<img
src={darkCrimsonHamburgerMenu}
alt=""
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}`}>
دسته بندی کالاها&nbsp;&nbsp;
</span>
</div>
<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"
style={{ maxWidth: "calc(100vw / 2)" }}
>
{menuItems.map((item, index) => (
<a
href="#"
className={`text-sm text-blue52 ${menuItemsColor}`}
key={index}
>
{menuItems.map((item, index) => (
<a
href="#"
className={`text-sm text-blue52 ${menuItemsColor}`}
key={index}
>
{item}
</a>
))}
</div>
</div>
{item}
</a>
))}
</div>
</header>
)}
</>
</div>
</div>
</header>
);
}

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

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

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

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

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 { 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} />}
<BG />
<BottomNavigation />
{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);

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

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

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

@ -6,8 +6,8 @@ import { userProduct } from "../../../redux/actions";
import bookImage from "../../../assets/images/zist-11.svg";
import exitIcon from "../../../assets/icons/exit.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
@ -36,10 +36,10 @@ function Product({ product, grades, pushToCart }) {
{
productId: product?.productId,
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 +81,66 @@ 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">
<strong className="text-sm text-blue5F mb-1 dark:text-white">
{product?.product?.book?.name}
</strong>
<span className="text-gray70 text-xs mb-1 dark:text-greenBA">
{"پایه" + " " + grades[product?.product?.book?.gradeId]}
</span>
<span className="text-gray70 text-xs mb-1 dark:text-greenBA">
{product?.productType === 2 ? "نسخه فیزیکی" : "نسخه دیجیتال"}
</span>
</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"
onClick={() =>
pushToCart({
productId: product?.productId,
userId: product?.userId,
count: 1,
})
}
>
+
</button>
<span className="mx-2.5 font-semibold text-md 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"
onClick={() =>
pushToCart({
productId: product?.productId,
userId: product?.userId,
count: -1,
})
}
>
-
</button>
</div>
<div className="w-1/4 flex flex-row items-center">
<strong className="font-bold text-md text-blue5F dark:text-white">
{product?.product?.price}&nbsp;تومان
</strong>
</div>
</div>
);
}
const mapStateToProps = (state) => ({
grades: state.publicApi.grades,
isMobile: state.publicApi.isMobile,
});
const mapDispatchToProps = {

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

@ -40,79 +40,99 @@ function ShoppingCart({
payFactor,
headerOptions,
setHeaderOptions,
desktopContentTransform,
}) {
useEffect(() => {
getList();
getFactorInfo({ userId });
// getList();
// getFactorInfo({ userId });
setHeaderOptions(headerOptions);
}, []);
const Table = () => {
}
return (
<>
{isMobile ? (
<div className="w-full flex flex-col px-4">
{list.map((product, index) => (
return (
<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">
{[0,1].map((product, index) => (
<Product key={index} product={product} />
))}
<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"
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">
<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">
<div className="flex flex-col">
<Table />
</div>
</div>
)}
</>
</ul>
</div>
);
};
return isMobile ? (
<div className="w-full flex flex-col px-4">
{list.map((product, index) => (
<Product key={index} product={product} />
))}
<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"
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">
<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 px-5 ${
desktopContentTransform ? "top-24" : ""
}`}
>
<div className="flex flex-col w-3/4 mt-10">
<Table />
</div>
<div className="flex flex-col w-1/4"></div>
</div>
);
}
@ -124,6 +144,7 @@ const mapStateToProps = (state) => ({
factorInfo: state.userFactor.info,
userId: state.user.status.id,
hasPhysical: state.userProduct.hasPhysical,
desktopContentTransform: state.publicApi.desktopContentTransform,
});
const mapDispatchToProps = {

Write Preview
Loading…
Cancel
Save