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

Added payment type to modal and lists BOD-230

Browse Source
This commit is contained in:
Patrick Fic
2020-07-30 09:48:04 -07:00
parent 12a925c678
commit 40ffede622
12 changed files with 158 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
.vscode/bodyshopsnippets.code-snippets vendored Normal file
View File

@@ -0,0 +1,64 @@
{
// Place your bodyshop workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
// "Print to console": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"Const T useTranslation": {
"prefix": "ttt",
"body": ["const { t } = useTranslation();"],
"description": "Use Translation Destructing."
},
" useTranslation import": {
"prefix": "tti",
"body": ["import { useTranslation } from \"react-i18next\";"],
"description": "Use Translation import."
},
"Redux Setup": {
"prefix": "rdx",
"body": [
"import { connect } from \"react-redux\";",
"import { createStructuredSelector } from \"reselect\";",
"const mapStateToProps = createStructuredSelector({",
" //currentUser: selectCurrentUser",
"});",
"const mapDispatchToProps = dispatch => ({",
" //setUserLanguage: language => dispatch(setUserLanguage(language))",
"});",
"export default connect (mapStateToProps,mapDispatchToProps)();"
],
"description": "General Redux."
},
" Apollo Loading Error Handling import": {
"prefix": "ale",
"body": [
"if (loading) return <LoadingSpinner />;",
"if (error) return <AlertComponent message={error.message} type=\"error\" />;"
],
"description": "Apollo Loading Error Handling import."
},
"Log IMEX EVent Import": {
"prefix": "liei",
"body": [
"import { logImEXEvent } from \"../../firebase/firebase.utils\"; "
],
"description": "Apollo Loading Error Handling import."
},
"Log IMEX EVent": {
"prefix": "lie",
"body": ["logImEXEvent(\"EventName\", { prop: \"value\" });"],
"description": ""
}
}

2
admin/package.json
View File

@@ -21,7 +21,7 @@
"react-scripts": "3.4.1"
},
"scripts": {
"start": "set PORT=3001 &&react-scripts start",
"start": "set PORT=3001 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"

23
bodyshop_translations.babel
View File

@@ -1,4 +1,4 @@
<babeledit_project version="1.2" be_version="2.6.1">
<babeledit_project be_version="2.7.1" version="1.2">
<!--
BabelEdit project file
@@ -17142,6 +17142,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>type</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>

2
client/src/components/jobs-detail-financial/jobs-detail-financial.component.jsx
View File

@@ -37,6 +37,7 @@ export function JobsDetailFinancials({ job, bodyshop }) {
<th>{t("payments.fields.payer")}</th>
<th>{t("payments.fields.amount")}</th>
<th>{t("payments.fields.memo")}</th>
<th>{t("payments.fields.type")}</th>
<th>{t("payments.fields.transactionid")}</th>
<th>{t("payments.fields.stripeid")}</th>
</tr>
@@ -52,6 +53,7 @@ export function JobsDetailFinancials({ job, bodyshop }) {
<CurrencyFormatter>{p.amount}</CurrencyFormatter>
</td>
<td>{p.memo}</td>
<td>{p.type}</td>
<td>{p.transactionid}</td>
<td>
{p.stripeid ? (

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

@@ -1,5 +1,5 @@
import { CardElement } from "@stripe/react-stripe-js";
import { Checkbox, Form, Input, Radio } from "antd";
import { Checkbox, Form, Input, Radio, Select } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
@@ -65,6 +65,25 @@ export function PaymentFormComponent({
<Input />
</Form.Item>
<Form.Item
label={t("payments.labels.type")}
name="type"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Select>
<Select.Option value="Visa">Visa</Select.Option>
<Select.Option value="Mastercard">Mastercard</Select.Option>
<Select.Option value="AMEX">AMEX</Select.Option>
<Select.Option value="Discover">Discover</Select.Option>
<Select.Option value="Cash">Cash</Select.Option>
</Select>
</Form.Item>
<Form.Item
label={t("payments.labels.electronicpayment")}
name="useStripe"

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

@@ -78,6 +78,11 @@ export default function PaymentsListPaginated({
dataIndex: "memo",
key: "memo",
},
{
title: t("payments.fields.type"),
dataIndex: "type",
key: "type",
},
{
title: t("payments.fields.transactionid"),
dataIndex: "transactionid",

1
client/src/graphql/payments.queries.js
View File

@@ -36,6 +36,7 @@ export const QUERY_ALL_PAYMENTS_PAGINATED = gql`
}
transactionid
memo
type
amount
stripeid
exportedat

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

@@ -1,17 +1,8 @@
import axios from "axios";
import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { auth, logImEXEvent } from "../../firebase/firebase.utils";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { setEmailOptions } from "../../redux/email/email.actions";
import { TemplateList } from "../../utils/TemplateConstants";
import {
PaymentRequestButtonElement,
useStripe,
Elements,
useElements,
useStripe
} from "@stripe/react-stripe-js";
import React, { useEffect, useState } from "react";
export default function MobilePaymentComponent() {
const stripe = useStripe();
@@ -39,9 +30,9 @@ export default function MobilePaymentComponent() {
if (result) {
setPaymentRequest(pr);
} else {
var details = {
total: { label: "", amount: { currency: "CAD", value: "0.00" } },
};
// var details = {
// total: { label: "", amount: { currency: "CAD", value: "0.00" } },
// };
// new PaymentRequest(
// [{ supportedMethods: ["basic-card"] }],
// {}
@@ -53,35 +44,36 @@ export default function MobilePaymentComponent() {
}, [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 }
// );
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.
// }
// }
// });
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.
console.log('paymentIntent', paymentIntent)
}
}
});
return (
<div style={{ height: "300px" }}>
<PaymentRequestButtonElement options={{ paymentRequest }} />

3
client/src/translations/en_us/common.json
View File

@@ -1054,7 +1054,8 @@
"electronicpayment": "Use Electronic Payment Processing?",
"new": "New Payment",
"signup": "Please contact support to sign up for electronic payments.",
"title": "Payments"
"title": "Payments",
"type": "Type"
},
"successes": {
"payment": "Payment created successfully. ",

3
client/src/translations/es/common.json
View File

@@ -1054,7 +1054,8 @@
"electronicpayment": "",
"new": "",
"signup": "",
"title": ""
"title": "",
"type": ""
},
"successes": {
"payment": "",

3
client/src/translations/fr/common.json
View File

@@ -1054,7 +1054,8 @@
"electronicpayment": "",
"new": "",
"signup": "",
"title": ""
"title": "",
"type": ""
},
"successes": {
"payment": "",

5
package.json
View File

@@ -3,7 +3,7 @@
"version": "0.0.1",
"license": "UNLICENSED",
"engines": {
"node": "12.16.2",
"node": "12.18.3",
"npm": "6.11.3"
},
"scripts": {
@@ -12,7 +12,8 @@
"client": "cd client && yarn start",
"server": "nodemon server.js",
"build": "cd client && npm run build",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\" \"yarn admin\"",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"",
"deva": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\" \"yarn admin\"",
"start": "node server.js",
"heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"
},