Added standard payment processing for Stripe BOD-146.

This commit is contained in:
Patrick Fic
2020-06-16 08:54:58 -07:00
parent 05bf94e808
commit ef81991046
25 changed files with 599 additions and 84 deletions

View File

@@ -1,4 +1,4 @@
<babeledit_project version="1.2" be_version="2.6.1">
<babeledit_project be_version="2.6.1" version="1.2">
<!--
BabelEdit project file
@@ -14659,9 +14659,98 @@
<folder_node>
<name>payments</name>
<children>
<folder_node>
<name>fields</name>
<children>
<concept_node>
<name>amount</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>memo</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>transactionid</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children>
</folder_node>
<folder_node>
<name>labels</name>
<children>
<concept_node>
<name>electronicpayment</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>new</name>
<definition_loaded>false</definition_loaded>
@@ -14683,6 +14772,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>signup</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children>
</folder_node>
</children>

View File

@@ -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);

View File

@@ -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>
);

View File

@@ -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);

View File

@@ -0,0 +1,11 @@
import gql from "graphql-tag";
export const INSERT_NEW_PAYMENT = gql`
mutation INSERT_NEW_PAYMENT($paymentInput: [payments_insert_input!]!) {
insert_payments(objects: $paymentInput) {
returning {
id
}
}
}
`;

View File

