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",

14
client/src/index.js
View File

@@ -14,7 +14,7 @@ import { persistor, store } from "./redux/store";
import reportWebVitals from "./reportWebVitals";
import "./translations/i18n";
import "./utils/CleanAxios";
require("dotenv").config();
import { BrowserTracing } from "@sentry/tracing";
// Dinero.defaultCurrency = "CAD";
// Dinero.globalLocale = "en-CA";
@@ -29,10 +29,18 @@ if (process.env.NODE_ENV !== "development") {
"Module specifier, 'zlib' does not start with",
],
integrations: [
// new Integrations.BrowserTracing(),
new BrowserTracing(),
// new Sentry.Integrations.Breadcrumbs({ console: true }),
new Sentry.Replay(),
],
// This sets the sample rate to be 10%. You may want this to be 100% while
// in development and sample at a lower rate in production
replaysSessionSampleRate: 0.1,
// If the entire session is not sampled, use the below sample rate to sample
// sessions when an error occurs.
replaysOnErrorSampleRate: 1.0,
environment: process.env.NODE_ENV,
tracesSampleRate: 0.2,
// We recommend adjusting this value in production, or using tracesSampler
// for finer control
// tracesSampleRate: 0.5,
@@ -41,7 +49,7 @@ if (process.env.NODE_ENV !== "development") {
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<BrowserRouter >
<PersistGate
loading={<LoadingSpinner message="Restoring your settings..." />}
persistor={persistor}

18
client/src/pages/manage/manage.page.component.jsx
View File

@@ -1,5 +1,3 @@
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import { BackTop, Layout } from "antd";
import preval from "preval.macro";
import React, { lazy, Suspense, useEffect } from "react";
@@ -170,18 +168,6 @@ const DmsPayables = lazy(() =>
const { Content, Footer } = Layout;
const stripePromise = new Promise((resolve, reject) => {
// client.query({ query: QUERY_STRIPE_ID }).then((resp) => {
// if (resp.data.bodyshops[0])
resolve(
loadStripe(process.env.REACT_APP_STRIPE_PUBLIC_KEY, {
stripeAccount: "No Stripe Id Resolve",
})
);
// reject();
// });
});
const mapStateToProps = createStructuredSelector({
conflict: selectInstanceConflict,
bodyshop: selectBodyshop,
@@ -207,9 +193,9 @@ export function Manage({ match, conflict, bodyshop }) {
<Suspense
fallback={<LoadingSpinner message={t("general.labels.loadingapp")} />}
>
<Elements stripe={stripePromise}>
<PaymentModalContainer />
</Elements>
<BreadCrumbs />
<BillEnterModalContainer />
<JobCostingModal />

150
client/src/pages/mobile-payment/mobile-payment.component.jsx
View File

@@ -1,81 +1,81 @@
import {
PaymentRequestButtonElement,
useStripe,
} from "@stripe/react-stripe-js";
import React, { useEffect, useState } from "react";
// import {
// PaymentRequestButtonElement,
// useStripe,
// } from "@stripe/react-stripe-js";
// import React, { useEffect, useState } from "react";
export default function MobilePaymentComponent() {
const stripe = useStripe();
// export default function MobilePaymentComponent() {
// const stripe = useStripe();
const [paymentRequest, setPaymentRequest] = useState(null);
useEffect(() => {
if (stripe) {
const pr = stripe.paymentRequest({
country: "CA",
displayItems: [{ label: "Deductible", amount: 1 }],
currency: "cad",
total: {
label: "Demo total",
amount: 1,
},
requestPayerName: true,
requestPayerEmail: true,
});
// const [paymentRequest, setPaymentRequest] = useState(null);
// useEffect(() => {
// if (stripe) {
// const pr = stripe.paymentRequest({
// country: "CA",
// displayItems: [{ label: "Deductible", amount: 1 }],
// currency: "cad",
// total: {
// label: "Demo total",
// amount: 1,
// },
// 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]);
// // 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) {
paymentRequest.on("paymentmethod", async (ev) => {
//Call server side to get the client secret
// Confirm the PaymentIntent without handling potential next actions (yet).
const { error: confirmError } = await stripe.confirmCardPayment(
"clientSecret",
{ payment_method: ev.paymentMethod.id },
{ handleActions: false }
);
// if (paymentRequest) {
// paymentRequest.on("paymentmethod", async (ev) => {
// //Call server side to get the client secret
// // Confirm the PaymentIntent without handling potential next actions (yet).
// const { error: confirmError } = await stripe.confirmCardPayment(
// "clientSecret",
// { payment_method: ev.paymentMethod.id },
// { handleActions: false }
// );
if (confirmError) {
// Report to the browser that the payment failed, prompting it to
// re-show the payment interface, or show an error message and close
// the payment interface.
ev.complete("fail");
} else {
// Report to the browser that the confirmation was successful, prompting
// it to close the browser payment method collection interface.
ev.complete("success");
// Let Stripe.js handle the rest of the payment flow.
const {
error, //paymentIntent
} = await stripe.confirmCardPayment("clientSecret");
if (error) {
// The payment failed -- ask your customer for a new payment method.
} else {
// The payment has succeeded.
}
}
});
return (
<div style={{ height: "300px" }}>
<PaymentRequestButtonElement options={{ paymentRequest }} />
</div>
);
}
// if (confirmError) {
// // Report to the browser that the payment failed, prompting it to
// // re-show the payment interface, or show an error message and close
// // the payment interface.
// ev.complete("fail");
// } else {
// // Report to the browser that the confirmation was successful, prompting
// // it to close the browser payment method collection interface.
// ev.complete("success");
// // Let Stripe.js handle the rest of the payment flow.
// const {
// error, //paymentIntent
// } = await stripe.confirmCardPayment("clientSecret");
// if (error) {
// // The payment failed -- ask your customer for a new payment method.
// } else {
// // The payment has succeeded.
// }
// }
// });
// return (
// <div style={{ height: "300px" }}>
// <PaymentRequestButtonElement options={{ paymentRequest }} />
// </div>
// );
// }
return <div></div>;
}
// return <div></div>;
// }

42
client/src/pages/mobile-payment/mobile-payment.container.jsx
View File

@@ -1,23 +1,23 @@
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import React from "react";
import MobilePaymentComponent from "./mobile-payment.component";
// import { Elements } from "@stripe/react-stripe-js";
// import { loadStripe } from "@stripe/stripe-js";
// import React from "react";
// import MobilePaymentComponent from "./mobile-payment.component";
const stripePromise = new Promise((resolve, reject) => {
resolve(
loadStripe(process.env.REACT_APP_STRIPE_PUBLIC_KEY, {
stripeAccount: "acct_1Fa7lFIEahEZW8b4",
})
);
});
// const stripePromise = new Promise((resolve, reject) => {
// resolve(
// loadStripe(process.env.REACT_APP_STRIPE_PUBLIC_KEY, {
// stripeAccount: "acct_1Fa7lFIEahEZW8b4",
// })
// );
// });
export default function MobilePaymentContainer() {
return (
<div>
The mobile payment container.
<Elements stripe={stripePromise}>
<MobilePaymentComponent />
</Elements>
</div>
);
}
// export default function MobilePaymentContainer() {
// return (
// <div>
// The mobile payment container.
// <Elements stripe={stripePromise}>
// <MobilePaymentComponent />
// </Elements>
// </div>
// );
// }