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

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";

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

export function PaymentFormComponent({
  form,
  stripeStateArr,
  bodyshop,
  disabled,
}) {
  const [stripeState, setStripeState] = stripeStateArr;

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

  return (
    <div>
      <Form.Item
        name="jobid"
        label={t("bills.fields.ro_number")}
        rules={[
          {
            required: true,
            message: t("general.validation.required"),
          },
        ]}
      >
        <JobSearchSelect disabled={disabled} notExported={false} />
      </Form.Item>
      <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>
      <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>
          <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}>
          <Select.Option value="Visa">Visa</Select.Option>
          <Select.Option value="Master Card">Mastercard</Select.Option>
          <Select.Option value="American Express">
            American Express
          </Select.Option>
          <Select.Option value="Discover">Discover</Select.Option>
          <Select.Option value="Cash">Cash</Select.Option>
          <Select.Option value="Cheque">Cheque</Select.Option>
          <Select.Option value="Interac Debit">Interac Debit</Select.Option>
          <Select.Option value="EFT">EFT</Select.Option>
        </Select>
      </Form.Item>

      <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>

      <Form.Item
        label={t("general.labels.sendby")}
        name="sendby"
        initialValue="email"
      >
        <Radio.Group disabled={disabled}>
          <Radio.Button value="email">{t("general.labels.email")}</Radio.Button>
          <Radio.Button value="print">{t("general.labels.print")}</Radio.Button>
        </Radio.Group>
      </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>
  );
}
export default connect(mapStateToProps, null)(PaymentFormComponent);