@thecb/components 4.0.14-beta.0 → 4.0.14

package/.tool-versions

@@ -0,0 +1 @@
+nodejs 10.15.3

package/dist/index.cjs.js

@@ -19917,7 +19917,9 @@ var ERRORS = {
   "71": "Passed invalid pixel value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
   "72": "Passed invalid base value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
   "73": "Please provide a valid CSS variable.\n\n",
-  "74": "CSS variable not found.\n"
+  "74": "CSS variable not found and no default was provided.\n\n",
+  "75": "important requires a valid style object, got a %s instead.\n\n",
+  "76": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n"
 };
 /**
  * super basic version of sprintf
@@ -37958,6 +37960,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
       fields = _ref.fields,
       actions = _ref.actions,
       showErrors = _ref.showErrors,
+      fees = _ref.fees,
       _ref$handleSubmit = _ref.handleSubmit,
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
 
@@ -38092,6 +38095,13 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onChange: toggleCheckbox,
     checked: defaultMethod.value,
     hidden: hideDefaultPayment
+  }), !!(fees === null || fees === void 0 ? void 0 : fees.value) && /*#__PURE__*/React__default.createElement(Alert$1, {
+    heading: "Processing Fee",
+    text: "There is a processing fee of ".concat(fees.type === "FLAT" ? "".concat(displayCurrency(fees.value)) : "".concat(fees.value * 100, "%"), " ").concat(ifElse(isNil, always(""), function (a) {
+      return "with a minimum of ".concat(displayCurrency(a), " ");
+    })(fees.minimumInCents), "on all bank account payments."),
+    variant: "info",
+    showQuitLink: false
   })));
 };
 
@@ -38148,6 +38158,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       fields = _ref.fields,
       actions = _ref.actions,
       showErrors = _ref.showErrors,
+      fees = _ref.fees,
       _ref$handleSubmit = _ref.handleSubmit,
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
       isMobile = _ref.isMobile;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.0.14-beta.0",
+  "version": "4.0.14",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/molecules/payment-form-ach/PaymentFormACH.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
+import { ifElse, isNil, always } from "ramda";
 import Checkbox from "../../atoms/checkbox";
 import {
   required,
@@ -13,8 +14,9 @@ import {
   FormInputColumn,
   FormContainer
 } from "../../atoms/form-layouts";
+import Alert from "../../atoms/alert";
 import AccountAndRoutingModal from "../account-and-routing-modal";
-import { noop } from "../../../util/general";
+import { displayCurrency, noop } from "../../../util/general";
 
 const ModalWrapper = styled.div``;
 
@@ -28,6 +30,7 @@ const PaymentFormACH = ({
   fields,
   actions,
   showErrors,
+  fees,
   handleSubmit = noop
 }) => {
   if (clearOnDismount) {
@@ -162,6 +165,22 @@ const PaymentFormACH = ({
             hidden={hideDefaultPayment}
           />
         )}
+        {!!fees?.value && (
+          <Alert
+            heading="Processing Fee"
+            text={`There is a processing fee of ${
+              fees.type === "FLAT"
+                ? `${displayCurrency(fees.value)}`
+                : `${fees.value * 100}%`
+            } ${ifElse(
+              isNil,
+              always(""),
+              a => `with a minimum of ${displayCurrency(a)} `
+            )(fees.minimumInCents)}on all bank account payments.`}
+            variant="info"
+            showQuitLink={false}
+          />
+        )}
       </FormInputColumn>
     </FormContainer>
   );

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

@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import { required, hasLength, matchesRegex } from "redux-freeform";
-import { checkCardBrand, noop } from "../../../util/general";
+import { ifElse, isNil, always } from "ramda";
+import { checkCardBrand, displayCurrency, noop } from "../../../util/general";
 import { expirationDateFormat, creditCardFormat } from "../../../util/formats";
 import {
   FormInput,
@@ -9,6 +10,7 @@ import {
   FormInputRow
 } from "../../atoms/form-layouts";
 import { Box } from "../../atoms/layouts";
+import Alert from "../../atoms/alert";
 
 const nameOnCardErrors = {
   [required.error]: "Name is required"
@@ -38,6 +40,7 @@ const PaymentFormCard = ({
   fields,
   actions,
   showErrors,
+  fees,
   handleSubmit = noop,
   isMobile
 }) => {