@thecb/components 4.2.0 → 4.2.4

package/dist/index.cjs.js

@@ -6104,6 +6104,35 @@ var checkCardBrand = function checkCardBrand(number) {
     return "AMEX";
   } else return "UNKNOWN";
 };
+var displayCardBrand = function displayCardBrand(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 "American Express";
+  } else return "Unknown Card";
+};
+var checkRestrictedCards = function checkRestrictedCards(name) {
+  switch (name) {
+    case "DISCOVER":
+      return /^(?!6011)/;
+
+    case "MASTERCARD":
+      return /^(?!5[1-5])/;
+
+    case "VISA":
+      return /^(?!4)/;
+
+    case "AMEX":
+      return /^(?!3[4,7])/;
+
+    default:
+      return "";
+  }
+};
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6112,7 +6141,9 @@ var general = /*#__PURE__*/Object.freeze({
   convertCentsToMoneyInt: convertCentsToMoneyInt,
   safeChildren: safeChildren,
   generateClickHandler: generateClickHandler,
-  checkCardBrand: checkCardBrand
+  checkCardBrand: checkCardBrand,
+  displayCardBrand: displayCardBrand,
+  checkRestrictedCards: checkRestrictedCards
 });
 
 var Text = function Text(_ref) {
@@ -14982,7 +15013,7 @@ var AlertErrorIcon = function AlertErrorIcon() {
     xmlnsXlink: "http://www.w3.org/1999/xlink"
   }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
     d: "M12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 Z M15.5714286,7 L12,10.572 L8.42857143,7 L7,8.42857143 L10.571,12 L7,15.5714286 L8.42857143,17 L11.999,13.428 L15.5714286,17 L17,15.5714286 L13.428,12 L17,8.42857143 L15.5714286,7 Z",
-    id: "path-1"
+    id: "path-1-error-icon"
   })), /*#__PURE__*/React__default.createElement("g", {
     id: "Symbols",
     stroke: "none",
@@ -14999,12 +15030,12 @@ var AlertErrorIcon = function AlertErrorIcon() {
     id: "mask-2",
     fill: "white"
   }, /*#__PURE__*/React__default.createElement("use", {
-    xlinkHref: "#path-1"
+    xlinkHref: "#path-1-error-icon"
   })), /*#__PURE__*/React__default.createElement("use", {
     id: "icon---error",
     fill: "#ED125F",
     fillRule: "nonzero",
-    xlinkHref: "#path-1"
+    xlinkHref: "#path-1-error-icon"
   })))));
 };
 
