[QBO Export] Manual exports

src/CONST.ts

@@ -882,6 +882,10 @@ const CONST = {
             INDIVIDUAL: 'individual',
             BUSINESS: 'policy',
         },
+        EXPORT_OPTIONS: {
+            EXPORT_TO_INTEGRATION: 'exportToIntegration',
+            MARK_AS_EXPORTED: 'markAsExported',
+        },
     },
     NEXT_STEP: {
         FINISHED: 'Finished!',
@@ -2143,6 +2147,7 @@ const CONST = {
         SETTINGS: 'settings',
         LEAVE_ROOM: 'leaveRoom',
         PRIVATE_NOTES: 'privateNotes',
+        EXPORT: 'export',
         DELETE: 'delete',
         MARK_AS_INCOMPLETE: 'markAsIncomplete',
     },

src/ONYXKEYS.ts

@@ -353,6 +353,9 @@ const ONYXKEYS = {
     /** Stores info during review duplicates flow */
     REVIEW_DUPLICATES: 'reviewDuplicates',
 
+    /** Stores the last export method for policy */
+    LAST_EXPORT_METHOD: 'lastExportMethod',
+
     /** Collection Keys */
     COLLECTION: {
         DOWNLOAD: 'download_',
@@ -678,6 +681,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.NVP_DISMISSED_HOLD_USE_EXPLANATION]: boolean;
     [ONYXKEYS.FOCUS_MODE_NOTIFICATION]: boolean;
     [ONYXKEYS.NVP_LAST_PAYMENT_METHOD]: OnyxTypes.LastPaymentMethod;
+    [ONYXKEYS.LAST_EXPORT_METHOD]: OnyxTypes.LastExportMethod;
     [ONYXKEYS.NVP_RECENT_WAYPOINTS]: OnyxTypes.RecentWaypoint[];
     [ONYXKEYS.NVP_INTRO_SELECTED]: OnyxTypes.IntroSelected;
     [ONYXKEYS.NVP_LAST_SELECTED_DISTANCE_RATES]: OnyxTypes.LastSelectedDistanceRates;

src/ROUTES.ts

@@ -280,6 +280,10 @@ const ROUTES = {
         route: 'r/:reportID/details',
         getRoute: (reportID: string, backTo?: string) => getUrlWithBackToParam(`r/${reportID}/details`, backTo),
     },
+    REPORT_WITH_ID_DETAILS_EXPORT: {
+        route: 'r/:reportID/details/export/:integrationName',
+        getRoute: (reportID: string, integrationName: ValueOf<typeof CONST.POLICY.CONNECTIONS.NAME>) => `r/${reportID}/details/export/${integrationName}` as const,
+    },
     REPORT_SETTINGS: {
         route: 'r/:reportID/settings',
         getRoute: (reportID: string) => `r/${reportID}/settings` as const,

src/SCREENS.ts

@@ -146,6 +146,7 @@ const SCREENS = {
         SEARCH_REPORT: 'SearchReport',
         SETTINGS_CATEGORIES: 'SettingsCategories',
         RESTRICTED_ACTION: 'RestrictedAction',
+        REPORT_EXPORT: 'Report_Export',
     },
     ONBOARDING_MODAL: {
         ONBOARDING: 'Onboarding',
@@ -232,6 +233,7 @@ const SCREENS = {
     REPORT_DETAILS: {
         ROOT: 'Report_Details_Root',
         SHARE_CODE: 'Report_Details_Share_Code',
+        EXPORT: 'Report_Details_Export',
     },
 
     WORKSPACE: {

src/components/ButtonWithDropdownMenu/types.ts

@@ -14,6 +14,8 @@ type WorkspaceDistanceRatesBulkActionType = DeepValueOf<typeof CONST.POLICY.DIST
 
 type WorkspaceTaxRatesBulkActionType = DeepValueOf<typeof CONST.POLICY.TAX_RATES_BULK_ACTION_TYPES>;
 
+type ReportExportType = DeepValueOf<typeof CONST.REPORT.EXPORT_OPTIONS>;
+
 type DropdownOption<TValueType> = {
     value: TValueType;
     text: string;
@@ -79,4 +81,12 @@ type ButtonWithDropdownMenuProps<TValueType> = {
     isSplitButton?: boolean;
 };
 
-export type {PaymentType, WorkspaceMemberBulkActionType, WorkspaceDistanceRatesBulkActionType, DropdownOption, ButtonWithDropdownMenuProps, WorkspaceTaxRatesBulkActionType};
+export type {
+    PaymentType,
+    WorkspaceMemberBulkActionType,
+    WorkspaceDistanceRatesBulkActionType,
+    DropdownOption,
+    ButtonWithDropdownMenuProps,
+    WorkspaceTaxRatesBulkActionType,
+    ReportExportType,
+};

src/components/ConfirmationPage.tsx

@@ -1,17 +1,20 @@
 import React from 'react';
-import type {TextStyle} from 'react-native';
+import type {TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
+import isIllustrationLottieAnimation from '@libs/isIllustrationLottieAnimation';
+import type IconAsset from '@src/types/utils/IconAsset';
 import Button from './Button';
 import FixedFooter from './FixedFooter';
+import ImageSVG from './ImageSVG';
 import Lottie from './Lottie';
 import LottieAnimations from './LottieAnimations';
 import type DotLottieAnimation from './LottieAnimations/types';
 import Text from './Text';
 
 type ConfirmationPageProps = {
     /** The asset to render */
-    animation?: DotLottieAnimation;
+    animation?: DotLottieAnimation | IconAsset;
 
     /** Heading of the confirmation page */
     heading: string;
@@ -31,6 +34,9 @@ type ConfirmationPageProps = {
     /** Additional style for the heading */
     headingStyle?: TextStyle;
 
+    /** Additional style for the animation */
+    animationStyle?: ViewStyle;
+
     /** Additional style for the description */
     descriptionStyle?: TextStyle;
 };
@@ -43,19 +49,30 @@ function ConfirmationPage({
     onButtonPress = () => {},
     shouldShowButton = false,
     headingStyle,
+    animationStyle,
     descriptionStyle,
 }: ConfirmationPageProps) {
     const styles = useThemeStyles();
+    const isLottie = isIllustrationLottieAnimation(animation);
 
     return (
         <>
             <View style={[styles.screenCenteredContainer, styles.alignItemsCenter]}>
-                <Lottie
-                    source={animation}
-                    autoPlay
-                    loop
-                    style={styles.confirmationAnimation}
-                />
+                {isLottie ? (
+                    <Lottie
+                        source={animation}
+                        autoPlay
+                        loop
+                        style={[styles.confirmationAnimation, animationStyle]}
+                    />
+                ) : (
+                    <View style={[styles.confirmationAnimation, animationStyle]}>
+                        <ImageSVG
+                            src={animation}
+                            contentFit="contain"
+                        />
+                    </View>
+                )}
                 <Text style={[styles.textHeadline, styles.textAlignCenter, styles.mv2, headingStyle]}>{heading}</Text>
                 <Text style={[styles.textAlignCenter, descriptionStyle]}>{description}</Text>
             </View>

src/components/Icon/Illustrations.ts

@@ -1,3 +1,4 @@
+import LaptopwithSecondScreenandHourglass from '@assets/images/LaptopwithSecondScreenandHourglass.svg';
 import Abracadabra from '@assets/images/product-illustrations/abracadabra.svg';
 import BankArrowPink from '@assets/images/product-illustrations/bank-arrow--pink.svg';
 import BankMouseGreen from '@assets/images/product-illustrations/bank-mouse--green.svg';
@@ -140,6 +141,7 @@ export {
     PinkBill,
     CreditCardsNew,
     InvoiceBlue,
+    LaptopwithSecondScreenandHourglass,
     LockOpen,
     Luggage,
     MoneyIntoWallet,

src/components/MoneyReportHeader.tsx

@@ -10,6 +10,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as HeaderUtils from '@libs/HeaderUtils';
 import Navigation from '@libs/Navigation/Navigation';
+import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
@@ -36,6 +37,7 @@ import type {MoneyRequestHeaderStatusBarProps} from './MoneyRequestHeaderStatusB
 import type {ActionHandledType} from './ProcessMoneyReportHoldMenu';
 import ProcessMoneyReportHoldMenu from './ProcessMoneyReportHoldMenu';
 import ProcessMoneyRequestHoldMenu from './ProcessMoneyRequestHoldMenu';
+import ExportWithDropdownMenu from './ReportActionItem/ExportWithDropdownMenu';
 import SettlementButton from './SettlementButton';
 
 type MoneyReportHeaderProps = {
@@ -109,6 +111,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const isPayer = ReportUtils.isPayer(session, moneyRequestReport);
     const isDraft = ReportUtils.isOpenExpenseReport(moneyRequestReport);
     const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false);
+    const connectedIntegration = PolicyUtils.getConnectedIntegration(policy);
 
     const navigateBackToAfterDelete = useRef<Route>();
     const hasScanningReceipt = ReportUtils.getTransactionsWithReceipts(moneyRequestReport?.reportID).some((t) => TransactionUtils.isReceiptBeingScanned(t));
@@ -131,15 +134,21 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
 
     const shouldDisableApproveButton = shouldShowApproveButton && !ReportUtils.isAllowedToApproveExpenseReport(moneyRequestReport);
 
-    const shouldShowSettlementButton = (shouldShowPayButton || shouldShowApproveButton) && !allHavePendingRTERViolation;
-
     const shouldShowSubmitButton = isDraft && reimbursableSpend !== 0 && !allHavePendingRTERViolation;
+
+    const hasIntegrationAutoSync = PolicyUtils.hasIntegrationAutoSync(policy, connectedIntegration);
+    // TODO: Double check the condition below
+    const shouldShowExportIntegrationButton = !hasIntegrationAutoSync && !shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && !!policy;
+
+    const shouldShowSettlementButton = (shouldShowPayButton || shouldShowApproveButton) && !allHavePendingRTERViolation && !shouldShowExportIntegrationButton;
+
     const shouldDisableSubmitButton = shouldShowSubmitButton && !ReportUtils.isAllowedToSubmitDraftExpenseReport(moneyRequestReport);
     const shouldShowMarkAsCashButton = isDraft && allHavePendingRTERViolation;
     const isFromPaidPolicy = policyType === CONST.POLICY.TYPE.TEAM || policyType === CONST.POLICY.TYPE.CORPORATE;
     const shouldShowStatusBar = allHavePendingRTERViolation || hasOnlyHeldExpenses || hasScanningReceipt;
     const shouldShowNextStep = !ReportUtils.isClosedExpenseReportWithNoExpenses(moneyRequestReport) && isFromPaidPolicy && !!nextStep?.message?.length && !shouldShowStatusBar;
-    const shouldShowAnyButton = shouldShowSettlementButton || shouldShowApproveButton || shouldShowSubmitButton || shouldShowNextStep || allHavePendingRTERViolation;
+    const shouldShowAnyButton =
+        shouldShowSettlementButton || shouldShowApproveButton || shouldShowSubmitButton || shouldShowNextStep || allHavePendingRTERViolation || shouldShowExportIntegrationButton;
     const bankAccountRoute = ReportUtils.getBankAccountRoute(chatReport);
     const formattedAmount = CurrencyUtils.convertToDisplayString(reimbursableSpend, moneyRequestReport.currency);
     const [nonHeldAmount, fullAmount] = ReportUtils.getNonHeldAndFullAmount(moneyRequestReport, policy);
@@ -352,6 +361,14 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                         />
                     </View>
                 )}
+                {shouldShowExportIntegrationButton && !shouldUseNarrowLayout && (
+                    <View style={[styles.pv2]}>
+                        <ExportWithDropdownMenu
+                            report={moneyRequestReport}
+                            integrationName={connectedIntegration}
+                        />
+                    </View>
+                )}
                 {shouldShowSubmitButton && !shouldUseNarrowLayout && (
                     <View style={styles.pv2}>
                         <Button
@@ -395,6 +412,13 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                         isLoading={!isOffline && !canAllowSettlement}
                     />
                 )}
+                {shouldShowExportIntegrationButton && shouldUseNarrowLayout && (
+                    <ExportWithDropdownMenu
+                        report={moneyRequestReport}
+                        integrationName={connectedIntegration}
+                    />
+                )}
+
                 {shouldShowSubmitButton && shouldUseNarrowLayout && (
                     <Button
                         medium

src/components/ReportActionItem/ExportWithDropdownMenu.tsx

@@ -0,0 +1,123 @@
+import React, {useCallback, useMemo, useState} from 'react';
+import {useOnyx} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
+import type {ValueOf} from 'type-fest';
+import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
+import type {DropdownOption, ReportExportType} from '@components/ButtonWithDropdownMenu/types';
+import ConfirmModal from '@components/ConfirmModal';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as ReportActions from '@libs/actions/Report';
+import * as ReportUtils from '@libs/ReportUtils';
+import type {ModalStatus} from '@pages/home/report/ReportDetailsExportPage';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Report} from '@src/types/onyx';
+
+type ExportWithDropdownMenuProps = {
+    report: OnyxEntry<Report>;
+
+    integrationName: ValueOf<typeof CONST.POLICY.CONNECTIONS.NAME>;
+};
+
+function ExportWithDropdownMenu({report, integrationName}: ExportWithDropdownMenuProps) {
+    const reportID = report?.reportID;
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const {isSmallScreenWidth} = useResponsiveLayout();
+    const [modalStatus, setModalStatus] = useState<ModalStatus>(null);
+    const [exportMethods] = useOnyx(ONYXKEYS.LAST_EXPORT_METHOD, {selector: (paymentMethod) => paymentMethod ?? {}});
+
+    const iconToDisplay = ReportUtils.getIntegrationIcon(integrationName);
+    const canBeExported = ReportUtils.canBeExported(report);
+
+    const dropdownOptions: Array<DropdownOption<ReportExportType>> = useMemo(() => {
+        const integrationText = ReportUtils.getIntegrationDisplayName(integrationName);
+        const options = [
+            {
+                value: CONST.REPORT.EXPORT_OPTIONS.EXPORT_TO_INTEGRATION,
+                text: translate('workspace.common.exportIntegrationSelected', {integrationName: integrationText}),
+                icon: iconToDisplay,
+                disabled: !canBeExported,
+            },
+            {
+                value: CONST.REPORT.EXPORT_OPTIONS.MARK_AS_EXPORTED,
+                text: translate('workspace.common.markAsExported'),
+                icon: iconToDisplay,
+                disabled: !canBeExported,
+            },
+        ];
+        const exportMethod = exportMethods?.[report?.policyID ?? ''] ?? null;
+        if (exportMethod) {
+            options.sort((method) => (method.value === exportMethod ? -1 : 0));
+        }
+        return options;
+        // We do not include exportMethods not to re-render the component when the preffered export method changes
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [canBeExported, iconToDisplay, integrationName, report?.policyID, translate]);
+
+    const confirmExport = useCallback(() => {
+        setModalStatus(null);
+        if (!reportID) {
+            return;
+        }
+        if (modalStatus === CONST.REPORT.EXPORT_OPTIONS.EXPORT_TO_INTEGRATION) {
+            ReportActions.exportToIntegration(reportID, integrationName);
+        } else if (modalStatus === CONST.REPORT.EXPORT_OPTIONS.MARK_AS_EXPORTED) {
+            ReportActions.markAsManuallyExported(reportID);
+        }
+    }, [integrationName, modalStatus, reportID]);
+
+    const savePreferredExportMethod = (value: ReportExportType) => {
+        if (!report?.policyID) {
+            return;
+        }
+        ReportActions.savePreferredExportMethod(report?.policyID, value);
+    };
+
+    return (
+        <>
+            <ButtonWithDropdownMenu
+                success
+                pressOnEnter
+                shouldAlwaysShowDropdownMenu
+                anchorAlignment={{
+                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
+                }}
+                onPress={(_, value) => {
+                    if (ReportUtils.isExported(report)) {
+                        setModalStatus(value);
+                        return;
+                    }
+                    if (!reportID) {
+                        return;
+                    }
+                    if (value === CONST.REPORT.EXPORT_OPTIONS.EXPORT_TO_INTEGRATION) {
+                        ReportActions.exportToIntegration(reportID, integrationName);
+                    } else if (value === CONST.REPORT.EXPORT_OPTIONS.MARK_AS_EXPORTED) {
+                        ReportActions.markAsManuallyExported(reportID);
+                    }
+                }}
+                onOptionSelected={({value}) => savePreferredExportMethod(value)}
+                options={dropdownOptions}
+                style={[isSmallScreenWidth && styles.flexGrow1]}
+                buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
+            />
+            {!!modalStatus && (
+                <ConfirmModal
+                    title={translate('workspace.exportAgainModal.title')}
+                    onConfirm={confirmExport}
+                    onCancel={() => setModalStatus(null)}
+                    prompt={translate('workspace.exportAgainModal.description', {reportName: report?.reportName ?? '', integrationName})}
+                    confirmText={translate('workspace.exportAgainModal.confirmText')}
+                    cancelText={translate('workspace.exportAgainModal.cancelText')}
+                    isVisible
+                />
+            )}
+        </>
+    );
+}
+
+export default ExportWithDropdownMenu;