Commit bd6f9d5b authored by Bilal's avatar Bilal

Added logic to check invoice status

parent 7192500a
...@@ -2,9 +2,9 @@ import PropTypes from 'prop-types'; ...@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import './style.css'; import './style.css';
export const PrimaryButton = ({ label = 'Label', submitted = false }) => { export const PrimaryButton = ({ label = 'Label', disabled = false }) => {
return ( return (
<button disabled={submitted} className='primary-button' type={'submit'}> <button disabled={disabled} className='primary-button' type={'submit'}>
<div>{label}</div> <div>{label}</div>
</button> </button>
); );
...@@ -13,5 +13,5 @@ export const PrimaryButton = ({ label = 'Label', submitted = false }) => { ...@@ -13,5 +13,5 @@ export const PrimaryButton = ({ label = 'Label', submitted = false }) => {
PrimaryButton.propTypes = { PrimaryButton.propTypes = {
label: PropTypes.string, label: PropTypes.string,
onClick: PropTypes.func, onClick: PropTypes.func,
submitted: PropTypes.bool, disabled: PropTypes.bool,
}; };
...@@ -10,6 +10,7 @@ import { CloseOutlined } from '@mui/icons-material'; ...@@ -10,6 +10,7 @@ import { CloseOutlined } from '@mui/icons-material';
export const Telepay = () => { export const Telepay = () => {
const [error, setError] = useState(null); const [error, setError] = useState(null);
const [success, setSuccess] = useState(null); const [success, setSuccess] = useState(null);
const [invoiceStatus, setInvoiceStatus] = useState(null);
const [submitted, setSubmitted] = React.useState(false); const [submitted, setSubmitted] = React.useState(false);
const [errorSnackbarOpen, setErrorSnackbarOpen] = React.useState(false); const [errorSnackbarOpen, setErrorSnackbarOpen] = React.useState(false);
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
...@@ -44,6 +45,10 @@ export const Telepay = () => { ...@@ -44,6 +45,10 @@ export const Telepay = () => {
}); });
}; };
const submitButtonText = () => {
return success === null ? 'SUBMIT' : 'CHECK STATUS';
};
const handleDeleteLineItem = (index) => { const handleDeleteLineItem = (index) => {
if (formData.line_items.length <= 1) { if (formData.line_items.length <= 1) {
setError('1 line item is needed'); setError('1 line item is needed');
...@@ -69,8 +74,37 @@ export const Telepay = () => { ...@@ -69,8 +74,37 @@ export const Telepay = () => {
const handleSubmit = async (e) => { const handleSubmit = async (e) => {
setSubmitted(true); setSubmitted(true);
e.preventDefault(); 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 { try {
const response = await fetch('https://callback-click2pay.ivrnet.com/callback/post_data/', { const response = await fetch('https://callback-click2pay.ivrnet.com/callback/post_data/', {
method: 'POST', method: 'POST',
...@@ -95,6 +129,7 @@ export const Telepay = () => { ...@@ -95,6 +129,7 @@ export const Telepay = () => {
setSubmitted(false); setSubmitted(false);
} }
}; };
return ( return (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<Snackbar <Snackbar
...@@ -245,12 +280,35 @@ export const Telepay = () => { ...@@ -245,12 +280,35 @@ export const Telepay = () => {
</div> </div>
<a className='add-product-link' onClick={handleAddProduct}>Add another product</a> <a className='add-product-link' onClick={handleAddProduct}>Add another product</a>
</div> </div>
{success && (
<div className='alert alert-primary w-100' role='alert'> {(success || invoiceStatus) && (
Access Code: {success.access_code} <div className={'d-flex flex-column w-100 gap-3'}>
{success && (
<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> </div>
)} )}
<PrimaryButton label='SUBMIT' submitted={submitted} /> <PrimaryButton label={submitButtonText()} disabled={submitted} />
</div> </div>
</div> </div>
</form> </form>
......
...@@ -25,6 +25,20 @@ app.post('/api/data', async (req, res) => { ...@@ -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, () => { app.listen(port, () => {
console.log(`Server is running on port ${port}`); console.log(`Server is running on port ${port}`);
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment