@thecb/components 11.0.2 → 11.1.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.0.2",
+  "version": "11.1.0-beta.1",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
@@ -93,6 +93,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.15.4",
+    "@thecb/components": "file:.yalc/@thecb/components",
     "@types/styled-components": "^5.1.34",
     "core-js": "^3.22.5",
     "formatted-input": "^1.0.0",

package/src/components/atoms/button-with-action/ButtonWithAction.stories.js

@@ -107,3 +107,17 @@ export const WhiteSecondary = {
   ...Primary.args,
   variant: "whiteSecondary"
 };
+
+export const GreenPrimary = {
+  args: {
+    ...Primary.args,
+    variant: "greenPrimary"
+  }
+};
+
+export const GreenSecondary = {
+  args: {
+    ...Primary.args,
+    variant: "greenSecondary"
+  }
+};

package/src/components/atoms/button-with-action/ButtonWithAction.theme.js

@@ -1,4 +1,5 @@
 import { colors, styleConstants } from "../../../constants";
+import { adjustHexColor } from "../../../util/general";
 
 const {
   WHITE,
@@ -7,6 +8,8 @@ const {
   PEACOCK_BLUE,
   MANATEE_GREY,
   MATISSE_BLUE,
+  HINT_GREEN,
+  SEA_GREEN,
   RASPBERRY,
   ERROR_COLOR
 } = colors;
@@ -24,8 +27,10 @@ const disabledBorderColor = {
   tertiary: TRANSPARENT,
   danger: MANATEE_GREY,
   dangerSecondary: MANATEE_GREY,
+  whitePrimary: MANATEE_GREY,
   whiteSecondary: MANATEE_GREY,
-  whitePrimary: MANATEE_GREY
+  greenPrimary: SEA_GREEN,
+  greenSecondary: SEA_GREEN
 };
 
 const disabledColor = {
@@ -39,8 +44,10 @@ const disabledColor = {
   tertiary: MANATEE_GREY,
   danger: WHITE,
   dangerSecondary: MANATEE_GREY,
+  whitePrimary: MANATEE_GREY,
   whiteSecondary: MANATEE_GREY,
-  whitePrimary: MANATEE_GREY
+  greenPrimary: WHITE,
+  greenSecondary: SEA_GREEN
 };
 
 const disabledBackgroundColor = {
@@ -54,8 +61,10 @@ const disabledBackgroundColor = {
   tertiary: TRANSPARENT,
   danger: MANATEE_GREY,
   dangerSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT,
   whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT
+  greenPrimary: SEA_GREEN,
+  greenSecondary: TRANSPARENT
 };
 
 const padding = {
@@ -69,8 +78,10 @@ const padding = {
   ghost: "0.65rem 0",
   danger: "0.75rem 1.5rem",
   dangerSecondary: "0.75rem 1.5rem",
+  whitePrimary: "1.125rem 0.75rem",
   whiteSecondary: "0.75rem 2rem",
-  whitePrimary: "1.125rem 0.75rem"
+  greenPrimary: "0.75rem 1.5rem",
+  greenSecondary: "0.75rem 1.5rem"
 };
 
 const color = {
@@ -84,8 +95,10 @@ const color = {
   tertiary: MATISSE_BLUE,
   danger: WHITE,
   dangerSecondary: ERROR_COLOR,
+  whitePrimary: WHITE,
   whiteSecondary: WHITE,
-  whitePrimary: WHITE
+  greenPrimary: WHITE,
+  greenSecondary: SEA_GREEN
 };
 
 const fontSizeVariant = {
@@ -100,7 +113,9 @@ const fontSizeVariant = {
   danger: "pS",
   dangerSecondary: "pS",
   whiteSecondary: "pS",
-  whitePrimary: "pS"
+  whitePrimary: "pS",
+  greenPrimary: "pS",
+  greenSecondary: "pS"
 };
 
 const fontWeight = {
@@ -115,7 +130,9 @@ const fontWeight = {
   danger: "600",
   dangerSecondary: "600",
   whiteSecondary: "600",
-  whitePrimary: "600"
+  whitePrimary: "600",
+  greenPrimary: "600",
+  greenSecondary: "600"
 };
 
 const height = {
@@ -129,8 +146,10 @@ const height = {
   tertiary: "3rem",
   danger: "3rem",
   dangerSecondary: "3rem",
+  whitePrimary: "auto",
   whiteSecondary: "3rem",
-  whitePrimary: "auto"
+  greenPrimary: "3rem",
+  greenSecondary: "3rem"
 };
 
 const minWidth = {
@@ -144,8 +163,10 @@ const minWidth = {
   tertiary: "130px",
   danger: "130px",
   dangerSecondary: "157px",
+  whitePrimary: "130px",
   whiteSecondary: "160px",
-  whitePrimary: "130px"
+  greenPrimary: "130px",
+  greenSecondary: "130px"
 };
 
 const textDecoration = {
@@ -159,8 +180,10 @@ const textDecoration = {
   tertiary: "none",
   danger: "none",
   dangerSecondary: "none",
+  whitePrimary: "none",
   whiteSecondary: "none",
-  whitePrimary: "none"
+  greenPrimary: "none",
+  greenSecondary: "none"
 };
 
 const backgroundColor = {
@@ -174,8 +197,10 @@ const backgroundColor = {
   tertiary: TRANSPARENT,
   danger: RASPBERRY,
   dangerSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT,
   whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT
+  greenPrimary: SEA_GREEN,
+  greenSecondary: TRANSPARENT
 };
 
 const border = {
@@ -189,8 +214,10 @@ const border = {
   tertiary: "none",
   danger: "2px solid " + RASPBERRY,
   dangerSecondary: "2px solid " + ERROR_COLOR,
+  whitePrimary: "2px solid " + TRANSPARENT,
   whiteSecondary: "2px solid " + WHITE,
-  whitePrimary: "2px solid " + TRANSPARENT
+  greenPrimary: "2px solid " + SEA_GREEN,
+  greenSecondary: "2px solid " + SEA_GREEN
 };
 
 const hoverBackgroundColor = {
@@ -204,8 +231,10 @@ const hoverBackgroundColor = {
   tertiary: TRANSPARENT,
   danger: "#BA002C",
   dangerSecondary: "#FAE7EE",
+  whitePrimary: TRANSPARENT,
   whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT
+  greenPrimary: adjustHexColor(SEA_GREEN, 10, "darken"),
+  greenSecondary: HINT_GREEN
 };
 
 const hoverBorderColor = {
@@ -219,8 +248,10 @@ const hoverBorderColor = {
   tertiary: TRANSPARENT,
   danger: "#BA002C",
   dangerSecondary: "#B10541",
+  whitePrimary: "2px solid " + TRANSPARENT,
   whiteSecondary: "2px solid " + TRANSPARENT,
-  whitePrimary: "2px solid " + TRANSPARENT
+  greenPrimary: SEA_GREEN,
+  greenSecondary: SEA_GREEN
 };
 
 const hoverColor = {
@@ -234,8 +265,10 @@ const hoverColor = {
   tertiary: SAPPHIRE_BLUE,
   danger: WHITE,
   dangerSecondary: "#B10541",
+  whitePrimary: WHITE,
   whiteSecondary: WHITE,
-  whitePrimary: WHITE
+  greenPrimary: WHITE,
+  greenSecondary: SEA_GREEN
 };
 
 const activeBackgroundColor = {
@@ -249,8 +282,10 @@ const activeBackgroundColor = {
   tertiary: TRANSPARENT,
   danger: "#870000",
   dangerSecondary: "#FAE7EE",
+  whitePrimary: TRANSPARENT,
   whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT
+  greenPrimary: adjustHexColor(SEA_GREEN, 20, "darken"),
+  greenSecondary: adjustHexColor(HINT_GREEN, 5, "darken")
 };
 
 const activeBorderColor = {
@@ -264,8 +299,10 @@ const activeBorderColor = {
   tertiary: TRANSPARENT,
   danger: "#870000",
   dangerSecondary: "#910029",
+  whitePrimary: "2px solid " + TRANSPARENT,
   whiteSecondary: "2px solid " + TRANSPARENT,
-  whitePrimary: "2px solid " + TRANSPARENT
+  greenPrimary: SEA_GREEN,
+  greenSecondary: SEA_GREEN
 };
 
 const activeColor = {
@@ -279,8 +316,10 @@ const activeColor = {
   tertiary: PEACOCK_BLUE,
   danger: WHITE,
   dangerSecondary: "#910029",
+  whitePrimary: WHITE,
   whiteSecondary: WHITE,
-  whitePrimary: WHITE
+  greenPrimary: WHITE,
+  greenSecondary: SEA_GREEN
 };
 
 export const fallbackValues = {

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

@@ -1,6 +1,7 @@
 import React from "react";
+import { SEA_GREEN } from "../../../constants/colors";
 
-const SuccessfulIconMedium = ({ iconIndex = 0 }) => {
+const SuccessfulIconMedium = ({ iconIndex = 0, fill = SEA_GREEN }) => {
   const mask0ID = `SuccessfulIconMedium-mask0-${iconIndex}`;
   const mask1ID = `SuccessfulIconMedium-mask1-${iconIndex}`;
   return (
@@ -11,7 +12,7 @@ const SuccessfulIconMedium = ({ iconIndex = 0 }) => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle cx="12" cy="12" r="12" fill="#317D4F" />
+      <circle cx="12" cy="12" r="12" fill={fill} />
       <mask
         id={mask0ID}
         style={{ maskType: "luminance" }}

package/src/components/molecules/obligation/Obligation.js

@@ -40,7 +40,11 @@ const Obligation = ({
   inactiveLookupInput = "Account",
   inactiveLookupValue = "",
   isInCustomerManagement = false,
-  themeValues
+  themeValues,
+  cartEnabled = false,
+  cartConfig = undefined,
+  multiCartParams = undefined,
+  isInCart = false
 }) => {
   /*
     The value of obligations is always an array. It can contain:
@@ -144,6 +148,10 @@ const Obligation = ({
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
               disableActions={isInCustomerManagement}
+              cartEnabled={cartEnabled}
+              cartConfig={cartConfig}
+              multiCartParams={multiCartParams}
+              isInCart={isInCart}
             />
           )}
         </Stack>
@@ -168,6 +176,10 @@ const Obligation = ({
           subDescription={subDescription}
           allowedPaymentInstruments={allowedPaymentInstruments}
           disableActions={isInCustomerManagement}
+          cartEnabled={cartEnabled}
+          cartConfig={cartConfig}
+          multiCartParams={multiCartParams}
+          isInCart={isInCart}
         />
       )}
     </Box>

package/src/components/molecules/obligation/Obligation.stories.js

@@ -300,6 +300,7 @@ export const ActiveObligation = {
     ],
     actions: {
       createPaymentFromProfile: fn(),
+      addToMultiCart: fn(),
       setDetailedObligation: fn(),
       navigateToDetailedObligation: fn(),
       deleteObligationAssoc: fn()
@@ -366,6 +367,7 @@ export const InactiveObligation = {
     ],
     actions: {
       createPaymentFromProfile: fn(),
+      addToMultiCart: fn(),
       setDetailedObligation: fn(),
       navigateToDetailedObligation: fn(),
       deleteObligationAssoc: fn()
@@ -436,6 +438,7 @@ export const CustomerManagementObligation = {
     ],
     actions: {
       createPaymentFromProfile: fn(),
+      addToMultiCart: fn(),
       setDetailedObligation: fn(),
       navigateToDetailedObligation: fn(),
       deleteObligationAssoc: fn()
@@ -458,3 +461,72 @@ export const CustomerManagementObligation = {
     </Box>
   )
 };
+
+export const CartEnabledObligation = {
+  args: {
+    config: obligationConfig,
+    obligations: [
+      {
+        allowedPaymentInstruments: ["CASH", "CREDIT_CARD", "BANK_ACCOUNT"],
+        amountDue: 5438,
+        customAttributes: {
+          account_number: "1006",
+          city: "Cityville",
+          client_slug: "Cityville",
+          customer_name: "Shadout Mapes",
+          due_date: "2024-09-01T12:00:00",
+          invoice_number: "101006.0",
+          line_item_description: "Shadout Mapes",
+          line_item_sub_description: "1006",
+          name: "Shadout Mapes",
+          service_type: "water",
+          state: "North Carolina",
+          street_address_line_1: "23145 O'Hara Wells",
+          sub_client_slug: "cityville-water",
+          total_due_amount: "5438.0",
+          utility_type: "water",
+          zip_code: "79221"
+        },
+        id: "1006",
+        kind: "FEE",
+        description: "Cityville Water Management",
+        subDescription: "Account: 1006",
+        amountValue: 5438,
+        details: {
+          description: "Cityville Water Management",
+          subDescription: "Account: 1006"
+        },
+        paymentAttributes: {
+          description: "Account: 1006",
+          subDescription: "",
+          amount: 5438
+        }
+      }
+    ],
+    actions: {
+      createPaymentFromProfile: fn(),
+      addToMultiCart: fn(),
+      setDetailedObligation: fn(),
+      navigateToDetailedObligation: fn(),
+      deleteObligationAssoc: fn()
+    },
+    autoPayEnabled: true,
+    autoPayAvailable: true,
+    handleAutopayAction: fn(),
+    navigateToSettings: fn(),
+    deactivatePaymentSchedule: fn(),
+    isMobile: false,
+    nextAutopayDate: "On",
+    obligationAssocID: "046d66b9-5cea-4ccf-895a-97f21f314b72",
+    dueDate: "2024-09-01",
+    agencyName: "Water",
+    isInCustomerManagement: false,
+    cartEnabled: true,
+    isInCart: false
+  },
+  render: args => (
+    <Box minWidth="800px">
+      <Obligation {...args} />
+    </Box>
+  )
+};

package/src/components/molecules/obligation/modules/PaymentDetailsActions.js

@@ -25,7 +25,10 @@ const PaymentDetailsActions = ({
   description,
   subDescription,
   allowedPaymentInstruments,
-  disableActions = false
+  disableActions = false,
+  cartEnabled,
+  cartConfig,
+  isInCart
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const [isLoading, setIsLoading] = useState(false);
@@ -33,6 +36,8 @@ const PaymentDetailsActions = ({
   const { obligationSlug } = config;
   const {
     createPaymentFromProfile,
+    configureMultiCart,
+    addToMultiCart,
     setDetailedObligation,
     navigateToDetailedObligation
   } = actions;
@@ -41,13 +46,33 @@ const PaymentDetailsActions = ({
       ? `/profile/accounts/details/${obligationSlug}`
       : `/profile/properties/details/${obligationSlug}`;
   const handleClick = obligations => {
-    setIsLoading(true);
-    createPaymentFromProfile(obligations, config);
+    if (cartEnabled && cartConfig && !isInCart) {
+      configureMultiCart({
+        cartId: cartConfig.subClientSlug,
+        config: cartConfig
+      });
+      addToMultiCart({
+        cartId: cartConfig.subClientSlug,
+        items: cartConfig.addToCartConfig.items,
+        itemType: cartConfig.addToCartConfig.itemType
+      });
+    } else {
+      setIsLoading(true);
+      createPaymentFromProfile(obligations, config);
+    }
   };
   const handleDetailsClick = () => {
     setDetailedObligation(obligations, config, obligationAssocID);
     navigateToDetailedObligation(detailsSlug);
   };
+  const variant = cartEnabled
+    ? isInCart
+      ? "greenPrimry"
+      : "secondary"
+    : isMobile
+    ? "smallSecondary"
+    : "secondary";
+  const text = cartEnabled ? (isInCart ? "In Cart" : "Add to Cart") : "Pay Now";
   return (
     <Box
       padding={isMobile ? "0" : "16px 0 0"}
@@ -150,9 +175,9 @@ const PaymentDetailsActions = ({
               <ButtonWithAction
                 isLoading={isLoading}
                 action={disableActions ? noop : () => handleClick(obligations)}
-                text="Pay Now"
-                variant={isMobile ? "smallSecondary" : "secondary"}
-                dataQa="Pay Now"
+                text={text}
+                variant={variant}
+                dataQa={text}
                 disabled={disableActions}
               />
             </Box>
@@ -163,9 +188,9 @@ const PaymentDetailsActions = ({
             <ButtonWithAction
               isLoading={isLoading}
               action={disableActions ? noop : () => handleClick(obligations)}
-              text="Pay Now"
-              variant={isMobile ? "smallSecondary" : "secondary"}
-              dataQa="Pay Now"
+              text={text}
+              variant={variant}
+              dataQa={text}
               extraStyles={isMobile && `flex-grow: 1; width: 100%; margin: 0;`}
               disabled={disableActions}
             />

package/src/util/general.js

@@ -173,3 +173,43 @@ export const wrapIndex = (index, length) => {
     return index;
   }
 };
+
+/**
+ * Adjusts a hex color by lightening or darkening it.
+ *
+ * Intended for use when a satisfactory color is not available in the design system.
+ *
+ * @param {string} hex - The original hex color (e.g., "#3498db").
+ * @param {number} percent - The percentage to adjust the color (0-100).
+ * @param {string} action - The action to perform: 'lighten' or 'darken'.
+ * @returns {string} - The adjusted hex color.
+ * @throws {Error} - Throws an error if the action is not 'lighten' or 'darken'.
+ */
+export const adjustHexColor = (hex, percent, action) => {
+  // Remove hash at the start if present
+  hex = hex.replace(/^\s*#/, "");
+
+  // Parse r, g, b values
+  let r = parseInt(hex.substring(0, 2), 16);
+  let g = parseInt(hex.substring(2, 4), 16);
+  let b = parseInt(hex.substring(4, 6), 16);
+
+  // Adjust RGB values based on the action
+  if (action === "darken") {
+    r = Math.max(0, Math.floor(r * (1 - percent / 100)));
+    g = Math.max(0, Math.floor(g * (1 - percent / 100)));
+    b = Math.max(0, Math.floor(b * (1 - percent / 100)));
+  } else if (action === "lighten") {
+    r = Math.min(255, Math.floor(r + (255 - r) * (percent / 100)));
+    g = Math.min(255, Math.floor(g + (255 - g) * (percent / 100)));
+    b = Math.min(255, Math.floor(b + (255 - b) * (percent / 100)));
+  } else {
+    throw new Error("Action must be either 'lighten' or 'darken'");
+  }
+
+  // Convert back to hex
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b)
+    .toString(16)
+    .slice(1)
+    .padStart(6, "0")}`;
+};