NTP-59613 | Bottomsheet to view ETA RCA (#1163)

src/screens/Dashboard/AnomalyTracker/AnomlayTracker.tsx

@@ -13,9 +13,11 @@ interface IAnomalyTracker {}
 const AnomalyTracker: React.FC<IAnomalyTracker> = (props: IAnomalyTracker) => {
   const [currentTab, setCurrentTab] = useState<string>(AnomalyType.OPEN);
   const dispatch = useAppDispatch();
+
   useEffect(() => {
     dispatch(getAnomalyDetails(AnomalyType.OPEN, {}, true));
-  });
+  }, []);
+
   const handleTabChange = (tab: string) => {
     if (tab === currentTab) return;
     if (tab === AnomalyType.OPEN) {

src/screens/Dashboard/AnomalyTracker/BottomsheetHeader.tsx

@@ -0,0 +1,51 @@
+import { COLORS } from '@rn-ui-lib/colors';
+import { GenericStyles } from '@rn-ui-lib/styles';
+import React from 'react';
+import { View, StyleSheet, Pressable } from 'react-native';
+import Heading from '@rn-ui-lib/components/Heading';
+import CloseIcon from '@rn-ui-lib/icons/CloseIcon';
+import UpdateIcon from '@assets/icons/UpdateIcon';
+
+interface IBottomsheetHeaderProps {
+  title: string;
+  handleClose: () => void;
+}
+const BottomsheetHeader = (props: IBottomsheetHeaderProps) => {
+  const { title, handleClose } = props;
+  return (
+    <View
+      style={[
+        GenericStyles.row,
+        GenericStyles.spaceBetween,
+        GenericStyles.alignCenter,
+        GenericStyles.ph16,
+      ]}
+    >
+      <View style={[styles.title, styles.gap8]}>
+        <Heading dark type="h3">
+          View {title}
+        </Heading>
+        <Pressable
+          onPress={() => {}} //TODO - Redirect toRCA ETA form
+          style={[styles.title, styles.gap4]}
+        >
+          <UpdateIcon />
+          <Heading dark type="h5" style={styles.buttonLabel}>
+            Update
+          </Heading>
+        </Pressable>
+      </View>
+      <Pressable onPress={handleClose}>
+        <CloseIcon color={COLORS.TEXT.LIGHT} />
+      </Pressable>
+    </View>
+  );
+};
+const styles = StyleSheet.create({
+  title: { display: 'flex', flexDirection: 'row', alignItems: 'center' },
+  gap4: { gap: 4 },
+  gap8: { gap: 8 },
+  buttonLabel: { color: COLORS.TEXT.BLUE, fontWeight: '600', fontSize: 13 },
+});
+
+export default BottomsheetHeader;

src/screens/Dashboard/AnomalyTracker/RcaEtaQuestionRenderer.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import Text from '@rn-ui-lib/components/Text';
+import { COLORS } from '@rn-ui-lib/colors';
+const RcaEtaQuestionRenderer = (props: { questionText: string; answerText: string }) => {
+  const { questionText, answerText } = props;
+  return (
+    <View style={styles.container}>
+      <Text style={styles.questionText}>{questionText}</Text>
+      <Text style={styles.answerText} dark>
+        {answerText ? answerText : '--'}
+      </Text>
+    </View>
+  );
+};
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 10,
+    flexDirection: 'row',
+  },
+  questionText: {
+    color: COLORS.TEXT.BLACK,
+    fontSize: 12,
+    width: 100,
+  },
+  answerText: {
+    fontSize: 14,
+    flex: 1,
+    wordBreak: 'break-word',
+    wordWrap: 'break-word',
+  },
+});
+export default RcaEtaQuestionRenderer;

src/screens/Dashboard/AnomalyTracker/ViewRcaEtaDetails.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import RcaEtaQuestionRenderer from './RcaEtaQuestionRenderer';
+import dayjs from 'dayjs';
+import { BUSINESS_DATE_FORMAT } from '@rn-ui-lib/utils/dates';
+import { useAppSelector } from '@hooks';
+import { GenericStyles } from '@rn-ui-lib/styles';
+import { DATE_TIME_FORMAT, RCA_ETA_FORM_QUESTIONS } from './constants';
+
+const ViewRcaEtaDetails = (props: { showETABottomSheet: boolean }) => {
+  const { showETABottomSheet } = props;
+  const anomalyDetails = useAppSelector((state) => state?.anomalyTracker?.anomalyDetails?.data);
+  const { estimatedTime } = anomalyDetails || {};
+  const rcaDetails = useAppSelector((state) => state?.anomalyTracker?.acitvityLogs?.data); //To do same for eta after backend changes
+  const { details, type } = rcaDetails?.[0] || {};
+
+  if (showETABottomSheet)
+    return (
+      <View style={[GenericStyles.mh16, styles.mv24]}>
+        <RcaEtaQuestionRenderer questionText={RCA_ETA_FORM_QUESTIONS.FILLED_BY} answerText={''} />
+        <RcaEtaQuestionRenderer
+          questionText={RCA_ETA_FORM_QUESTIONS.DATE}
+          answerText={dayjs(estimatedTime?.at)?.format(BUSINESS_DATE_FORMAT)}
+        />
+        <RcaEtaQuestionRenderer
+          questionText={RCA_ETA_FORM_QUESTIONS.REASON}
+          answerText={estimatedTime?.reason}
+        />
+      </View>
+    );
+
+  return (
+    <View style={[GenericStyles.mh16, styles.mv24]}>
+      <RcaEtaQuestionRenderer
+        questionText={RCA_ETA_FORM_QUESTIONS.FILLED_BY}
+        answerText={details?.name}
+      />
+      <RcaEtaQuestionRenderer
+        questionText={RCA_ETA_FORM_QUESTIONS.DATE_TIME}
+        answerText={dayjs(details?.at).format(DATE_TIME_FORMAT)}
+      />
+      <RcaEtaQuestionRenderer
+        questionText={RCA_ETA_FORM_QUESTIONS.TYPE}
+        answerText={details?.type}
+      />
+      <RcaEtaQuestionRenderer
+        questionText={RCA_ETA_FORM_QUESTIONS.COMMENTS}
+        answerText={details?.comment}
+      />
+    </View>
+  );
+};
+const styles = StyleSheet.create({
+  mv24: { paddingVertical: 24 },
+});
+
+export default ViewRcaEtaDetails;

src/screens/Dashboard/AnomalyTracker/constants.ts

@@ -29,3 +29,14 @@ export const AnomalyCardHeaderColor = {
   P1: COLORS.BACKGROUND.ORANGE,
   P2: COLORS.BACKGROUND.YELLOW_LIGHT,
 };
+
+export const DATE_TIME_FORMAT = 'D MMM, YYYY | h:mm A';
+
+export const RCA_ETA_FORM_QUESTIONS = {
+  FILLED_BY: 'Filled by',
+  DATE_TIME: 'Date & Time',
+  TYPE: 'Type',
+  COMMENTS: 'Comments',
+  DATE: 'Date',
+  REASON: 'Reason',
+};