@@ -913,8 +913,15 @@
}
},
"payments": {
"fields": {
"amount": "Amount",
"memo": "Memo",
"transactionid": "Transaction Reference"
},
"labels": {
"new": "New Payment"
"electronicpayment": "Use Electronic Payment Processing?",
"new": "New Payment",
"signup": "Please contact support to sign up for electronic payments."
}
},
"printcenter": {

View File

@@ -913,8 +913,15 @@
}
},
"payments": {
"fields": {
"amount": "",
"memo": "",
"transactionid": ""
},
"labels": {
"new": ""
"electronicpayment": "",
"new": "",
"signup": ""
}
},
"printcenter": {

View File

@@ -913,8 +913,15 @@
}
},
"payments": {
"fields": {
"amount": "",
"memo": "",
"transactionid": ""
},
"labels": {
"new": ""
"electronicpayment": "",
"new": "",
"signup": ""
}
},
"printcenter": {

View File

@@ -0,0 +1,5 @@
- args:
cascade: false
read_only: false
sql: ALTER TABLE "public"."payments" DROP COLUMN "transactionid";
type: run_sql

View File

@@ -0,0 +1,5 @@
- args:
cascade: false
read_only: false
sql: ALTER TABLE "public"."payments" ADD COLUMN "transactionid" text NULL;
type: run_sql

View File

@@ -0,0 +1,5 @@
- args:
cascade: false
read_only: false
sql: ALTER TABLE "public"."payments" DROP COLUMN "memo";
type: run_sql

View File

@@ -0,0 +1,5 @@
- args:
cascade: false
read_only: false
sql: ALTER TABLE "public"."payments" ADD COLUMN "memo" text NULL;
type: run_sql

View File

@@ -0,0 +1,5 @@
- args:
cascade: false
read_only: false
sql: ALTER TABLE "public"."payments" ALTER COLUMN "amount" TYPE integer;
type: run_sql

View File

@@ -0,0 +1,5 @@
- args:
cascade: false
read_only: false
sql: ALTER TABLE "public"."payments" ALTER COLUMN "amount" TYPE numeric;
type: run_sql

View File

@@ -0,0 +1,5 @@
- args:
cascade: false
read_only: false
sql: ALTER TABLE "public"."payments" DROP COLUMN "stripeid";
type: run_sql

View File

@@ -0,0 +1,5 @@
- args:
cascade: false
read_only: false
sql: ALTER TABLE "public"."payments" ADD COLUMN "stripeid" text NULL;
type: run_sql

View File

@@ -0,0 +1,33 @@
- args:
role: user
table:
name: payments
schema: public
type: drop_insert_permission
- args:
permission:
check:
job:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
columns:
- id
- created_at
- updated_at
- jobid
- amount
localPresets:
- key: ""
value: ""
set: {}
role: user
table:
name: payments
schema: public
type: create_insert_permission

View File

@@ -0,0 +1,36 @@
- args:
role: user
table:
name: payments
schema: public
type: drop_insert_permission
- args:
permission:
check:
job:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
columns:
- id
- created_at
- updated_at
- jobid
- amount
- transactionid
- memo
- stripeid
localPresets:
- key: ""
value: ""
set: {}
role: user
table:
name: payments
schema: public
type: create_insert_permission

View File

@@ -0,0 +1,31 @@
- args:
role: user
table:
name: payments
schema: public
type: drop_select_permission
- args:
permission:
allow_aggregations: false
columns:
- amount
- created_at
- updated_at
- id
- jobid
computed_fields: []
filter:
job:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
role: user
table:
name: payments
schema: public
type: create_select_permission

View File

@@ -0,0 +1,34 @@
- args:
role: user
table:
name: payments
schema: public
type: drop_select_permission
- args:
permission:
allow_aggregations: false
columns:
- amount
- memo
- stripeid
- transactionid
- created_at
- updated_at
- id
- jobid
computed_fields: []
filter:
job:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
role: user
table:
name: payments
schema: public
type: create_select_permission

View File

@@ -0,0 +1,33 @@
- args:
role: user
table:
name: payments
schema: public
type: drop_update_permission
- args:
permission:
columns:
- amount
- created_at
- updated_at
- id
- jobid
filter:
job:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
localPresets:
- key: ""
value: ""
set: {}
role: user
table:
name: payments
schema: public
type: create_update_permission

View File

@@ -0,0 +1,36 @@
- args:
role: user
table:
name: payments
schema: public
type: drop_update_permission
- args:
permission:
columns:
- amount
- memo
- stripeid
- transactionid
- created_at
- updated_at
- id
- jobid
filter:
job:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
localPresets:
- key: ""
value: ""
set: {}
role: user
table:
name: payments
schema: public
type: create_update_permission

View File

@@ -67,6 +67,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
delete_permissions:
- role: user
permission:
@@ -164,6 +165,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
delete_permissions:
- role: user
permission:
@@ -207,6 +209,7 @@ tables:
user:
authid:
_eq: X-Hasura-User-Id
check: null
- table:
schema: public
name: audit_trail
@@ -319,6 +322,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
delete_permissions:
- role: user
permission:
@@ -517,6 +521,7 @@ tables:
user:
authid:
_eq: X-Hasura-User-Id
check: null
- table:
schema: public
name: cccontracts
@@ -650,6 +655,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
delete_permissions:
- role: user
permission:
@@ -740,6 +746,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
- table:
schema: public
name: counters
@@ -876,6 +883,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
delete_permissions:
- role: user
permission:
@@ -969,6 +977,7 @@ tables:
filter:
valid:
_eq: true
check: null
- role: user
permission:
columns:
@@ -990,6 +999,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
- table:
schema: public
name: csiquestions
@@ -1064,6 +1074,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
- table:
schema: public
name: documents
@@ -1134,6 +1145,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
delete_permissions:
- role: user
permission:
@@ -1247,6 +1259,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
delete_permissions:
- role: user
permission:
@@ -1344,6 +1357,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
delete_permissions:
- role: user
permission:
@@ -1477,6 +1491,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
- table:
schema: public
name: job_conversations
@@ -1535,6 +1550,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
delete_permissions:
- role: user
permission:
@@ -1763,6 +1779,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
delete_permissions:
- role: user
permission:
@@ -2612,6 +2629,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
delete_permissions:
- role: user
permission:
@@ -2723,6 +2741,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
delete_permissions:
- role: user
permission:
@@ -2812,6 +2831,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
delete_permissions:
- role: user
permission:
@@ -2939,6 +2959,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
delete_permissions:
- role: user
permission:
@@ -3042,6 +3063,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
delete_permissions:
- role: user
permission:
@@ -3157,6 +3179,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
delete_permissions:
- role: user
permission:
@@ -3196,11 +3219,17 @@ tables:
- updated_at
- jobid
- amount
- transactionid
- memo
- stripeid
select_permissions:
- role: user
permission:
columns:
- amount
- memo
- stripeid
- transactionid
- created_at
- updated_at
- id
@@ -3220,6 +3249,9 @@ tables:
permission:
columns:
- amount
- memo
- stripeid
- transactionid
- created_at
- updated_at
- id
@@ -3234,6 +3266,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
delete_permissions:
- role: user
permission:
@@ -3370,6 +3403,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
delete_permissions:
- role: user
permission:
@@ -3476,6 +3510,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
delete_permissions:
- role: user
permission:
@@ -3551,6 +3586,7 @@ tables:
filter:
authid:
_eq: X-Hasura-User-Id
check: null
- table:
schema: public
name: vehicles
@@ -3680,6 +3716,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
delete_permissions:
- role: user
permission:
@@ -3813,6 +3850,7 @@ tables:
_eq: X-Hasura-User-Id
- active:
_eq: true
check: null
delete_permissions:
- role: user
permission:

View File

@@ -16,27 +16,13 @@ exports.payment = async (req, res) => {
console.log("exports.payment -> amount", amount);
console.log("exports.payment -> stripe_acct_id", stripe_acct_id);
try {
const pr = await stripe.paymentRequest.create({
country: "CA",
currency: "cad",
total: {
label: "Demo total",
amount: 1099,
},
requestPayerName: true,
requestPayerEmail: true,
});
console.log(pr);
await stripe.paymentIntents
.create(
{
payment_method_types: ["card"],
amount: amount,
currency: "cad",
application_fee_amount: 100,
application_fee_amount: 50,
},
{
stripeAccount: stripe_acct_id,