diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx index 468fedc534fe..b81935a33ada 100644 --- a/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx @@ -25,10 +25,14 @@ import ComposerProvider from './ComposerProvider'; import ComposerSendButton from './ComposerSendButton'; type ReportActionComposeProps = { + /** Report ID */ reportID: string; + + /** Whether the composer is edit only */ + isEditOnly?: boolean; }; -function ComposerInner({reportID}: ReportActionComposeProps) { +function ComposerInner({reportID, isEditOnly = false}: ReportActionComposeProps) { const styles = useThemeStyles(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const {isEditingInComposer} = useComposerEditState(); @@ -57,11 +61,13 @@ function ComposerInner({reportID}: ReportActionComposeProps) { - - {!shouldUseNarrowLayout && } - - - + {!isEditOnly && ( + + {!shouldUseNarrowLayout && } + + + + )} @@ -69,10 +75,13 @@ function ComposerInner({reportID}: ReportActionComposeProps) { ); } -function Composer({reportID}: ReportActionComposeProps) { +function Composer({reportID, ...restProps}: ReportActionComposeProps) { return ( - + ); } diff --git a/src/pages/inbox/report/ReportActionsList.tsx b/src/pages/inbox/report/ReportActionsList.tsx index 093564a0b8cb..f16a54edb01f 100644 --- a/src/pages/inbox/report/ReportActionsList.tsx +++ b/src/pages/inbox/report/ReportActionsList.tsx @@ -79,6 +79,7 @@ import ShowPreviousMessagesButton from './ShowPreviousMessagesButton'; import StaticReportActionsPreview from './StaticReportActionsPreview'; import useReportActionsNewActionLiveTail from './useReportActionsNewActionLiveTail'; import useReportUnreadMessageScrollTracking from './useReportUnreadMessageScrollTracking'; +import useShouldShowComposerForActiveEditDraft from './useShouldShowComposerForActiveEditDraft'; type ReportActionsListProps = { /** The report currently being looked at */ @@ -841,7 +842,8 @@ function ReportActionsList({ () => [shouldUseNarrowLayout ? unreadMarkerReportActionID : undefined, isArchivedNonExpenseReport(report, isReportArchived), draftReportAction?.reportActionID, draftMessageHTML], [draftMessageHTML, draftReportAction?.reportActionID, unreadMarkerReportActionID, shouldUseNarrowLayout, report, isReportArchived], ); - const hideComposer = !canUserPerformWriteAction(report, isReportArchived); + const shouldShowComposerForActiveEditDraft = useShouldShowComposerForActiveEditDraft(); + const hideComposer = !canUserPerformWriteAction(report, isReportArchived) && !shouldShowComposerForActiveEditDraft; const shouldShowReportRecipientLocalTime = canShowReportRecipientLocalTime(personalDetailsList, report, currentUserAccountID) && !isComposerFullSize; const canShowHeader = isOffline || hasHeaderRendered.current; diff --git a/src/pages/inbox/report/ReportFooter.tsx b/src/pages/inbox/report/ReportFooter.tsx index 9dad6f68ed7b..08897c6bb2d3 100644 --- a/src/pages/inbox/report/ReportFooter.tsx +++ b/src/pages/inbox/report/ReportFooter.tsx @@ -33,6 +33,7 @@ import {isLoadingInitialReportActionsSelector} from '@src/selectors/ReportMetaDa import type * as OnyxTypes from '@src/types/onyx'; import ReportActionCompose from './ReportActionCompose/ReportActionCompose'; import SystemChatReportFooterMessage from './SystemChatReportFooterMessage'; +import useShouldShowComposerForActiveEditDraft from './useShouldShowComposerForActiveEditDraft'; const policyRoleSelector = (policy: OnyxEntry) => policy?.role; @@ -77,6 +78,7 @@ function ReportFooter() { const canWriteInReport = canWriteInReportUtil(report); const isSystemChat = isSystemChatUtil(report); const isAdminsOnlyPostingRoom = isAdminsOnlyPostingRoomUtil(report); + const shouldShowComposerForActiveEditDraft = useShouldShowComposerForActiveEditDraft(); if (!isCurrentReportLoadedFromOnyx || !report || !reportIDFromRoute) { return null; @@ -88,9 +90,7 @@ function ReportFooter() { if (!shouldHideComposer) { return ( - - - + ); } @@ -151,12 +151,22 @@ function ReportFooter() { ); } - // Admins-only room + // Admins-only room — keep the banner visible; mount the composer above it while editing on narrow screens. if (isAdminsOnlyPostingRoom && !isUserPolicyAdmin) { + const isEditingWithComposer = shouldShowComposerForActiveEditDraft; + return ( - + + {isEditingWithComposer && ( + + + + )} + + + ); +} + export default ReportFooter; diff --git a/src/pages/inbox/report/useShouldShowComposerForActiveEditDraft.ts b/src/pages/inbox/report/useShouldShowComposerForActiveEditDraft.ts new file mode 100644 index 000000000000..69d8300b0785 --- /dev/null +++ b/src/pages/inbox/report/useShouldShowComposerForActiveEditDraft.ts @@ -0,0 +1,11 @@ +import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import {useReportActionActiveEdit} from './ReportActionEditMessageContext'; + +/** Narrow-screen edits use the bottom composer (#90516); mount it when a draft exists even if posting is admin-only. */ +function useShouldShowComposerForActiveEditDraft() { + const {shouldUseNarrowLayout} = useResponsiveLayout(); + const {editingReportActionID} = useReportActionActiveEdit(); + return shouldUseNarrowLayout && editingReportActionID !== null; +} + +export default useShouldShowComposerForActiveEditDraft;