View and edit payments IO-531

client/src/components/header/header.component.jsx

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

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 },
               })
             }
           >

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 }) {
           },
         ]}
       >
-        <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>

client/src/components/payment-form/payment-form.container.jsx

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

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 { TemplateList } from "../../utils/TemplateConstants";
-import { logImEXEvent } from "../../firebase/firebase.utils";
+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({
+      if (!context || (context && !context.id)) {
-        variables: {
+        const newPayment = await insertPayment({
-          paymentInput: {
+          variables: {
-            ...paymentObj,
+            paymentInput: {
-            stripeid:
+              ...paymentObj,
-              stripePayment &&
+              stripeid:
-              stripePayment.paymentIntent &&
+                stripePayment &&
-              stripePayment.paymentIntent.id,
+                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,
             },
           },
         });
-      } else {
+
-        displayTemplateInWindow(
+        if (!!!newPayment.errors) {
-          await RenderTemplate(
+          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>
   );

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 ,
               });
             }}
           >

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
       }
     }
   }