Added standard payment processing for Stripe BOD-146.

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

@@ -1,24 +1,35 @@
-import { Form } from "antd";
+import { Form, Input, Checkbox } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import JobSearchSelect from "../job-search-select/job-search-select.component";
 import { CardElement } from "@stripe/react-stripe-js";
+import FormLayoutRow from "../layout-form-row/layout-form-row.component";
+import Alert from "../alert/alert.component";
 
-export default function PaymentFormComponent({
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+export function PaymentFormComponent({
   form,
   roAutoCompleteOptions,
   stripeStateArr,
+  bodyshop,
 }) {
   const [stripeState, setStripeState] = stripeStateArr;
-  console.log("stripeState", stripeState);
+
   const { t } = useTranslation();
   const handleStripeChange = (e) => {
+    console.log("e", e);
     setStripeState({ error: e.error, cardComplete: e.complete });
   };
 
   return (
-    <div className="invoice-form-wrapper">
+    <div>
       <Form.Item
         name="jobid"
         label={t("invoices.fields.ro_number")}
@@ -31,30 +42,78 @@ export default function PaymentFormComponent({
       >
         <JobSearchSelect options={roAutoCompleteOptions} />
       </Form.Item>
-
-      <Form.Item label={t("payment.fields.amount")} name="amount">
+      <Form.Item
+        label={t("payments.fields.amount")}
+        name="amount"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required"),
+          },
+        ]}
+      >
         <CurrencyInput />
       </Form.Item>
-      <CardElement
-        options={{
-          style: {
-            base: {
-              color: "#32325d",
-              fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
-              fontSmoothing: "antialiased",
-              fontSize: "16px",
-              "::placeholder": {
-                color: "#aab7c4",
-              },
-            },
-            invalid: {
-              color: "#fa755a",
-              iconColor: "#fa755a",
-            },
-          },
+
+      <Form.Item
+        label={t("payments.fields.transactionid")}
+        name="transactionid"
+      >
+        <Input />
+      </Form.Item>
+
+      <Form.Item label={t("payments.fields.memo")} name="memo">
+        <Input />
+      </Form.Item>
+
+      <Form.Item
+        label={t("payments.labels.electronicpayment")}
+        name="useStripe"
+        valuePropName="checked"
+      >
+        <Checkbox
+          defaultChecked={!!bodyshop.stripe_acct_id}
+          disabled={!!!bodyshop.stripe_acct_id}
+        />
+      </Form.Item>
+
+      {!!!bodyshop.stripe_acct_id ? (
+        <div style={{ fontStyle: "italic" }}>{t("payments.labels.signup")}</div>
+      ) : null}
+
+      <Form.Item shouldUpdate>
+        {() => {
+          if (form.getFieldValue("useStripe"))
+            return (
+              <CardElement
+                options={{
+                  style: {
+                    base: {
+                      color: "#32325d",
+                      //fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
+                      fontSmoothing: "antialiased",
+                      //fontSize: "16px",
+                      "::placeholder": {
+                        color: "#aab7c4",
+                      },
+                    },
+                    invalid: {
+                      color: "#fa755a",
+                      iconColor: "#fa755a",
+                    },
+                  },
+                }}
+                onChange={handleStripeChange}
+              />
+            );
+
+          return null;
         }}
-        onChange={handleStripeChange}
-      />
+      </Form.Item>
+      {stripeState.error ? (
+        <Alert type="error" message={stripeState.error.message} />
+      ) : null}
     </div>
   );
 }
+export default connect(mapStateToProps, null)(PaymentFormComponent);

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

@@ -10,7 +10,12 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
 
-export function PaymentFormContainer({ bodyshop, form,stripeStateArr }) {
+export function PaymentFormContainer({
+  bodyshop,
+  form,
+  stripeStateArr,
+
+}) {
   const { data: RoAutoCompleteData } = useQuery(ACTIVE_JOBS_FOR_AUTOCOMPLETE, {
     variables: { statuses: bodyshop.md_ro_statuses.open_statuses || ["Open*"] },
   });
@@ -21,6 +26,7 @@ export function PaymentFormContainer({ bodyshop, form,stripeStateArr }) {
         form={form}
         roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
         stripeStateArr={stripeStateArr}
+     
       />
     </div>
   );