[HOLD for payment 2024-11-13] [$250] Wallet statement: Clicking on download button showing a snackbar style notification about generating PDF

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number:
Reproducible in staging?: needs reproduction no statement with test account
Reproducible in production?: needs reproduction
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @coleaeason
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1728668916480749

Action Performed:

1. Go to https://new.expensify.com/statements/202404 for any YYYYMM combination in which you have at least one wallet transaction
2. Click the download button in the top right of the RHP
3. Weird snackbar notification appears
4. Nothing happens then
5. Click download button again

Expected Result:

In step 3 itself statement should be downloaded

Actual Result:

Weird snackbar notification appears and gets downloaded after clicking download button second time

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021847035521933253796
• Upwork Job ID: 1847035521933253796
• Last Price Increase: 2024-10-24

[melvin-bot]

Triggered auto assignment to @johncschuster (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[bernhardoj]

Edited by proposal-police: This proposal was edited at 2024-10-21 15:15:22 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

We need to press download twice to download the wallet statement.

What is the root cause of that problem?

In the wallet statement page, we first checks whether the file name of the specific year-month is available or not. If not, the app will request it first with generateStatementPDF request.

App/src/pages/wallet/WalletStatementPage.tsx

Lines 52 to 68 in ce23fb5

	const processDownload = () => {
	if (isWalletStatementGenerating) {
	return;
	}
	if (walletStatement?.[yearMonth]) {
	// We already have a file URL for this statement, so we can download it immediately
	const downloadFileName = `Expensify_Statement_${yearMonth}.pdf`;
	const fileName = walletStatement[yearMonth];
	const pdfURL = `${CONFIG.EXPENSIFY.EXPENSIFY_URL}secure?secureType=pdfreport&filename=${fileName}&downloadName=${downloadFileName}`;
	fileDownload(pdfURL, downloadFileName);
	return;
	}
	Growl.show(translate('statementPage.generatingPDF'), CONST.GROWL.SUCCESS, 3000);
	User.generateStatementPDF(yearMonth);
	};

The user then need to press the download button again when the data is available.

What changes do you think we should make in order to solve the problem?

We can make the process simpler by downloading the file automatically when the request is completed.

const isWalletStatementGenerating = walletStatement?.isGenerating ?? false;
const prevIsWalletStatementGenerating = usePrevious(isWalletStatementGenerating);
useEffect(() => {
    if (prevIsWalletStatementGenerating && !isWalletStatementGenerating && walletStatement?.[yearMonth]) {
        processDownload();
    }
}, [prevIsWalletStatementGenerating, isWalletStatementGenerating, processDownload, walletStatement, yearMonth]);

The useEffect will check if it was previously loading and the data is now available, then we trigger the download logic.

Based on this comment, we want to remove the Growl and instead show loading while generating. There is currently no way to show the loading in HeaderWithBackButton, so, we can add a new props called isDownloading.

isDownloading={isWalletStatementGenerating}

Then, in HeaderWithBackButton, if isDownloading is true, then show the loading, otherwise, show the download button.

{shouldShowDownloadButton && (
    !isDownloading ? (
        <Tooltip text={translate('common.download')}>
            <PressableWithoutFeedback ...
                accessibilityLabel={translate('common.download')}
            >
                <Icon
                    src={Expensicons.Download}
                    fill={iconFill ?? StyleUtils.getIconFillColor(getButtonState(false, false, !isDownloadButtonActive))}
                />
            </PressableWithoutFeedback>
        </Tooltip>
    ) : (
        <ActivityIndicator style={[styles.touchableButtonImage]} size='small' color={theme.spinner} />
    )
)}

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021847035521933253796

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @fedirjh (External)