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

package/dist/index.cjs.js

@@ -39730,9 +39730,7 @@ var WalletName = function WalletName(_ref) {
     _ref$linkButtonExtraS = _ref.linkButtonExtraStyles,
     linkButtonExtraStyles = _ref$linkButtonExtraS === void 0 ? "" : _ref$linkButtonExtraS,
     _ref$isLoading = _ref.isLoading,
-    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-    _ref$dataQa = _ref.dataQa,
-    dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
   return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(Module$1, {
@@ -39762,7 +39760,6 @@ var WalletName = function WalletName(_ref) {
   }, text), (text || actionText) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\xA0"), action && actionText && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     disabled: disableAction,
     text: actionText,
-    dataQa: dataQa,
     action: action,
     variant: "smallGhost",
     extraStyles: "\n                    margin: 0;\n                    min-width: 0;\n                    span {font-size: 0.75rem;}\n                    ".concat(linkButtonExtraStyles, "\n                ")
@@ -40383,6 +40380,21 @@ validatorFns[VALID_NAME] = (value, args, form) =>
     ? false
     : new RegExp(/[A-zÀ-ÿ\-,'\S]+(\s?[A-zÀ-ÿ\-,'\S])*/).test(value);
 
+const IS_NOT_AMEX_CARD = 'validator/IS_NOT_AMEX_CARD';
+const IS_NOT_AMEX_CARD_ERROR = 'validator/IS_NOT_AMEX_CARD_ERROR';
+const isNotAmExCard = createValidator(
+  IS_NOT_AMEX_CARD,
+  IS_NOT_AMEX_CARD_ERROR
+);
+/* This regular expression looks for values not starting with 34 or 37, and
+ * reflects that the shortest credit card number we will see is 8 digits,
+ * while the longest we'd see is 19 digits according to ansi.org. We want to
+ * allow any number with a length in that range that is not an AmEx Card.
+ * Source: https://www.ansi.org/standards-news/all-news/2016/07/announcing-major-changes-to-the-issuer-identification-number-iin-standard-28
+ */
+validatorFns[IS_NOT_AMEX_CARD] = (value, args, form) =>
+  new RegExp(/^([^3]\d{7,18}|3[^47]\d{6,17})$/).test(value);
+
 const runValidatorErrorMessage = (type) =>
   `${type} was passed to runValidator, but that validator type does not exist. 
   Please check that you are only calling validator creator functions exported from 
@@ -48550,11 +48562,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     buttonGroupStyles = _ref.buttonGroupStyles,
     _ref$hideAdditionalBu = _ref.hideAdditionalButton,
     hideAdditionalButton = _ref$hideAdditionalBu === void 0 ? false : _ref$hideAdditionalBu,
-    additionalButton = _ref.additionalButton,
-    _ref$nextButtonTestId = _ref.nextButtonTestId,
-    nextButtonTestId = _ref$nextButtonTestId === void 0 ? null : _ref$nextButtonTestId,
-    _ref$backButtonTestId = _ref.backButtonTestId,
-    backButtonTestId = _ref$backButtonTestId === void 0 ? null : _ref$backButtonTestId;
+    additionalButton = _ref.additionalButton;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
   var backButton = !!cancelURL && !!cancelText ? /*#__PURE__*/React__default.createElement(ButtonWithLink, {
@@ -48562,7 +48570,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     url: cancelURL,
     variant: backButtonVariant,
     extraStyles: isMobile && "flex-grow: 1",
-    dataQa: backButtonTestId || cancelText,
+    dataQa: cancelText,
     "aria-labelledby": "".concat(kebabCaseString(cancelText), "-button"),
     role: "link"
   }) : backButtonAction && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
@@ -48579,7 +48587,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     text: redirectText,
     variant: forwardButtonVariant,
     extraStyles: isMobile && "flex-grow: 1",
-    dataQa: nextButtonTestId || redirectText,
+    dataQa: redirectText,
     disabled: isForwardButtonDisabled,
     "aria-labelledby": "".concat(kebabCaseString(redirectText), "-button"),
     role: forwardButtonAriaRole
@@ -48589,7 +48597,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     action: forwardButtonAction,
     isLoading: forwardButtonLoading,
     extraStyles: isMobile && "flex-grow: 1",
-    dataQa: nextButtonTestId || forwardButtonText,
+    dataQa: forwardButtonText,
     disabled: isForwardButtonDisabled,
     "aria-labelledby": "".concat(kebabCaseString(forwardButtonText), "-button"),
     role: forwardButtonAriaRole
@@ -49539,7 +49547,9 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     saveToWallet = _ref.saveToWallet,
     walletCheckboxMarked = _ref.walletCheckboxMarked,
     deniedCards = _ref.deniedCards,
-    termsContent = _ref.termsContent;
+    termsContent = _ref.termsContent,
+    _ref$allowAmExCards = _ref.allowAmExCards,
+    allowAmExCards = _ref$allowAmExCards === void 0 ? true : _ref$allowAmExCards;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
   var showTerms = !!termsContent;
@@ -49549,6 +49559,9 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
         return actions.fields.creditCardNumber.addValidator(matchesRegex(checkDeniedCards(card)));
       });
     }
+    if (!allowAmExCards) {
+      actions.fields.creditCardNumber.addValidator(isNotAmExCard());
+    }
   }, []);
   React.useEffect(function () {
     if (clearOnDismount) {
@@ -49558,7 +49571,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     }
   }, []);
   var nameOnCardErrors = _defineProperty({}, required.error, "Name is required");
-  var creditCardNumberErrors = _defineProperty(_defineProperty(_defineProperty({}, required.error, "Credit card number is required"), hasLength.error, "Credit card number is invalid"), matchesRegex.error, "".concat(displayCardBrand(fields.creditCardNumber.rawValue), " is not accepted"));
+  var creditCardNumberErrors = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, 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, "".concat(displayCardBrand(fields.creditCardNumber.rawValue), " is not accepted"));
   var expirationDateErrors = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, required.error, "Expiration date is required"), hasLength.error, "Expiration date is invalid"), isValidMonth.error, "Expiration month is invalid"), dateAfterToday.error, "Expiration date is invalid");
   var cvvErrors = _defineProperty(_defineProperty({}, required.error, "CVV is required"), hasLength.error, "CVV is invalid");
   var zipCodeErrors = _defineProperty(_defineProperty({}, required.error, "Zip code is required"), hasLength.error, "Zip code is invalid");