NTP-59601 | Anomaly card changes

src/screens/Dashboard/AnomalyTracker/RcaEtaActionRow.tsx

@@ -0,0 +1,47 @@
+import { COLORS } from '@rn-ui-lib/colors';
+import Text from '@rn-ui-lib/components/Text';
+import React from 'react';
+import { View, StyleSheet, Pressable } from 'react-native';
+import Chevron from '@rn-ui-lib/icons/Chevron';
+import { AnomalyType } from './constants';
+
+interface IRcaEtaActionRowProps {
+  anomalyType: string;
+  label: string;
+  onClick: () => void;
+  status: string;
+  statusColor: { color: string };
+  buttonLabel: string;
+}
+const RcaEtaActionRow = (props: IRcaEtaActionRowProps) => {
+  const { anomalyType, label, onClick, status, statusColor, buttonLabel } = props;
+  return (
+    <View style={styles.row}>
+      <View style={styles.label}>
+        <Text>{label} </Text>
+        {anomalyType === AnomalyType.OPEN ? <Text style={statusColor}>{status}</Text> : null}
+      </View>
+      <Pressable onPress={onClick} style={styles.label}>
+        <Text style={styles.buttonLabel}>{buttonLabel}</Text>
+        <View style={styles.rightIcon}>
+          <Chevron fillColor={COLORS.TEXT.BLUE} />
+        </View>
+      </Pressable>
+    </View>
+  );
+};
+const styles = StyleSheet.create({
+  row: {
+    padding: 8,
+    justifyContent: 'space-between',
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  label: { display: 'flex', flexDirection: 'row', gap: 4 },
+  rightIcon: {
+    marginTop: 9,
+  },
+  buttonLabel: { color: COLORS.TEXT.BLUE, fontWeight: '600', fontSize: 13 },
+});
+
+export default RcaEtaActionRow;

src/screens/Dashboard/AnomalyTracker/RcaEtaContainer.tsx

@@ -0,0 +1,94 @@
+import { COLORS } from '@rn-ui-lib/colors';
+import React, { useEffect, useState } from 'react';
+import { View, StyleSheet } from 'react-native';
+import BottomSheetWrapper from '@common/BottomSheetWrapper';
+import { AnomalyType } from './constants';
+import { useAppDispatch } from '@hooks';
+import { getActivityLogs } from './utils';
+import dayjs from 'dayjs';
+import { BUSINESS_DATE_FORMAT } from '@rn-ui-lib/utils/dates';
+import RcaEtaActionRow from './RcaEtaActionRow';
+import BottomsheetHeader from './BottomsheetHeader';
+import ViewRcaEtaDetails from './ViewRcaEtaDetails';
+
+interface IRcaEtaContainerProps {
+  item: any;
+  anomalyType: string;
+}
+
+const RcaEtaContainer = (props: IRcaEtaContainerProps) => {
+  const { item, anomalyType } = props;
+  console.log({ item });
+  const [showETABottomSheet, setShowETABottomSheet] = useState(false);
+  const [showRCABottomSheet, setShowRCABottomSheet] = useState(false);
+  const [selectedAnomalyId, setSelectedAnomalyId] = useState('');
+  const dispatch = useAppDispatch();
+
+  const onETAClick = () => {
+    if (!(item?.estimatedTime || anomalyType === AnomalyType.RESOLVED)) return; //TODO - Redirect to fill ETA form
+    setSelectedAnomalyId(item?.anomalyReferenceId);
+    setShowETABottomSheet(true);
+  };
+  const onRCAClick = () => {
+    if (!(item?.rca || anomalyType === AnomalyType.RESOLVED)) return; //TODO - Redirect to fill ETA form
+    setSelectedAnomalyId(item?.anomalyReferenceId);
+    setShowRCABottomSheet(true);
+  };
+  const etaStatus = item?.estimatedTime
+    ? dayjs(item?.estimatedTime?.at)?.format(BUSINESS_DATE_FORMAT)
+    : 'Unfilled';
+
+  const handleClose = () => {
+    setShowRCABottomSheet(false);
+    setShowETABottomSheet(false);
+    setSelectedAnomalyId('');
+  };
+
+  useEffect(() => {
+    dispatch(getActivityLogs(selectedAnomalyId));
+  }, [selectedAnomalyId]);
+
+  return (
+    <View style={styles.container}>
+      <RcaEtaActionRow
+        anomalyType={anomalyType}
+        label={'RCA'}
+        onClick={onRCAClick}
+        status={item?.rca ? 'Filled' : 'Unfilled'}
+        statusColor={{ color: item?.rca ? COLORS.TEXT.GREEN : COLORS.TEXT.RED }}
+        buttonLabel={item?.rca || anomalyType === AnomalyType.RESOLVED ? 'View' : 'Fill'}
+      />
+      <View style={styles.line} />
+      <RcaEtaActionRow
+        anomalyType={anomalyType}
+        label={'ETA'}
+        onClick={onETAClick}
+        status={etaStatus}
+        statusColor={{ color: item?.estimatedTime ? COLORS.TEXT.GREEN : COLORS.TEXT.RED }}
+        buttonLabel={item?.estimatedTime || anomalyType === AnomalyType.RESOLVED ? 'View' : 'Fill'}
+      />
+      <BottomSheetWrapper
+        visible={showETABottomSheet || showRCABottomSheet}
+        HeaderNode={() => (
+          <BottomsheetHeader title={showRCABottomSheet ? 'RCA' : 'ETA'} handleClose={handleClose} />
+        )}
+        allowBackdropClose={true}
+        setVisible={handleClose}
+        heightPercentage={showETABottomSheet ? 26 : 30}
+      >
+        <ViewRcaEtaDetails showETABottomSheet={showETABottomSheet} />
+      </BottomSheetWrapper>
+    </View>
+  );
+};
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 8,
+    backgroundColor: COLORS.BACKGROUND.LIGHT_GREY,
+  },
+  line: {
+    height: 2,
+    backgroundColor: COLORS.BORDER.PRIMARY,
+  },
+});
+export default RcaEtaContainer;