added expandable row in payments table

client/src/components/payment-expanded-row/payment-expanded-row.component.jsx

@@ -0,0 +1,55 @@
+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;