@thecb/components 7.13.0-beta.0 → 7.13.0

package/package.json

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

package/src/components/atoms/icons/CheckmarkIcon.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { MATISSE_BLUE, INFO_BLUE } from "../../../constants/colors";
+import { SEA_GREEN, HINT_GREEN } from "../../../constants/colors";
 
 const CheckmarkIcon = () => (
   <svg
@@ -22,9 +22,9 @@ const CheckmarkIcon = () => (
           <g id="icon---checkmark" transform="translate(672.000000, 64.000000)">
             <circle
               id="Oval-2"
-              stroke={MATISSE_BLUE}
+              stroke={SEA_GREEN}
               strokeWidth="2"
-              fill={INFO_BLUE}
+              fill={HINT_GREEN}
               cx="48"
               cy="48"
               r="48"
@@ -32,7 +32,7 @@ const CheckmarkIcon = () => (
             <g
               id="Group-2"
               transform="translate(20.800000, 28.400000)"
-              fill={MATISSE_BLUE}
+              fill={SEA_GREEN}
             >
               <polygon
                 id="Rectangle-2"

package/src/components/atoms/icons/PendingIcon.js

@@ -1,6 +1,7 @@
 import React from "react";
+import { STORM_GREY } from "../../../constants/colors";
 
-const PendingIcon = () => (
+const PendingIcon = ({ fill = STORM_GREY }) => (
   <svg
     width="32px"
     height="32px"
@@ -16,11 +17,7 @@ const PendingIcon = () => (
       fill="none"
       fillRule="evenodd"
     >
-      <g
-        id="Icons"
-        transform="translate(-64.000000, -448.000000)"
-        fill="#6D717E"
-      >
+      <g id="Icons" transform="translate(-64.000000, -448.000000)" fill={fill}>
         <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"

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

@@ -18,6 +18,7 @@ const PartialAmountForm = ({
   lineItems,
   maximum,
   minimum = 1,
+  blockPartialPaymentOverpay,
   clearOnDismount,
   fields,
   actions,
@@ -37,6 +38,20 @@ const PartialAmountForm = ({
     )}`
   };
 
+  const getPartialAmountFormErrors = itemAmount => {
+    let errorMessages = amountErrors;
+    if (blockPartialPaymentOverpay) {
+      const maxAmountError = `There is a maximum payment of ${displayCurrency(
+        itemAmount
+      )}`;
+      return {
+        ...errorMessages,
+        [numberLessThanOrEqualTo.error]: maxAmountError
+      };
+    }
+    return errorMessages;
+  };
+
   const lineItemsNew = Array.isArray(lineItems) ? lineItems : [];
   return (
     <FormContainer variant={variant} role="form" aria-label="Other amount">
@@ -53,7 +68,7 @@ const PartialAmountForm = ({
             field={fields[li.id]}
             fieldActions={actions.fields[li.id]}
             showErrors={showErrors}
-            errorMessages={amountErrors}
+            errorMessages={getPartialAmountFormErrors(li.amount)}
             style={{ textAlign: "right" }}
             placeholder="$0.00"
             formatter={moneyFormat}

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

@@ -10,7 +10,8 @@ import {
 export const createPartialAmountFormState = (
   lineItems,
   maximum,
-  minimum = 1
+  minimum = 1,
+  blockPartialPaymentOverpay = false
 ) => {
   const formConfig = lineItems.reduce((acc, item) => {
     const validators = [
@@ -32,6 +33,9 @@ export const createPartialAmountFormState = (
         )
       );
     }
+    if (blockPartialPaymentOverpay) {
+      validators.push(numberLessThanOrEqualTo(item.amount));
+    }
     return {
       ...acc,
       [item.id]: {

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

@@ -18,7 +18,8 @@ const PaymentButtonBar = ({
   redirectURL,
   redirectText = "Return",
   buttonFlexOverride,
-  hideForwardButton = false
+  hideForwardButton = false,
+  hideBackButton = false
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
@@ -79,7 +80,7 @@ const PaymentButtonBar = ({
           }
           align="center"
         >
-          {backButton}
+          {!hideBackButton && <Fragment>{backButton}</Fragment>}
           {!hideForwardButton && <Fragment>{forwardButton}</Fragment>}
         </Cluster>
       </Box>

package/src/components/molecules/workflow-tile/WorkflowTile.js

@@ -12,16 +12,13 @@ import {
 } from "../../../constants/colors";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 import ButtonWithLink from "../../atoms/button-with-link";
-import ButtonWithAction from "../../atoms/button-with-action";
 import { Box, Stack } from "../../atoms/layouts";
 const WorkflowTile = ({
   workflowName = "Test Workflow",
   workflowDescription = "Link your benefit plan",
   workflowActionName = "Search",
   slug,
-  buttonVariant = "primary",
-  selectWorkflowAction,
-  navigate
+  buttonVariant = "primary"
 }) => (
   <Box
     background={WHITE}
@@ -51,37 +48,19 @@ const WorkflowTile = ({
         borderColor={GRECIAN_GREY}
         borderWidthOverride="2px 0 0 0"
       >
-        {selectWorkflowAction ? (
-          <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={() => {
-              selectWorkflowAction(slug);
-              navigate(`/service/${slug}`);
-            }}
-          />
-        ) : (
-          <ButtonWithLink
-            variant={buttonVariant}
-            primary={buttonVariant == "primary"}
-            primaryBG={MATISSE_BLUE}
-            fontWeight={FONT_WEIGHT_SEMIBOLD}
-            fontSize={"1.125rem"}
-            text={workflowActionName}
-            minWidth={"100%"}
-            url={`/service/${slug}`}
-            extraStyles={`width: 100%; margin: 0;`}
-            linkExtraStyles={`justify-content: center;`}
-            dataQa={slug}
-          />
-        )}
+        <ButtonWithLink
+          variant={buttonVariant}
+          primary={buttonVariant == "primary"}
+          primaryBG={MATISSE_BLUE}
+          fontWeight={FONT_WEIGHT_SEMIBOLD}
+          fontSize={"1.125rem"}
+          text={workflowActionName}
+          minWidth={"100%"}
+          url={`/service/${slug}`}
+          extraStyles={`width: 100%; margin: 0;`}
+          linkExtraStyles={`justify-content: center;`}
+          dataQa={slug}
+        />
       </Box>
     </Stack>
   </Box>