@thecb/components 7.13.0-beta.0 → 7.13.0-beta.1

package/dist/index.cjs.js

@@ -13815,16 +13815,16 @@ var CheckmarkIcon = function CheckmarkIcon() {
     transform: "translate(672.000000, 64.000000)"
   }, /*#__PURE__*/React__default.createElement("circle", {
     id: "Oval-2",
-    stroke: MATISSE_BLUE,
+    stroke: SEA_GREEN,
     strokeWidth: "2",
-    fill: INFO_BLUE,
+    fill: HINT_GREEN,
     cx: "48",
     cy: "48",
     r: "48"
   }), /*#__PURE__*/React__default.createElement("g", {
     id: "Group-2",
     transform: "translate(20.800000, 28.400000)",
-    fill: MATISSE_BLUE
+    fill: SEA_GREEN
   }, /*#__PURE__*/React__default.createElement("polygon", {
     id: "Rectangle-2",
     transform: "translate(12.800000, 30.000000) rotate(-45.000000) translate(-12.800000, -30.000000) ",
@@ -14782,7 +14782,9 @@ var PencilIcon = function PencilIcon(_ref) {
 
 var PencilIcon$1 = themeComponent(PencilIcon, "Icons", fallbackValues$2, "info");
 
-var PendingIcon = function PendingIcon() {
+var PendingIcon = function PendingIcon(_ref) {
+  var _ref$fill = _ref.fill,
+      fill = _ref$fill === void 0 ? STORM_GREY : _ref$fill;
   return /*#__PURE__*/React__default.createElement("svg", {
     width: "32px",
     height: "32px",
@@ -14799,7 +14801,7 @@ var PendingIcon = function PendingIcon() {
   }, /*#__PURE__*/React__default.createElement("g", {
     id: "Icons",
     transform: "translate(-64.000000, -448.000000)",
-    fill: "#6D717E"
+    fill: fill
   }, /*#__PURE__*/React__default.createElement("path", {
     d: "M80,480 C88.836556,480 96,472.836556 96,464 C96,455.163444 88.836556,448 80,448 C71.163444,448 64,455.163444 64,464 C64,472.836556 71.163444,480 80,480 Z M87,466 C88.1045695,466 89,465.104569 89,464 C89,462.895431 88.1045695,462 87,462 C85.8954305,462 85,462.895431 85,464 C85,465.104569 85.8954305,466 87,466 Z M80,462 C81.1045695,462 82,462.895431 82,464 C82,465.104569 81.1045695,466 80,466 C78.8954305,466 78,465.104569 78,464 C78,462.895431 78.8954305,462 80,462 Z M73,462 C74.1045695,462 75,462.895431 75,464 C75,465.104569 74.1045695,466 73,466 C71.8954305,466 71,465.104569 71,464 C71,462.895431 71.8954305,462 73,462 Z",
     id: "status-icon---pending"
@@ -46508,6 +46510,7 @@ var PartialAmountForm = function PartialAmountForm(_ref) {
       maximum = _ref.maximum,
       _ref$minimum = _ref.minimum,
       minimum = _ref$minimum === void 0 ? 1 : _ref$minimum,
+      blockPartialPaymentOverpay = _ref.blockPartialPaymentOverpay,
       clearOnDismount = _ref.clearOnDismount,
       fields = _ref.fields,
       actions = _ref.actions,
@@ -46523,6 +46526,18 @@ var PartialAmountForm = function PartialAmountForm(_ref) {
   }
 
   var amountErrors = (_amountErrors = {}, _defineProperty(_amountErrors, required.error, "Amount is required"), _defineProperty(_amountErrors, numberGreaterThanOrEqualTo.error, "There is a minimum payment of ".concat(displayCurrency(minimum))), _defineProperty(_amountErrors, numberLessThanOrEqualTo.error, "There is a maximum payment of ".concat(displayCurrency(maximum))), _amountErrors);
+
+  var getPartialAmountFormErrors = function getPartialAmountFormErrors(itemAmount) {
+    var errorMessages = amountErrors;
+
+    if (blockPartialPaymentOverpay) {
+      var maxAmountError = "There is a maximum payment of ".concat(displayCurrency(itemAmount));
+      return _objectSpread2(_objectSpread2({}, errorMessages), {}, _defineProperty({}, numberLessThanOrEqualTo.error, maxAmountError));
+    }
+
+    return errorMessages;
+  };
+
   var lineItemsNew = Array.isArray(lineItems) ? lineItems : [];
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
@@ -46541,7 +46556,7 @@ var PartialAmountForm = function PartialAmountForm(_ref) {
       field: fields[li.id],
       fieldActions: actions.fields[li.id],
       showErrors: showErrors,
-      errorMessages: amountErrors,
+      errorMessages: getPartialAmountFormErrors(li.amount),
       style: {
         textAlign: "right"
       },
@@ -46560,6 +46575,7 @@ var PartialAmountForm = function PartialAmountForm(_ref) {
 
 var createPartialAmountFormState = function createPartialAmountFormState(lineItems, maximum) {
   var minimum = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  var blockPartialPaymentOverpay = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var formConfig = lineItems.reduce(function (acc, item) {
     var validators = [required(), validateSum(numberGreaterThanOrEqualTo(minimum), lineItems.filter(function (lineItem) {
       return lineItem != item;
@@ -46575,6 +46591,10 @@ var createPartialAmountFormState = function createPartialAmountFormState(lineIte
       }, [])));
     }
 
+    if (blockPartialPaymentOverpay) {
+      validators.push(numberLessThanOrEqualTo(item.amount));
+    }
+
     return _objectSpread2(_objectSpread2({}, acc), {}, _defineProperty({}, item.id, {
       validators: validators,
       constraints: [onlyNaturals()],
@@ -46827,7 +46847,9 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
       redirectText = _ref$redirectText === void 0 ? "Return" : _ref$redirectText,
       buttonFlexOverride = _ref.buttonFlexOverride,
       _ref$hideForwardButto = _ref.hideForwardButton,
-      hideForwardButton = _ref$hideForwardButto === void 0 ? false : _ref$hideForwardButto;
+      hideForwardButton = _ref$hideForwardButto === void 0 ? false : _ref$hideForwardButto,
+      _ref$hideBackButton = _ref.hideBackButton,
+      hideBackButton = _ref$hideBackButton === void 0 ? false : _ref$hideBackButton;
 
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
@@ -46866,7 +46888,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: buttonFlexOverride ? buttonFlexOverride : !!backButton ? "space-between" : "flex-end",
     align: "center"
-  }, backButton, !hideForwardButton && /*#__PURE__*/React__default.createElement(React.Fragment, null, forwardButton))));
+  }, !hideBackButton && /*#__PURE__*/React__default.createElement(React.Fragment, null, backButton), !hideForwardButton && /*#__PURE__*/React__default.createElement(React.Fragment, null, forwardButton))));
 };
 
 var backgroundColor$b = {
@@ -48889,9 +48911,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
       workflowActionName = _ref$workflowActionNa === void 0 ? "Search" : _ref$workflowActionNa,
       slug = _ref.slug,
       _ref$buttonVariant = _ref.buttonVariant,
-      buttonVariant = _ref$buttonVariant === void 0 ? "primary" : _ref$buttonVariant,
-      selectWorkflowAction = _ref.selectWorkflowAction,
-      navigate = _ref.navigate;
+      buttonVariant = _ref$buttonVariant === void 0 ? "primary" : _ref$buttonVariant;
   return /*#__PURE__*/React__default.createElement(Box, {
     background: WHITE,
     boxShadow: "0px 0px 5px 0px ".concat(GHOST_GREY),
@@ -48919,21 +48939,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
     background: ATHENS_GREY,
     borderColor: GRECIAN_GREY,
     borderWidthOverride: "2px 0 0 0"
-  }, selectWorkflowAction ? /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-    variant: buttonVariant,
-    primary: buttonVariant == "primary",
-    primaryBG: MATISSE_BLUE,
-    fontWeight: FONT_WEIGHT_SEMIBOLD,
-    fontSize: "1.125rem",
-    text: workflowActionName,
-    minWidth: "100%",
-    extraStyles: "width: 100%; margin: 0; text-align: center;",
-    dataQa: slug,
-    action: function action() {
-      selectWorkflowAction(slug);
-      navigate("/service/".concat(slug));
-    }
-  }) : /*#__PURE__*/React__default.createElement(ButtonWithLink, {
+  }, /*#__PURE__*/React__default.createElement(ButtonWithLink, {
     variant: buttonVariant,
     primary: buttonVariant == "primary",
     primaryBG: MATISSE_BLUE,