@thecb/components 2.2.1 → 2.3.0

package/src/components/molecules/login-form/LoginForm.js

@@ -1,13 +1,14 @@
 import React, { useEffect } from "react";
 import { required, isProbablyEmail } from "redux-freeform";
 import { FormInput, FormInputColumn } from "../../atoms/form-layouts";
+import { noop } from "../../../util/general";
 
 const LoginForm = ({
   clearOnDismount,
   fields,
   actions,
   showErrors,
-  handleSubmit
+  handleSubmit = noop
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);

package/src/components/molecules/login-form/index.js

@@ -2,7 +2,7 @@ import LoginForm from "./LoginForm";
 import {
   reducer,
   mapStateToProps,
-  mapDispatchToProps,
+  mapDispatchToProps
 } from "./LoginForm.state";
 
 LoginForm.reducer = reducer;

package/src/components/molecules/module/Module.js

@@ -1,8 +1,6 @@
-import React from "react";
-
+import React, { Fragment } from "react";
 import Heading from "../../atoms/heading";
 import { Box } from "../../atoms/layouts";
-import { Fragment } from "react";
 
 const Module = ({
   heading,

package/src/components/molecules/partial-amount-form/PartialAmountForm.js

@@ -0,0 +1,73 @@
+import React from "react";
+import { required, numberGreaterThan, numberLessThan } from "redux-freeform";
+import { displayCurrency } from "../../../util/general";
+import Text from "../../atoms/text";
+import {
+  FormInput,
+  FormInputColumn,
+  FormContainer
+} from "../../atoms/form-layouts";
+import { moneyFormat } from "../../../util/formats";
+
+const PartialAmountForm = ({
+  variant = "default",
+  lineItems,
+  maximum,
+  minimum = 1,
+  clearOnDismount,
+  fields,
+  actions,
+  showErrors = false
+}) => {
+  if (clearOnDismount) {
+    useEffect(() => () => actions.form.clear(), []);
+  }
+
+  const amountErrors = {
+    [required.error]: "Amount is required",
+    [numberGreaterThan.error]: `Your total payment must be greater than ${displayCurrency(
+      minimum
+    )}`,
+    [numberLessThan.error]: `Your total payment must be less than ${displayCurrency(
+      maximum
+    )}`
+  };
+
+  const lineItemsNew = Array.isArray(lineItems) ? lineItems : [];
+  return (
+    <FormContainer variant={variant} role="form" aria-label="Partial amount">
+      <Text variant="p">
+        Pay a portion of your current bill. The remaining balance will still be
+        due on the same due date.
+      </Text>
+      <div style={{ height: "16px" }}></div>
+      <FormInputColumn>
+        {lineItemsNew.map(li => (
+          <FormInput
+            labelTextWhenNoError={li.description}
+            key={li.id}
+            field={fields[li.id]}
+            fieldActions={actions.fields[li.id]}
+            showErrors={showErrors}
+            errorMessages={amountErrors}
+            style={{ textAlign: "right" }}
+            placeholder="$0.00"
+            formatter={moneyFormat}
+            decorator={
+              <Text variant="p">
+                Amount owed:{"  "}
+                {
+                  <Text variant="p" weight="600">
+                    {displayCurrency(li.amount)}
+                  </Text>
+                }
+              </Text>
+            }
+          />
+        ))}
+      </FormInputColumn>
+    </FormContainer>
+  );
+};
+
+export default PartialAmountForm;

package/src/components/molecules/partial-amount-form/PartialAmountForm.state.js

@@ -0,0 +1,51 @@
+import {
+  createFormState,
+  required,
+  onlyNaturals,
+  validateSum,
+  numberGreaterThan,
+  numberLessThan
+} from "redux-freeform";
+
+export const createPartialAmountFormState = (
+  lineItems,
+  maximum,
+  minimum = 1
+) => {
+  const formConfig = lineItems.reduce((acc, item) => {
+    const validators = [
+      required(),
+      validateSum(
+        numberGreaterThan(minimum),
+        lineItems
+          .filter(lineItem => lineItem != item)
+          .reduce((acc, curr) => [...acc, curr.id], [])
+      )
+    ];
+    if (!!maximum) {
+      validators.push(
+        validateSum(
+          numberLessThan(maximum),
+          lineItems
+            .filter(lineItem => lineItem != item)
+            .reduce((acc, curr) => [...acc, curr.id], [])
+        )
+      );
+    }
+    return {
+      ...acc,
+      [item.id]: {
+        validators: validators,
+        constraints: [onlyNaturals()]
+      }
+    };
+  }, {});
+  const { reducer, mapStateToProps, mapDispatchToProps } = createFormState(
+    formConfig
+  );
+  return {
+    partialAmountFormReducer: reducer,
+    partialAmountFormMapStateToProps: mapStateToProps,
+    partialAmountFormMapDispatchToProps: mapDispatchToProps
+  };
+};

package/src/components/molecules/partial-amount-form/index.js

@@ -0,0 +1,4 @@
+import PartialAmountForm from "./PartialAmountForm";
+import { createPartialAmountFormState } from "./PartialAmountForm.state";
+
+export { PartialAmountForm, createPartialAmountFormState };

package/src/components/molecules/payment-form-ach/PaymentFormACH.js

@@ -0,0 +1,189 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import { ifElse, isNil, always } from "ramda";
+import Checkbox from "../../atoms/checkbox";
+import {
+  required,
+  matchesField,
+  hasLength,
+  isRoutingNumber
+} from "redux-freeform";
+import FormSelect from "../../atoms/form-select";
+import {
+  FormInput,
+  FormInputColumn,
+  FormContainer
+} from "../../atoms/form-layouts";
+import Alert from "../../atoms/alert";
+import AccountAndRoutingModal from "../account-and-routing-modal";
+import { displayCurrency, noop } from "../../../util/general";
+
+const ModalWrapper = styled.div``;
+
+const PaymentFormACH = ({
+  variant = "default",
+  defaultMethod,
+  toggleCheckbox,
+  hideDefaultPayment = true,
+  allowBankAccountType,
+  clearOnDismount,
+  fields,
+  actions,
+  showErrors,
+  fees,
+  handleSubmit = noop
+}) => {
+  if (clearOnDismount) {
+    useEffect(() => () => actions.form.clear(), []);
+  }
+  const [showRouting, toggleShowRouting] = useState(false);
+  const [showAccount, toggleShowAccount] = useState(false);
+
+  const nameErrors = {
+    [required.error]: "Name is required"
+  };
+  const routingNumberErrors = {
+    [required.error]: "Routing number is required",
+    [hasLength.error]: "Routing number must be 9 digits",
+    [isRoutingNumber.error]: "Invalid routing number"
+  };
+  const confirmRoutingNumberErrors = {
+    [matchesField.error]:
+      "Confirm routing number field must match routing number"
+  };
+  const accountNumberErrors = {
+    [required.error]: "Account number is required",
+    [hasLength.error]: "Account number must be between 6 and 17 digits"
+  };
+  const confirmAccountNumberErrors = {
+    [matchesField.error]:
+      "Confirm account number field must match account number"
+  };
+  const accountTypeErrors = {
+    [required.error]: "Account type is required"
+  };
+
+  return (
+    <FormContainer variant={variant} role="form" aria-label="ACH Payment">
+      <FormInputColumn>
+        <FormInput
+          labelTextWhenNoError="Name on bank account"
+          errorMessages={nameErrors}
+          field={fields.name}
+          fieldActions={actions.fields.name}
+          showErrors={showErrors}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        />
+        <FormInput
+          labelTextWhenNoError="Routing number"
+          errorMessages={routingNumberErrors}
+          field={fields.routingNumber}
+          fieldActions={actions.fields.routingNumber}
+          showErrors={showErrors}
+          helperModal={() => (
+            <ModalWrapper
+              tabIndex="0"
+              onKeyDown={e =>
+                e.key === "Enter" && toggleShowAccount(!showRouting)
+              }
+            >
+              <AccountAndRoutingModal
+                link="What is this?"
+                title="Where is my routing number?"
+                content="Your routing number is the 9-digit number in the bottom left
+                  corner of your check."
+                imageType="Routing"
+                isOpen={showRouting}
+                toggleOpen={toggleShowRouting}
+              />
+            </ModalWrapper>
+          )}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        />
+        <FormInput
+          labelTextWhenNoError="Confirm routing number"
+          errorMessages={confirmRoutingNumberErrors}
+          field={fields.confirmRoutingNumber}
+          fieldActions={actions.fields.confirmRoutingNumber}
+          showErrors={showErrors}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        />
+        <FormInput
+          labelTextWhenNoError="Account number"
+          errorMessages={accountNumberErrors}
+          field={fields.accountNumber}
+          fieldActions={actions.fields.accountNumber}
+          showErrors={showErrors}
+          helperModal={() => (
+            <ModalWrapper
+              tabIndex="0"
+              onKeyDown={e =>
+                e.key === "Enter" && toggleShowAccount(!showAccount)
+              }
+            >
+              <AccountAndRoutingModal
+                link="What is this?"
+                title="Where is my account number?"
+                content="Your account number is usually the 10-digit number in the bottom
+                of your check to the right of the routing number."
+                imageType="Account"
+                isOpen={showAccount}
+                toggleOpen={toggleShowAccount}
+              />
+            </ModalWrapper>
+          )}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        />
+        <FormInput
+          labelTextWhenNoError="Confirm account number"
+          errorMessages={confirmAccountNumberErrors}
+          field={fields.confirmAccountNumber}
+          fieldActions={actions.fields.confirmAccountNumber}
+          showErrors={showErrors}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        />
+        {allowBankAccountType && (
+          <FormSelect
+            labelTextWhenNoError="Account type"
+            options={[
+              { text: "Select account type", value: "" },
+              { text: "Checking", value: "CHECKING" },
+              { text: "Savings", value: "SAVINGS" }
+            ]}
+            fieldActions={actions.fields.accountType}
+            showErrors={showErrors}
+            errorMessages={accountTypeErrors}
+            field={fields.accountType}
+          />
+        )}
+        {!hideDefaultPayment && (
+          <Checkbox
+            title="Save as Default Payment Method"
+            name="default-payment-ach"
+            onChange={toggleCheckbox}
+            checked={defaultMethod.value}
+            hidden={hideDefaultPayment}
+          />
+        )}
+        {!!fees?.value && (
+          <Alert
+            heading="Processing Fee"
+            text={`There is a processing fee of ${
+              fees.type === "FLAT"
+                ? `${displayCurrency(fees.value)}`
+                : `${fees.value * 100}%`
+            } ${ifElse(
+              isNil,
+              always(""),
+              a => `with a minimum of ${displayCurrency(a)} `
+            )(fees.minimumInCents)}on all bank account payments.`}
+            variant="info"
+            showQuitLink={false}
+          />
+        )}
+      </FormInputColumn>
+    </FormContainer>
+  );
+};
+
+export default PaymentFormACH;

package/src/components/molecules/payment-form-ach/PaymentFormACH.state.js

@@ -0,0 +1,38 @@
+import {
+  createFormState,
+  required,
+  matchesField,
+  onlyIntegers,
+  hasLength,
+  isRoutingNumber
+} from "redux-freeform";
+
+const formConfig = {
+  name: {
+    validators: [required()]
+  },
+  routingNumber: {
+    validators: [required(), hasLength(9, 9), isRoutingNumber()],
+    constraints: [onlyIntegers(), hasLength(0, 9)]
+  },
+  confirmRoutingNumber: {
+    validators: [matchesField("routingNumber")],
+    constraints: [onlyIntegers(), hasLength(0, 9)]
+  },
+  accountNumber: {
+    validators: [required(), hasLength(6, 17)],
+    constraints: [onlyIntegers(), hasLength(0, 17)]
+  },
+  confirmAccountNumber: {
+    validators: [matchesField("accountNumber")],
+    constraints: [onlyIntegers(), hasLength(0, 17)]
+  },
+  accountType: {
+    defaultValue: "CHECKING",
+    validators: [required()]
+  }
+};
+
+export const { reducer, mapStateToProps, mapDispatchToProps } = createFormState(
+  formConfig
+);

package/src/components/molecules/payment-form-ach/index.js

@@ -0,0 +1,11 @@
+import PaymentFormACH from "./PaymentFormACH";
+import {
+  reducer,
+  mapStateToProps,
+  mapDispatchToProps
+} from "./PaymentFormACH.state";
+
+PaymentFormACH.reducer = reducer;
+PaymentFormACH.mapStateToProps = mapStateToProps;
+PaymentFormACH.mapDispatchToProps = mapDispatchToProps;
+export default PaymentFormACH;

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -0,0 +1,132 @@
+import React, { useEffect } from "react";
+import { required, hasLength, matchesRegex } from "redux-freeform";
+import { ifElse, isNil, always } from "ramda";
+import { checkCardBrand, displayCurrency, noop } from "../../../util/general";
+import { expirationDateFormat, creditCardFormat } from "../../../util/formats";
+import {
+  FormInput,
+  FormInputColumn,
+  FormContainer,
+  FormInputRow
+} from "../../atoms/form-layouts";
+import { Box } from "../../atoms/layouts";
+import Alert from "../../atoms/alert";
+
+const nameOnCardErrors = {
+  [required.error]: "Name is required"
+};
+const creditCardNumberErrors = {
+  [required.error]: "Credit card number is required",
+  [hasLength.error]: "Credit card number is invalid"
+};
+const expirationDateErrors = {
+  [required.error]: "Expiration date is required",
+  [hasLength.error]: "Expiration date is invalid",
+  [matchesRegex.error]: "Expiration date is invalid"
+};
+const cvvErrors = {
+  [required.error]: "CVV is required",
+  [hasLength.error]: "CVV is invalid"
+};
+const zipCodeErrors = {
+  [required.error]: "Zip code is required",
+  [hasLength.error]: "Zip code is invalid"
+};
+
+const PaymentFormCard = ({
+  variant = "default",
+  hideZipCode = false,
+  clearOnDismount,
+  fields,
+  actions,
+  showErrors,
+  fees,
+  handleSubmit = noop,
+  isMobile
+}) => {
+  useEffect(() => {
+    if (clearOnDismount) {
+      return () => actions.form.clear();
+    }
+  }, []);
+  return (
+    <FormContainer variant={variant} role="form" aria-label="Card payment">
+      <FormInputColumn>
+        <FormInput
+          labelTextWhenNoError="Name on card"
+          errorMessages={nameOnCardErrors}
+          field={fields.nameOnCard}
+          fieldActions={actions.fields.nameOnCard}
+          showErrors={showErrors}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        />
+        <FormInput
+          labelTextWhenNoError="Credit card number"
+          errorMessages={creditCardNumberErrors}
+          field={fields.creditCardNumber}
+          fieldActions={actions.fields.creditCardNumber}
+          showErrors={showErrors}
+          formatter={creditCardFormat}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        />
+        <FormInputRow breakpoint="20rem">
+          <FormInput
+            labelTextWhenNoError="Expiration date (MM/YY)"
+            errorMessages={expirationDateErrors}
+            field={fields.expirationDate}
+            fieldActions={actions.fields.expirationDate}
+            showErrors={showErrors}
+            formatter={expirationDateFormat}
+            onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          />
+          <FormInput
+            labelTextWhenNoError="CVV"
+            errorMessages={cvvErrors}
+            field={fields.cvv}
+            fieldActions={actions.fields.cvv}
+            showErrors={showErrors}
+            background={
+              checkCardBrand(fields.creditCardNumber.rawValue) == "AMEX"
+                ? "/AmexCVVHint.svg"
+                : "/CVVHint.svg"
+            }
+            onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          />
+        </FormInputRow>
+        {!hideZipCode && (
+          <Box
+            padding={isMobile ? "0" : "0 0.5rem 0 0"}
+            width={isMobile ? "100%" : "50%"}
+          >
+            <FormInput
+              labelTextWhenNoError="Zip code"
+              errorMessages={zipCodeErrors}
+              field={fields.zipCode}
+              fieldActions={actions.fields.zipCode}
+              showErrors={showErrors}
+              onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+            />
+          </Box>
+        )}
+        {!!fees?.value && (
+          <Alert
+            heading="Processing Fee"
+            text={`There is a processing fee of ${
+              fees.type === "FLAT"
+                ? `${displayCurrency(fees.value)}`
+                : `${fees.value * 100}%`
+            } ${ifElse(
+              isNil,
+              always(""),
+              a => `with a minimum of ${displayCurrency(a)} `
+            )(fees.minimumInCents)} on all card payments.`}
+            variant="info"
+            showQuitLink={false}
+          />
+        )}
+      </FormInputColumn>
+    </FormContainer>
+  );
+};
+
+export default PaymentFormCard;

package/src/components/molecules/payment-form-card/PaymentFormCard.state.js

@@ -0,0 +1,39 @@
+import {
+  createFormState,
+  required,
+  onlyIntegers,
+  hasLength,
+  matchesRegex
+} from "redux-freeform";
+
+//TODO: Will make zip code able to have more than 5 digits once we add in the FormattedInput because it will have issues with format of 60606-1111.
+
+const formConfig = {
+  nameOnCard: {
+    validators: [required()]
+  },
+  creditCardNumber: {
+    validators: [required(), hasLength(15, 16)],
+    constraints: [onlyIntegers(), hasLength(0, 16)]
+  },
+  expirationDate: {
+    validators: [
+      required(),
+      hasLength(4, 4),
+      matchesRegex(/^(01|02|03|04|05|06|07|08|09|10|11|12)[2-9]\d$/)
+    ],
+    constraints: [onlyIntegers(), hasLength(0, 4)]
+  },
+  cvv: {
+    validators: [required(), hasLength(3, 4)],
+    constraints: [onlyIntegers(), hasLength(0, 4)]
+  },
+  zipCode: {
+    validators: [required(), hasLength(5, 5)],
+    constraints: [onlyIntegers(), hasLength(0, 5)]
+  }
+};
+
+export const { reducer, mapStateToProps, mapDispatchToProps } = createFormState(
+  formConfig
+);

package/src/components/molecules/payment-form-card/index.js

@@ -0,0 +1,11 @@
+import PaymentFormCard from "./PaymentFormCard";
+import {
+  reducer,
+  mapStateToProps,
+  mapDispatchToProps
+} from "./PaymentFormCard.state";
+
+PaymentFormCard.reducer = reducer;
+PaymentFormCard.mapStateToProps = mapStateToProps;
+PaymentFormCard.mapDispatchToProps = mapDispatchToProps;
+export default PaymentFormCard;

package/src/components/molecules/phone-form/PhoneForm.js

@@ -7,6 +7,7 @@ import {
   FormContainer,
   FormInputColumn
 } from "../../atoms/form-layouts";
+import { noop } from "../../../util/general";
 
 const PhoneForm = ({
   variant = "default",
@@ -14,7 +15,7 @@ const PhoneForm = ({
   actions,
   clearOnDismount,
   showErrors,
-  handleSubmit
+  handleSubmit = noop
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);

package/src/components/molecules/phone-form/index.js

@@ -2,7 +2,7 @@ import PhoneForm from "./PhoneForm";
 import {
   reducer,
   mapStateToProps,
-  mapDispatchToProps,
+  mapDispatchToProps
 } from "./PhoneForm.state";
 
 PhoneForm.reducer = reducer;

package/src/components/molecules/registration-form/RegistrationForm.js

@@ -12,12 +12,13 @@ import {
 import PasswordRequirements from "../../atoms/password-requirements";
 import { Box } from "../../atoms/layouts";
 import { FormInput, FormInputColumn } from "../../atoms/form-layouts";
+import { noop } from "../../../util/general";
 
 const RegistrationForm = ({
   clearOnDismount,
   fields,
   actions,
-  handleSubmit,
+  handleSubmit = noop,
   showErrors,
   isMobile
 }) => {

package/src/components/molecules/registration-form/index.js

@@ -2,7 +2,7 @@ import RegistrationForm from "./RegistrationForm";
 import {
   reducer,
   mapStateToProps,
-  mapDispatchToProps,
+  mapDispatchToProps
 } from "./RegistrationForm.state";
 
 RegistrationForm.reducer = reducer;

package/src/components/molecules/reset-password-form/ResetPasswordForm.js

@@ -11,8 +11,10 @@ import {
 import PasswordRequirements from "../../atoms/password-requirements";
 import { Box } from "../../atoms/layouts";
 import { FormInput, FormInputColumn } from "../../atoms/form-layouts";
+import { noop } from "../../../util/general";
+
 const ResetPasswordForm = ({
-  handleSubmit,
+  handleSubmit = noop,
   clearOnDismount,
   fields,
   actions,

package/src/components/molecules/reset-password-form/index.js

@@ -2,7 +2,7 @@ import ResetPasswordForm from "./ResetPasswordForm";
 import {
   reducer,
   mapStateToProps,
-  mapDispatchToProps,
+  mapDispatchToProps
 } from "./ResetPasswordForm.state";
 
 ResetPasswordForm.reducer = reducer;

package/src/constants/index.js

@@ -0,0 +1,2 @@
+export * from "./colors";
+export * from "./style_constants";

package/src/index.js

@@ -1,2 +1,3 @@
-// export * from "./deprecated";
 export * from "./components";
+export * from "./constants";
+export * from "./util";