Added logic to check invoice status

src/component/PrimaryButton.jsx

@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import './style.css';
 
-export const PrimaryButton = ({ label = 'Label', submitted = false }) => {
+export const PrimaryButton = ({ label = 'Label', disabled = false }) => {
   return (
-    <button disabled={submitted} className='primary-button' type={'submit'}>
+    <button disabled={disabled} className='primary-button' type={'submit'}>
       <div>{label}</div>
     </button>
   );
@@ -13,5 +13,5 @@ export const PrimaryButton = ({ label = 'Label', submitted = false }) => {
 PrimaryButton.propTypes = {
   label: PropTypes.string,
   onClick: PropTypes.func,
-  submitted: PropTypes.bool,
+  disabled: PropTypes.bool,
 };

src/component/Telepay.js

@@ -10,6 +10,7 @@ import { CloseOutlined } from '@mui/icons-material';
 export const Telepay = () => {
   const [error, setError] = useState(null);
   const [success, setSuccess] = useState(null);
+  const [invoiceStatus, setInvoiceStatus] = useState(null);
   const [submitted, setSubmitted] = React.useState(false);
   const [errorSnackbarOpen, setErrorSnackbarOpen] = React.useState(false);
   const [formData, setFormData] = useState({
@@ -44,6 +45,10 @@ export const Telepay = () => {
     });
   };
 
+  const submitButtonText = () => {
+    return success === null ? 'SUBMIT' : 'CHECK STATUS';
+  };
+
   const handleDeleteLineItem = (index) => {
     if (formData.line_items.length <= 1) {
       setError('1 line item is needed');
@@ -69,8 +74,37 @@ export const Telepay = () => {
   const handleSubmit = async (e) => {
     setSubmitted(true);
     e.preventDefault();
-    console.log(formData);
 
+    if (success === null) {
+      await submitInvoice();
+    } else {
+      await checkInvoiceStatus();
+    }
+  };
+
+  const checkInvoiceStatus = async () => {
+    try {
+      const response = await fetch(`https://callback-click2pay.ivrnet.com/callback/invoices/${success.invoice_id}`, {
+        method: 'GET'
+      });
+
+      if (response.ok) {
+        const responseData = await response.json();
+        setInvoiceStatus(responseData);
+      } else {
+        const errorData = await response.json();
+        setError(errorData.error || 'An error occurred');
+        setErrorSnackbarOpen(true);
+      }
+    } catch (error) {
+      setError('An error occurred while making the API request');
+      setErrorSnackbarOpen(true);
+    } finally {
+      setSubmitted(false);
+    }
+  };
+
+  const submitInvoice = async () => {
     try {
       const response = await fetch('https://callback-click2pay.ivrnet.com/callback/post_data/', {
         method: 'POST',
@@ -95,6 +129,7 @@ export const Telepay = () => {
       setSubmitted(false);
     }
   };
+
   return (
     <form onSubmit={handleSubmit}>
       <Snackbar
@@ -245,12 +280,35 @@ export const Telepay = () => {
             </div>
             <a className='add-product-link' onClick={handleAddProduct}>Add another product</a>
           </div>
+
+          {(success || invoiceStatus) && (
+            <div className={'d-flex flex-column w-100 gap-3'}>
               {success && (
-            <div className='alert alert-primary w-100' role='alert'>
-              Access Code: {success.access_code}
+                <React.Fragment>
+                  <div className='alert alert-primary w-100 m-0 p-0' role='alert'>
+                    <div>Access Code: {success.access_code}</div>
+                  </div>
+
+                  <div className='alert alert-primary w-100 m-0 p-0' role='alert'>
+                    <div>Invoice Number: {success.invoice_id}</div>
+                  </div>
+                </React.Fragment>
+              )}
+
+              {invoiceStatus && parseFloat(invoiceStatus.total_amount) === 0 && (
+                <div className='alert alert-primary w-100 m-0 p-0' role='alert'>
+                  <div>Status: Fully Paid</div>
+                </div>
+              )}
+
+              {invoiceStatus && parseFloat(invoiceStatus.total_amount) !== 0 && (
+                <div className='alert alert-primary w-100 m-0 p-0' role='alert'>
+                  <div>Pending Amount: {invoiceStatus.total_amount}</div>
+                </div>
+              )}
             </div>
           )}
-          <PrimaryButton label='SUBMIT' submitted={submitted} />
+          <PrimaryButton label={submitButtonText()} disabled={submitted} />
         </div>
       </div>
     </form>

src/server.js

@@ -25,6 +25,20 @@ app.post('/api/data', async (req, res) => {
   }
 });
 
+app.get('/api/invoices/:id', async (req, res) => {
+  try {
+    const basicAuthHeader = 'Basic ' + btoa('test23:password');
+    const response = await axios.get(`https://central-staging.ivrnet.com/api/v1/invoices/${req.params.id}`, {
+      headers: {
+        'Authorization': basicAuthHeader,
+      },
+    });
+    res.json(response.data);
+  } catch (error) {
+    res.status(500).json({ error: error?.response?.data?.error || 'Internal server error' });
+  }
+});
+
 app.listen(port, () => {
   console.log(`Server is running on port ${port}`);
 });