@thecb/components 11.1.0-beta.5 → 11.1.0-beta.7

package/package.json

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

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

@@ -17,6 +17,7 @@ import {
 } from "./modules";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./Obligation.theme";
+import { noop } from "../../../util/general";
 
 const Obligation = ({
   config,
@@ -44,7 +45,8 @@ const Obligation = ({
   cartEnabled = false,
   cartConfig = undefined,
   multiCartParams = undefined,
-  isInCart = false
+  isInCart = false,
+  openCartSlider = noop
 }) => {
   /*
     The value of obligations is always an array. It can contain:
@@ -152,6 +154,7 @@ const Obligation = ({
               cartConfig={cartConfig}
               multiCartParams={multiCartParams}
               isInCart={isInCart}
+              openCartSlider={openCartSlider}
             />
           )}
         </Stack>
@@ -180,6 +183,7 @@ const Obligation = ({
           cartConfig={cartConfig}
           multiCartParams={multiCartParams}
           isInCart={isInCart}
+          openCartSlider={openCartSlider}
         />
       )}
     </Box>

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

@@ -2,6 +2,7 @@ import React from "react";
 import Obligation from "./Obligation";
 import { fn } from "@storybook/test";
 import { Box } from "../../atoms/layouts";
+import { noop } from "../../../util/general";
 
 const meta = {
   title: "Molecules/Obligation",
@@ -175,32 +176,42 @@ const meta = {
       }
     },
     cartEnabled: {
-      description: "Whether the obligation is currently set up for cart",
+      description: "Whether the obligation is currently set up for cart.",
       table: {
         type: { summary: "boolean" },
         defaultValue: { summary: false }
       }
     },
     cartConfig: {
-      description: "TODO",
+      description:
+        "The configuration for the cart. Used in the configureMultiCart action.",
       table: {
         type: { summary: "object" },
         defaultValue: { summary: undefined }
       }
     },
     multiCartParams: {
-      description: "TODO",
+      description:
+        "The parameters to be used when adding items to multi cart. Used in the addToMultiCart action.",
       table: {
         type: { summary: "object" },
         defaultValue: { summary: undefined }
       }
     },
     isInCart: {
-      description: "Whether the obligation is currently in the cart",
+      description: "Whether the obligation is currently in the cart.",
       table: {
         type: { summary: "boolean" },
         defaultValue: { summary: false }
       }
+    },
+    openCartSlider: {
+      description:
+        "Function called upon clicking a ButtonWithAction when an obligation is already in the cart. This conveniently opens the cart slider.",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: noop }
+      }
     }
   }
 };

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

@@ -28,7 +28,8 @@ const PaymentDetailsActions = ({
   disableActions = false,
   cartEnabled,
   cartConfig,
-  isInCart
+  isInCart,
+  openCartSlider
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const [isLoading, setIsLoading] = useState(false);
@@ -46,15 +47,17 @@ const PaymentDetailsActions = ({
       ? `/profile/accounts/details/${obligationSlug}`
       : `/profile/properties/details/${obligationSlug}`;
   const handleClick = obligations => {
-    if (cartEnabled && cartConfig && !isInCart) {
-      configureMultiCart({
-        cartId: cartConfig.subClientSlug,
-        config: cartConfig
-      });
+    if (isInCart) {
+      openCartSlider();
+      return;
+    }
+    if (cartEnabled && cartConfig) {
+      const { subClientSlug, addToCartConfig } = cartConfig;
+      configureMultiCart({ cartId: subClientSlug, config: cartConfig });
       addToMultiCart({
-        cartId: cartConfig.subClientSlug,
-        items: cartConfig.addToCartConfig.items,
-        itemType: cartConfig.addToCartConfig.itemType
+        cartId: subClientSlug,
+        items: addToCartConfig.items,
+        itemType: addToCartConfig.itemType
       });
     } else {
       setIsLoading(true);
@@ -178,7 +181,7 @@ const PaymentDetailsActions = ({
                 text={text}
                 variant={variant}
                 dataQa={text}
-                disabled={disableActions || isInCart}
+                disabled={disableActions}
               />
             </Box>
           )}
@@ -192,7 +195,7 @@ const PaymentDetailsActions = ({
               variant={variant}
               dataQa={text}
               extraStyles={isMobile && `flex-grow: 1; width: 100%; margin: 0;`}
-              disabled={disableActions || isInCart}
+              disabled={disableActions}
             />
           </Box>
         )}