@thecb/components 5.9.1 → 5.10.0

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

@@ -16,13 +16,16 @@ const AutopayModal = ({
   modalOpen,
   deactivatePaymentSchedule,
   navigateToSettings,
-  buttonLinkType,
+  controlType = "tertiary",
   isMobile,
   themeValues,
   isPaymentPlan,
-  nextAutopayDate
+  nextAutopayDate,
+  dueDate,
+  inactive
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
+  const nextDate = dueDate || nextAutopayDate;
   const modalExtraProps = {
     modalHeaderText: autoPayActive
       ? `Deactivate ${planType}`
@@ -30,7 +33,11 @@ const AutopayModal = ({
     modalBodyText: autoPayActive
       ? `Are you sure you want to deactivate ${
           isPaymentPlan ? "your payment plan" : "autopay"
-        }? You will need to manually make your next payment.`
+        }? ${
+          !inactive && nextDate
+            ? `Your next payment will be due on ${nextDate}.`
+            : ""
+        }`
       : `To set up ${
           isPaymentPlan ? "a payment plan" : "autopay"
         } you must save a payment method and address in your profile. Do you want to save these now?`,
@@ -62,6 +69,75 @@ const AutopayModal = ({
   const defaultStyles = `
     .autopayIcon { fill: ${themeValues.color}; text-decoration: underline; }
      `;
+  const renderAutoPayControl = () => {
+    switch (controlType) {
+      case "secondary": {
+        return (
+          <ButtonWithAction
+            text={autoPayActive ? `Turn off ${planType}` : `Set Up ${planType}`}
+            variant="secondary"
+            action={() => {
+              toggleModal(true);
+            }}
+            dataQa="Turn off Autopay"
+            extraStyles={
+              isMobile
+                ? `flex-grow: 1; width: 100%; margin: 0;`
+                : `flex-grow: 1; min-width: 165px;`
+            }
+          />
+        );
+      }
+      case "tertiary": {
+        return (
+          <ButtonWithAction
+            text={autoPayActive ? `Manage ${planType}` : `Set Up ${planType}`}
+            variant="tertiary"
+            action={() => {
+              toggleModal(true);
+            }}
+            dataQa="Manage Autopay"
+            extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+          />
+        );
+      }
+      case "link": {
+        return (
+          <Box
+            padding="0"
+            onClick={() => {
+              toggleModal(true);
+            }}
+            hoverStyles={hoverStyles}
+            activeStyles={activeStyles}
+            extraStyles={defaultStyles}
+          >
+            <Cluster
+              justify={isMobile ? "flex-start" : "flex-end"}
+              align="center"
+            >
+              <AutopayOnIcon />
+              <Text
+                variant="pS"
+                onClick={() => toggleModal(true)}
+                onKeyPress={e => {
+                  e.key === "Enter" && toggleModal(true);
+                }}
+                tabIndex="0"
+                dataQa={`${planType} On`}
+                color={SEA_GREEN}
+                weight={themeValues.fontWeight}
+                hoverStyles={themeValues.modalLinkHoverFocus}
+                extraStyles={`padding-left: 0.25rem;`}
+              >
+                {`${planType} ${nextAutopayDate}`}
+              </Text>
+            </Cluster>
+          </Box>
+        );
+      }
+    }
+  };
   return (
     <Modal
       showModal={() => toggleModal(true)}
@@ -69,50 +145,7 @@ const AutopayModal = ({
       modalOpen={modalOpen}
       {...modalExtraProps}
     >
-      {buttonLinkType ? (
-        <ButtonWithAction
-          text={autoPayActive ? `Manage ${planType}` : `Set Up ${planType}`}
-          variant="tertiary"
-          action={() => {
-            toggleModal(true);
-          }}
-          dataQa="Manage Autopay"
-          extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
-        />
-      ) : (
-        <Box
-          padding="0"
-          onClick={() => {
-            toggleModal(true);
-          }}
-          hoverStyles={hoverStyles}
-          activeStyles={activeStyles}
-          extraStyles={defaultStyles}
-        >
-          <Cluster
-            justify={isMobile ? "flex-start" : "flex-end"}
-            align="center"
-          >
-            <AutopayOnIcon />
-            <Text
-              variant="pS"
-              onClick={() => toggleModal(true)}
-              onKeyPress={e => {
-                console.log({ e });
-                e.key === "Enter" && toggleModal(true);
-              }}
-              tabIndex="0"
-              dataQa={`${planType} On`}
-              color={SEA_GREEN}
-              weight={themeValues.fontWeight}
-              hoverStyles={themeValues.modalLinkHoverFocus}
-              extraStyles={`padding-left: 0.25rem;`}
-            >
-              {`${planType} ${nextAutopayDate}`}
-            </Text>
-          </Cluster>
-        </Box>
-      )}
+      {renderAutoPayControl()}
     </Modal>
   );
 };

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

@@ -3,6 +3,7 @@ import { GHOST_GREY } from "../../../../constants/colors";
 import ButtonWithAction from "../../../atoms/button-with-action";
 import { Box, Cluster } from "../../../atoms/layouts";
 import { AutopayModalModule } from "./AutopayModalModule";
+import RemoveAccountModalModule from "./RemoveAccountModalModule";
 
 const InactiveControlsModule = ({
   autoPayEnabled,
@@ -14,18 +15,26 @@ const InactiveControlsModule = ({
   isPaymentPlan,
   nextAutopayDate,
   obligationAssocID,
+  dueDate,
+  agencyName,
+  configType,
   actions
 }) => {
   const [modalOpen, toggleModal] = useState(false);
-  const { removeAccount } = actions;
-  const handleRemoveAccount = () => removeAccount(obligationAssocID);
+  const { deleteObligationAssoc } = actions;
+  const handleRemoveAccount = () => deleteObligationAssoc(obligationAssocID);
   return (
     <Box
       padding={isMobile ? "18px 0 0 0" : "0"}
       border={isMobile ? `1px solid ${GHOST_GREY}` : `0px`}
       borderWidthOverride={isMobile ? `1px 0 0 0` : `0px`}
     >
-      <Cluster childGap={isMobile ? `8px` : `18px`}>
+      <Cluster
+        childGap={autoPayEnabled ? `8px` : "0"}
+        nowrap
+        justify={isMobile && autoPayEnabled && "center"}
+        align={isMobile && autoPayEnabled && "center"}
+      >
         {autoPayEnabled && (
           <Box padding="0" extraStyles={`flex-grow: 1;`}>
             <AutopayModalModule
@@ -35,22 +44,23 @@ const InactiveControlsModule = ({
               modalOpen={modalOpen}
               navigateToSettings={navigateToSettings}
               deactivatePaymentSchedule={deactivatePaymentSchedule}
-              buttonLinkType
               isMobile={isMobile}
               paymentPlanSchedule={paymentPlanSchedule}
               isPaymentPlan={isPaymentPlan}
               nextAutopayDate={nextAutopayDate}
               obligationAssocID={obligationAssocID}
+              dueDate={dueDate}
+              controlType="secondary"
+              inactive
             />
           </Box>
         )}
         <Box padding="0" extraStyles={`flex-grow: 1;`}>
-          <ButtonWithAction
-            variant="tertiary"
-            text="Remove"
-            action={handleRemoveAccount}
-            dataQa="Remove Account"
-            extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+          <RemoveAccountModalModule
+            agencyName={agencyName}
+            removeAccount={handleRemoveAccount}
+            accountType={configType === "ACCOUNT" ? "Account" : "Property"}
+            isMobile={isMobile}
           />
         </Box>
       </Cluster>

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

@@ -28,9 +28,9 @@ const InactiveTitleModule = ({ title, subtitle, autoPayEnabled }) => (
         Unable to load account details
       </Detail>
       <Detail variant="extraSmall" as="p" color={BLACK}>
-        {`This may mean that the account has been paid off or there was an error loading it. If you have questions about this account, please contact us.${
+        {`This may mean that the balance has been paid, or there was an error loading it.${
           autoPayEnabled
-            ? " You may disable Autopay for this account by pressing the Turn off Autopay button."
+            ? " You may disable autopay for this account by pressing the 'Turn off Autopay' button."
             : ""
         }`}
       </Detail>

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

@@ -18,7 +18,9 @@ const PaymentDetailsActions = ({
   autoPaySchedule,
   paymentPlanSchedule,
   isPaymentPlan,
-  nextAutopayDate
+  nextAutopayDate,
+  obligationAssocID,
+  dueDate
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const [isLoading, setIsLoading] = useState(false);
@@ -38,7 +40,7 @@ const PaymentDetailsActions = ({
     createPaymentFromProfile(obligations, config);
   };
   const handleDetailsClick = () => {
-    setDetailedObligation(obligations, config);
+    setDetailedObligation(obligations, config, obligationAssocID);
     navigateToDetailedObligation(detailsSlug);
   };
   return (
@@ -120,26 +122,23 @@ const PaymentDetailsActions = ({
                 modalOpen={modalOpen}
                 navigateToSettings={navigateToSettings}
                 deactivatePaymentSchedule={deactivatePaymentSchedule}
-                buttonLinkType
+                controlType="tertiary"
                 isMobile={isMobile}
                 paymentPlanSchedule={paymentPlanSchedule}
                 isPaymentPlan={isPaymentPlan}
                 nextAutopayDate={nextAutopayDate}
+                dueDate={dueDate}
               />
             )}
           </Box>
           {!isMobile && (
-            <Box
-              padding={isMobile ? "0 0 0 8px" : "0"}
-              extraStyles={isMobile && `flex-grow: 1;`}
-            >
+            <Box padding={"0"}>
               <ButtonWithAction
                 isLoading={isLoading}
                 action={() => handleClick(obligations)}
                 text="Pay Now"
                 variant={isMobile ? "smallSecondary" : "secondary"}
                 dataQa="Pay Now"
-                extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
               />
             </Box>
           )}
@@ -152,7 +151,7 @@ const PaymentDetailsActions = ({
               text="Pay Now"
               variant={isMobile ? "smallSecondary" : "secondary"}
               dataQa="Pay Now"
-              extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+              extraStyles={isMobile && `flex-grow: 1; width: 100%; margin: 0;`}
             />
           </Box>
         )}

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

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import Modal from "../../modal";
+import ButtonWithAction from "../../../atoms/button-with-action";
+import { Box } from "../../../atoms/layouts";
+
+const RemoveAccountModalModule = ({
+  agencyName,
+  obligations = [],
+  removeAccount,
+  accountType,
+  isMobile
+}) => {
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+  const lastItem = [...obligations].pop();
+  const accounts = obligations.length
+    ? obligations.reduce((acc, curr) => {
+        const account = curr.details.description;
+        const formattedAccount =
+          curr !== lastItem ? `${account} and ` : `${account}`;
+        return formattedAccount === agencyName
+          ? agencyName
+          : acc + formattedAccount;
+      }, `${agencyName} - `)
+    : "";
+  const identifier =
+    accountType === "Account" && obligations.length > 1
+      ? "accounts"
+      : accountType === "Property" && obligations.length > 1
+      ? "properties"
+      : accountType.toLowerCase();
+
+  return (
+    <Modal
+      showModal={() => setModalIsOpen(true)}
+      hideModal={() => setModalIsOpen(false)}
+      modalOpen={modalIsOpen}
+      modalHeaderText={`Remove ${accountType}`}
+      modalBodyText={`Are you sure you want to remove the ${identifier} ${accounts} from your profile? Any autopay scheduled against ${
+        obligations.length > 1 ? "them" : "it"
+      } will be deactivated.`}
+      continueButtonText="Remove"
+      continueAction={() => {
+        removeAccount();
+        setModalIsOpen(false);
+      }}
+      useDangerButton
+    >
+      <Box padding="0" extraStyles={`flex-grow: 1;`}>
+        <ButtonWithAction
+          text="Remove"
+          variant="secondary"
+          action={() => setModalIsOpen(true)}
+          dataQa="Remove Account"
+          extraStyles={
+            isMobile ? `flex-grow: 1; width: 100%; margin: 0;` : `flex-grow: 1;`
+          }
+        />
+      </Box>
+    </Modal>
+  );
+};
+export default RemoveAccountModalModule;

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

@@ -4,6 +4,7 @@ import AmountModule from "./AmountModule";
 import PaymentDetailsActions from "./PaymentDetailsActions";
 import InactiveControlsModule from "./InactiveControlsModule";
 import InactiveTitleModule from "./InactiveTitleModule";
+import RemoveAccountModalModule from "./RemoveAccountModalModule";
 
 export {
   IconModule,
@@ -11,5 +12,6 @@ export {
   AmountModule,
   PaymentDetailsActions,
   InactiveControlsModule,
-  InactiveTitleModule
+  InactiveTitleModule,
+  RemoveAccountModalModule
 };

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

package/src/components/molecules/tab-sidebar/TabSidebar.js

@@ -4,7 +4,8 @@ import {
   BRIGHT_GREY,
   GHOST_GREY,
   ATHENS_GREY,
-  TRANSPARENT
+  TRANSPARENT,
+  COOL_GREY_05
 } from "../../../constants/colors";
 import Text from "../../atoms/text";
 import { InternalLink } from "../../atoms/link";
@@ -18,7 +19,7 @@ import { fallbackValues } from "./TabSidebar.theme";
 const TabSidebar = ({ links, isMobile, themeValues }) => (
   <Box
     padding="0"
-    background={ATHENS_GREY}
+    background={COOL_GREY_05}
     minHeight="100%"
     role="region"
     aria-label="Profile tabs"

package/src/components/molecules/workflow-tile/WorkflowTile.js

@@ -51,6 +51,7 @@ const WorkflowTile = ({
           url={`/service/${slug}`}
           extraStyles={`width: 100%;`}
           linkExtraStyles={`justify-content: center;`}
+          dataQa={slug}
         />
       </Box>
     </Stack>

package/src/components/templates/center-single/CenterSingle.js

@@ -4,6 +4,7 @@ import { fallbackValues } from "../templates.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import withWindowResize from "../../withWindowSize";
 import { Box, Center, Cover } from "../../atoms/layouts";
+import { COOL_GREY_05 } from "../../../constants/colors";
 
 const CenterSingle = ({
   header,
@@ -23,7 +24,7 @@ const CenterSingle = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={themeValues.pageBackground}
+      background={COOL_GREY_05}
       extraStyles="flex-grow: 1;"
     >
       <Cover centerOverride={isMobile && !centeredMobileContent}>

package/src/components/templates/center-stack/CenterStack.js

@@ -4,6 +4,7 @@ import { fallbackValues } from "../templates.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import withWindowResize from "../../withWindowSize";
 import { Box, Center, Cover, Stack } from "../../atoms/layouts";
+import { COOL_GREY_05 } from "../../../constants/colors";
 
 const CenterStack = ({
   header,
@@ -23,7 +24,7 @@ const CenterStack = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={themeValues.pageBackground}
+      background={COOL_GREY_05}
       extraStyles="flex-grow: 1;"
     >
       <Cover>