@@ -34228,6 +34259,12 @@ const set$2 = fieldName => value => ({
 const CLEAR = "form/CLEAR";
 const clear = () => ({ type: CLEAR });
 
+const ADD_VALIDATOR = "field/ADD_VALIDATOR";
+const addValidator = fieldName => validator => ({
+  type: ADD_VALIDATOR,
+  payload: { fieldName, validator }
+});
+
 const createFormReducer = formConfig => (
   state = createInitialState(formConfig),
   action
@@ -34259,6 +34296,23 @@ const createFormReducer = formConfig => (
       });
     case CLEAR:
       return createInitialState(formConfig);
+    case ADD_VALIDATOR: 
+      const fieldWithOverride = action.payload.fieldName;
+      const newValidator = action.payload.validator;
+      
+      return produce(state, draftState => {
+        draftState[fieldWithOverride].validators.push(newValidator);
+        const fields = Object.entries(draftState);
+        for (let entry of fields) {
+          let fieldName = entry[0];
+          let field = entry[1];
+          let errors = computeErrors(fieldName, draftState);
+          let dirty = field.dirty;
+          draftState[fieldName].errors = errors;
+          draftState[fieldName].dirty = dirty;
+          draftState[fieldName].hasErrors = errors.length > 0;
+        }
+      });
     default:
       return state;
   }
@@ -34277,7 +34331,8 @@ const createMapDispatchToProps = formConfig => {
     const keys = Object.keys(formConfig);
     for (let fieldName of keys) {
       dispatchObj.fields[fieldName] = {
-        set: value => dispatch(set$2(fieldName)(value))
+        set: value => dispatch(set$2(fieldName)(value)),
+        addValidator: validator => dispatch(addValidator(fieldName)(validator))
       };
     }
     dispatchObj.form = { clear: () => dispatch(clear()) };
@@ -39347,18 +39402,9 @@ PaymentFormACH.reducer = reducer$6;
 PaymentFormACH.mapStateToProps = mapStateToProps$7;
 PaymentFormACH.mapDispatchToProps = mapDispatchToProps$6;
 
-var _creditCardNumberErro, _expirationDateErrors, _cvvErrors, _zipCodeErrors;
-
-var nameOnCardErrors = _defineProperty({}, required.error, "Name is required");
-
-var creditCardNumberErrors = (_creditCardNumberErro = {}, _defineProperty(_creditCardNumberErro, required.error, "Credit card number is required"), _defineProperty(_creditCardNumberErro, hasLength.error, "Credit card number is invalid"), _creditCardNumberErro);
-var expirationDateErrors = (_expirationDateErrors = {}, _defineProperty(_expirationDateErrors, required.error, "Expiration date is required"), _defineProperty(_expirationDateErrors, hasLength.error, "Expiration date is invalid"), _defineProperty(_expirationDateErrors, matchesRegex.error, "Expiration date is invalid"), _expirationDateErrors);
-var cvvErrors = (_cvvErrors = {}, _defineProperty(_cvvErrors, required.error, "CVV is required"), _defineProperty(_cvvErrors, hasLength.error, "CVV is invalid"), _cvvErrors);
-var zipCodeErrors = (_zipCodeErrors = {}, _defineProperty(_zipCodeErrors, required.error, "Zip code is required"), _defineProperty(_zipCodeErrors, hasLength.error, "Zip code is invalid"), _zipCodeErrors);
-
-var countryErrorMessages = _defineProperty({}, required.error, "Country is required");
-
 var PaymentFormCard = function PaymentFormCard(_ref) {
+  var _creditCardNumberErro, _expirationDateErrors, _cvvErrors, _zipCodeErrors;
+
   var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "default" : _ref$variant,
       _ref$hideZipCode = _ref.hideZipCode,
@@ -39372,7 +39418,15 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       isMobile = _ref.isMobile,
       showWalletCheckbox = _ref.showWalletCheckbox,
       saveToWallet = _ref.saveToWallet,
-      walletCheckboxMarked = _ref.walletCheckboxMarked;
+      walletCheckboxMarked = _ref.walletCheckboxMarked,
+      restrictedCards = _ref.restrictedCards;
+  React.useEffect(function () {
+    if (restrictedCards) {
+      restrictedCards.map(function (card) {
+        return actions.fields.creditCardNumber.addValidator(matchesRegex(checkRestrictedCards(card)));
+      });
+    }
+  }, []);
   React.useEffect(function () {
     if (clearOnDismount) {
       return function () {
@@ -39380,6 +39434,16 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       };
     }
   }, []);
+
+  var nameOnCardErrors = _defineProperty({}, required.error, "Name is required");
+
+  var creditCardNumberErrors = (_creditCardNumberErro = {}, _defineProperty(_creditCardNumberErro, required.error, "Credit card number is required"), _defineProperty(_creditCardNumberErro, hasLength.error, "Credit card number is invalid"), _defineProperty(_creditCardNumberErro, matchesRegex.error, "".concat(displayCardBrand(fields.creditCardNumber.rawValue), " is not accepted")), _creditCardNumberErro);
+  var expirationDateErrors = (_expirationDateErrors = {}, _defineProperty(_expirationDateErrors, required.error, "Expiration date is required"), _defineProperty(_expirationDateErrors, hasLength.error, "Expiration date is invalid"), _defineProperty(_expirationDateErrors, matchesRegex.error, "Expiration date is invalid"), _expirationDateErrors);
+  var cvvErrors = (_cvvErrors = {}, _defineProperty(_cvvErrors, required.error, "CVV is required"), _defineProperty(_cvvErrors, hasLength.error, "CVV is invalid"), _cvvErrors);
+  var zipCodeErrors = (_zipCodeErrors = {}, _defineProperty(_zipCodeErrors, required.error, "Zip code is required"), _defineProperty(_zipCodeErrors, hasLength.error, "Zip code is invalid"), _zipCodeErrors);
+
+  var countryErrorMessages = _defineProperty({}, required.error, "Country is required");
+
   var isUS = fields.country.rawValue === "US";
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.2.0",
+  "version": "4.2.4",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -80,6 +80,6 @@
     "ramda": "^0.27.0",
     "react-aria-modal": "^4.0.0",
     "react-pose": "^4.0.10",
-    "redux-freeform": "^4.1.4"
+    "redux-freeform": "^5.0.0"
   }
 }

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

@@ -2,7 +2,12 @@ import React, { useEffect } from "react";
 import { required, hasLength, matchesRegex } from "redux-freeform";
 import Checkbox from "../../atoms/checkbox";
 import CountryDropdown from "../../atoms/country-dropdown";
-import { checkCardBrand, noop } from "../../../util/general";
+import {
+  checkCardBrand,
+  noop,
+  checkRestrictedCards,
+  displayCardBrand
+} from "../../../util/general";
 import {
   expirationDateFormat,
   creditCardFormat,
@@ -16,30 +21,6 @@ import {
 } from "../../atoms/form-layouts";
 import { Box } from "../../atoms/layouts";
 
-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 countryErrorMessages = {
-  [required.error]: "Country is required"
-};
-
 const PaymentFormCard = ({
   variant = "default",
   hideZipCode = false,
@@ -51,13 +32,52 @@ const PaymentFormCard = ({
   isMobile,
   showWalletCheckbox,
   saveToWallet,
-  walletCheckboxMarked
+  walletCheckboxMarked,
+  restrictedCards
 }) => {
+  useEffect(() => {
+    if (restrictedCards) {
+      restrictedCards.map(card =>
+        actions.fields.creditCardNumber.addValidator(
+          matchesRegex(checkRestrictedCards(card))
+        )
+      );
+    }
+  }, []);
+
   useEffect(() => {
     if (clearOnDismount) {
       return () => actions.form.clear();
     }
   }, []);
+
+  const nameOnCardErrors = {
+    [required.error]: "Name is required"
+  };
+  const creditCardNumberErrors = {
+    [required.error]: "Credit card number is required",
+    [hasLength.error]: "Credit card number is invalid",
+    [matchesRegex.error]: `${displayCardBrand(
+      fields.creditCardNumber.rawValue
+    )} is not accepted`
+  };
+  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 countryErrorMessages = {
+    [required.error]: "Country is required"
+  };
+
   const isUS = fields.country.rawValue === "US";
   return (
     <FormContainer variant={variant} role="form" aria-label="Card payment">

package/src/deprecated/icons/AlertErrorIcon.js

@@ -11,7 +11,7 @@ export const AlertErrorIcon = () => (
     <defs>
       <path
         d="M12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 Z M15.5714286,7 L12,10.572 L8.42857143,7 L7,8.42857143 L10.571,12 L7,15.5714286 L8.42857143,17 L11.999,13.428 L15.5714286,17 L17,15.5714286 L13.428,12 L17,8.42857143 L15.5714286,7 Z"
-        id="path-1"
+        id="path-1-error-icon"
       ></path>
     </defs>
     <g
@@ -27,13 +27,13 @@ export const AlertErrorIcon = () => (
           transform="translate(24.000000, 32.000000)"
         >
           <mask id="mask-2" fill="white">
-            <use xlinkHref="#path-1"></use>
+            <use xlinkHref="#path-1-error-icon"></use>
           </mask>
           <use
             id="icon---error"
             fill="#ED125F"
             fillRule="nonzero"
-            xlinkHref="#path-1"
+            xlinkHref="#path-1-error-icon"
           ></use>
         </g>
       </g>

package/src/util/general.js

@@ -45,3 +45,30 @@ export const checkCardBrand = number => {
     return "AMEX";
   } else return "UNKNOWN";
 };
+
+export const displayCardBrand = 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 "American Express";
+  } else return "Unknown Card";
+};
+
+export const checkRestrictedCards = name => {
+  switch (name) {
+    case "DISCOVER":
+      return /^(?!6011)/;
+    case "MASTERCARD":
+      return /^(?!5[1-5])/;
+    case "VISA":
+      return /^(?!4)/;
+    case "AMEX":
+      return /^(?!3[4,7])/;
+    default:
+      return "";
+  }
+};