56 lines
1.7 KiB
JavaScript
56 lines
1.7 KiB
JavaScript
import React from "react";
|
|
import { useQuery } from "@apollo/client";
|
|
import { QUERY_PAYMENT_RESPONSE_BY_PAYMENT_ID } from "../_test/payment_response.queries";
|
|
import { Descriptions } from "antd";
|
|
import moment from "moment";
|
|
|
|
const PaymentExpandedRowComponent = ({ record }) => {
|
|
const { loading, error, data } = useQuery(
|
|
QUERY_PAYMENT_RESPONSE_BY_PAYMENT_ID,
|
|
{
|
|
variables: {
|
|
paymentid: record.id,
|
|
fetchPolicy: "network-only",
|
|
nextFetchPolicy: "network-only",
|
|
},
|
|
}
|
|
);
|
|
|
|
if (loading) return null;
|
|
|
|
if (error) return <p>Error loading data. Please Reload</p>;
|
|
|
|
const payment_response = data.payment_response[0];
|
|
console.log("Record", record);
|
|
|
|
return (
|
|
<div>
|
|
<Descriptions
|
|
title="Payment Details"
|
|
contentStyle={{ fontWeight: "600" }}
|
|
column={4}
|
|
>
|
|
<Descriptions.Item label="Payer">{record.payer}</Descriptions.Item>
|
|
<Descriptions.Item label="Payer Name">
|
|
{payment_response.response.nameOnCard}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="Amount">{record.amount}</Descriptions.Item>
|
|
<Descriptions.Item label="Date of Payment">
|
|
{moment(record.created_at).format("YYYY-MM-DD HH:mm:ss")}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="Transaction ID">
|
|
{record.transactionid}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="Payment Reference ID">
|
|
{payment_response.response.paymentreferenceid}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="Payment Type">
|
|
{record.type}
|
|
</Descriptions.Item>
|
|
</Descriptions>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PaymentExpandedRowComponent;
|