ACH Payments on Reaction Commerce

  1import React, { forwardRef, useImperativeHandle, useRef, useState } from "react";
  2import PropTypes from "prop-types";
  3import { useReactoForm } from "reacto-form";
  4import { uniqueId } from "lodash";
  5import { withComponents } from "@reactioncommerce/components-context";
  6import Typography from "@material-ui/core/Typography";
  7import { Paper, withStyles, FormHelperText } from "@material-ui/core";
  8
  9/**
 10 * Convert the form document to the object structure
 11 * expected by `PaymentsCheckoutAction`
 12 * @param {Object} Form object
 13 * @returns {Object} Transformed object
 14 */
 15function buildResult({ amount, accountHolder = null }) {
 16  let floatAmount = amount ? parseFloat(amount) : null;
 17  if (isNaN(floatAmount)) floatAmount = null;
 18
 19  return {
 20    amount: floatAmount,
 21    data: { accountHolder },
 22    displayName: accountHolder ? `ACH from ${accountHolder}` : null
 23  };
 24}
 25
 26const styles = ({ spacing, palette }) => ({
 27  root: {
 28    padding: spacing.unit * 2,
 29    border: palette.borders.default
 30  }
 31});
 32
 33function PaymentInfo({ classes }) {
 34  return (
 35    <Paper elevation={0} className={classes.root}>
 36      <Typography><b>Account name:</b> COMPANY NAME</Typography>
 37      <Typography><b>Currency:</b> USD</Typography>
 38      <Typography><b>Bank:</b> JPMorgan Chase Bank</Typography>
 39      <Typography><b>Bank address:</b> 10 S Dearborn. Chicago, IL 60603</Typography>
 40      <Typography><b>Routing #:</b> 071000013</Typography>
 41      <Typography><b>Account #:</b> 000000000</Typography>
 42    </Paper>
 43  )
 44}
 45
 46ACHPaymentForm.propTypes = {
 47  classes: PropTypes.object,
 48}
 49
 50PaymentInfo = withStyles(styles, { withTheme: true })(PaymentInfo);
 51
 52/**
 53 * @summary ACHPaymentForm component
 54 * @param {Object} props Props
 55 * @param {Object} ref Ref
 56 * @return {Object} React render
 57 */
 58function ACHPaymentForm(props, ref) {
 59  const lastDocRef = useRef();
 60  const isReadyRef = useRef();
 61
 62  const [uniqueInstanceIdentifier, setUniqueInstanceIdentifier] = useState();
 63  if (!uniqueInstanceIdentifier) {
 64    setUniqueInstanceIdentifier(uniqueId("ACHPaymentForm"));
 65  }
 66
 67  const {
 68    className,
 69    components: {
 70      ErrorsBlock,
 71      Field,
 72      TextInput
 73    },
 74    isSaving,
 75    onChange,
 76    onReadyForSaveChange,
 77    onSubmit
 78  } = props;
 79
 80  const {
 81    getErrors,
 82    getInputProps,
 83    submitForm
 84  } = useReactoForm({
 85    isReadOnly: isSaving,
 86    onChange(formData) {
 87      const resultDoc = buildResult(formData);
 88      const stringDoc = JSON.stringify(resultDoc);
 89      if (stringDoc !== lastDocRef.current) {
 90        onChange(resultDoc);
 91      }
 92      lastDocRef.current = stringDoc;
 93
 94      const isReady = !!formData.accountHolder;
 95      if (isReady !== isReadyRef.current) {
 96        onReadyForSaveChange(isReady);
 97      }
 98      isReadyRef.current = isReady;
 99    },
100    onSubmit: (formData) => onSubmit(buildResult(formData))
101  });
102
103  useImperativeHandle(ref, () => ({
104    submit() {
105      submitForm();
106    }
107  }));
108
109  const accountHolderInputId = `accountHolder_${uniqueInstanceIdentifier}`;
110  const amountInputId = `amount_${uniqueInstanceIdentifier}`;
111
112  return (
113    <div className={className}>
114      <Typography>Currently we support ACH payments. Please send your order total amount via electronic funds transfer to the account provided below. We will plan to ship your order within 2 business days after the funds have settled into our account.</Typography>
115      <Field name="accountHolder" errors={getErrors(["accountHolder"])} label="Sending account holder" labelFor={accountHolderInputId}>
116        <TextInput id={accountHolderInputId} {...getInputProps("accountHolder")} />
117        <FormHelperText>Individual or business sending the funds.</FormHelperText>
118        <ErrorsBlock errors={getErrors(["accountHolder"])} />
119      </Field>
120      <Field name="amount" errors={getErrors(["amount"])} label="Amount (optional)" labelFor={amountInputId}>
121        <TextInput id={amountInputId} {...getInputProps("amount")} />
122        <FormHelperText>Leave blank unless you intend to split order total across multiple transfers.</FormHelperText>
123        <ErrorsBlock errors={getErrors(["amount"])} />
124      </Field>
125      <PaymentInfo />
126    </div>
127  );
128}
129
130ACHPaymentForm = withComponents(forwardRef(ACHPaymentForm));
131
132ACHPaymentForm.propTypes = {
133  className: PropTypes.string,
134  components: PropTypes.any,
135  isSaving: PropTypes.bool,
136  onChange: PropTypes.func,
137  onReadyForSaveChange: PropTypes.func,
138  onSubmit: PropTypes.func
139};
140
141ACHPaymentForm.defaultProps = {
142  isSaving: false,
143  onChange() {},
144  onReadyForSaveChange() {},
145  onSubmit() {}
146};
147
148export default ACHPaymentForm;