@thecb/components 5.10.4 → 5.10.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.10.4",
+  "version": "5.10.7",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

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

@@ -108,7 +108,7 @@ const PaymentDetailsActions = ({
                 variant="tertiary"
                 text={`Set Up ${planType}`}
                 action={() => {
-                  setDetailedObligation(obligations, config);
+                  setDetailedObligation(obligations, config, obligationAssocID);
                   handleAutopayAction();
                 }}
                 dataQa="Set Up Autopay"

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

@@ -29,13 +29,19 @@ const PaymentDetailsContent = ({
   hasVoidablePaymentsSection,
   voidableTransactionDetails,
   voidableAmountPaid,
-  partialVoidAction
+  partialVoidAction,
+  remainingBalance
 }) => (
   <Stack childGap="16px">
     {lineItemElems}
     {hasVoidablePaymentsSection && (
       <Box background={ATHENS_GREY}>
-        <Text variant="p" color={themeValues.text} weight="400">
+        <Text
+          variant="p"
+          color={themeValues.text}
+          weight="400"
+          fontSize="0.875rem"
+        >
           Paid
         </Text>
         {voidableTransactionDetails.map(t => (
@@ -46,7 +52,12 @@ const PaymentDetailsContent = ({
                 variant="ghost"
                 action={() => partialVoidAction(t)}
                 text="Void"
-                extraStyles={"min-width: 75px; margin: 0px;"}
+                padding="0"
+                extraStyles={`
+                  min-width: 75px; 
+                  margin: 0px;
+                  min-height: 0px;
+                `}
                 textExtraStyles={`font-weight: ${FONT_WEIGHT_REGULAR}; font-size: 16px;`}
               />
             </Cluster>
@@ -55,11 +66,11 @@ const PaymentDetailsContent = ({
             </Box>
           </Cluster>
         ))}
-        <Box padding="8px 0px 16px 0px">
+        <Box padding="16px 0px">
           <SolidDivider />
         </Box>
         <LabeledAmount
-          fontWeight={FONT_WEIGHT_REGULAR}
+          extraStyles={`font-weight: ${FONT_WEIGHT_REGULAR};`}
           label="Amount paid"
           amount={displayCurrency(voidableAmountPaid)}
         />
@@ -68,20 +79,26 @@ const PaymentDetailsContent = ({
     {!hasVoidablePaymentsSection && !!lineItemElems.length && (
       <SolidDivider /> // avoids duplicate dividers -> case of voidable payment section, that acts as divider
     )}
-    <Box padding="0.5rem 0">
-      <LabeledAmount
-        variant={themeValues.labeledAmountSubtotal}
-        label="Subtotal"
-        amount={displayCurrency(subtotal)}
-      />
-      {feeElems}
-    </Box>
-    <SolidDivider />
+    {subtotal && (
+      <>
+        <Box padding="0.5rem 0">
+          <LabeledAmount
+            variant={themeValues.labeledAmountSubtotal}
+            label="Subtotal"
+            amount={displayCurrency(subtotal)}
+          />
+          {feeElems}
+        </Box>
+        <SolidDivider />
+      </>
+    )}
     <LabeledAmount
       as="p"
       variant={themeValues.labeledAmountTotal}
       label={hasVoidablePaymentsSection ? "Remaining amount due" : "Total"}
-      amount={displayCurrency(total)}
+      amount={displayCurrency(
+        typeof remainingBalance === "number" ? remainingBalance : total
+      )}
       extraStyles={variant === "small" && `font-weight: ${FONT_WEIGHT_BOLD};`}
     />
   </Stack>
@@ -135,7 +152,8 @@ const PaymentDetails = ({
   hasVoidablePaymentsSection = false,
   voidableTransactionDetails = [],
   partialVoidAction = noop,
-  voidableAmountPaid = 0
+  voidableAmountPaid = 0,
+  remainingBalance = false
   // end partial void section
 }) => {
   const [isOpen, setIsOpen] = useState(initiallyOpen);
@@ -179,7 +197,8 @@ const PaymentDetails = ({
           hasVoidablePaymentsSection,
           voidableTransactionDetails,
           voidableAmountPaid,
-          partialVoidAction
+          partialVoidAction,
+          remainingBalance
         }}
       />
     </Stack>
@@ -195,7 +214,8 @@ const PaymentDetails = ({
         hasVoidablePaymentsSection,
         voidableTransactionDetails,
         voidableAmountPaid,
-        partialVoidAction
+        partialVoidAction,
+        remainingBalance
       }}
     />
   );

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

@@ -129,10 +129,10 @@ export const paymentDetails = () => (
 
 export const paymentDetailsWithPartialVoids = () => (
   <PaymentDetails
-    subtotal={100}
+    subtotal={false}
     lineItems={lineItems2}
     fees={[]}
-    total={100}
+    total={500}
     collapsibleOnMobile={boolean("collapsibleOnMobile", false, "props")}
     initiallyOpen={boolean("initiallyOpen", true, "props")}
     hideTitle={boolean("hideTitle", false, "props")}
@@ -147,6 +147,7 @@ export const paymentDetailsWithPartialVoids = () => (
       console.log(`Your function to void payment id: ${transaction.id}`);
     }}
     voidableAmountPaid={number("voidableAmountPaid", 400)}
+    remainingBalance={100}
     // end partial void section
   />
 );