@thecb/components 5.10.4 → 5.11.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.10.4",
+  "version": "5.11.1-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -68,8 +68,8 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^6.3.0",
-    "styled-theming": "^2.2.0",
-    "styled-components": "^5.1.1"
+    "styled-components": "^5.1.1",
+    "styled-theming": "^2.2.0"
   },
   "husky": {
     "hooks": {

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

@@ -29,25 +29,40 @@ 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 => (
           <Cluster key={t.id} justify="space-between" align="center">
-            <Cluster padding="0" align="center">
+            <Cluster
+              padding="0"
+              align="center"
+              extraStyles={`font-size: 14px;`}
+            >
               <Box padding="0">{t.voidText}</Box>
               <ButtonWithAction
                 variant="ghost"
                 action={() => partialVoidAction(t)}
                 text="Void"
-                extraStyles={"min-width: 75px; margin: 0px;"}
-                textExtraStyles={`font-weight: ${FONT_WEIGHT_REGULAR}; font-size: 16px;`}
+                padding="0"
+                extraStyles={`
+                  min-width: 65px; 
+                  margin: 0px;
+                  min-height: 0px;
+                `}
+                textExtraStyles={`font-weight: ${FONT_WEIGHT_REGULAR}; font-size: 14px;`}
               />
             </Cluster>
             <Box padding="0" key={t.id}>
@@ -55,11 +70,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}; font-size: 14px;`}
           label="Amount paid"
           amount={displayCurrency(voidableAmountPaid)}
         />
@@ -68,20 +83,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 +156,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 +201,8 @@ const PaymentDetails = ({
           hasVoidablePaymentsSection,
           voidableTransactionDetails,
           voidableAmountPaid,
-          partialVoidAction
+          partialVoidAction,
+          remainingBalance
         }}
       />
     </Stack>
@@ -195,7 +218,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
   />
 );