Add 'Don't show this again' checkbox for empty reports dialog

src/ONYXKEYS.ts

@@ -187,6 +187,9 @@ const ONYXKEYS = {
      */
     NVP_DISMISSED_ASAP_SUBMIT_EXPLANATION: 'nvp_dismissedASAPSubmitExplanation',
 
+    /** Whether the user dismissed the empty report confirmation dialog */
+    NVP_EMPTY_REPORTS_CONFIRMATION_DISMISSED: 'nvp_emptyReportsConfirmationDismissed',
+
     /** This NVP contains the training modals the user denied showing again */
     NVP_HAS_SEEN_TRACK_TRAINING: 'nvp_hasSeenTrackTraining',
 
@@ -1167,6 +1170,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.NVP_TRY_FOCUS_MODE]: boolean;
     [ONYXKEYS.NVP_DISMISSED_HOLD_USE_EXPLANATION]: boolean;
     [ONYXKEYS.NVP_DISMISSED_ASAP_SUBMIT_EXPLANATION]: boolean;
+    [ONYXKEYS.NVP_EMPTY_REPORTS_CONFIRMATION_DISMISSED]: boolean;
     [ONYXKEYS.NVP_LAST_PAYMENT_METHOD]: OnyxTypes.LastPaymentMethod;
     [ONYXKEYS.NVP_LAST_LOCATION_PERMISSION_PROMPT]: string;
     [ONYXKEYS.LAST_EXPORT_METHOD]: OnyxTypes.LastExportMethod;

src/hooks/useConditionalCreateEmptyReportConfirmation.ts

@@ -13,7 +13,7 @@ type UseConditionalCreateEmptyReportConfirmationParams = {
     /** The display name of the policy/workspace */
     policyName?: string;
     /** Callback executed after the user confirms report creation */
-    onCreateReport: () => void;
+    onCreateReport: (shouldDismissEmptyReportsConfirmation?: boolean) => void;
     /** Optional callback executed when the confirmation modal is cancelled */
     onCancel?: () => void;
     /** Whether the confirmation modal should be bypassed even if an empty report exists */
@@ -46,24 +46,33 @@ export default function useConditionalCreateEmptyReportConfirmation({
         canBeMissing: true,
         selector: reportSummariesOnyxSelector,
     });
+    const [hasDismissedEmptyReportsConfirmation] = useOnyx(ONYXKEYS.NVP_EMPTY_REPORTS_CONFIRMATION_DISMISSED, {canBeMissing: true});
 
     const hasEmptyReport = useMemo(() => hasEmptyReportsForPolicy(reportSummaries, policyID, accountID), [accountID, policyID, reportSummaries]);
+    const shouldSkipConfirmation = useMemo(() => shouldBypassConfirmation || hasDismissedEmptyReportsConfirmation === true, [hasDismissedEmptyReportsConfirmation, shouldBypassConfirmation]);
+
+    const handleReportCreationConfirmed = useCallback(
+        (shouldDismissEmptyReportsConfirmation?: boolean) => {
+            onCreateReport(shouldDismissEmptyReportsConfirmation);
+        },
+        [onCreateReport],
+    );
 
     const {openCreateReportConfirmation, CreateReportConfirmationModal} = useCreateEmptyReportConfirmation({
         policyID,
         policyName,
-        onConfirm: onCreateReport,
+        onConfirm: handleReportCreationConfirmed,
         onCancel,
     });
 
     const handleCreateReport = useCallback(() => {
-        if (hasEmptyReport && !shouldBypassConfirmation) {
+        if (hasEmptyReport && !shouldSkipConfirmation) {
             openCreateReportConfirmation();
             return;
         }
 
-        onCreateReport();
-    }, [hasEmptyReport, onCreateReport, openCreateReportConfirmation, shouldBypassConfirmation]);
+        onCreateReport(false);
+    }, [hasEmptyReport, onCreateReport, openCreateReportConfirmation, shouldSkipConfirmation]);
 
     return {
         handleCreateReport,

src/hooks/useCreateEmptyReportConfirmation.tsx

@@ -1,5 +1,7 @@
 import type {ReactNode} from 'react';
 import React, {useCallback, useMemo, useState} from 'react';
+import {View} from 'react-native';
+import CheckboxWithLabel from '@components/CheckboxWithLabel';
 import ConfirmModal from '@components/ConfirmModal';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
@@ -8,14 +10,15 @@ import {buildCannedSearchQuery} from '@libs/SearchQueryUtils';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import useLocalize from './useLocalize';
+import useThemeStyles from './useThemeStyles';
 
 type UseCreateEmptyReportConfirmationParams = {
     /** The policy ID for which the report is being created */
     policyID?: string;
     /** The display name of the policy/workspace */
     policyName?: string;
     /** Callback function to execute when user confirms report creation */
-    onConfirm: () => void;
+    onConfirm: (shouldDismissEmptyReportsConfirmation: boolean) => void;
     /** Optional callback function to execute when user cancels the confirmation */
     onCancel?: () => void;
 };
@@ -49,22 +52,27 @@ type UseCreateEmptyReportConfirmationResult = {
  */
 export default function useCreateEmptyReportConfirmation({policyName, onConfirm, onCancel}: UseCreateEmptyReportConfirmationParams): UseCreateEmptyReportConfirmationResult {
     const {translate} = useLocalize();
+    const styles = useThemeStyles();
     const workspaceDisplayName = useMemo(() => (policyName?.trim().length ? policyName : translate('report.newReport.genericWorkspaceName')), [policyName, translate]);
     const [isVisible, setIsVisible] = useState(false);
     const [modalWorkspaceName, setModalWorkspaceName] = useState(workspaceDisplayName);
+    const [shouldDismissEmptyReportsConfirmation, setShouldDismissEmptyReportsConfirmation] = useState(false);
 
     const handleConfirm = useCallback(() => {
-        onConfirm();
+        onConfirm(shouldDismissEmptyReportsConfirmation);
+        setShouldDismissEmptyReportsConfirmation(false);
         setIsVisible(false);
-    }, [onConfirm]);
+    }, [onConfirm, shouldDismissEmptyReportsConfirmation]);
 
     const handleCancel = useCallback(() => {
         onCancel?.();
+        setShouldDismissEmptyReportsConfirmation(false);
         setIsVisible(false);
     }, [onCancel]);
 
     const handleReportsLinkPress = useCallback(() => {
         onCancel?.();
+        setShouldDismissEmptyReportsConfirmation(false);
         setIsVisible(false);
         Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: buildCannedSearchQuery({type: CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT})}));
     }, [onCancel]);
