97 lines
2.5 KiB
JavaScript
97 lines
2.5 KiB
JavaScript
import {
|
|
PaymentRequestButtonElement,
|
|
useStripe,
|
|
} from "@stripe/react-stripe-js";
|
|
import React, { useEffect, useState } from "react";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { logImEXEvent } from "../../firebase/firebase.utils";
|
|
import { setEmailOptions } from "../../redux/email/email.actions";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
import { TemplateList } from "../../utils/TemplateConstants";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
});
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
setEmailOptions: (e) => dispatch(setEmailOptions(e)),
|
|
});
|
|
|
|
function Test({ bodyshop, setEmailOptions }) {
|
|
const stripe = useStripe();
|
|
|
|
const [paymentRequest, setPaymentRequest] = useState(null);
|
|
useEffect(() => {
|
|
if (stripe) {
|
|
const pr = stripe.paymentRequest({
|
|
country: "CA",
|
|
displayItems: [{ label: "Deductible", amount: 1099 }],
|
|
currency: "cad",
|
|
total: {
|
|
label: "Demo total",
|
|
amount: 1099,
|
|
},
|
|
requestPayerName: true,
|
|
requestPayerEmail: true,
|
|
});
|
|
|
|
// Check the availability of the Payment Request API.
|
|
pr.canMakePayment().then((result) => {
|
|
if (result) {
|
|
setPaymentRequest(pr);
|
|
} else {
|
|
// var details = {
|
|
// total: { label: "", amount: { currency: "CAD", value: "0.00" } },
|
|
// };
|
|
new PaymentRequest(
|
|
[{ supportedMethods: ["basic-card"] }],
|
|
{}
|
|
// details
|
|
).show();
|
|
}
|
|
});
|
|
}
|
|
}, [stripe]);
|
|
|
|
if (paymentRequest) {
|
|
return (
|
|
<div style={{ height: "300px" }}>
|
|
<PaymentRequestButtonElement options={{ paymentRequest }} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<button
|
|
onClick={() => {
|
|
setEmailOptions({
|
|
messageOptions: {
|
|
to: ["patrickwf@gmail.com"],
|
|
replyTo: bodyshop.email,
|
|
},
|
|
template: {
|
|
name: TemplateList().parts_order.key,
|
|
variables: {
|
|
id: "a7c2d4e1-f519-42a9-a071-c48cf0f22979",
|
|
},
|
|
},
|
|
});
|
|
}}
|
|
>
|
|
send email
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
logImEXEvent("IMEXEVENT", { somethignArThare: 5 });
|
|
}}
|
|
>
|
|
Log an ImEX Event.
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Test);
|