@thecb/components 5.9.4-beta.0 → 5.10.4

package/dist/index.cjs.js

@@ -40208,10 +40208,49 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
       subtotal = _ref.subtotal,
       total = _ref.total,
       variant = _ref.variant,
-      themeValues = _ref.themeValues;
+      themeValues = _ref.themeValues,
+      hasVoidablePaymentsSection = _ref.hasVoidablePaymentsSection,
+      voidableTransactionDetails = _ref.voidableTransactionDetails,
+      voidableAmountPaid = _ref.voidableAmountPaid,
+      partialVoidAction = _ref.partialVoidAction;
   return /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "16px"
-  }, lineItemElems, /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(Box, {
+  }, lineItemElems, hasVoidablePaymentsSection && /*#__PURE__*/React__default.createElement(Box, {
+    background: ATHENS_GREY
+  }, /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: "p",
+    color: themeValues.text,
+    weight: "400"
+  }, "Paid"), voidableTransactionDetails.map(function (t) {
+    return /*#__PURE__*/React__default.createElement(Cluster, {
+      key: t.id,
+      justify: "space-between",
+      align: "center"
+    }, /*#__PURE__*/React__default.createElement(Cluster, {
+      padding: "0",
+      align: "center"
+    }, /*#__PURE__*/React__default.createElement(Box, {
+      padding: "0"
+    }, t.voidText), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+      variant: "ghost",
+      action: function action() {
+        return partialVoidAction(t);
+      },
+      text: "Void",
+      extraStyles: "min-width: 75px; margin: 0px;",
+      textExtraStyles: "font-weight: ".concat(FONT_WEIGHT_REGULAR, "; font-size: 16px;")
+    })), /*#__PURE__*/React__default.createElement(Box, {
+      padding: "0",
+      key: t.id
+    }, displayCurrency(t.amount_processed)));
+  }), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "8px 0px 16px 0px"
+  }, /*#__PURE__*/React__default.createElement(SolidDivider$1, null)), /*#__PURE__*/React__default.createElement(LabeledAmount$1, {
+    fontWeight: FONT_WEIGHT_REGULAR,
+    label: "Amount paid",
+    amount: displayCurrency(voidableAmountPaid)
+  })), !hasVoidablePaymentsSection && !!lineItemElems.length && /*#__PURE__*/React__default.createElement(SolidDivider$1, null) // avoids duplicate dividers -> case of voidable payment section, that acts as divider
+  , /*#__PURE__*/React__default.createElement(Box, {
     padding: "0.5rem 0"
   }, /*#__PURE__*/React__default.createElement(LabeledAmount$1, {
     variant: themeValues.labeledAmountSubtotal,
@@ -40220,7 +40259,7 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   }), feeElems), /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(LabeledAmount$1, {
     as: "p",
     variant: themeValues.labeledAmountTotal,
-    label: "Total",
+    label: hasVoidablePaymentsSection ? "Remaining amount due" : "Total",
     amount: displayCurrency(total),
     extraStyles: variant === "small" && "font-weight: ".concat(FONT_WEIGHT_BOLD, ";")
   }));
@@ -40280,7 +40319,15 @@ var PaymentDetails = function PaymentDetails(_ref4) {
       collapsibleOnMobile = _ref4$collapsibleOnMo === void 0 ? true : _ref4$collapsibleOnMo,
       isMobile = _ref4.isMobile,
       supportsTouch = _ref4.supportsTouch,
-      themeValues = _ref4.themeValues;
+      themeValues = _ref4.themeValues,
+      _ref4$hasVoidablePaym = _ref4.hasVoidablePaymentsSection,
+      hasVoidablePaymentsSection = _ref4$hasVoidablePaym === void 0 ? false : _ref4$hasVoidablePaym,
+      _ref4$voidableTransac = _ref4.voidableTransactionDetails,
+      voidableTransactionDetails = _ref4$voidableTransac === void 0 ? [] : _ref4$voidableTransac,
+      _ref4$partialVoidActi = _ref4.partialVoidAction,
+      partialVoidAction = _ref4$partialVoidActi === void 0 ? noop : _ref4$partialVoidActi,
+      _ref4$voidableAmountP = _ref4.voidableAmountPaid,
+      voidableAmountPaid = _ref4$voidableAmountP === void 0 ? 0 : _ref4$voidableAmountP;
 
   var _useState = React.useState(initiallyOpen),
       _useState2 = _slicedToArray(_useState, 2),
@@ -40336,14 +40383,22 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     subtotal: subtotal,
     total: total,
     themeValues: themeValues,
-    variant: variant
+    variant: variant,
+    hasVoidablePaymentsSection: hasVoidablePaymentsSection,
+    voidableTransactionDetails: voidableTransactionDetails,
+    voidableAmountPaid: voidableAmountPaid,
+    partialVoidAction: partialVoidAction
   })) : /*#__PURE__*/React__default.createElement(PaymentDetailsContent, {
     lineItemElems: lineItemElems,
     feeElems: feeElems,
     subtotal: subtotal,
     total: total,
     themeValues: themeValues,
-    variant: variant
+    variant: variant,
+    hasVoidablePaymentsSection: hasVoidablePaymentsSection,
+    voidableTransactionDetails: voidableTransactionDetails,
+    voidableAmountPaid: voidableAmountPaid,
+    partialVoidAction: partialVoidAction
   });
   var title = hideTitle ? /*#__PURE__*/React__default.createElement(React.Fragment, null) : isCollapsible ? /*#__PURE__*/React__default.createElement(Box, {
     width: "100%",