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

import { useTreatments } from "@splitsoftware/splitio-react";
import { CardElement } from "@stripe/react-stripe-js";
import { Checkbox, Form, Input, Radio, Select } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import Alert from "../alert/alert.component";
import DatePickerFormItem from "../form-date-picker/form-date-picker.component";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import JobSearchSelect from "../job-search-select/job-search-select.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import PaymentFormTotalPayments from "./payment-form.totalpayments.component";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
});

export function PaymentFormComponent({
  form,
  stripeStateArr,
  bodyshop,
  disabled,
}) {
  const [stripeState, setStripeState] = stripeStateArr;
  const { Qb_Multi_Ar } = useTreatments(
    ["Qb_Multi_Ar"],
    {},
    bodyshop && bodyshop.imexshopid
  );

  const { t } = useTranslation();
  const handleStripeChange = (e) => {
    setStripeState({ error: e.error, cardComplete: e.complete });
  };

  return (
    <div>
      <LayoutFormRow grow>
        <Form.Item
          name="jobid"
          label={t("bills.fields.ro_number")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <JobSearchSelect disabled={disabled} notExported={false} clm_no />
        </Form.Item>
        <Form.Item
          shouldUpdate={(prev, cur) => cur.jobid && prev.jobid !== cur.jobid}
        >
          {() => {
            return (
              <PaymentFormTotalPayments jobid={form.getFieldValue("jobid")} />
            );
          }}
        </Form.Item>
      </LayoutFormRow>

      <LayoutFormRow grow>
        <Form.Item
          label={t("payments.fields.amount")}
          name="amount"
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <CurrencyInput disabled={disabled} />
        </Form.Item>
        <Form.Item
          label={t("payments.fields.transactionid")}
          name="transactionid"
        >
          <Input disabled={disabled} />
        </Form.Item>
        <Form.Item label={t("payments.fields.memo")} name="memo">
          <Input disabled={disabled} />
        </Form.Item>
        <Form.Item
          label={t("payments.fields.date")}
          name="date"
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <DatePickerFormItem disabled={disabled} />
        </Form.Item>
      </LayoutFormRow>

      <LayoutFormRow grow>
        <Form.Item
          label={t("payments.fields.payer")}
          name="payer"
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <Select disabled={disabled}>
            <Select.Option value={t("payments.labels.customer")}>
              {t("payments.labels.customer")}
            </Select.Option>
            {Qb_Multi_Ar.treatment === "on" ? (
              <>
                <Select.OptGroup label={t("payments.labels.external")}>
                  {bodyshop.md_ins_cos.map((i, idx) => (
                    <Select.Option key={idx} value={i.name}>
                      {i.name}
                    </Select.Option>
                  ))}
                </Select.OptGroup>
              </>
            ) : (
              <Select.Option value={t("payments.labels.insurance")}>
                {t("payments.labels.insurance")}
              </Select.Option>
            )}
          </Select>
        </Form.Item>

        <Form.Item
          label={t("payments.fields.type")}
          name="type"
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <Select disabled={disabled}>
            {bodyshop.md_payment_types.map((v, idx) => (
              <Select.Option key={idx} value={v}>
                {v}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
      </LayoutFormRow>
      <LayoutFormRow grow>
        <div>
          <Form.Item
            label={t("payments.labels.electronicpayment")}
            name="useStripe"
            valuePropName="checked"
          >
            <Checkbox
              defaultChecked={!!bodyshop.stripe_acct_id}
              disabled={!!!bodyshop.stripe_acct_id || disabled}
            />
          </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;
            }}
          </Form.Item>
          {stripeState.error ? (
            <Alert type="error" message={stripeState.error.message} />
          ) : null}
        </div>
        <Form.Item
          label={t("general.labels.sendby")}
          name="sendby"
          initialValue="none"
        >
          <Radio.Group disabled={disabled}>
            <Radio value="none">{t("general.labels.none")}</Radio>
            <Radio value="email">{t("general.labels.email")}</Radio>
            <Radio value="print">{t("general.labels.print")}</Radio>
          </Radio.Group>
        </Form.Item>
      </LayoutFormRow>
    </div>
  );
}
export default connect(mapStateToProps, null)(PaymentFormComponent);