diff --git a/src/components/WalletStatementModal/index.js b/src/components/WalletStatementModal/index.js
index cd6ce783acc1..8d7d000ad72d 100644
--- a/src/components/WalletStatementModal/index.js
+++ b/src/components/WalletStatementModal/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
import {withOnyx} from 'react-native-onyx';
import lodashGet from 'lodash/get';
import {View} from 'react-native';
@@ -13,63 +13,55 @@ import ROUTES from '../../ROUTES';
import Navigation from '../../libs/Navigation/Navigation';
import * as Report from '../../libs/actions/Report';
-class WalletStatementModal extends React.Component {
- constructor(props) {
- super(props);
-
- this.state = {
- isLoading: true,
- };
- }
+function WalletStatementModal({statementPageURL, session}) {
+ const [isLoading, setIsLoading] = useState(true);
+ const authToken = lodashGet(session, 'authToken', null);
/**
* Handles in-app navigation for iframe links
*
- * @param {MessageEvent} e
+ * @param {MessageEvent} event
*/
- navigate(e) {
- if (!e.data || !e.data.type || (e.data.type !== 'STATEMENT_NAVIGATE' && e.data.type !== 'CONCIERGE_NAVIGATE')) {
+ const navigate = (event) => {
+ if (!event.data || !event.data.type || (event.data.type !== 'STATEMENT_NAVIGATE' && event.data.type !== 'CONCIERGE_NAVIGATE')) {
return;
}
- if (e.data.type === 'CONCIERGE_NAVIGATE') {
+ if (event.data.type === 'CONCIERGE_NAVIGATE') {
Report.navigateToConciergeChat();
}
- if (e.data.type === 'STATEMENT_NAVIGATE' && e.data.url) {
+ if (event.data.type === 'STATEMENT_NAVIGATE' && event.data.url) {
const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND, ROUTES.IOU_BILL];
- const navigateToIOURoute = _.find(iouRoutes, (iouRoute) => e.data.url.includes(iouRoute));
+ const navigateToIOURoute = _.find(iouRoutes, (iouRoute) => event.data.url.includes(iouRoute));
if (navigateToIOURoute) {
Navigation.navigate(navigateToIOURoute);
}
}
- }
+ };
- render() {
- const authToken = lodashGet(this.props, 'session.authToken', null);
- return (
- <>
- {this.state.isLoading && }
-
-
+ >
+ );
}
WalletStatementModal.propTypes = walletStatementPropTypes;