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

Jump to bottom

fix: money request report scroll fix #29102

Merged
merged 8 commits into from
Oct 19, 2023
Merged

fix: money request report scroll fix #29102

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d1add2b
fix: money request report scroll fix
allroundexperts Oct 9, 2023
e04827b
fix: merge with main
allroundexperts Oct 13, 2023
7459557
fix: difference in money report screen
allroundexperts Oct 15, 2023
8c77a9f
Merge branch 'main' into fix-29038
allroundexperts Oct 15, 2023
8f79ffa
fix: lint issues
allroundexperts Oct 15, 2023
0e91db8
feat: resolve conflicts
allroundexperts Oct 19, 2023
17cae03
fix: resolve conflicts
allroundexperts Oct 19, 2023
87055a8
fix: use && instead of ternary
allroundexperts Oct 19, 2023
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
56 changes: 28 additions & 28 deletions src/components/ReportActionItem/MoneyReportView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,34 +41,34 @@ function MoneyReportView(props) {
const subAmountTextStyles = [styles.taskTitleMenuItem, styles.alignSelfCenter, StyleUtils.getFontSizeStyle(variables.fontSizeh1), StyleUtils.getColorStyle(themeColors.textSupporting)];

return (
<View>
<View style={[StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth), StyleUtils.getMinimumHeight(CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT.MIN_HEIGHT)]}>
<AnimatedEmptyStateBackground />
</View>
<View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv2]}>
<View style={[styles.flex1, styles.justifyContentCenter]}>
<Text
style={[styles.textLabelSupporting]}
numberOfLines={1}
>
{translate('common.total')}
</Text>
</View>
<View style={[styles.flexRow, styles.justifyContentCenter]}>
{isSettled && (
<View style={[styles.defaultCheckmarkWrapper, styles.mh2]}>
<Icon
src={Expensicons.Checkmark}
fill={themeColors.success}
/>
</View>
)}
<Text
numberOfLines={1}
style={[styles.taskTitleMenuItem, styles.alignSelfCenter]}
>
{formattedTotalAmount}
</Text>
<View style={[StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth), StyleUtils.getMinimumHeight(CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT.MIN_HEIGHT)]}>
<AnimatedEmptyStateBackground />
<View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}>
<View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv2]}>
<View style={[styles.flex1, styles.justifyContentCenter]}>
<Text
style={[styles.textLabelSupporting]}
numberOfLines={1}
>
{translate('common.total')}
</Text>
</View>
<View style={[styles.flexRow, styles.justifyContentCenter]}>
{isSettled && (
<View style={[styles.defaultCheckmarkWrapper, styles.mh2]}>
<Icon
src={Expensicons.Checkmark}
fill={themeColors.success}
/>
</View>
)}
<Text
numberOfLines={1}
style={[styles.taskTitleMenuItem, styles.alignSelfCenter]}
>
{formattedTotalAmount}
</Text>
</View>
</View>
</View>
{shouldShowBreakdown ? (
Expand Down
215 changes: 107 additions & 108 deletions src/components/ReportActionItem/MoneyRequestView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,131 +159,130 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should
const getPendingFieldAction = (fieldPath) => lodashGet(transaction, fieldPath) || pendingAction;

return (
<View>
<View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth), StyleUtils.getMinimumHeight(CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT.MIN_HEIGHT)]}>
<AnimatedEmptyStateBackground />
</View>

