@thecb/components 3.4.1 → 3.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "3.4.1",
+  "version": "3.5.1",
   "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/TimeoutImage.js

@@ -0,0 +1,138 @@
+import React from "react";
+
+const TimeoutImage = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 458 308"
+    >
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <g transform="translate(-492 -168)">
+          <g transform="translate(492 168)">
+            <path
+              fill="#EAF4EB"
+              d="M286.327 294.916c0 7.133-26.041 12.916-58.164 12.916-32.123 0-58.163-5.783-58.163-12.916S196.04 282 228.163 282s58.164 5.783 58.164 12.916"
+            ></path>
+            <g
+              stroke="#45B770"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="8.362"
+              transform="translate(204 268)"
+            >
+              <path d="M15.817 -2.13162821e-14L15.817 24.795 3.55271368e-15 24.795"></path>
+              <path d="M31.3102 -2.30926389e-14L31.3102 25.574 47.1272 25.574"></path>
+            </g>
+            <path
+              fill="#FEFEFE"
+              d="M107.968 73h239.721a6.969 6.969 0 016.969 6.968v178.398a6.969 6.969 0 01-6.969 6.968H107.968a6.968 6.968 0 01-6.968-6.968V79.968A6.968 6.968 0 01107.968 73"
+            ></path>
+            <path fill="#E4E6EB" d="M101 99L355 99 355 73 101 73z"></path>
+            <g
+              stroke="#3B414D"
+              strokeLinecap="round"
+              strokeWidth="5.575"
+              transform="translate(197.811 141.913)"
+            >
+              <path
+                strokeLinejoin="round"
+                d="M0 5.575C1.168 2.317 4.16 0 7.666 0c3.505 0 6.497 2.317 7.665 5.575"
+              ></path>
+              <path
+                strokeLinejoin="round"
+                d="M46 5.575C47.168 2.317 50.16 0 53.666 0c3.505 0 6.497 2.317 7.665 5.575"
+              ></path>
+              <path
+                d="M50.38 44.087h0a6.886 6.886 0 01-6.886 6.886h-26.42a6.886 6.886 0 01-6.885-6.886"
+                transform="matrix(1 0 0 -1 0 95.06)"
+              ></path>
+            </g>
+            <path
+              fill="#3B414D"
+              d="M124 83a3 3 0 110 6 3 3 0 010-6zm-10 0a3 3 0 110 6 3 3 0 010-6zm20 0a3 3 0 110 6 3 3 0 010-6z"
+            ></path>
+            <path
+              stroke="#45B770"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="8"
+              d="M99.441 205.181L77.181 224.512"
+            ></path>
+            <path
+              stroke="#45B770"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="8"
+              d="M412.8955 190.764648L381.126953 224.790039 356 205.267859"
+            ></path>
+            <path
+              stroke="#45B770"
+              strokeLinecap="round"
+              strokeWidth="8"
+              d="M396.5 189.5L429.5 189.5"
+            ></path>
+            <path
+              stroke="#45B770"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="8"
+              d="M137.079 231.103a7.605 7.605 0 000 15.211h6.644"
+            ></path>
+            <g transform="translate(377 63)">
+              <g>
+                <path
+                  fill="#FFF"
+                  d="M66.669 116.462H5.122a5.122 5.122 0 110-10.243h61.547a5.122 5.122 0 110 10.243"
+                ></path>
+                <path
+                  fill="#E4F4FD"
+                  d="M15.126 71.521l20.77-13.29 20.769 13.29a19.123 19.123 0 018.815 16.106v18.591H6.311v-18.59c0-6.52 3.323-12.592 8.815-16.107z"
+                ></path>
+                <path
+                  fill="#E4F4FD"
+                  d="M56.665 44.94l-20.77 13.292L15.126 44.94a19.12 19.12 0 01-8.815-16.106V10.244H65.48v18.59a19.12 19.12 0 01-8.815 16.107z"
+                ></path>
+                <path
+                  fill="#FFF"
+                  d="M66.669 10.244H5.122A5.122 5.122 0 115.122 0h61.547a5.122 5.122 0 110 10.244z"
+                ></path>
+              </g>
+              <g stroke="#3B414D" strokeLinecap="round" strokeWidth="6">
+                <path d="M66.669 116.462H5.122a5.122 5.122 0 110-10.243h61.547a5.122 5.122 0 110 10.243z"></path>
+                <path d="M15.126 71.521l20.77-13.29 20.769 13.29a19.123 19.123 0 018.815 16.106v18.591H6.311v-18.59c0-6.52 3.323-12.592 8.815-16.107z"></path>
+                <path d="M56.665 44.94l-20.77 13.292L15.126 44.94a19.12 19.12 0 01-8.815-16.106V10.244H65.48v18.59a19.12 19.12 0 01-8.815 16.107z"></path>
+                <path d="M66.669 10.244H5.122A5.122 5.122 0 115.122 0h61.547a5.122 5.122 0 110 10.244z"></path>
+              </g>
+            </g>
+            <path
+              stroke="#3B414D"
+              strokeLinecap="round"
+              strokeWidth="8"
+              d="M27.663 247.376l-15.18.348M401 248l-44.96-.276m-256.445-.348l-52.372.348M454 248h-34"
+            ></path>
+            <path
+              stroke="#3B414D"
+              strokeWidth="6"
+              d="M107.969 73H347.69a6.969 6.969 0 016.968 6.969v178.397a6.968 6.968 0 01-6.968 6.968H107.969a6.969 6.969 0 01-6.969-6.968V79.969A6.969 6.969 0 01107.969 73zM104 99h248"
+            ></path>
+            <path
+              stroke="#45B770"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="8"
+              d="M77.181 224.512L127.905 236.375"
+            ></path>
+            <path
+              fill="#B8E4F4"
+              d="M95.74 141.218c5.753 0 10.652 3.602 12.599 8.67a5.733 5.733 0 016.092 1.987 8.512 8.512 0 013.505-.757 8.557 8.557 0 110 17.114H81.002a8.557 8.557 0 111.69-16.945c1.523-5.792 6.78-10.069 13.049-10.069zM365.823 82c9.17 0 16.7 7.01 17.532 15.963a10.567 10.567 0 016.175-1.99c5.868 0 10.625 4.757 10.625 10.625 0 5.869-4.757 10.625-10.625 10.625h-48.094c-6.868 0-12.435-5.566-12.435-12.434 0-6.868 5.567-12.435 12.435-12.435 2.791 0 5.36.931 7.435 2.484C350.952 87.432 357.75 82 365.822 82zM23.296 75.456c5.752 0 10.651 3.602 12.598 8.669a5.733 5.733 0 011.559-.22c1.84 0 3.476.866 4.532 2.208a8.52 8.52 0 013.506-.757 8.557 8.557 0 110 17.114H8.557a8.557 8.557 0 111.69-16.945c1.523-5.792 6.78-10.07 13.049-10.07zM170.219 8.845c10.946 0 19.935 8.367 20.927 19.054a12.618 12.618 0 017.372-2.375c7.004 0 12.683 5.679 12.683 12.684 0 7.004-5.68 12.683-12.683 12.683h-57.41c-8.197 0-14.843-6.646-14.843-14.844 0-8.197 6.646-14.843 14.843-14.843 3.333 0 6.398 1.112 8.876 2.966 2.485-8.841 10.599-15.325 20.235-15.325zM297.892 0c5.752 0 10.651 3.602 12.598 8.669a5.728 5.728 0 011.56-.219c1.84 0 3.475.865 4.531 2.207a8.516 8.516 0 013.506-.757 8.557 8.557 0 110 17.114h-36.935a8.557 8.557 0 01-8.556-8.557 8.557 8.557 0 0110.248-8.388C286.366 4.277 291.622 0 297.892 0z"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default TimeoutImage;

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,8 @@ import BankIcon from "./BankIcon";
 import GenericCard from "./GenericCard";
 import PaymentIcon from "./PaymentIcon";
 import IconAdd from "./IconAdd";
+import TimeoutImage from "./TimeoutImage";
+import AutopayOnIcon from "./AutopayOnIcon";
 
 export {
   AccountsIcon,
@@ -39,5 +41,7 @@ export {
   BankIcon,
   GenericCard,
   PaymentIcon,
-  IconAdd
+  IconAdd,
+  TimeoutImage,
+  AutopayOnIcon
 };

package/src/components/molecules/index.js

@@ -26,4 +26,5 @@ export { default as ResetPasswordSuccess } from "./reset-password-success";
 export { default as TabSidebar } from "./tab-sidebar";
 export { default as TermsAndConditions } from "./terms-and-conditions";
 export { default as TermsAndConditionsModal } from "./terms-and-conditions-modal";
+export { default as Timeout } from "./timeout";
 export { default as WorkflowTile } from "./workflow-tile";

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; cursor: pointer; }
+  }`;
+
+  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
+};