@thecb/components 7.8.3 → 7.9.0-beta.1

package/dist/index.cjs.js

@@ -25499,7 +25499,9 @@ var LineItem = function LineItem(_ref) {
   var description = _ref.description,
       subDescription = _ref.subDescription,
       amount = _ref.amount,
-      themeValues = _ref.themeValues;
+      themeValues = _ref.themeValues,
+      _ref$quantity = _ref.quantity,
+      quantity = _ref$quantity === void 0 ? null : _ref$quantity;
   return /*#__PURE__*/React__default.createElement(Cluster, {
     nowrap: true,
     justify: "space-between",
@@ -25512,7 +25514,10 @@ var LineItem = function LineItem(_ref) {
   }, description), /*#__PURE__*/React__default.createElement(Paragraph$1, {
     variant: themeValues.paragraphVariant,
     weight: "400"
-  }, subDescription)), /*#__PURE__*/React__default.createElement(Paragraph$1, {
+  }, subDescription)), !!quantity && /*#__PURE__*/React__default.createElement(Paragraph$1, {
+    variant: themeValues.paragraphVariant,
+    weight: themeValues.weightTitle
+  }, "x".concat(quantity)), /*#__PURE__*/React__default.createElement(Paragraph$1, {
     variant: themeValues.paragraphVariant,
     weight: "600",
     extraStyles: "margin: 0; text-align: end; min-width: fit-content; padding-left: 32px;"
@@ -47151,6 +47156,101 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
 
 var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$L, "default");
 
+var backgroundColor$c = {
+  "default": "#ffffff",
+  footer: "#ffffff"
+};
+var linkColor$6 = {
+  "default": "#3176AA",
+  footer: "#ffffff"
+};
+var border$3 = {
+  "default": "#cdcdcd",
+  footer: "#cdcdcd"
+};
+var fontSize$b = {
+  "default": "1rem",
+  footer: "0.875rem"
+};
+var lineHeight$5 = {
+  "default": "1.5rem",
+  footer: "1.25rem"
+};
+var fontWeight$8 = {
+  "default": FONT_WEIGHT_REGULAR,
+  footer: FONT_WEIGHT_SEMIBOLD
+};
+var standardInteractionStyles = "\n    &:hover {\n      outline: none; \n      text-decoration: underline;\n    }\n    &:focus {\n      outline: 3px solid #3181E3;\n      outline-offset: 2px;\n    }\n";
+var modalLinkHoverFocus$2 = {
+  "default": standardInteractionStyles,
+  footer: standardInteractionStyles
+};
+var fallbackValues$M = {
+  backgroundColor: backgroundColor$c,
+  linkColor: linkColor$6,
+  border: border$3,
+  fontSize: fontSize$b,
+  lineHeight: lineHeight$5,
+  fontWeight: fontWeight$8,
+  modalLinkHoverFocus: modalLinkHoverFocus$2
+};
+
+var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
+  var link = _ref.link,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? "Terms & Conditions" : _ref$title,
+      isOpen = _ref.isOpen,
+      toggleOpen = _ref.toggleOpen,
+      toggleAccepted = _ref.toggleAccepted,
+      acceptText = _ref.acceptText,
+      terms = _ref.terms,
+      variant = _ref.variant,
+      _ref$linkVariant = _ref.linkVariant,
+      linkVariant = _ref$linkVariant === void 0 ? "p" : _ref$linkVariant,
+      themeValues = _ref.themeValues;
+  return /*#__PURE__*/React__default.createElement(Modal$1, {
+    modalOpen: isOpen,
+    hideModal: function hideModal() {
+      return toggleOpen(false);
+    },
+    showModal: function showModal() {
+      return toggleOpen(true);
+    },
+    modalHeaderText: title,
+    modalBodyText: /*#__PURE__*/React__default.createElement(Box, {
+      background: themeValues.backgroundColor,
+      border: "1px solid ".concat(themeValues.border),
+      borderRadius: "3px",
+      extraStyles: "overflow: scroll; max-height: 20rem;"
+    }, /*#__PURE__*/React__default.createElement(Text$1, {
+      variant: "p",
+      extraStyles: "& a { text-decoration: underline; }"
+    }, terms)),
+    defaultWrapper: false,
+    onlyCloseButton: !acceptText,
+    continueButtonText: acceptText,
+    continueAction: function continueAction() {
+      toggleAccepted(true);
+      toggleOpen(false);
+    }
+  }, /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: linkVariant,
+    onClick: function onClick() {
+      return toggleOpen(true);
+    },
+    onKeyPress: function onKeyPress(e) {
+      return e.key === "Enter" && toggleOpen(true);
+    },
+    tabIndex: "0",
+    color: themeValues.linkColor,
+    weight: themeValues.fontWeight,
+    hoverStyles: themeValues.modalLinkHoverFocus,
+    extraStyles: "display: inline-block; width: fit-content; cursor: pointer"
+  }, link));
+};
+
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$M, "default");
+
 var PaymentFormACH = function PaymentFormACH(_ref) {
   var _routingNumberErrors, _accountNumberErrors;
 
@@ -47169,7 +47269,10 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
       showWalletCheckbox = _ref.showWalletCheckbox,
       saveToWallet = _ref.saveToWallet,
-      walletCheckboxMarked = _ref.walletCheckboxMarked;
+      walletCheckboxMarked = _ref.walletCheckboxMarked,
+      termsContent = _ref.termsContent,
+      _ref$termsTitle = _ref.termsTitle,
+      termsTitle = _ref$termsTitle === void 0 ? "Terms & Conditions" : _ref$termsTitle;
 
   if (clearOnDismount) {
     React.useEffect(function () {
@@ -47189,6 +47292,14 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
       showAccount = _useState4[0],
       toggleShowAccount = _useState4[1];
 
+  var _useState5 = React.useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      termsModalOpen = _useState6[0],
+      setTermsModalOpen = _useState6[1];
+
+  var showTerms = !!termsContent;
+  var showTermsLinkVariant = showWalletCheckbox ? "p" : "pS";
+
   var nameErrors = _defineProperty({}, required.error, "Name is required");
 
   var routingNumberErrors = (_routingNumberErrors = {}, _defineProperty(_routingNumberErrors, required.error, "Routing number is required"), _defineProperty(_routingNumberErrors, hasLength.error, "Routing number must be 9 digits"), _defineProperty(_routingNumberErrors, isRoutingNumber.error, "Invalid routing number"), _routingNumberErrors);
@@ -47297,12 +47408,27 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onChange: toggleCheckbox,
     checked: defaultMethod.value,
     hidden: hideDefaultPayment
-  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  }), (showWalletCheckbox || showTerms) && /*#__PURE__*/React__default.createElement(Cluster, {
+    childGap: "4px"
+  }, showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "bank checkbox",
-    title: "Save checking account to wallet",
+    title: "Save checking account to wallet.",
     checked: walletCheckboxMarked,
     onChange: saveToWallet
-  })));
+  }), showTerms && /*#__PURE__*/React__default.createElement(Cover, {
+    singleChild: true
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    childGap: 0
+  }, /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: showTermsLinkVariant
+  }, "View\xA0"), /*#__PURE__*/React__default.createElement(TermsAndConditionsModal$1, {
+    link: termsTitle,
+    linkVariant: showTermsLinkVariant,
+    terms: termsContent,
+    title: termsTitle,
+    isOpen: termsModalOpen,
+    toggleOpen: setTermsModalOpen
+  }))))));
 };
 
 var formConfig$6 = {
@@ -47356,11 +47482,21 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       showWalletCheckbox = _ref.showWalletCheckbox,
       saveToWallet = _ref.saveToWallet,
       walletCheckboxMarked = _ref.walletCheckboxMarked,
-      deniedCards = _ref.deniedCards;
+      deniedCards = _ref.deniedCards,
+      termsContent = _ref.termsContent,
+      _ref$termsTitle = _ref.termsTitle,
+      termsTitle = _ref$termsTitle === void 0 ? "Terms & Conditions" : _ref$termsTitle;
 
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
 
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      termsModalOpen = _useState2[0],
+      setTermsModalOpen = _useState2[1];
+
+  var showTerms = !!termsContent;
+  var showTermsLinkVariant = showWalletCheckbox ? "p" : "pS";
   React.useEffect(function () {
     if (deniedCards) {
       deniedCards.map(function (card) {
@@ -47469,12 +47605,27 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocomplete: "billing postal-code"
-  })), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  })), (showWalletCheckbox || showTerms) && /*#__PURE__*/React__default.createElement(Cluster, {
+    childGap: "4px"
+  }, showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "credit card checkbox",
-    title: "Save credit card to wallet",
+    title: "Save credit card to wallet.",
     checked: walletCheckboxMarked,
     onChange: saveToWallet
-  })));
+  }), showTerms && /*#__PURE__*/React__default.createElement(Cover, {
+    singleChild: true
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    childGap: 0
+  }, /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: showTermsLinkVariant
+  }, "View\xA0"), /*#__PURE__*/React__default.createElement(TermsAndConditionsModal$1, {
+    link: termsTitle,
+    linkVariant: showTermsLinkVariant,
+    terms: termsContent,
+    title: termsTitle,
+    isOpen: termsModalOpen,
+    toggleOpen: setTermsModalOpen
+  }))))));
 };
 
 var PaymentFormCard$1 = withWindowSize(PaymentFormCard);
