@thecb/components 10.6.6-beta.0 → 10.6.6-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.6.6-beta.0",
+  "version": "10.6.6-beta.1",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
@@ -90,6 +90,6 @@
     "ramda": "^0.27.0",
     "react-aria-modal": "^4.0.0",
     "react-pose": "^4.0.10",
-    "redux-freeform": "^5.9.1-beta.2"
+    "redux-freeform": "^5.9.0"
   }
 }

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

@@ -5,8 +5,7 @@ import {
   hasLength,
   matchesRegex,
   dateAfterToday,
-  isValidMonth,
-  isNotAmExCard
+  isValidMonth
 } from "redux-freeform";
 import Checkbox from "../../atoms/checkbox";
 import CountryDropdown from "../../atoms/country-dropdown";
@@ -43,8 +42,7 @@ const PaymentFormCard = ({
   saveToWallet,
   walletCheckboxMarked,
   deniedCards,
-  termsContent,
-  allowAmExCards = true
+  termsContent
 }) => {
   const { isMobile } = useContext(ThemeContext);
   const showTerms = !!termsContent;
@@ -57,9 +55,6 @@ const PaymentFormCard = ({
         )
       );
     }
-    if (!allowAmExCards) {
-      actions.fields.creditCardNumber.addValidator(isNotAmExCard());
-    }
   }, []);
 
   useEffect(() => {
@@ -74,11 +69,9 @@ const PaymentFormCard = ({
   const creditCardNumberErrors = {
     [required.error]: "Credit card number is required",
     [hasLength.error]: "Credit card number is invalid",
-    [isNotAmExCard.error]:
-      "American Express cards are not available for payment.",
     [matchesRegex.error]: `${displayCardBrand(
       fields.creditCardNumber.rawValue
-    )} is not accepted`
+    )} cards are not available for payment`
   };
   const expirationDateErrors = {
     [required.error]: "Expiration date is required",

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-import { boolean } from "@storybook/addon-knobs";
+import { boolean, object } from "@storybook/addon-knobs";
 
 import PaymentFormCard from "./PaymentFormCard";
 import page from "../../../../.storybook/page";
@@ -13,6 +13,7 @@ const story = page({
   mapStateToProps: PaymentFormCardState.mapStateToProps,
   mapDispatchToProps: PaymentFormCardState.mapDispatchToProps
 });
+
 export default story;
 
 const ConnectedForm = connect(
@@ -21,8 +22,12 @@ const ConnectedForm = connect(
 )(PaymentFormCard);
 
 export const paymentFormCard = () => (
+  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
+);
+
+export const paymentFormCardWithDeniedCards = () => (
   <ConnectedForm
     showErrors={boolean("showErrors", false, "props")}
-    allowAmExCards={boolean("allowAmExCards", true, "props")}
+    deniedCards={object("deniedCards", ["AMEX"], "props")}
   />
 );

package/src/util/general.js

@@ -74,7 +74,7 @@ export const displayCardBrand = number => {
     return "Mastercard";
   } else if (/^4/.test(number)) {
     return "Visa";
-  } else if (/^3[4,7]/.test(number)) {
+  } else if (/^3[4,7]\d{13}$/.test(number)) {
     return "American Express";
   } else return "Unknown Card";
 };