Improvements to intellipay script.
This commit is contained in:
Patrick Fic
@@ -1,7 +1,17 @@
|
||||
import React, { useCallback, useEffect } from "react";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import axios from "axios";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button, Card, Form, Input, InputNumber, Row, Select } from "antd";
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Form,
|
||||
Input,
|
||||
InputNumber,
|
||||
Row,
|
||||
Select,
|
||||
Spin,
|
||||
notification,
|
||||
} from "antd";
|
||||
import moment from "moment";
|
||||
import { useMutation, useQuery } from "@apollo/client";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
@@ -16,6 +26,14 @@ import { insertAuditTrail } from "../../redux/application/application.actions";
|
||||
import AuditTrailMapping from "../../utils/AuditTrailMappings";
|
||||
import { connect } from "react-redux";
|
||||
import { toggleModalVisible } from "../../redux/modals/modals.actions";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { selectCardPayment } from "../../redux/modals/modals.selectors";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
cardPaymentModal: selectCardPayment,
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
insertAuditTrail: ({ jobid, operation }) =>
|
||||
@@ -25,24 +43,39 @@ const mapDispatchToProps = (dispatch) => ({
|
||||
|
||||
const CardPaymentModalComponent = ({
|
||||
bodyshop,
|
||||
context,
|
||||
cardPaymentModal,
|
||||
toggleModalVisible,
|
||||
insertAuditTrail,
|
||||
}) => {
|
||||
const { context } = cardPaymentModal;
|
||||
|
||||
const [form] = Form.useForm();
|
||||
const amount = Form.useWatch("amount", form);
|
||||
const payer = Form.useWatch("payer", form);
|
||||
const jobid = Form.useWatch("jobid", form);
|
||||
const [loading, setLoading] = useState(false);
|
||||
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 ?? "" },
|
||||
skip: !context?.jobid,
|
||||
});
|
||||
|
||||
const nonApproval = useCallback(
|
||||
async (response) => {
|
||||
//Initialize the intellipay window.
|
||||
const SetIntellipayCallbackFunctions = () => {
|
||||
console.log("*** Set IntelliPay callback functions.");
|
||||
window.intellipay.runOnClose(() => {
|
||||
//window.intellipay.initialize();
|
||||
});
|
||||
|
||||
window.intellipay.runOnApproval(async function (response) {
|
||||
console.warn("*** Running On Approval Script ***");
|
||||
form.setFieldValue("paymentResponse", response);
|
||||
form.submit();
|
||||
});
|
||||
|
||||
window.intellipay.runOnNonApproval(async function (response) {
|
||||
// Mutate unsuccessful payment
|
||||
await insertPaymentResponse({
|
||||
variables: {
|
||||
@@ -57,221 +90,182 @@ const CardPaymentModalComponent = ({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 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();
|
||||
});
|
||||
|
||||
window.intellipay.runOnApproval(async function (response) {
|
||||
form.setFieldValue("paymentResponse", response);
|
||||
form.submit();
|
||||
|
||||
toggleModalVisible();
|
||||
});
|
||||
|
||||
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;
|
||||
|
||||
if (operation === "updateform") {
|
||||
props[0].stopImmediatePropagation();
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("message", handleEvents, false);
|
||||
|
||||
return () => window.removeEventListener("message", handleEvents, false);
|
||||
}, [bodyshop, initJobId, initIntellipayFunctions]);
|
||||
});
|
||||
};
|
||||
|
||||
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: values.jobid, __typename: "jobs" }),
|
||||
fields: {
|
||||
payments(cachedPayments) {
|
||||
return [...data.insert_payments.returning, ...cachedPayments];
|
||||
},
|
||||
try {
|
||||
const paymentResult = await insertPayment({
|
||||
variables: {
|
||||
paymentInput: {
|
||||
amount: values.amount,
|
||||
transactionid: values.paymentResponse.receiptelements.transid,
|
||||
payer: t("payments.labels.customer"),
|
||||
type: values.paymentResponse.cardType,
|
||||
jobid: values.jobid,
|
||||
date: moment(Date.now()),
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
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,
|
||||
},
|
||||
},
|
||||
});
|
||||
refetchQueries: ["GET_JOB_BY_PK"],
|
||||
update(cache, { data }) {
|
||||
cache.modify({
|
||||
id: cache.identify({ id: values.jobid, __typename: "jobs" }),
|
||||
fields: {
|
||||
payments(cachedPayments) {
|
||||
return [...data.insert_payments.returning, ...cachedPayments];
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
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,
|
||||
},
|
||||
},
|
||||
});
|
||||
toggleModalVisible();
|
||||
} catch (error) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleIntelliPayCharge = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await axios.post("/intellipay/lightbox_credentials", {
|
||||
bodyshop,
|
||||
});
|
||||
var rg = document.createRange();
|
||||
let node = rg.createContextualFragment(response.data);
|
||||
document.documentElement.appendChild(node);
|
||||
|
||||
SetIntellipayCallbackFunctions();
|
||||
window.intellipay.isAutoOpen = true;
|
||||
window.intellipay.initialize();
|
||||
} catch (error) {
|
||||
notification.open({
|
||||
type: "error",
|
||||
message: t("job_payments.notifications.error.openingip"),
|
||||
});
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
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}
|
||||
<Spin spinning={loading}>
|
||||
<Form
|
||||
onFinish={handleFinish}
|
||||
form={form}
|
||||
initialValues={{ jobid: context?.jobid }}
|
||||
>
|
||||
<LayoutFormRow grow>
|
||||
<Form.Item
|
||||
name="jobid"
|
||||
label={t("bills.fields.ro_number")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
// message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
{t("job_payments.buttons.proceedtopayment")}
|
||||
</Button>
|
||||
{context?.balance && (
|
||||
<DataLabel
|
||||
valueStyle={{
|
||||
color: context?.balance.getAmount() !== 0 ? "red" : "green",
|
||||
<JobSearchSelectComponent
|
||||
disabled={context?.jobid}
|
||||
notExported={false}
|
||||
clm_no
|
||||
onChange={(e) => {
|
||||
refetch({ jobid: e });
|
||||
}}
|
||||
label={t("payments.labels.balance")}
|
||||
/>
|
||||
</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="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 || !jobid}
|
||||
onClick={handleIntelliPayCharge}
|
||||
>
|
||||
{context?.balance.toFormat()}
|
||||
</DataLabel>
|
||||
)}
|
||||
</Row>
|
||||
</LayoutFormRow>
|
||||
</Form>
|
||||
{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>
|
||||
</Spin>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect(null, mapDispatchToProps)(CardPaymentModalComponent);
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(CardPaymentModalComponent);
|
||||
|
||||
Reference in New Issue
Block a user