@thecb/components 3.4.1 → 3.4.2

package/package.json

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

package/src/components/atoms/icons/AutopayOnIcon.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const AutopayOnIcon = ({ themeValues }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="13"
+    viewBox="0 0 12 13"
+  >
+    <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+      <path
+        className="autopayIcon"
+        fill={themeValues.primaryColor}
+        fillRule="nonzero"
+        d="M1.898 5.75c.079 0 .141-.02.188-.059a.281.281 0 00.094-.152 3.825 3.825 0 011.394-2.144A3.838 3.838 0 016 2.563c.5 0 .98.09 1.441.27.461.179.88.44 1.254.784l-.984.985A.542.542 0 007.547 5c0 .156.055.29.164.398.11.11.242.165.398.165h3.141c.156 0 .289-.055.398-.165A.542.542 0 0011.812 5V1.86a.542.542 0 00-.164-.399.542.542 0 00-.398-.164.542.542 0 00-.398.164l-.844.844A5.699 5.699 0 006 .688c-.938 0-1.809.207-2.613.62-.805.415-1.48.981-2.028 1.7A5.726 5.726 0 00.281 5.422a.265.265 0 00.059.223c.055.07.129.105.222.105h1.336zM6 12.312c.937 0 1.809-.207 2.613-.62a5.919 5.919 0 002.028-1.7 5.726 5.726 0 001.078-2.414.265.265 0 00-.059-.223.267.267 0 00-.223-.105h-1.335c-.079 0-.141.02-.188.059a.281.281 0 00-.094.152 3.825 3.825 0 01-1.394 2.144c-.711.555-1.52.833-2.426.833-.5 0-.98-.09-1.441-.27a3.985 3.985 0 01-1.254-.785l.984-.985A.542.542 0 004.453 8a.542.542 0 00-.164-.398.542.542 0 00-.398-.164H.75a.542.542 0 00-.398.164A.542.542 0 00.187 8v3.14c0 .157.055.29.165.4.109.108.242.163.398.163.156 0 .29-.055.398-.164l.844-.844A5.699 5.699 0 006 12.312z"
+      ></path>
+    </g>
+  </svg>
+);
+
+export default themeComponent(
+  AutopayOnIcon,
+  "Icons",
+  fallbackValues,
+  "primary"
+);

package/src/components/atoms/icons/icons.stories.js

