diff --git a/src/screens/Dashboard/AnomalyTracker/RcaEtaActionRow.tsx b/src/screens/Dashboard/AnomalyTracker/RcaEtaActionRow.tsx new file mode 100644 index 00000000..4175f1e3 --- /dev/null +++ b/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 ( + + + {label} + {anomalyType === AnomalyType.OPEN ? {status} : null} + + + {buttonLabel} + + + + + + ); +}; +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; diff --git a/src/screens/Dashboard/AnomalyTracker/RcaEtaContainer.tsx b/src/screens/Dashboard/AnomalyTracker/RcaEtaContainer.tsx new file mode 100644 index 00000000..3967b28c --- /dev/null +++ b/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 ( + + + + + ( + + )} + allowBackdropClose={true} + setVisible={handleClose} + heightPercentage={showETABottomSheet ? 26 : 30} + > + + + + ); +}; +const styles = StyleSheet.create({ + container: { + borderRadius: 8, + backgroundColor: COLORS.BACKGROUND.LIGHT_GREY, + }, + line: { + height: 2, + backgroundColor: COLORS.BORDER.PRIMARY, + }, +}); +export default RcaEtaContainer;