OTP Done

src/components/Checkbox/index.css

@@ -0,0 +1,97 @@
+.checkbox-symbol {
+    position: absolute;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+    user-select: none;
+  }
+  
+  .checkbox-container {
+    box-sizing: border-box;
+    color: #222;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-flow: row wrap;
+  }
+  
+  .checkbox-container * {
+    box-sizing: border-box;
+  }
+  
+  .checkbox-input {
+    position: absolute;
+    visibility: hidden;
+  }
+  
+  .checkbox {
+    user-select: none;
+    cursor: pointer;
+    padding: 6px 8px;
+    border-radius: 6px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    display: flex;
+  }
+  
+  .checkbox:not(:last-child) {
+    margin-right: 6px;
+  }
+  
+  .checkbox:hover {
+    background: inherit;
+  }
+  
+  .checkbox span {
+    vertical-align: middle;
+    transform: translate3d(0, 0, 0);
+  }
+  
+  .checkbox span:first-child {
+    position: relative;
+    flex: 0 0 18px;
+    width: 18px;
+    height: 18px;
+    border-radius: 4px;
+    transform: scale(1);
+    border: 1px solid #cccfdb;
+    transition: all 0.3s ease;
+  }
+  
+  .checkbox span:first-child svg {
+    position: absolute;
+    top: 3px;
+    left: 2px;
+    fill: none;
+    stroke: #fff;
+    stroke-dasharray: 16px;
+    stroke-dashoffset: 16px;
+    transition: all 0.3s ease;
+    transform: translate3d(0, 0, 0);
+  }
+  
+  .checkbox span:last-child {
+    padding-left: 8px;
+    line-height: 18px;
+  }
+  
+  .checkbox:hover span:first-child {
+    border-color: #06BAC0;
+  }
+  
+  .checkbox-input:checked + .checkbox span:first-child {
+    background: #06BAC0;
+    border-color: #06BAC0;
+    animation: zoom-in-out 0.3s ease;
+  }
+  
+  .checkbox-input:checked + .checkbox span:first-child svg {
+    stroke-dashoffset: 0;
+  }
+  
+  @keyframes zoom-in-out {
+    50% {
+      transform: scale(0.9);
+    }
+  }

src/components/Checkbox/index.js

@@ -0,0 +1,31 @@
+import React from "react";
+import './index.css';
+
+export default function Checkbox(props) {
+  // console.log(props)
+  return (
+    <div>
+      <svg className="checkbox-symbol">
+        <symbol id="check" viewBox="0 0 12 10">
+          <polyline
+            points="1.5 6 4.5 9 10.5 1"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+          ></polyline>
+        </symbol>
+      </svg>
+
+      <div className="checkbox-container">
+        <input className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox" checked={props.checked} onClick={props.onclick} onChange={props.onChange}/>
+        <label className="checkbox" htmlFor={"ch"+props.name}>
+          <span>
+            <svg width="12px" height="10px">
+              <use xlinkHref="#check"></use>
+            </svg>
+          </span>
+        </label>
+      </div>
+    </div>
+  );
+}

src/components/ShoppingCart/index.js

