Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Comment thread
mountiny marked this conversation as resolved.
};

function ComposerInner({reportID}: ReportActionComposeProps) {
function ComposerInner({reportID, isEditOnly = false}: ReportActionComposeProps) {
const styles = useThemeStyles();
const {shouldUseNarrowLayout} = useResponsiveLayout();
const {isEditingInComposer} = useComposerEditState();
Expand Down Expand Up @@ -57,22 +61,27 @@ function ComposerInner({reportID}: ReportActionComposeProps) {
<Composer.SendButton reportID={reportID} />
</Composer.Box>
</Composer.DropZone>
<Composer.Footer>
{!shouldUseNarrowLayout && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
<Composer.TypingIndicator reportID={reportID} />
<Composer.ExceededLength />
</Composer.Footer>
{!isEditOnly && (
<Composer.Footer>
{!shouldUseNarrowLayout && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
<Composer.TypingIndicator reportID={reportID} />
<Composer.ExceededLength />
</Composer.Footer>
)}
</OfflineWithFeedback>
<Composer.ImportedState />
</View>
</View>
);
}

function Composer({reportID}: ReportActionComposeProps) {
function Composer({reportID, ...restProps}: ReportActionComposeProps) {
return (
<ComposerProvider reportID={reportID}>
<ComposerInner reportID={reportID} />
<ComposerInner
reportID={reportID}
{...restProps}
/>
</ComposerProvider>
);
}
Expand Down
4 changes: 3 additions & 1 deletion src/pages/inbox/report/ReportActionsList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -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;

Expand Down
33 changes: 27 additions & 6 deletions src/pages/inbox/report/ReportFooter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<OnyxTypes.Policy>) => policy?.role;

Expand Down Expand Up @@ -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;
Expand All @@ -88,9 +90,7 @@ function ReportFooter() {
if (!shouldHideComposer) {
return (
<View style={[chatFooterStyles, isComposerFullSize && styles.chatFooterFullCompose]}>
<SwipeableView onSwipeDown={Keyboard.dismiss}>
<ReportActionCompose reportID={reportIDFromRoute} />
</SwipeableView>
<ComposerSwipeable reportID={reportIDFromRoute} />
</View>
);
}
Expand Down Expand Up @@ -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 (
<View style={[styles.chatFooter, styles.mt4, shouldUseNarrowLayout && styles.mb5]}>
<View style={[styles.chatFooter, !isEditingWithComposer && styles.mt4, shouldUseNarrowLayout && styles.mb5]}>
{isEditingWithComposer && (
<View style={[isComposerFullSize ? styles.chatFooterFullCompose : undefined, styles.mb2]}>
<ComposerSwipeable
reportID={reportIDFromRoute}
isEditOnly
/>
</View>
)}
<Banner
containerStyles={[styles.chatFooterBanner]}
containerStyles={[styles.chatFooterBanner, isEditingWithComposer && styles.mt2]}
text={translate('adminOnlyCanPost')}
icon={expensifyIcons.Lightbulb}
shouldShowIcon
Expand Down Expand Up @@ -197,4 +207,15 @@ function ReportFooter() {
return null;
}

function ComposerSwipeable({reportID, isEditOnly = false}: {reportID: string; isEditOnly?: boolean}) {
return (
<SwipeableView onSwipeDown={Keyboard.dismiss}>
<ReportActionCompose
reportID={reportID}
isEditOnly={isEditOnly}
/>
</SwipeableView>
);
}

export default ReportFooter;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@chrispader in the follow up, can you make sure you add unit test for this hook

Original file line number Diff line number Diff line change
@@ -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;
Loading