mobile(myOrders),payment-box...

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#fff" />
     <meta
       name="description"
       content="Web site created using create-react-app"

src/components/ShoppingCart/index.js

@@ -30,7 +30,8 @@ function ShoppingCart({
   desktopContentTransform,
   pushToCart,
   pushSchoolToCart,
-  paySchool
+  paySchool,
+  setShowPaymentBox,
 }) {
   const [phase, setPhase] = useState("products");
 
@@ -41,35 +42,56 @@ function ShoppingCart({
   }, []);
   console.log("Cart----------======================-------------------");
   console.log(schoolList);
-  return(isMobile ? 
 
-
+  //payHandler---------------------------------------
-    <div className="w-full flex flex-col justify-between items-center  bg-gray-200  rtl left-0 pt-[3.5%]" style={{height: '100vh'}}>
+  const payHandler = () => {
-    <div className={`w-full flex items-center flex-col ${list?.length > 3 && 'overflow-x-hidden overflow-scroll'}`} style={{height: '35%'}}>
+    setShowPaymentBox(true);
-    
+  };
-    {
+  return isMobile ? (
-      schoolList.map((school, index) => (
+    <div
-        <div className="flex bg-white justify-between items-center border-2  border-gray-300 p-4 rounded-xl m-2 mt-0 " key={`SCHOOL_${index}`} style={{ width: '90%' }}>
+      className="w-full flex flex-col justify-between items-center  bg-gray-200  rtl left-0 pt-[3.5%]"
+      style={{ height: "100vh" }}
+    >
+      <div
+        className={`w-full flex items-center flex-col ${
+          list?.length > 3 && "overflow-x-hidden overflow-scroll"
+        }`}
+        style={{ height: "35%" }}
+      >
+        {schoolList.map((school, index) => (
+          <div
+            className="flex bg-white justify-between items-center border-2  border-gray-300 p-4 rounded-xl m-2 mt-0 "
+            key={`SCHOOL_${index}`}
+            style={{ width: "90%" }}
+          >
             <div className="flex flex-col items-center w-full">
               <div className="flex items-center w-full">
-          <div className="text-xs h-10 flex items-center p-2 border-l-2 border-gray-300 text-gray-400"> رزرو پیش ثبت نام </div>
+                <div className="text-xs h-10 flex items-center p-2 border-l-2 border-gray-300 text-gray-400">
-          <h1 className="text-md font-black px-2 text-black40"> {school?.product?.name}</h1>
+                  {" "}
+                  رزرو پیش ثبت نام{" "}
                 </div>
-        <button className="w-full px-1 h-12 mt-1 text-white bg-red52 rounded-lg text-sm font-semibold" onClick={() => paySchool()}>
+                <h1 className="text-md font-black px-2 text-black40">
-          پرداخت مستقیم به حساب مدرسه با مبلغ {separate(school.price)} تومان
+                  {" "}
+                  {school?.product?.name}
+                </h1>
+              </div>
+              <button
+                className="w-full px-1 h-12 mt-1 text-white bg-red52 rounded-lg text-sm font-semibold"
+                onClick={() => paySchool()}
+              >
+                پرداخت مستقیم به حساب مدرسه با مبلغ {separate(school.price)}{" "}
+                تومان
               </button>
               <p className="w-full text-right text-xs mt-2">
                 <span className="text-red-600 font-bold"> توجه: </span>
-          نحوه پرداخت برای رزرو پیش ثبت‌نام از طریق دکمه بالا خواهد بود
+                نحوه پرداخت برای رزرو پیش ثبت‌نام از طریق دکمه بالا خواهد بود و
-و می بایست ازین طریق جداگانه پرداخت گردد
+                می بایست ازین طریق جداگانه پرداخت گردد
               </p>
             </div>
             <div className="flex items-center p-0 ">
-          
-          
               <div
                 className="w-8 h-8 text-white text-sm rounded-full cursor-pointer flex justify-center items-center bg-red52"
-            style={{ transform: 'translateX(-30px)' }}
+                style={{ transform: "translateX(-30px)" }}
                 onClick={() =>
                   pushSchoolToCart(
                     {
@@ -82,35 +104,57 @@ function ShoppingCart({
                   )
                 }
               >
-  
+                {school.count == 1 ? (
-            
+                  <svg
-              
+                    xmlns="http://www.w3.org/2000/svg"
-                {school.count == 1 ?<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 15.044 15.044">
+                    width="12"
-                   <g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)">
+                    height="12"
+                    viewBox="0 0 15.044 15.044"
+                  >
+                    <g
+                      id="vuesax_linear_card-remove"
+                      data-name="vuesax/linear/card-remove"
+                      transform="translate(-252.46 -511.461)"
+                    >
                       <g id="card-remove" transform="translate(253.309 512.31)">
-                  <path id="Vector" d="M0,13.347,13.347,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
+                        <path
-                  <path id="Vector-2" data-name="Vector" d="M13.347,13.347,0,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
+                          id="Vector"
+                          d="M0,13.347,13.347,0"
+                          fill="none"
+                          stroke="#fff"
+                          strokeLinecap="round"
+                          strokeWidth="2"
+                        />
+                        <path
+                          id="Vector-2"
+                          data-name="Vector"
+                          d="M13.347,13.347,0,0"
+                          fill="none"
+                          stroke="#fff"
+                          strokeLinecap="round"
+                          strokeWidth="2"
+                        />
                       </g>
                     </g>
-                </svg>: 
+                  </svg>
+                ) : (
                   <svg width="100" height="100" viewBox="0 0 100 100">
                     <g stroke="#fff" strokeWidth="5" fill="none">
-                     <path d="M 25 50 L 75 50
+                      <path
+                        d="M 25 50 L 75 50
                               M 50 5
-                              " />
+                              "
+                      />
                     </g>
-             </svg>}
+                  </svg>
-              
+                )}
-            
-  
               </div>
             </div>
           </div>
-      ))
+        ))}
-    }
+        {schoolList.length > 0 && (
-   {
+          <div className="bg-gray-300 my-2 pb-1 rounded-full w-11/12"></div>
-     schoolList.length > 0 &&  <div className="bg-gray-300 my-2 pb-1 rounded-full w-11/12"></div>
+        )}
-   }
         {list.map((product, index) => (
           <Product key={index} product={product} />
         ))}
@@ -124,52 +168,63 @@ function ShoppingCart({
             <p>جمع مبالغ خدمات</p>
             <p>{factorInfo?.sumPrice} تومان</p>
           </div>
+          {factorInfo?.offPrice && (
             <div className="flex justify-between w-full py-2 text-red26 text-lg ">
               <p> تخفیف </p>
               <p> {factorInfo?.offPrice} - تومان</p>
             </div>
-      <div className="flex justify-between w-full py-2 text-red26 text-lg ">
+          )}
-        <p>کسر از اعتبار</p>
-        <p>-۰ تومان</p>
-      </div>  
         </div>
         <Button
-      title={`پرداخت هزینه : ${factorInfo?.payPrice ? separate(factorInfo?.payPrice) : 0} تومان`}
+          title={`پرداخت هزینه : ${
-      borderType='rounded-xl'
+            factorInfo?.payPrice ? separate(factorInfo?.payPrice) : 0
-      className='h-16 w-full mx-none text-xl'
+          } تومان`}
+          borderType="rounded-xl"
+          className="h-16 w-full mx-none text-xl"
           onClick={() => payFactor()}
         />
       </div>
-
     </div>
-
+  ) : (
-    :
+    <div className="ccc w-full h-full flex flex-col justify-between items-center  bg-gray-100  left-0 pt-14">
-    
+      <div
-  <div className="flex flex-col justify-between items-center  bg-gray-100  left-0 pt-14" style={{height: '100vh'}}>
+        className={`w-full flex items-center flex-col h-[60%] overflow-y-auto`}
-   <div className={`w-full flex items-center flex-col ${list?.length > 1 && 'overflow-x-hidden overflow-scroll'}`} style={{height: '60%'}}>
+      >
-   {
+        {schoolList?.map((school, index) => (
-      schoolList.map((school, index) => (
+          <div
-        <div className="flex bg-white justify-between items-center border-2  border-gray-300 p-4 rounded-xl m-2 " key={`SCHOOL_${index}`} style={{ width: '90%' }}>
+            className="flex bg-white justify-between items-center border-2  border-gray-300 p-4 rounded-xl m-2 "
+            key={`SCHOOL_${index}`}
+            style={{ width: "90%" }}
+          >
             <div className="flex flex-col items-center w-full">
               <div className="flex items-center w-full">
-          <div className="text-xs h-10 flex items-center p-2 border-l-2 border-gray-300 text-gray-400"> رزرو پیش ثبت نام </div>
+                <div className="text-xs h-10 flex items-center p-2 border-l-2 border-gray-300 text-gray-400">
-          <h1 className="text-md font-black px-2 text-black40"> {school?.product?.name}</h1>
+                  {" "}
+                  رزرو پیش ثبت نام{" "}
                 </div>
-        <button className="w-full px-1 h-12 mt-1 text-white bg-red52 rounded-lg font-semibold" style={{fontSize: '0.65vw'}} onClick={() => paySchool()}>
+                <h1 className="text-md font-black px-2 text-black40">
-          پرداخت مستقیم به حساب مدرسه با مبلغ {separate(school.price)} تومان
+                  {" "}
+                  {school?.product?.name}
+                </h1>
+              </div>
+              <button
+                className="w-full px-1 h-12 mt-1 text-white bg-red52 rounded-lg font-semibold"
+                style={{ fontSize: "0.65vw" }}
+                onClick={() => paySchool()}
+              >
+                پرداخت مستقیم به حساب مدرسه با مبلغ {separate(school.price)}{" "}
+                تومان
               </button>
               <p className="w-full text-right text-xs mt-2">
                 <span className="text-red-600 font-bold"> توجه: </span>
-          نحوه پرداخت برای رزرو پیش ثبت‌نام از طریق دکمه بالا خواهد بود
+                نحوه پرداخت برای رزرو پیش ثبت‌نام از طریق دکمه بالا خواهد بود و
-و می بایست ازین طریق جداگانه پرداخت گردد
+                می بایست ازین طریق جداگانه پرداخت گردد
               </p>
             </div>
             <div className="flex items-center p-0 ">
-          
-          
               <div
                 className="w-8 h-8 text-white text-sm rounded-full cursor-pointer flex justify-center items-center bg-red52"
-            style={{ transform: 'translateX(-30px)' }}
+                style={{ transform: "translateX(-30px)" }}
                 onClick={() =>
                   pushSchoolToCart(
                     {
@@ -182,65 +237,86 @@ function ShoppingCart({
                   )
                 }
               >
-  
+                {school.count == 1 ? (
-            
+                  <svg
-              
+                    xmlns="http://www.w3.org/2000/svg"
-                {school.count == 1 ?<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 15.044 15.044">
+                    width="12"
-                   <g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)">
+                    height="12"
+                    viewBox="0 0 15.044 15.044"
+                  >
+                    <g
+                      id="vuesax_linear_card-remove"
+                      data-name="vuesax/linear/card-remove"
+                      transform="translate(-252.46 -511.461)"
+                    >
                       <g id="card-remove" transform="translate(253.309 512.31)">
-                  <path id="Vector" d="M0,13.347,13.347,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
+                        <path
-                  <path id="Vector-2" data-name="Vector" d="M13.347,13.347,0,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
+                          id="Vector"
+                          d="M0,13.347,13.347,0"
+                          fill="none"
+                          stroke="#fff"
+                          strokeLinecap="round"
+                          strokeWidth="2"
+                        />
+                        <path
+                          id="Vector-2"
+                          data-name="Vector"
+                          d="M13.347,13.347,0,0"
+                          fill="none"
+                          stroke="#fff"
+                          strokeLinecap="round"
+                          strokeWidth="2"
+                        />
                       </g>
                     </g>
-                </svg>: 
+                  </svg>
+                ) : (
                   <svg width="100" height="100" viewBox="0 0 100 100">
                     <g stroke="#fff" strokeWidth="5" fill="none">
-                     <path d="M 25 50 L 75 50
+                      <path
+                        d="M 25 50 L 75 50
                               M 50 5
-                              " />
+                              "
+                      />
                     </g>
-             </svg>}
+                  </svg>
-              
+                )}
-            
-  
               </div>
             </div>
           </div>
-      ))
+        ))}
-    }
+        {schoolList.length > 0 && (
-   {
+          <div className="bg-gray-300 my-2 pb-1 rounded-full w-11/12"></div>
-     schoolList.length > 0 &&  <div className="bg-gray-300 my-2 pb-1 rounded-full w-11/12"></div>
+        )}
-   }
         {list.map((product, index) => (
           <Product key={index} product={product} />
         ))}
       </div>
       {/* {console.log(list)} */}
 
-    <div style={{width: '80%'}} className="mb-6">
+      <div style={{ width: "80%" }} className="mb-6">
         <Code />
         <div className="flex flex-col w-full border-t border-gray-400 my-2 py-2">
           <div className="flex justify-between w-full py-2 text-blue-700 text-lg ">
             <p>جمع مبالغ خدمات</p>
             <p>{factorInfo?.sumPrice} تومان</p>
           </div>
+          {factorInfo?.offPrice && (
             <div className="flex justify-between w-full py-2 text-red26 text-lg ">
               <p> تخفیف </p>
               <p> {factorInfo?.offPrice} - تومان</p>
             </div>
-      <div className="flex justify-between w-full py-2 text-red26 text-lg ">
+          )}
-        <p>کسر از اعتبار</p>
-        <p>-۰ تومان</p>
-      </div>  
         </div>
         <Button
-      title={`پرداخت هزینه : ${factorInfo?.payPrice ? separate(factorInfo?.payPrice) : 0} تومان`}
+          title={`پرداخت هزینه : ${
-      borderType='rounded-xl'
+            factorInfo?.payPrice ? separate(factorInfo?.payPrice) : 0
-      className='h-16 text-xl xl:text-sm'
+          } تومان`}
-      onClick={() => payFactor()}
+          borderType="rounded-xl"
+          className="h-16 text-xl xl:text-sm"
+          onClick={payHandler}
         />
       </div>
-
     </div>
   );
 }

src/redux/actions/public.js

@@ -41,6 +41,8 @@ const publicApi = {
       await proxy.get("public/city", data, { dispatch }),
   selectMenu: (data) => async (dispatch) =>
     await dispatch({ type: "public/selectMenu", data }),
+  sendOtp: (data) => async (dispatch) =>
+    await proxy.post("public/sendOTP", data, { dispatch }),
   getHeader:
     (data = {}) =>
     async (dispatch) =>

src/redux/reducers/public.js

@@ -1,3 +1,4 @@
+import { toast } from "react-toastify";
 import { ostan } from "../../constants/states";
 import location from "../../utils/location";
 
@@ -233,6 +234,9 @@ export default function publicApi(state = initialState, action) {
       return { ...state, loading: false, error: null, contactData: data };
     case "public/blogList":
       return { ...state, loading: false, error: null, blogList: data };
+    case "public/sendOTP":
+      toast.success("درخواست با موفقیت ثبت شد")
+      return { ...state, loading: false, error: null };
     case "public/blogInfo":
       return { ...state, loading: false, error: null, blog: data };
     case "public/setSubscribe":

src/redux/reducers/userFactor.js

@@ -52,7 +52,7 @@ export default function userFactor(state = initialState, action) {
     case "userFactor/loading":
       return { ...state, loading: true };
     case "userFactor/error":
-      toast.error(data.message);
+      if (data.statusCode!==404){ toast.error(data.message);}
       return { ...state, loading: false, error: data.message };
     default:
       return state;

src/view/LoginSignUp/SignUpBox.js

@@ -1,8 +1,10 @@
 import { useState } from "react";
+import { connect } from "react-redux";
 import { toast } from "react-toastify";
+import {user,publicApi} from '../../redux/actions'
 import logo from "../../assets/img/logo.png";
 import backIcon from "../../assets/img/vuesax-linear-arrow-left.svg";
-const SignUpBox = ({ setSignUp }) => {
+const SignUpBox = ({ setSignUp, sendOtp,otpLogin }) => {
   const [step, setStep] = useState(0);
   const [data, setData] = useState(null);
   const submitHandler = () => {
@@ -26,6 +28,7 @@ const SignUpBox = ({ setSignUp }) => {
         nationalId,
         cellphone,
       });
+      sendOtp({ cellphone });
       setStep(1);
     }
   };
@@ -43,9 +46,14 @@ const SignUpBox = ({ setSignUp }) => {
   const codeFocuseHandler = (index) => {
     let box = document.querySelectorAll(".codeInput");
     if (index !== 3) {
-    box[index+1].focus()
+      box[index + 1].focus();
     } else {
-      if(box[0].value!=="" && box[1].value!=="" && box[2].value!=="" && box[3].value!==""){
+      if (
+        box[0].value !== "" &&
+        box[1].value !== "" &&
+        box[2].value !== "" &&
+        box[3].value !== ""
+      ) {
         let code = Number(
           box[0].value + box[1].value + box[2].value + box[3].value
         );
@@ -53,6 +61,25 @@ const SignUpBox = ({ setSignUp }) => {
       }
       //api send
     }
+  };
+
+  //otpLoginHandler--------------
+  const otpLoginHandler=()=>{
+    let codeInput = document.querySelectorAll(".codeInput"); 
+    let code = codeInput[0].value + codeInput[1].value + codeInput[2].value + codeInput[3].value;
+    if(code.length<4){
+      toast.error("لطفا کد را به صورت کامل وارد کنید")
+    }else{
+      otpLogin({
+        cellphone: data.cellphone,
+        firstName: data.firstName,
+        lastName: data.lastName,
+        nationalId: data.nationalId,
+        otp: code,
+        userToken: "1",
+        applicationToken:"1",
+      });
+    }
   }
   return (
     <div className="SignUpBox w-full h-full flex flex-col items-center justify-center bg-white absolute top-0 left-0 rounded-lg ">
@@ -85,7 +112,10 @@ const SignUpBox = ({ setSignUp }) => {
       {step === 1 && <SendCodeAgain cellphone={data.cellphone} />}
       {/* ----------code----------------- */}
       {step === 1 && (
-        <div className="w-[85%] flex items-center justify-between mt-5" style={{direction:"ltr"}}>
+        <div
+          className="w-[85%] flex items-center justify-between mt-5"
+          style={{ direction: "ltr" }}
+        >
           <input
             type="text"
             name="codeInput"
@@ -128,7 +158,7 @@ const SignUpBox = ({ setSignUp }) => {
       {step === 1 && (
         <div
           className="w-[85%] h-[50px] rounded-lg bg-[#DF1452] flex items-center justify-center text-lg text-white mt-5 cursor-pointer"
-          // onClick={submitHandler}
+          onClick={otpLoginHandler}
         >
           تایید
         </div>
@@ -137,7 +167,16 @@ const SignUpBox = ({ setSignUp }) => {
   );
 };
 
-export default SignUpBox;
+const mapStateToProps = (state) => ({
+  
+});
+
+const mapDispatchToProps = {
+  sendOtp: publicApi.sendOtp,
+  otpLogin:user.otp_login
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(SignUpBox);
 
 //----------------------------------
 

src/view/my-services/index.css

@@ -75,6 +75,12 @@
   }
 }
 
+@media only screen and (max-width: 350px) {
+  .myOrders-mobile-item{
+    width: 54% !important;
+  }
+}
+
 @media only screen and (max-width: 340px) {
   .FutureExams-m-item-box{
     width: 55% !important;

src/view/my-services/mobile/MyCourse.js

@@ -0,0 +1,130 @@
+import Title from "../Title";
+import img1 from "../../../assets/img/rhema-kallianpur-2W3bDp7K1oQ-unsplash.jpg";
+import img2 from "../../../assets/img/pankaj-patel-_SgRNwAVNKw-unsplash.jpg";
+let data = [
+  {
+    id: 1,
+    name: "صفر تا صد javascript",
+    date: "1401/3/3",
+    img: img1,
+    description:
+      "ما در این دوره از پایه‌ای ترین مفاهیم javascript شروع خواهیم کرد و رفته رفته به سمت مطالب حرفه‌ای تر حرکت میکنیم.",
+    teacher: "فرانت‌کار عجیب",
+  },
+  {
+    id: 2,
+    name: "صفر تا صد javascript",
+    date: "1401/3/3",
+    img: img2,
+    description:
+      "ما در این دوره از پایه‌ای ترین مفاهیم javascript شروع خواهیم کرد و رفته رفته به سمت مطالب حرفه‌ای تر حرکت میکنیم.",
+    teacher: "فرانت‌کار عجیب",
+  },
+  {
+    id: 3,
+    name: "صفر تا صد javascript",
+    date: "1401/3/3",
+    img: img1,
+    description:
+      "ما در این دوره از پایه‌ای ترین مفاهیم javascript شروع خواهیم کرد و رفته رفته به سمت مطالب حرفه‌ای تر حرکت میکنیم.",
+    teacher: "فرانت‌کار عجیب",
+  },
+  {
+    id: 4,
+    name: "صفر تا صد javascript",
+    date: "1401/3/3",
+    img: img2,
+    description:
+      "ما در این دوره از پایه‌ای ترین مفاهیم javascript شروع خواهیم کرد و رفته رفته به سمت مطالب حرفه‌ای تر حرکت میکنیم.",
+    teacher: "فرانت‌کار عجیب",
+  },
+];
+const MyCourse = ({ seeMoreHandler, seeMoreStatus, deActiveSeeMore }) => {
+  return (
+    <div
+      className="MyCourse w-full p-2 rounded-lg border mt-4"
+      // style={seeMoreStatus === 4 ? { width: "100%" } : null}
+    >
+      {/* ----title-------- */}
+      <Title
+        titleText="دوره‌های من"
+        seeMoreHandler={() => seeMoreHandler(4)}
+        seeMoreStatus={seeMoreStatus}
+        deActiveSeeMore={deActiveSeeMore}
+      />
+      {/* ----body-------- */}
+      <div className="w-full mt-1 flex flex-row-reverse items-center gap-x-1 overflow-x-auto">
+        {data?.map((item, index) => (
+          <div key={index} className="w-[47%] rounded border shrink-0 pb-1">
+            <div className="w-full aspect-[1/0.7] rounded overflow-hidden flex justify-center">
+              <img
+                src={item.img}
+                alt="course-banner"
+                className="w-full rounded"
+              />
+            </div>
+            {/* ---- */}
+            <div className="w-full mt-1 px-1">
+              <div
+                className="text-xs text-right text-[#B1B1B1]"
+                // style={seeMoreStatus === 4 ? { fontSize: "14px" } : null}
+              >
+                {item?.date}
+              </div>
+              <div
+                className=" w-full text-sm text-right mt-1 text-black"
+                style={
+                  seeMoreStatus === 4
+                    ? {
+                        fontFamily: "IRANSansXFaNum-Medium",
+                        direction: "rtl",
+                        fontSize: "20px",
+                      }
+                    : {
+                        fontFamily: "IRANSansXFaNum-Medium",
+                        direction: "rtl",
+                      }
+                }
+              >
+                {item.name}
+              </div>
+              <div
+                className="w-full text-xs text-right text-[#B1B1B1] mt-1 overflow-hidden text-ellipsis"
+                style={
+                  seeMoreStatus === 4
+                    ? {
+                        WebkitLineClamp: "2",
+                        WebkitBoxOrient: "vertical",
+                        display: "-webkit-box",
+                        direction: "rtl",
+                        fontSize: "16px",
+                      }
+                    : {
+                        WebkitLineClamp: "2",
+                        WebkitBoxOrient: "vertical",
+                        display: "-webkit-box",
+                        direction: "rtl",
+                      }
+                }
+              >
+                {item.description}
+              </div>
+              <div
+                className="w-full text-left text-xs w-full mt-2 text-black"
+                style={
+                  seeMoreStatus === 4
+                    ? { direction: "ltr", fontSize: "14px" }
+                    : { direction: "ltr" }
+                }
+              >
+                استاد:{item?.teacher}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MyCourse;

src/view/my-services/mobile/MyOrders.js

@@ -0,0 +1,168 @@
+import React from "react";
+import Title from "../Title";
+
+let data = [
+  {
+    id: 1,
+    factorId: "ABC12345",
+    date: "1401/3/3",
+    status: 1,
+    sumPrice: 100000,
+    products: [
+      {
+        id: 100,
+        img: "",
+      },
+      {
+        id: 101,
+        img: "",
+      },
+    ],
+  },
+  {
+    id: 2,
+    factorId: "ABC12345",
+    date: "1401/3/3",
+    status: 2,
+    sumPrice: 100000,
+    products: [
+      {
+        id: 100,
+        img: "",
+      },
+      {
+        id: 101,
+        img: "",
+      },
+    ],
+  },
+  {
+    id: 3,
+    factorId: "ABC12345",
+    date: "1401/3/3",
+    status: 3,
+    sumPrice: 100000,
+    products: [
+      {
+        id: 100,
+        img: "",
+      },
+      {
+        id: 101,
+        img: "",
+      },
+    ],
+  },
+  {
+    id: 4,
+    factorId: "ABC12345",
+    date: "1401/3/3",
+    status: 1,
+    sumPrice: 100000,
+    products: [
+      {
+        id: 100,
+        img: "",
+      },
+      {
+        id: 101,
+        img: "",
+      },
+    ],
+  },
+];
+let statusColor = ["#F7EA46", "#57F746", "#FE1E1E"];
+const MyOrders = ({ seeMoreHandler, seeMoreStatus, deActiveSeeMore }) => {
+  return (
+    <div
+      className="MyOrders w-full rounded-lg border p-2 my-4 text-black"
+      style={seeMoreStatus === 5 ? { width: "100%" } : null}
+    >
+      <div className="w-full h-full overflow-y-auto">
+        {/* ----title-------- */}
+        <Title
+          titleText="سفارش‌های من"
+          seeMoreHandler={() => seeMoreHandler(5)}
+          seeMoreStatus={seeMoreStatus}
+          deActiveSeeMore={deActiveSeeMore}
+        />
+        {/* ----body-------- */}
+        <div className="w-full mt-2 flex flex-row-reverse items-center gap-x-2 overflow-x-auto">
+          {data.map((item, index) => (
+            <div key={index} className="myOrders-mobile-item w-[48%] border px-1 py-2 shrink-0 rounded">
+              <div className="w-full flex flex-row-reverse items-center justify-between py-1 border-b border-[#E0E0E0]">
+                <div
+                  className="w-full pl-1 text-center text-xs border-l"
+                  // style={seeMoreStatus === 5 ? { width: "55%" } : null}
+                >
+                  {item.factorId}
+                </div>
+              </div>
+              <div className="w-full flex flex-row-reverse items-center justify-between my-2">
+                <div className=" text-right text-xs">{item.date}</div>
+                <div
+                  className=" flex flex-row-reverse items-center"
+                  // style={seeMoreStatus === 5 ? { width: "15%" } : null}
+                >
+                  <div
+                    className="w-3 h-3 rounded-full bg-black"
+                    style={{
+                      backgroundColor: `${statusColor[item.status - 1]}`,
+                    }}
+                  ></div>
+                  <div className="order-m-status text-xs text-right mr-1">
+                    {item.status === 1
+                      ? "در حال پردازش"
+                      : item.status === 2
+                      ? "تکمیل شده"
+                      : "کنسل شده"}
+                  </div>
+                </div>
+              </div>
+              {/* ---------- */}
+              <div className="w-full mt-1">
+                <div className="my-order-m-right w-full flex flex-row-reverse items-start gap-x-2 gap-y-2 shrink-0 overflow-hidden">
+                  {item.products.map((ITEM, INDEX) => (
+                    <React.Fragment key={INDEX}>
+                      {INDEX < 3 && (
+                        <div
+                          key={INDEX}
+                          className="w-[27%] aspect-[1/1.6] rounded bg-[#E0E0E0] overflow-hidden flex items-center justfy-center cursor-pointer"
+                          // style={
+                          //   seeMoreStatus === 5
+                          //     ? { width: "80px", height: "128px" }
+                          //     : null
+                          // }
+                        ></div>
+                      )}
+                    </React.Fragment>
+                  ))}
+                </div>
+                <div className="my-order-m-left w-full mt-2">
+                  <div
+                    className="factor-sum-price w-full text-center text-xs"
+                    // style={seeMoreStatus === 5 ? { fontSize: "16px" } : null}
+                  >
+                    جمع فاکتور {item.sumPrice} تومان
+                  </div>
+                  <div
+                    className="w-full h-7 rounded flex items-center justify-center text-xs text-center text-white bg-[#DF1452] mt-2 mx-auto"
+                    style={
+                      seeMoreStatus === 5
+                        ? { width: "130px", fontSize: "16px", height: "35px" }
+                        : null
+                    }
+                  >
+                    جزئیات سفارش
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MyOrders;

src/view/my-services/mobile/MyRegisters.js

@@ -0,0 +1,84 @@
+import Title from "../Title";
+
+let data = [
+  {
+    id: 1,
+    factorId: "ABC12345",
+    name: "کلاس حضوری فیزیک کوآنتوم",
+    date: "1401/3/3",
+    type: 1,
+  },
+  {
+    id: 2,
+    factorId: "ABC12345",
+    name: "کلاس حضوری فیزیک کوآنتوم",
+    date: "1401/3/3",
+    type: 2,
+  },
+  {
+    id: 3,
+    factorId: "ABC12345",
+    name: "کلاس حضوری فیزیک کوآنتوم",
+    date: "1401/3/3",
+    type: 3,
+  },
+  {
+    id: 4,
+    factorId: "ABC12345",
+    name: "کلاس حضوری فیزیک کوآنتوم",
+    date: "1401/3/3",
+    type: 4,
+  },
+  {
+    id: 5,
+    factorId: "ABC12345",
+    name: "کلاس حضوری فیزیک کوآنتوم",
+    date: "1401/3/3",
+    type: 1,
+  },
+];
+const MyRegisters = ({ seeMoreStatus, seeMoreHandler }) => {
+  return (
+    <div className="MyRegisters w-full py-2 border rounded-lg px-2 mt-4">
+      {/* ---title-------- */}
+      <Title
+        titleText="ثبت‌نام‌های من"
+        seeMoreStatus={seeMoreStatus}
+        seeMoreHandler={seeMoreHandler}
+      />
+      {/* ---body-------- */}
+      <div className="w-full flex flex-row-reverse items-center gap-x-1 overflow-x-auto">
+        {data.map((item, index) => (
+          <div key={index} className="w-[47%] py-2 px-1 rounded shrink-0 border">
+            <div className="w-full h-8 flex flex-row-reverse items-center border-b py-1">
+              <div className="w-1/2 h-full flex items-center justify-center text-cneter text-xs text-black border-l">
+                {item.factorId}
+              </div>
+              <div className="w-1/2 h-full flex items-center justify-center text-cneter text-xs text-black">
+                {item.date}
+              </div>
+            </div>
+            {/* -- */}
+            <div className="w-full h-16 mt-1 py-1 text-sm text-right text-black">
+              {item.name}
+            </div>
+            {/* -- */}
+            <div className="w-full h-11 mt-1 flex flex-row-reverse justify-between">
+              <div className="w-[45%] h-full rounded flex items-center justify-center border border-[#DF1452] text-xs text-[#DF1452] text-center">
+                قرارداد
+              </div>
+              <div
+                className="w-[53%] h-full rounded flex items-center justify-center bg-[#DF1452] text-xs text-white text-center"
+                // style={{ width: "calc(50% - 100px)" }}
+              >
+                {item.type === 1 ? "شرکت در دوره" : "مکان برگزاری"}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MyRegisters;

src/view/my-services/mobile/MyServices.js

@@ -1,6 +1,9 @@
 import { useState } from "react";
 import Calendar2 from "../../../components/Calendar2/Calendar2";
 import FutureExams from "./FutureExams";
+import MyCourse from "./MyCourse";
+import MyOrders from "./MyOrders";
+import MyRegisters from "./MyRegisters";
 import ResultExams from "./ResultExams";
 
 
@@ -31,6 +34,12 @@ const MyServices=()=>{
         seeMoreStatus={seeMoreStatus}
         seeMoreHandler={seeMoreHandler}
       />
+      <MyRegisters
+        seeMoreStatus={seeMoreStatus}
+        seeMoreHandler={seeMoreHandler}
+      />
+      <MyCourse seeMoreStatus={seeMoreStatus} seeMoreHandler={seeMoreHandler} />
+      <MyOrders seeMoreStatus={seeMoreStatus} seeMoreHandler={seeMoreHandler} />
     </div>
   );
 }

src/view/my-services/mobile/ResultExams.js

@@ -71,6 +71,7 @@ const ResultExams = ({ seeMoreStatus, seeMoreHandler }) => {
       <div className="w-full mt-1 flex flex-row-reverse items-center gap-x-2 overflow-x-auto">
         {data?.map((item, index) => (
           <div
+          key={index}
             className="w-[35%] aspect-[1/1.1] rounded shrink-0 p-2 flex flex-col items-center justify-center"
             style={{ backgroundColor: colorList[index % 5].bg }}
           >

src/view/services/index.js

@@ -4,9 +4,9 @@ import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import Product from "../../components/Product";
 import { CgDanger } from "react-icons/cg";
+import { AiOutlinePlus, AiFillDelete } from "react-icons/ai";
 // import ScrollContainer from 'react-indiana-drag-scroll'
 
-
 import img1 from "../../assets/img/Group 1344.svg";
 import img2 from "../../assets/img/Group 1345.svg";
 import img3 from "../../assets/img/Group 1349.svg";
@@ -18,9 +18,7 @@ import ServicePopUp from "./service";
 import Games from "../dashboard2/Games";
 // import Packages from "../dashboard2/Packages";
 
-
+import "./index.css";
-
-import './index.css'
 import separate from "../../utils/separate";
 
 const Services = ({
@@ -35,20 +33,19 @@ const Services = ({
   headerOptions,
   videos,
   pushToCart,
-  pushSchoolToCart
+  pushSchoolToCart,
 }) => {
-
   const [filterCheck, setFilterCheck] = useState([
     {
       id: 1,
-      title: 'حضوری',
+      title: "حضوری",
     },
     {
       id: 2,
-      title: 'آنلاین',
+      title: "آنلاین",
     },
   ]);
-  const [selectedFilters, setSelectedFilters] = useState([])
+  const [selectedFilters, setSelectedFilters] = useState([]);
   const [filter, setFilter] = useState({
     search: "",
     grade: "",
@@ -66,7 +63,7 @@ const Services = ({
     classHour: "",
     classMinute: "",
   });
-  const [sharzhVal, setSharzhVal] = useState('');
+  const [sharzhVal, setSharzhVal] = useState("");
   const [selectedProductTypes, setSelectedProductTypes] = useState([7]);
   // const onChange = (name, value) => {
   //   setFilter({ ...filter, [name]: value });
@@ -119,9 +116,51 @@ const Services = ({
   const [gameId, setGameId] = useState(5);
   const chooseGame = (id) => {
     setGameId(id);
-    console.log(selectedProductTypes)
+    console.log(selectedProductTypes);
   };
-  console.log(gameId)
+  console.log(gameId);
+
+  //-------------------------------------
+  const [fake,setFake]=useState(0);
+  const [paymentList, setPaymentList] = useState([
+    {
+      id: 1,
+      amount: null,
+      status: 4,
+      type: 1,
+    },
+  ]);
+  const changeType=(e,index)=>{
+    let newList = paymentList;
+    newList[index] = { ...newList[index],type:Number(e.target.value)};
+    console.log("g:")
+    console.log(newList[index]);
+    setPaymentList(newList);
+    setFake(fake+1);
+  }
+  const [showPaymentBox, setShowPaymentBox] = useState(false);
+  const addPaymentHandler=()=>{
+    let newList = paymentList;
+    newList.push({
+      id: newList.length+1,
+      amount: null,
+      status: 4,
+      type: 1,
+    });
+    setPaymentList(newList);
+    setFake(fake + 1);
+  }
+  const deletePayment=(index)=>{
+    let newList = [];
+    for(let i=0;i<paymentList.length;i++){
+      if(i !== index){
+        newList.push(paymentList[i]);
+      }
+    }
+    setPaymentList(newList);
+    setFake(fake + 1);
+  }
+  //-==========================================================
   if (!isMobile) {
     return (
       <div
@@ -340,38 +379,16 @@ const Services = ({
                         setPopUpContent({
                           id: gameId,
                           title: product?.name,
-                          video: "",
+                          video: product?.fileId,
-                          teacher: product?.vodTeacher,
+                          teacher: product?.teacherName,
-                          description:
+                          description: product?.description,
-                            "در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می‌گیرد در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت",
                           price: gameId == 2 ? 0 : product?.price,
-                          classHour: 21,
+                          classHour: product?.duration,
-                          classMinute: 56,
+                          classMinute: "",
                           image:
                             "https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg",
-                          examCont: [
+                          examCont: [],
-                            {
+                          type: product?.productType,
-                              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 !== 5) {
                           setPopUp(true);
@@ -401,8 +418,9 @@ const Services = ({
                   )}
                 </div>
               ))}
-            {(!selectedProductTypes.includes(4) &&
+            {!selectedProductTypes.includes(4) &&
-              !selectedProductTypes.includes(7) && gameId !== 6) && (
+              !selectedProductTypes.includes(7) &&
+              gameId !== 6 && (
                 <div className="w-full h-28 flex flex-col items-center justify-center mx-auto rounded">
                   <CgDanger className="text-4xl" />
                   <div className="text-xl mt-4" style={{ direction: "rtl" }}>
@@ -451,6 +469,150 @@ const Services = ({
             <ShoppingCart />
           </div>
         )}
+        {/* --------------payment-box------------------------------------- */}
+        <div className="w-[93.5vw] h-[93.5vh] bg-black fixed top-[6.5%] left-0 backdrop-blur-md bg-[#0000004D] flex items-center justify-center">
+          <div className="w-[80%] h-[80%] bg-white rounded-lg px-8 py-2">
+            <div className="w-full text-right text-2xl text-[#DF1452]">
+              پرداخت و ثبت تراکنش‌ها
+            </div>
+            <div className="payment-container w-full mt-6">
+              {paymentList.map((item, index) => (
+                <div
+                  key={index}
+                  className="w-full mb-2 flex justify-between text-black"
+                >
+                  <select
+                    className="w-[17%] h-10 rounded outline-0 border text-black px-1 py-0"
+                    onChange={(e) => changeType(e, index)}
+                  >
+                    {/* <option value={null}>نوع پرداخت</option> */}
+                    <option value={1}>پرداخت اینترنتی</option>
+                    <option value={2}>کارت به کارت</option>
+                    {/* <option value={3}>پرداخت با چک</option>
+                    <option value={4}>پرداخت نقدی</option> */}
+                  </select>
+                  {/* ------------ */}
+                  <div className="w-[58%]">
+                    <div className="w-full h-10 flex box-border rounded overflow-hidden border">
+                      <div className="w-1/5 bg-[#000] flex items-center justify-center text-white rounded-r">
+                        مبلغ
+                      </div>
+                      <input
+                        type="text"
+                        name="payment-box-amount-input"
+                        id="payment-box-amount-input"
+                        className="w-[70%] h-10 px-1 outline-0 text-center"
+                      />
+                      <div className="w-[10%] h-full flex items-center justify-center text-sm">
+                        تومان
+                      </div>
+                    </div>
+                    {/* - */}
+                    {item.type === 2 && (
+                      <div className="w-full h-10 flex box-border rounded overflow-hidden border mt-2">
+                        <div className="w-1/5 bg-[#000] flex items-center justify-center text-white rounded-r">
+                          شماره کارت
+                        </div>
+                        <input
+                          type="text"
+                          name="payment-box-amount-input"
+                          id="payment-box-amount-input"
+                          className="w-[80%] h-10 px-1 outline-0 text-center"
+                        />
+                      </div>
+                    )}
+                    {/* - */}
+                    {item.type === 2 && (
+                      <div className="w-full h-10 flex items-center justify-between mt-1">
+                        <div className="w-[60%] h-10 flex box-border rounded overflow-hidden border mt-2">
+                          <div className="w-[40%] bg-[#000] flex items-center justify-center text-white rounded-r text-sm">
+                            تاریخ پرداخت
+                          </div>
+                          <div className="w-[60%] h-full flex items-center justify-between p-1">
+                            <input
+                              type="text"
+                              className="w-[29%] h-full rounded border text-center text-sm"
+                            />
+                            <div className="h-full w-[5%] flex items-center justify-center">
+                              /
+                            </div>
+                            <input
+                              type="text"
+                              className="w-[29%] h-full rounded border text-center text-sm"
+                            />
+                            <div className="h-full w-[5%] flex items-center justify-center">
+                              /
+                            </div>
+                            <input
+                              type="text"
+                              className="w-[29%] h-full rounded border text-center text-sm"
+                            />
+                          </div>
+                        </div>
+                        {/* ---- */}
+                        <div className="w-[39%] h-10 flex box-border rounded overflow-hidden border mt-2">
+                          <div className="w-[40%] bg-[#000] flex items-center justify-center text-white rounded-r text-sm">
+                            ساعت پرداخت
+                          </div>
+                          <div className="w-[60%] h-full flex justify-between items-center p-1">
+                            <input
+                              type="text"
+                              className="w-[45%] h-full rounded border text-center text-sm"
+                            />
+                            <div className="h-full w-[5%] flex items-center justify-center">
+                              :
+                            </div>
+                            <input
+                              type="text"
+                              className="w-[45%] h-full rounded border text-center text-sm"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                    {/* - */}
+                    {item.type === 2 && (
+                      <div className="w-full h-10 flex box-border rounded overflow-hidden border mt-2">
+                        <div className="w-1/5 bg-[#000] flex items-center justify-center text-white rounded-r">
+                          شماره پیگیری
+                        </div>
+                        <input
+                          type="text"
+                          name="payment-box-amount-input"
+                          id="payment-box-amount-input"
+                          className="w-[80%] h-10 px-1 outline-0 text-center"
+                        />
+                      </div>
+                    )}
+                  </div>
+                  {/* ------------------ */}
+                  <div className="w-[17%] h-10">
+                    {item.type === 1 && (
+                      <div className="w-full h-full rounded bg-[#DF1452] flex items-center justify-center text-white cursor-pointer">
+                        پرداخت
+                      </div>
+                    )}
+                    {item.type === 2 && (
+                      <div className="w-full h-full rounded bg-[#DF1452] flex items-center justify-center text-white cursor-pointer">
+                        ثبت پرداخت
+                      </div>
+                    )}
+                  </div>
+                  {/* ------------------ */}
+                  <div className="w-[4%] h-10 rounded flex items-center justify-center cursor-pointer bg-red-600 text-white" style={index===0 ?{pointerEvents:"none",filter:"grayscale(100%)"}:null} onClick={()=>deletePayment(index)}>
+                    <AiFillDelete className="text-xl text-white"/>
+                  </div>
+                </div>
+              ))}
+            </div>
+            {/* <div
+              className="w-10 h-10 rounded-full mt-4 border mx-auto border-[#DF1452] cursor-pointer flex items-center justify-center"
+              onClick={addPaymentHandler}
+            >
+              <AiOutlinePlus className="text-2xl text-[#DF1452]" />
+            </div> */}
+          </div>
+        </div>
       </div>
     );
   }
@@ -576,10 +738,7 @@ const Services = ({
           {books
             ?.filter((itm) => selectedProductTypes.includes(itm.productType))
             .map((product, index) => (
-              <div
+              <div className="bg-black" key={`PRODUCT__${gameId}__${index}`}>
-                className="bg-black"
-                key={`PRODUCT__${gameId}__${index}`}
-              >
                 {selectedProductTypes.includes(4) && (
                   <Product
                     key={index}
@@ -700,7 +859,6 @@ const Services = ({
       </div>
     );
   }
-
 };
 
 const mapStateToProps = (state) => ({

src/view/services/service/index.js

@@ -1,80 +1,165 @@
 import React from "react";
 import Button from "../../../components/Button";
-import Checkbox from '../../../components/Checkbox';
+import Checkbox from "../../../components/Checkbox";
 import separate from "../../../utils/separate";
 const servicePopUp = ({
   content,
   closeOnClick,
   addToCartFunction,
-    sendPrice
+  sendPrice,
 }) => {
   return (
-        <div className="flex justify-center w-full items-center fixed text-right z-30 backdrop-blur" style={{ background: 'rgba(0,0,0,0.1)', height: 'calc(100vh - 6.5vh)', top: '8.5vh' }}>
+    <div
+      className="flex justify-center w-full items-center fixed text-right z-30 backdrop-blur"
+      style={{
+        background: "rgba(0,0,0,0.1)",
+        height: "calc(100vh - 6.5vh)",
+        top: "8.5vh",
+      }}
+    >
       <div className="bg-white flex flex-col w-1/2 rounded-2xl py-6 px-10">
         <div className="w-full">
-                    <div className="w-8 h-8 text-white text-sm rounded-full cursor-pointer flex justify-center items-center bg-red52" onClick={closeOnClick}>
+          <div
-                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 15.044 15.044">
+            className="w-8 h-8 text-white text-sm rounded-full cursor-pointer flex justify-center items-center bg-red52 mb-2"
-                            <g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)">
+            onClick={closeOnClick}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="12"
+              height="12"
+              viewBox="0 0 15.044 15.044"
+            >
+              <g
+                id="vuesax_linear_card-remove"
+                data-name="vuesax/linear/card-remove"
+                transform="translate(-252.46 -511.461)"
+              >
                 <g id="card-remove" transform="translate(253.309 512.31)">
-                                    <path id="Vector" d="M0,13.347,13.347,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
+                  <path
-                                    <path id="Vector-2" data-name="Vector" d="M13.347,13.347,0,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
+                    id="Vector"
+                    d="M0,13.347,13.347,0"
+                    fill="none"
+                    stroke="#fff"
+                    strokeLinecap="round"
+                    strokeWidth="2"
+                  />
+                  <path
+                    id="Vector-2"
+                    data-name="Vector"
+                    d="M13.347,13.347,0,0"
+                    fill="none"
+                    stroke="#fff"
+                    strokeLinecap="round"
+                    strokeWidth="2"
+                  />
                 </g>
               </g>
             </svg>
           </div>
         </div>
-                <div className={`flex justify-${content.id === 3 ? 'center' : 'between'} mb-20`} style={{direction: content.id === 1 ? 'rtl' : 'ltr'}} >
+        <div
-                        { content.id !== 2 && <div className={`${content.id === 4 ? 'w-1/2' : content.id === 1 ? 'w-2/3' : 'w-full'} my-4 mx-2 p-2`}>
+          className={`flex justify-${
+            content.id === 3 ? "center" : "between"
+          } mb-20`}
+          style={{ direction: content.id === 1 ? "rtl" : "ltr" }}
+        >
+          {content.id !== 2 && (
+            <div
+              className={`${
+                content.id === 4
+                  ? "w-1/2"
+                  : content.id === 1
+                  ? "w-2/3"
+                  : "w-full"
+              } my-4 mx-2 p-2`}
+            >
               <h1 className="text-red25 font-black text-md">
+                {content.id === 4
+                  ? "کلاس آنلاین  "
+                  : content.id === 1
+                  ? "کتاب "
+                  : null}
 
-                            {content.id === 4 ? 'کلاس آنلاین  ' : content.id === 1 ? 'کتاب ' : null}
+                {content.title}
-                            
+              </h1>
-                            {content.title}</h1>
+              <p className="text-red26 text-sm my-2">{content.description}</p>
-                        <p className="text-red26 text-sm my-2">
+              <div
-                            {content.description}
+                className="w-full flex flex-col"
-                        </p>
+                style={{ direction: "rtl" }}
-                        <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-40 px-4 py-2  ml-2 text-red52">
-                                <div className="bg-gray-100 rounded w-full px-4 py-2 ml-2 text-red26">{content.title}</div>
+                    نام کلاس
+                  </div>
+                  <div className="bg-gray-100 rounded w-full px-4 py-2 ml-2 text-red26">
+                    {content.title}
+                  </div>
                 </div>
                 <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-40 px-4 py-2  ml-2 text-red52">
-                                <div className="bg-gray-100 rounded w-full px-4 py-2 ml-2 text-red26">{content.teacher}</div>
+                    {" "}
+                    استاد{" "}
+                  </div>
+                  <div className="bg-gray-100 rounded w-full px-4 py-2 ml-2 text-red26">
+                    {content.teacher}
+                  </div>
                 </div>
                 <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-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.classHour} ساعت و {content.classMinute} دقیقه
+                    {content.classHour} ساعت
                   </div>
                 </div>
-
-
               </div>
-
+            </div>
-                    </div>}
+          )}
-                    {
+          {content.id === 2 && (
-                        content.id === 2 && 
             <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 pr-10 text-blueE3 text-xl font-bold">آزمون {content.title}</h1>
+              <h1 className="px-2 py-6 border-b border-red82OP bg-blueFF rounded-t-xl pr-10 text-blueE3 text-xl font-bold">
-                            <div className="flex w-full border-b border-red82OP text-red26 text-sm font-bold" style={{direction : 'rtl'}}>
+                آزمون {content.title}
-                                    <div className="w-1/4 flex justify-center py-4 border-l border-red82OP">نوع آزمون : آنلاین</div>
+              </h1>
-                                    <div className="w-1/4 flex justify-center py-4 border-l border-red82OP">تاریخ شروع : 1400/12/03</div>
+              <div
-                                    <div className="w-1/4 flex justify-center py-4 border-l border-red82OP">تعداد آزمون : ۱۸</div>
+                className="flex w-full border-b border-red82OP text-red26 text-sm font-bold"
-                                    <div className="w-1/4 flex items-center justify-center py-4 ">  بودجه بندی آزمون </div>
+                style={{ direction: "rtl" }}
-                                </div>
+              >
-                                <div className="flex w-full border-b border-red82OP text-red26 text-xs py-3 px-6 " style={{direction : 'rtl'}}>
+                <div className="w-1/4 flex justify-center py-4 border-l border-red82OP">
-                                    <span className="text-red52 ml-1 font-bold">
+                  نوع آزمون : آنلاین
-                                توجه:
+                </div>
-                                </span>
+                <div className="w-1/4 flex justify-center py-4 border-l border-red82OP">
-                                 به صورت معمول تمامی آزمون ها برای شما خریداری خواهند شد مگر اینکه شما به صورت دلخواه یک یا چند آزمون را انتخاب نمایید
+                  تاریخ شروع : 1400/12/03
-                                    </div>
+                </div>
-                                {
+                <div className="w-1/4 flex justify-center py-4 border-l border-red82OP">
-                                    content.examCont?.map(
+                  تعداد آزمون : ۱۸
-                                        (item, index) => (
+                </div>
-                                            <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="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 name={`examPackage_${item.id}_${index}`} onclick={(e) => e.target.checked ? sendPrice(item.price) : sendPrice(-item.price)}/>
+                    <Checkbox
+                      name={`examPackage_${item.id}_${index}`}
+                      onclick={(e) =>
+                        e.target.checked
+                          ? sendPrice(item.price)
+                          : sendPrice(-item.price)
+                      }
+                    />
                     <p>{item.title}</p>
                   </div>
                   <p>تاریخ : {item.date}</p>
@@ -83,31 +168,42 @@ const servicePopUp = ({
                   <p>تعداد سوالات: {item.numberOfQ}</p>
                   <p>{separate(item.price)} تومان</p>
                 </div>
-                                        )
+              ))}
-                                    )
-                                }
             </div>
-                    }
+          )}
 
-                   {content.id === 3 && <video className="w-1/2 rounded-md" controls>
+          {(content.id === 3
+             && (
+              <video className="w-1/2 rounded-md" controls>
                 <source
-                            src={`https://dnvn.ir/api/v1/file/20540`}
+                  src={`https://new.andishmand.ir/api/v1/file/${content?.video}`}
                   type="video/mp4"
                 />
-                    </video>}
+              </video>
+            ))}
 
-                    {
+          {content.id === 1 && (
-                        content.id === 1 && <img src={content.image} className="w-1/3 rounded-md mt-4" alt="Content"/>
+            <img
-                    }
+              src={content.image}
-                </div>
+              className="w-1/3 rounded-md mt-4"
-                <div className="flex w-full items-center justify-start mb-8" style={{direction: 'ltr'}}>
+              alt="Content"
-                    <Button title='افزودن به سبد خرید' onClick={addToCartFunction} className="w-40"/>
+            />
+          )}
+        </div>
+        {/* <div
+          className="flex w-full items-center justify-start mb-8"
+          style={{ direction: "ltr" }}
+        >
+          <Button
+            title="افزودن به سبد خرید"
+            onClick={addToCartFunction}
+            className="w-40"
+          />
 
           <h1 className="text-xl font-bold text-red52 p-2 mt-3">
             مبلغ کل : {separate(content.price)} تومان
           </h1>
-                    
+        </div> */}
-                </div>
       </div>
     </div>
   );