@thecb/components 4.1.32 → 4.2.3

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 "Amex";
+  } 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"
   })))));
 };
 
@@ -20956,7 +20987,7 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
   }, "Autopay Enabled")));
 };
 
-var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$j, "default");
+var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$j);
 
 function _templateObject3$8() {
   var data = _taggedTemplateLiteral(["\n  display: block;\n  top: auto;\n  bottom: 6px;\n  left: 2px;\n  transition-duration: 0.13s;\n  transition-delay: 0.13s;\n  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  margin-top: 12px;\n  background-color: ", ";\n\n  &, &::before, &::after {\n    background-color: ", ";\n    width: 30px;\n    height: 3px;\n    position: absolute;\n    transition-property: transform;\n    transition-duration: 0.15s;\n    transition-timing-function: ease;\n  }\n\n  &::before, &::after {\n    content: \"\";\n    display: block;\n  }\n\n  &::before {\n    top: -10px;\n    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), \n                transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  }\n\n  &::after {\n    bottom: -10px;\n    top: -20px;\n    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), \n                opacity 0.1s linear;\n  }\n\n  &.active, &.active::before, &.active::after {\n    background-color: ", ";\n  }\n\n  &.active {\n    transform: translate3d(0, -10px, 0) rotate(-45deg);\n    transition-delay: 0.22s;\n    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n\n  &.active::after {\n    top: 0;\n    opacity: 0;\n    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), \n                opacity: 0.1s 0.22s linear;\n  }\n\n  &.active::before {\n    top: 0;\n    transform: rotate(-90deg);\n    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), \n                transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n"]);
@@ -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()) };
@@ -34778,7 +34833,7 @@ var EditableList = function EditableList(_ref) {
       useModal = _ref$useModal === void 0 ? false : _ref$useModal,
       Modal = _ref.modal,
       modalProps = _ref.modalProps,
-      autoPayMethod = _ref.autoPayMethod,
+      autoPayMethods = _ref.autoPayMethods,
       qaPrefix = _ref.qaPrefix;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0rem 0rem 1.5rem 0rem"
@@ -34805,7 +34860,9 @@ var EditableList = function EditableList(_ref) {
 
     var expiredItem = (_item$expirationStatu = item === null || item === void 0 ? void 0 : item.expirationStatus) !== null && _item$expirationStatu !== void 0 ? _item$expirationStatu : ACTIVE$1;
     return /*#__PURE__*/React__default.createElement(EditableListItem, {
-      listItemSize: !!item.id && item.id === autoPayMethod ? "big" : listItemSize,
+      listItemSize: !!item.id && (autoPayMethods === null || autoPayMethods === void 0 ? void 0 : autoPayMethods.some(function (methodID) {
+        return methodID === item.id;
+      })) ? "big" : listItemSize,
       key: item.id || item,
       disabled: expiredItem === EXPIRED$1
     }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -39345,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,
@@ -39370,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 () {
@@ -39378,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), " credit cards are restricted")), _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.1.32",
+  "version": "4.2.3",
   "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/atoms/formatted-credit-card/FormattedCreditCard.js

@@ -89,6 +89,5 @@ const FormattedCreditCard = ({
 export default themeComponent(
   FormattedCreditCard,
   "FormattedCreditCard",
-  fallbackValues,
-  "default"
+  fallbackValues
 );

package/src/components/molecules/editable-list/EditableList.js

@@ -34,7 +34,7 @@ const EditableList = ({
   useModal = false,
   modal: Modal,
   modalProps,
-  autoPayMethod,
+  autoPayMethods,
   qaPrefix
 }) => (
   <Box padding="0rem 0rem 1.5rem 0rem">
@@ -63,7 +63,10 @@ const EditableList = ({
           return (
             <EditableListItem
               listItemSize={
-                !!item.id && item.id === autoPayMethod ? "big" : listItemSize
+                !!item.id &&
+                autoPayMethods?.some(methodID => methodID === item.id)
+                  ? "big"
+                  : listItemSize
               }
               key={item.id || item}
               disabled={expiredItem === EXPIRED}

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
+    )} credit cards are restricted`
+  };
+  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 "Amex";
+  } 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 "";
+  }
+};