@@ -73,17 +81,26 @@ export default function useCreateEmptyReportConfirmation({policyName, onConfirm,
         // The caller is responsible for determining if empty report confirmation
         // should be shown. We simply open the modal when called.
         setModalWorkspaceName(workspaceDisplayName);
+        setShouldDismissEmptyReportsConfirmation(false);
         setIsVisible(true);
     }, [workspaceDisplayName]);
 
     const prompt = useMemo(
         () => (
-            <Text>
-                {translate('report.newReport.emptyReportConfirmationPrompt', {workspaceName: modalWorkspaceName})}{' '}
-                <TextLink onPress={handleReportsLinkPress}>{translate('report.newReport.emptyReportConfirmationPromptLink')}.</TextLink>
-            </Text>
+            <View style={styles.gap4}>
+                <Text>
+                    {translate('report.newReport.emptyReportConfirmationPrompt', {workspaceName: modalWorkspaceName})}{' '}
+                    <TextLink onPress={handleReportsLinkPress}>{translate('report.newReport.emptyReportConfirmationPromptLink')}.</TextLink>
+                </Text>
+                <CheckboxWithLabel
+                    accessibilityLabel={translate('report.newReport.emptyReportConfirmationDontShowAgain')}
+                    label={translate('report.newReport.emptyReportConfirmationDontShowAgain')}
+                    isChecked={shouldDismissEmptyReportsConfirmation}
+                    onInputChange={(value) => setShouldDismissEmptyReportsConfirmation(!!value)}
+                />
+            </View>
         ),
-        [handleReportsLinkPress, modalWorkspaceName, translate],
+        [handleReportsLinkPress, modalWorkspaceName, shouldDismissEmptyReportsConfirmation, styles.gap4, translate],
     );
 
     const CreateReportConfirmationModal = useMemo(

src/hooks/useSearchTypeMenuSections.ts

@@ -52,12 +52,17 @@ const useSearchTypeMenuSections = () => {
     const [savedSearches] = useOnyx(ONYXKEYS.SAVED_SEARCHES, {canBeMissing: true});
     const [allTransactionDrafts] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_DRAFT, {canBeMissing: true});
     const shouldRedirectToExpensifyClassic = useMemo(() => areAllGroupPoliciesExpenseChatDisabled(allPolicies ?? {}), [allPolicies]);
-    const [pendingReportCreation, setPendingReportCreation] = useState<{policyID: string; policyName?: string; onConfirm: () => void} | null>(null);
+    const [pendingReportCreation, setPendingReportCreation] = useState<{policyID: string; policyName?: string; onConfirm: (shouldDismissEmptyReportsConfirmation: boolean) => void} | null>(
+        null,
+    );
 
-    const handlePendingConfirm = useCallback(() => {
-        pendingReportCreation?.onConfirm();
-        setPendingReportCreation(null);
-    }, [pendingReportCreation, setPendingReportCreation]);
+    const handlePendingConfirm = useCallback(
+        (shouldDismissEmptyReportsConfirmation: boolean) => {
+            pendingReportCreation?.onConfirm(shouldDismissEmptyReportsConfirmation);
+            setPendingReportCreation(null);
+        },
+        [pendingReportCreation, setPendingReportCreation],
+    );
 
     const handlePendingCancel = useCallback(() => {
         setPendingReportCreation(null);

src/languages/de.ts

@@ -6891,6 +6891,7 @@ Fordere Spesendetails wie Belege und Beschreibungen an, lege Limits und Standard
             emptyReportConfirmationPrompt: ({workspaceName}: {workspaceName: string}) =>
                 `Sind Sie sicher, dass Sie einen weiteren Bericht in ${workspaceName} erstellen möchten? Sie können auf Ihre leeren Berichte zugreifen in`,
             emptyReportConfirmationPromptLink: 'Berichte',
+            emptyReportConfirmationDontShowAgain: 'Nicht mehr anzeigen',
             genericWorkspaceName: 'dieser Workspace',
         },
         genericCreateReportFailureMessage: 'Unerwarteter Fehler beim Erstellen dieses Chats. Bitte versuche es später erneut.',

src/languages/en.ts

@@ -6745,6 +6745,7 @@ const translations = {
             emptyReportConfirmationPrompt: ({workspaceName}: {workspaceName: string}) =>
                 `Are you sure you want to create another report in ${workspaceName}? You can access your empty reports in`,
             emptyReportConfirmationPromptLink: 'Reports',
+            emptyReportConfirmationDontShowAgain: "Don't show me this again",
             genericWorkspaceName: 'this workspace',
         },
         genericCreateReportFailureMessage: 'Unexpected error creating this chat. Please try again later.',

src/languages/es.ts

@@ -6401,6 +6401,7 @@ ${amount} para ${merchant} - ${date}`,
             emptyReportConfirmationPrompt: ({workspaceName}: {workspaceName: string}) =>
                 `¿Estás seguro de que quieres crear otro informe en ${workspaceName}? Puedes acceder a tus informes vacíos en`,
             emptyReportConfirmationPromptLink: 'Informes',
+            emptyReportConfirmationDontShowAgain: 'No me muestres esto otra vez',
             genericWorkspaceName: 'este espacio de trabajo',
         },
         genericCreateReportFailureMessage: 'Error inesperado al crear el chat. Por favor, inténtalo más tarde.',

src/languages/fr.ts

@@ -6901,6 +6901,7 @@ Exigez des informations de dépense comme les reçus et les descriptions, défin
                 `Êtes-vous sûr de vouloir créer un autre rapport dans ${workspaceName} ? Vous pouvez accéder à vos rapports vides dans`,
             emptyReportConfirmationPromptLink: 'Rapports',
             genericWorkspaceName: 'cet espace de travail',
+            emptyReportConfirmationDontShowAgain: 'Ne plus afficher ce message',
         },
         genericCreateReportFailureMessage: 'Erreur inattendue lors de la création de cette discussion. Veuillez réessayer plus tard.',
         genericAddCommentFailureMessage: 'Erreur inattendue lors de la publication du commentaire. Veuillez réessayer plus tard.',

src/languages/it.ts

@@ -6874,6 +6874,7 @@ Richiedi dettagli di spesa come ricevute e descrizioni, imposta limiti e valori
                 `Sei sicuro di voler creare un altro report in ${workspaceName}? Puoi accedere ai tuoi report vuoti in`,
             emptyReportConfirmationPromptLink: 'Report',
             genericWorkspaceName: 'questo spazio di lavoro',
+            emptyReportConfirmationDontShowAgain: 'Non mostrarmelo di nuovo',
         },
         genericCreateReportFailureMessage: 'Errore imprevisto durante la creazione di questa chat. Riprova più tardi.',
         genericAddCommentFailureMessage: 'Errore imprevisto durante la pubblicazione del commento. Riprova più tardi.',

src/languages/ja.ts

@@ -6823,6 +6823,7 @@ ${reportName}
             emptyReportConfirmationPrompt: ({workspaceName}: {workspaceName: string}) => `${workspaceName} で別のレポートを作成してもよろしいですか？ 空のレポートには次からアクセスできます`,
             emptyReportConfirmationPromptLink: 'レポート',
             genericWorkspaceName: 'このワークスペース',
+            emptyReportConfirmationDontShowAgain: '今後表示しない',
         },
         genericCreateReportFailureMessage: 'このチャットの作成中に予期しないエラーが発生しました。後でもう一度お試しください。',
         genericAddCommentFailureMessage: 'コメントの投稿中に予期しないエラーが発生しました。後でもう一度お試しください。',

src/languages/nl.ts

@@ -6859,6 +6859,7 @@ Vraag verplichte uitgavedetails zoals bonnetjes en beschrijvingen, stel limieten
             emptyReportConfirmationPrompt: ({workspaceName}: {workspaceName: string}) =>
                 `Weet je zeker dat je een ander rapport wilt maken in ${workspaceName}? Je hebt toegang tot je lege rapporten in`,
             emptyReportConfirmationPromptLink: 'Rapporten',
+            emptyReportConfirmationDontShowAgain: 'Niet meer weergeven',
             genericWorkspaceName: 'deze workspace',
         },
         genericCreateReportFailureMessage: 'Onverwachte fout bij het maken van deze chat. Probeer het later opnieuw.',

src/languages/pl.ts

@@ -6849,6 +6849,7 @@ Wymagaj szczegółów wydatków, takich jak paragony i opisy, ustawiaj limity i
             emptyReportConfirmationPrompt: ({workspaceName}: {workspaceName: string}) =>
                 `Czy na pewno chcesz utworzyć kolejny raport w ${workspaceName}? Możesz uzyskać dostęp do swoich pustych raportów w`,
             emptyReportConfirmationPromptLink: 'Raporty',
+            emptyReportConfirmationDontShowAgain: 'Nie pokazuj tego ponownie',
             genericWorkspaceName: 'to miejsce pracy',
         },
         genericCreateReportFailureMessage: 'Nieoczekiwany błąd podczas tworzenia tego czatu. Spróbuj ponownie później.',

src/languages/pt-BR.ts

@@ -6854,6 +6854,7 @@ Exija detalhes de despesas como recibos e descrições, defina limites e padrõe
             emptyReportConfirmationPrompt: ({workspaceName}: {workspaceName: string}) =>
                 `Tem certeza de que deseja criar outro relatório em ${workspaceName}? Você pode acessar seus relatórios em branco em`,
             emptyReportConfirmationPromptLink: 'Relatórios',
+            emptyReportConfirmationDontShowAgain: 'Não mostrar isso novamente',
             genericWorkspaceName: 'este workspace',
         },
         genericCreateReportFailureMessage: 'Erro inesperado ao criar este chat. Tente novamente mais tarde.',

src/languages/zh-hans.ts

@@ -6725,6 +6725,7 @@ ${reportName}
             emptyReportConfirmationPrompt: ({workspaceName}: {workspaceName: string}) => `您确定要在 ${workspaceName} 中创建另一份报表吗？您可以在 中访问您的空报表`,
             emptyReportConfirmationPromptLink: '报表',
             genericWorkspaceName: '此工作区',
+            emptyReportConfirmationDontShowAgain: '不再显示此内容',
         },
         genericCreateReportFailureMessage: '创建此聊天时发生意外错误。请稍后再试。',
         genericAddCommentFailureMessage: '发表评论时发生意外错误。请稍后重试。',

src/libs/API/parameters/CreateAppReportParams.ts

@@ -5,5 +5,6 @@ type CreateAppReportParams = {
     reportID: string;
     reportActionID: string;
     reportPreviewReportActionID: string;
+    shouldDismissEmptyReportsConfirmation?: boolean;
 };
 export default CreateAppReportParams;

src/libs/actions/Report.ts

@@ -276,7 +276,7 @@
 let currentUserAccountID = -1;
 let currentUserEmail: string | undefined;
 
 Onyx.connect({
     key: ONYXKEYS.SESSION,
     callback: (value) => {
         // When signed out, val is undefined
@@ -289,7 +289,7 @@
     },
 });
 
 Onyx.connect({
     key: ONYXKEYS.CONCIERGE_REPORT_ID,
     callback: (value) => (conciergeReportID = value),
 });
@@ -297,7 +297,7 @@
 // map of reportID to all reportActions for that report
 const allReportActions: OnyxCollection<ReportActions> = {};
 
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
     callback: (actions, key) => {
         if (!key || !actions) {
@@ -309,14 +309,14 @@
 });
 
 let allTransactionViolations: OnyxCollection<TransactionViolations> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS,
     waitForCollectionCallback: true,
     callback: (value) => (allTransactionViolations = value),
 });
 
 let allReports: OnyxCollection<Report>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT,
     waitForCollectionCallback: true,
     callback: (value) => {
@@ -325,7 +325,7 @@
 });
 
 let isNetworkOffline = false;
 Onyx.connect({
     key: ONYXKEYS.NETWORK,
     callback: (value) => {
         isNetworkOffline = value?.isOffline ?? false;
@@ -333,7 +333,7 @@
 });
 
 let allPersonalDetails: OnyxEntry<PersonalDetailsList> = {};
 Onyx.connect({
     key: ONYXKEYS.PERSONAL_DETAILS_LIST,
     callback: (value) => {
         allPersonalDetails = value ?? {};
@@ -348,7 +348,7 @@
 });
 
 let onboarding: OnyxEntry<Onboarding>;
 Onyx.connect({
     key: ONYXKEYS.NVP_ONBOARDING,
     callback: (val) => {
         if (Array.isArray(val)) {
@@ -359,13 +359,13 @@
 });
 
 let introSelected: OnyxEntry<IntroSelected> = {};
 Onyx.connect({
     key: ONYXKEYS.NVP_INTRO_SELECTED,
     callback: (val) => (introSelected = val),
 });
 
 let allReportDraftComments: Record<string, string | undefined> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT,
     waitForCollectionCallback: true,
     callback: (value) => (allReportDraftComments = value),
@@ -3046,6 +3046,7 @@
     isASAPSubmitBetaEnabled: boolean,
     policyID?: string,
     shouldNotifyNewAction = false,
+    shouldDismissEmptyReportsConfirmation?: boolean,
 ) {
     // This will be fixed as part of https://github.com/Expensify/Expensify/issues/507850
     // eslint-disable-next-line @typescript-eslint/no-deprecated
@@ -3064,9 +3065,21 @@
         isASAPSubmitBetaEnabled,
     );
 
+    if (shouldDismissEmptyReportsConfirmation) {
+        Onyx.merge(ONYXKEYS.NVP_EMPTY_REPORTS_CONFIRMATION_DISMISSED, true);
+    }
+
     API.write(
         WRITE_COMMANDS.CREATE_APP_REPORT,
-        {reportName: optimisticReportName, type: CONST.REPORT.TYPE.EXPENSE, policyID, reportID: optimisticReportID, reportActionID, reportPreviewReportActionID},
+        {
+            reportName: optimisticReportName,
+            type: CONST.REPORT.TYPE.EXPENSE,
+            policyID,
+            reportID: optimisticReportID,
+            reportActionID,
+            reportPreviewReportActionID,
+            ...(shouldDismissEmptyReportsConfirmation ? {shouldDismissEmptyReportsConfirmation} : {}),
+        },
         {optimisticData, successData, failureData},
     );
     if (shouldNotifyNewAction) {