Added payments schema and connected to stripe BOD-146 BOD-147

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

@@ -0,0 +1,125 @@
+import { useElements, useStripe, CardElement } from "@stripe/react-stripe-js";
+import { Form, Modal } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+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";
+const mapStateToProps = createStructuredSelector({
+  paymentModal: selectPayment,
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  toggleModalVisible: () => dispatch(toggleModalVisible("payment")),
+});
+
+function InvoiceEnterModalContainer({
+  paymentModal,
+  toggleModalVisible,
+  bodyshop,
+  currentUser,
+}) {
+  const [form] = Form.useForm();
+  const stripe = useStripe();
+  const elements = useElements();
+  const { t } = useTranslation();
+  const { context, actions, visible } = paymentModal;
+  const [loading, setLoading] = useState(false);
+  const stripeStateArr = useState({
+    error: null,
+    cardComplete: false,
+  });
+  const [stripeState, setStripeState] = stripeStateArr;
+
+  const cardValid = !!!stripeState.error && stripeState.cardComplete;
+
+  const handleFinish = async (values) => {
+    if (!cardValid) return;
+
+    if (!stripe || !elements) {
+      // Stripe.js has not yet loaded.
+      // 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);
+
+      if (actions.refetch) actions.refetch();
+    } catch (error) {
+      console.log("error", error);
+    }
+
+    setLoading(false);
+    // toggleModalVisible();
+  };
+
+  const handleCancel = () => {
+    toggleModalVisible();
+  };
+
+  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
+    >
+      <Form
+        onFinish={handleFinish}
+        autoComplete={"off"}
+        form={form}
+        initialValues={{ jobid: context.jobId }}
+      >
+        <PaymentForm form={form} stripeStateArr={stripeStateArr} />
+      </Form>
+    </Modal>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(InvoiceEnterModalContainer);