@thecb/components 2.2.1 → 3.1.1

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/radio-section/RadioSection.js

@@ -103,7 +103,7 @@ const RadioSection = ({
               onKeyDown={e => handleKeyDown(section.id, e)}
               onFocus={() => setFocused(section.id)}
               onBlur={() => setFocused(null)}
-              focusStyles={themeValues.focusStyles}
+              hoverStyles={themeValues.focusStyles}
               animate={openSection === section.id ? "open" : "closed"}
               initial={initiallyOpen ? "open" : "closed"}
               key={`item-${section.id}`}

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/components/molecules/tab-sidebar/TabSidebar.js

@@ -34,11 +34,16 @@ const TabSidebar = ({ links, isMobile, themeValues }) => (
         <InternalLink
           to={route}
           key={`${route}-${index}`}
-          hoverStyles={
-            active
-              ? `> * {background-color: ${themeValues.activeTabHover};}`
-              : `> * {background-color: rgba(8, 27, 43, 0.05);}`
-          }
+          extraStyles={`&:hover, &:focus { 
+            ${
+              active
+                ? `> * {
+                background-color: ${themeValues.activeTabHover};
+              }`
+                : `> * { 
+                background-color: rgba(8, 27, 43, 0.05);
+              }`
+            }}`}
         >
           <Box
             padding={isMobile ? "6px 4px" : "18px 16px"}

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js

@@ -24,7 +24,6 @@ const TermsAndConditionsModal = ({
         color={themeValues.linkColor}
         weight={themeValues.fontWeight}
         hoverStyles={themeValues.modalLinkHoverFocus}
-        focusStyles={themeValues.modalLinkHoverFocus}
         extraStyles={`cursor: pointer;`}
         tabIndex="0"
         onKeyPress={e => e.key === "Enter" && toggleOpen(true)}

package/src/constants/index.js

@@ -0,0 +1,4 @@
+import * as colors from "./colors";
+import * as fontWeights from "./style_constants";
+
+export { colors, fontWeights };

package/src/index.js

@@ -1,2 +1,4 @@
-// export * from "./deprecated";
 export * from "./components";
+import * as constants from "./constants";
+import * as util from "./util";
+export { constants, util };

package/src/util/formats.js

@@ -12,7 +12,7 @@ export const phoneFormats = [
   "(___) ___-_",
   "(___) ___-__",
   "(___) ___-___",
-  "(___) ___-____",
+  "(___) ___-____"
 ];
 
 const zipFormats = [
@@ -25,6 +25,58 @@ const zipFormats = [
   "______",
   "_____-__",
   "_____-___",
-  "_____-____",
+  "_____-____"
 ];
+
+const creditCardFormats = [
+  "",
+  "_",
+  "__",
+  "___",
+  "____",
+  "____ _",
+  "____ __",
+  "____ ___",
+  "____ ____",
+  "____ ____ _",
+  "____ ____ __",
+  "____ ____ ___",
+  "____ ____ ____",
+  "____ ____ ____ _",
+  "____ ____ ____ __",
+  "____ ____ ____ ___",
+  "____ ____ ____ ____"
+];
+
+export const moneyFormats = [
+  "",
+  "$0.0_",
+  "$0.__",
+  "$_.__",
+  "$__.__",
+  "$___.__",
+  "$_,___.__",
+  "$__,___.__",
+  "$___,___.__",
+  "$_,___,___.__",
+  "$__,___,___.__",
+  "$___,___,___.__",
+  "$_,___,___,___.__",
+  "$__,___,___,___.__",
+  "$___,___,___,___.__",
+  "$_,___,___,___,___.__"
+];
+
+export const expirationDateFormats = ["", "_", "__/", "__/_", "__/__"];
+
 export const zipFormat = createFormat(zipFormats, formatDelimiter);
+export const creditCardFormat = createFormat(
+  creditCardFormats,
+  formatDelimiter
+);
+export const expirationDateFormat = createFormat(
+  expirationDateFormats,
+  formatDelimiter
+);
+export const phoneFormat = createFormat(phoneFormats, formatDelimiter);
+export const moneyFormat = createFormat(moneyFormats, formatDelimiter);

package/src/util/general.js

@@ -2,14 +2,37 @@ import numeral from "numeral";
 
 export const noop = () => {};
 
-const formatMoneyString = (s) => numeral(s).format("$0,0.00");
-const convertCentsToMoneyDecimal = (n) => (n / 100).toFixed(2);
-export const displayCurrency = (cents) =>
+const formatMoneyString = s => numeral(s).format("$0,0.00");
+const convertCentsToMoneyDecimal = n => (n / 100).toFixed(2);
+export const displayCurrency = cents =>
   formatMoneyString(convertCentsToMoneyDecimal(cents));
 
+export const convertCentsToMoneyInt = n => (n / 100).toFixed(0);
+
 export const safeChildren = (children, replacement = []) => {
   if (children && children instanceof Array) {
-    return children.map((child) => (!child ? replacement : child));
+    return children.map(child => (!child ? replacement : child));
   }
   return !children ? replacement : children;
 };
+
+export const generateClickHandler = (form, handleErrors, submitForm) => e => {
+  e.preventDefault();
+  const formHasError = Object.values(form.fields).reduce(
+    (acc, curr) => acc || curr.hasErrors,
+    false
+  );
+  return formHasError ? handleErrors() : submitForm();
+};
+
+export const checkCardBrand = number => {
+  if (/^6011/.test(number)) {
+    return "DISCOVER";
+  } else if (/^5[1-5]/.test(number)) {
+    return "MASTERCARD";
+  } else if (/^4/.test(number)) {
+    return "VISA";
+  } else if (/^3[4,7]/.test(number)) {
+    return "AMEX";
+  } else return "UNKNOWN";
+};

package/src/util/index.js

@@ -0,0 +1,4 @@
+import * as formats from "./formats";
+import * as general from "./general";
+
+export { formats, general };

package/src/util/inputValidationUtils.js

@@ -1,22 +1,5 @@
-import * as S from "sanctuary";
-import * as $ from "sanctuary-def";
 import * as R from "ramda";
 
-// FormInput :: { form :: Object String any, keyName :: String }
-
-// String -> Maybe String
-const getsMaybeString = keyName => S.gets(S.is($.String))([keyName, "value"]);
-
-// String, String, Regex -> FormInput -> Either String String
-const regexTest = (keyName, errorMsg, regex) =>
-  S.pipe([
-    getsMaybeString(keyName),
-    S.maybeToEither("Invalid string entered"),
-    S.chain(string =>
-      S.test(regex)(string) ? S.Right(string) : S.Left(errorMsg)
-    )
-  ]);
-
 // Constants to reprsent input error types
 export const MIN_LENGTH_ERROR = "error/HAS_LENGTH";
 export const MAX_LENGTH_ERROR = "max_length_error";
@@ -105,153 +88,3 @@ export const getInputState = (
   }
   return INPUT_STATE_VALID;
 };
-
-// Number -> FormInput -> Either String String
-export const stringHasMinLength = minLength => ({ form, keyName }) =>
-  S.pipe([
-    getsMaybeString(keyName),
-    S.maybeToEither("Invalid string entered"),
-    S.chain(string =>
-      string.length >= minLength ? S.Right(string) : S.Left(MIN_LENGTH_ERROR)
-    )
-  ])(form);
-
-// Number -> FormInput -> Either String String
-// This function is INCLUSIVE of the maxLength arg supplied to it
-export const stringHasMaxLength = maxLength => ({ form, keyName }) =>
-  S.pipe([
-    getsMaybeString(keyName),
-    S.maybeToEither("Invalid string entered"),
-    S.chain(string =>
-      string.length <= maxLength ? S.Right(string) : S.Left(MAX_LENGTH_ERROR)
-    )
-  ])(form);
-
-// Number -> FormInput -> Either String String
-export const stringHasExactLength = exactLength => ({ form, keyName }) =>
-  S.pipe([
-    getsMaybeString(keyName),
-    S.maybeToEither("Invalid string entered"),
-    S.chain(string =>
-      string.length == exactLength
-        ? S.Right(string)
-        : S.Left(EXACT_LENGTH_ERROR)
-    )
-  ])(form);
-
-// Array(Number) -> FormInput -> Either String String
-export const stringHasMultipleValidLengths = validLengths => ({
-  form,
-  keyName
-}) =>
-  S.pipe([
-    getsMaybeString(keyName),
-    S.maybeToEither("Form is missing key or value is not a string"),
-    S.chain(string =>
-      R.contains(string.length, validLengths)
-        ? S.Right(string)
-        : S.Left(MULTIPLE_LENGTHS_ERROR)
-    )
-  ])(form);
-
-// FormInput -> Either String String
-/* NOTE: this is not a foolproof email validation check
-It will likely fail on edge cases such as " "@foo.com
-It also cannot tell you if the particular email entered is valid for the given domain
-Or if the email account actually exists
-Only use this to help indicate to a user that they may have entered their email incorrectly
-Real validation should be accomplished on the server by sending an email to
-the provided email address
-*/
-export const isProbablyAnEmail = ({ form, keyName }) =>
-  regexTest(keyName, EMAIL_ERROR, /^[^\s@]+@[^\s@]+\.[^\s@]+$/)(form);
-
-// FormInput -> Either String String
-export const stringHasNumber = ({ form, keyName }) =>
-  regexTest(keyName, HAS_NUMBER_ERROR, /[0-9]/)(form);
-
-// FormInput -> Either String String
-export const stringHasUppercaseLetter = ({ form, keyName }) =>
-  regexTest(keyName, HAS_UPPERCASE_LETTER_ERROR, /[A-Z]/)(form);
-
-// FormInput -> Either String String
-export const stringHasLowercaseLetter = ({ form, keyName }) =>
-  regexTest(keyName, HAS_LOWERCASE_LETTER_ERROR, /[a-z]/)(form);
-
-// FormInput -> Either String String
-export const stringHasSpecialCharacter = ({ form, keyName }) =>
-  regexTest(keyName, HAS_SPECIAL_CHARACTER_ERROR, /[!@#$%^&*.?]/)(form);
-
-// FormInput -> Either String String
-export const stringIsOnlyNumbers = ({ form, keyName }) =>
-  regexTest(keyName, ONLY_NUMBERS_ERROR, /^[0-9]+$/)(form);
-
-// FormInput -> Either String String
-export const stringIsOnlyLetters = ({ form, keyName }) =>
-  regexTest(keyName, ONLY_LETTERS_ERROR, /^[a-zA-Z]+$/)(form);
-
-// fieldIsRequired asks for only one character,
-// which can be a letter (a-z) or (A-Z), a digit (0-9), or one of the special characters (!@#$%^&*.?)
-// If you need only letters or numbers use one of the more specific string checks above
-// If you need the string to exceed a specificed length, use stringHasMinLength
-// FormInput -> Either String String
-export const fieldIsRequired = ({ form, keyName }) =>
-  S.pipe([
-    getsMaybeString(keyName),
-    S.maybeToEither("Invalid string entered"),
-    S.chain(string =>
-      string.replace(/\s/g, "").length === 0
-        ? S.Left(REQUIRED_FIELD_ERROR)
-        : S.Right(string)
-    )
-  ])(form);
-
-// Number -> FormInput -> Either String String
-export const numberIsGreaterThan = minValue => ({ form, keyName }) =>
-  S.pipe([
-    getsMaybeString(keyName),
-    S.maybeToEither("Invalid string entered"),
-    S.chain(n =>
-      parseInt(n, 10) > minValue
-        ? S.Right(n.toString())
-        : S.Left(NUM_GREATER_THAN_ERROR)
-    )
-  ])(form);
-
-// Number -> FormInput -> Either String String
-export const numberIsLessThan = maxValue => ({ form, keyName }) =>
-  S.pipe([
-    getsMaybeString(keyName),
-    S.maybeToEither("Invalid string entered"),
-    S.chain(n =>
-      parseInt(n, 10) < maxValue
-        ? S.Right(n.toString())
-        : S.Left(NUM_LESS_THAN_ERROR)
-    )
-  ])(form);
-
-// Error message splits the keyname on capital letters, joins with a space, and lower cases, so "accountNumber" becomes "account number"
-// Eq a => FormInput -> String -> Either String a
-export const matchesOtherField = matchKey => ({ form, keyName }) =>
-  S.equals(S.props([keyName, "value"])(form))(
-    S.props([matchKey, "value"])(form)
-  )
-    ? S.Right(S.props([keyName, "value"])(form))
-    : S.Left(MATCHES_FIELD_ERROR);
-
-// Array(String) -> FormInput -> Either String String
-export const selectIsValid = validOptions => ({ form, keyName }) =>
-  S.pipe([
-    getsMaybeString(keyName),
-    S.maybeToEither("Invalid string entered"),
-    S.chain(string =>
-      R.contains(S.toUpper(string), validOptions)
-        ? S.Right(string)
-        : S.Left(VALID_SELECT_OPTION_ERROR)
-    )
-  ])(form);
-
-export const isInputInvalid = input => input.error && input.showError;
-
-export const inputErrorMessage = input =>
-  input.showError ? input.errorMsg : "";