Move intellipay to server side processing.

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

@@ -13,7 +13,6 @@ import {
   notification,
 } from "antd";
 import axios from "axios";
-import moment from "moment";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -22,7 +21,6 @@ import {
   INSERT_PAYMENT_RESPONSE,
   QUERY_RO_AND_OWNER_BY_JOB_PKS,
 } from "../../graphql/payment_response.queries";
-import { INSERT_NEW_PAYMENT } from "../../graphql/payments.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectCardPayment } from "../../redux/modals/modals.selectors";
@@ -48,12 +46,12 @@ const CardPaymentModalComponent = ({
   toggleModalVisible,
   insertAuditTrail,
 }) => {
-  const { context } = cardPaymentModal;
+  const { context, actions } = cardPaymentModal;
 
   const [form] = Form.useForm();
 
   const [loading, setLoading] = useState(false);
-  const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
+  // const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
   const [insertPaymentResponse] = useMutation(INSERT_PAYMENT_RESPONSE);
   const { t } = useTranslation();
 
@@ -65,7 +63,6 @@ const CardPaymentModalComponent = ({
     }
   );
 
-  console.log("🚀 ~ file: card-payment-modal.component..jsx:61 ~ data:", data);
   //Initialize the intellipay window.
   const SetIntellipayCallbackFunctions = () => {
     console.log("*** Set IntelliPay callback functions.");
@@ -74,16 +71,20 @@ const CardPaymentModalComponent = ({
     });
 
     window.intellipay.runOnApproval(async function (response) {
-      console.warn("*** Running On Approval Script ***");
-      form.setFieldValue("paymentResponse", response);
-      form.submit();
+      //2024-04-25: Nothing is going to happen here anymore. We'll completely rely on the callback.
+      //Add a slight delay to allow the refetch to properly get the data.
+      setTimeout(() => {
+        if (actions && actions.refetch && typeof actions.refetch === "function")
+          actions.refetch();
+        setLoading(false);
+        toggleModalVisible();
+      }, 750);
     });
 
     window.intellipay.runOnNonApproval(async function (response) {
       // Mutate unsuccessful payment
 
       const { payments } = form.getFieldsValue();
-
       await insertPaymentResponse({
         variables: {
           paymentResponse: payments.map((payment) => ({
@@ -108,50 +109,9 @@ const CardPaymentModalComponent = ({
     });
   };
 
-  const handleFinish = async (values) => {
-    try {
-      await insertPayment({
-        variables: {
-          paymentInput: values.payments.map((payment) => ({
-            amount: payment.amount,
-            transactionid: (values.paymentResponse.paymentid || "").toString(),
-            payer: t("payments.labels.customer"),
-            type: values.paymentResponse.cardbrand,
-            jobid: payment.jobid,
-            date: moment(Date.now()),
-            payment_responses: {
-              data: [
-                {
-                  amount: payment.amount,
-                  bodyshopid: bodyshop.id,
-
-                  jobid: payment.jobid,
-                  declinereason: values.paymentResponse.declinereason,
-                  ext_paymentid: values.paymentResponse.paymentid.toString(),
-                  successful: true,
-                  response: values.paymentResponse,
-                },
-              ],
-            },
-          })),
-        },
-        refetchQueries: ["GET_JOB_BY_PK"],
-      });
-      toggleModalVisible();
-    } catch (error) {
-      console.error(error);
-      notification.open({
-        type: "error",
-        message: t("payments.errors.inserting", { error: error.message }),
-      });
-    } finally {
-      setLoading(false);
-    }
-  };
 
   const handleIntelliPayCharge = async () => {
     setLoading(true);
-
     //Validate
     try {
       await form.validateFields();
@@ -164,6 +124,7 @@ const CardPaymentModalComponent = ({
       const response = await axios.post("/intellipay/lightbox_credentials", {
         bodyshop,
         refresh: !!window.intellipay,
+        paymentSplitMeta: form.getFieldsValue(),
       });
 
       if (window.intellipay) {
@@ -192,7 +153,6 @@ const CardPaymentModalComponent = ({
     <Card title="Card Payment">
       <Spin spinning={loading}>
         <Form
-          onFinish={handleFinish}
           form={form}
           layout="vertical"
           initialValues={{
@@ -273,23 +233,14 @@ const CardPaymentModalComponent = ({
             }
           >
             {() => {
-              console.log("Updating the owner info section.");
               //If all of the job ids have been fileld in, then query and update the IP field.
               const { payments } = form.getFieldsValue();
               if (
                 payments?.length > 0 &&
                 payments?.filter((p) => p?.jobid).length === payments?.length
               ) {
-                console.log("**Calling refetch.");
                 refetch({ jobids: payments.map((p) => p.jobid) });
               }
-              console.log(
-                "Acc info",
-                data,
-                payments && data && data.jobs.length > 0
-                  ? data.jobs.map((j) => j.ro_number).join(", ")
-                  : null
-              );
               return (
                 <>
                   <Input
@@ -344,6 +295,13 @@ const CardPaymentModalComponent = ({
                     value={totalAmountToCharge?.toFixed(2)}
                     hidden
                   />
+                  <Input
+                    className="ipayfield"
+                    data-ipayname="comment"
+                    //type="hidden"
+                    value={btoa(JSON.stringify(payments))}
+                    hidden
+                  />
                   <Button
                     type="primary"
                     //  data-ipayname="submit"
@@ -358,11 +316,6 @@ const CardPaymentModalComponent = ({
               );
             }}
           </Form.Item>
-
-          {/* Lightbox payment response when it is completed */}
-          <Form.Item name="paymentResponse" hidden>
-            <Input type="hidden" />
-          </Form.Item>
         </Form>
       </Spin>
     </Card>

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx

@@ -304,7 +304,7 @@ export function JobsDetailHeaderActions({
         disabled={!job.converted}
         onClick={() => {
           setCardPaymentContext({
-            actions: {},
+            actions: { refetch },
             context: { jobid: job.id },
           });
         }}

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

@@ -139,8 +139,8 @@ const PaymentExpandedRowComponent = ({ record, bodyshop }) => {
         contentStyle={{ fontWeight: "600" }}
         column={4}
       >
-        <Descriptions.Item label={t("job_payments.titles.payer")}>
-          {record.payer}
+        <Descriptions.Item label={t("job_payments.titles.hint")}>
+          {payment_response?.response?.methodhint}
         </Descriptions.Item>
         <Descriptions.Item label={t("job_payments.titles.payername")}>
           {payment_response?.response?.nameOnCard ?? ""}
@@ -155,7 +155,7 @@ const PaymentExpandedRowComponent = ({ record, bodyshop }) => {
           {record.transactionid}
         </Descriptions.Item>
         <Descriptions.Item label={t("job_payments.titles.paymentid")}>
-          {payment_response?.response?.paymentreferenceid ?? ""}
+          {payment_response?.ext_paymentid ?? ""}
         </Descriptions.Item>
         <Descriptions.Item label={t("job_payments.titles.paymenttype")}>
           {record.type}