@thecb/components 4.0.15-beta.0 → 4.0.16

package/dist/index.cjs.js

@@ -37695,9 +37695,7 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
       subtotal = _ref.subtotal,
       total = _ref.total,
       themeValues = _ref.themeValues;
-  return /*#__PURE__*/React__default.createElement(Stack, {
-    childGap: "16px"
-  }, lineItemElems, /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(Stack, null, lineItemElems, /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0.5rem 0"
   }, /*#__PURE__*/React__default.createElement(LabeledAmount$1, {
     variant: themeValues.labeledAmountSubtotal,
@@ -37800,19 +37798,13 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return /*#__PURE__*/React__default.createElement(React.Fragment, {
       key: fee.label
     }, /*#__PURE__*/React__default.createElement(Box, {
-      padding: "4px 0"
+      padding: "0.25rem 0"
     }), /*#__PURE__*/React__default.createElement(LabeledAmount$1, _extends({
       key: fee.label,
       variant: themeValues.labeledAmountSubtotal
     }, fee)));
   });
-  var content = isCollapsible ? /*#__PURE__*/React__default.createElement(Stack, {
-    childGap: "0"
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "4.5px"
-  }), /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "8px"
-  }), /*#__PURE__*/React__default.createElement(PaymentDetailsContent, {
+  var content = isCollapsible ? /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(PaymentDetailsContent, {
     lineItemElems: lineItemElems,
     feeElems: feeElems,
     subtotal: subtotal,
@@ -37835,11 +37827,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     variant: "h5",
     weight: "700",
     as: "h1"
-  }, titleText), /*#__PURE__*/React__default.createElement(Heading$1, {
-    variant: "h5",
-    weight: "700",
-    as: "h1"
-  }, displayCurrency(total)))) : /*#__PURE__*/React__default.createElement(Heading$1, {
+  }, titleText), displayCurrency(total))) : /*#__PURE__*/React__default.createElement(Heading$1, {
     as: "h1",
     variant: "h3",
     weight: "700",
@@ -37970,7 +37958,6 @@ 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;
 
@@ -38105,13 +38092,6 @@ 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
   })));
 };
 
@@ -38168,7 +38148,6 @@ 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.15-beta.0",
+  "version": "4.0.16",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/molecules/payment-details/PaymentDetails.js

@@ -18,7 +18,7 @@ const PaymentDetailsContent = ({
   total,
   themeValues
 }) => (
-  <Stack childGap="16px">
+  <Stack>
     {lineItemElems}
     <SolidDivider />
     <Box padding="0.5rem 0">
@@ -99,7 +99,7 @@ const PaymentDetails = ({
   ));
   const feeElems = fees.map(fee => (
     <Fragment key={fee.label}>
-      <Box padding="4px 0" />
+      <Box padding="0.25rem 0" />
       <LabeledAmount
         key={fee.label}
         variant={themeValues.labeledAmountSubtotal}
@@ -108,10 +108,8 @@ const PaymentDetails = ({
     </Fragment>
   ));
   const content = isCollapsible ? (
-    <Stack childGap="0">
-      <Box padding="4.5px" />
+    <Stack>
       <SolidDivider />
-      <Box padding="8px" />
       <PaymentDetailsContent
         {...{ lineItemElems, feeElems, subtotal, total, themeValues }}
       />
@@ -129,9 +127,7 @@ const PaymentDetails = ({
         <Heading variant="h5" weight="700" as="h1">
           {titleText}
         </Heading>
-        <Heading variant="h5" weight="700" as="h1">
-          {displayCurrency(total)}
-        </Heading>
+        {displayCurrency(total)}
       </Cluster>
     </Box>
   ) : (

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

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
-import { ifElse, isNil, always } from "ramda";
 import Checkbox from "../../atoms/checkbox";
 import {
   required,
@@ -14,9 +13,8 @@ import {
   FormInputColumn,
   FormContainer
 } from "../../atoms/form-layouts";
-import Alert from "../../atoms/alert";
 import AccountAndRoutingModal from "../account-and-routing-modal";
-import { displayCurrency, noop } from "../../../util/general";
+import { noop } from "../../../util/general";
 
 const ModalWrapper = styled.div``;
 
@@ -30,7 +28,6 @@ const PaymentFormACH = ({
   fields,
   actions,
   showErrors,
-  fees,
   handleSubmit = noop
 }) => {
   if (clearOnDismount) {
@@ -165,22 +162,6 @@ 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,7 +1,6 @@
 import React, { useEffect } from "react";
 import { required, hasLength, matchesRegex } from "redux-freeform";
-import { ifElse, isNil, always } from "ramda";
-import { checkCardBrand, displayCurrency, noop } from "../../../util/general";
+import { checkCardBrand, noop } from "../../../util/general";
 import { expirationDateFormat, creditCardFormat } from "../../../util/formats";
 import {
   FormInput,
@@ -10,7 +9,6 @@ import {
   FormInputRow
 } from "../../atoms/form-layouts";
 import { Box } from "../../atoms/layouts";
-import Alert from "../../atoms/alert";
 
 const nameOnCardErrors = {
   [required.error]: "Name is required"
@@ -40,7 +38,6 @@ const PaymentFormCard = ({
   fields,
   actions,
   showErrors,
-  fees,
   handleSubmit = noop,
   isMobile
 }) => {