@thecb/components 10.12.6-beta.0 → 11.0.0-beta.0

package/src/components/molecules/idle-modal/IdleModal.js

@@ -0,0 +1,101 @@
+import React from "react";
+import Modal from "../modal";
+import { Box, Motion, Stack } from "../../atoms/layouts";
+import Paragraph from "../../atoms/paragraph";
+
+const IdleModal = ({
+  modalOpen,
+  toggleModal,
+  timeLeftToLogout = 0,
+  totalLogoutTime = 30,
+  logout,
+  cancelLogout,
+  useCheckoutContent
+}) => {
+  const percent =
+    (totalLogoutTime - timeLeftToLogout) * (100 / totalLogoutTime);
+  const transition = {
+    ease: "easeInOut",
+    duration: totalLogoutTime
+  };
+  const variants = {
+    enter: {
+      x: "-100%",
+      backgroundColor: "#317D4F"
+    },
+    animate: {
+      x: ["-100%", `${percent}%`],
+      backgroundColor: ["#317D4F", "#93A441", "#F4CB32", "#E36E43", "#D11053"],
+      times: [0, 0.4, 0.5, 0.6, 0.8],
+      transition
+    }
+  };
+
+  const continueText = useCheckoutContent ? "Continue" : "Stay Logged In";
+
+  const cancelText = useCheckoutContent ? "End Session" : "Log Off";
+
+  const paragraphText = useCheckoutContent
+    ? `Are you still there? Your payment will be cancelled in ${timeLeftToLogout} seconds.`
+    : `Are you still there? For your security, you will be logged out in ${timeLeftToLogout} seconds.`;
+
+  const modalBody = (
+    <Box padding="0">
+      <Stack>
+        <Paragraph>{paragraphText}</Paragraph>
+        <Motion>
+          <Box
+            padding="0 0 1px 0"
+            minHeight="10px"
+            width="100%"
+            borderRadius="6px"
+            extraStyles="position: relative; overflow: hidden;"
+          >
+            <Motion
+              padding="0 0 1px 0"
+              height="10px"
+              width="100%"
+              borderRadius="6px"
+              extraStyles="position: absolute;"
+              variants={variants}
+              initial="enter"
+              animate={modalOpen ? "animate" : "enter"}
+              exit="enter"
+            />
+          </Box>
+        </Motion>
+      </Stack>
+    </Box>
+  );
+  const modalExtraProps = {
+    modalHeaderText: "Your session is about to expire!",
+    modalBodyText: modalBody,
+    continueButtonText: continueText,
+    cancelButtonText: cancelText,
+    continueAction: () => {
+      cancelLogout();
+      toggleModal(false);
+    },
+    cancelAction: () => {
+      logout();
+      toggleModal(false);
+    }
+  };
+  return (
+    <Modal
+      showModal={() => toggleModal(true)}
+      hideModal={() => {
+        cancelLogout();
+        toggleModal(false);
+      }}
+      modalOpen={modalOpen}
+      defaultWrapper={false}
+      underlayClickExits={false}
+      {...modalExtraProps}
+    >
+      <Box padding="0" />
+    </Modal>
+  );
+};
+
+export default IdleModal;

package/src/components/molecules/idle-modal/IdleModal.mdx

@@ -0,0 +1,17 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as IdleModalStories from './IdleModal.stories.js';
+
+<Meta of={IdleModalStories} />
+
+<Title />
+
+The IdleModal is a molecule used to display an animated progress bar and a message informing a user that they will shortly be logged out of an application due to idleness. The modal is a "dumb" component that requires the countdown timer be managed in the parent component. CB Components has a useful react hook contained in the `idleTimerUtils.js` file that NFE uses to help manage the running of the IdleModal.
+
+For detecting user inactivity, an application can either implement its own mouse/keyboard event tracking, or rely on a third party package like react-idle-timer. An implementation example is available in the component's story file.
+
+As of August 2024, all three of the applications (NFE, RevM, POS) to use the IdleModal use customized versions that live within the application code. A backlog ticket has been created to unify all existing implementations to the CB Components standard.
+
+<Controls />
+
+<Story />

package/src/components/molecules/idle-modal/IdleModal.stories.js

