admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updates to Sentry & removal of Stripe.

Browse Source
This commit is contained in:
Patrick Fic
2023-01-03 12:23:25 -08:00
parent f8e74d9bad
commit af009a0bb3
12 changed files with 181 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
client/src/components/_test/paymentMethod.jsx
View File

@@ -1,8 +1,4 @@
import {
PaymentRequestButtonElement,
useStripe,
} from "@stripe/react-stripe-js";
import React, { useEffect, useState } from "react";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
@@ -19,49 +15,6 @@ const mapDispatchToProps = (dispatch) => ({
});
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

5
client/src/components/accounting-payments-table/accounting-payments-table.component.jsx
View File

@@ -107,11 +107,6 @@ export function AccountingPayablesTableComponent({
dataIndex: "transactionid",
key: "transactionid",
},
{
title: t("payments.fields.stripeid"),
dataIndex: "stripeid",
key: "stripeid",
},
{
title: t("payments.fields.created_at"),
dataIndex: "created_at",

19
client/src/components/job-payments/job-payments.component.jsx
View File

@@ -25,8 +25,6 @@ const mapDispatchToProps = (dispatch) => ({
dispatch(setModalContext({ context: context, modal: "payment" })),
});
const stripeTestEnv = process.env.REACT_APP_STRIPE_PUBLIC_KEY; //.includes("test");
export function JobPayments({
job,
jobRO,
@@ -94,23 +92,6 @@ export function JobPayments({
state.sortedInfo.columnKey === "transactionid" &&
state.sortedInfo.order,
},
{
title: t("payments.fields.stripeid"),
dataIndex: "stripeid",
key: "stripeid",
render: (text, record) =>
record.stripeid ? (
<a
href={
stripeTestEnv
? `https://dashboard.stripe.com/${bodyshop.stripe_acct_id}/test/payments/${record.stripeid}`
: `https://dashboard.stripe.com/${bodyshop.stripe_acct_id}/payments/${record.stripeid}`
}
>
{record.stripeid}
</a>
) : null,
},
{
title: t("general.labels.actions"),
dataIndex: "actions",

60
client/src/components/payment-form/payment-form.component.jsx
View File

@@ -1,12 +1,10 @@
import { useTreatments } from "@splitsoftware/splitio-react";
import { CardElement } from "@stripe/react-stripe-js";
import { Checkbox, Form, Input, Radio, Select } from "antd";
import { Form, Input, Radio, Select } 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 DatePickerFormItem from "../form-date-picker/form-date-picker.component";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import JobSearchSelect from "../job-search-select/job-search-select.component";
@@ -19,11 +17,9 @@ const mapStateToProps = createStructuredSelector({
export function PaymentFormComponent({
form,
stripeStateArr,
bodyshop,
disabled,
}) {
const [stripeState, setStripeState] = stripeStateArr;
const { Qb_Multi_Ar } = useTreatments(
["Qb_Multi_Ar"],
{},
@@ -31,9 +27,6 @@ export function PaymentFormComponent({
);
const { t } = useTranslation();
const handleStripeChange = (e) => {
setStripeState({ error: e.error, cardComplete: e.complete });
};
return (
<div>
@@ -150,57 +143,6 @@ export function PaymentFormComponent({
</Form.Item>
</LayoutFormRow>
<LayoutFormRow grow>
<div>
<Form.Item
label={t("payments.labels.electronicpayment")}
name="useStripe"
valuePropName="checked"
>
<Checkbox
defaultChecked={!!bodyshop.stripe_acct_id}
disabled={!!!bodyshop.stripe_acct_id || disabled}
/>
</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>
<Form.Item
label={t("general.labels.sendby")}
name="sendby"

90
client/src/components/payment-modal/payment-modal.container.jsx
View File

@@ -1,23 +1,20 @@
import { useApolloClient, useMutation } from "@apollo/client";
import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
import { useMutation } from "@apollo/client";
import { Button, Form, Modal, notification } from "antd";
import axios from "axios";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { GET_JOB_INFO_FOR_STRIPE } from "../../graphql/jobs.queries";
import {
INSERT_NEW_PAYMENT,
UPDATE_PAYMENT,
UPDATE_PAYMENT
} from "../../graphql/payments.queries";
import { setEmailOptions } from "../../redux/email/email.actions";
import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectPayment } from "../../redux/modals/modals.selectors";
import {
selectBodyshop,
selectCurrentUser,
selectCurrentUser
} from "../../redux/user/user.selectors";
import { GenerateDocument } from "../../utils/RenderTemplate";
import { TemplateList } from "../../utils/TemplateConstants";
@@ -45,82 +42,23 @@ function PaymentModalContainer({
const [enterAgain, setEnterAgain] = useState(false);
const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
const [updatePayment] = useMutation(UPDATE_PAYMENT);
const client = useApolloClient();
const stripe = useStripe();
const elements = useElements();
const { t } = useTranslation();
const { context, actions, visible } = paymentModal;
const [loading, setLoading] = useState(false);
const stripeStateArr = useState({
error: null,
cardComplete: false,
});
const stripeState = stripeStateArr[0];
const cardValid = !!!stripeState.error && stripeState.cardComplete;
const handleFinish = async (values) => {
const { useStripe, sendby, ...paymentObj } = values;
if (useStripe && !cardValid) return;
if ((useStripe && !stripe) || !elements) {
// Stripe.js has not yet loaded.
// Make sure to disable form submission until Stripe.js has loaded.
return;
}
setLoading(true);
try {
let stripePayment;
if (useStripe && bodyshop.stripe_acct_id) {
logImEXEvent("payment_stripe_attempt");
const secretKey = await axios.post("/stripe/payment", {
amount: Math.round(values.amount * 100),
stripe_acct_id: bodyshop.stripe_acct_id,
});
const { data } = await client.query({
query: GET_JOB_INFO_FOR_STRIPE,
variables: { jobid: values.jobid },
});
stripePayment = await stripe.confirmCardPayment(
secretKey.data.clientSecret,
{
payment_method: {
card: elements.getElement(CardElement),
billing_details: {
name: `${data.jobs_by_pk.ownr_fn || ""} ${
data.jobs_by_pk.ownr_ln || ""
} ${data.jobs_by_pk.ownr_co_nm || ""}`,
email: data.jobs_by_pk.ownr_ea,
phone: data.jobs_by_pk.ownr_ph1,
},
},
}
);
if (stripePayment.paymentIntent.status === "succeeded") {
notification["success"]({ message: t("payments.successes.stripe") });
} else {
notification["error"]({ message: t("payments.errors.stripe") });
throw new Error();
}
}
logImEXEvent("payment_insert");
if (!context || (context && !context.id)) {
const newPayment = await insertPayment({
variables: {
paymentInput: {
...paymentObj,
stripeid:
stripePayment &&
stripePayment.paymentIntent &&
stripePayment.paymentIntent.id,
},
},
});
@@ -236,11 +174,7 @@ function PaymentModalContainer({
layout="vertical"
initialValues={context || {}}
>
<PaymentForm
form={form}
stripeStateArr={stripeStateArr}
disabled={context && context.stripeid}
/>
<PaymentForm form={form} />
</Form>
</Modal>
);
@@ -250,15 +184,3 @@ export default connect(
mapStateToProps,
mapDispatchToProps
)(PaymentModalContainer);
// const pr = stripe.paymentRequest({
// country: "CA",
// currency: "CAD",
// total: {
// label: "Demo total",
// amount: 1099,
// },
// requestPayerName: true,
// requestPayerEmail: true,
// });
// console.log("handleFinish -> pr", pr);

19
client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
View File

@@ -16,8 +16,6 @@ import CaBcEtfTableModalContainer from "../ca-bc-etf-table-modal/ca-bc-etf-table
import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
const stripeTestEnv = process.env.REACT_APP_STRIPE_PUBLIC_KEY; //.includes("test");
const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser
bodyshop: selectBodyshop,
@@ -125,23 +123,6 @@ export function PaymentsListPaginated({
dataIndex: "transactionid",
key: "transactionid",
},
{
title: t("payments.fields.stripeid"),
dataIndex: "stripeid",
key: "stripeid",
render: (text, record) =>
record.stripeid ? (
<a
href={
stripeTestEnv
? `https://dashboard.stripe.com/${bodyshop.stripe_acct_id}/test/payments/${record.stripeid}`
: `https://dashboard.stripe.com/${bodyshop.stripe_acct_id}/payments/${record.stripeid}`
}
>
{record.stripeid}
</a>
) : null,
},
{
title: t("payments.fields.created_at"),
dataIndex: "created_at",