@thecb/components 4.1.25 → 4.1.28

package/dist/index.cjs.js

@@ -20484,6 +20484,9 @@ var hoverFocusStyles$1 = {
   "default": "color: #0E506D; outline: none; text-decoration: underline;  ",
   disabled: "color: #6E727E;"
 };
+var formFooterPanel = {
+  "default": "".concat(INFO_BLUE)
+};
 var fallbackValues$h = {
   linkColor: linkColor$2,
   formBackgroundColor: formBackgroundColor$1,
@@ -20495,7 +20498,8 @@ var fallbackValues$h = {
   fontSize: fontSize$6,
   errorFontSize: errorFontSize$1,
   fontWeight: fontWeight$3,
-  hoverFocusStyles: hoverFocusStyles$1
+  hoverFocusStyles: hoverFocusStyles$1,
+  formFooterPanel: formFooterPanel
 };
 
 function _templateObject4$3() {
@@ -20765,6 +20769,30 @@ var FormContainer = function FormContainer(_ref) {
 
 var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$h, "default");
 
+var FormFooterPanel = function FormFooterPanel(_ref) {
+  var themeValues = _ref.themeValues,
+      link = _ref.link,
+      linkText = _ref.linkText;
+
+  var _useContext = React.useContext(styled.ThemeContext),
+      isMobile = _useContext.isMobile;
+
+  return /*#__PURE__*/React__default.createElement(Box, {
+    background: themeValues.formFooterPanel,
+    minWidth: "100%",
+    padding: isMobile ? "1.5rem" : "2rem"
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "center",
+    align: "center"
+  }, /*#__PURE__*/React__default.createElement(ButtonWithLink, {
+    url: link,
+    variant: "smallGhost",
+    text: linkText
+  })));
+};
+
+var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$h, "default");
+
 var fontSize$7 = {
   "default": "1rem",
   radio: "1.0625rem"
@@ -38538,7 +38566,7 @@ var PartialAmountForm = function PartialAmountForm(_ref) {
     }, []);
   }
 
