Added standard payment processing for Stripe BOD-146.

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

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