From 9c03d48fc277c168069b325747d89c40a5e0c842 Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Thu, 14 Jan 2021 15:17:16 -0800 Subject: [PATCH] View and edit payments IO-531 --- .../components/header/header.component.jsx | 2 +- .../jobs-detail-totals.component.jsx | 2 +- .../payment-form/payment-form.component.jsx | 23 ++-- .../payment-form/payment-form.container.jsx | 18 --- .../payment-modal/payment-modal.container.jsx | 120 +++++++++++------- .../payment-list-paginated.component.jsx | 2 +- client/src/graphql/payments.queries.js | 9 +- 7 files changed, 96 insertions(+), 80 deletions(-) delete mode 100644 client/src/components/payment-form/payment-form.container.jsx diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx index 1347c1d89..f1f65bc68 100644 --- a/client/src/components/header/header.component.jsx +++ b/client/src/components/header/header.component.jsx @@ -214,7 +214,7 @@ function Header({ onClick={() => { setPaymentContext({ actions: {}, - context: {}, + context: null, }); }} > diff --git a/client/src/components/jobs-detail-totals/jobs-detail-totals.component.jsx b/client/src/components/jobs-detail-totals/jobs-detail-totals.component.jsx index 69b86ca4b..ffcc2d0e8 100644 --- a/client/src/components/jobs-detail-totals/jobs-detail-totals.component.jsx +++ b/client/src/components/jobs-detail-totals/jobs-detail-totals.component.jsx @@ -103,7 +103,7 @@ export function JobsDetailTotals({ onClick={() => setPaymentContext({ actions: { refetch: refetch }, - context: { jobId: job.id }, + context: { jobid: job.id }, }) } > diff --git a/client/src/components/payment-form/payment-form.component.jsx b/client/src/components/payment-form/payment-form.component.jsx index d7409ccb1..6493b32d4 100644 --- a/client/src/components/payment-form/payment-form.component.jsx +++ b/client/src/components/payment-form/payment-form.component.jsx @@ -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 }) { }, ]} > - + - + - + - + - {t("payments.labels.customer")} @@ -89,7 +94,7 @@ export function PaymentFormComponent({ form, stripeStateArr, bodyshop }) { }, ]} > - Visa Mastercard AMEX @@ -106,7 +111,7 @@ export function PaymentFormComponent({ form, stripeStateArr, bodyshop }) { > @@ -115,7 +120,7 @@ export function PaymentFormComponent({ form, stripeStateArr, bodyshop }) { name="sendby" initialValue="email" > - + {t("general.labels.email")} {t("general.labels.print")} diff --git a/client/src/components/payment-form/payment-form.container.jsx b/client/src/components/payment-form/payment-form.container.jsx deleted file mode 100644 index 3e1b3e4c6..000000000 --- a/client/src/components/payment-form/payment-form.container.jsx +++ /dev/null @@ -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 ( -
- -
- ); -} -export default connect(mapStateToProps, null)(PaymentFormContainer); diff --git a/client/src/components/payment-modal/payment-modal.container.jsx b/client/src/components/payment-modal/payment-modal.container.jsx index 1456b1230..c56499f2c 100644 --- a/client/src/components/payment-modal/payment-modal.container.jsx +++ b/client/src/components/payment-modal/payment-modal.container.jsx @@ -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 ( form.submit()} onCancel={handleCancel} - afterClose={() => form.resetFields()} okButtonProps={{ loading: loading, }} - destroyOnClose > +
- +
); diff --git a/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx b/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx index 8e192e972..9b4d76a87 100644 --- a/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx +++ b/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx @@ -130,7 +130,7 @@ export function PaymentsListPaginated({ onClick={() => { setPaymentContext({ actions: { refetch: refetch }, - context: { record }, + context: record , }); }} > diff --git a/client/src/graphql/payments.queries.js b/client/src/graphql/payments.queries.js index 6d8d0a00d..5103358f1 100644 --- a/client/src/graphql/payments.queries.js +++ b/client/src/graphql/payments.queries.js @@ -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 } } }