@thecb/components 2.2.1 → 2.3.0

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,2 @@
+export * from "./formats";
+export * from "./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 : "";