Added standard payment processing for Stripe BOD-146.
This commit is contained in:
Patrick Fic
@@ -1,24 +1,35 @@
|
||||
import { Form } from "antd";
|
||||
import { Form, Input, Checkbox } from "antd";
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
|
||||
import JobSearchSelect from "../job-search-select/job-search-select.component";
|
||||
import { CardElement } from "@stripe/react-stripe-js";
|
||||
import FormLayoutRow from "../layout-form-row/layout-form-row.component";
|
||||
import Alert from "../alert/alert.component";
|
||||
|
||||
export default function PaymentFormComponent({
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
|
||||
export function PaymentFormComponent({
|
||||
form,
|
||||
roAutoCompleteOptions,
|
||||
stripeStateArr,
|
||||
bodyshop,
|
||||
}) {
|
||||
const [stripeState, setStripeState] = stripeStateArr;
|
||||
console.log("stripeState", stripeState);
|
||||
|
||||
const { t } = useTranslation();
|
||||
const handleStripeChange = (e) => {
|
||||
console.log("e", e);
|
||||
setStripeState({ error: e.error, cardComplete: e.complete });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="invoice-form-wrapper">
|
||||
<div>
|
||||
<Form.Item
|
||||
name="jobid"
|
||||
label={t("invoices.fields.ro_number")}
|
||||
@@ -31,30 +42,78 @@ export default function PaymentFormComponent({
|
||||
>
|
||||
<JobSearchSelect options={roAutoCompleteOptions} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label={t("payment.fields.amount")} name="amount">
|
||||
<Form.Item
|
||||
label={t("payments.fields.amount")}
|
||||
name="amount"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<CardElement
|
||||
options={{
|
||||
style: {
|
||||
base: {
|
||||
color: "#32325d",
|
||||
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
|
||||
fontSmoothing: "antialiased",
|
||||
fontSize: "16px",
|
||||
"::placeholder": {
|
||||
color: "#aab7c4",
|
||||
},
|
||||
},
|
||||
invalid: {
|
||||
color: "#fa755a",
|
||||
iconColor: "#fa755a",
|
||||
},
|
||||
},
|
||||
|
||||
<Form.Item
|
||||
label={t("payments.fields.transactionid")}
|
||||
name="transactionid"
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label={t("payments.fields.memo")} name="memo">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("payments.labels.electronicpayment")}
|
||||
name="useStripe"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Checkbox
|
||||
defaultChecked={!!bodyshop.stripe_acct_id}
|
||||
disabled={!!!bodyshop.stripe_acct_id}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{!!!bodyshop.stripe_acct_id ? (
|
||||
<div style={{ fontStyle: "italic" }}>{t("payments.labels.signup")}</div>
|
||||
) : null}
|
||||
|
||||
<Form.Item shouldUpdate>
|
||||
{() => {
|
||||
if (form.getFieldValue("useStripe"))
|
||||
return (
|
||||
<CardElement
|
||||
options={{
|
||||
style: {
|
||||
base: {
|
||||
color: "#32325d",
|
||||
//fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
|
||||
fontSmoothing: "antialiased",
|
||||
//fontSize: "16px",
|
||||
"::placeholder": {
|
||||
color: "#aab7c4",
|
||||
},
|
||||
},
|
||||
invalid: {
|
||||
color: "#fa755a",
|
||||
iconColor: "#fa755a",
|
||||
},
|
||||
},
|
||||
}}
|
||||
onChange={handleStripeChange}
|
||||
/>
|
||||
);
|
||||
|
||||
return null;
|
||||
}}
|
||||
onChange={handleStripeChange}
|
||||
/>
|
||||
</Form.Item>
|
||||
{stripeState.error ? (
|
||||
<Alert type="error" message={stripeState.error.message} />
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default connect(mapStateToProps, null)(PaymentFormComponent);
|
||||
|
||||
@@ -10,7 +10,12 @@ const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
|
||||
export function PaymentFormContainer({ bodyshop, form,stripeStateArr }) {
|
||||
export function PaymentFormContainer({
|
||||
bodyshop,
|
||||
form,
|
||||
stripeStateArr,
|
||||
|
||||
}) {
|
||||
const { data: RoAutoCompleteData } = useQuery(ACTIVE_JOBS_FOR_AUTOCOMPLETE, {
|
||||
variables: { statuses: bodyshop.md_ro_statuses.open_statuses || ["Open*"] },
|
||||
});
|
||||
@@ -21,6 +26,7 @@ export function PaymentFormContainer({ bodyshop, form,stripeStateArr }) {
|
||||
form={form}
|
||||
roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
|
||||
stripeStateArr={stripeStateArr}
|
||||
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useElements, useStripe } from "@stripe/react-stripe-js";
|
||||
import { Form, Modal } from "antd";
|
||||
import { useElements, useStripe, CardElement } from "@stripe/react-stripe-js";
|
||||
import { Form, Modal, notification } from "antd";
|
||||
import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
@@ -11,6 +11,10 @@ import {
|
||||
selectCurrentUser,
|
||||
} from "../../redux/user/user.selectors";
|
||||
import PaymentForm from "../payment-form/payment-form.container";
|
||||
import axios from "axios";
|
||||
import { useMutation } from "@apollo/react-hooks";
|
||||
import { INSERT_NEW_PAYMENT } from "../../graphql/payments.queries";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
paymentModal: selectPayment,
|
||||
bodyshop: selectBodyshop,
|
||||
@@ -28,6 +32,7 @@ function InvoiceEnterModalContainer({
|
||||
currentUser,
|
||||
}) {
|
||||
const [form] = Form.useForm();
|
||||
const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
|
||||
const stripe = useStripe();
|
||||
const elements = useElements();
|
||||
const { t } = useTranslation();
|
||||
@@ -49,45 +54,65 @@ function InvoiceEnterModalContainer({
|
||||
// Make sure to disable form submission until Stripe.js has loaded.
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
try {
|
||||
const pr = stripe.paymentRequest({
|
||||
country: "US",
|
||||
currency: "usd",
|
||||
total: {
|
||||
label: "Demo total",
|
||||
amount: 1099,
|
||||
},
|
||||
requestPayerName: true,
|
||||
requestPayerEmail: true,
|
||||
});
|
||||
console.log("handleFinish -> pr", pr);
|
||||
|
||||
// const secretKey = await axios.post("/stripe/payment", {
|
||||
// amount: Math.round(values.amount * 100),
|
||||
// stripe_acct_id: bodyshop.stripe_acct_id,
|
||||
// });
|
||||
// console.log("handleFinish -> secretKey", secretKey);
|
||||
// const result = await stripe.confirmCardPayment(
|
||||
// secretKey.data.clientSecret,
|
||||
// {
|
||||
// payment_method: {
|
||||
// card: elements.getElement(CardElement),
|
||||
// billing_details: {
|
||||
// name: "Jenny Rosen",
|
||||
// },
|
||||
// },
|
||||
// }
|
||||
// );
|
||||
// console.log("handleFinish -> result", result);
|
||||
setLoading(true);
|
||||
|
||||
const { useStripe, ...paymentObj } = values;
|
||||
|
||||
try {
|
||||
let stripePayment;
|
||||
if (useStripe && bodyshop.stripe_acct_id) {
|
||||
const secretKey = await axios.post("/stripe/payment", {
|
||||
amount: Math.round(values.amount * 100),
|
||||
stripe_acct_id: bodyshop.stripe_acct_id,
|
||||
});
|
||||
|
||||
stripePayment = await stripe.confirmCardPayment(
|
||||
secretKey.data.clientSecret,
|
||||
{
|
||||
payment_method: {
|
||||
card: elements.getElement(CardElement),
|
||||
billing_details: {
|
||||
name: "Jenny Rosen",
|
||||
},
|
||||
},
|
||||
}
|
||||
);
|
||||
console.log("handleFinish -> stripePayment", stripePayment);
|
||||
|
||||
if (stripePayment.paymentIntent.status === "succeeded") {
|
||||
notification["success"]({ message: t("payments.successes.stripe") });
|
||||
} else {
|
||||
notification["error"]({ message: t("payments.errors.stripe") });
|
||||
throw new Error();
|
||||
}
|
||||
}
|
||||
|
||||
const newPayment = await insertPayment({
|
||||
variables: {
|
||||
paymentInput: {
|
||||
...paymentObj,
|
||||
stripeid:
|
||||
stripePayment &&
|
||||
stripePayment.paymentIntent &&
|
||||
stripePayment.paymentIntent.id,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!!!newPayment.errors) {
|
||||
notification["success"]({ message: t("payments.successes.payment") });
|
||||
} else {
|
||||
notification["error"]({ message: t("payments.errors.payment") });
|
||||
}
|
||||
|
||||
if (actions.refetch) actions.refetch();
|
||||
toggleModalVisible();
|
||||
} catch (error) {
|
||||
console.log("error", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
// toggleModalVisible();
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
@@ -97,19 +122,23 @@ function InvoiceEnterModalContainer({
|
||||
return (
|
||||
<Modal
|
||||
title={t("payments.labels.new")}
|
||||
width={"90%"}
|
||||
visible={visible}
|
||||
okText={t("general.actions.save")}
|
||||
onOk={() => form.submit()}
|
||||
onCancel={handleCancel}
|
||||
afterClose={() => form.resetFields()}
|
||||
okButtonProps={{ loading: loading, disabled: !cardValid }}
|
||||
destroyOnClose>
|
||||
okButtonProps={{
|
||||
loading: loading,
|
||||
}}
|
||||
destroyOnClose
|
||||
>
|
||||
<Form
|
||||
onFinish={handleFinish}
|
||||
autoComplete={"off"}
|
||||
form={form}
|
||||
initialValues={{ jobid: context.jobId }}>
|
||||
layout="vertical"
|
||||
initialValues={{ jobid: context.jobId }}
|
||||
>
|
||||
<PaymentForm form={form} stripeStateArr={stripeStateArr} />
|
||||
</Form>
|
||||
</Modal>
|
||||
@@ -120,3 +149,15 @@ export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(InvoiceEnterModalContainer);
|
||||
|
||||
// const pr = stripe.paymentRequest({
|
||||
// country: "CA",
|
||||
// currency: "CAD",
|
||||
// total: {
|
||||
// label: "Demo total",
|
||||
// amount: 1099,
|
||||
// },
|
||||
// requestPayerName: true,
|
||||
// requestPayerEmail: true,
|
||||
// });
|
||||
// console.log("handleFinish -> pr", pr);
|
||||
|
||||
Reference in New Issue
Block a user