Reza fixed product and cart desktop and mobile version

src/Redux/actions/public.js

@@ -12,6 +12,8 @@ const publicApi = {
     (data = {}, history) =>
     async (dispatch) =>
       await proxy.get("public/contact", data, { history, dispatch }),
+  getArList: (data, history) => async (dispatch) =>
+    await proxy.get("public/ar", data, { history, dispatch }),
 };
 
 export default publicApi;

src/Redux/reducers/public.js

@@ -5,6 +5,7 @@ const initialState = {
   error: null,
   searchResult: [],
   contactData: null,
+  arList: [],
 };
 export default function publicApi(state = initialState, action) {
   let { type, data } = action;
@@ -38,6 +39,8 @@ export default function publicApi(state = initialState, action) {
       };
     case "public/contact":
       return { ...state, loading: false, error: null, contactData: data };
+    case "public/ar":
+      return { ...state, loading: false, error: null, arList: data };
     case "loading":
       return { ...state, loading: true };
     case "error":

src/views/AR/Item/index.js

@@ -26,7 +26,10 @@ export default class Item extends Component {
         {window.innerWidth < 1000 ? (
           <article className="mobile-ar-book d-flex flex-column">
             <a href={`https://ar.dnvn.ir/lunch?id=${data.id}`} target="_blank">
-              <img src={data.imageUrl} alt={data.title} />
+              <img
+                src={`https://dnvn.ir/api/v1/file/${data.fileId}`}
+                alt={data.title}
+              />
               <h1 style={{ fontSize: fontSize.mobile.h1 }}>{data.title}</h1>
             </a>
           </article>

src/views/AR/index.js

@@ -1,15 +1,12 @@
 import React, { Component } from "react";
+import { connect } from "react-redux";
+import { publicApi } from "~/Redux/actions";
+
 import Navbar from "../Home/Navbar/index";
 import Footer from "../Home/Footer/index";
+import Loader from "~/components/Loader/index";
 import Item from "./Item/index";
 
-import zist_10 from "~/assets/images/zist-10.png";
-import chemistry_10 from "~/assets/images/chemistry-10.png";
-import sciense_8 from "~/assets/images/sciense-8.png";
-import sciense_7 from "~/assets/images/sciense-7.png";
-import sciense_6 from "~/assets/images/sciense-6.png";
-import sciense_9 from "~/assets/images/sciense-9.png";
-
 import "./index.scss";
 
 const maxDesktopSize = 1250;
@@ -21,66 +18,62 @@ const fontSize = {
   },
 };
 
-export default class AR extends Component {
+class AR extends Component {
+  componentDidMount() {
+    this.props.getArList();
+  }
+
   render() {
-    const { data } = this.props;
+    const { data, arList } = this.props;
     return (
       <>
         {window.innerWidth > 1000 ? (
-          <>
-            <div className="ar d-flex flex-column align-items-center">
-              <Navbar />
-              <div className="ar__box d-flex flex-column"></div>
+          arList ? (
+            <>
+              <div className="ar d-flex flex-column align-items-center">
+                <Navbar />
+                <div className="ar__box d-flex flex-column"></div>
+              </div>
+              <Footer />
+            </>
+          ) : (
+            <div
+              className="d-flex justify-content-center align-items-center"
+              style={{ height: "100vh", width: "100vw" }}
+            >
+              <Loader />
             </div>
-            <Footer />
-          </>
+          )
         ) : null}
         {window.innerWidth < 1000 ? (
-          <div className="mobile-ar d-flex flex-column">
-            <Navbar />
-            <div className="mobile-ar__list d-flex flex-wrap">
-              {data.map((item, i) => (
-                <Item data={item} key={i} />
-              ))}
+          arList ? (
+            <div className="mobile-ar d-flex flex-column">
+              <Navbar />
+              <div className="mobile-ar__list d-flex flex-wrap">
+                {arList.map((item, i) => (
+                  <Item data={item} key={i} />
+                ))}
+              </div>
+            </div>
+          ) : (
+            <div
+              className="d-flex justify-content-center align-items-center"
+              style={{ height: "100vh", width: "100vw" }}
+            >
+              <Loader />
             </div>
-          </div>
+          )
         ) : null}
       </>
     );
   }
 }
 
-AR.defaultProps = {
-  data: [
-    {
-      id: 222,
-      title: "دانوین زیست دهم",
-      imageUrl: zist_10,
-    },
-    {
-      id: 223,
-      title: "دانوین شیمی نهم",
-      imageUrl: chemistry_10,
-    },
-    {
-      id: 225,
-      title: "دانوین علوم نهم",
-      imageUrl: sciense_6,
-    },
-    {
-      id: 226,
-      title: "دانوین علوم هشتم",
-      imageUrl: sciense_8,
-    },
-    {
-      id: 227,
-      title: "دانوین علوم هفتم",
-      imageUrl: sciense_7,
-    },
-    {
-      id: 228,
-      title: "دانوین علوم ششم",
-      imageUrl: sciense_6,
-    },
-  ],
-};
+export default connect(
+  (state) => ({
+    arList: state.publicApi.arList,
+  }),
+  {
+    getArList: publicApi.getArList,
+  }
+)(AR);

src/views/Cart/Table/index.scss

@@ -1,142 +1,150 @@
-.mobile-cart-table-product{
+.mobile-cart-table-product {
   width: 100%;
   font-family: numeralLight;
-  img{
+  img {
     height: 100px;
     width: 70px;
     border-radius: 10px;
   }
-  &__info{
+  &__info {
     width: 100%;
     margin-left: 10px;
-    strong, p , span{
+    strong,
+    p,
+    span {
       margin: 0px;
       font-family: numeralLight;
     }
-    p{
-      color: #00CC69;
+    p {
+      color: #00cc69;
     }
-    span{
-      color: #2580EC;
+    span {
+      color: #2580ec;
     }
-    &--delete{
+    &--delete {
       margin-top: 10px;
     }
   }
-  
 }
 
-.mobile-cart-table-price{
+.mobile-cart-table-price {
   text-align: center;
   font-family: numeralLight;
-  &__price{
-    strong, span{
+  &__price {
+    strong,
+    span {
       font-family: numeralLight;
     }
-    strong{
-      color: #4D4D4F;
+    strong {
+      color: #4d4d4f;
     }
-    span{
-      color: #4D4D4F;
+    span {
+      color: #4d4d4f;
       letter-spacing: -1px;
     }
   }
-  &__info{
-    strong, p , span{
+  &__info {
+    strong,
+    p,
+    span {
       margin: 0px;
       font-family: numeralLight;
     }
-    p{
-      color: #00CC69;
+    p {
+      color: #00cc69;
     }
-    span{
-      color: #2580EC;
+    span {
+      color: #2580ec;
     }
   }
-  &__counter{
+  &__counter {
     padding: 5px 5px;
     border: 1px solid rgb(177, 177, 177);
     border-radius: 8px;
     margin-top: 10px;
-    button{
+    button {
       border: 0px;
       background-color: white;
-      color: #4D4D4F;
+      color: #4d4d4f;
+      &:focus {
+        outline: none;
+      }
     }
-    span{
+    span {
       margin: 0px 15px;
-      color: #4D4D4F;
-
+      color: #4d4d4f;
     }
   }
 }
 
-.MuiTableCell-root{
+.MuiTableCell-root {
   padding: 10px 0px !important;
+  font-family: numeralLight !important;
 }
 
-.cart-item{
+.cart-item {
   // justify-content: space-between;
   border-top: 1px solid #eee;
   padding: 15px 0px;
-  &__info{
+  &__info {
     // flex-shrink: 1;
-    img{
+    img {
       height: 100px;
       border-radius: 10px;
       margin-left: 10px;
     }
-    div{
-      strong{
+    div {
+      strong {
         font-family: numeralBold;
         color: #373737;
       }
-      p{
+      p {
         font-family: numeralLight;
-        color: #00CC69;
+        color: #00cc69;
         margin: 0px;
         letter-spacing: -1px;
       }
-      span{
+      span {
         font-family: numeralLight;
-        color: #2580EC;
+        color: #2580ec;
         letter-spacing: -1px;
       }
     }
   }
-  &__price{
-    color: #4D4D4F;
-    strong{
+  &__price {
+    color: #4d4d4f;
+    strong {
       font-family: numeralBold;
     }
-    span{
+    span {
       font-family: numeralLight;
     }
   }
-  &__counter{
-    justify-content:  center;
-    &--box{
+  &__counter {
+    justify-content: center;
+    &--box {
       padding: 5px 10px;
       border: 1px solid rgb(177, 177, 177);
       border-radius: 8px;
-      button{
+      button {
         border: 0px;
         background-color: white;
-        color: #4D4D4F;
+        color: #4d4d4f;
+        &:focus {
+          outline: none;
+        }
       }
-      span{
+      span {
         margin: 0px 15px;
-        color: #4D4D4F;
-
+        color: #4d4d4f;
       }
     }
-    
   }
-  &__delete{
+  &__delete {
     margin-left: 20px;
-    span{
+    span {
       font-family: numeralLight;
-      color : #FC120A;
+      color: #fc120a;
     }
   }
-}
+}

src/views/Cart/index.js

@@ -201,9 +201,10 @@ class Cart extends Component {
               <h1 style={{ fontSize: fontSize.mobile.h1 }}>سبد خرید</h1>
               <div className="d-flex">
                 <Table
-                  list={this.state.list}
+                  list={list}
                   handleCounter={this.handleCounter}
                   handleDelete={this.handleDelete}
+                  payPrice={payPrice}
                 />
               </div>
               <div className="mobile-cart__payMethods d-flex flex-column">
@@ -228,7 +229,7 @@ class Cart extends Component {
                 </h3>
                 <div className="d-flex align-items-center">
                   <strong style={{ fontSize: fontSize.mobile.h1 }}>
-                    {this.totalPrice()}
+                    {payPrice}
                   </strong>
                   <span style={{ fontSize: fontSize.mobile.h3 }}>تومان</span>
                 </div>

src/views/Product/index.js

@@ -4,6 +4,7 @@ import { ToastContainer } from "react-toastify";
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 import { book } from "~/Redux/actions";
+import { userProduct } from "~/Redux/actions";
 
 import Footer from "../Home/Footer/index";
 import Navbar from "../Home/Navbar/index";
@@ -51,8 +52,7 @@ class Product extends Component {
   }
 
   render() {
-    const { product, sameProducts, supportItems, info, page, loading, list } =
-      this.props;
+    const { product, supportItems, info, page } = this.props;
     return (
       <>
         {window.innerWidth > 1000 ? (
@@ -125,38 +125,56 @@ class Product extends Component {
                   />
                   <h1 style={{ fontSize: fontSize.mobile.h1 }}>{info.name}</h1>
                   <h2 style={{ fontSize: fontSize.mobile.h2 }}>
-                    {product.subTitle}
+                    {info.category}
                   </h2>
                   <div className="d-flex flex-column mt-3">
                     <div className="d-flex">
                       <Link
-                        to={`/cart`}
+                        to={`/products/${
+                          page === "digital"
+                            ? `physical/${window.location.pathname.slice(
+                                window.location.pathname.lastIndexOf("/") + 1,
+                                window.location.pathname.length
+                              )}`
+                            : `digital/${window.location.pathname.slice(
+                                window.location.pathname.lastIndexOf("/") + 1,
+                                window.location.pathname.length
+                              )}`
+                        }`}
                         className="mobile-product__header--digitalButton"
                         style={{ fontSize: fontSize.mobile.a }}
                       >
-                        خرید نسخه دیجیتال
+                        {page === "digital" ? "کتاب فیزیکی" : "نسخه دیجیتال"}
                       </Link>
                       <Link
-                        to={`/cart`}
                         className="mobile-product__header--purchase"
                         style={{ fontSize: fontSize.mobile.a }}
                       >
-                        خرید نسخه چاپی
+                        مطالعه نمونه کتاب
                       </Link>
                     </div>
-                    <Link
-                      to={`/products/${product.id}/sample`}
+                    <button
+                      onClick={() =>
+                        this.props.pushToCart({
+                          productId:
+                            page === "digital"
+                              ? info.product[0].id
+                              : info.product[1].id,
+                          userId: this.props.id,
+                          count: 1,
+                        })
+                      }
                       className="mobile-product__header--sampleButton"
                       style={{ fontSize: fontSize.mobile.a }}
                     >
-                      مطالعه نمونه کتاب
-                    </Link>
+                      افزودن به سبد خرید
+                    </button>
                   </div>
                 </header>
                 <div className="mobile-product__abstraction d-flex flex-column">
                   <h3 style={{ fontSize: fontSize.mobile.h3 }}>خلاصه کتاب</h3>
                   <p style={{ fontSize: fontSize.mobile.p }}>
-                    {product.abstraction}
+                    {info.description || "توضیحات محصول خالیست"}
                   </p>
                 </div>
                 <div className="mobile-product__modules d-flex flex-column">
@@ -164,11 +182,11 @@ class Product extends Component {
                     این کتاب شامل چه مواردی است؟
                   </h3>
                   <ul>
-                    {product.modules.map((item, i) => (
+                    {/* {product.modules.map((item, i) => (
                       <React.Fragment key={i}>
                         <Item item={item} />
                       </React.Fragment>
-                    ))}
+                    ))} */}
                   </ul>
                 </div>
                 <div className="mobile-product__tips d-flex flex-column">
@@ -176,16 +194,16 @@ class Product extends Component {
                     نکاتی که هنگام خرید باید به آن توجه داشته باشید؟
                   </h3>
                   <ul>
-                    {product.tips.map((item, i) => (
+                    {/* {product.tips.map((item, i) => (
                       <React.Fragment key={i}>
                         <Item item={item} />
                       </React.Fragment>
-                    ))}
+                    ))} */}
                   </ul>
                 </div>
                 <div className="mobile-product__description d-flex">
                   <p style={{ fontSize: fontSize.mobile.p }}>
-                    {product.description}
+                    {info.description}
                   </p>
                 </div>
                 <div className="mobile-product__comments d-flex flex-column">
@@ -193,9 +211,11 @@ class Product extends Component {
                     نظرات خریداران
                   </h3>
                   <div className="mobile-product__comments--list d-flex">
-                    {product.comments.map((item, i) => (
-                      <Comment comment={item} key={i} />
-                    ))}
+                    {info.comment.length > 0
+                      ? info.comment.map((item, i) => (
+                          <Comment comment={item} key={i} />
+                        ))
+                      : null}
                   </div>
                 </div>
               </div>
@@ -231,8 +251,9 @@ export default connect(
     // status: state.user.status,
     loading: state.book.loading,
     list: state.book.list,
+    id: state.user.status.id,
   }),
-  { getInfo: book.info, getList: book.list }
+  { getInfo: book.info, getList: book.list, pushToCart: userProduct.add }
 )(Product);
 
 Product.defaultProps = {

src/views/Product/index.scss

@@ -37,8 +37,9 @@
     &--purchase {
       border-top-left-radius: 8px;
       border-bottom-left-radius: 8px;
-      background-color: #00cc69;
-      color: white !important;
+      color: #c24141 !important;
+      border: 1px solid #c24141 !important;
+      border-right: 0px solid white;
       flex: 1;
     }
     &--digitalButton {
@@ -50,10 +51,19 @@
     }
     &--sampleButton {
       border-radius: 8px;
-      border: 1px solid #c24141 !important;
-      background-color: white;
-      color: #c24141 !important;
+      background-color: #00cc69;
       margin-top: 8px;
+      border: none;
+      border: 0px;
+      font-family: numeralLight;
+      padding: 10px 0px;
+      text-align: center;
+      letter-spacing: -1px;
+      text-decoration: none;
+      color: white;
+      &:focus {
+        outline: none;
+      }
     }
   }
   &__abstraction {