@@ -0,0 +1,180 @@
+import React, { useState } from "react";
+import IdleModal from "./IdleModal";
+import { fn } from "@storybook/test";
+import { ButtonWithAction } from "../../atoms";
+import { Box, Stack } from "../../atoms/layouts";
+import Text from "../../atoms/text";
+import useLogoutTimers from "../../../util/idleTimerUtils";
+
+export default {
+  title: "Molecules/IdleModal",
+  component: IdleModal,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  args: {
+    modalOpen: undefined,
+    toggleModal: fn(),
+    timeLeftToLogout: 0,
+    totalLogoutTime: 30,
+    logout: fn(),
+    cancelLogout: fn(),
+    useCheckoutContent: undefined
+  },
+  argTypes: {
+    modalOpen: {
+      description: "Whether the modal is open",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    toggleModal: {
+      description: "Function to toggle the modal open or closed",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    timeLeftToLogout: {
+      description:
+        "Amount of time remaining before logout function is called. Should be supplied by parent component using setInterval or other mechanism to decrement a counter.",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: 0 }
+      }
+    },
+    totalLogoutTime: {
+      description:
+        "Total amount of time before logout function is called. Used with timeLeftToLogout in order to animate the progress bar.",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: 30 }
+      }
+    },
+    logout: {
+      description:
+        "Function to run when timer reaches zero. Typically a redux action dispatcher, but can be a wrapping function that handles the logout sequence itself.",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    cancelLogout: {
+      description:
+        "Function to run if user closes or cancels modal early. Typically a redux action dispatcher, but can be a wrapping function.",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    useCheckoutContent: {
+      description:
+        "Whether text of modal should reference checkout experience / user's payment.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+const IdleModalComponent = args => {
+  const { totalLogoutTime, ...rest } = args;
+  const [modalOpen, setModalOpen] = useState(false);
+  const [logoutTriggered, setLogoutTriggered] = useState(false);
+  const [cancelLogoutTriggered, setCancelLogoutTriggered] = useState(false);
+  const [timeLeftToLogout, setTimeLeftToLogout] = useState(totalLogoutTime);
+  const [logoutTimerOn, setLogoutTimerOn] = useState(false);
+
+  const runIdleModal = () => {
+    setLogoutTriggered(false);
+    setCancelLogoutTriggered(false);
+    setModalOpen(true);
+    setLogoutTimerOn(true);
+  };
+
+  const resetLogoutTimer = () => {
+    clearInterval(logoutTimers.interval);
+    clearTimeout(logoutTimers.timer);
+    setTimeLeftToLogout(totalLogoutTime);
+  };
+
+  const handleLogout = () => {
+    setModalOpen(false);
+    setLogoutTriggered(true);
+    setLogoutTimerOn(false);
+    resetLogoutTimer();
+  };
+
+  const handleCancelLogout = () => {
+    setModalOpen(false);
+    setCancelLogoutTriggered(true);
+    setLogoutTimerOn(false);
+    resetLogoutTimer();
+  };
+
+  const logoutTimers = useLogoutTimers({
+    logoutTimerOn,
+    action: handleLogout,
+    timeLeftToLogout,
+    handleSetTimeLeft: setTimeLeftToLogout,
+    initialTimeLeftToLogout: totalLogoutTime
+  });
+
+  let userStatus = "is logged in";
+
+  if (logoutTriggered) {
+    userStatus = "has logged out";
+  }
+  if (cancelLogoutTriggered) {
+    userStatus = "has cancelled log out";
+  }
+
+  return (
+    <Box>
+      <Stack childGap="10rem">
+        <Box>
+          <Text>{`User Status: ${userStatus}`}</Text>
+        </Box>
+        <Box>
+          <ButtonWithAction
+            action={() => runIdleModal()}
+            text="Trigger Idle Modal"
+          />
+        </Box>
+        <Box>
+          <IdleModal
+            {...rest}
+            totalLogoutTime={totalLogoutTime}
+            timeLeftToLogout={timeLeftToLogout}
+            modalOpen={modalOpen}
+            toggleModal={() => setModalOpen(!modalOpen)}
+            logout={() => handleLogout()}
+            cancelLogout={() => handleCancelLogout()}
+          />
+        </Box>
+      </Stack>
+    </Box>
+  );
+};
+
+export const BasicIdleModal = {
+  render: args => IdleModalComponent(args)
+};
+
+export const CheckoutIdleModal = {
+  args: {
+    useCheckoutContent: true
+  },
+  render: args => IdleModalComponent(args)
+};
+
+export const LengthyIdleModal = {
+  args: {
+    totalLogoutTime: 300
+  },
+  render: args => IdleModalComponent(args)
+};

package/src/components/molecules/idle-modal/index.d.ts

@@ -0,0 +1,16 @@
+import React, { HTMLAttributes } from "react";
+import Expand from "../../../util/expand";
+import { ReduxAction } from "../../../types/common";
+
+export interface IdleModalProps {
+  modalOpen: boolean;
+  toggleModal: (modalOpen: boolean) => void;
+  timeLeftToLogout?: number; // in seconds
+  totalLogoutTime?: number; // in seconds
+  logout: () => ReduxAction;
+  cancelLogout: () => ReduxAction;
+  useCheckoutContent?: boolean;
+}
+
+export const IdleModal: React.FC<Expand<IdleModalProps> &
+  HTMLAttributes<HTMLElement>>;

package/src/components/molecules/idle-modal/index.js

@@ -0,0 +1,3 @@
+import IdleModal from "./IdleModal";
+
+export default IdleModal;

package/src/components/molecules/index.js

@@ -10,6 +10,7 @@ export { default as EmailForm } from "./email-form";
 export { default as FooterWithSubfooter } from "./footer-with-subfooter";
 export { default as ForgotPasswordForm } from "./forgot-password-form";
 export { default as HighlightTabRow } from "./highlight-tab-row";
+export { default as IdleModal } from "./idle-modal";
 export { iconsMap as ObligationIcons } from "./obligation/icons";
 export { default as LinkCard } from "./link-card";
 export { default as LoginForm } from "./login-form";

package/src/components/molecules/link-card/LinkCard.mdx

@@ -0,0 +1,17 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as LinkCardStories from './LinkCard.stories.js';
+
+<Meta of={LinkCardStories} />
+
+<Title />
+
+The LinkCard is a variant of the Card component that has been built to display a title, subtitle, and optionally additional content like a badge or icon. When clicked, the onClick function is called. Typically this function is used to navigate the user within the application.
+
+Currently, the LinkCard is used in NFE on the /find page to assist users in finding accounts to link to their profile or to make one-time payments on. The LinkCard can take arbitrary child components for both its left and right content, which makes it very flexible and useful for any application where a grid of tiles is needed.
+
+<Controls />
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>