diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.styles.ts b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.styles.ts
index 83e2df65b7..66eabbde0e 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,16 @@ 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 efa6b8be4a..a02c93ed6c 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx
@@ -23,12 +23,15 @@ import {
StyledScheduledBox,
StyledErrorIcon,
StyledScheduleFailedIcon,
+ StyledScheduleSuspendedIcon,
} from './ChangeRequestReviewStatus.styles';
import {
ChangeRequestState,
ChangeRequestType,
ChangeRequestSchedule,
ChangeRequestScheduleFailed,
+ ChangeRequestSchedulePending,
+ ChangeRequestScheduleSuspended,
} from 'component/changeRequest/changeRequest.types';
import { getBrowserTimezone } from './utils';
import { ConditionallyRender } from '../../../common/ConditionallyRender/ConditionallyRender';
@@ -236,10 +239,23 @@ interface IScheduledProps {
const Scheduled = ({ schedule, onEditClick }: IScheduledProps) => {
const theme = useTheme();
- if (!schedule?.scheduledAt) {
+ if (!schedule) {
return null;
}
+ const scheduleStatusBox = (() => {
+ switch (schedule.status) {
+ case 'pending':
+ return ;
+ case 'failed':
+ return ;
+ case 'suspended':
+ return ;
+ default:
+ return null;
+ }
+ })();
+
return (
<>
@@ -257,16 +273,7 @@ const Scheduled = ({ schedule, onEditClick }: IScheduledProps) => {
- }
- elseShow={
-
- }
- />
-
+ {scheduleStatusBox}
@@ -282,10 +289,6 @@ const ScheduledFailed = ({
const timezone = getBrowserTimezone();
const { locationSettings } = useLocationSettings();
- if (!schedule?.scheduledAt) {
- return null;
- }
-
const scheduledTime = formatDateYMDHMS(
new Date(schedule?.scheduledAt),
locationSettings?.locale,
@@ -304,17 +307,41 @@ const ScheduledFailed = ({
);
};
-
-const ScheduledPending = ({
+const ScheduledSuspended = ({
schedule,
-}: { schedule: ChangeRequestSchedule }) => {
+}: { schedule: ChangeRequestScheduleSuspended }) => {
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.reason}
+
+
+ It will not be applied on {scheduledTime}.
+
+ Your timezone is {timezone}
+
+
+ );
+};
+
+const ScheduledPending = ({
+ schedule,
+}: { schedule: ChangeRequestSchedulePending }) => {
+ const theme = useTheme();
+ const timezone = getBrowserTimezone();
+ const { locationSettings } = useLocationSettings();
const scheduledTime = formatDateYMDHMS(
new Date(schedule?.scheduledAt),