Wip: hack together review status

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',

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) => {
                 <ConditionallyRender
                     condition={schedule?.status === 'pending'}
                     show={<ScheduledPending schedule={schedule} />}
-                    elseShow={<ScheduledFailed schedule={schedule} />}
+                    elseShow={
+                        <ConditionallyRender
+                            condition={schedule?.status === 'failed'}
+                            show={<ScheduledFailed schedule={schedule} />}
+                            elseShow={
+                                <ScheduledSuspended schedule={schedule} />
+                            }
+                        />
+                    }
                 />
 
                 <StyledIconButton onClick={onEditClick}>
@@ -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 (
+        <StyledFlexAlignCenterBox>
+            <StyledScheduleSuspendedIcon />
+            <Box>
+                <StyledReviewTitle color={theme.palette.text.secondary}>
+                    The change request is suspended for the following reason:{' '}
+                    {(schedule as unknown as { reason: string }).reason}
+                </StyledReviewTitle>
+                <StyledReviewTitle color={theme.palette.text.secondary}>
+                    It will not be applied on {scheduledTime}.
+                </StyledReviewTitle>
+                <Typography>Your timezone is {timezone}</Typography>
+            </Box>
+        </StyledFlexAlignCenterBox>
+    );
+};
+
 const ScheduledPending = ({
     schedule,
 }: { schedule: IChangeRequestSchedule }) => {