@@ -47755,7 +47906,7 @@ var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$5 = "".concat(GREY_CHATEAU);
 var focusStyles = "outline: none;";
-var fallbackValues$M = {
+var fallbackValues$N = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
@@ -47943,7 +48094,7 @@ var RadioSection = function RadioSection(_ref) {
   })));
 };
 
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$M);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$N);
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var _emailErrorMessages, _passwordErrorMessage;
@@ -48240,7 +48391,7 @@ var ResetPasswordSuccess = withWindowSize(ResetConfirmationForm$2);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$N = {
+var fallbackValues$O = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -48319,12 +48470,12 @@ var Tabs = function Tabs(_ref) {
   }))));
 };
 
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$N);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$O);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$O = {
+var fallbackValues$P = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -48380,100 +48531,7 @@ var TabSidebar = function TabSidebar(_ref) {
   })));
 };
 
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$O);
-
-var backgroundColor$c = {
-  "default": "#ffffff",
-  footer: "#ffffff"
-};
-var linkColor$6 = {
-  "default": "#3176AA",
-  footer: "#ffffff"
-};
-var border$3 = {
-  "default": "#cdcdcd",
-  footer: "#cdcdcd"
-};
-var fontSize$b = {
-  "default": "1rem",
-  footer: "0.875rem"
-};
-var lineHeight$5 = {
-  "default": "1.5rem",
-  footer: "1.25rem"
-};
-var fontWeight$8 = {
-  "default": FONT_WEIGHT_REGULAR,
-  footer: FONT_WEIGHT_SEMIBOLD
-};
-var standardInteractionStyles = "\n    &:hover {\n      outline: none; \n      text-decoration: underline;\n    }\n    &:focus {\n      outline: 3px solid #3181E3;\n      outline-offset: 2px;\n    }\n";
-var modalLinkHoverFocus$2 = {
-  "default": standardInteractionStyles,
-  footer: standardInteractionStyles
-};
-var fallbackValues$P = {
-  backgroundColor: backgroundColor$c,
-  linkColor: linkColor$6,
-  border: border$3,
-  fontSize: fontSize$b,
-  lineHeight: lineHeight$5,
-  fontWeight: fontWeight$8,
-  modalLinkHoverFocus: modalLinkHoverFocus$2
-};
-
-var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
-  var link = _ref.link,
-      _ref$title = _ref.title,
-      title = _ref$title === void 0 ? "Terms & Conditions" : _ref$title,
-      isOpen = _ref.isOpen,
-      toggleOpen = _ref.toggleOpen,
-      toggleAccepted = _ref.toggleAccepted,
-      acceptText = _ref.acceptText,
-      terms = _ref.terms,
-      variant = _ref.variant,
-      themeValues = _ref.themeValues;
-  return /*#__PURE__*/React__default.createElement(Modal$1, {
-    modalOpen: isOpen,
-    hideModal: function hideModal() {
-      return toggleOpen(false);
-    },
-    showModal: function showModal() {
-      return toggleOpen(true);
-    },
-    modalHeaderText: title,
-    modalBodyText: /*#__PURE__*/React__default.createElement(Box, {
-      background: themeValues.backgroundColor,
-      border: "1px solid ".concat(themeValues.border),
-      borderRadius: "3px",
-      extraStyles: "overflow: scroll; max-height: 20rem;"
-    }, /*#__PURE__*/React__default.createElement(Text$1, {
-      variant: "p",
-      extraStyles: "& a { text-decoration: underline; }"
-    }, terms)),
-    defaultWrapper: false,
-    onlyCloseButton: !acceptText,
-    continueButtonText: acceptText,
-    continueAction: function continueAction() {
-      toggleAccepted(true);
-      toggleOpen(false);
-    }
-  }, /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: variant === "default" ? "pS" : "pXS",
-    onClick: function onClick() {
-      return toggleOpen(true);
-    },
-    onKeyPress: function onKeyPress(e) {
-      return e.key === "Enter" && toggleOpen(true);
-    },
-    tabIndex: "0",
-    color: themeValues.linkColor,
-    weight: themeValues.fontWeight,
-    hoverStyles: themeValues.modalLinkHoverFocus,
-    extraStyles: "display: inline-block; width: fit-content;"
-  }, link));
-};
-
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$P, "default");
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$P);
 
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var onCheck = _ref.onCheck,
@@ -48481,7 +48539,8 @@ var TermsAndConditions = function TermsAndConditions(_ref) {
       html = _ref.html,
       terms = _ref.terms,
       _ref$error = _ref.error,
-      error = _ref$error === void 0 ? false : _ref$error;
+      error = _ref$error === void 0 ? false : _ref$error,
+      linkVariant = _ref.linkVariant;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -48502,7 +48561,8 @@ var TermsAndConditions = function TermsAndConditions(_ref) {
     link: "Learn More",
     terms: terms,
     isOpen: showTerms,
-    toggleOpen: toggleShowTerms
+    toggleOpen: toggleShowTerms,
+    linkVariant: linkVariant
   })))));
 };