@thecb/components 5.9.3 → 5.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.9.3",
+  "version": "5.10.2",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -61,13 +61,15 @@
     "rollup-plugin-node-resolve": "^5.1.0",
     "rollup-plugin-visualizer": "^4.0.4",
     "storybook": "^6.4.22",
+    "styled-components": "^5.3.5",
     "styled-theming": "^2.2.0"
   },
   "peerDependencies": {
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^6.3.0",
-    "styled-theming": "^2.2.0"
+    "styled-theming": "^2.2.0",
+    "styled-components": "^5.1.1"
   },
   "husky": {
     "hooks": {
@@ -83,7 +85,6 @@
     "ramda": "^0.27.0",
     "react-aria-modal": "^4.0.0",
     "react-pose": "^4.0.10",
-    "redux-freeform": "^5.5.0",
-    "styled-components": "^5.1.1"
+    "redux-freeform": "^5.5.0"
   }
 }

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

@@ -10,7 +10,14 @@ import LabeledAmount from "../../atoms/labeled-amount";
 import LineItem from "../../atoms/line-item";
 import Title from "../../atoms/title";
 import SolidDivider from "../../atoms/solid-divider";
-import { FONT_WEIGHT_BOLD } from "../../../constants/style_constants";
+import {
+  FONT_WEIGHT_BOLD,
+  FONT_WEIGHT_REGULAR
+} from "../../../constants/style_constants";
+import { ATHENS_GREY } from "../../../constants/colors";
+import ButtonWithAction from "../../atoms/button-with-action";
+import Text from "../../atoms/text";
+import { noop } from "../../../util/general";
 
 const PaymentDetailsContent = ({
   lineItemElems,
@@ -18,11 +25,49 @@ const PaymentDetailsContent = ({
   subtotal,
   total,
   variant,
-  themeValues
+  themeValues,
+  hasVoidablePaymentsSection,
+  voidableTransactionDetails,
+  voidableAmountPaid,
+  partialVoidAction
 }) => (
   <Stack childGap="16px">
     {lineItemElems}
-    <SolidDivider />
+    {hasVoidablePaymentsSection && (
+      <Box background={ATHENS_GREY}>
+        <Text variant="p" color={themeValues.text} weight="400">
+          Paid
+        </Text>
+        {voidableTransactionDetails.map(t => (
+          <Cluster key={t.id} justify="space-between" align="center">
+            <Cluster padding="0" align="center">
+              <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;`}
+              />
+            </Cluster>
+            <Box padding="0" key={t.id}>
+              {displayCurrency(t.amount_given)}
+            </Box>
+          </Cluster>
+        ))}
+        <Box padding="8px 0px 16px 0px">
+          <SolidDivider />
+        </Box>
+        <LabeledAmount
+          fontWeight={FONT_WEIGHT_REGULAR}
+          label="Amount paid"
+          amount={displayCurrency(voidableAmountPaid)}
+        />
+      </Box>
+    )}
+    {!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}
@@ -35,7 +80,7 @@ const PaymentDetailsContent = ({
     <LabeledAmount
       as="p"
       variant={themeValues.labeledAmountTotal}
-      label="Total"
+      label={hasVoidablePaymentsSection ? "Remaining amount due" : "Total"}
       amount={displayCurrency(total)}
       extraStyles={variant === "small" && `font-weight: ${FONT_WEIGHT_BOLD};`}
     />
@@ -85,7 +130,13 @@ const PaymentDetails = ({
   collapsibleOnMobile = true,
   isMobile,
   supportsTouch,
-  themeValues
+  themeValues,
+  // partial void section (optional)
+  hasVoidablePaymentsSection = false,
+  voidableTransactionDetails = [],
+  partialVoidAction = noop,
+  voidableAmountPaid = 0
+  // end partial void section
 }) => {
   const [isOpen, setIsOpen] = useState(initiallyOpen);
   const fees = _fees
@@ -118,12 +169,34 @@ const PaymentDetails = ({
       <SolidDivider />
       <Box padding="8px" />
       <PaymentDetailsContent
-        {...{ lineItemElems, feeElems, subtotal, total, themeValues, variant }}
+        {...{
+          lineItemElems,
+          feeElems,
+          subtotal,
+          total,
+          themeValues,
+          variant,
+          hasVoidablePaymentsSection,
+          voidableTransactionDetails,
+          voidableAmountPaid,
+          partialVoidAction
+        }}
       />
     </Stack>
   ) : (
     <PaymentDetailsContent
-      {...{ lineItemElems, feeElems, subtotal, total, themeValues, variant }}
+      {...{
+        lineItemElems,
+        feeElems,
+        subtotal,
+        total,
+        themeValues,
+        variant,
+        hasVoidablePaymentsSection,
+        voidableTransactionDetails,
+        voidableAmountPaid,
+        partialVoidAction
+      }}
     />
   );
   const title = hideTitle ? (

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { text, boolean } from "@storybook/addon-knobs";
+import { text, boolean, number } from "@storybook/addon-knobs";
 import PaymentDetails from "./PaymentDetails";
 import page from "../../../../.storybook/page";
 
@@ -52,18 +52,108 @@ const payment = {
   total: 79033
 };
 
+const voidableTransactionDetails = [
+  {
+    status: "successful",
+    id: 3,
+    warnings: [],
+    payment_type: "Card Payment",
+    amount_given: 100,
+    amount_processed: 100,
+    change_due: 0,
+    service_fee: 0,
+    credit_card: {
+      last_four: "0043"
+    },
+    bank_account: {
+      account_number_last_four: null
+    },
+    voidText: "Card ending in 0043"
+  },
+  {
+    status: "successful",
+    id: 5,
+    warnings: [],
+    payment_type: "Card Payment",
+    amount_given: 100,
+    amount_processed: 100,
+    change_due: 0,
+    service_fee: 0,
+    credit_card: {
+      last_four: "0043"
+    },
+    bank_account: {
+      account_number_last_four: null
+    },
+    voidText: "Card ending in 0043"
+  },
+  {
+    status: "successful",
+    id: 6,
+    warnings: [],
+    payment_type: "Check Payment",
+    amount_given: 200,
+    amount_processed: 200,
+    change_due: 0,
+    service_fee: 0,
+    credit_card: {
+      last_four: null
+    },
+    bank_account: {
+      account_number_last_four: "123"
+    },
+    voidText: "Account ending in 123"
+  }
+];
+
+const lineItems2 = [
+  {
+    amount: 500,
+    description: "Point of Sale Manual Entry - CLERK",
+    quantity: 1,
+    subDescription: "Test description"
+  }
+];
+
 export const paymentDetails = () => (
   <PaymentDetails
-    subtotal={text("subtotal", payment.subtotal, "props")}
+    subtotal={text("subtotal", String(payment.subtotal), "props")}
     lineItems={payment.lineItems}
     fees={payment.fees}
-    total={text("total", payment.total, "props")}
+    total={text("total", String(payment.total), "props")}
+    collapsibleOnMobile={boolean("collapsibleOnMobile", false, "props")}
+    initiallyOpen={boolean("initiallyOpen", true, "props")}
+    hideTitle={boolean("hideTitle", false, "props")}
+  />
+);
+
+export const paymentDetailsWithPartialVoids = () => (
+  <PaymentDetails
+    subtotal={100}
+    lineItems={lineItems2}
+    fees={[]}
+    total={100}
     collapsibleOnMobile={boolean("collapsibleOnMobile", false, "props")}
     initiallyOpen={boolean("initiallyOpen", true, "props")}
     hideTitle={boolean("hideTitle", false, "props")}
+    // partial voids section (optional)
+    hasVoidablePaymentsSection={boolean(
+      "hasVoidablePaymentsSection",
+      true,
+      "props"
+    )}
+    voidableTransactionDetails={voidableTransactionDetails}
+    partialVoidAction={transaction => {
+      console.log(`Your function to void payment id: ${transaction.id}`);
+    }}
+    voidableAmountPaid={number("voidableAmountPaid", 400)}
+    // end partial void section
   />
 );
 
+paymentDetailsWithPartialVoids.storyName =
+  "Payment Details (with partial voids)";
+
 const story = page({
   title: "Components|Molecules/PaymentDetails",
   Component: PaymentDetails