reza added desktop cart

src/components/BG/index.js

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

src/components/Navbar/index.js

@@ -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 (
+  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
-                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
-                  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
-                  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>
-        <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
-            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>
-        </header>
+        </div>
-      )}
+      </div>
-    </>
+    </header>
   );
 }
 

src/redux/actions/public.js

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

src/redux/reducers/public.js

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

src/router.js

@@ -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 />
+          {isMobile && (
-          <BottomNavigation />
+            <>
+              <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: "سبد خرید",
+                    title: isMobile && "سبد خرید",
-                    back: true,
+                    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);

src/views/Products/index.js

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

src/views/ShoppingCart/Product/index.js

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

src/views/ShoppingCart/index.js

@@ -40,79 +40,99 @@ function ShoppingCart({
   payFactor,
   headerOptions,
   setHeaderOptions,
+  desktopContentTransform,
 }) {
   useEffect(() => {
-    getList();
+    // getList();
-    getFactorInfo({ userId });
+    // getFactorInfo({ userId });
     setHeaderOptions(headerOptions);
   }, []);
 
   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>
-          {list.map((product, index) => (
+          <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 />
+        </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}
+  return isMobile ? (
-              type="normal"
+    <div className="w-full flex flex-col px-4">
-              isDark={isDark}
+      {list.map((product, index) => (
-            />
+        <Product key={index} product={product} />
-            <PriceStatus
+      ))}
-              name="میزان تخفیف"
+      <Code />
-              value={factorInfo?.offPrice}
+      <div className="flex flex-col w-full border-t py-2 border-gray-300 border-b mt-6">
-              type="error"
+        <PriceStatus
-              isDark={isDark}
+          name="مبلغ سبد خرید"
-            />
+          value={factorInfo?.sumPrice}
-            <PriceStatus
+          type="normal"
-              name="مالیات بر ارزش افزوده"
+          isDark={isDark}
-              value={factorInfo?.sumPrice * 0.009}
+        />
-              type="error"
+        <PriceStatus
-              isDark={isDark}
+          name="میزان تخفیف"
-            />
+          value={factorInfo?.offPrice}
-          </div>
+          type="error"
-          <div className="flex flex-row justify-between items-center w-full py-3">
+          isDark={isDark}
-            <strong className="font-medium text-sm dark:text-white">
+        />
-              جمع کل سبد خرید
+        <PriceStatus
-            </strong>
+          name="مالیات بر ارزش افزوده"
-            <p className="font-medium text-greenBA text-xs dark:text-white">
+          value={factorInfo?.sumPrice * 0.009}
-              {factorInfo?.payPrice + " " + "تومان"}
+          type="error"
-            </p>
+          isDark={isDark}
-          </div>
+        />
-          <div
+      </div>
-            className="w-full rounded-md flex flex-row justify-center items-center py-2.5 px-3 my-5"
+      <div className="flex flex-row justify-between items-center w-full py-3">
-            style={{ backgroundColor: "#196EC01a" }}
+        <strong className="font-medium text-sm dark:text-white">
-          >
+          جمع کل سبد خرید
-            <img src={alertIcon} className="w-5 ml-2" />
+        </strong>
-            <p className="text-xs text-blueC0 dark:text-white">
+        <p className="font-medium text-greenBA text-xs dark:text-white">
-              هزینه ارسال کالا پس از تعیین محل آدرس مشخص می‌شود
+          {factorInfo?.payPrice + " " + "تومان"}
-            </p>
+        </p>
-          </div>
+      </div>
-          <Button
+      <div
-            title="ادامه فرایند خرید"
+        className="w-full rounded-md flex flex-row justify-center items-center py-2.5 px-3 my-5"
-            backgroundColor="bg-blueC0"
+        style={{ backgroundColor: "#196EC01a" }}
-            border={{ color: "#196EC055", width: "1px" }}
+      >
-            width="100%"
+        <img src={alertIcon} className="w-5 ml-2" />
-            color="text-white"
+        <p className="text-xs text-blueC0 dark:text-white">
-            // onClick={() => }
+          هزینه ارسال کالا پس از تعیین محل آدرس مشخص می‌شود
-          />
+        </p>
-        </div>
+      </div>
-      ) : (
+      <Button
-        <div className="w-full flex flex-row">
+        title="ادامه فرایند خرید"
-          <div className="flex flex-col">
+        backgroundColor="bg-blueC0"
-            <Table />
+        border={{ color: "#196EC055", width: "1px" }}
-          </div>
+        width="100%"
-
+        color="text-white"
-        </div>
+        // 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 = {