fixes

2024-09-26 13:13:32 +03:00 · 2024-09-26 13:13:32 +03:00 · 7fc7258a24
commit 7fc7258a24
parent 9b3c1fb49b
14 changed files with 122 additions and 136 deletions
--- a/src/Components/ValidationField/View/Default.tsx
+++ b/src/Components/ValidationField/View/Default.tsx
@ -37,6 +37,7 @@ const Default = ({
          name={name}
          id={name}
          disabled={isDisabled}
+          value={formik?.values?.[name]}
          size="large"
          {...(type === "number" && { min: 0 })}
          {...props}
--- a/src/Pages/ReSeller/Sales/Model/AddModel.tsx
+++ b/src/Pages/ReSeller/Sales/Model/AddModel.tsx
@ -5,54 +5,33 @@ import { QueryStatusEnum } from "../../../../enums/QueryStatus";
 import ValidationModelForm from "./ValidationModelForm";
 import SalesModelForm from "./SalesModelForm";
 import SubmitModelForm from "./SubmitModelForm";
-
-import { useAddSales } from "../../../../api/sales";
 import LayoutModel from "./LayoutModel";
 import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
+import { salesModelEnum } from "../../../../enums/salesForms";

 const AddModel: React.FC = () => {
-  // const { mutate, status } = useAddSales();
-
-  const handleSubmit = (values: any) => {
-    // mutate({
-    //   ...values,
-    // });
-  };
-  enum modal {
-    Number= 0,
-    Package= 1,
-    Sure= 2
-  } 

+  const { objectToEdit } = useObjectToEdit();
+  const handleSubmit = () => {};
  const Forms = {
-    [modal.Number]:  <ValidationModelForm /> ,
-    [modal.Package] : <SalesModelForm /> ,
-    [modal.Sure]:  <SubmitModelForm /> 
+    [salesModelEnum.Number]:  <ValidationModelForm /> ,
+    [salesModelEnum.Package] : <SalesModelForm /> ,
+    [salesModelEnum.Submit]:  <SubmitModelForm /> 
  }
-  // const modelTitle = Forms.[modal.Number] ? "sale" : Forms.Package ? "adcs" : "Ascas";  
-  const { objectToEdit,setObjectToEdit } = useObjectToEdit();
  console.log(objectToEdit);

-  
  return (
    <>
      <LayoutModel
        status={objectToEdit?.status as QueryStatusEnum}
        ModelEnum={ModalEnum.Sales_ADD}
-        modelTitle={"modelTitle"}
        handleSubmit={handleSubmit}
-        getInitialValues={getInitialValues({})}
+        getInitialValues={getInitialValues(objectToEdit)}
        getValidationSchema={getValidationSchema}
-        initialButtonName={false}
-        buttonTitle="search"
      >
-        {/* {Forms["Number"]} */}
-        <>
-          <ValidationModelForm/>
-          <SalesModelForm/>
-          <SubmitModelForm/>
-        </>
-
+        {Forms[salesModelEnum.Number]}
+        {Forms[salesModelEnum.Package]}
+        {Forms[salesModelEnum.Submit]}
      </LayoutModel>
    </>
  );
--- a/src/Pages/ReSeller/Sales/Model/FilterForm.tsx
+++ b/src/Pages/ReSeller/Sales/Model/FilterForm.tsx
@ -1,4 +1,3 @@
-import React from "react";
 import ValidationField from "../../../../Components/ValidationField/ValidationField";
 import { Col, Row } from "reactstrap";

--- a/src/Pages/ReSeller/Sales/Model/LayoutModel.tsx
+++ b/src/Pages/ReSeller/Sales/Model/LayoutModel.tsx
@ -6,12 +6,12 @@ import { useTranslation } from "react-i18next";
 import { QueryStatusEnum } from "../../../../enums/QueryStatus";
 import SpinContainer from "../../../../Components/Layout/SpinContainer";
 import { MdCancel } from "react-icons/md";
-import { Form, Formik } from "formik";
+import { Form, Formik, useFormikContext } from "formik";

 interface LayoutModalProps {
  isAddModal?: boolean;
-  modelTitle: string;
  handleSubmit: (values: any) => void;
+  handleReset?: (values: any) => void;
  getInitialValues: any;
  getValidationSchema: any;
  children: React.ReactNode;
@ -20,42 +20,41 @@ interface LayoutModalProps {
  ModelClassName?: string;
  width?: string;
  isLoading?: boolean;
-  buttonTitle?:string;
-  initialButtonName?:boolean
 }

 const LayoutModel = ({
  isAddModal = true,
  children,
  handleSubmit = () => {},
+  handleReset = () => {},
  getInitialValues,
  getValidationSchema,
  status,
-  modelTitle,
  ModelEnum,
  ModelClassName,
  width = "800px",
  isLoading = false,
-  buttonTitle,
-  initialButtonName = true,
 }: LayoutModalProps) => {
  const { isOpen, setIsOpen } = useModalState((state) => state);
  const { setObjectToEdit } = useObjectToEdit();
+  const formik = useFormikContext();
  useEffect(() => {
    if (isAddModal && status === QueryStatusEnum.SUCCESS) {
      setIsOpen("isSuccess");
      setObjectToEdit({});
+      formik.resetForm();
      return;
    }
    if (status === QueryStatusEnum.SUCCESS) {
      setIsOpen("");
-      setObjectToEdit({});
    }
+
  }, [setIsOpen, status]);

  const handleCancel = () => {
    setIsOpen("");
    setObjectToEdit({});
+    formik.resetForm();
  };

  const [t] = useTranslation();
@ -75,6 +74,7 @@ const LayoutModel = ({
      initialValues={getInitialValues}
      validationSchema={getValidationSchema}
      onSubmit={handleSubmit}
+      onReset={handleReset}
    >
      {(formik) => {
        useEffect(() => {
--- a/src/Pages/ReSeller/Sales/Model/SalesModelForm.tsx
+++ b/src/Pages/ReSeller/Sales/Model/SalesModelForm.tsx
@ -1,6 +1,4 @@
-import { Col, Row } from "reactstrap";
 import ValidationField from "../../../../Components/ValidationField/ValidationField";
-import useFormatDataToSelect from "../../../../utils/useFormatDataToSelect";
 import { useFormikContext } from "formik";
 import { useModalState } from "../../../../zustand/Modal";
 import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
@ -11,21 +9,22 @@ import { MdCancel } from "react-icons/md";

 const Form = () => {
  
-  const {values,setFieldValue} = useFormikContext<any>()
-  console.log(values?.currentModalIndex);
-  const { isOpen, setIsOpen } = useModalState((state) => state);
  const { objectToEdit,setObjectToEdit } = useObjectToEdit();
+  const { setIsOpen } = useModalState((state) => state);
  const {t} = useTranslation();
+
  const formik = useFormikContext();
+  const { values, setFieldValue } = useFormikContext<any>()
+
  const handleNext = ()=>{
    setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 )
  }
+
  const handleCancel = () => {
    setIsOpen("");
-    setObjectToEdit({});
+    formik.resetForm();
  };

-console.log(objectToEdit);
  const student_info = objectToEdit?.data?.data
  const PackagesInfo = student_info?.packages.map((info:any) => ({
    id: info?.id,
@ -35,15 +34,15 @@ console.log(objectToEdit);

  return (
    values?.currentModalIndex == 1 &&      
-
    <div className="w-100">
-    <header className="modal_title">
-      <span>
-        {t(`models.add_sales`)}{" "}
-      </span>
-      <MdCancel onClick={handleCancel} />
-    </header>
-    <Divider />
+
+      <header className="modal_title">
+        <span>
+          {t(`models.add_sales`)}{" "}
+        </span>
+        <MdCancel onClick={handleCancel} />
+      </header>
+      <Divider />
      <div className="sales_info_modal">
        <div className="info">
          <img src="/Image/faker_user.png" alt="" />
@ -60,7 +59,6 @@ console.log(objectToEdit);
          option={PackagesInfo}
        />
      </div>
-      {/* {values?.currentModalIndex} */}
      <div className="buttons">
        <Button className="back_button pointer" onClick={handleCancel}>
          {t("practical.cancel")}
--- a/src/Pages/ReSeller/Sales/Model/SubmitModelForm.tsx
+++ b/src/Pages/ReSeller/Sales/Model/SubmitModelForm.tsx
@ -8,15 +8,16 @@ import { Button, Divider, Spin } from "antd";
 import { MdCancel } from "react-icons/md";
 import { useAddSales } from "../../../../api/sales";
 import { useEffect } from "react";
+import { toast } from "react-toastify";

 const Form = () => {
  
-  const {values,setFieldValue} = useFormikContext<any>()
-  const { isOpen, setIsOpen } = useModalState((state) => state);
  const { setObjectToEdit,objectToEdit } = useObjectToEdit();
+  const { resetForm, values, setFieldValue } = useFormikContext<any>();
+  const { setIsOpen } = useModalState((state) => state);
  const {t} = useTranslation();

-  const {mutate,isSuccess,status} = useAddSales();
+  const {mutate,status,error}:any = useAddSales();
  const coupon_id_object = objectToEdit?.data?.data?.packages.find((e:any)=>(e.id === values?.package_id))
  const student_info = objectToEdit?.data?.data
  const PackagesInfo = student_info?.packages.map((info:any) => ({
@ -24,7 +25,7 @@ const Form = () => {
    name: info.name + " " + `( ${info?.original_price} )`
  }));

-    
+  
  const handleNext = ()=>{
    mutate({
      package_id:values?.package_id,
@ -33,9 +34,9 @@ const Form = () => {
    });
  }
  const handleCancel = () => {
-    setObjectToEdit({});
+    resetForm();    
    setIsOpen("");
-    setFieldValue( "currentModalIndex" , values?.currentModalIndex - 2 )
+    setFieldValue( "currentModalIndex" , 0 )
  };


@ -44,26 +45,27 @@ const Form = () => {
      setIsOpen("");
      setObjectToEdit({});
      setFieldValue( "currentModalIndex" , values?.currentModalIndex - 2 )
+    }else if(status === QueryStatusEnum.ERROR){
+      toast.error(t(`toast.${error?.response?.data?.message}` || `toast.error_while_trying_please_try_again`)) 
    }
    if(values?.currentModalIndex >= 3){
      setIsOpen("")
      setObjectToEdit({})
-      setFieldValue( "currentModalIndex" , values?.currentModalIndex - 2 )
-
+      setFieldValue( "currentModalIndex" , 0 )
    }
-  }, [isSuccess,values?.currentModalIndex])
+  }, [values?.currentModalIndex,status])
  
  return (
    values?.currentModalIndex == 2 &&      

    <div className="w-100">
-    <header className="modal_title">
-      <span>
-        {t(`models.are_you_sure_about_sale`)}{" "}
-      </span>
-      <MdCancel onClick={handleCancel} />
-    </header>
-    <Divider />
+      <header className="modal_title">
+        <span>
+          {t(`models.are_you_sure_about_sale`)}{" "}
+        </span>
+        <MdCancel onClick={handleCancel} />
+      </header>
+      <Divider />
      <div className="sales_info_modal">
        <div className="info">
          <img src="/Image/faker_user.png" alt="" />
--- a/src/Pages/ReSeller/Sales/Model/ValidationModelForm.tsx
+++ b/src/Pages/ReSeller/Sales/Model/ValidationModelForm.tsx
@ -9,18 +9,20 @@ import { Button, Divider, Spin } from "antd";
 import { MdCancel } from "react-icons/md";
 import { useEffect, useState } from "react";
 import { useGetStudentByPhone } from "../../../../api/sales";
+import { toast } from "react-toastify";

 const Form = () => {

-  const {values,setFieldValue} = useFormikContext<any>()
  const [triggerApi, setTriggerApi] = useState(false)
-  const  phoneNumber : number =  values?.phone_number 
-  const { isOpen, setIsOpen } = useModalState((state) => state);
-  const { objectToEdit,setObjectToEdit } = useObjectToEdit();
+  const { setIsOpen } = useModalState((state) => state);
+  const { setObjectToEdit } = useObjectToEdit();
  const {t} = useTranslation();
-  const formik = useFormikContext();

-  const {data,isError,isSuccess,status} = useGetStudentByPhone({
+  const formik = useFormikContext();
+  const {values,setFieldValue} = useFormikContext<any>()
+  const  phoneNumber : number =  values?.phone_number 
+  
+  const { data,isError,status } = useGetStudentByPhone({
    phone_number:phoneNumber,
  },{
    enabled: triggerApi 
@ -30,22 +32,13 @@ const Form = () => {
    if(values?.phone_number && phoneNumber.toString().length === 10){
      setTriggerApi(true)
    }
-    // if(values?.currentModalIndex == 0 && phoneNumber.toString().length === 10){
-    //   toast.error("phone number not found ")
-    // }
  }
-  // console.log(status);
-  // console.log(isSuccess);
-  // console.log(isError);
-  // console.log(data?.data);
-  // console.log(triggerApi);
-  
    
  const handleCancel = () => {
-    setIsOpen("");
-    setObjectToEdit({});
+      setIsOpen("");
+      formik.resetForm();    
  };
-  
+
  useEffect(() => {
    if(!!data?.data?.phone_number){
      setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 )
@ -55,49 +48,52 @@ const Form = () => {
    else if(!data?.data){
      setTriggerApi(false)
    }
-    
-  }, [data?.data,triggerApi])
+    if(isError){
+      toast.error(t('toast.phone_number_not_found'))
+    }
+  }, [data?.data,triggerApi,isError])
  

  return (
    values?.currentModalIndex == 0 &&      
-
    <div className="w-100">
-    <header className="modal_title">
-      <span>
-        {t(`models.add_sales`)}{" "}
-      </span>
-      <MdCancel onClick={handleCancel} />
-    </header>
-    <Divider />

-    <Row className="w-100">
-      <Col>
-        <ValidationField
-          placeholder="phone_number"
-          label="phone_number"
-          name="phone_number"
-        />
-          <Divider className="margin_auto"/>
-      </Col>
-          <div className="buttons">
-            <Button className="back_button pointer" onClick={handleCancel}>
-              {t("practical.cancel")}
-            </Button>
-            <Button
-              className="add_button"
-              disabled={status === QueryStatusEnum.LOADING || !formik.dirty || !values?.phone_number}
-              onClick={handleNext}
-            >
-              {t(`practical.sale`)}
-              {status === QueryStatusEnum.LOADING && (
-                <span className="Spinier_Div">
-                  <Spin />
-                </span>
-              )}
-            </Button>
-          </div>  
+      <header className="modal_title">
+        <span>
+          {t(`models.add_sales`)}{" "}
+        </span>
+        <MdCancel onClick={handleCancel} />
+      </header>
+      <Divider />
+
+      <Row className="w-100">
+        <Col>
+          <ValidationField
+            placeholder="phone_number"
+            label="phone_number"
+            name="phone_number"
+          />
+            <Divider className="margin_auto"/>
+        </Col>
+            <div className="buttons">
+              <Button className="back_button pointer" onClick={handleCancel}>
+                {t("practical.cancel")}
+              </Button>
+              <Button
+                className="add_button"
+                disabled={status === QueryStatusEnum.LOADING || !formik.dirty || !values?.phone_number}
+                onClick={handleNext}
+              >
+                {t(`practical.sale`)}
+                {status === QueryStatusEnum.LOADING && (
+                  <span className="Spinier_Div">
+                    <Spin />
+                  </span>
+                )}
+              </Button>
+            </div>  
      </Row>
+
    </div>
  );
 };
--- a/src/Pages/ReSeller/Sales/Model/formUtil.ts
+++ b/src/Pages/ReSeller/Sales/Model/formUtil.ts
@ -1,16 +1,16 @@
 import * as Yup from "yup";
-import { formatDate } from "../../../../utils/formatDate";

 // Function to get the initial values
 export const getInitialValues = (objectToEdit: any): any => {
-  
+  console.log(objectToEdit);
+
  return {
    id: objectToEdit?.id ?? null,
    phone_number: objectToEdit?.phone_number ?? null,
    currentModalIndex: 0,
    package_id: objectToEdit?.package_id ?? null,
-    student_id: objectToEdit?.student_id ?? 0,
-    coupon_id: objectToEdit?.coupon_id ?? 1,
+    student_id: objectToEdit?.student_id ?? null,
+    coupon_id: objectToEdit?.coupon_id ?? null,
  };
 };

--- a/src/Pages/ReSeller/Sales/Page.tsx
+++ b/src/Pages/ReSeller/Sales/Page.tsx
@ -11,11 +11,14 @@ const Table = lazy(() => import("./Table"));
 const AddModalForm = lazy(() => import("./Model/AddModel"));

 const TableHeader = () => {
+  
  const [t] = useTranslation();
  useSetPageTitle([
    {name:`${t(`page_header.home`)}`, path:"/"},
    {name:`${t(`page_header.sales`)}`, path:"sales"}
-  ]);  return (
+  ]);  
+
+  return (
    <div className="TableWithHeader">
      <Suspense fallback={<Spin />}>
        <PageHeader
--- a/src/Pages/ReSeller/Sales/Table.tsx
+++ b/src/Pages/ReSeller/Sales/Table.tsx
@ -5,7 +5,9 @@ import useSearchQuery from "../../../api/utils/useSearchQuery";
 import { useFilterState } from "../../../Components/Utils/Filter/FilterState";
 import { useGetAllSales } from "../../../api/sales";
 import { formatDate } from "../../../utils/formatDate";
+
 const App: React.FC = () => {
+  
  const [searchQuery] = useSearchQuery("name");
  const { filterState }:any = useFilterState();
  
--- a/src/Pages/ReSeller/Sales/index.tsx
+++ b/src/Pages/ReSeller/Sales/index.tsx
@ -4,14 +4,10 @@ import Table from "./Table";
 import { FaPlus } from "react-icons/fa";

 import AddModalForm from "./Model/AddModel";
-import EditModalForm from "./Model/EditModel";
-// import DeleteModalForm from "../../";

 export {
  Table,
  useColumns,
  AddModalForm,
-  EditModalForm,
-  // DeleteModalForm,
  FaPlus,
 };
--- a/src/Pages/ReSeller/Sales/useTableColumns.tsx
+++ b/src/Pages/ReSeller/Sales/useTableColumns.tsx
@ -5,7 +5,6 @@ import { useTranslation } from "react-i18next";
 export const useColumns = () => {
  const [t] = useTranslation();

-
  const columns: TableColumnsType<Sales> = [
    {
      title: t("columns.id"),
--- a/src/enums/salesForms.ts
+++ b/src/enums/salesForms.ts
@ -0,0 +1,5 @@
+export enum salesModelEnum {
+    Number= 0,
+    Package= 1,
+    Submit= 2
+  } 
--- a/src/translate/ar.json
+++ b/src/translate/ar.json
@ -1018,6 +1018,12 @@
    "reseller_profit":"نسبة الأرباح (10%)",
    "total_sells":"إجمالي المبيعات"
  },
+  "toast" : {
+    "phone_number_not_found":"رقم الهاتف غير موجود",
+    "error_while_trying_please_try_again":"حدث خطأ أثناء المحاولة، يرجى المحاولة مرة أخرى",
+    "Student Already Have this Package":"الطالب لديه هذه الحزمة بالفعل",
+    "The combination of student_id and package_id already exists.":"مجموعة الطالب والحزمة موجودة بالفعل."
+  },
  "alphabet": {
    "A": "A",
    "B": "B",