|
| 1 | +import {hasSeenTourSelector} from '@selectors/Onboarding'; |
| 2 | +import React, {useEffect} from 'react'; |
| 3 | +import {View} from 'react-native'; |
| 4 | +import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; |
| 5 | +import useLocalize from '@hooks/useLocalize'; |
| 6 | +import useOnyx from '@hooks/useOnyx'; |
| 7 | +import usePreviousDefined from '@hooks/usePreviousDefined'; |
| 8 | +import useResponsiveLayout from '@hooks/useResponsiveLayout'; |
| 9 | +import useThemeStyles from '@hooks/useThemeStyles'; |
| 10 | +import fileDownload from '@libs/fileDownload'; |
| 11 | +import {clearExportDownload, sendExportFileFromConcierge} from '@userActions/Export'; |
| 12 | +import {navigateToConciergeChat} from '@userActions/Report'; |
| 13 | +import CONST from '@src/CONST'; |
| 14 | +import ONYXKEYS from '@src/ONYXKEYS'; |
| 15 | +import ActivityIndicator from './ActivityIndicator'; |
| 16 | +import Button from './Button'; |
| 17 | +import Modal from './Modal'; |
| 18 | +import Text from './Text'; |
| 19 | + |
| 20 | +type ExportDownloadStatusModalProps = { |
| 21 | + /** The export ID to subscribe to */ |
| 22 | + exportID: string; |
| 23 | + |
| 24 | + /** Whether the modal is visible */ |
| 25 | + isVisible: boolean; |
| 26 | + |
| 27 | + /** Callback when the modal is closed */ |
| 28 | + onClose: () => void; |
| 29 | + |
| 30 | + /** Body text for the failed state — PDF and CSV use different copy */ |
| 31 | + failedBody?: string; |
| 32 | +}; |
| 33 | + |
| 34 | +function ExportDownloadStatusModal({exportID, isVisible, onClose, failedBody}: ExportDownloadStatusModalProps) { |
| 35 | + const styles = useThemeStyles(); |
| 36 | + const {translate} = useLocalize(); |
| 37 | + // isSmallScreenWidth is needed here because the modal type depends on actual screen width, not layout mode |
| 38 | + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth |
| 39 | + const {isSmallScreenWidth} = useResponsiveLayout(); |
| 40 | + const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails(); |
| 41 | + |
| 42 | + const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID); |
| 43 | + const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED); |
| 44 | + const [betas] = useOnyx(ONYXKEYS.BETAS); |
| 45 | + const [isSelfTourViewed] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {selector: hasSeenTourSelector}); |
| 46 | + |
| 47 | + const [exportDownload] = useOnyx(`${ONYXKEYS.COLLECTION.EXPORT_DOWNLOAD}${exportID}`); |
| 48 | + const displayedExport = usePreviousDefined(exportDownload); |
| 49 | + |
| 50 | + const state = displayedExport?.state; |
| 51 | + const shouldSendFromConcierge = displayedExport?.shouldSendFromConcierge; |
| 52 | + const downloadURL = displayedExport?.downloadURL; |
| 53 | + const isPreparing = state === CONST.EXPORT_DOWNLOAD.STATE.PREPARING && !shouldSendFromConcierge; |
| 54 | + const isConcierge = !!shouldSendFromConcierge; |
| 55 | + const isReady = state === CONST.EXPORT_DOWNLOAD.STATE.READY; |
| 56 | + const isFailed = state === CONST.EXPORT_DOWNLOAD.STATE.FAILED; |
| 57 | + |
| 58 | + useEffect(() => { |
| 59 | + if (!isReady || !downloadURL || shouldSendFromConcierge) { |
| 60 | + return; |
| 61 | + } |
| 62 | + fileDownload(translate, downloadURL); |
| 63 | + }, [isReady, downloadURL, translate, shouldSendFromConcierge]); |
| 64 | + |
| 65 | + const handleSendFromConcierge = () => { |
| 66 | + sendExportFileFromConcierge(exportID, displayedExport ?? undefined); |
| 67 | + }; |
| 68 | + |
| 69 | + const handleGoToConcierge = () => { |
| 70 | + onClose(); |
| 71 | + navigateToConciergeChat(conciergeReportID, introSelected, currentUserAccountID, isSelfTourViewed, betas); |
| 72 | + }; |
| 73 | + |
| 74 | + const handleDownloadFile = () => { |
| 75 | + if (!downloadURL) { |
| 76 | + return; |
| 77 | + } |
| 78 | + fileDownload(translate, downloadURL); |
| 79 | + }; |
| 80 | + |
| 81 | + const handleClose = () => { |
| 82 | + clearExportDownload(exportID, displayedExport ?? undefined); |
| 83 | + onClose(); |
| 84 | + }; |
| 85 | + |
| 86 | + const isNonDismissible = isPreparing; |
| 87 | + |
| 88 | + const renderContent = () => { |
| 89 | + if (isPreparing) { |
| 90 | + return ( |
| 91 | + <> |
| 92 | + <ActivityIndicator |
| 93 | + size="large" |
| 94 | + style={styles.mb4} |
| 95 | + reasonAttributes={{context: 'ExportDownloadStatusModal.preparing'}} |
| 96 | + /> |
| 97 | + <Text style={[styles.textHeadlineH1, styles.textAlignCenter, styles.mb2]}>{translate('exportDownload.preparingTitle')}</Text> |
| 98 | + <Text style={[styles.textAlignCenter, styles.mb5]}>{translate('exportDownload.preparingBody')}</Text> |
| 99 | + <Button |
| 100 | + success |
| 101 | + text={translate('exportDownload.sendFromConcierge')} |
| 102 | + onPress={handleSendFromConcierge} |
| 103 | + style={styles.w100} |
| 104 | + /> |
| 105 | + </> |
| 106 | + ); |
| 107 | + } |
| 108 | + |
| 109 | + if (isConcierge) { |
| 110 | + return ( |
| 111 | + <> |
| 112 | + <Text style={[styles.textHeadlineH1, styles.textAlignCenter, styles.mb2]}>{translate('exportDownload.conciergeTitle')}</Text> |
| 113 | + <Text style={[styles.textAlignCenter, styles.mb5]}>{translate('exportDownload.conciergeBody')}</Text> |
| 114 | + <Button |
| 115 | + success |
| 116 | + text={translate('exportDownload.goToConcierge')} |
| 117 | + onPress={handleGoToConcierge} |
| 118 | + style={styles.w100} |
| 119 | + /> |
| 120 | + <Button |
| 121 | + text={translate('exportDownload.dismiss')} |
| 122 | + onPress={onClose} |
| 123 | + style={[styles.w100, styles.mt3]} |
| 124 | + /> |
| 125 | + </> |
| 126 | + ); |
| 127 | + } |
| 128 | + |
| 129 | + if (isReady) { |
| 130 | + return ( |
| 131 | + <> |
| 132 | + <Text style={[styles.textHeadlineH1, styles.textAlignCenter, styles.mb2]}>{translate('exportDownload.readyTitle')}</Text> |
| 133 | + <Text style={[styles.textAlignCenter, styles.mb5]}>{translate('exportDownload.readyBody')}</Text> |
| 134 | + <Button |
| 135 | + success |
| 136 | + text={translate('exportDownload.downloadFile')} |
| 137 | + onPress={handleDownloadFile} |
| 138 | + style={styles.w100} |
| 139 | + /> |
| 140 | + <Button |
| 141 | + text={translate('exportDownload.close')} |
| 142 | + onPress={handleClose} |
| 143 | + style={[styles.w100, styles.mt3]} |
| 144 | + /> |
| 145 | + </> |
| 146 | + ); |
| 147 | + } |
| 148 | + |
| 149 | + if (isFailed) { |
| 150 | + return ( |
| 151 | + <> |
| 152 | + <Text style={[styles.textHeadlineH1, styles.textAlignCenter, styles.mb2]}>{translate('exportDownload.failedTitle')}</Text> |
| 153 | + {!!failedBody && <Text style={[styles.textAlignCenter, styles.mb5]}>{failedBody}</Text>} |
| 154 | + <Button |
| 155 | + text={translate('exportDownload.close')} |
| 156 | + onPress={handleClose} |
| 157 | + style={styles.w100} |
| 158 | + /> |
| 159 | + </> |
| 160 | + ); |
| 161 | + } |
| 162 | + |
| 163 | + return null; |
| 164 | + }; |
| 165 | + |
| 166 | + return ( |
| 167 | + <Modal |
| 168 | + isVisible={isVisible} |
| 169 | + onClose={isNonDismissible ? () => {} : onClose} |
| 170 | + onBackdropPress={isNonDismissible ? () => {} : undefined} |
| 171 | + type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM} |
| 172 | + innerContainerStyle={styles.pv0} |
| 173 | + > |
| 174 | + <View style={[styles.m5, styles.alignItemsCenter]}>{renderContent()}</View> |
| 175 | + </Modal> |
| 176 | + ); |
| 177 | +} |
| 178 | + |
| 179 | +ExportDownloadStatusModal.displayName = 'ExportDownloadStatusModal'; |
| 180 | + |
| 181 | +export default ExportDownloadStatusModal; |
0 commit comments