reza added desktop cart

3 years ago · 0ddd33e62c
parent 888d26a69e
commit 0ddd33e62c
8 changed files with 382 additions and 296 deletions
--- a/src/components/BG/index.js
+++ b/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 = {};
--- a/src/components/Navbar/index.js
+++ b/src/components/Navbar/index.js
@ -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>
-      )}
-    </>
  );
 }

--- a/src/redux/actions/public.js
+++ b/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) =>
--- a/src/redux/reducers/public.js
+++ b/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":
--- a/src/router.js
+++ b/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} />}
+          {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);
--- a/src/views/Products/index.js
+++ b/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 = {
--- a/src/views/ShoppingCart/Product/index.js
+++ b/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 }) {
-  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 +39,7 @@ function Product({ product, grades, pushToCart }) {
                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 = {
--- a/src/views/ShoppingCart/index.js
+++ b/src/views/ShoppingCart/index.js
@ -40,19 +40,37 @@ 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">
+        <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} />
+          ))}
+        </ul>
+      </div>
+    );
+  };
+  return isMobile ? (
    <div className="w-full flex flex-col px-4">
      {list.map((product, index) => (
        <Product key={index} product={product} />
@ -105,14 +123,16 @@ function ShoppingCart({
      />
    </div>
  ) : (
-        <div className="w-full flex flex-row">
-          <div className="flex flex-col">
+    <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 = {