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