Merge pull request #447 from act-org/E4E-1115

Add custom props to DialogContinueSession and utilize them in SessionTimer
act-org · Aug 7, 2024 · dc1e851 · dc1e851
2 parents d3fbacf + 8e55db9
commit dc1e851
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 11 deletions.
diff --git a/src/components/DialogContinueSession/index.stories.tsx b/src/components/DialogContinueSession/index.stories.tsx
@@ -58,9 +58,12 @@ export default {
   },
   argTypes: Playground(
     {
+      cancellationText: { type: 'string' },
+      confirmationText: { type: 'string' },
       expiresAt: { type: 'Date' },
       onContinue: { action: 'onContinue' },
       onExpire: { action: 'onExpire' },
+      title: { type: 'string' },
     },
     DialogContinueSession,
   ),

diff --git a/src/components/DialogContinueSession/index.tsx b/src/components/DialogContinueSession/index.tsx
@@ -9,26 +9,49 @@
 
 import {
   Button,
+  ButtonProps,
   Dialog,
   DialogContent,
+  DialogContentProps,
   DialogTitle,
+  DialogTitleProps,
   Typography,
 } from '@mui/material';
 import moment from 'moment';
-import { FC, ReactElement, useEffect, useState } from 'react';
+import { FC, ReactElement, ReactNode, useEffect, useState } from 'react';
+
+import { DialogProps } from '../Dialog';
 
 import { StyledDialogActions } from './styles';
 
 export interface DialogContinueSessionProps {
+  confirmationButtonProps?: ButtonProps;
+  confirmationText?: ReactNode;
+  cancellationButtonProps?: ButtonProps;
+  cancellationText?: ReactNode;
+  content?: ReactNode | null;
+  contentProps?: DialogContentProps;
+  dialogProps?: Omit<DialogProps, 'open'>;
+  title?: ReactNode;
+  titleProps?: DialogTitleProps;
   expiresAt: Date;
   onContinue: () => void;
   onExpire: () => void;
 }
 
 export const DialogContinueSession: FC<DialogContinueSessionProps> = ({
+  confirmationButtonProps,
+  confirmationText = 'Continue Session',
+  cancellationButtonProps,
+  cancellationText,
+  content,
+  contentProps,
+  dialogProps,
   expiresAt,
   onContinue,
   onExpire,
+  title = 'Do you want to continue your session?',
+  titleProps,
 }: DialogContinueSessionProps): ReactElement<unknown> | null => {
   const [timeUntilExpiration, setTimeUntilExpiration] = useState<number>(
     expiresAt.getTime() - Date.now(),
@@ -58,29 +81,47 @@ export const DialogContinueSession: FC<DialogContinueSessionProps> = ({
         fullWidth
         maxWidth="xs"
         open
+        {...dialogProps}
       >
-        <DialogTitle id="dialog-continue-session-title">
-          Do you want to continue your session?
+        <DialogTitle id="dialog-continue-session-title" {...titleProps}>
+          {title}
         </DialogTitle>
 
-        <DialogContent>
-          <Typography variant="body1">
-            {`For security reasons, your session will timeout at ${moment(
-              expiresAt,
-            ).format('h:mm A')} unless you continue.`}
-          </Typography>
+        <DialogContent {...contentProps}>
+          {content || (
+            <Typography variant="body1">
+              {`For security reasons, your session will timeout at ${moment(
+                expiresAt,
+              ).format('h:mm A')} unless you continue.`}
+            </Typography>
+          )}
         </DialogContent>
 
         <StyledDialogActions>
+          {cancellationText && (
+            <Button
+              color="primary"
+              fullWidth
+              onClick={(): void => {
+                onExpire();
+              }}
+              variant="contained"
+              {...cancellationButtonProps}
+            >
+              {cancellationText}
+            </Button>
+          )}
+
           <Button
             color="primary"
             fullWidth
             onClick={(): void => {
               onContinue();
             }}
             variant="contained"
+            {...confirmationButtonProps}
           >
-            Continue Session
+            {confirmationText}
           </Button>
         </StyledDialogActions>
       </Dialog>

diff --git a/src/components/SessionTimer/index.tsx b/src/components/SessionTimer/index.tsx
@@ -7,12 +7,19 @@
  * @prettier
  */
 
+import {
+  ButtonProps,
+  DialogContentProps,
+  DialogTitleProps,
+} from '@mui/material';
 import { noop } from 'lodash';
-import { FC, ReactElement, useEffect, useState } from 'react';
+import { FC, ReactElement, ReactNode, useEffect, useState } from 'react';
 
 import DialogContinueSession from '~/components/DialogContinueSession';
 import IdleTimer from '~/components/IdleTimer';
 
+import { DialogProps } from '../Dialog';
+
 export interface SessionTimerProps {
   children?: ({
     remainingTimeStageOne,
@@ -21,6 +28,17 @@ export interface SessionTimerProps {
     remainingTimeStageOne: number;
     remainingTimeStageTwo: number;
   }) => ReactElement<unknown> | null;
+  dialogContinueSessionProps?: {
+    confirmationButtonProps?: ButtonProps;
+    confirmationText?: ReactNode;
+    cancellationButtonProps?: ButtonProps;
+    cancellationText?: ReactNode;
+    content?: ReactNode | null;
+    contentProps?: DialogContentProps;
+    dialogProps?: Omit<DialogProps, 'open'>;
+    title?: ReactNode;
+    titleProps?: DialogTitleProps;
+  };
   expiresAt: Date;
   onExpire: () => void;
   onKeepAlive: () => void;
@@ -30,6 +48,7 @@ export interface SessionTimerProps {
 
 export const SessionTimer: FC<SessionTimerProps> = ({
   children,
+  dialogContinueSessionProps,
   expiresAt,
   onExpire,
   onKeepAlive,
@@ -113,6 +132,7 @@ export const SessionTimer: FC<SessionTimerProps> = ({
                           reset();
                         }}
                         onExpire={onExpire}
+                        {...dialogContinueSessionProps}
                       />
 
                       {children &&