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

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

@@ -0,0 +1,60 @@
+import { Form } 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";
+
+export default function PaymentFormComponent({
+  form,
+  roAutoCompleteOptions,
+  stripeStateArr,
+}) {
+  const [stripeState, setStripeState] = stripeStateArr;
+  console.log("stripeState", stripeState);
+  const { t } = useTranslation();
+  const handleStripeChange = (e) => {
+    setStripeState({ error: e.error, cardComplete: e.complete });
+  };
+
+  return (
+    <div className="invoice-form-wrapper">
+      <Form.Item
+        name="jobid"
+        label={t("invoices.fields.ro_number")}
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required"),
+          },
+        ]}
+      >
+        <JobSearchSelect options={roAutoCompleteOptions} />
+      </Form.Item>
+
+      <Form.Item label={t("payment.fields.amount")} name="amount">
+        <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",
+            },
+          },
+        }}
+        onChange={handleStripeChange}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,28 @@
+import { useQuery } from "@apollo/react-hooks";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import PaymentFormComponent from "./payment-form.component";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+export function PaymentFormContainer({ bodyshop, form,stripeStateArr }) {
+  const { data: RoAutoCompleteData } = useQuery(ACTIVE_JOBS_FOR_AUTOCOMPLETE, {
+    variables: { statuses: bodyshop.md_ro_statuses.open_statuses || ["Open*"] },
+  });
+
+  return (
+    <div>
+      <PaymentFormComponent
+        form={form}
+        roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
+        stripeStateArr={stripeStateArr}
+      />
+    </div>
+  );
+}
+export default connect(mapStateToProps, null)(PaymentFormContainer);