{hasReceipt && (
<OfflineWithFeedback pendingAction={pendingAction}>
<View style={styles.moneyRequestViewImage}>
<ReportActionItemImage
thumbnail={receiptURIs.thumbnail}
image={receiptURIs.image}
transaction={transaction}
enablePreviewModal
/>
</View>
</OfflineWithFeedback>
)}
<OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.amount')}>
<MenuItemWithTopDescription
title={formattedTransactionAmount ? formattedTransactionAmount.toString() : ''}
shouldShowTitleIcon={isSettled}
titleIcon={Expensicons.Checkmark}
description={amountDescription}
titleStyle={styles.newKansasLarge}
interactive={canEdit}
shouldShowRightIcon={canEdit}
onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))}
brickRoadIndicator={hasErrors && transactionAmount === 0 ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
error={hasErrors && transactionAmount === 0 ? translate('common.error.enterAmount') : ''}
/>
</OfflineWithFeedback>
<OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.comment')}>
<MenuItemWithTopDescription
description={translate('common.description')}
shouldParseTitle
title={transactionDescription}
interactive={canEdit}
shouldShowRightIcon={canEdit}
titleStyle={styles.flex1}
onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))}
wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]}
numberOfLinesTitle={0}
/>
</OfflineWithFeedback>
{isDistanceRequest ? (
<OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.waypoints') || lodashGet(transaction, 'pendingAction')}>
<View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth)]}>
<AnimatedEmptyStateBackground />
<View style={[StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth)]}>
{hasReceipt && (
<OfflineWithFeedback pendingAction={pendingAction}>
<View style={styles.moneyRequestViewImage}>
<ReportActionItemImage
thumbnail={receiptURIs.thumbnail}
image={receiptURIs.image}
transaction={transaction}
enablePreviewModal
/>
</View>
</OfflineWithFeedback>
)}
<OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.amount')}>
<MenuItemWithTopDescription
description={translate('common.distance')}
title={transactionMerchant}
title={formattedTransactionAmount ? formattedTransactionAmount.toString() : ''}
shouldShowTitleIcon={isSettled}
titleIcon={Expensicons.Checkmark}
description={amountDescription}
titleStyle={styles.newKansasLarge}
interactive={canEdit}
shouldShowRightIcon={canEdit}
titleStyle={styles.flex1}
onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DISTANCE))}
onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))}
brickRoadIndicator={hasErrors && transactionAmount === 0 ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
error={hasErrors && transactionAmount === 0 ? translate('common.error.enterAmount') : ''}
/>
</OfflineWithFeedback>
) : (
<OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.merchant') || lodashGet(transaction, 'pendingAction')}>
<OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.comment')}>
<MenuItemWithTopDescription
description={translate('common.merchant')}
title={transactionMerchant}
description={translate('common.description')}
shouldParseTitle
title={transactionDescription}
interactive={canEdit}
shouldShowRightIcon={canEdit}
titleStyle={styles.flex1}
onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.MERCHANT))}
brickRoadIndicator={hasErrors && isEmptyMerchant ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
error={hasErrors && isEmptyMerchant ? translate('common.error.enterMerchant') : ''}
onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))}
wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]}
numberOfLinesTitle={0}
/>
</OfflineWithFeedback>
)}
<OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.created')}>
<MenuItemWithTopDescription
description={translate('common.date')}
title={transactionDate}
interactive={canEdit}
shouldShowRightIcon={canEdit}
titleStyle={styles.flex1}
onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))}
brickRoadIndicator={hasErrors && transactionDate === '' ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
error={hasErrors && transactionDate === '' ? translate('common.error.enterDate') : ''}
/>
</OfflineWithFeedback>
{shouldShowCategory && (
<OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.category') || lodashGet(transaction, 'pendingAction')}>
<MenuItemWithTopDescription
description={translate('common.category')}
title={transactionCategory}
interactive={canEdit}
shouldShowRightIcon={canEdit}
titleStyle={styles.flex1}
onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.CATEGORY))}
/>
</OfflineWithFeedback>
)}
{shouldShowTag && (
<OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.tag') || lodashGet(transaction, 'pendingAction')}>
{isDistanceRequest ? (
<OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.waypoints') || lodashGet(transaction, 'pendingAction')}>
<MenuItemWithTopDescription
description={translate('common.distance')}
title={transactionMerchant}
interactive={canEdit}
shouldShowRightIcon={canEdit}
titleStyle={styles.flex1}
onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DISTANCE))}
/>
</OfflineWithFeedback>
) : (
<OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.merchant') || lodashGet(transaction, 'pendingAction')}>
<MenuItemWithTopDescription
description={translate('common.merchant')}
title={transactionMerchant}
interactive={canEdit}
shouldShowRightIcon={canEdit}
titleStyle={styles.flex1}
onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.MERCHANT))}
brickRoadIndicator={hasErrors && isEmptyMerchant ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
error={hasErrors && isEmptyMerchant ? translate('common.error.enterMerchant') : ''}
/>
</OfflineWithFeedback>
)}
<OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.created')}>
<MenuItemWithTopDescription
description={lodashGet(policyTag, 'name', translate('common.tag'))}
title={transactionTag}
description={translate('common.date')}
title={transactionDate}
interactive={canEdit}
shouldShowRightIcon={canEdit}
titleStyle={styles.flex1}
onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.TAG))}
onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))}
brickRoadIndicator={hasErrors && transactionDate === '' ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
error={hasErrors && transactionDate === '' ? translate('common.error.enterDate') : ''}
/>
</OfflineWithFeedback>
)}
{isExpensifyCardTransaction ? (
<OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.cardID')}>
<MenuItemWithTopDescription
description={translate('iou.card')}
title={cardProgramName}
titleStyle={styles.flex1}
interactive={canEdit}
/>
</OfflineWithFeedback>
) : null}
{shouldShowBillable && (
<View style={[styles.flexRow, styles.mb4, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8]}>
<Text color={!transactionBillable ? themeColors.textSupporting : undefined}>{translate('common.billable')}</Text>
<Switch
accessibilityLabel={translate('common.billable')}
isOn={transactionBillable}
onToggle={(value) => IOU.editMoneyRequest(transaction.transactionID, report.reportID, {billable: value})}
/>
</View>
)}
{shouldShowCategory && (
<OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.category') || lodashGet(transaction, 'pendingAction')}>
<MenuItemWithTopDescription
description={translate('common.category')}
title={transactionCategory}
interactive={canEdit}
shouldShowRightIcon={canEdit}
titleStyle={styles.flex1}
onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.CATEGORY))}
/>
</OfflineWithFeedback>
)}
{shouldShowTag && (
<OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.tag') || lodashGet(transaction, 'pendingAction')}>
<MenuItemWithTopDescription
description={lodashGet(policyTag, 'name', translate('common.tag'))}
title={transactionTag}
interactive={canEdit}
shouldShowRightIcon={canEdit}
titleStyle={styles.flex1}
onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.TAG))}
/>
</OfflineWithFeedback>
)}
{isExpensifyCardTransaction ? (
<OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.cardID')}>
<MenuItemWithTopDescription
description={translate('iou.card')}
title={cardProgramName}
titleStyle={styles.flex1}
interactive={canEdit}
/>
</OfflineWithFeedback>
) : null}
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
{isExpensifyCardTransaction ? (
<OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.cardID')}>
<MenuItemWithTopDescription
description={translate('iou.card')}
title={cardProgramName}
titleStyle={styles.flex1}
interactive={canEdit}
/>
</OfflineWithFeedback>
) : null}
{isExpensifyCardTransaction && (
<OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.cardID')}>
<MenuItemWithTopDescription
description={translate('iou.card')}
title={cardProgramName}
titleStyle={styles.flex1}
interactive={canEdit}
/>
</OfflineWithFeedback>
)}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This pattern is prohibited as far as I can recall. This will try to render false for falsy isExpensifyCardTransaction. This in turn would cause console error on android native.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Actually I'm wrong here. This happens only when the left hand side is a string.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Will push in a sec.

{shouldShowBillable && (
<View style={[styles.flexRow, styles.mb4, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8]}>
<Text color={!transactionBillable ? themeColors.textSupporting : undefined}>{translate('common.billable')}</Text>
<Switch
accessibilityLabel={translate('common.billable')}
isOn={transactionBillable}
onToggle={(value) => IOU.editMoneyRequest(transaction.transactionID, report.reportID, {billable: value})}
/>
</View>
)}
</View>
<SpacerView
shouldShow={shouldShowHorizontalRule}
style={[shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]}
Expand Down
1 change: 0 additions & 1 deletion src/pages/home/report/AnimatedEmptyStateBackground.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ function AnimatedEmptyStateBackground() {

return (
<Animated.Image
pointerEvents="none"
Copy link
Contributor

@Ollyws Ollyws Oct 17, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Why was enabling pointerEvents necessary?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@Ollyws With pointer events disabled, the scrolling would work when the height of the header is less than the height of the background image.

source={EmptyStateBackgroundImage}
style={[StyleUtils.getReportWelcomeBackgroundImageStyle(isSmallScreenWidth), animatedStyles]}
resizeMode={windowWidth > maxBackgroundWidth ? 'repeat' : 'cover'}
Expand Down
Loading