diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.styles.ts b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.styles.ts index 83e2df65b7..dbc1ede5f7 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.styles.ts +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.styles.ts @@ -5,6 +5,7 @@ import { Schedule, Edit, Error as ErrorIcon, + PauseCircle, } from '@mui/icons-material'; import { Box, Typography, Divider } from '@mui/material'; @@ -55,6 +56,14 @@ export const StyledScheduleFailedIcon = styled(ErrorIcon)(({ theme }) => ({ width: '35px', marginRight: theme.spacing(1), })); + +export const StyledScheduleSuspendedIcon = styled(PauseCircle)(({ theme }) => ({ + color: theme.palette.text.secondary, + height: '35px', + width: '35px', + marginRight: theme.spacing(1), +})); + export const StyledEditIcon = styled(Edit)(({ theme }) => ({ color: theme.palette.text.secondary, height: '24px', diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx index 67e2d64b24..4480394af1 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx @@ -23,6 +23,7 @@ import { StyledScheduledBox, StyledErrorIcon, StyledScheduleFailedIcon, + StyledScheduleSuspendedIcon, } from './ChangeRequestReviewStatus.styles'; import { ChangeRequestState, @@ -260,7 +261,15 @@ const Scheduled = ({ schedule, onEditClick }: IScheduledProps) => { } - elseShow={} + elseShow={ + } + elseShow={ + + } + /> + } /> @@ -301,6 +310,39 @@ const ScheduledFailed = ({ ); }; +const ScheduledSuspended = ({ + schedule, +}: { schedule: IChangeRequestSchedule }) => { + const theme = useTheme(); + const timezone = getBrowserTimezone(); + const { locationSettings } = useLocationSettings(); + + if (!schedule?.scheduledAt) { + return null; + } + + const scheduledTime = formatDateYMDHMS( + new Date(schedule?.scheduledAt), + locationSettings?.locale, + ); + + return ( + + + + + The change request is suspended for the following reason:{' '} + {(schedule as unknown as { reason: string }).reason} + + + It will not be applied on {scheduledTime}. + + Your timezone is {timezone} + + + ); +}; + const ScheduledPending = ({ schedule, }: { schedule: IChangeRequestSchedule }) => {