[Prod QA] Update Statement PDF

src/ONYXKEYS.js

@@ -130,6 +130,9 @@ export default {
     // The user's credit cards
     CARD_LIST: 'cardList',
 
+    // Stores information about the user's saved statements
+    WALLET_STATEMENT: 'walletStatement',
+
     // Stores information about the active reimbursement account being set up
     REIMBURSEMENT_ACCOUNT: 'reimbursementAccount',
 

src/libs/actions/User.js

@@ -15,12 +15,10 @@ import NetworkConnection from '../NetworkConnection';
 import redirectToSignIn from './SignInRedirect';
 import NameValuePair from './NameValuePair';
 import Growl from '../Growl';
-import CONFIG from '../../CONFIG';
 import * as Localize from '../Localize';
 import * as CloseAccountActions from './CloseAccount';
 import * as Link from './Link';
 import getSkinToneEmojiFromIndex from '../../components/EmojiPicker/getSkinToneEmojiFromIndex';
-import fileDownload from '../fileDownload';
 
 let sessionAuthToken = '';
 let sessionEmail = '';
@@ -403,19 +401,18 @@ function joinScreenShare(accessToken, roomName) {
  * Downloads the statement PDF for the provided period
  * @param {String} period YYYYMM format
  */
-function downloadStatementPDF(period) {
+function generateStatementPDF(period) {
+    Onyx.merge(ONYXKEYS.WALLET_STATEMENT, {isGenerating: true});
     API.GetStatementPDF({period})
         .then((response) => {
-            if (response.jsonCode === 200 && response.filename) {
-                const downloadFileName = `Expensify_Statement_${response.period}.pdf`;
-                const pdfURL = `${CONFIG.EXPENSIFY.EXPENSIFY_URL}secure?secureType=pdfreport&filename=${response.filename}&downloadName=${downloadFileName}`;
-
-                fileDownload(pdfURL, downloadFileName);
-            } else {
-                Growl.show(Localize.translateLocal('common.genericErrorMessage'), CONST.GROWL.ERROR, 3000);
+            if (response.jsonCode !== 200 || !response.filename) {
+                return;
             }
-        })
-        .catch(() => Growl.show(Localize.translateLocal('common.genericErrorMessage'), CONST.GROWL.ERROR, 3000));
+
+            Onyx.merge(ONYXKEYS.WALLET_STATEMENT, {[period]: response.filename});
+        }).finally(() => {
+            Onyx.merge(ONYXKEYS.WALLET_STATEMENT, {isGenerating: false});
+        });
 }
 
 export {
@@ -437,5 +434,5 @@ export {
     setFrequentlyUsedEmojis,
     joinScreenShare,
     clearScreenShareRequest,
-    downloadStatementPDF,
+    generateStatementPDF,
 };

src/pages/wallet/WalletStatementPage.js

@@ -13,6 +13,9 @@ import compose from '../../libs/compose';
 import CONFIG from '../../CONFIG';
 import WalletStatementModal from '../../components/WalletStatementModal';
 import * as User from '../../libs/actions/User';
+import fileDownload from '../../libs/fileDownload';
+import Growl from '../../libs/Growl';
+import CONST from '../../CONST';
 
 const propTypes = {
     /** The route object passed to this page from the navigator */
@@ -26,39 +29,96 @@ const propTypes = {
         }).isRequired,
     }).isRequired,
 
+    walletStatement: PropTypes.shape({
+        /** Whether the PDF file available for download or not */
+        isGenerating: PropTypes.bool,
+
+    }),
+
     ...withLocalizePropTypes,
 };
 
-const WalletStatementPage = (props) => {
-    moment.locale(lodashGet(props, 'preferredLocale', 'en'));
-    const yearMonth = lodashGet(props.route.params, 'yearMonth', null);
-    const year = yearMonth.substring(0, 4) || moment().year();
-    const month = yearMonth.substring(4) || moment().month();
-    const monthName = moment(month, 'M').format('MMMM');
-    const title = `${monthName} ${year} statement`;
-    const url = `${CONFIG.EXPENSIFY.EXPENSIFY_URL}statement.php?period=${yearMonth}`;
-    return (
-        <ScreenWrapper>
-            <HeaderWithCloseButton
-                title={Str.recapitalize(title)}
-                shouldShowDownloadButton
-                onCloseButtonPress={() => Navigation.dismissModal(true)}
-                onDownloadButtonPress={() => User.downloadStatementPDF(yearMonth)}
-            />
-            <WalletStatementModal
-                statementPageURL={url}
-            />
-        </ScreenWrapper>
-    );
+const defaultProps = {
+    walletStatement: {
+        isGenerating: false,
+    },
 };
 
+class WalletStatementPage extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isDownloading: false,
+        };
+        this.processDownload = this.processDownload.bind(this);
+        this.yearMonth = lodashGet(this.props.route.params, 'yearMonth', null);
+    }
+
+    componentDidMount() {
+        User.generateStatementPDF(this.yearMonth);
+    }
+
+    processDownload(yearMonth) {
+        if (this.state.isDownloading) {
+            return;
+        }
+
+        this.setState({
+            isDownloading: true,
+        });
+
+        if (!this.props.walletStatement[yearMonth] || this.props.walletStatement.isGenerating) {
+            Growl.show(this.props.translate('common.genericErrorMessage'), CONST.GROWL.ERROR, 5000);
+            this.setState({
+                isDownloading: false,
+            });
+        } else {
+            const fileName = `Expensify_Statement_${yearMonth}.pdf`;
+            const pdfURL = `${CONFIG.EXPENSIFY.EXPENSIFY_URL}secure?secureType=pdfreport&filename=${this.props.walletStatement[yearMonth]}&downloadName=${fileName}`;
+            fileDownload(pdfURL, fileName).then(() => {
+                this.setState({
+                    isDownloading: false,
+                });
+            });
+        }
+    }
+
+    render() {
+        moment.locale(lodashGet(this.props, 'preferredLocale', 'en'));
+        const year = this.yearMonth.substring(0, 4) || moment().year();
+        const month = this.yearMonth.substring(4) || moment().month();
+        const monthName = moment(month, 'M').format('MMMM');
+        const title = `${monthName} ${year} statement`;
+        const url = `${CONFIG.EXPENSIFY.EXPENSIFY_URL}statement.php?period=${this.yearMonth}`;
+
+        return (
+            <ScreenWrapper>
+                <HeaderWithCloseButton
+                    title={Str.recapitalize(title)}
+                    shouldShowDownloadButton
+                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                    onDownloadButtonPress={() => this.processDownload(this.yearMonth)}
+                />
+                <WalletStatementModal
+                    statementPageURL={url}
+                />
+            </ScreenWrapper>
+        );
+    }
+}
+
 WalletStatementPage.propTypes = propTypes;
+WalletStatementPage.defaultProps = defaultProps;
 WalletStatementPage.displayName = 'WalletStatementPage';
 export default compose(
     withLocalize,
     withOnyx({
         preferredLocale: {
             key: ONYXKEYS.NVP_PREFERRED_LOCALE,
         },
+        walletStatement: {
+            key: ONYXKEYS.WALLET_STATEMENT,
+        },
     }),
 )(WalletStatementPage);