@seamlessdocs/payment-modals 1.0.38

package/scripts/test.js

@@ -0,0 +1,53 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'test';
+process.env.NODE_ENV = 'test';
+process.env.PUBLIC_URL = '';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+
+const jest = require('jest');
+const execSync = require('child_process').execSync;
+let argv = process.argv.slice(2);
+
+function isInGitRepository() {
+  try {
+    execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function isInMercurialRepository() {
+  try {
+    execSync('hg --cwd . root', { stdio: 'ignore' });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+// Watch unless on CI or explicitly running all tests
+if (
+  !process.env.CI &&
+  argv.indexOf('--watchAll') === -1 &&
+  argv.indexOf('--watchAll=false') === -1
+) {
+  // https://github.com/facebook/create-react-app/issues/5210
+  const hasSourceControl = isInGitRepository() || isInMercurialRepository();
+  argv.push(hasSourceControl ? '--watch' : '--watchAll');
+}
+
+
+jest.run(argv);

package/src/Components/ACHPaymentModal/ACHPaymentModal.module.css

@@ -0,0 +1,118 @@
+.modalContainer {
+  overflow-y: auto;
+
+  box-sizing: border-box;
+  max-width: 600px;
+  height: 100%;
+  max-height: calc(100vh - 150px);
+
+  border-radius: none;
+  background: none;
+}
+
+.modal {
+  display: flex;
+
+  border-radius: 6px;
+  background: #fff;
+}
+
+.backIcon {
+  margin-right: 8px;
+}
+
+.backTextContainer {
+  display: flex;
+  align-items: center;
+
+  margin-bottom: 10px;
+
+  cursor: pointer;
+
+  color: white;
+
+  font-size: 13px;
+  line-height: 16px;
+}
+
+.paymentInfoContainer {
+  flex-shrink: 0;
+
+  box-sizing: border-box;
+  width: 165px;
+  padding: 10px;
+
+  border-radius: 6px 0px 0px 6px;
+  background: #e2e5ea;
+}
+
+.paymentFormContainer {
+  flex-grow: 1;
+
+  padding: 35px 45px 0px;
+}
+
+.paymentInfoWrapper {
+  display: flex;
+  align-items: center;
+
+  height: 100%;
+}
+
+.achTitle {
+  margin-bottom: 5px;
+
+  text-align: center;
+
+  color: #2c2f32;
+
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 22px;
+}
+
+.descriptionContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.achDescription {
+  padding-bottom: 5px;
+
+  text-align: center;
+
+  color: #7e909f;
+  border-bottom: 2px solid white;
+
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.totalAmount {
+  margin: 25px 0 0;
+
+  text-align: center;
+
+  color: #1f53ac;
+
+  font-size: 23px;
+  font-weight: bold;
+  line-height: 28px;
+}
+
+.feeInfo {
+  margin: 13px 0 0;
+
+  text-align: center;
+
+  color: #7e909f;
+
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.moneyValue {
+  word-break: break-all;
+}

package/src/Components/ACHPaymentModal/Form/FieldContainer/FieldContainer.module.css

@@ -0,0 +1,40 @@
+.fieldContainer {
+  position: relative;
+
+  box-sizing: border-box;
+  padding: 10px;
+
+  border: 1px solid #d7e0e8;
+  border-radius: 5px;
+  background: #ffffff;
+}
+
+.fieldName {
+  margin: 0 0 5px;
+
+  text-align: left;
+
+  color: #081424;
+
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 13px;
+}
+
+.validationIcon {
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  margin: 8px;
+}
+
+.invalidField {
+  background: #fbf3f2;
+}
+
+.tooltip{
+    padding: 8px;
+
+    text-align: center;
+}

package/src/Components/ACHPaymentModal/Form/FieldContainer/index.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import ReactTooltip from 'react-tooltip';
+
+import { Field } from 'formik';
+
+import errorIcon from '../../../../assets/img/error-icon.svg';
+import validIcon from '../../../../assets/img/valid-icon.svg';
+
+import styles from './FieldContainer.module.css';
+
+const FieldContainer = ({ name, label, children }) => {
+  return (
+    <Field name={name}>
+      {({ field, meta }) => (
+        <div
+          className={classNames(styles.fieldContainer, {
+            [styles.invalidField]: meta.touched && meta.error
+          })}
+        >
+          <div className={styles.fieldName}>{label}</div>
+          {meta.touched && meta.error && (
+            <>
+              <img
+                data-tip
+                data-for={name}
+                className={styles.validationIcon}
+                src={errorIcon}
+                alt="error"
+              />
+              <ReactTooltip
+                className={styles.tooltip}
+                id={name}
+                place="top"
+                type="dark"
+                effect="solid"
+              >
+                <span>{meta.error}</span>
+              </ReactTooltip>
+            </>
+          )}
+          {meta.touched && !meta.error && (
+            <img className={styles.validationIcon} src={validIcon} alt="valid" />
+          )}
+
+          {children(field)}
+        </div>
+      )}
+    </Field>
+  );
+};
+
+FieldContainer.propTypes = {
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  children: PropTypes.func.isRequired
+};
+
+export default FieldContainer;

package/src/Components/ACHPaymentModal/Form/Form.module.css

@@ -0,0 +1,81 @@
+.fullNameContainer {
+  width: 100%;
+  margin-bottom: 13px;
+}
+
+.input {
+  width: 100%;
+  height: auto !important;
+  margin: 0 !important;
+  padding: 0 !important;
+
+  opacity: 0.7;
+  color: #081424 !important;
+  border: none !important;
+  outline: none !important;
+  background: transparent;
+  background-color: transparent !important;
+  box-shadow: none !important;
+
+  font-size: 16px !important;
+  line-height: 19px !important;
+}
+
+.routingNumberContainer {
+  margin-right: 7px;
+}
+
+.numberInfoContainer {
+  display: flex;
+
+  margin-bottom: 13px;
+}
+
+.submitBtn {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 15px;
+
+  cursor: pointer;
+
+  color: #ffffff;
+  border: 1px solid #2c508d;
+  border-radius: 5px;
+  background: #1f53ac;
+
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 19px;
+}
+
+.lockIcon {
+  margin-right: 10px;
+}
+
+.summaryError {
+  visibility: hidden;
+
+  margin: 0;
+  padding: 9px 30px 9px;
+
+  text-align: center;
+
+  color: #d0021b;
+
+  font-size: 16px;
+  line-height: 18px;
+}
+
+.summaryErrorVisible {
+  visibility: visible;
+}
+
+@media (max-width: 600px) {
+  .numberInfoContainer {
+    flex-direction: column;
+  }
+
+  .routingNumberContainer {
+    margin: 0 0 13px;
+  }
+}

package/src/Components/ACHPaymentModal/Form/index.jsx

@@ -0,0 +1,189 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Select from 'react-select';
+import { Formik, Form } from 'formik';
+
+import FieldContainer from './FieldContainer';
+
+import lockIcon from '../../../assets/img/lock-icon.svg';
+
+import styles from './Form.module.css';
+
+const ACCOUNT_TYPES = [
+  { value: 'checkingPersonal', label: 'Checking (Personal)' },
+  { value: 'savingsPersonal', label: 'Savings (Personal)' },
+  { value: 'checkingBusiness', label: 'Checking (Business)' },
+  { value: 'savingBusiness', label: 'Saving (Business)' }
+];
+
+const SELECT_CUSTOM_STYLES = {
+  control: provided => ({
+    ...provided,
+    minHeight: 'auto',
+    border: 'none',
+    fontsize: '16px',
+    lineHeight: '19px',
+    color: '#081424',
+    opacity: '0.7',
+    boxShadow: 'none',
+    backgroundColor: 'transparent',
+    '&:hover': {
+      border: 'none',
+      boxShadow: 'none'
+    }
+  }),
+  singleValue: provided => ({ ...provided, margin: '0' }),
+  placeholder: provided => ({ ...provided, margin: '0' }),
+  valueContainer: provided => ({ ...provided, padding: '0' }),
+  indicatorContainer: provided => ({ ...provided, padding: '0' }),
+  dropdownIndicator: provided => ({
+    ...provided,
+    padding: '0',
+    color: '#1F53AC',
+    '&:hover': {
+      color: '#1F53AC'
+    }
+  }),
+  menuList: provided => ({
+    ...provided,
+    fontsize: '16px',
+    lineHeight: '19px',
+    color: '#081424',
+    textAlign: 'left'
+  }),
+  input: provided => ({
+    ...provided,
+    '& input': {
+      height: 'auto !important',
+      lineHeight: 'normal !important'
+    }
+  })
+};
+
+const validate = values => {
+  const errors = {};
+
+  if (!values.firstName) {
+    errors.firstName = 'Required field';
+  }
+
+  if (!values.lastName) {
+    errors.lastName = 'Required field';
+  }
+
+  if (!values.accountType) {
+    errors.accountType = 'Required field';
+  }
+
+  if (!values.routingNumber) {
+    errors.routingNumber = 'Required field';
+  } else if (!/^\d+$/.test(values.routingNumber)) {
+    errors.routingNumber = 'Must be a number';
+  } else if (values.routingNumber.toString().length !== 9) {
+    errors.routingNumber = 'Routing number structure is not valid';
+  }
+
+  if (!values.accountNumber) {
+    errors.accountNumber = 'Required field';
+  } else if (!/^\d+$/.test(values.accountNumber)) {
+    errors.accountNumber = 'Must be a number';
+  } else if (
+    values.accountNumber.toString().length < 9 ||
+    values.accountNumber.toString().length > 12
+  ) {
+    errors.accountNumber = 'Account number structure is not valid';
+  }
+
+  return errors;
+};
+
+const ACHForm = ({ onPay }) => {
+  return (
+    <Formik
+      initialValues={{
+        firstName: '',
+        lastName: '',
+        accountNumber: '',
+        routingNumber: '',
+        accountType: null
+      }}
+      validate={validate}
+      onSubmit={values => {
+        onPay(
+          values.firstName,
+          values.lastName,
+          values.routingNumber,
+          values.accountNumber,
+          values.accountType.value
+        );
+      }}
+    >
+      {({ isValid, submitCount, setFieldValue, setFieldTouched }) => (
+        <Form>
+          <div className={styles.fullNameContainer}>
+            <FieldContainer name="firstName" label="First Name">
+              {field => <input className={styles.input} type="text" {...field} />}
+            </FieldContainer>
+          </div>
+          <div className={styles.fullNameContainer}>
+            <FieldContainer name="lastName" label="Last Name">
+              {field => <input className={styles.input} type="text" {...field} />}
+            </FieldContainer>
+          </div>
+          <div className={styles.numberInfoContainer}>
+            <div className={styles.routingNumberContainer}>
+              <FieldContainer name="routingNumber" label="Routing #">
+                {field => <input className={styles.input} type="text" {...field} />}
+              </FieldContainer>
+            </div>
+            <div className={styles.accountNumberContainer}>
+              <FieldContainer name="accountNumber" label="Account #">
+                {field => <input className={styles.input} type="text" {...field} />}
+              </FieldContainer>
+            </div>
+          </div>
+
+          <div className={styles.fullNameContainer}>
+            <FieldContainer name="accountType" label="Account Type">
+              {field => (
+                <Select
+                  styles={SELECT_CUSTOM_STYLES}
+                  value={field.value}
+                  placeholder="Select Account Type ..."
+                  onChange={option => {
+                    setFieldTouched('accountType');
+                    setFieldValue('accountType', option);
+                  }}
+                  options={ACCOUNT_TYPES}
+                  components={{
+                    IndicatorSeparator: () => null
+                  }}
+                />
+              )}
+            </FieldContainer>
+          </div>
+
+          <button className={styles.submitBtn} type="submit">
+            <img className={styles.lockIcon} src={lockIcon} alt="lock payment" />
+            Authorize Payment
+          </button>
+
+          <div
+            className={classNames(styles.summaryError, {
+              [styles.summaryErrorVisible]: !!submitCount && !isValid
+            })}
+          >
+            Please correct invalid fields
+          </div>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+ACHForm.propTypes = {
+  onPay: PropTypes.func.isRequired
+};
+
+export default ACHForm;

package/src/Components/ACHPaymentModal/index.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Modal from '../Modal';
+import ACHForm from './Form';
+
+import backIcon from '../../assets/img/back.svg';
+
+import styles from './ACHPaymentModal.module.css';
+
+const ACHPaymentModal = ({
+  amount,
+  totalAmount,
+  feeAmount,
+  description,
+  feeName,
+  onPay,
+  onClose
+}) => {
+  return (
+    <Modal className={styles.modalContainer}>
+      <div
+        className={styles.backTextContainer}
+        onClick={onClose}
+        onKeyDown={onClose}
+        role="button"
+        tabIndex="0"
+      >
+        <img className={styles.backIcon} src={backIcon} alt="back" />
+        Back to form
+      </div>
+      <div className={styles.modal}>
+        <div className={styles.paymentInfoContainer}>
+          <div className={styles.paymentInfoWrapper}>
+            <div>
+              <div className={styles.descriptionContainer}>
+                <span className={styles.achTitle}>ACH Payment</span>
+                <span className={styles.achDescription}>{description}</span>
+              </div>
+
+              <div className={styles.totalAmount}>
+                <currency>$</currency>
+                <money className={styles.moneyValue}>{Number(totalAmount).toFixed(2)}</money>
+              </div>
+
+              {!!feeAmount && (
+                <div className={styles.feeInfo}>
+                  <currency>$</currency>
+                  <money className={styles.moneyValue}>{Number(amount).toFixed(2)}</money>
+                  {' submission + '}
+                  <currency>$</currency>
+                  <money>{Number(feeAmount).toFixed(2)}</money>
+                  {` ${feeName || 'processing fee'}`}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className={styles.paymentFormContainer}>
+          <ACHForm onPay={onPay} />
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+ACHPaymentModal.propTypes = {
+  onPay: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+  amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  totalAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  description: PropTypes.string,
+  feeName: PropTypes.string,
+  feeAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+
+ACHPaymentModal.defaultProps = {
+  feeAmount: '',
+  description: '',
+  feeName: ''
+};
+
+export default ACHPaymentModal;