#81 feature on Reseller Dashboard

src/Hooks/useStepsModalReseller.ts

@@ -0,0 +1,37 @@
+import { useFormikContext } from "formik"
+import { useEffect, useState } from "react"
+import { useObjectToEdit } from "../zustand/ObjectToEditState";
+import { useModalState } from "../zustand/Modal";
+import { useQueryClient } from "react-query";
+
+export const useStepsModalReseller = () =>{
+
+  const { setObjectToEdit } = useObjectToEdit();
+  const formik = useFormikContext<any>();
+  const { setIsOpen } = useModalState((state) => state);
+  const queryClient = useQueryClient();
+  const [biggestModalIndex,setBiggestModalIndex] = useState(0)
+  const currentModalIndex = formik?.values?.currentModalIndex 
+
+
+  useEffect(()=>{
+    const modalIndex = formik?.values?.currentModalIndex
+    modalIndex > biggestModalIndex && setBiggestModalIndex(modalIndex)
+  },[formik?.values?.currentModalIndex])
+
+    const handleCloseModel = () => {
+    formik?.resetForm();
+    setIsOpen("");
+    formik?.setFieldValue("currentModalIndex", 0);
+    setObjectToEdit({});
+    queryClient.resetQueries();
+    setBiggestModalIndex(0)
+  };
+
+
+    const handleClickOnStep = (index:number) =>{
+    if(index > biggestModalIndex)return
+    formik?.setFieldValue("currentModalIndex", index);
+  }
+  return {handleCloseModel , handleClickOnStep , currentModalIndex}
+}

src/Pages/ReSeller/Sales/Model/AddModel.tsx

