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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.6.5-beta.1",
+  "version": "10.6.6-beta.1",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

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-button-bar/PaymentButtonBar.js

@@ -25,9 +25,7 @@ const PaymentButtonBar = ({
   hideBackButton = false,
   buttonGroupStyles,
   hideAdditionalButton = false,
-  additionalButton,
-  nextButtonTestId = null,
-  backButtonTestId = null
+  additionalButton
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
@@ -38,7 +36,7 @@ const PaymentButtonBar = ({
         url={cancelURL}
         variant={backButtonVariant}
         extraStyles={isMobile && "flex-grow: 1"}
-        dataQa={backButtonTestId || cancelText}
+        dataQa={cancelText}
         aria-labelledby={`${kebabCaseString(cancelText)}-button`}
         role="link"
       />
@@ -62,7 +60,7 @@ const PaymentButtonBar = ({
       text={redirectText}
       variant={forwardButtonVariant}
       extraStyles={isMobile && "flex-grow: 1"}
-      dataQa={nextButtonTestId || redirectText}
+      dataQa={redirectText}
       disabled={isForwardButtonDisabled}
       aria-labelledby={`${kebabCaseString(redirectText)}-button`}
       role={forwardButtonAriaRole}
@@ -75,7 +73,7 @@ const PaymentButtonBar = ({
         action={forwardButtonAction}
         isLoading={forwardButtonLoading}
         extraStyles={isMobile && "flex-grow: 1"}
-        dataQa={nextButtonTestId || forwardButtonText}
+        dataQa={forwardButtonText}
         disabled={isForwardButtonDisabled}
         aria-labelledby={`${kebabCaseString(forwardButtonText)}-button`}
         role={forwardButtonAriaRole}

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

@@ -71,7 +71,7 @@ const PaymentFormCard = ({
     [hasLength.error]: "Credit card number is invalid",
     [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,12 +13,21 @@ const story = page({
   mapStateToProps: PaymentFormCardState.mapStateToProps,
   mapDispatchToProps: PaymentFormCardState.mapDispatchToProps
 });
+
 export default story;
 
 const ConnectedForm = connect(
   PaymentFormCardState.mapStateToProps,
   PaymentFormCardState.mapDispatchToProps
 )(PaymentFormCard);
+
 export const paymentFormCard = () => (
   <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
 );
+
+export const paymentFormCardWithDeniedCards = () => (
+  <ConnectedForm
+    showErrors={boolean("showErrors", false, "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";
 };