fix

src/App.css

@@ -3,7 +3,9 @@
   direction: rtl;
   font-family: numeralLight;
 }
-
+#root {
+  height: 100vh;
+}
 @font-face {
   font-family: numeralMedium;
   src: url(assets/IRANSans/Farsi_numerals/IRANSans\(FaNum\)_Medium.ttf);

src/AppRouter.js

@@ -26,6 +26,7 @@ import Chatroom from "./views/ChatRoom/index";
 import Cart from "./views/Cart/index";
 import MyBooks from "./views/MyBooks/index";
 import AR from "./views/AR/index";
+import Download from "./views/Download/index";
 import Support from "./views/Support/index";
 import Callback from "./views/Callback/index";
 import NewProfile from "./views/NewProfile/index";
@@ -60,7 +61,7 @@ class AppRouter extends Component {
   }
 
   componentDidMount() {
-    //sthis.props.getUserProductList();
+    if (proxy.status()) this.props.getUserProductList();
   }
 
   render() {
@@ -425,6 +426,9 @@ class AppRouter extends Component {
               />
             )}
           </Route>
+          <Route exact path={"/download"}>
+            <Download />
+          </Route>
           <Route exact path={"/chatroom/:id"}>
             {mobile ? (
               proxy.status() ? (

src/views/Activation/index.js

@@ -6,7 +6,9 @@ import Footer from "../Home/Footer/index";
 import { Link } from "react-router-dom";
 
 import analytics from "../../assets/icons/analytics.svg";
-
+import ReplayIcon from "@material-ui/icons/Replay";
+import Scanner from "../QRScan/Scanner/index";
+import qrcode from "~/assets/icons/drawer-qr.png";
 import "./index.scss";
 
 const maxDesktopSize = 1250;
@@ -99,30 +101,50 @@ class Activation extends Component {
         {window.innerWidth < 1000 ? (
           <div className="mobile-activation d-flex flex-column align-items-center">
             <Navbar />
-            <div
+
-              style={{ fontSize: fontSize.mobile.span }}
-              className="mobile-activation__back d-flex"
-            >
-              <Link to="/" style={{ fontSize: fontSize.mobile.span }}>
-                بازگشت
-              </Link>
-            </div>
             <header className="mobile-activation__header d-flex flex-column align-items-center">
               <img src={analytics} alt="فعال سازی کتاب" />
               <h1 style={{ fontSize: fontSize.mobile.h1 }}>
                 فعال سازی کتاب الکترونیک
               </h1>
-            </header>
               <div className="mobile-activation__description d-flex">
                 <span>.</span>
                 <p style={{ fontSize: fontSize.mobile.p }}>
                   برای خدمات هوشمند کتاب کد فعال سازی را اینجا وارد نمایید
                 </p>
               </div>
+            </header>
+
+            {/* <div className="qr-scan__box--select d-flex">
+                  <select
+                    onChange={(e) =>
+                      this.setState({ facingMode: e.target.value })
+                    }
+                  >
+                    <option value="environment">دوربین عقب</option>
+                    <option value="user">دوربین جلو</option>
+                  </select>
+                </div>
+              <div className="qr-scan__box--camera d-flex justify-content-center align-items-center">
+                {this.state.value !== null ? (
+                  <div
+                    style={{ zIndex: 1000 }}
+                    onClick={() => this.setState({ value: null })}
+                  >
+                    <ReplayIcon style={{ fontSize: 40, color: "grey" }} />
+                  </div>
+                ) : (
+                  <Scanner parent={this} />
+                )}
+              </div> */}
             <form
               className="mobile-activation__form d-flex flex-column"
               // onSubmit={() => console.log()}
             >
+              <div className="inputBox d-flex">
+                <Link to="/qr-scan" className="qrb">
+                  <img src={qrcode} alt="qr" />
+                </Link>
                 <input
                   id="code"
                   type="text"
@@ -132,6 +154,7 @@ class Activation extends Component {
                   placeholder={"FC5DFD : مثال"}
                   style={{ fontSize: fontSize.mobile.form }}
                 />
+              </div>
               <button style={{ fontSize: fontSize.mobile.form }} type="submit">
                 ثبت کد فعال سازی
               </button>

src/views/Activation/index.scss

@@ -6,7 +6,7 @@
   direction: rtl;
   padding-top: 70px;
   overflow-x: hidden;
-
+  height: 100%;
   &__back {
     width: 100%;
     justify-content: flex-end;
@@ -57,15 +57,28 @@
     position: fixed;
     bottom: 20px;
     background-color: white !important;
+    .inputBox {
+      background-color: #aaaaaa;
+      border-radius: 10px;
+      height: 50px;
+      .qrb {
+        cursor: pointer;
+        margin: auto;
+        width: 50px;
+      }
+      img {
+        margin: auto;
+        padding: 0 10px;
+      }
       input {
         width: 100%;
-      background-color: #f6f6f6;
+        background-color: #dbdbdb;
         color: #4d4d4f;
         text-align: center;
         direction: ltr;
         border: 0px;
         padding: 15px 0px;
-      border-radius: 10px;
+        border-radius: 10px 0 0 10px;
         &:focus {
           outline: 0px;
         }
@@ -73,6 +86,8 @@
           color: #afafaf;
         }
       }
+    }
+
     button {
       display: inline;
       font-family: numeralLight;

src/views/Auth/Profile/index.js

@@ -16,6 +16,7 @@ import logo from "../../../assets/icons/logo.png";
 import pic from "../../../assets/images/pic.png";
 import "./index.scss";
 import { useHistory } from "react-router-dom";
+import Navbar from "../../Home/Navbar/index";
 function Navigate({ path }) {
   let history = useHistory();
   return <>{history.push(path)}</>;
@@ -403,11 +404,17 @@ class Profile extends Component {
         ) : null}
         {window.innerWidth < 1000 ? (
           profile ? (
+            <>
+              <Navbar />
               <div className="mobile-auth-profile d-flex flex-column">
-              <img src={logo} alt="دانوین" />
+                <br />
+                {/* <img src={logo} alt="دانوین" /> */}
+
                 <div className="d-flex align-items-center">
                   <div className="d-flex flex-column">
-                  <h1 style={{ fontSize: fontSize.mobile.h1 }}>حساب کاربری</h1>
+                    <h1 style={{ fontSize: fontSize.mobile.h1 }}>
+                      حساب کاربری
+                    </h1>
                     <p style={{ fontSize: fontSize.mobile.p }}>
                       لطفا مشحصات خود را به صورت کامل وارد نمایید
                     </p>
@@ -560,6 +567,7 @@ class Profile extends Component {
                   <button onClick={() => this.onSubmit()}>‌ذخیره</button>{" "}
                 </div>
               </div>
+            </>
           ) : (
             <div
               className="d-flex justify-content-center align-items-center"

src/views/Cart/index.js

@@ -48,6 +48,7 @@ class Cart extends Component {
 
   componentDidUpdate(prevProps, prevState) {
     if (this.props.list.length > 0) {
+      console.log("h1", this.props.factorInfo);
       if (
         this.props.factorInfo === null &&
         this.state.controlFactorInfoRepeat
@@ -67,6 +68,8 @@ class Cart extends Component {
       if (this.props.list.length !== 1) {
         this.props.getInfo({ id: wantedId });
       }
+    } else {
+      this.props.getFactorInfo({});
     }
   }
 
@@ -272,7 +275,12 @@ class Cart extends Component {
                   ))}
                 </div>
               </div> */}
-              <button className="mobile-cart__submit">پرداخت</button>
+              <button
+                className="mobile-cart__submit"
+                onClick={() => this.props.payFactor({ userId: userId })}
+              >
+                پرداخت
+              </button>
             </div>
           ) : (
             <div

src/views/Download/BreadCrumb/index.js

@@ -0,0 +1,45 @@
+import React from "react";
+import Breadcrumbs from "@material-ui/core/Breadcrumbs";
+import { Link } from "react-router-dom";
+
+import "./index.scss";
+
+function handleClick(event) {
+  event.preventDefault();
+  console.info("You clicked a breadcrumb.");
+}
+
+const maxDesktopSize = 1250;
+const maxMobileSize = 650;
+
+const fontSize = {
+  desktop: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
+  mobile: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 25,
+};
+
+export default function ActiveLastBreadcrumb(props) {
+  const { name } = props;
+  return (
+    <Breadcrumbs aria-label="breadcrumb">
+      <Link
+        style={{
+          fontSize:
+            window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
+        }}
+        to={"/"}
+      >
+        صفحه اصلی
+      </Link>
+      <Link
+        style={{
+          fontSize:
+            window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
+          color: "#00CC69",
+        }}
+        to={"/download"}
+      >
+        دریافت افزونه واقعیت افزوده
+      </Link>
+    </Breadcrumbs>
+  );
+}

src/views/Download/BreadCrumb/index.scss

@@ -0,0 +1,8 @@
+.MuiBreadcrumbs-li{
+  a {
+    text-decoration: none;
+    font-family: numeralLight;
+    color: #6F7074;
+    letter-spacing: -1px;
+  }
+}

src/views/Download/Item/index.js

@@ -0,0 +1,63 @@
+import React, { Component } from "react";
+
+const maxMobileSize = 550;
+const maxDesktopSize = 1250;
+
+const fontSize = {
+  mobile: {
+    h1: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 26,
+    h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 34,
+    div: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 32,
+  },
+  desktop: {
+    h1: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70,
+    div: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85,
+    old: window.innerWidth > maxDesktopSize ? 9 : window.innerWidth / 120,
+  },
+};
+const grades = [
+  "پیش دبستان",
+  "اول",
+  "دوم",
+  "سوم",
+  "چهارم",
+  "پنجم",
+  "ششم",
+  "هفتم",
+  "هشتم",
+  "نهم",
+  "دهم",
+  "یازدهم",
+  "دوازدهم",
+];
+export default class Item extends Component {
+  render() {
+    const { data } = this.props;
+    console.log({ data });
+    return (
+      <>
+        {window.innerWidth < 1000 ? (
+          <a
+            href={`https://ar.dnvn.ir/lunch?id=${data.id}`}
+            target="_blank"
+            className="mobile-products-product d-flex flex-column"
+          >
+            <img
+              src={`https://dnvn.ir/api/v1/file/${data["product.book.fileIds"]}`}
+              alt={data.title}
+            />
+            <div className="mobile-products-product__info d-flex flex-column">
+              <h1 style={{ fontSize: fontSize.mobile.h1 }}>
+                {data["product.book.name"]}{" "}
+                {grades[+data["product.book.gradeId"]]}
+              </h1>
+            </div>
+          </a>
+        ) : null}
+        {window.innerWidth > 1000 ? (
+          <article className="products-product d-flex flex-column align-items"></article>
+        ) : null}
+      </>
+    );
+  }
+}

src/views/Download/index.js

@@ -0,0 +1,93 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { userProduct } from "~/Redux/actions";
+import { Link } from "react-router-dom";
+import Navbar from "../Home/Navbar/index";
+import Footer from "../Home/Footer/index";
+import Loader from "~/components/Loader/index";
+import Item from "./Item/index";
+import BreadCrumbs from "./BreadCrumb/index";
+
+import "./index.scss";
+
+const maxDesktopSize = 1250;
+const maxMobileSize = 550;
+
+const fontSize = {
+  mobile: {
+    h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 20,
+    a: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 30,
+    p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 30,
+  },
+  desktop: {
+    h1: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
+    a: window.innerHeight > maxDesktopSize ? 15 : window.innerWidth / 85,
+    p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90,
+  },
+};
+
+class AR extends Component {
+  componentDidMount() {
+    window.scrollTo(0, 0);
+    this.props.getMyList({ isActive: 1, productType: 3 });
+  }
+
+  render() {
+    const { arList, loading } = this.props;
+
+    return (
+      <div className="ar d-flex flex-column">
+        <Navbar page="home" />
+        {window.innerWidth > 1000 ? <BreadCrumbs /> : null}
+        <div
+          className="mybooks__list--empty d-flex flex-column justify-content-center align-items-center"
+          style={{ width: "95vw" }}
+        >
+          <div
+            class="mobile-home-static__flex--right d-flex flex-column"
+            style={{ padding: "40px 10px" }}
+          >
+            <img
+              src="https://dnvn.ir/api/v1/file/1851"
+              alt="واقعیت افزوده"
+              width="150"
+            />
+          </div>
+
+          <p
+            style={{
+              textAlign: "center",
+              fontSize:
+                window.innerWidth > 1000
+                  ? fontSize.desktop.p
+                  : fontSize.mobile.p,
+            }}
+          >
+            برای استفاده از بخش واقعیت افزوده می بایست افزونه آن را نصب نمایید
+          </p>
+          <a
+            href="https://dnvn.ir/ar.apk"
+            style={{
+              color: "white",
+              fontSize: 18,
+              width: "80%",
+              textAlign: "center",
+            }}
+          >
+            دریافت افزونه
+          </a>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default connect(
+  (state) => ({
+    arList: state.userProduct.myList || [],
+    loading: state.loading,
+  }),
+  {
+    getMyList: userProduct.myList,
+  }
+)(AR);

src/views/Download/index.scss

@@ -0,0 +1,20 @@
+.mobile-ar {
+  width: 100vw;
+  max-width: 1250px;
+  margin: 0px auto;
+  padding: 0px 10px 40px;
+  direction: rtl;
+  padding-top: 70px;
+  overflow-x: hidden;
+}
+
+.ar {
+  width: 100vw;
+  max-width: 1250px;
+  min-height: calc(100vh - 288px);
+  margin: 0px auto;
+  padding: 0px 10px;
+  direction: rtl;
+  overflow-x: hidden;
+  padding-top: 100px;
+}

src/views/Home/Navbar/Mobile/index.js

@@ -8,6 +8,7 @@ import clsx from "clsx";
 import logo from "../../../../assets/icons/logoMobile.png";
 import ar from "../../../../assets/icons/ar.png";
 import qr from "../../../../assets/icons/qr.png";
+import back from "../../../../assets/icons/back.png";
 import hamburger from "../../../../assets/icons/hamburger.png";
 import search from "../../../../assets/icons/navbarSearch.png";
 
@@ -64,35 +65,51 @@ export default function MobileNavbar(props) {
   );
   return (
     <nav className="mobile-navbar d-flex">
+      <div
+        className="mobile-navbar__logo"
+        // style={{ transform: page !== "home" ? "translateX(-29px)" : "none" }}
+      >
+        <Link to="/">
+          <img src={logo} alt="لوگو" />
+        </Link>
+      </div>
       <div
         className="mobile-navbar__menu"
         onClick={toggleDrawer("right", true)}
       >
         <img src={hamburger} alt="منو" />
       </div>
-      <Link
+
-        to="/"
-        className="mobile-navbar__logo"
-        style={{ transform: page !== "home" ? "translateX(-29px)" : "none" }}
-      >
-        <img src={logo} alt="لوگو" />
-      </Link>
       <div className="mobile-navbar__left">
-        {page === "home" ? (
+        {page === "home" || page === "download" ? (
           <Link to={"/products"}>
             <img src={search} alt="جستجو" />
           </Link>
         ) : (
           <div className="d-flex align-items-center">
+            {window.location.pathname !== "/products" &&
+              window.location.pathname !== "/mybooks" &&
+              window.location.pathname !== "/profile" && (
                 <Link to={"/products"}>
                   <img src={search} alt="جستجو" />
                 </Link>
+              )}
+            {window.location.pathname !== "/qr-scan" &&
+              window.location.pathname !== "/profile" && (
                 <Link to={"/qr-scan"}>
                   <img src={qr} alt="QR" />
                 </Link>
+              )}
+            {window.location.pathname !== "/ar" &&
+              window.location.pathname !== "/profile" && (
                 <Link to={"/ar"}>
                   <img src={ar} alt="AR" />
                 </Link>
+              )}
+
+            <Link to={"/"}>
+              <img src={back} alt="بازگشت" />
+            </Link>
           </div>
         )}
       </div>

src/views/Home/Navbar/Mobile/index.scss

@@ -7,7 +7,8 @@
   align-items: center;
   background-color: white;
   z-index: 400;
-  padding: 10px 10px 0px;
+  padding: 0px 10px 0px;
+  height: 50px;
   &__menu {
     justify-self: flex-start;
     img {
@@ -15,7 +16,13 @@
     }
   }
   &__logo {
+    position: absolute;
+    width: 100%;
+    top: 5px;
+    text-align: center;
+    z-index: -1;
     img {
+      transform: translate(20px, 0px);
       width: 85px;
     }
   }

src/views/Home/index.scss

@@ -15,7 +15,7 @@
   padding: 0px 5px;
   direction: rtl;
   overflow-x: hidden;
-  padding-top: 70px;
+  padding-top: 55px;
 }
 
 body::-webkit-scrollbar,

src/views/MyBooks/index.js

@@ -74,6 +74,7 @@ class MyBooks extends React.Component {
             <>
               <div className="mobile-products d-flex flex-column">
                 <Navbar />
+
                 <div className="d-flex flex-wrap p-1">
                   {!checkEmpty ? (
                     list.map((item, i) => <Item data={item} key={i} id={i} />)

src/views/Product/index.js

@@ -273,18 +273,20 @@ class Product extends Component {
                 <Link
                   to={"/cart"}
                   style={{
-                    width: "100%",
+                    position: "fixed",
+                    bottom: "0",
+                    width: "calc(100% - 10px)",
                     color: "white",
-                    backgroundColor: "#7fc75d",
+                    backgroundColor: "#00cc69",
                     cursor: "pointer",
                     borderRadius: 8,
                     textDecoration: "none",
                     padding: "5px 10px",
-                    margin: "5px 10px 1px",
+                    margin: "5px 5px 5px",
                     textAlign: "center",
                   }}
                 >
-                  رفتن به سبد خرید
+                  سبد خرید
                 </Link>
               </div>
               <MaterialModal

src/views/Products/index.scss

@@ -24,7 +24,7 @@
   padding: 0px;
   direction: rtl;
   overflow-x: hidden;
-  padding-top: 70px;
+  padding-top: 55px;
   &__empty {
     font-family: numeralLight;
     a {

src/views/QR/index.js

@@ -252,9 +252,6 @@ class QR extends Component {
                         this.content = div;
                       }}
                     >
-                      <div className="mobile-qr-scan__back d-flex mb-2">
-                        <Link to="/">بازگشت</Link>
-                      </div>
                       {qrList.qr.content.map((item, i) => (
                         <Identifier data={item} key={i} />
                       ))}
@@ -262,10 +259,10 @@ class QR extends Component {
                   </div>
                 ) : (
                   <div className="mobile-qr__notAccess d-flex flex-column p-3">
+                    <h1>محتوایی برای این صفحه در دسترس نیست.!</h1>
                     <div className="mobile-qr-scan__back d-flex mb-2">
                       <Link to="/">بازگشت</Link>
                     </div>
-                    <h1>محتوایی برای این صفحه در دسترس نیست.!</h1>
                   </div>
                 )}
               </div>

src/views/QRScan/index.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import Navbar from "../Home/Navbar/index";
 import Footer from "../Home/Footer/index";
 import { Link } from "react-router-dom";
-import history from "./History/index";
+
 import Scanner from "./Scanner/index";
 import LastQr from "./LastQr/index";
 import Modal from "./Modal/index";
@@ -93,10 +93,10 @@ class QRScan extends Component {
         {window.innerWidth < 1000 ? (
           <>
             <div className="mobile-qr-scan d-flex flex-column">
-              <Navbar />
+              <Navbar page="home" />
-              <div className="mobile-qr-scan__back d-flex">
+              {/* <div className="mobile-qr-scan__back d-flex">
                 <Link to="/">بازگشت</Link>
-              </div>
+              </div> */}
               <header className="mobile-qr-scan__header d-flex flex-column"></header>
 
               <section className="mobile-qr-scan__camera d-flex justify-content-center align-items-center">

src/views/QRScan/index.scss

@@ -7,7 +7,7 @@
   padding-top: 70px;
   overflow-x: hidden;
   &__back {
-    justify-content: flex-end;
+    justify-content: space-around;
     a {
       display: inline;
       font-family: numeralLight;