#55 - изменено отображение и поведение кнопок при подтверждении директором и оплате бухгалтером

front/src/components/Account/Account.js

 import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { apiURL } from "../../config";
-import { fetchApprove, fetchPaid } from "../../store/actions/paymentAction";
+import { fetchApprove, fetchPaid, fetchCancelApprove, fetchCancelPaid } from "../../store/actions/paymentAction";
 import Modal from "../UI/Modal/Modal";
 import icon from "../../assets/images/icon-eye.png"
 import './Account.css';
@@ -32,6 +32,16 @@ const Account = ({ registry, payments }) => {
     setApproved(!approved);
   }
 
+  /////////////////////////
+  const cancelApprove = (id) => {
+    dispatch(fetchCancelApprove(id));
+    setApproved(!approved);
+  };
+  const cancelPay = (id) => {
+    dispatch(fetchCancelPaid(id));
+    setApproved(!approved);
+  }
+
   return (
     <>
       <table className="table">
@@ -77,14 +87,14 @@ const Account = ({ registry, payments }) => {
                 </>}
                 {payment.approved && payment.paided && <span style={{ color: 'green' }}>Оплачен</span>}
               </td>
-
               {registry && user && user.role.includes('approvePayment') && <td>
                 {!payment.approved && <button onClick={() => approve(payment._id)}>Подтвердить</button>}
+                {payment.approved && <button onClick={() => cancelApprove(payment._id)}>Отменить подтверждение</button>}
               </td>}
               {registry && user && user.role.includes('payPayment') && !user.role.includes('approvePayment') && payment.approved && <td>
                 {!payment.paided && <button onClick={() => pay(payment._id)}>Оплатить</button>}
+                {payment.paided && <button onClick={() => cancelPay(payment._id)}>Отменить оплату</button>}
               </td>}
-
             </tr>
           ))}
         </tbody>

front/src/store/actions/paymentAction.js

@@ -12,24 +12,24 @@ export const fetchPaymentsSuccess = (payments) => {
   return { type: FETCH_PAYMENTS_SUCCESS, payments };
 };
 export const fetchPaymentByIdSuccess = (payment) => {
-  return { type: FETCH_PAYMENT_BY_ID_SUCCESS, payment}
+  return { type: FETCH_PAYMENT_BY_ID_SUCCESS, payment }
 }
 export const createPaymentSuccess = (payment) => {
   return { type: FETCH_PAYMENTS_SUCCESS, payment };
 };
 export const fetchTodaysPaymentsSuccess = payments => {
-  return {type: FETCH_TODAYS_PAYMENTS_SUCCESS, payments};
+  return { type: FETCH_TODAYS_PAYMENTS_SUCCESS, payments };
 };
-export const fetchStatusSuccess = (payment)=>{
-  return {type:FETCH_STATUS_SUCCESS,payment}
+export const fetchStatusSuccess = (payment) => {
+  return { type: FETCH_STATUS_SUCCESS, payment }
 };
 
 export const fetchPaid = id => {
   return async dispatch => {
     try {
-      const response = await axiosApi.post('/payments/'+id+'/paid');
+      const response = await axiosApi.post('/payments/' + id + '/paid');
       dispatch(fetchStatusSuccess(response.data));
-    } catch(e) {
+    } catch (e) {
       console.error(e);
     }
   }
@@ -37,9 +37,9 @@ export const fetchPaid = id => {
 export const fetchApprove = id => {
   return async dispatch => {
     try {
-      const response = await axiosApi.post('/payments/'+id+'/approved');
+      const response = await axiosApi.post('/payments/' + id + '/approved');
       dispatch(fetchStatusSuccess(response.data));
-    } catch(e) {
+    } catch (e) {
       console.error(e);
     }
   }
@@ -49,7 +49,7 @@ export const fetchTodaysPayments = () => {
     try {
       const response = await axiosApi.get('/payments/due/today');
       dispatch(fetchTodaysPaymentsSuccess(response.data));
-    } catch(e) {
+    } catch (e) {
       console.error(e);
     }
   }
@@ -109,3 +109,24 @@ export const editPayment = (id, paymentData) => {
     }
   };
 };
+
+export const fetchCancelPaid = id => {
+  return async dispatch => {
+    try {
+      const response = await axiosApi.post('/payments/' + id + '/paid/cancel');
+      dispatch(fetchStatusSuccess(response.data));
+    } catch (e) {
+      console.error(e);
+    }
+  }
+}
+export const fetchCancelApprove = id => {
+  return async dispatch => {
+    try {
+      const response = await axiosApi.post('/payments/' + id + '/approved/cancel');
+      dispatch(fetchStatusSuccess(response.data));
+    } catch (e) {
+      console.error(e);
+    }
+  }
+}
\ No newline at end of file