@thecb/components 10.4.0 → 10.4.1

package/package.json

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

package/src/components/molecules/payment-details/PaymentDetails.js

@@ -13,7 +13,8 @@ import Title from "../../atoms/title";
 import SolidDivider from "../../atoms/solid-divider";
 import {
   FONT_WEIGHT_BOLD,
-  FONT_WEIGHT_REGULAR
+  FONT_WEIGHT_REGULAR,
+  FONT_WEIGHT_SEMIBOLD
 } from "../../../constants/style_constants";
 import { ATHENS_GREY } from "../../../constants/colors";
 import ButtonWithAction from "../../atoms/button-with-action";
@@ -33,9 +34,12 @@ const PaymentDetailsContent = ({
   voidableTransactionDetails,
   voidableAmountPaid,
   partialVoidAction,
-  remainingBalance
+  remainingBalance,
+  agencySubheading,
+  isCollapsible
 }) => (
   <Stack childGap="16px">
+    {isCollapsible && agencySubheading}
     {lineItemElems}
     {hasVoidablePaymentsSection && (
       <Box background={ATHENS_GREY}>
@@ -255,7 +259,9 @@ const PaymentDetails = ({
   remainingBalance = false,
   // end partial void section
   isLoading = false,
-  isError = false
+  isError = false,
+  multiCartEnabled = false,
+  agencyDisplayName
 }) => {
   const [isOpen, setIsOpen] = useState(initiallyOpen);
   const fees = _fees
@@ -284,6 +290,30 @@ const PaymentDetails = ({
       />
     </Fragment>
   ));
+  const agencySubheading = (
+    <>
+      {multiCartEnabled && agencyDisplayName && (
+        <Cluster
+          justify="space-between"
+          align="center"
+          style={{ margin: isCollapsible ? "0" : "0.5rem 0" }}
+        >
+          <Title
+            weight={FONT_WEIGHT_REGULAR}
+            as="h3"
+            extraStyles={`font-size: 1rem;`}
+          >
+            {agencyDisplayName}
+          </Title>
+          {lineItems?.length && (
+            <Text variant="pS" color={themeValues.text} weight="400">
+              {`${lineItems.length}  item${lineItems.length > 1 ? "s" : ""}`}
+            </Text>
+          )}
+        </Cluster>
+      )}
+    </>
+  );
   const content = isCollapsible ? (
     <Stack childGap="0">
       <Box padding="4.5px" />
@@ -301,7 +331,9 @@ const PaymentDetails = ({
           voidableTransactionDetails,
           voidableAmountPaid,
           partialVoidAction,
-          remainingBalance
+          remainingBalance,
+          agencySubheading,
+          isCollapsible
         }}
       />
     </Stack>
@@ -318,7 +350,9 @@ const PaymentDetails = ({
         voidableTransactionDetails,
         voidableAmountPaid,
         partialVoidAction,
-        remainingBalance
+        remainingBalance,
+        agencySubheading,
+        isCollapsible
       }}
     />
   );
@@ -345,15 +379,18 @@ const PaymentDetails = ({
       </Cluster>
     </Box>
   ) : (
-    <Title
-      as="h2"
-      weight={FONT_WEIGHT_BOLD}
-      margin="1rem 0 0 0"
-      extraStyles={`font-size: 1.75rem;`}
-      id="payment-details-title"
-    >
-      {titleText}
-    </Title>
+    <>
+      <Title
+        as="h2"
+        weight={FONT_WEIGHT_BOLD}
+        margin="1rem 0 0 0"
+        extraStyles={`font-size: 1.75rem;`}
+        id="payment-details-title"
+      >
+        {titleText}
+      </Title>
+      {agencySubheading}
+    </>
   );
   return isCollapsible ? (
     <Collapsible

package/src/components/molecules/payment-details/PaymentDetails.stories.js

@@ -160,6 +160,8 @@ export const paymentDetails = () => (
     collapsibleOnMobile={boolean("collapsibleOnMobile", false, "props")}
     initiallyOpen={boolean("initiallyOpen", true, "props")}
     hideTitle={boolean("hideTitle", false, "props")}
+    multiCartEnabled={true}
+    agencyDisplayName="Office of Charitable Trust"
   />
 );