feat: [IOCOM-2654] No alert on AAR timeline

ts/features/pn/components/MessageBottomMenu.tsx

@@ -30,6 +30,7 @@ const styles = StyleSheet.create({
 
 export type MessageBottomMenuProps = {
   history: NotificationStatusHistory;
+  isAARMessage: boolean;
   isCancelled?: boolean;
   iun: string;
   messageId: string;
@@ -133,6 +134,7 @@ const generateMessageSectionData = (
 export const MessageBottomMenu = ({
   history,
   isCancelled,
+  isAARMessage,
   iun,
   messageId,
   paidNoticeCodes,
@@ -162,7 +164,7 @@ export const MessageBottomMenu = ({
         { backgroundColor: IOColors[theme["appBackground-secondary"]] }
       ]}
     >
-      <TimelineListItem history={history} />
+      <TimelineListItem hideFooter={isAARMessage} history={history} />
       {(serviceMetadata?.email || serviceMetadata?.phone) && (
         <ContactsListItem
           email={serviceMetadata.email}

ts/features/pn/components/MessageDetails.tsx

@@ -132,6 +132,7 @@ export const MessageDetails = ({
         </ContentWrapper>
         <MessageBottomMenu
           history={message.notificationStatusHistory}
+          isAARMessage={isAARMessage}
           isCancelled={message.isCancelled}
           iun={message.iun}
           messageId={messageId}

ts/features/pn/components/TimelineListItem.tsx

@@ -20,10 +20,13 @@ import { pnFrontendUrlSelector } from "../../../store/reducers/backendStatus/rem
 import { Timeline, TimelineItemProps } from "./Timeline";
 
 const topBottomSheetMargin = 122;
-const timelineBottomMargin = 292;
+const baseFooterHeightWithAlert = 181;
+const timelineBottomMarginWithAlert = 288;
+const timelineBottomMarginWithoutAlert = 128;
 const timelineItemHeight = 70;
 
 export type TimelineListItemProps = {
+  hideFooter: boolean;
   history: NotificationStatusHistory;
 };
 
@@ -41,8 +44,16 @@ const generateTimelineData = (
     status: notificationStatusToTimelineStatus(historyItem.status)
   }));
 
-export const TimelineListItem = ({ history }: TimelineListItemProps) => {
-  const [footerHeight, setFooterHeight] = useState<number>(181);
+export const TimelineListItem = ({
+  hideFooter,
+  history
+}: TimelineListItemProps) => {
+  const baseFooterHeight = hideFooter ? 0 : baseFooterHeightWithAlert;
+  const [footerHeight, setFooterHeight] = useState<number>(baseFooterHeight);
+
+  const timelineBottomMargin = hideFooter
+    ? timelineBottomMarginWithoutAlert
+    : timelineBottomMarginWithAlert;
   const windowHeight = Dimensions.get("window").height;
   const snapPoint = Math.min(
     windowHeight - topBottomSheetMargin,
@@ -53,7 +64,7 @@ export const TimelineListItem = ({ history }: TimelineListItemProps) => {
   const { bottomSheet, present } = useIOBottomSheetModal({
     component: <Timeline data={timelineData} footerHeight={footerHeight} />,
     title: I18n.t("features.pn.details.timeline.menuTitle"),
-    footer: (
+    footer: !hideFooter ? (
       <View
         onLayout={layoutChangeEvent =>
           setFooterHeight(layoutChangeEvent.nativeEvent.layout.height)
@@ -76,6 +87,8 @@ export const TimelineListItem = ({ history }: TimelineListItemProps) => {
           }}
         />
       </View>
+    ) : (
+      <View />
     ),
     snapPoint: [snapPoint]
   });

ts/features/pn/components/__mocks__/MessageBottomMenu.tsx

@@ -3,6 +3,7 @@ import { MessageBottomMenuProps } from "../MessageBottomMenu";
 
 export const MessageBottomMenu = ({
   history,
+  isAARMessage,
   isCancelled,
   iun,
   messageId,
@@ -26,7 +27,8 @@ export const MessageBottomMenu = ({
         <View>{`${pieceOfHistory.status}`}</View>
       </View>
     ))}
-    {isCancelled && <View>{isCancelled}</View>}
+    {isAARMessage && <View>{`${isAARMessage}`}</View>}
+    {isCancelled && <View>{`${isCancelled}`}</View>}
     <View>{iun}</View>
     <View>{messageId}</View>
     {paidNoticeCodes &&

ts/features/pn/components/__mocks__/TimelineListItem.tsx

@@ -1,7 +1,10 @@
 import { View } from "react-native";
 import { TimelineListItemProps } from "../TimelineListItem";
 
-export const TimelineListItem = ({ history }: TimelineListItemProps) => (
+export const TimelineListItem = ({
+  hideFooter,
+  history
+}: TimelineListItemProps) => (
   <>
     {history.map((pieceOfHistory, index) => (
       <View key={`poh_${index}`}>
@@ -17,5 +20,6 @@ export const TimelineListItem = ({ history }: TimelineListItemProps) => (
         <View>{pieceOfHistory.status}</View>
       </View>
     ))}
+    <View>{`${hideFooter}`}</View>
   </>
 );