-  var amountErrors = (_amountErrors = {}, _defineProperty(_amountErrors, required.error, "Amount is required"), _defineProperty(_amountErrors, numberGreaterThan.error, "Your total payment must be greater than ".concat(displayCurrency(minimum))), _defineProperty(_amountErrors, numberLessThanOrEqualTo.error, "Your total payment must be less than ".concat(displayCurrency(maximum))), _amountErrors);
+  var amountErrors = (_amountErrors = {}, _defineProperty(_amountErrors, required.error, "Amount is required"), _defineProperty(_amountErrors, numberGreaterThanOrEqualTo.error, "Your total payment must be greater than or equal to ".concat(displayCurrency(minimum))), _defineProperty(_amountErrors, numberLessThanOrEqualTo.error, "Your total payment must be less than ".concat(displayCurrency(maximum))), _amountErrors);
   var lineItemsNew = Array.isArray(lineItems) ? lineItems : [];
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
@@ -38577,7 +38605,7 @@ var PartialAmountForm = function PartialAmountForm(_ref) {
 var createPartialAmountFormState = function createPartialAmountFormState(lineItems, maximum) {
   var minimum = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
   var formConfig = lineItems.reduce(function (acc, item) {
-    var validators = [required(), validateSum(numberGreaterThan(minimum), lineItems.filter(function (lineItem) {
+    var validators = [required(), validateSum(numberGreaterThanOrEqualTo(minimum), lineItems.filter(function (lineItem) {
       return lineItem != item;
     }).reduce(function (acc, curr) {
       return [].concat(_toConsumableArray(acc), [curr.id]);
@@ -38752,7 +38780,9 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
       redirectURL = _ref.redirectURL,
       _ref$redirectText = _ref.redirectText,
       redirectText = _ref$redirectText === void 0 ? "Return" : _ref$redirectText,
-      buttonFlexOverride = _ref.buttonFlexOverride;
+      buttonFlexOverride = _ref.buttonFlexOverride,
+      _ref$hideForwardButto = _ref.hideForwardButton,
+      hideForwardButton = _ref$hideForwardButto === void 0 ? false : _ref$hideForwardButto;
 
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
@@ -38792,7 +38822,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     justify: buttonFlexOverride ? buttonFlexOverride : !!backButton ? "space-between" : "flex-end",
     align: "center",
     childGap: "0.75rem"
-  }, backButton, forwardButton)));
+  }, backButton, !hideForwardButton && /*#__PURE__*/React__default.createElement(React.Fragment, null, forwardButton))));
 };
 
 var backgroundColor$8 = {
@@ -40598,6 +40628,7 @@ exports.FailedIcon = FailedIcon;
 exports.ForgotPasswordForm = ForgotPasswordForm;
 exports.ForgotPasswordIcon = ForgotPasswordIcon$1;
 exports.FormContainer = FormContainer$1;
+exports.FormFooterPanel = FormFooterPanel$1;
 exports.FormInput = FormInput$1;
 exports.FormInputColumn = FormInputColumn;
 exports.FormInputRow = FormInputRow;

package/package.json

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

package/src/components/atoms/form-layouts/FormFooterPanel.js

@@ -0,0 +1,29 @@
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+import { fallbackValues } from "./FormLayouts.theme.js";
+import { themeComponent } from "../../../util/themeUtils";
+import { Box, Cluster } from "../layouts";
+import ButtonWithLink from "../button-with-link";
+import withWindowSize from "../../withWindowSize";
+
+const FormFooterPanel = ({ themeValues, link, linkText }) => {
+  const { isMobile } = useContext(ThemeContext);
+  return (
+    <Box
+      background={themeValues.formFooterPanel}
+      minWidth="100%"
+      padding={isMobile ? "1.5rem" : "2rem"}
+    >
+      <Cluster justify="center" align="center">
+        <ButtonWithLink url={link} variant="smallGhost" text={linkText} />
+      </Cluster>
+    </Box>
+  );
+};
+
+export default themeComponent(
+  withWindowSize(FormFooterPanel),
+  "FormFooterPanel",
+  fallbackValues,
+  "default"
+);

package/src/components/atoms/form-layouts/FormLayouts.theme.js

@@ -6,7 +6,8 @@ import {
   MINESHAFT_GREY,
   DUSTY_GREY,
   GREY_CHATEAU,
-  ATHENS_GREY
+  ATHENS_GREY,
+  INFO_BLUE
 } from "../../../constants/colors";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 
@@ -36,6 +37,9 @@ const hoverFocusStyles = {
   default: `color: #0E506D; outline: none; text-decoration: underline;  `,
   disabled: `color: #6E727E;`
 };
+const formFooterPanel = {
+  default: `${INFO_BLUE}`
+};
 
 export const fallbackValues = {
   linkColor,
@@ -48,5 +52,6 @@ export const fallbackValues = {
   fontSize,
   errorFontSize,
   fontWeight,
-  hoverFocusStyles
+  hoverFocusStyles,
+  formFooterPanel
 };

package/src/components/atoms/form-layouts/index.js

@@ -2,5 +2,12 @@ import FormInput from "./FormInput";
 import FormInputRow from "./FormInputRow";
 import FormInputColumn from "./FormInputColumn";
 import FormContainer from "./FormContainer";
+import FormFooterPanel from "./FormFooterPanel";
 
-export { FormInput, FormInputRow, FormInputColumn, FormContainer };
+export {
+  FormInput,
+  FormInputRow,
+  FormInputColumn,
+  FormContainer,
+  FormFooterPanel
+};

package/src/components/molecules/partial-amount-form/PartialAmountForm.js

@@ -1,7 +1,7 @@
 import React from "react";
 import {
   required,
-  numberGreaterThan,
+  numberGreaterThanOrEqualTo,
   numberLessThanOrEqualTo
 } from "redux-freeform";
 import { displayCurrency } from "../../../util/general";
@@ -29,7 +29,7 @@ const PartialAmountForm = ({
 
   const amountErrors = {
     [required.error]: "Amount is required",
-    [numberGreaterThan.error]: `Your total payment must be greater than ${displayCurrency(
+    [numberGreaterThanOrEqualTo.error]: `Your total payment must be greater than or equal to ${displayCurrency(
       minimum
     )}`,
     [numberLessThanOrEqualTo.error]: `Your total payment must be less than ${displayCurrency(

package/src/components/molecules/partial-amount-form/PartialAmountForm.state.js

@@ -3,7 +3,7 @@ import {
   required,
   onlyNaturals,
   validateSum,
-  numberGreaterThan,
+  numberGreaterThanOrEqualTo,
   numberLessThanOrEqualTo
 } from "redux-freeform";
 
@@ -16,7 +16,7 @@ export const createPartialAmountFormState = (
     const validators = [
       required(),
       validateSum(
-        numberGreaterThan(minimum),
+        numberGreaterThanOrEqualTo(minimum),
         lineItems
           .filter(lineItem => lineItem != item)
           .reduce((acc, curr) => [...acc, curr.id], [])

package/src/components/molecules/payment-button-bar/PaymentButtonBar.js

@@ -17,7 +17,8 @@ const PaymentButtonBar = ({
   cancelText = "Cancel",
   redirectURL,
   redirectText = "Return",
-  buttonFlexOverride
+  buttonFlexOverride,
+  hideForwardButton = false
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
@@ -80,7 +81,7 @@ const PaymentButtonBar = ({
           childGap="0.75rem"
         >
           {backButton}
-          {forwardButton}
+          {!hideForwardButton && <Fragment>{forwardButton}</Fragment>}
         </Cluster>
       </Box>
     </Fragment>