restructured card payment modal and added audit trailing

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

@@ -3,21 +3,44 @@ import axios from "axios";
 import { useTranslation } from "react-i18next";
 import { Button, Card, Form, Input, InputNumber, Row, Select } from "antd";
 import moment from "moment";
-import { useMutation } from "@apollo/client";
+import { useMutation, useQuery } from "@apollo/client";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import JobSearchSelectComponent from "../job-search-select/job-search-select.component";
 import { INSERT_NEW_PAYMENT } from "../../graphql/payments.queries";
-import { INSERT_PAYMENT_RESPONSE } from "../_test/payment_response.queries";
+import {
+  INSERT_PAYMENT_RESPONSE,
+  QUERY_RO_AND_OWNER_BY_JOB_PK,
+} from "../_test/payment_response.queries";
 import DataLabel from "../data-label/data-label.component";
+import { insertAuditTrail } from "../../redux/application/application.actions";
+import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { connect } from "react-redux";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
 
-const CardPaymentModalComponent = ({ bodyshop, context }) => {
+const mapDispatchToProps = (dispatch) => ({
+  insertAuditTrail: ({ jobid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, operation })),
+  toggleModalVisible: () => dispatch(toggleModalVisible("cardPayment")),
+});
+
+const CardPaymentModalComponent = ({
+  bodyshop,
+  context,
+  toggleModalVisible,
+  insertAuditTrail,
+}) => {
   const [form] = Form.useForm();
   const amount = Form.useWatch("amount", form);
   const payer = Form.useWatch("payer", form);
+  const jobid = Form.useWatch("jobid", form);
   const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
   const [insertPaymentResponse] = useMutation(INSERT_PAYMENT_RESPONSE);
   const { t } = useTranslation();
 
+  const { data, refetch } = useQuery(QUERY_RO_AND_OWNER_BY_JOB_PK, {
+    variables: { jobid: context?.jobid ?? "" },
+  });
+
   useEffect(() => {
     axios.get("/intellipay/lightbox_credentials").then((response) => {
       var rg = document.createRange();
@@ -26,6 +49,8 @@ const CardPaymentModalComponent = ({ bodyshop, context }) => {
       document.documentElement.appendChild(node);
       window.intellipay.initialize();
 
+      // console.log("Declined Payments - Intellipay", window.intellipay);
+
       window.intellipay.runOnClose(() => {
         window.intellipay.initialize();
       });
@@ -33,32 +58,42 @@ const CardPaymentModalComponent = ({ bodyshop, context }) => {
       window.intellipay.runOnApproval(async function (response) {
         form.setFieldValue("paymentResponse", response);
         form.submit();
+
+        toggleModalVisible();
       });
 
       window.intellipay.runOnNonApproval(async function (response) {
+        console.log("Declined Payments", response);
         // Mutate unsuccessful payment
-        await insertPaymentResponse({
+
-          variables: {
+        // await insertPaymentResponse({
-            paymentResponse: {
+        //   variables: {
-              amount: response.amount,
+        //     paymentResponse: {
-              bodyshopid: bodyshop.id,
+        //       amount: response.amount,
-              jobid: context.jobid,
+        //       bodyshopid: bodyshop.id,
-              declinereason: response.declinereason,
+        //       jobid: jobid || context.jobid,
-              ext_paymentid: response.paymentid.toString(),
+        //       declinereason: response.declinereason,
-              successful: false,
+        //       ext_paymentid: response.paymentid.toString(),
-              response,
+        //       successful: false,
-            },
+        //       response,
-          },
+        //     },
+        //   },
+        // });
+
+        // Insert failed payment to audit trail
+        insertAuditTrail({
+          jobid: jobid || context?.jobid,
+          operation: AuditTrailMapping.failedpayment(),
         });
       });
     });
 
-    if (context.jobid) {
+    if (context?.jobid) {
       form.setFieldValue("jobid", context.jobid);
     }
-  }, []);
 
-  const disabled = false;
+    form.setFieldValue("payer", t("payments.labels.customer"));
+  }, []);
 
   const handleFinish = async (values) => {
     const paymentResult = await insertPayment({
@@ -72,6 +107,16 @@ const CardPaymentModalComponent = ({ bodyshop, context }) => {
           date: moment(Date.now()),
         },
       },
+      update(cache, { data }) {
+        cache.modify({
+          id: cache.identify({ id: jobid, __typename: "jobs" }),
+          fields: {
+            payments(payments) {
+              return [...data.insert_payments.returning, ...payments];
+            },
+          },
+        });
+      },
     });
 
     await insertPaymentResponse({
@@ -105,9 +150,12 @@ const CardPaymentModalComponent = ({ bodyshop, context }) => {
             ]}
           >
             <JobSearchSelectComponent
-              disabled={context.jobid}
+              disabled={context?.jobid}
               notExported={false}
               clm_no
+              onChange={(e) => {
+                refetch({ jobid: e });
+              }}
             />
           </Form.Item>
         </LayoutFormRow>
@@ -120,6 +168,20 @@ const CardPaymentModalComponent = ({ bodyshop, context }) => {
           value={amount}
           hidden
         />
+        <Input
+          className="ipayfield"
+          data-ipayname="account"
+          type="hidden"
+          value={data?.jobs_by_pk.ro_number}
+          hidden
+        />
+        <Input
+          className="ipayfield"
+          data-ipayname="email"
+          type="hidden"
+          value={data?.jobs_by_pk.owner.ownr_ea}
+          hidden
+        />
         {/* Lightbox payment response when it is completed */}
         <Form.Item name="paymentResponse" hidden>
           <Input type="hidden" value={amount} />
@@ -136,7 +198,7 @@ const CardPaymentModalComponent = ({ bodyshop, context }) => {
               },
             ]}
           >
-            <Select disabled={disabled}>
+            <Select>
               <Select.Option value={t("payments.labels.customer")}>
                 {t("payments.labels.customer")}
               </Select.Option>
@@ -164,18 +226,20 @@ const CardPaymentModalComponent = ({ bodyshop, context }) => {
               type="primary"
               data-ipayname="submit"
               className="ipayfield"
-              disabled={!amount || !payer}
+              disabled={!amount || !payer || !jobid}
             >
               Proceed to Payment
             </Button>
-            <DataLabel
+            {context?.balance && (
-              valueStyle={{
+              <DataLabel
-                color: context.balance.getAmount() !== 0 ? "red" : "green",
+                valueStyle={{
-              }}
+                  color: context?.balance.getAmount() !== 0 ? "red" : "green",
-              label={t("payments.labels.balance")}
+                }}
-            >
+                label={t("payments.labels.balance")}
-              {context.balance.toFormat()}
+              >
-            </DataLabel>
+                {context?.balance.toFormat()}
+              </DataLabel>
+            )}
           </Row>
         </LayoutFormRow>
       </Form>
@@ -183,4 +247,4 @@ const CardPaymentModalComponent = ({ bodyshop, context }) => {
   );
 };
 
-export default CardPaymentModalComponent;
+export default connect(null, mapDispatchToProps)(CardPaymentModalComponent);

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

@@ -25,16 +25,12 @@ function CardPaymentModalContainer({
 
   const handleCancel = () => {
     toggleModalVisible();
-    actions.refetch();
   };
 
   const handleOK = () => {
     toggleModalVisible();
-    actions.refetch();
   };
 
-  const handleNewPayment = () => {};
-
   return (
     <Modal
       visible={visible}
@@ -44,9 +40,6 @@ function CardPaymentModalContainer({
         <Button key="back" onClick={handleCancel}>
           Go Back
         </Button>,
-        <Button key="submit" type="primary" onClick={handleNewPayment}>
-          Submit Payment
-        </Button>,
       ]}
       width="50%"
       destroyOnClose

client/src/utils/AuditTrailMappings.js

@@ -40,7 +40,7 @@ const AuditTrailMapping = {
     i18n.t("audit_trail.messages.admin_jobmarkforreexport"),
   admin_jobmarkexported: () =>
     i18n.t("audit_trail.messages.admin_jobmarkexported"),
-
+  failedpayment: () => i18n.t("audit_trail.messages.failedpayment"),
 };
 
 export default AuditTrailMapping;