119 lines
3.2 KiB
JavaScript
119 lines
3.2 KiB
JavaScript
import { CardElement } from "@stripe/react-stripe-js";
|
|
import { Checkbox, Form, Input } from "antd";
|
|
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
import Alert from "../alert/alert.component";
|
|
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
|
|
import JobSearchSelect from "../job-search-select/job-search-select.component";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
});
|
|
|
|
export function PaymentFormComponent({
|
|
form,
|
|
roAutoCompleteOptions,
|
|
stripeStateArr,
|
|
bodyshop,
|
|
}) {
|
|
const [stripeState, setStripeState] = stripeStateArr;
|
|
|
|
const { t } = useTranslation();
|
|
const handleStripeChange = (e) => {
|
|
console.log("e", e);
|
|
setStripeState({ error: e.error, cardComplete: e.complete });
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Form.Item
|
|
name="jobid"
|
|
label={t("invoices.fields.ro_number")}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: t("general.validation.required"),
|
|
},
|
|
]}
|
|
>
|
|
<JobSearchSelect options={roAutoCompleteOptions} />
|
|
</Form.Item>
|
|
<Form.Item
|
|
label={t("payments.fields.amount")}
|
|
name="amount"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: t("general.validation.required"),
|
|
},
|
|
]}
|
|
>
|
|
<CurrencyInput />
|
|
</Form.Item>
|
|
|
|
<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;
|
|
}}
|
|
</Form.Item>
|
|
{stripeState.error ? (
|
|
<Alert type="error" message={stripeState.error.message} />
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
export default connect(mapStateToProps, null)(PaymentFormComponent);
|