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

View and edit payments IO-531

Browse Source
This commit is contained in:
Patrick Fic
2021-01-14 15:17:16 -08:00
parent f1e26f58a4
commit 9c03d48fc2
7 changed files with 96 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/header/header.component.jsx
View File

@@ -214,7 +214,7 @@ function Header({
onClick={() => {
setPaymentContext({
actions: {},
context: {},
context: null,
});
}}
>

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

@@ -103,7 +103,7 @@ export function JobsDetailTotals({
onClick={() =>
setPaymentContext({
actions: { refetch: refetch },
context: { jobId: job.id },
context: { jobid: job.id },
})
}
>

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

@@ -13,7 +13,12 @@ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
export function PaymentFormComponent({ form, stripeStateArr, bodyshop }) {
export function PaymentFormComponent({
form,
stripeStateArr,
bodyshop,
disabled,
}) {
const [stripeState, setStripeState] = stripeStateArr;
const { t } = useTranslation();
@@ -33,7 +38,7 @@ export function PaymentFormComponent({ form, stripeStateArr, bodyshop }) {
},
]}
>
<JobSearchSelect />
<JobSearchSelect disabled={disabled} />
</Form.Item>
<Form.Item
label={t("payments.fields.amount")}
@@ -45,18 +50,18 @@ export function PaymentFormComponent({ form, stripeStateArr, bodyshop }) {
},
]}
>
<CurrencyInput />
<CurrencyInput disabled={disabled} />
</Form.Item>
<Form.Item
label={t("payments.fields.transactionid")}
name="transactionid"
>
<Input />
<Input disabled={disabled} />
</Form.Item>
<Form.Item label={t("payments.fields.memo")} name="memo">
<Input />
<Input disabled={disabled} />
</Form.Item>
<Form.Item
@@ -69,7 +74,7 @@ export function PaymentFormComponent({ form, stripeStateArr, bodyshop }) {
},
]}
>
<Select>
<Select disabled={disabled}>
<Select.Option value={t("payments.labels.customer")}>
{t("payments.labels.customer")}
</Select.Option>
@@ -89,7 +94,7 @@ export function PaymentFormComponent({ form, stripeStateArr, bodyshop }) {
},
]}
>
<Select>
<Select disabled={disabled}>
<Select.Option value="Visa">Visa</Select.Option>
<Select.Option value="Mastercard">Mastercard</Select.Option>
<Select.Option value="AMEX">AMEX</Select.Option>
@@ -106,7 +111,7 @@ export function PaymentFormComponent({ form, stripeStateArr, bodyshop }) {
>
<Checkbox
defaultChecked={!!bodyshop.stripe_acct_id}
disabled={!!!bodyshop.stripe_acct_id}
disabled={!!!bodyshop.stripe_acct_id || disabled}
/>
</Form.Item>
@@ -115,7 +120,7 @@ export function PaymentFormComponent({ form, stripeStateArr, bodyshop }) {
name="sendby"
initialValue="email"
>
<Radio.Group>
<Radio.Group disabled={disabled}>
<Radio.Button value="email">{t("general.labels.email")}</Radio.Button>
<Radio.Button value="print">{t("general.labels.print")}</Radio.Button>
</Radio.Group>

18
client/src/components/payment-form/payment-form.container.jsx
View File

@@ -1,18 +0,0 @@
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import PaymentFormComponent from "./payment-form.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
export function PaymentFormContainer({ bodyshop, form, stripeStateArr }) {
return (
<div>
<PaymentFormComponent form={form} stripeStateArr={stripeStateArr} />
</div>
);
}
export default connect(mapStateToProps, null)(PaymentFormContainer);

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

@@ -1,25 +1,28 @@
import { useElements, useStripe, CardElement } from "@stripe/react-stripe-js";
import { useMutation } from "@apollo/react-hooks";
import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
import { Form, Modal, notification } from "antd";
import React, { useState, useEffect } from "react";
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 {
INSERT_NEW_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,
} 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";
import { TemplateList } from "../../utils/TemplateConstants";
import RenderTemplate, {
displayTemplateInWindow,
} from "../../utils/RenderTemplate";
import { setEmailOptions } from "../../redux/email/email.actions";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { TemplateList } from "../../utils/TemplateConstants";
import PaymentForm from "../payment-form/payment-form.component";
const mapStateToProps = createStructuredSelector({
paymentModal: selectPayment,
@@ -41,6 +44,7 @@ function BillEnterModalContainer({
}) {
const [form] = Form.useForm();
const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
const [updatePayment] = useMutation(UPDATE_PAYMENT);
const stripe = useStripe();
const elements = useElements();
const { t } = useTranslation();
@@ -98,49 +102,64 @@ function BillEnterModalContainer({
}
logImEXEvent("payment_insert");
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 (sendby === "email") {
setEmailOptions({
messageOptions: {
// to: [appData.email],
replyTo: bodyshop.email,
},
template: {
name: TemplateList().payment_receipt.key,
variables: {
id: newPayment.data.insert_payments.returning[0].id,
if (!context || (context && !context.id)) {
const newPayment = await insertPayment({
variables: {
paymentInput: {
...paymentObj,
stripeid:
stripePayment &&
stripePayment.paymentIntent &&
stripePayment.paymentIntent.id,
},
},
});
} else {
displayTemplateInWindow(
await RenderTemplate(
{
if (!!!newPayment.errors) {
notification["success"]({ message: t("payments.successes.payment") });
} else {
notification["error"]({ message: t("payments.errors.payment") });
}
if (sendby === "email") {
setEmailOptions({
messageOptions: {
// to: [appData.email],
replyTo: bodyshop.email,
},
template: {
name: TemplateList().payment_receipt.key,
variables: {
id: newPayment.data.insert_payments.returning[0].id,
},
},
bodyshop
)
);
});
} else {
displayTemplateInWindow(
await RenderTemplate(
{
name: TemplateList().payment_receipt.key,
variables: {
id: newPayment.data.insert_payments.returning[0].id,
},
},
bodyshop
)
);
}
} else {
const updatedPayment = await updatePayment({
variables: {
paymentId: context.id,
payment: paymentObj,
},
});
if (!!!updatedPayment.errors) {
notification["success"]({ message: t("payments.successes.payment") });
} else {
notification["error"]({ message: t("payments.errors.payment") });
}
}
if (actions.refetch) actions.refetch();
@@ -158,7 +177,7 @@ function BillEnterModalContainer({
useEffect(() => {
if (visible) form.resetFields();
}, [visible, form]);
}, [visible, form, context]);
return (
<Modal
@@ -167,20 +186,23 @@ function BillEnterModalContainer({
okText={t("general.actions.save")}
onOk={() => form.submit()}
onCancel={handleCancel}
afterClose={() => form.resetFields()}
okButtonProps={{
loading: loading,
}}
destroyOnClose
>
<button onClick={() => form.resetFields()}>reste</button>
<Form
onFinish={handleFinish}
autoComplete={"off"}
form={form}
layout="vertical"
initialValues={context}
initialValues={context || {}}
>
<PaymentForm form={form} stripeStateArr={stripeStateArr} />
<PaymentForm
form={form}
stripeStateArr={stripeStateArr}
disabled={context && context.stripeid}
/>
</Form>
</Modal>
);

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

@@ -130,7 +130,7 @@ export function PaymentsListPaginated({
onClick={() => {
setPaymentContext({
actions: { refetch: refetch },
context: { record },
context: record ,
});
}}
>

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

@@ -55,7 +55,14 @@ export const UPDATE_PAYMENT = gql`
update_payments(where: { id: { _eq: $paymentId } }, _set: $payment) {
returning {
id
exported_at
transactionid
memo
type
amount
stripeid
exportedat
stripeid
payer
}
}
}