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

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, useQuery } 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,
  QUERY_RO_AND_OWNER_BY_JOB_PK,
} from "../../graphql/payment_response.queries";
import DataLabel from "../data-label/data-label.component";
import { insertAuditTrail } from "../../redux/application/application.actions";
import AuditTrailMapping from "../../utils/AuditTrailMappings";
import { connect } from "react-redux";
import { toggleModalVisible } from "../../redux/modals/modals.actions";

const mapDispatchToProps = (dispatch) => ({
  insertAuditTrail: ({ jobid, operation }) =>
    dispatch(insertAuditTrail({ jobid, operation })),
  toggleModalVisible: () => dispatch(toggleModalVisible("cardPayment")),
});

const CardPaymentModalComponent = ({
  bodyshop,
  context,
  toggleModalVisible,
  insertAuditTrail,
}) => {
  const [form] = Form.useForm();
  const amount = Form.useWatch("amount", form);
  const payer = Form.useWatch("payer", form);
  const jobid = Form.useWatch("jobid", form);
  const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
  const [insertPaymentResponse] = useMutation(INSERT_PAYMENT_RESPONSE);
  const { t } = useTranslation();

  const { data, refetch } = useQuery(QUERY_RO_AND_OWNER_BY_JOB_PK, {
    variables: { jobid: context?.jobid ?? "" },
  });

  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();

      window.intellipay.runOnClose(() => {
        window.intellipay.initialize();
      });

      window.intellipay.runOnApproval(async function (response) {
        form.setFieldValue("paymentResponse", response);
        form.submit();

        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(),
        });
      });
    });

    if (context?.jobid) {
      form.setFieldValue("jobid", context.jobid);
    }

    form.setFieldValue("payer", t("payments.labels.customer"));

    function handleEvents(...props) {
      const operation = props[0].data.operation;

      if (operation === "updateform") {
        props[0].stopImmediatePropagation();
      }
    }

    window.addEventListener("message", handleEvents, false);

    return () => window.removeEventListener("message", handleEvents, false);
  }, []);

  const handleFinish = async (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()),
        },
      },
      update(cache, { data }) {
        cache.modify({
          id: cache.identify({ id: jobid, __typename: "jobs" }),
          fields: {
            payments(payments) {
              return [...data.insert_payments.returning, ...payments];
            },
          },
        });
      },
    });

    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,
        },
      },
    });
  };

  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
              onChange={(e) => {
                refetch({ jobid: e });
              }}
            />
          </Form.Item>
        </LayoutFormRow>

        {/* Lighbox Input amount needs to be hidden */}
        <Input
          className="ipayfield"
          data-ipayname="amount"
          type="hidden"
          value={amount}
          hidden
        />
        <Input
          className="ipayfield"
          data-ipayname="account"
          type="hidden"
          value={data?.jobs_by_pk.ro_number}
          hidden
        />
        <Input
          className="ipayfield"
          data-ipayname="email"
          type="hidden"
          value={data?.jobs_by_pk.owner.ownr_ea}
          hidden
        />
        {/* Lightbox payment response when it is completed */}
        <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>
              <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 || !jobid}
            >
              {t("job_payments.buttons.proceedtopayment")}
            </Button>
            {context?.balance && (
              <DataLabel
                valueStyle={{
                  color: context?.balance.getAmount() !== 0 ? "red" : "green",
                }}
                label={t("payments.labels.balance")}
              >
                {context?.balance.toFormat()}
              </DataLabel>
            )}
          </Row>
        </LayoutFormRow>
      </Form>
    </Card>
  );
};

export default connect(null, mapDispatchToProps)(CardPaymentModalComponent);