code cleanup and translations

client/src/components/card-payment-modal/card-payment-modal.component..jsx

@@ -236,7 +236,7 @@ const CardPaymentModalComponent = ({
               className="ipayfield"
               disabled={!amount || !payer || !jobid}
             >
-              Proceed to Payment
+              {t("job_payments.buttons.proceedtopayment")}
             </Button>
             {context?.balance && (
               <DataLabel

client/src/components/card-payment-modal/card-payment-modal.container..jsx

@@ -1,5 +1,6 @@
 import { Button, Modal } from "antd";
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
@@ -22,6 +23,7 @@ function CardPaymentModalContainer({
   bodyshop,
 }) {
   const { context, visible } = cardPaymentModal;
+  const { t } = useTranslation();
 
   const handleCancel = () => {
     toggleModalVisible();
@@ -38,7 +40,7 @@ function CardPaymentModalContainer({
       onCancel={handleCancel}
       footer={[
         <Button key="back" onClick={handleCancel}>
-          Go Back
+          {t("job_payments.buttons.goback")}
         </Button>,
       ]}
       width="60%"

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

@@ -5,17 +5,26 @@ import {
   INSERT_PAYMENT_RESPONSE,
   QUERY_PAYMENT_RESPONSE_BY_PAYMENT_ID,
 } from "../../graphql/payment_response.queries";
-import { Button, Descriptions, InputNumber, Modal } from "antd";
+import { Button, Descriptions, InputNumber, Modal, notification } from "antd";
 import moment from "moment";
 import axios from "axios";
 import { INSERT_NEW_PAYMENT } from "../../graphql/payments.queries";
+import { useTranslation } from "react-i18next";
 
 const { confirm } = Modal;
 
+const openNotificationWithIcon = (type, t) => {
+  notification[type]({
+    message: t("job_payments.notifications.error.title"),
+    description: t("job_payments.notifications.error.description"),
+  });
+};
+
 const PaymentExpandedRowComponent = ({ record }) => {
   const [refundAmount, setRefundAmount] = useState(0);
   const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
   const [insertPaymentResponse] = useMutation(INSERT_PAYMENT_RESPONSE);
+  const { t } = useTranslation();
 
   const { loading, error, data } = useQuery(
     QUERY_PAYMENT_RESPONSE_BY_PAYMENT_ID,
@@ -28,11 +37,14 @@ const PaymentExpandedRowComponent = ({ record }) => {
     }
   );
 
-  const { data: refundable_amount } = useQuery(GET_REFUNDABLE_AMOUNT_BY_JOBID, {
-    variables: {
-      jobid: record.jobid,
-    },
-  });
+  const { data: refundable_amount, refetch } = useQuery(
+    GET_REFUNDABLE_AMOUNT_BY_JOBID,
+    {
+      variables: {
+        jobid: record.jobid,
+      },
+    }
+  );
 
   const insertPayments = async (payment_response, refund_response) => {
     await insertPayment({
@@ -88,7 +100,15 @@ const PaymentExpandedRowComponent = ({ record }) => {
           paymentid: payment_response.ext_paymentid,
         });
 
+        if (refundResponse.data.status < 0) {
+          openNotificationWithIcon("error", t);
+          return;
+        }
+
         insertPayments(payment_response, refundResponse);
+
+        // refetch refundable amount
+        refetch();
       },
       onCancel() {},
     });
@@ -100,34 +120,38 @@ const PaymentExpandedRowComponent = ({ record }) => {
 
   const payment_response = data.payment_response[0];
   const max_refundable_amount =
-    refundable_amount.payment_response_aggregate.aggregate.sum.amount;
+    refundable_amount?.payment_response_aggregate.aggregate.sum.amount;
 
   return (
     <div>
       <Descriptions
-        title="Payment Details"
+        title={t("job_payments.titles.descriptions")}
         contentStyle={{ fontWeight: "600" }}
         column={4}
       >
-        <Descriptions.Item label="Payer">{record.payer}</Descriptions.Item>
-        <Descriptions.Item label="Payer Name">
+        <Descriptions.Item label={t("job_payments.titles.payer")}>
+          {record.payer}
+        </Descriptions.Item>
+        <Descriptions.Item label={t("job_payments.titles.payername")}>
           {payment_response?.response?.nameOnCard ?? ""}
         </Descriptions.Item>
-        <Descriptions.Item label="Amount">{record.amount}</Descriptions.Item>
-        <Descriptions.Item label="Date of Payment">
+        <Descriptions.Item label={t("job_payments.titles.amount")}>
+          {record.amount}
+        </Descriptions.Item>
+        <Descriptions.Item label={t("job_payments.titles.dateOfPayment")}>
           {moment(record.created_at).format("YYYY-MM-DD HH:mm:ss")}
         </Descriptions.Item>
-        <Descriptions.Item label="Transaction ID">
+        <Descriptions.Item label={t("job_payments.titles.transactionid")}>
           {record.transactionid}
         </Descriptions.Item>
-        <Descriptions.Item label="Payment Reference ID">
+        <Descriptions.Item label={t("job_payments.titles.paymentid")}>
           {payment_response?.response?.paymentreferenceid ?? ""}
         </Descriptions.Item>
-        <Descriptions.Item label="Payment Type">
+        <Descriptions.Item label={t("job_payments.titles.paymenttype")}>
           {record.type}
         </Descriptions.Item>
         {payment_response && (
-          <Descriptions.Item label="Refund Amount">
+          <Descriptions.Item label={t("job_payments.titles.refundamount")}>
             <InputNumber
               onChange={setRefundAmount}
               max={max_refundable_amount}
@@ -135,7 +159,7 @@ const PaymentExpandedRowComponent = ({ record }) => {
             />
 
             <Button onClick={() => showConfirm(payment_response)}>
-              Refund Payment
+              {t("job_payments.buttons.refundpayment")}
             </Button>
           </Descriptions.Item>
         )}