transfered test files to separate component

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

@@ -0,0 +1,186 @@
+import React, { useEffect } from "react";
+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 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 DataLabel from "../data-label/data-label.component";
+
+const CardPaymentModalComponent = ({ bodyshop, context }) => {
+  const [form] = Form.useForm();
+  const amount = Form.useWatch("amount", form);
+  const payer = Form.useWatch("payer", form);
+  const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
+  const [insertPaymentResponse] = useMutation(INSERT_PAYMENT_RESPONSE);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    axios.get("/intellipay/lightbox_credentials").then((response) => {
+      var rg = document.createRange();
+      let node = rg.createContextualFragment(response.data);
+
+      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);
+      });
+    });
+
+    if (context.jobid) {
+      form.setFieldValue("jobid", context.jobid);
+    }
+  }, []);
+
+  const disabled = false;
+
+  const handleFinish = async (values) => {
+    console.log("Modal: Handle Finish Values", values);
+
+    const paymentResult = await insertPayment({
+      variables: {
+        paymentInput: {
+          amount: values.amount,
+          transactionid: values.paymentResponse.receiptelements.transid,
+          payer: values.payer,
+          type: values.paymentResponse.cardType,
+          jobid: values.jobid,
+          date: moment(Date.now()),
+        },
+      },
+    });
+
+    const paymentResponseResult = await insertPaymentResponse({
+      variables: {
+        paymentResponse: {
+          amount: values.amount,
+          bodyshopid: bodyshop.id,
+          paymentid: paymentResult.data.insert_payments.returning[0].id,
+          jobid: values.jobid,
+          declinereason: values.paymentResponse.declinereason,
+          ext_paymentid: values.paymentResponse.paymentid.toString(),
+          successful: true,
+          response: values.paymentResponse,
+        },
+      },
+    });
+
+    console.log("Modal - Insert Payment Result: ", paymentResult);
+    console.log(
+      "Modal - Insert Respose Payment Result: ",
+      paymentResponseResult
+    );
+  };
+
+  return (
+    <Card title="Card Payment">
+      <Form onFinish={handleFinish} form={form}>
+        <LayoutFormRow grow>
+          <Form.Item
+            name="jobid"
+            label={t("bills.fields.ro_number")}
+            rules={[
+              {
+                required: true,
+                // message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <JobSearchSelectComponent
+              disabled={context.jobid}
+              notExported={false}
+              clm_no
+            />
+          </Form.Item>
+        </LayoutFormRow>
+
+        {/* Lighbox Input amount needs to be hidden */}
+        <Input
+          className="ipayfield"
+          data-ipayname="amount"
+          type="hidden"
+          value={amount}
+          hidden
+        />
+        <Form.Item name="paymentResponse" hidden>
+          <Input type="hidden" value={amount} />
+        </Form.Item>
+
+        <LayoutFormRow grow>
+          <Form.Item
+            label={t("payments.fields.payer")}
+            name="payer"
+            rules={[
+              {
+                required: true,
+                // message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <Select disabled={disabled}>
+              <Select.Option value={t("payments.labels.customer")}>
+                {t("payments.labels.customer")}
+              </Select.Option>
+              <Select.Option value={t("payments.labels.insurance")}>
+                {t("payments.labels.insurance")}
+              </Select.Option>
+            </Select>
+          </Form.Item>
+
+          <Form.Item
+            label="Amount"
+            name="amount"
+            rules={[
+              {
+                required: true,
+                // message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <InputNumber />
+          </Form.Item>
+
+          <Row justify="space-around">
+            <Button
+              type="primary"
+              data-ipayname="submit"
+              className="ipayfield"
+              disabled={!amount || !payer}
+            >
+              Proceed to Payment
+            </Button>
+            <DataLabel
+              valueStyle={{
+                color: context.balance.getAmount() !== 0 ? "red" : "green",
+              }}
+              label={t("payments.labels.balance")}
+            >
+              {context.balance.toFormat()}
+            </DataLabel>
+          </Row>
+        </LayoutFormRow>
+      </Form>
+    </Card>
+  );
+};
+
+export default CardPaymentModalComponent;