@@ -20,7 +20,8 @@ import {
   CheckmarkIcon,
   BankIcon,
   GenericCard,
-  PaymentIcon
+  PaymentIcon,
+  AutopayOnIcon
 } from "./index";
 
 const story = page({
@@ -48,3 +49,4 @@ export const checkmarkIcon = () => <CheckmarkIcon />;
 export const bankIcon = () => <BankIcon />;
 export const genericCard = () => <GenericCard />;
 export const paymentIco = () => <PaymentIcon />;
+export const autopayOnIcon = () => <AutopayOnIcon />;

package/src/components/atoms/icons/index.js

@@ -18,6 +18,7 @@ import BankIcon from "./BankIcon";
 import GenericCard from "./GenericCard";
 import PaymentIcon from "./PaymentIcon";
 import IconAdd from "./IconAdd";
+import AutopayOnIcon from "./AutopayOnIcon";
 
 export {
   AccountsIcon,
@@ -39,5 +40,6 @@ export {
   BankIcon,
   GenericCard,
   PaymentIcon,
-  IconAdd
+  IconAdd,
+  AutopayOnIcon
 };

package/src/components/molecules/obligation/Obligation.js

@@ -13,22 +13,32 @@ const Obligation = ({
   obligations,
   actions,
   autoPayEnabled,
+  autoPayAvailable,
+  handleAutopayAction,
+  deactivatePaymentSchedule,
+  autoPaySchedule,
+  navigateToSettings,
   isMobile
 }) => {
   const obligation = obligations[0];
   const { customAttributes } = obligation;
   return (
     <Box
-      background={WHITE}
+      padding="0"
       borderRadius="4px"
       boxShadow={`0px 0px 5px 0px ${GHOST_GREY}`}
     >
-      <Stack childGap="14px">
-        <Box key={`${obligations[0].id}-top`} padding="0 8px" minWidth="100%">
-          <Cluster justify="space-between" align="center" childGap="4px" nowrap>
-            <Box padding="0">
-              <Cluster justify="flex-start" align="center">
-                {!isMobile && (
+      <Box background={WHITE}>
+        <Stack childGap="14px">
+          <Box key={`${obligations[0].id}-top`} padding="0 8px" minWidth="100%">
+            <Cluster
+              justify="space-between"
+              align="center"
+              childGap="4px"
+              nowrap
+            >
+              <Box padding="0">
+                <Cluster justify="flex-start" align="center">
                   <IconModule
                     icon={config.icon}
                     iconDefault={config.iconDefault}
@@ -36,32 +46,59 @@ const Obligation = ({
                     iconValue={config.iconValue}
                     customAttributes={customAttributes}
                   />
-                )}
-                <TitleModule
-                  title={obligation.description}
-                  subtitle={obligation.subDescription}
-                  titleColor={BRIGHT_GREY}
+                  <TitleModule
+                    title={obligation.description}
+                    subtitle={obligation.subDescription}
+                    titleColor={BRIGHT_GREY}
+                    isMobile={isMobile}
+                  />
+                </Cluster>
+              </Box>
+              {!isMobile && (
+                <AmountModule
+                  totalAmountDue={obligations.reduce(
+                    (acc, curr) => acc + curr.amountDue,
+                    0
+                  )}
+                  autoPayEnabled={autoPayEnabled}
                   isMobile={isMobile}
+                  deactivatePaymentSchedule={deactivatePaymentSchedule}
+                  navigateToSettings={navigateToSettings}
+                  autoPaySchedule={autoPaySchedule}
                 />
-              </Cluster>
-            </Box>
-            <AmountModule
-              totalAmountDue={obligations.reduce(
-                (acc, curr) => acc + curr.amountDue,
-                0
               )}
+            </Cluster>
+          </Box>
+          {!isMobile && (
+            <PaymentDetailsActions
+              obligations={obligations}
               autoPayEnabled={autoPayEnabled}
+              autoPayAvailable={autoPayAvailable}
+              handleAutopayAction={handleAutopayAction}
+              deactivatePaymentSchedule={deactivatePaymentSchedule}
+              autoPaySchedule={autoPaySchedule}
+              navigateToSettings={navigateToSettings}
+              config={config}
+              actions={actions}
               isMobile={isMobile}
             />
-          </Cluster>
-        </Box>
+          )}
+        </Stack>
+      </Box>
+      {isMobile && (
         <PaymentDetailsActions
           obligations={obligations}
+          autoPayEnabled={autoPayEnabled}
+          autoPayAvailable={autoPayAvailable}
+          handleAutopayAction={handleAutopayAction}
+          deactivatePaymentSchedule={deactivatePaymentSchedule}
+          autoPaySchedule={autoPaySchedule}
+          navigateToSettings={navigateToSettings}
           config={config}
           actions={actions}
           isMobile={isMobile}
         />
-      </Stack>
+      )}
     </Box>
   );
 };

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

@@ -1,40 +1,48 @@
-import React from "react";
+import React, { useState } from "react";
 import Text from "../../../atoms/text";
 import AmountCallout from "../../../atoms/amount-callout";
 import { Box, Stack } from "../../../atoms/layouts";
-import {
-  FONT_WEIGHT_SEMIBOLD,
-  FONT_WEIGHT_REGULAR
-} from "../../../../constants/style_constants";
-import { REGENT_GREY } from "../../../../constants/colors";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../../constants/style_constants";
 import { displayCurrency } from "../../../../util/general";
+import { AutopayModalModule } from "./AutopayModalModule";
 
-const AmountModule = ({ totalAmountDue, autoPayEnabled, isMobile }) => (
-  <Box padding="0 0.25rem 0 0">
-    <Stack childGap="0">
-      <Text
-        variant="pS"
-        weight={FONT_WEIGHT_SEMIBOLD}
-        extraStyles={`text-align: right;`}
-      >
-        {isMobile ? "Total Due" : "Total Amount Due"}
-      </Text>
-      <AmountCallout
-        amount={displayCurrency(totalAmountDue)}
-        textAlign="right"
-      />
-      {autoPayEnabled && (
+const AmountModule = ({
+  totalAmountDue,
+  autoPayEnabled,
+  isMobile,
+  deactivatePaymentSchedule,
+  navigateToSettings,
+  autoPaySchedule
+}) => {
+  const [modalOpen, toggleModal] = useState(false);
+  return (
+    <Box padding="0 0.25rem 0 0">
+      <Stack childGap="0">
         <Text
-          variant="p"
-          weight={FONT_WEIGHT_REGULAR}
-          color={REGENT_GREY}
-          extraStyles={`font-style: italic; text-align: right;`}
+          variant="pS"
+          weight={FONT_WEIGHT_SEMIBOLD}
+          extraStyles={isMobile ? `text-align: left;` : `text-align: right;`}
         >
-          {isMobile ? "Autopay On" : "Autopay Enabled"}
+          {isMobile ? "Total Due" : "Total Amount Due"}
         </Text>
-      )}
-    </Stack>
-  </Box>
-);
+        <AmountCallout
+          amount={displayCurrency(totalAmountDue)}
+          textAlign={isMobile ? "left" : "right"}
+        />
+        {autoPayEnabled && (
+          <AutopayModalModule
+            autoPayActive={autoPayEnabled}
+            autoPaySchedule={autoPaySchedule}
+            toggleModal={toggleModal}
+            modalOpen={modalOpen}
+            navigateToSettings={navigateToSettings}
+            deactivatePaymentSchedule={deactivatePaymentSchedule}
+            isMobile={isMobile}
+          />
+        )}
+      </Stack>
+    </Box>
+  );
+};
 
 export default AmountModule;

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

@@ -0,0 +1,99 @@
+import React from "react";
+import Modal from "../../modal";
+import ButtonWithAction from "../../../atoms/button-with-action";
+import { AutopayOnIcon } from "../../../atoms/icons";
+import { Box, Cluster } from "../../../atoms/layouts";
+import { fallbackValues } from "./AutopayModalModule.theme";
+import { themeComponent } from "../../../../util/themeUtils";
+
+const AutopayModal = ({
+  autoPayActive,
+  autoPaySchedule,
+  toggleModal,
+  modalOpen,
+  deactivatePaymentSchedule,
+  navigateToSettings,
+  buttonLinkType,
+  isMobile,
+  themeValues
+}) => {
+  const modalExtraProps = {
+    modalHeaderText: autoPayActive ? "Deactivate Autopay" : "Set Up Autopay",
+    modalBodyText: autoPayActive
+      ? "Are you sure you want to deactivate autopay? You will need to manually make your next payment."
+      : "To set up autopay you must save a payment method and address in your profile. Do you want to save these now?",
+    continueButtonText: autoPayActive ? "Disable Autopay" : "Add to Profile",
+    useDangerButton: autoPayActive,
+    continueAction: autoPayActive
+      ? () => {
+          deactivatePaymentSchedule(autoPaySchedule);
+          toggleModal(false);
+        }
+      : navigateToSettings
+  };
+
+  const hoverStyles = `
+  &:hover {
+    .autopayIcon { fill: ${themeValues.hoverColor}; text-decoration: underline; }
+  }`;
+
+  const activeStyles = `
+   &:active {
+    .autopayIcon { fill: ${themeValues.activeColor}; text-decoration: underline; }
+    }`;
+
+  const defaultStyles = `
+    .autopayIcon { fill: ${themeValues.color}; text-decoration: underline; }
+     `;
+  return (
+    <Modal
+      ModalLink={() =>
+        buttonLinkType ? (
+          <ButtonWithAction
+            text={autoPayActive ? "Manage Autopay" : "Set Up Autopay"}
+            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 />
+              <ButtonWithAction
+                text="Autopay On"
+                variant="smallGhost"
+                dataQa="Autopay On"
+                textExtraStyles={`font-size: 0.875rem; `}
+                extraStyles={`min-width: auto; padding: 0 0 0 6px;`}
+              />
+            </Cluster>
+          </Box>
+        )
+      }
+      showModal={() => toggleModal(true)}
+      hideModal={() => toggleModal(false)}
+      modalOpen={modalOpen}
+      {...modalExtraProps}
+    />
+  );
+};
+
+export const AutopayModalModule = themeComponent(
+  AutopayModal,
+  "AutopayModal",
+  fallbackValues
+);

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

@@ -0,0 +1,9 @@
+const color = "#15749D";
+const hoverColor = "#116285";
+const activeColor = "#0E506D";
+
+export const fallbackValues = {
+  color,
+  hoverColor,
+  activeColor
+};

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

@@ -1,10 +1,24 @@
 import React, { useState } from "react";
 import { Box, Cluster } from "../../../atoms/layouts";
 import ButtonWithAction from "../../../atoms/button-with-action";
+import { AutopayModalModule } from "./AutopayModalModule";
 import { GHOST_GREY } from "../../../../constants/colors";
+import AmountModule from "./AmountModule";
 
-const PaymentDetailsActions = ({ isMobile, obligations, config, actions }) => {
+const PaymentDetailsActions = ({
+  isMobile,
+  obligations,
+  config,
+  actions,
+  autoPayEnabled,
+  autoPayAvailable,
+  handleAutopayAction,
+  deactivatePaymentSchedule,
+  navigateToSettings,
+  autoPaySchedule
+}) => {
   const [isLoading, setIsLoading] = useState(false);
+  const [modalOpen, toggleModal] = useState(false);
   const { obligationSlug } = config;
   const { createPaymentFromProfile, setDetailedObligation } = actions;
   const detailsSlug =
@@ -20,46 +34,111 @@ const PaymentDetailsActions = ({ isMobile, obligations, config, actions }) => {
   };
   return (
     <Box
-      padding="16px 0 0"
+      padding={isMobile ? "0" : "16px 0 0"}
       minWidth="100%"
       borderSize="1px"
       borderColor={GHOST_GREY}
       borderWidthOverride="1px 0 0 0"
       key={`${obligations[0].id}-actions`}
     >
-      <Cluster
-        justify={isMobile ? "center" : "flex-end"}
-        align="center"
-        childGap="0"
-      >
+      {isMobile && (
         <Box
-          padding={isMobile ? "0 8px 0 0" : "8px"}
-          extraStyles={isMobile && `flex-grow: 1;`}
+          padding="16px 24px"
+          borderSize="1px"
+          borderColor={GHOST_GREY}
+          borderWidthOverride="0 0 1px 0"
         >
-          <ButtonWithAction
-            variant={isMobile ? "smallSecondary" : "secondary"}
-            text={
-              config.type === "ACCOUNT" ? "Account Details" : "Property Details"
-            }
-            action={handleDetailsClick}
-            dataQa="Account Details"
-            extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
-          />
+          <Cluster justify="space-between" align="center" nowrap>
+            <Box padding="0" width="100%">
+              <AmountModule
+                totalAmountDue={obligations.reduce(
+                  (acc, curr) => acc + curr.amountDue,
+                  0
+                )}
+                autoPayEnabled={autoPayEnabled}
+                isMobile={isMobile}
+                deactivatePaymentSchedule={deactivatePaymentSchedule}
+                navigateToSettings={navigateToSettings}
+                autoPaySchedule={autoPaySchedule}
+              />
+            </Box>
+            <Box padding="0" width="100%">
+              <ButtonWithAction
+                isLoading={isLoading}
+                action={() => handleClick(obligations)}
+                text="Pay Now"
+                variant={isMobile ? "smallSecondary" : "secondary"}
+                dataQa="Pay Now"
+                extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+              />
+            </Box>
+          </Cluster>
         </Box>
-        <Box
-          padding={isMobile ? "0 0 0 8px" : "8px"}
-          extraStyles={isMobile && `flex-grow: 1;`}
+      )}
+      <Box padding={isMobile ? "16px" : "0"}>
+        <Cluster
+          justify={isMobile ? "center" : "flex-end"}
+          align="center"
+          childGap="0"
         >
-          <ButtonWithAction
-            isLoading={isLoading}
-            action={() => handleClick(obligations)}
-            text="Make Payment"
-            variant={isMobile ? "smallPrimary" : "primary"}
-            dataQa="Make Payment"
-            extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
-          />
-        </Box>
-      </Cluster>
+          <Box
+            padding={isMobile ? "0 8px 0 0" : "8px"}
+            extraStyles={isMobile && `flex-grow: 1;`}
+          >
+            <ButtonWithAction
+              variant="tertiary"
+              text={
+                config.type === "ACCOUNT"
+                  ? "Account Details"
+                  : "Property Details"
+              }
+              action={handleDetailsClick}
+              dataQa="Account Details"
+              extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+            />
+          </Box>
+          <Box
+            padding={isMobile ? "0 8px 0 0" : "8px"}
+            extraStyles={isMobile && `flex-grow: 1;`}
+          >
+            {autoPayAvailable && !autoPayEnabled ? (
+              <ButtonWithAction
+                variant="tertiary"
+                text="Set Up Autopay"
+                action={handleAutopayAction}
+                dataQa="Set Up Autopay"
+                extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+              />
+            ) : (
+              <AutopayModalModule
+                autoPayActive={autoPayEnabled}
+                autoPaySchedule={autoPaySchedule}
+                toggleModal={toggleModal}
+                modalOpen={modalOpen}
+                navigateToSettings={navigateToSettings}
+                deactivatePaymentSchedule={deactivatePaymentSchedule}
+                buttonLinkType
+                isMobile={isMobile}
+              />
+            )}
+          </Box>
+          {!isMobile && (
+            <Box
+              padding={isMobile ? "0 0 0 8px" : "8px"}
+              extraStyles={isMobile && `flex-grow: 1;`}
+            >
+              <ButtonWithAction
+                isLoading={isLoading}
+                action={() => handleClick(obligations)}
+                text="Pay Now"
+                variant={isMobile ? "smallSecondary" : "secondary"}
+                dataQa="Pay Now"
+                extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+              />
+            </Box>
+          )}
+        </Cluster>
+      </Box>
     </Box>
   );
 };