Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: keyboard not dismissed #53907

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
+273 −171
Open

fix: keyboard not dismissed #53907

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7194ed0
fix: keyboard not dismissed
daledah Dec 11, 2024
6b2da07
Merge branch 'main' into fix/53196
daledah Dec 17, 2024
dbd6f62
fix: lint
daledah Dec 17, 2024
df34a1f
Merge branch 'main' into fix/53196
daledah Dec 20, 2024
af03a2b
fix: lint-changed
daledah Dec 20, 2024
9e2bcac
Merge branch 'main' into fix/53196
daledah Dec 25, 2024
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
9 changes: 7 additions & 2 deletions src/components/ReportActionItem/ChronosOOOListActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import type ReportAction from '@src/types/onyx/ReportAction';

type ChronosOOOListActionsProps = {
/** The ID of the report */
reportID: string;
reportID?: string;

/** All the data of the action */
action: ReportAction<typeof CONST.REPORT.ACTIONS.TYPE.CHRONOS_OOO_LIST>;
Expand Down Expand Up @@ -61,7 +61,12 @@ function ChronosOOOListActions({reportID, action}: ChronosOOOListActionsProps) {
<Button
small
style={styles.pl2}
onPress={() => Chronos.removeEvent(reportID, action.reportActionID, event.id, events)}
onPress={() => {
if (!reportID) {
return;
}
Chronos.removeEvent(reportID, action.reportActionID, event.id, events);
}}
>
<Text style={styles.buttonSmallText}>{translate('common.remove')}</Text>
</Button>
Expand Down
45 changes: 24 additions & 21 deletions src/components/ReportActionItem/MoneyReportView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import type {PendingAction} from '@src/types/onyx/OnyxCommon';

type MoneyReportViewProps = {
/** The report currently being looked at */
report: Report;
report: OnyxEntry<Report>;

/** Policy that the report belongs to */
policy: OnyxEntry<Policy>;
Expand All @@ -52,15 +52,15 @@ function MoneyReportView({report, policy, isCombinedReport = false, shouldShowTo
const StyleUtils = useStyleUtils();
const {translate} = useLocalize();
const {isOffline} = useNetwork();
const isSettled = ReportUtils.isSettled(report.reportID);
const isSettled = ReportUtils.isSettled(report?.reportID);
const isTotalUpdated = ReportUtils.hasUpdatedTotal(report, policy);

const {totalDisplaySpend, nonReimbursableSpend, reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(report);

const shouldShowBreakdown = nonReimbursableSpend && reimbursableSpend && shouldShowTotal;
const formattedTotalAmount = CurrencyUtils.convertToDisplayString(totalDisplaySpend, report.currency);
const formattedOutOfPocketAmount = CurrencyUtils.convertToDisplayString(reimbursableSpend, report.currency);
const formattedCompanySpendAmount = CurrencyUtils.convertToDisplayString(nonReimbursableSpend, report.currency);
const formattedTotalAmount = CurrencyUtils.convertToDisplayString(totalDisplaySpend, report?.currency);
const formattedOutOfPocketAmount = CurrencyUtils.convertToDisplayString(reimbursableSpend, report?.currency);
const formattedCompanySpendAmount = CurrencyUtils.convertToDisplayString(nonReimbursableSpend, report?.currency);
const isPartiallyPaid = !!report?.pendingFields?.partial;

const subAmountTextStyles: StyleProp<TextStyle> = [
Expand All @@ -70,11 +70,11 @@ function MoneyReportView({report, policy, isCombinedReport = false, shouldShowTo
StyleUtils.getColorStyle(theme.textSupporting),
];

const [violations] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_VIOLATIONS}${report.reportID}`);
const [violations] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_VIOLATIONS}${report?.reportID}`);

const sortedPolicyReportFields = useMemo<PolicyReportField[]>((): PolicyReportField[] => {
const fields = ReportUtils.getAvailableReportFields(report, Object.values(policy?.fieldList ?? {}));
return fields.filter((field) => field.target === report.type).sort(({orderWeight: firstOrderWeight}, {orderWeight: secondOrderWeight}) => firstOrderWeight - secondOrderWeight);
return fields.filter((field) => field.target === report?.type).sort(({orderWeight: firstOrderWeight}, {orderWeight: secondOrderWeight}) => firstOrderWeight - secondOrderWeight);
}, [policy, report]);

const enabledReportFields = sortedPolicyReportFields.filter((reportField) => !ReportUtils.isReportFieldDisabled(report, reportField, policy));
Expand All @@ -88,7 +88,7 @@ function MoneyReportView({report, policy, isCombinedReport = false, shouldShowTo
() =>
shouldHideThreadDividerLine && !isCombinedReport ? (
<UnreadActionIndicator
reportActionID={report.reportID}
reportActionID={report?.reportID}
shouldHideThreadDividerLine={shouldHideThreadDividerLine}
/>
) : (
Expand All @@ -97,7 +97,7 @@ function MoneyReportView({report, policy, isCombinedReport = false, shouldShowTo
style={[!shouldHideThreadDividerLine ? styles.reportHorizontalRule : {}]}
/>
),
[shouldHideThreadDividerLine, report.reportID, styles.reportHorizontalRule, isCombinedReport],
[shouldHideThreadDividerLine, report?.reportID, styles.reportHorizontalRule, isCombinedReport],
);

return (
Expand All @@ -124,25 +124,28 @@ function MoneyReportView({report, policy, isCombinedReport = false, shouldShowTo
return (
<OfflineWithFeedback
// Need to return undefined when we have pendingAction to avoid the duplicate pending action
pendingAction={pendingAction ? undefined : report.pendingFields?.[fieldKey as keyof typeof report.pendingFields]}
errors={report.errorFields?.[fieldKey]}
pendingAction={pendingAction ? undefined : report?.pendingFields?.[fieldKey as keyof typeof report.pendingFields]}
errors={report?.errorFields?.[fieldKey]}
errorRowStyles={styles.ph5}
key={`menuItem-${fieldKey}`}
onClose={() => reportActions.clearReportFieldKeyErrors(report.reportID, fieldKey)}
onClose={() => {
if (!report?.reportID) {
return;
}
reportActions.clearReportFieldKeyErrors(report?.reportID, fieldKey);
}}
>
<MenuItemWithTopDescription
description={Str.UCFirst(reportField.name)}
title={fieldValue}
onPress={() =>
onPress={() => {
if (!report?.reportID || !report?.policyID) {
return;
}
Navigation.navigate(
ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(
report.reportID,
report.policyID ?? '-1',
reportField.fieldID,
Navigation.getReportRHPActiveRoute(),
),
)
}
ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report?.reportID, report?.policyID, reportField.fieldID, Navigation.getReportRHPActiveRoute()),
);
}}
shouldShowRightIcon
disabled={isFieldDisabled}
wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]}
Expand Down
51 changes: 18 additions & 33 deletions src/components/ReportActionItem/MoneyRequestAction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';
import type {StyleProp, ViewStyle} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import type {OnyxEntry} from 'react-native-onyx';
import {useOnyx} from 'react-native-onyx';
import RenderHTML from '@components/RenderHTML';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
Expand All @@ -18,29 +17,18 @@ import type * as OnyxTypes from '@src/types/onyx';
import {isEmptyObject} from '@src/types/utils/EmptyObject';
import MoneyRequestPreview from './MoneyRequestPreview';

type MoneyRequestActionOnyxProps = {
/** Chat report associated with iouReport */
chatReport: OnyxEntry<OnyxTypes.Report>;

/** IOU report data object */
iouReport: OnyxEntry<OnyxTypes.Report>;

/** Report actions for this report */
reportActions: OnyxEntry<OnyxTypes.ReportActions>;
};

type MoneyRequestActionProps = MoneyRequestActionOnyxProps & {
type MoneyRequestActionProps = {
/** All the data of the action */
action: OnyxTypes.ReportAction;

/** The ID of the associated chatReport */
chatReportID: string;
chatReportID?: string;

/** The ID of the associated expense report */
requestReportID: string;

/** The ID of the current report */
reportID: string;
reportID?: string;

/** Is this IOUACTION the most recent? */
isMostRecentIOUReportAction: boolean;
Expand Down Expand Up @@ -72,9 +60,6 @@ function MoneyRequestAction({
isMostRecentIOUReportAction,
contextMenuAnchor,
checkIfContextMenuActive = () => {},
chatReport,
iouReport,
reportActions,
isHovered = false,
style,
isWhisper = false,
Expand All @@ -85,15 +70,26 @@ function MoneyRequestAction({
const {isOffline} = useNetwork();
const isSplitBillAction = ReportActionsUtils.isSplitBillAction(action);
const isTrackExpenseAction = ReportActionsUtils.isTrackExpenseAction(action);
const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID ?? CONST.DEFAULT_NUMBER_ID}`);
const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${requestReportID ?? CONST.DEFAULT_NUMBER_ID}`);
const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReportID ?? CONST.DEFAULT_NUMBER_ID}`, {
canEvict: false,
});

const onMoneyRequestPreviewPressed = () => {
if (isSplitBillAction) {
const reportActionID = action.reportActionID ?? '-1';
const reportActionID = action.reportActionID;
if (!chatReportID) {
return;
}
Navigation.navigate(ROUTES.SPLIT_BILL_DETAILS.getRoute(chatReportID, reportActionID, Navigation.getReportRHPActiveRoute()));
return;
}

const childReportID = action?.childReportID ?? '-1';
const childReportID = action?.childReportID;
if (!childReportID) {
return;
}
Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(childReportID));
};

Expand Down Expand Up @@ -142,15 +138,4 @@ function MoneyRequestAction({

MoneyRequestAction.displayName = 'MoneyRequestAction';

export default withOnyx<MoneyRequestActionProps, MoneyRequestActionOnyxProps>({
chatReport: {
key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`,
},
iouReport: {
key: ({requestReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${requestReportID}`,
},
reportActions: {
key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReportID}`,
canEvict: false,
},
})(MoneyRequestAction);
export default MoneyRequestAction;
37 changes: 18 additions & 19 deletions src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,20 +74,20 @@ function MoneyRequestPreviewContent({
const route = useRoute<PlatformStackRouteProp<TransactionDuplicateNavigatorParamList, typeof SCREENS.TRANSACTION_DUPLICATE.REVIEW>>();
const {shouldUseNarrowLayout} = useResponsiveLayout();
const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID || '-1'}`);
const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`);
const [session] = useOnyx(ONYXKEYS.SESSION);
const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReportID || '-1'}`);
const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`);

const policy = PolicyUtils.getPolicy(iouReport?.policyID);
const isMoneyRequestAction = ReportActionsUtils.isMoneyRequestAction(action);
const transactionID = isMoneyRequestAction ? ReportActionsUtils.getOriginalMessage(action)?.IOUTransactionID : '-1';
const transactionID = isMoneyRequestAction ? ReportActionsUtils.getOriginalMessage(action)?.IOUTransactionID : undefined;
Copy link
Contributor

Choose a reason for hiding this comment

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

Any reason why used undefined instead of CONST.DEFAULT_NUMBER_ID here?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

transactionID is string, so we can’t set it to CONST.DEFAULT_NUMBER_ID. Also, undefined and CONST.DEFAULT_NUMBER_ID has the same effect here, as they’re both falsy.

const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
const [walletTerms] = useOnyx(ONYXKEYS.WALLET_TERMS);
const [transactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS);

const sessionAccountID = session?.accountID;
const managerID = iouReport?.managerID ?? -1;
const ownerAccountID = iouReport?.ownerAccountID ?? -1;
const managerID = iouReport?.managerID ?? CONST.DEFAULT_NUMBER_ID;
const ownerAccountID = iouReport?.ownerAccountID ?? CONST.DEFAULT_NUMBER_ID;
const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(chatReport);

const participantAccountIDs =
Expand Down Expand Up @@ -117,9 +117,9 @@ function MoneyRequestPreviewContent({
const isOnHold = TransactionUtils.isOnHold(transaction);
const isSettlementOrApprovalPartial = !!iouReport?.pendingFields?.partial;
const isPartialHold = isSettlementOrApprovalPartial && isOnHold;
const hasViolations = TransactionUtils.hasViolation(transaction?.transactionID ?? '-1', transactionViolations, true);
const hasNoticeTypeViolations = TransactionUtils.hasNoticeTypeViolation(transaction?.transactionID ?? '-1', transactionViolations, true) && ReportUtils.isPaidGroupPolicy(iouReport);
const hasWarningTypeViolations = TransactionUtils.hasWarningTypeViolation(transaction?.transactionID ?? '-1', transactionViolations, true);
const hasViolations = TransactionUtils.hasViolation(transaction?.transactionID, transactionViolations, true);
const hasNoticeTypeViolations = TransactionUtils.hasNoticeTypeViolation(transaction?.transactionID, transactionViolations, true) && ReportUtils.isPaidGroupPolicy(iouReport);
const hasWarningTypeViolations = TransactionUtils.hasWarningTypeViolation(transaction?.transactionID, transactionViolations, true);
const hasFieldErrors = TransactionUtils.hasMissingSmartscanFields(transaction);
const isDistanceRequest = TransactionUtils.isDistanceRequest(transaction);
const isFetchingWaypointsFromServer = TransactionUtils.isFetchingWaypointsFromServer(transaction);
Expand Down Expand Up @@ -155,8 +155,8 @@ function MoneyRequestPreviewContent({
const shouldShowHoldMessage = !(isSettled && !isSettlementOrApprovalPartial) && !!transaction?.comment?.hold;

const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${route.params?.threadReportID}`);
const parentReportAction = ReportActionsUtils.getReportAction(report?.parentReportID ?? '', report?.parentReportActionID ?? '');
const reviewingTransactionID = ReportActionsUtils.isMoneyRequestAction(parentReportAction) ? ReportActionsUtils.getOriginalMessage(parentReportAction)?.IOUTransactionID ?? '-1' : '-1';
const parentReportAction = ReportActionsUtils.getReportAction(report?.parentReportID, report?.parentReportActionID);
const reviewingTransactionID = ReportActionsUtils.isMoneyRequestAction(parentReportAction) ? ReportActionsUtils.getOriginalMessage(parentReportAction)?.IOUTransactionID : undefined;

/*
Show the merchant for IOUs and expenses only if:
Expand Down Expand Up @@ -186,7 +186,7 @@ function MoneyRequestPreviewContent({
};

const showContextMenu = (event: GestureResponderEvent) => {
if (!shouldDisplayContextMenu) {
if (!shouldDisplayContextMenu || !reportID) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this change needed, I don't how it is related to eslint problem, and why can't we leave it as it is?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

showContextMenuForReport requires truthy reportID, so we can early return. To prevent this we have to change showContextMenuForReport inputs but it will lead to even more changes.

return;
}
showContextMenuForReport(event, contextMenuAnchor, reportID, action, checkIfContextMenuActive);
Expand Down Expand Up @@ -253,10 +253,10 @@ function MoneyRequestPreviewContent({
if (TransactionUtils.isPending(transaction)) {
return {shouldShow: true, messageIcon: Expensicons.CreditCardHourglass, messageDescription: translate('iou.transactionPending')};
}
if (TransactionUtils.shouldShowBrokenConnectionViolation(transaction?.transactionID ?? '-1', iouReport, policy)) {
if (TransactionUtils.shouldShowBrokenConnectionViolation(transaction?.transactionID, iouReport, policy)) {
return {shouldShow: true, messageIcon: Expensicons.Hourglass, messageDescription: translate('violations.brokenConnection530Error')};
}
if (TransactionUtils.hasPendingUI(transaction, TransactionUtils.getTransactionViolations(transaction?.transactionID ?? '-1', transactionViolations))) {
if (TransactionUtils.hasPendingUI(transaction, TransactionUtils.getTransactionViolations(transaction?.transactionID, transactionViolations))) {
return {shouldShow: true, messageIcon: Expensicons.Hourglass, messageDescription: translate('iou.pendingMatchWithCreditCard')};
}
return {shouldShow: false};
Expand Down Expand Up @@ -301,12 +301,8 @@ function MoneyRequestPreviewContent({
// Clear the draft before selecting a different expense to prevent merging fields from the previous expense
// (e.g., category, tag, tax) that may be not enabled/available in the new expense's policy.
Transaction.abandonReviewDuplicateTransactions();
const comparisonResult = TransactionUtils.compareDuplicateTransactionFields(
reviewingTransactionID,
transaction?.reportID ?? '',
transaction?.transactionID ?? reviewingTransactionID,
);
Transaction.setReviewDuplicatesKey({...comparisonResult.keep, duplicates, transactionID: transaction?.transactionID ?? '', reportID: transaction?.reportID});
const comparisonResult = TransactionUtils.compareDuplicateTransactionFields(reviewingTransactionID, transaction?.reportID, transaction?.transactionID ?? reviewingTransactionID);
Transaction.setReviewDuplicatesKey({...comparisonResult.keep, duplicates, transactionID: transaction?.transactionID, reportID: transaction?.reportID});

if ('merchant' in comparisonResult.change) {
Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_MERCHANT_PAGE.getRoute(route.params?.threadReportID, backTo));
Expand Down Expand Up @@ -334,6 +330,9 @@ function MoneyRequestPreviewContent({
<OfflineWithFeedback
errors={walletTerms?.errors}
onClose={() => {
if (!chatReportID) {
return;
}
PaymentMethods.clearWalletTermsError();
Report.clearIOUError(chatReportID);
}}
Expand Down
4 changes: 2 additions & 2 deletions src/components/ReportActionItem/MoneyRequestPreview/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ type MoneyRequestPreviewProps = {
iouReportID: string;

/** The associated chatReport */
chatReportID: string;
chatReportID?: string;

/** The ID of the current report */
reportID: string;
reportID?: string;

/** Callback for the preview pressed */
onPreviewPressed: (event?: GestureResponderEvent | KeyboardEvent) => void;
Expand Down
Loading
Loading