@@ -19,6 +19,7 @@ const AddModel: React.FC = () => {
         getInitialValues={getInitialValues(objectToEdit)}
         getValidationSchema={getValidationSchema}
         canClearObjectToEdit = {false}
+        width="70%"
       >
         <ModelBody />
       </LayoutModel>

src/Pages/ReSeller/Sales/Model/LayoutModel.tsx

@@ -53,7 +53,6 @@ const LayoutModel = ({
   }, [setIsOpen, status]);
 
   const handleCancel = () => {
-    console.log(true)
     setIsOpen("");
     canClearObjectToEdit && setObjectToEdit({});
     formik.resetForm();
@@ -68,7 +67,7 @@ const LayoutModel = ({
         width={width}
         footer={null}
         open={isOpen === ModelEnum}
-        onCancel={handleCancel}
+        // onCancel={handleCancel}
       >
         <Formik
           enableReinitialize={true}

src/Pages/ReSeller/Sales/Model/ModelBody.tsx

@@ -1,25 +1,11 @@
 import ValidationModelForm from "./ValidationModelForm";
 import SalesModelForm from "./SalesModelForm";
 import SubmitModelForm from "./SubmitModelForm";
-import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
 import { salesModelEnum } from "../../../../enums/salesForms";
-import { useFormikContext } from "formik";
+import { useStepsModalReseller } from "../../../../Hooks/useStepsModalReseller";
-import { useModalState } from "../../../../zustand/Modal";
-import { useQueryClient } from "react-query";
 
 const ModelBody = () => {
-  const { setObjectToEdit } = useObjectToEdit();
+  const { handleCloseModel , handleClickOnStep , currentModalIndex} = useStepsModalReseller()
-  const formik = useFormikContext<any>();
-  const { setIsOpen } = useModalState((state) => state);
-  const queryClient = useQueryClient();
-
-  const handleCloseModel = () => {
-    formik?.resetForm();
-    setIsOpen("");
-    formik?.setFieldValue("currentModalIndex", 0);
-    setObjectToEdit({});
-    queryClient.resetQueries();
-  };
 
   const Forms = {
     [salesModelEnum.Number]: (
@@ -38,6 +24,9 @@ const ModelBody = () => {
       {Forms[salesModelEnum.Number]}
       {Forms[salesModelEnum.Package]}
       {Forms[salesModelEnum.Submit]}
+      <div className="circle_parent">
+        {[...Array(3)].map((_:null,index:number) =><div onClick={() => handleClickOnStep(index)} className={`circle ${currentModalIndex == index  ? "active_circle" :""}`}>{index + 1}</div>)}
+      </div>
     </>
   );
 };

src/Pages/ReSeller/Sales/Model/SalesModelForm.tsx

@@ -6,6 +6,7 @@ import { QueryStatusEnum } from "../../../../enums/QueryStatus";
 import { Button, Divider, Spin } from "antd";
 import { MdCancel } from "react-icons/md";
 import { ModalBodyProps } from "../../../../types/Sales";
+import { onEnterDown } from "../../../../utils/onKeyDown";
 
 const Form = ({ handleCloseModel = () => {} }: ModalBodyProps) => {
   const { objectToEdit } = useObjectToEdit();
@@ -29,7 +30,10 @@ const Form = ({ handleCloseModel = () => {} }: ModalBodyProps) => {
       </div>
       )
   }));
-
+  const isDisabled = status === QueryStatusEnum.LOADING || !formik.dirty || !values?.phone_number
+  const handleKeyDown = (e:any) =>{
+    onEnterDown(e,handleNext,isDisabled)
+  }
   return (
     values?.currentModalIndex == 1 && (
       <div className="w-100">
@@ -41,7 +45,8 @@ const Form = ({ handleCloseModel = () => {} }: ModalBodyProps) => {
         <Divider />
 
         <div className="sales_info_modal">
-          <div className="info">
+
+          <div className="info between">
             {/* <img src="/Image/faker_user.png" alt="" /> */}
             <span className="mr-20">
               <h5>
@@ -51,13 +56,23 @@ const Form = ({ handleCloseModel = () => {} }: ModalBodyProps) => {
                 {t("models.course")}: <p> {student_info?.grade_name}</p>
               </h5>
             </span>
+            <span className="ml-20" 
+            style={{marginLeft:"20px"}}
+            >
+              <h5>
+                {t("models.mobile_number")}: <p> {student_info?.phone_number}</p>
+              </h5>
+            </span>
           </div>
+
           <ValidationField
             placeholder="choose"
             label="package"
             name="package_id"
             type="Select"
+            className="package"
             option={PackagesInfo}
+            onKeyDown={handleKeyDown}
           />
         </div>
 
@@ -67,11 +82,7 @@ const Form = ({ handleCloseModel = () => {} }: ModalBodyProps) => {
           </Button>
           <Button
             className="add_button"
-            disabled={
+            disabled={isDisabled}
-              status === QueryStatusEnum.LOADING ||
-              !formik.dirty ||
-              !values?.package_id
-            }
             onClick={handleNext}
           >
             {t(`practical.sale`)}

src/Pages/ReSeller/Sales/Model/SubmitModelForm.tsx

@@ -11,6 +11,8 @@ import { useEffect } from "react";
 import { toast } from "react-toastify";
 import { ModalBodyProps } from "../../../../types/Sales";
 import { useQueryClient } from "react-query";
+import { onEnterDown } from "../../../../utils/onKeyDown";
+import { ModalEnum } from "../../../../enums/Model";
 
 const Form = ({ handleCloseModel = () => {} }: ModalBodyProps) => {
   const { setObjectToEdit, objectToEdit } = useObjectToEdit();
@@ -45,11 +47,7 @@ const Form = ({ handleCloseModel = () => {} }: ModalBodyProps) => {
   };
   useEffect(() => {
     if (status === QueryStatusEnum.SUCCESS) {
-      setIsOpen("");
-      setObjectToEdit({});
-      setFieldValue("currentModalIndex", values?.currentModalIndex - 2);
       reset();
-      formik?.resetForm();
     } else if (status === QueryStatusEnum.ERROR) {
       toast.error(
         t(
@@ -59,6 +57,10 @@ const Form = ({ handleCloseModel = () => {} }: ModalBodyProps) => {
       );
     }
 
+
+  }, [ status]);
+
+  useEffect(() =>{
     if (values?.currentModalIndex >= 3) {
       setIsOpen("");
       setObjectToEdit({});
@@ -66,7 +68,17 @@ const Form = ({ handleCloseModel = () => {} }: ModalBodyProps) => {
       queryClient.resetQueries();
       reset();
     }
-  }, [values?.currentModalIndex, status]);
+  })
+const isDisabled = status === QueryStatusEnum.LOADING
+
+  const handleKeyDown = (e:any) =>{
+    onEnterDown(e,handleNext,isDisabled)
+  }
+  
+  const handleAddAnotherPurchase = () =>{
+    handleCloseModel("")
+    setIsOpen(ModalEnum.Sales_ADD)
+  }
 
   return (
     values?.currentModalIndex == 2 && (
@@ -77,17 +89,33 @@ const Form = ({ handleCloseModel = () => {} }: ModalBodyProps) => {
         </header>
 
         <Divider />
-
+        <div className="buttons">
+            <Button
+            className="add_button"
+            // disabled={isDisabled}
+            onClick={handleAddAnotherPurchase}
+          >
+            {t(`practical.add_new`)}
+          </Button>
+          </div>
         <div className="sales_info_modal">
-          <div className="info">
+          <div className="info between">
             {/* <img src="/Image/faker_user.png" alt="" /> */}
-            <span>
+            <span className="mr"
+            style={{marginRight:"20px"}}>
               <h5>
                 {student_info?.first_name + " " + student_info?.last_name}
               </h5>
               <h5>
                 {t("models.course")}: <p> {student_info?.grade_name}</p>
               </h5>
+            </span>
+                        <span className="ml-20" 
+            style={{marginLeft:"20px"}}
+            >
+              <h5>
+                {t("models.mobile_number")}: <p> {student_info?.phone_number}</p>
+              </h5>
             </span>
           </div>
           <ValidationField
@@ -98,26 +126,29 @@ const Form = ({ handleCloseModel = () => {} }: ModalBodyProps) => {
             option={PackagesInfo}
             disabled
             allowClear={false}
+            onKeyDown={handleKeyDown}
           />
         </div>
 
-        <div className="buttons">
+
+      <div className="buttons">
           <Button className="back_button pointer" onClick={handleCloseModel}>
             {t("practical.cancel")}
           </Button>
           <Button
             className="add_button"
-            disabled={status === QueryStatusEnum.LOADING}
+            disabled={isDisabled}
             onClick={handleNext}
           >
             {t(`practical.yes`)}
-            {status === QueryStatusEnum.LOADING && (
+            {isDisabled && (
               <span className="Spinier_Div">
                 <Spin />
               </span>
             )}
           </Button>
         </div>
+
       </div>
     )
   );

src/Pages/ReSeller/Sales/Model/ValidationModelForm.tsx

@@ -9,6 +9,7 @@ import { MdCancel } from "react-icons/md";
 import { useEffect, useState } from "react";
 import { useGetStudentByPhone } from "../../../../api/sales";
 import { ModalBodyProps } from "../../../../types/Sales";
+import { onEnterDown } from "../../../../utils/onKeyDown";
 
 const Form = ({ handleCloseModel = () => {} }: ModalBodyProps) => {
   const [triggerApi, setTriggerApi] = useState(false);
@@ -44,6 +45,13 @@ const Form = ({ handleCloseModel = () => {} }: ModalBodyProps) => {
     }
   }, [isSuccess,isError,status]);
 
+  const isDisabled = status === QueryStatusEnum.LOADING ||
+                !formik.dirty ||
+                !values?.phone_number
+            
+  const handleKeyDown = (e:any) =>{
+    onEnterDown(e,handleNext,isDisabled)
+  }
   return (
     values?.currentModalIndex == 0 && (
       <div className="w-100">
@@ -60,6 +68,7 @@ const Form = ({ handleCloseModel = () => {} }: ModalBodyProps) => {
               placeholder="phone_number"
               label="phone_number"
               name="phone_number"
+              onKeyDown={handleKeyDown}
             />
             <Divider className="margin_auto" />
           </Col>
@@ -70,12 +79,9 @@ const Form = ({ handleCloseModel = () => {} }: ModalBodyProps) => {
             </Button>
             <Button
               className="add_button"
-              disabled={
+              disabled={isDisabled}
-                status === QueryStatusEnum.LOADING ||
+              onClick={handleNext} // eee
-                !formik.dirty ||
+              
-                !values?.phone_number
-              }
-              onClick={handleNext}
             >
               {t(`practical.sale`)}
               {status === QueryStatusEnum.LOADING && (

src/Styles/Antd/Input.scss

@@ -0,0 +1,3 @@
+.ant-select.package .ant-select-selector .ant-select-selection-item div{
+    color: red !important;
+}

src/Styles/Antd/Model.scss

@@ -49,6 +49,7 @@
 
   main {
     .buttons {
+      // background-color: rebeccapurple;
       padding-inline: 0 10px;
       display: flex;
       gap: 10px;
@@ -60,7 +61,7 @@
         position: relative;
         outline: none;
         border: none;
-        width: 120px;
+        min-width: 120px;
         border-radius: 7px;
         padding: 7px;
         font-weight: bold;
@@ -78,6 +79,10 @@
         }
       }
     }
+    .between{
+      display: flex;
+      justify-content: space-between;
+    }
   }
 
   label {

src/Styles/Antd/index.scss

@@ -4,3 +4,4 @@
 @import "./Model.scss";
 @import "./Segmented.scss";
 @import "./Mix.scss";
+@import "./Input.scss";

src/Styles/App/classNames.scss

@@ -332,3 +332,26 @@ button:disabled {
   color:rgba(0, 128, 0, 0.499);
   }
 }
+
+.circle{
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: var(--primary);
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: .5;
+  transition: .5;
+  cursor: pointer;
+  &.active_circle{
+  opacity: 1;
+}
+}
+.circle_parent{
+  display: flex;
+  column-gap: 10px;
+  margin: auto;
+  padding-top: 20px;
+}

src/translate/ar.json

@@ -292,6 +292,7 @@
     "overview": "نظرة عامة",
     "presence": "الحضور",
     "add_new_role": "اضافة صلاحية جديدة",
+    "add_new":"اضافة جديدة",
     "yes": "نعم",
     "no": "لا",
     "Are you sure you want to go back and not save any changes?": "هل أنت متأكد أنك تريد العودة وعدم حفظ أي تغييرات؟",
@@ -370,6 +371,7 @@
     "earlyDeparture": "الأذن",
     "unit": "الوحدة",
     "lesson": "الدرس",
+    "mobile_number":"رقم الموبايل",
     "branch": "الفرع",
     "cycle": "السنة دراسية",
     "term": "الفصل",

src/utils/onKeyDown.ts

@@ -0,0 +1,6 @@
+export function onEnterDown(event:any,Fn:()=>void,dontRun:boolean=false) {
+    if(dontRun)return;
+    if(event.code === "Enter"){
+        Fn();
+    }
+}