transfered test files to separate component
This commit is contained in:
swtmply
@@ -1,43 +0,0 @@
|
||||
import { Modal } from "antd";
|
||||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { toggleModalVisible } from "../../redux/modals/modals.actions";
|
||||
import { selectCardPayment } from "../../redux/modals/modals.selectors";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import IntellipayTestPage from "./intellipay-test";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
cardPaymentModal: selectCardPayment,
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
toggleModalVisible: () => dispatch(toggleModalVisible("cardPayment")),
|
||||
});
|
||||
|
||||
function CardPaymentModalComponent({
|
||||
cardPaymentModal,
|
||||
toggleModalVisible,
|
||||
bodyshop,
|
||||
}) {
|
||||
const { context, visible } = cardPaymentModal;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
onOk={() => toggleModalVisible()}
|
||||
onCancel={() => toggleModalVisible()}
|
||||
cancelButtonProps={{ style: { display: "none" } }}
|
||||
width="90%"
|
||||
destroyOnClose
|
||||
>
|
||||
<IntellipayTestPage bodyshop={bodyshop} context={context} />
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(CardPaymentModalComponent);
|
||||
@@ -1,161 +0,0 @@
|
||||
import React, { useEffect } from "react";
|
||||
import axios from "axios";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button, Card, Form, Input, InputNumber, 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 "./payment_response.queries";
|
||||
|
||||
const IntellpayTestPage = ({ bodyshop, context }) => {
|
||||
const [form] = Form.useForm();
|
||||
const amount = Form.useWatch("amount", 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);
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
|
||||
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={disabled}
|
||||
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>
|
||||
<Button type="primary" data-ipayname="submit" className="ipayfield">
|
||||
Proceed to Payment
|
||||
</Button>
|
||||
</LayoutFormRow>
|
||||
|
||||
<Button htmlType="submit">Submit Payment</Button>
|
||||
</Form>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default IntellpayTestPage;
|
||||
@@ -3,7 +3,7 @@ import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { setModalContext } from "../../redux/modals/modals.actions";
|
||||
import CardPaymentModalComponent from "./card-payment-modal.component.";
|
||||
import CardPaymentModalContainer from "../card-payment-modal/card-payment-modal.container.";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({});
|
||||
|
||||
@@ -15,13 +15,11 @@ const mapDispatchToProps = (dispatch) => ({
|
||||
function Test({ setCardPaymentContext }) {
|
||||
return (
|
||||
<div>
|
||||
<CardPaymentModalComponent />
|
||||
<CardPaymentModalContainer />
|
||||
<Button
|
||||
onClick={() =>
|
||||
setCardPaymentContext({
|
||||
context: {
|
||||
test: "Test String",
|
||||
},
|
||||
context: {},
|
||||
})
|
||||
}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user