added the logic for aws secrets manager

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({