Merge branch 'feature/intellipay' into feature/america

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect } from "react";
 import axios from "axios";
 import { useTranslation } from "react-i18next";
 import { Button, Card, Form, Input, InputNumber, Row, Select } from "antd";
@@ -41,13 +41,35 @@ const CardPaymentModalComponent = ({
     variables: { jobid: context?.jobid ?? "" },
   });
 
-  useEffect(() => {
-    axios.get("/intellipay/lightbox_credentials").then((response) => {
-      var rg = document.createRange();
-      let node = rg.createContextualFragment(response.data);
+  const nonApproval = useCallback(
+    async (response) => {
+      // Mutate unsuccessful payment
+      await insertPaymentResponse({
+        variables: {
+          paymentResponse: {
+            amount: response.amount,
+            bodyshopid: bodyshop.id,
+            jobid: jobid || context.jobid,
+            declinereason: response.declinereason,
+            ext_paymentid: response.paymentid.toString(),
+            successful: false,
+            response,
+          },
+        },
+      });
 
-      document.documentElement.appendChild(node);
-      window.intellipay.initialize();
+      // Insert failed payment to audit trail
+      insertAuditTrail({
+        jobid: jobid || context?.jobid,
+        operation: AuditTrailMapping.failedpayment(),
+      });
+    },
+    [bodyshop, context, insertAuditTrail, insertPaymentResponse, jobid]
+  );
+
+  const initIntellipayFunctions = useCallback(() => {
+    if (window.intellipay !== undefined && typeof jobid !== "undefined") {
+      console.log("intellipay init functions");
 
       window.intellipay.runOnClose(() => {
         window.intellipay.initialize();
@@ -60,35 +82,32 @@ const CardPaymentModalComponent = ({
         toggleModalVisible();
       });
 
-      window.intellipay.runOnNonApproval(async function (response) {
-        // Mutate unsuccessful payment
-        await insertPaymentResponse({
-          variables: {
-            paymentResponse: {
-              amount: response.amount,
-              bodyshopid: bodyshop.id,
-              jobid: jobid || context.jobid,
-              declinereason: response.declinereason,
-              ext_paymentid: response.paymentid.toString(),
-              successful: false,
-              response,
-            },
-          },
-        });
-
-        // Insert failed payment to audit trail
-        insertAuditTrail({
-          jobid: jobid || context?.jobid,
-          operation: AuditTrailMapping.failedpayment(),
-        });
-      });
-    });
+      window.intellipay.runOnNonApproval(nonApproval);
+    }
+  }, [form, jobid, nonApproval, toggleModalVisible]);
 
+  const initJobId = useCallback(() => {
     if (context?.jobid) {
       form.setFieldValue("jobid", context.jobid);
     }
 
     form.setFieldValue("payer", t("payments.labels.customer"));
+  }, [context?.jobid, form, t]);
+
+  useEffect(() => {
+    initJobId();
+
+    axios
+      .post("/intellipay/lightbox_credentials", { bodyshop })
+      .then((response) => {
+        var rg = document.createRange();
+        let node = rg.createContextualFragment(response.data);
+
+        document.documentElement.appendChild(node);
+        window.intellipay.initialize();
+
+        initIntellipayFunctions();
+      });
 
     function handleEvents(...props) {
       const operation = props[0].data.operation;
@@ -101,7 +120,7 @@ const CardPaymentModalComponent = ({
     window.addEventListener("message", handleEvents, false);
 
     return () => window.removeEventListener("message", handleEvents, false);
-  }, []);
+  }, [bodyshop, initJobId, initIntellipayFunctions]);
 
   const handleFinish = async (values) => {
     const paymentResult = await insertPayment({

client/src/components/job-payments/job-payments.component.jsx

@@ -174,12 +174,15 @@ export function JobPayments({
               const response = await axios.post(
                 "/intellipay/generate_payment_url",
                 {
+                  bodyshop,
                   amount: balance.getAmount(),
                   account: job.ro_number,
                 }
               );
               setGeneratingtURL(false);
 
+              console.log("SMS", response);
+
               openChatByPhone({
                 phone_num: p.formatInternational(),
                 jobid: job.id,
@@ -236,7 +239,7 @@ export function JobPayments({
         }}
         expandable={{
           expandedRowRender: (record) => (
-            <PaymentExpandedRowComponent record={record} />
+            <PaymentExpandedRowComponent record={record} bodyshop={bodyshop} />
           ),
         }}
         summary={() => (

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

@@ -20,7 +20,7 @@ const openNotificationWithIcon = (type, t) => {
   });
 };
 
-const PaymentExpandedRowComponent = ({ record }) => {
+const PaymentExpandedRowComponent = ({ record, bodyshop }) => {
   const [refundAmount, setRefundAmount] = useState(0);
   const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
   const [insertPaymentResponse] = useMutation(INSERT_PAYMENT_RESPONSE);
@@ -96,6 +96,7 @@ const PaymentExpandedRowComponent = ({ record }) => {
         "The payment will be refunded. Click OK to confirm and Cancel to dismiss.",
       async onOk() {
         const refundResponse = await axios.post("/intellipay/payment_refund", {
+          bodyshop,
           amount: refundAmount,
           paymentid: payment_response.ext_paymentid,
         });