@@ -29,11 +29,11 @@ function ShoppingCart({
 }) {
   const [phase, setPhase] = useState("products");
 
- 
+  useEffect(() => {
     getList();
     getFactorInfo({ userId });
     setHeaderOptions(headerOptions);
- 
+  }, []);
 
   // const Table = () => {
   //   return (

src/constants/defaultValues.js

@@ -1,7 +1,7 @@
 export const ApiConfig = {
-  // apiKey: 'AIzaSyBBksq-Asxq2M4Ot-75X19IyrEYJqNBPcg',
+  apiKey: 'AIzaSyBBksq-Asxq2M4Ot-75X19IyrEYJqNBPcg',
-  // authDomain: 'dnvn.ir',
+  authDomain: 'dnvn.ir',
-  // baseUrl: 'https://dnvn.ir/api/v1',
+  baseUrl: 'https://dnvn.ir/api/v1',
   //baseUrl: 'http://localhost:3030/api/v1',
   loginURL: 'user/login',
   otploginURL: 'user/otp/login',

src/redux/reducers/userProduct.js

@@ -14,7 +14,7 @@ export default function userFactor(state = initialState, action) {
   switch (type) {
     case "userProduct/list":
       const checkEmpty = data.filter(
-        (item) => item.condition === 2 && item.product.productType === (1 || 3)
+        (item) => item.condition === 2
       );
       const hasPhysical =
         data.filter((item) => item.product.productType === 2).length > 0

src/view/LoginSignUp/index.js

@@ -12,6 +12,10 @@ import Input from "../../components/input/signUpInput";
 import onInput from "../../utils/onInput";
 import Timer from "../../components/Timer";
 
+
+import { connect } from "react-redux";
+import { user, publicApi } from "../../redux/actions";
+
 const LoginSignUp = ({ activeLogin,
     sendOtp,
     sendPhoneNumber,
@@ -21,7 +25,7 @@ const LoginSignUp = ({ activeLogin,
     setHeaderOptions,
 
 }) => {
-    const [steps, setSteps] = useState(2);
+    const [steps, setSteps] = useState(0);
     const [index, setIndex] = useState(1);
     const [register, setRegister] = useState(false);
     const timeoutRef = useRef(null);
@@ -188,10 +192,12 @@ const LoginSignUp = ({ activeLogin,
             signUpFields?.cellphone?.slice(0, 2) === "09" &&
             signUpFields?.cellphone.length === 11
         ) {
+            
             setSteps(2)
-            setResend(false);
+            
             sendPhoneNumber({ cellphone: signUpFields?.cellphone });
             setError(undefined);
+            console.log(signUpFields.cellphone)
         } else {
             setError("شماره موبایل خود را چک کنید.");
         }
@@ -503,4 +509,18 @@ const LoginSignUp = ({ activeLogin,
     );
 };
 
-export default LoginSignUp;
+const mapStateToProps = (state) => ({
+    loginFlag : state.user.status,
+  });
+  
+  const mapDispatchToProps = {
+    sendOtp: user.otp_login,
+    sendPhoneNumber: user.otp,
+    setHeaderOptions: publicApi.setHeaderOptions,
+  };
+  
+  export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(LoginSignUp);
+  

src/view/services/index.js

@@ -17,7 +17,7 @@ import Packages from "../dashboard2/Packages";
 
 const Services = ({
   isMobile,
-  // books,
+  books,
   getList,
   grades,
   gradeFilter,
@@ -45,6 +45,7 @@ const Services = ({
 
   const [popup, setPopUp] = useState(false);
   const [popUpContent, setPopUpContent] = useState({
+    id: 1,
     title: "",
     video: "",
     description: "",
@@ -99,38 +100,7 @@ const Services = ({
       role: "",
     },
   ];
-  const books = [
+
-    {
-      name : 'علوم',
-      product: [{price: 1000}],
-      vodTeacher: 'علی استادی'
-    },
-    {
-      name : 'علوم',
-      product: [{price: 1000}],
-      vodTeacher: 'علی استادی'
-    },
-    {
-      name : 'علوم',
-      product: [{price: 1000}],
-      vodTeacher: 'علی استادی'
-    },
-    {
-      name : 'علوم',
-      product: [{price: 1000}],
-      vodTeacher: 'علی استادی'
-    },
-    {
-      name : 'علوم',
-      product: [{price: 1000}],
-      vodTeacher: 'علی استادی'
-    },
-    {
-      name : 'علوم',
-      product: [{price: 1000}],
-      vodTeacher: 'علی استادی'
-    },
-  ]
   const [selectedGames, setSelectedGames] = useState([]);
   const [gameId, setGameId] = useState(1);
   const chooseGame = (id) => {
@@ -355,6 +325,7 @@ const Services = ({
               to="#"
               onClick={() => {
                 setPopUpContent({
+                  id: gameId,
                   title: product?.name,
                   video: "",
                   teacher: product.vodTeacher,
@@ -363,8 +334,33 @@ const Services = ({
                   price: product.product[0].price,
                   classHour: 21,
                   classMinute: 56,
+                  image: 'https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg',
+                  examCont : [
+                    {
+                      title: 'بخش اول آزمون ' + product.name,
+                      date: '۱۴۰۰/۱۲/۱۳',
+                      time: '۱۴:۴۶',
+                      numberOfQ: '۱۸',
+                      price: 10000
+                    },
+                    {
+                      title: 'بخش دوم آزمون ' + product.name,
+                      date: '۱۴۰۰/۱۲/۱۴',
+                      time: '۱۴:۴۶',
+                      numberOfQ: '۱۸',
+                      price: 10000
+                    },
+                    {
+                      title: 'بخش سوم آزمون ' + product.name,
+                      date: '۱۴۰۰/۱۲/۱۵',
+                      time: '۱۴:۴۶',
+                      numberOfQ: '۳۲',
+                      price: 250000
+                    },
+                  ]
                 });
-                if(gameId == 1){setPopUp(true);}
+                setPopUp(true);
+                console.log(gameId)
               }}
             >
               {/* {console.log(product)} */}

src/view/services/service/index.js

@@ -1,6 +1,6 @@
 import React from "react";
 import Button from "../../../components/Button";
-
+import Checkbox from '../../../components/Checkbox';
 const servicePopUp = ({
     content,
     closeOnClick,
@@ -21,13 +21,17 @@ const servicePopUp = ({
                         </svg>
                     </div>
                 </div>
-                <div className="flex justify-between mb-20">
+                <div className={`flex justify-${content.id == 3 ? 'center' : 'between'} mb-20`} style={{direction: content.id == 1 ? 'rtl' : 'ltr'}} >
-                    <div className="w-1/2 my-4  p-2">
+                        { content.id !== 3 && <div className={`${content.id == 1 ? 'w-1/2' : content.id == 4 ? 'w-2/3' : 'w-full'} my-4  p-2`}>
-                        <h1 className="text-red25 font-black text-md">کلاس آنلاین  {content.title}</h1>
+                        <h1 className="text-red25 font-black text-md">
+                            
+                            {content.id == 1 ? 'کلاس آنلاین  ' : content.id == 4 ? 'کتاب ' : null}
+                            
+                            {content.title}</h1>
                         <p className="text-red26 text-sm my-2">
                             {content.description}
                         </p>
-                        <div className="w-full flex flex-col">
+                        <div className="w-full flex flex-col" style={{direction: 'rtl'}}>
                             <div className="flex mb-2">
                                 <div className="bg-gray-100 rounded w-40 px-4 py-2  ml-2 text-red52">نام کلاس</div>
                                 <div className="bg-gray-100 rounded w-full px-4 py-2 ml-2 text-red26">{content.title}</div>
@@ -46,13 +50,53 @@ const servicePopUp = ({
 
                         </div>
 
+                    </div>}
+                    {
+                        content.id == 3 && 
+                        <div className="flex w-11/12 flex-col rounded-xl border border-red82OP">
+                            <h1 className="px-2 py-6 border-b border-red82OP bg-blueFF rounded-t-xl text-blueE3 text-xl font-bold">آزمون {content.title}</h1>
+                            <div className="flex w-full border-b border-red82OP text-red26 text-sm font-bold" style={{direction : 'rtl'}}>
+                                    <div className="w-1/4 flex justify-center py-4 border-l border-red82OP">نوع آزمون : آنلاین</div>
+                                    <div className="w-1/4 flex justify-center py-4 border-l border-red82OP">تاریخ شروع : 1400/12/03</div>
+                                    <div className="w-1/4 flex justify-center py-4 border-l border-red82OP">تعداد آزمون : ۱۸</div>
+                                    <div className="w-1/4 flex items-center justify-center py-4 ">  بودجه بندی آزمون </div>
+                                </div>
+                                <div className="flex w-full border-b border-red82OP text-red26 text-xs py-3 px-6 " style={{direction : 'rtl'}}>
+                                    <span className="text-red52 ml-1 font-bold">
+                                توجه:
+                                </span>
+                                 به صورت معمول تمامی آزمون ها برای شما خریداری خواهند شد مگر اینکه شما به صورت دلخواه یک یا چند آزمون را انتخاب نمایید
+                                    </div>
+                                {
+                                    content.examCont?.map(
+                                        (item, index) => (
+                                            <div className="flex w-full items-center justify-between border-b border-red82OP font-bold text-red26 text-xs py-3 px-6 " style={{direction : 'rtl'}}>
+                                                <div className="flex items-center font-bold">
+                                                <Checkbox />
+                                                <p>{item.title}</p>
                                                 </div>
-                    <video className="w-1/2 rounded-md" controls>
+                                                <p>تاریخ : {item.date}</p>
+                                                <p>ساعت : {item.time}</p>
+                                                <p>بودجه بندی  !</p>
+                                                <p>تعداد سوالات: {item.numberOfQ}</p>
+                                                <p>{item.price} تومان</p>
+                                             </div>   
+                                        )
+                                    )
+                                }
+                            </div>
+                    }
+                    
+                   {content.id == 1 && <video className="w-1/2 rounded-md" controls>
                         <source
                             src={`https://dnvn.ir/api/v1/file/20540`}
                             type="video/mp4"
                         />
-                    </video>
+                    </video>}
+
+                    {
+                        content.id == 4 && <img src={content.image} className="w-1/3 rounded mt-4"/>
+                    }
                 </div>
                 <div className="flex w-full items-center justify-start mb-8" style={{direction: 'ltr'}}>
                     <Button title='افزودن به سبد خرید' onClick={addToCartFunction} className="w-40"/>

tailwind.config.js

@@ -33,7 +33,9 @@ module.exports = {
         black40: '#404040',
         green17 : '#8daf17',
         blue5F : '#05335f',
-        blue7E : '#15517e'
+        blue7E : '#15517e',
+        blueFF : '#f2f9ff',
+        blueE3 : '#4c7fe3'
       },
     },
     screens: {