removed console log and added the mutation for failed payment attempts

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

@@ -26,23 +26,30 @@ const CardPaymentModalComponent = ({ bodyshop, context }) => {
       document.documentElement.appendChild(node);
       window.intellipay.initialize();
 
-      console.log("Modal: Intellipay Initialized");
-
       window.intellipay.runOnClose(() => {
-        // Apparently it automatically removes itself in the document when closed
-        // so we just need to reintialize it
         window.intellipay.initialize();
       });
 
       window.intellipay.runOnApproval(async function (response) {
-        console.log("Modal - Payment Response: ", response);
-        // TODO store the response
         form.setFieldValue("paymentResponse", response);
         form.submit();
       });
 
-      window.intellipay.runOnNonApproval(function (response) {
-        console.log("Modal: Non Payment: ", response);
+      window.intellipay.runOnNonApproval(async function (response) {
+        // Mutate unsuccessful payment
+        await insertPaymentResponse({
+          variables: {
+            paymentResponse: {
+              amount: response.amount,
+              bodyshopid: bodyshop.id,
+              jobid: context.jobid,
+              declinereason: response.declinereason,
+              ext_paymentid: response.paymentid.toString(),
+              successful: false,
+              response,
+            },
+          },
+        });
       });
     });
 
@@ -54,8 +61,6 @@ const CardPaymentModalComponent = ({ bodyshop, context }) => {
   const disabled = false;
 
   const handleFinish = async (values) => {
-    console.log("Modal: Handle Finish Values", values);
-
     const paymentResult = await insertPayment({
       variables: {
         paymentInput: {
@@ -69,7 +74,7 @@ const CardPaymentModalComponent = ({ bodyshop, context }) => {
       },
     });
 
-    const paymentResponseResult = await insertPaymentResponse({
+    await insertPaymentResponse({
       variables: {
         paymentResponse: {
           amount: values.amount,
@@ -83,12 +88,6 @@ const CardPaymentModalComponent = ({ bodyshop, context }) => {
         },
       },
     });
-
-    console.log("Modal - Insert Payment Result: ", paymentResult);
-    console.log(
-      "Modal - Insert Respose Payment Result: ",
-      paymentResponseResult
-    );
   };
 
   return (
@@ -121,6 +120,7 @@ const CardPaymentModalComponent = ({ bodyshop, context }) => {
           value={amount}
           hidden
         />
+        {/* Lightbox payment response when it is completed */}
         <Form.Item name="paymentResponse" hidden>
           <Input type="hidden" value={amount} />
         </Form.Item>