Skip to content

Commit

Permalink
Merge pull request #49633 from nkdengineer/fix/46200
Browse files Browse the repository at this point in the history
fix: Combined report is more grayed
  • Loading branch information
MariaHCD authored Oct 2, 2024
2 parents ea48de3 + c12613c commit 9627f5f
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 34 deletions.
8 changes: 6 additions & 2 deletions src/components/ReportActionItem/MoneyReportView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import * as reportActions from '@src/libs/actions/Report';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import type {Policy, PolicyReportField, Report} from '@src/types/onyx';
import type {PendingAction} from '@src/types/onyx/OnyxCommon';

type MoneyReportViewProps = {
/** The report currently being looked at */
Expand All @@ -41,9 +42,11 @@ type MoneyReportViewProps = {

/** Flag to show, hide the thread divider line */
shouldHideThreadDividerLine: boolean;

pendingAction?: PendingAction;
};

function MoneyReportView({report, policy, isCombinedReport = false, shouldShowTotal = true, shouldHideThreadDividerLine}: MoneyReportViewProps) {
function MoneyReportView({report, policy, isCombinedReport = false, shouldShowTotal = true, shouldHideThreadDividerLine, pendingAction}: MoneyReportViewProps) {
const theme = useTheme();
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
Expand Down Expand Up @@ -118,7 +121,8 @@ function MoneyReportView({report, policy, isCombinedReport = false, shouldShowTo

return (
<OfflineWithFeedback
pendingAction={report.pendingFields?.[fieldKey]}
// Need to return undefined when we have pendingAction to avoid the duplicate pending action
pendingAction={pendingAction ? undefined : report.pendingFields?.[fieldKey]}
errors={report.errorFields?.[fieldKey]}
errorRowStyles={styles.ph5}
key={`menuItem-${fieldKey}`}
Expand Down
45 changes: 25 additions & 20 deletions src/components/ReportActionItem/MoneyRequestView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,8 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals
receiptURIs = ReceiptUtils.getThumbnailAndImageURIs(updatedTransaction ?? transaction);
}
const pendingAction = transaction?.pendingAction;
const getPendingFieldAction = (fieldPath: TransactionPendingFieldsKey) => transaction?.pendingFields?.[fieldPath] ?? pendingAction;
// Need to return undefined when we have pendingAction to avoid the duplicate pending action
const getPendingFieldAction = (fieldPath: TransactionPendingFieldsKey) => (pendingAction ? undefined : transaction?.pendingFields?.[fieldPath]);

const getErrorForField = useCallback(
(field: ViolationField, data?: OnyxTypes.TransactionViolation['data'], policyHasDependentTags = false, tagValue?: string) => {
Expand Down Expand Up @@ -476,10 +477,12 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals
{shouldShowAnimatedBackground && <AnimatedEmptyStateBackground />}
<>
{shouldShowReceiptAudit && (
<ReceiptAudit
notes={receiptViolations}
shouldShowAuditResult={!!shouldShowAuditMessage}
/>
<OfflineWithFeedback pendingAction={getPendingFieldAction('receipt')}>
<ReceiptAudit
notes={receiptViolations}
shouldShowAuditResult={!!shouldShowAuditMessage}
/>
</OfflineWithFeedback>
)}
{(hasReceipt || errors) && (
<OfflineWithFeedback
Expand Down Expand Up @@ -529,21 +532,23 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals
</OfflineWithFeedback>
)}
{shouldShowReceiptEmptyState && (
<ReceiptEmptyState
hasError={hasErrors}
disabled={!canEditReceipt}
onPress={() =>
Navigation.navigate(
ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(
CONST.IOU.ACTION.EDIT,
iouType,
transaction?.transactionID ?? '-1',
report?.reportID ?? '-1',
Navigation.getReportRHPActiveRoute(),
),
)
}
/>
<OfflineWithFeedback pendingAction={getPendingFieldAction('receipt')}>
<ReceiptEmptyState
hasError={hasErrors}
disabled={!canEditReceipt}
onPress={() =>
Navigation.navigate(
ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(
CONST.IOU.ACTION.EDIT,
iouType,
transaction?.transactionID ?? '-1',
report?.reportID ?? '-1',
Navigation.getReportRHPActiveRoute(),
),
)
}
/>
</OfflineWithFeedback>
)}
{!shouldShowReceiptEmptyState && !hasReceipt && <View style={{marginVertical: 6}} />}
{shouldShowAuditMessage && <ReceiptAuditMessages notes={receiptImageViolations} />}
Expand Down
44 changes: 41 additions & 3 deletions src/libs/actions/IOU.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7621,24 +7621,43 @@ function detachReceipt(transactionID: string) {
{
onyxMethod: Onyx.METHOD.SET,
key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
value: newTransaction,
value: {
...newTransaction,
pendingFields: {
receipt: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
},
},
},
];

const successData: OnyxUpdate[] = [
{
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
value: {
pendingFields: {
receipt: null,
},
},
},
];
const failureData: OnyxUpdate[] = [
{
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
value: {
...(transaction ?? null),
errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('iou.error.receiptDeleteFailureError'),
pendingFields: {
receipt: null,
},
},
},
];

const parameters: DetachReceiptParams = {transactionID};

API.write(WRITE_COMMANDS.DETACH_RECEIPT, parameters, {optimisticData, failureData});
API.write(WRITE_COMMANDS.DETACH_RECEIPT, parameters, {optimisticData, successData, failureData});
}

function replaceReceipt(transactionID: string, file: File, source: string) {
Expand All @@ -7656,9 +7675,25 @@ function replaceReceipt(transactionID: string, file: File, source: string) {
value: {
receipt: receiptOptimistic,
filename: file.name,
pendingFields: {
receipt: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
},
},
},
];

const successData: OnyxUpdate[] = [
{
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
value: {
pendingFields: {
receipt: null,
},
},
},
];

const failureData: OnyxUpdate[] = [
{
onyxMethod: Onyx.METHOD.MERGE,
Expand All @@ -7667,6 +7702,9 @@ function replaceReceipt(transactionID: string, file: File, source: string) {
receipt: !isEmptyObject(oldReceipt) ? oldReceipt : null,
filename: transaction?.filename,
errors: getReceiptError(receiptOptimistic, file.name),
pendingFields: {
receipt: null,
},
},
},
];
Expand All @@ -7676,7 +7714,7 @@ function replaceReceipt(transactionID: string, file: File, source: string) {
receipt: file,
};

API.write(WRITE_COMMANDS.REPLACE_RECEIPT, parameters, {optimisticData, failureData});
API.write(WRITE_COMMANDS.REPLACE_RECEIPT, parameters, {optimisticData, successData, failureData});
}

/**
Expand Down
22 changes: 13 additions & 9 deletions src/pages/home/report/ReportActionItemContentCreated.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -106,15 +106,17 @@ function ReportActionItemContentCreated({contextValue, parentReportAction, trans
}

return (
<ShowContextMenuContext.Provider value={contextMenuValue}>
<View>
<MoneyRequestView
report={report}
shouldShowAnimatedBackground
/>
{renderThreadDivider}
</View>
</ShowContextMenuContext.Provider>
<OfflineWithFeedback pendingAction={action.pendingAction}>
<ShowContextMenuContext.Provider value={contextMenuValue}>
<View>
<MoneyRequestView
report={report}
shouldShowAnimatedBackground
/>
{renderThreadDivider}
</View>
</ShowContextMenuContext.Provider>
</OfflineWithFeedback>
);
}

Expand Down Expand Up @@ -157,6 +159,7 @@ function ReportActionItemContentCreated({contextValue, parentReportAction, trans
report={report}
policy={policy}
isCombinedReport
pendingAction={action.pendingAction}
shouldShowTotal={transaction ? transactionCurrency !== report.currency : false}
shouldHideThreadDividerLine={shouldHideThreadDividerLine}
/>
Expand All @@ -174,6 +177,7 @@ function ReportActionItemContentCreated({contextValue, parentReportAction, trans
<MoneyReportView
report={report}
policy={policy}
pendingAction={action.pendingAction}
shouldHideThreadDividerLine={shouldHideThreadDividerLine}
/>
)}
Expand Down

0 comments on commit 9627f5f

Please sign in to comment.