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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.6.5-beta.0",
+  "version": "10.6.6-beta.0",
   "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.0"
+    "redux-freeform": "^5.9.1-beta.2"
   }
 }

package/src/components/atoms/wallet-name/WalletName.js

@@ -16,8 +16,7 @@ const WalletName = ({
   actionText = null, // right side hyperlinked text
   disableAction = false,
   linkButtonExtraStyles = "", // hyperlinked text extraStyles
-  isLoading = false, // shows a spinner on the left when true
-  dataQa = null
+  isLoading = false // shows a spinner on the left when true
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
@@ -58,7 +57,6 @@ const WalletName = ({
                 <ButtonWithAction
                   disabled={disableAction}
                   text={actionText}
-                  dataQa={dataQa}
                   action={action}
                   variant="smallGhost"
                   extraStyles={`

package/src/components/atoms/wallet-name/index.d.ts

@@ -9,7 +9,6 @@ export interface WalletNameProps {
   text?: string | null;
   isLoading: boolean;
   buttonExtraStyles?: string;
-  dataQa?: string | null;
 }
 
 export const WalletName: React.FC<Expand<WalletNameProps> &

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

@@ -5,7 +5,8 @@ import {
   hasLength,
   matchesRegex,
   dateAfterToday,
-  isValidMonth
+  isValidMonth,
+  isNotAmExCard
 } from "redux-freeform";
 import Checkbox from "../../atoms/checkbox";
 import CountryDropdown from "../../atoms/country-dropdown";
@@ -42,7 +43,8 @@ const PaymentFormCard = ({
   saveToWallet,
   walletCheckboxMarked,
   deniedCards,
-  termsContent
+  termsContent,
+  allowAmExCards = true
 }) => {
   const { isMobile } = useContext(ThemeContext);
   const showTerms = !!termsContent;
@@ -55,6 +57,9 @@ const PaymentFormCard = ({
         )
       );
     }
+    if (!allowAmExCards) {
+      actions.fields.creditCardNumber.addValidator(isNotAmExCard());
+    }
   }, []);
 
   useEffect(() => {
@@ -69,6 +74,8 @@ 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`

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

@@ -19,6 +19,10 @@ const ConnectedForm = connect(
   PaymentFormCardState.mapStateToProps,
   PaymentFormCardState.mapDispatchToProps
 )(PaymentFormCard);
+
 export const paymentFormCard = () => (
-  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
+  <ConnectedForm
+    showErrors={boolean("showErrors", false, "props")}
+    allowAmExCards={boolean("allowAmExCards", true, "props")}
+  />
 );