/** * Project iLinkWorld * File HistoricNanoSanteUserScreen * Path screens/wallet/user * Created by BRICE ZELE * Date: 26/01/2022 */ import React, {useEffect, useState} from 'react'; import { ActivityIndicator, Alert, Dimensions, FlatList, Platform, ProgressBarAndroid, ScrollView, StyleSheet, TouchableOpacity, View, } from 'react-native'; import isNil from 'lodash/isNil'; import {connect, useDispatch} from 'react-redux'; import {Color} from "../../config/Color"; import I18n from 'react-native-i18n'; import {ScreenComponent} from "../../components/ScreenComponent"; import {createStructuredSelector} from "reselect"; import {readUser} from "../../webservice/AuthApi"; import Text from '../../components/Text'; import * as Utils from "../../utils/UtilsFunction"; import {uppercaseFirstLetter} from "../../utils/UtilsFunction"; import Dialog from "react-native-dialog"; import {Typography} from "../../config/typography"; import Tag from "../../components/Tag"; import FontAwesome5 from "react-native-vector-icons/FontAwesome5"; import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons"; import {store} from "../../redux/store"; import AccordionComponent from "../../components/AccordionComponent"; import {selectHistoric} from "../../redux/historic/historic.selector"; import {fetchGeHistoricReset, fetchGetHistoric, fetchGetHistoricPending} from "../../redux/historic/historic.actions"; let moment = require('moment-timezone'); const {width, height} = Dimensions.get('window'); const HistoricScreen = ({ navigation, fetchGetHistoric, historic }) => { const dispatch = useDispatch(); const [user, setUser] = useState(null); const [displayModalHistory, setDisplayModalHistory] = useState(false); const [historyItemDetail, setHistoryItemDetail] = useState({}); const [displaySuperHyperModalHistory, setDisplaySuperHyperModalHistory] = useState(false); const [page, setPage] = useState(1); const [historiqueDetailLabel, setHistoriqueDetailLabel] = useState(I18n.t('AVIS_IMPOSITION')); const [loadMore, setLoadMore] = useState(false); const [historyResult, setHistoryResult] = useState([]); const [isDisplayHistoryOrdreRecette, setIsDisplayHistoryOrdreRecette]= useState(false); const [isDisplayHistoryDeclaration, setIsDisplayHistoryDeclaration]= useState(false); const [isDisplayHistoryReceipt, setIsDisplayHistoryReceipt]= useState(false); const [wallet] = useState(store.getState().walletDetailReducer.result.response); function useForceUpdate() { const [value, setValue] = useState(0); // integer state return () => setValue(value => value + 1); // update the state to force render } const forceUpdate = useForceUpdate(); useEffect(() => { dispatch(fetchGeHistoricReset()); readUser().then((user) => { setUser(user); console.log("User", user); switch (user.category) { case "super": console.log("ON est pas superviseur nous"); fetchGetHistoric(`${user.agentId}?page=1&perPage=40`, false, 1); break; case "hyper": fetchGetHistoric(`${user.network_id}?page=1&perPage=20`, true, 1); break; case "geolocated": fetchGetHistoric(`${user.agentId}?page=1&perPage=20`, null, 0); break; } }); }, []); useEffect(() => { if (historic.result !== null) { if (page < historic.result.response.last_page) setHistoryResult(historyResult.concat(historic.result.response.data)); if (page === historic.result.response.last_page) { console.log("Page", page === historic.result.response.last_page); setPage(page + 1); console.log("historyResult.concat", historyResult.concat(historic.result.response.data)); setHistoryResult(historyResult.concat(historic.result.response.data)); } } if (historic.error) { Alert.alert( I18n.t("ERROR_LABLE"), Utils.getErrorMsg(historic), [ { text: I18n.t("OK"), onPress: () => { dispatch(fetchGeHistoricReset()); } } ], { cancelable: false } ); } //forceUpdate(); }, [historic]); useEffect(() => { console.log("historyResult", historyResult); }, [historyResult]); const handleLoadMore = () => { dispatch(fetchGeHistoricReset()); switch (user.category) { case "super": console.log("ON est pas superviseur nous"); fetchGetHistoric(`${user.agentId}?pagination=true&pagination=true&page=${page + 1}`, false, 1); break; case "hyper": fetchGetHistoric(`${user.network_id}?pagination=true&pagination=true&page=${page + 1}`, true, 1); break; case "geolocated": fetchGetHistoric(`${user.agentId}?pagination=true&pagination=true&page=${page + 1}`, null, 0); break; } setPage(page + 1); } const renderLoader = () => ( {Platform.OS === 'android' ? ( <> {I18n.t('LOADING_DOTS')} ) : <> {I18n.t('LOADING_DOTS')} } ); const renderFooterLoader = () => { return ( {Platform.OS === 'android' ? ( <> {I18n.t('LOADING_DOTS')} ) : <> {I18n.t('LOADING_DOTS')} } ); }; const renderModalSuperHyperHistoryDetail = () => ( {I18n.t('HISTORY_DETAIL')} { isDisplayHistoryOrdreRecette ? Type {(historyItemDetail.type)} { user !== null ? user.category !== "geolocated" && {I18n.t('ACTION')} {historyItemDetail.history_action === "M" ? I18n.t('UPDATE') : I18n.t('ADD')} : null } {I18n.t('NAME')} {historyItemDetail.lastname} {I18n.t('EMAIL')} {historyItemDetail.email} {I18n.t('PHONE')} {historyItemDetail.phone} {I18n.t('ISSUER_LASTNAME')} {historyItemDetail.issuer_lastname} {I18n.t('ISSUER_PHONE')} {historyItemDetail.issuer_phone} {I18n.t('OLD_VALUE')} {historyItemDetail.old_data_id} {I18n.t('NEW_VALUE')} {historyItemDetail.new_data_id} { historyItemDetail.hasOwnProperty("revenue_orders") && {I18n.t('ORDRE_DE_RECETTE')} { historyItemDetail.revenue_orders.map((ordreRecette) => { let message = ""; message = ordreRecette.tax_name + " | " + ordreRecette.amount + " | " + ordreRecette.payment_deadline_date + "\n\n"; return message; } ) } } {I18n.t('PRINCIPAL_AMOUNT')} {historyItemDetail.amount} {I18n.t('TOTAL_AMOUNT')} {historyItemDetail.amount} {I18n.t('DATE_AVIS_IMPOSITION')} {historyItemDetail.created_at} {I18n.t('UPDATE_DATE')} {historyItemDetail.updated_at} {I18n.t('PAYMENT_DEADLINE')} {historyItemDetail.payment_deadline_date} {I18n.t('YEAR')} {historyItemDetail.year} : { user !== null ? user.category !== "geolocated" && {I18n.t('ACTION')} {historyItemDetail.history_action === "M" ? I18n.t('UPDATE') : I18n.t('ADD')} : null } {I18n.t('ID_TAX_NOTICE')} {historyItemDetail.id_tax_notice} {I18n.t('STATUS')} {historyItemDetail.status} {I18n.t('NAME')} {historyItemDetail.lastname} {I18n.t('EMAIL')} {historyItemDetail.email} {I18n.t('ARRONDISSEMENT')} {historyItemDetail.district} {I18n.t('NEIGHTBORHOOD')} {historyItemDetail.neighborhood} {I18n.t('NOM_RESPONSABLE')} {historyItemDetail.responsable_name} {I18n.t('TECHNICAL_AGREMENT')} {historyItemDetail.technical_approval} {I18n.t('PHONE')} {historyItemDetail.phone} {I18n.t('PRINCIPAL_AMOUNT')} {historyItemDetail.amount} {I18n.t('OFFICE_PENALITIES')} {historyItemDetail.office_penalties} {I18n.t('MONTH_DELAY_PENALTIES')} {historyItemDetail.month_delay_penalties} {I18n.t('TOTAL_AMOUNT')} {historyItemDetail.amount} { historyItemDetail.hasOwnProperty("penalties") ? historyItemDetail.penalties.length > 0 ? {I18n.t('PENALITE')} { historyItemDetail.penalties.map((penalite) => { let message = ""; message = penalite.name + " \n " + (penalite.n_order === 2 ? penalite.tax_amount : penalite.amount) + (penalite.n_order === 1 ? ` | ${penalite.rate} %` : "") + "\n\n"; return message; } ) } : null : null } { historyItemDetail.hasOwnProperty("taxes") && {I18n.t('AVIS_IMPOSITION')} { historyItemDetail.taxes.map((taxe) => { let message = ""; if (taxe.hasOwnProperty('new_quantity')) message = taxe.name + " | " + taxe.unit_price + " | (" + taxe.old_quantity + ", " + taxe.old_quantity + ")\n\n"; else message = taxe.name + " | " + taxe.quantity + " | " + taxe.amount + "\n\n"; return message; } ) } } {I18n.t('DATE_AVIS_IMPOSITION')} {historyItemDetail.created_at} {I18n.t('UPDATE_DATE')} {historyItemDetail.updated_at} {I18n.t('PAYMENT_DEADLINE')} {historyItemDetail.payment_deadline_date} {I18n.t('YEAR')} {historyItemDetail.year} } { setDisplaySuperHyperModalHistory(!displaySuperHyperModalHistory); }}/> ); const renderModalHistoryDetail = () => ( {I18n.t('HISTORY_DETAIL')} {historiqueDetailLabel === I18n.t('AVIS_IMPOSITION') ? { user !== null ? user.category !== "geolocated" && {I18n.t('ACTION')} {historyItemDetail.history_action === "M" ? I18n.t('UPDATE') : I18n.t('ADD')} : null } {I18n.t('ID_TAX_NOTICE')} {historyItemDetail.id_tax_notice} {I18n.t('STATUS')} {historyItemDetail.status} {I18n.t('NAME')} {historyItemDetail.lastname} {I18n.t('EMAIL')} {historyItemDetail.email} {I18n.t('ARRONDISSEMENT')} {historyItemDetail.district} {I18n.t('NEIGHTBORHOOD')} {historyItemDetail.neighborhood} {I18n.t('NOM_RESPONSABLE')} {historyItemDetail.responsable_name} {I18n.t('TECHNICAL_AGREMENT')} {historyItemDetail.technical_approval} {I18n.t('PHONE')} {historyItemDetail.phone} {I18n.t('PRINCIPAL_AMOUNT')} {historyItemDetail.amount} {I18n.t('OFFICE_PENALITIES')} {historyItemDetail.office_penalties} {I18n.t('MONTH_DELAY_PENALTIES')} {historyItemDetail.month_delay_penalties} {I18n.t('TOTAL_AMOUNT')} {historyItemDetail.amount} { historyItemDetail.hasOwnProperty("penalties") ? historyItemDetail.penalties.length > 0 ? {I18n.t('PENALITE')} { historyItemDetail.penalties.map((penalite) => { let message = ""; message = penalite.name + " \n " + (penalite.n_order === 2 ? penalite.tax_amount : penalite.amount) + (penalite.n_order === 1 ? ` | ${penalite.rate} %` : "") + "\n\n"; return message; } ) } : null : null } { historyItemDetail.hasOwnProperty("taxes") && {I18n.t('AVIS_IMPOSITION')} { historyItemDetail.taxes.map((taxe) => { let message = ""; if (taxe.hasOwnProperty('new_quantity')) message = taxe.name + " | " + taxe.unit_price + " | (" + taxe.old_quantity + ", " + taxe.old_quantity + ")\n\n"; else message = taxe.name + " | " + taxe.quantity + " | " + taxe.amount + "\n\n"; return message; } ) } } {I18n.t('DATE_AVIS_IMPOSITION')} {historyItemDetail.created_at} {I18n.t('UPDATE_DATE')} {historyItemDetail.updated_at} {I18n.t('PAYMENT_DEADLINE')} {historyItemDetail.payment_deadline_date} {I18n.t('YEAR')} {historyItemDetail.year} : Type {(historyItemDetail.type)} { user !== null ? user.category !== "geolocated" && {I18n.t('ACTION')} {historyItemDetail.history_action === "M" ? I18n.t('UPDATE') : I18n.t('ADD')} : null } {I18n.t('NAME')} {historyItemDetail.lastname} {I18n.t('EMAIL')} {historyItemDetail.email} {I18n.t('PHONE')} {historyItemDetail.phone} {I18n.t('ISSUER_LASTNAME')} {historyItemDetail.issuer_lastname} {I18n.t('ISSUER_PHONE')} {historyItemDetail.issuer_phone} {I18n.t('OLD_VALUE')} {historyItemDetail.old_data_id} {I18n.t('NEW_VALUE')} {historyItemDetail.new_data_id} { historyItemDetail.hasOwnProperty("revenue_orders") && {I18n.t('ORDRE_DE_RECETTE')} { historyItemDetail.revenue_orders.map((ordreRecette) => { let message = ""; message = ordreRecette.tax_name + " | " + ordreRecette.amount + " | " + ordreRecette.payment_deadline_date + "\n\n"; return message; } ) } } {I18n.t('PRINCIPAL_AMOUNT')} {historyItemDetail.amount} {I18n.t('TOTAL_AMOUNT')} {historyItemDetail.amount} {I18n.t('DATE_AVIS_IMPOSITION')} {historyItemDetail.created_at} {I18n.t('UPDATE_DATE')} {historyItemDetail.updated_at} {I18n.t('PAYMENT_DEADLINE')} {historyItemDetail.payment_deadline_date} {I18n.t('YEAR')} {historyItemDetail.year} } { setDisplayModalHistory(!displayModalHistory) }}/> ) const renderItem = (item) => ( historiqueDetailLabel !== I18n.t('AVIS_IMPOSITION') ? { setHistoryItemDetail(item); setDisplayModalHistory(true); /*navigation.navigate('validateConsultationDetailScreen', { item });*/ }}> {`${I18n.t('AMOUNT')}: ${item.amount}`} {`${I18n.t('NAME')}: ${item.lastname}`} {`${I18n.t('ID')}: ${item.id_tax_notice}`} {`${I18n.t('NAME')}: ${item.lastname}`} {`${I18n.t('PHONE')}: ${item.phone}`} {`${I18n.t('STATUS')}: ${item?.status?.toLowerCase()}`} {item.created_at ? `Date: ${moment(item.created_at).format('YYYY-MM-DD')}` : I18n.t('AVIS_NON_EMIS')} : { setDisplayModalHistory(true); setHistoryItemDetail(item); /*navigation.navigate('validateConsultationDetailScreen', { item });*/ }}> {`${I18n.t('AMOUNT')}: ${item.amount}`} {`${I18n.t('ID')}: ${item.id_tax_notice}`} {`${I18n.t('NAME')}: ${item.lastname}`} {`${I18n.t('PHONE')}: ${item.phone}`} {`${I18n.t('STATUS')}: ${item?.status?.toLowerCase()}`} {item.created_at ? `Date: ${moment(item.created_at).format('YYYY-MM-DD')}` : I18n.t('AVIS_NON_EMIS')} ); return ( } style={{ paddingRight: 10, width: 120, borderTopRightRadius: 0, borderBottomRightRadius: 0, borderRightWidth: 1, borderRightColor: Color.whiteColor }} onPress={() => { dispatch(fetchGeHistoricReset()); setPage(1); setLoadMore(false); setHistoryResult([]); setHistoriqueDetailLabel(I18n.t('AVIS_IMPOSITION')); switch (user.category) { case "super": console.log("ON est pas superviseur nous"); fetchGetHistoric(`${user.agentId}?page=1&perPage=20`, false, 1); break; case "hyper": fetchGetHistoric(`${user.network_id}?page=1&perPage=20`, true, 1); break; case "geolocated": fetchGetHistoric(`${user.agentId}?page=1&perPage=20`, null, 0); break; } }}> {` ${I18n.t('AVIS_IMPOSITION')}`} { user ? user.category !== "geolocated" && ( } style={{width: 110, borderTopLeftRadius: 0, borderBottomLeftRadius: 0,}} primary onPress={() => { dispatch(fetchGeHistoricReset()); setPage(1); setLoadMore(false); setHistoryResult([]); setHistoriqueDetailLabel(I18n.t('ORDRE_RECETTE_QUITANCE')); fetchGetHistoric(`${user.agentId}?page=1&perPage=40`, false, 2); //fetchGetInvoiceHistory(`?network_id=${wallet.id_network}&page=1&perPage=20`); }}> {` ${I18n.t('ORDRE_RECETTE_QUITANCE')}`} ) : null } {historic.loading && !loadMore ? renderLoader() : ( { return ( {I18n.t('NO_WALLET_HISTORY')} ) }} data={historyResult} keyExtractor={(item, index) => item.id} renderItem={({item, index}) => ( renderItem(item) )} onEndReached={() => { if (historic.result !== null) { if (page < historic.result.response.last_page) { setLoadMore(true); handleLoadMore(); } } }} onEndReachedThreshold={0.5} ListFooterComponent={historic.result !== null ? page < historic.result.response.last_page ? renderFooterLoader() : null : null} /> )} {displayModalHistory && renderModalHistoryDetail()} ) }; const mapStateToProps = createStructuredSelector({ historic: selectHistoric }); export default connect(mapStateToProps, { fetchGetHistoric })( HistoricScreen, ); const styles = StyleSheet.create({ textInput: { height: 46, backgroundColor: Color.fieldColor, borderRadius: 5, marginTop: 10, padding: 10, width: '100%', }, contentService: { paddingVertical: 10, borderBottomWidth: 0.5, flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', }, lineRow: { flexDirection: 'row', justifyContent: 'space-between', paddingBottom: 20, }, contain: { marginTop: 20, paddingBottom: 20, paddingLeft: 10, paddingRight: 10, flex: 1, }, content: { padding: 10, marginBottom: 10, borderRadius: 8 }, contentTop: { flexDirection: "row", paddingBottom: 10, borderBottomWidth: 1 }, contentBottom: { flexDirection: "row", marginTop: 10, justifyContent: "space-between" }, bottomLeft: {flexDirection: "row", alignItems: "center"}, image: {width: 32, height: 32, marginRight: 10, borderRadius: 16}, blockView: { paddingVertical: 10, borderBottomWidth: 0.5, }, });