@thecb/components 11.0.3 → 11.1.0-beta.2

package/package.json

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

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}
             />