Skip to content

Add OfflineWithFeedback for the scrollable header #22642

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

Merged
madmax330 merged 8 commits into from
Jul 17, 2023
Merged

Add OfflineWithFeedback for the scrollable header #22642

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
59cfa89
Add OfflineWithFeedback for the scrollable header
ShogunFire Jul 11, 2023
1e27901
After run prettier
ShogunFire Jul 11, 2023
43a948c
Refactoring pending action and errors to have code in one place only
ShogunFire Jul 11, 2023
d6f1088
Changing name of the method
ShogunFire Jul 11, 2023
d1784ca
After npm run prettier and add explanation for the method
ShogunFire Jul 11, 2023
bf3a8a2
Reverting unwanted changes
ShogunFire Jul 11, 2023
1bb45ce
I forgot styles.
ShogunFire Jul 11, 2023
b2678c9
Revert "Reverting unwanted changes"
ShogunFire Jul 11, 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
184 changes: 96 additions & 88 deletions src/components/MoneyRequestDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import MenuItemWithTopDescription from './MenuItemWithTopDescription';
import DateUtils from '../libs/DateUtils';
import reportPropTypes from '../pages/reportPropTypes';
import * as UserUtils from '../libs/UserUtils';
import OfflineWithFeedback from './OfflineWithFeedback';

const propTypes = {
/** The report currently being looked at */
Expand Down Expand Up @@ -91,105 +92,112 @@ function MoneyRequestDetails(props) {
const shouldShowSettlementButton = !isSettled && !props.isSingleTransactionView && isPayer;
const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
const shouldShowPaypal = Boolean(lodashGet(props.personalDetails, [moneyRequestReport.ownerAccountID, 'payPalMeAddress']));
const {addWorkspaceRoomOrChatPendingAction, addWorkspaceRoomOrChatErrors} = ReportUtils.getReportOfflinePendingActionAndErrors(props.report);
return (
<View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
<View style={[styles.ph5, styles.pb2]}>
<Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('common.to')}</Text>
<View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.pv3]}>
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
<Avatar
source={payeeAvatar}
type={isExpenseReport ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR}
name={payeeName}
size={CONST.AVATAR_SIZE.DEFAULT}
/>
<View style={[styles.flex1, styles.flexColumn, styles.ml3]}>
<Text
style={[styles.headerText, styles.pre]}
numberOfLines={1}
>
{payeeName}
</Text>
{isExpenseReport && (
<OfflineWithFeedback
pendingAction={addWorkspaceRoomOrChatPendingAction}
errors={addWorkspaceRoomOrChatErrors}
shouldShowErrorMessages={false}
>
<View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
<View style={[styles.ph5, styles.pb2]}>
<Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('common.to')}</Text>
<View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.pv3]}>
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
<Avatar
source={payeeAvatar}
type={isExpenseReport ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR}
name={payeeName}
size={CONST.AVATAR_SIZE.DEFAULT}
/>
<View style={[styles.flex1, styles.flexColumn, styles.ml3]}>
<Text
style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
style={[styles.headerText, styles.pre]}
numberOfLines={1}
>
{props.translate('workspace.common.workspace')}
{payeeName}
</Text>
{isExpenseReport && (
<Text
style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
numberOfLines={1}
>
{props.translate('workspace.common.workspace')}
</Text>
)}
</View>
</View>
<View style={[styles.flexRow, styles.alignItemsCenter]}>
{!props.isSingleTransactionView && <Text style={[styles.newKansasLarge]}>{formattedAmount}</Text>}
{!props.isSingleTransactionView && isSettled && (
<View style={styles.defaultCheckmarkWrapper}>
<Icon
src={Expensicons.Checkmark}
fill={themeColors.iconSuccessFill}
/>
</View>
)}
{shouldShowSettlementButton && !props.isSmallScreenWidth && (
<View style={[styles.ml4]}>
<SettlementButton
currency={props.report.currency}
policyID={props.report.policyID}
shouldShowPaypal={shouldShowPaypal}
chatReportID={props.chatReport.reportID}
iouReport={props.report}
onPress={(paymentType) => IOU.payMoneyRequest(paymentType, props.chatReport, props.report)}
enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW}
addBankAccountRoute={bankAccountRoute}
shouldShowPaymentOptions
/>
</View>
)}
</View>
</View>
<View style={[styles.flexRow, styles.alignItemsCenter]}>
{!props.isSingleTransactionView && <Text style={[styles.newKansasLarge]}>{formattedAmount}</Text>}
{!props.isSingleTransactionView && isSettled && (
<View style={styles.defaultCheckmarkWrapper}>
<Icon
src={Expensicons.Checkmark}
fill={themeColors.iconSuccessFill}
/>
</View>
)}
{shouldShowSettlementButton && !props.isSmallScreenWidth && (
<View style={[styles.ml4]}>
<SettlementButton
currency={props.report.currency}
policyID={props.report.policyID}
shouldShowPaypal={shouldShowPaypal}
chatReportID={props.chatReport.reportID}
iouReport={props.report}
onPress={(paymentType) => IOU.payMoneyRequest(paymentType, props.chatReport, props.report)}
enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW}
addBankAccountRoute={bankAccountRoute}
shouldShowPaymentOptions
/>
</View>
)}
</View>
{shouldShowSettlementButton && props.isSmallScreenWidth && (
<SettlementButton
currency={props.report.currency}
policyID={props.report.policyID}
shouldShowPaypal={shouldShowPaypal}
chatReportID={props.report.chatReportID}
iouReport={props.report}
onPress={(paymentType) => IOU.payMoneyRequest(paymentType, props.chatReport, props.report)}
enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW}
addBankAccountRoute={bankAccountRoute}
shouldShowPaymentOptions
/>
)}
</View>
{shouldShowSettlementButton && props.isSmallScreenWidth && (
<SettlementButton
currency={props.report.currency}
policyID={props.report.policyID}
shouldShowPaypal={shouldShowPaypal}
chatReportID={props.report.chatReportID}
iouReport={props.report}
onPress={(paymentType) => IOU.payMoneyRequest(paymentType, props.chatReport, props.report)}
enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW}
addBankAccountRoute={bankAccountRoute}
shouldShowPaymentOptions
/>
{props.isSingleTransactionView && (
<>
<MenuItemWithTopDescription
title={formattedTransactionAmount}
shouldShowTitleIcon={isSettled}
titleIcon={Expensicons.Checkmark}
description={`${props.translate('iou.amount')} • ${props.translate('iou.cash')}${isSettled ? ` • ${props.translate('iou.settledExpensify')}` : ''}`}
titleStyle={styles.newKansasLarge}
disabled={isSettled}
// Note: These options are temporarily disabled while we figure out the required API changes
// shouldShowRightIcon={!isSettled}
// onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))}
/>
<MenuItemWithTopDescription
description={props.translate('common.description')}
title={transactionDescription}
disabled={isSettled}
// shouldShowRightIcon={!isSettled}
// onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))}
/>
<MenuItemWithTopDescription
description={props.translate('common.date')}
title={formattedTransactionDate}
// shouldShowRightIcon={!isSettled}
// onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))}
/>
</>
)}
</View>
{props.isSingleTransactionView && (
<>
<MenuItemWithTopDescription
title={formattedTransactionAmount}
shouldShowTitleIcon={isSettled}
titleIcon={Expensicons.Checkmark}
description={`${props.translate('iou.amount')} • ${props.translate('iou.cash')}${isSettled ? ` • ${props.translate('iou.settledExpensify')}` : ''}`}
titleStyle={styles.newKansasLarge}
disabled={isSettled}
// Note: These options are temporarily disabled while we figure out the required API changes
// shouldShowRightIcon={!isSettled}
// onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))}
/>
<MenuItemWithTopDescription
description={props.translate('common.description')}
title={transactionDescription}
disabled={isSettled}
// shouldShowRightIcon={!isSettled}
// onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))}
/>
<MenuItemWithTopDescription
description={props.translate('common.date')}
title={formattedTransactionDate}
// shouldShowRightIcon={!isSettled}
// onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))}
/>
</>
)}
</View>
</OfflineWithFeedback>
);
}

Expand Down
14 changes: 14 additions & 0 deletions src/libs/ReportUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2486,6 +2486,19 @@ function getOriginalReportID(reportID, reportAction) {
return isThreadFirstChat(reportAction, reportID) ? lodashGet(allReports, [`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, 'parentReportID']) : reportID;
}

/**
* Return the pendingAction and the errors when we have creating a chat or a workspace room offline
* @param {Object} report
* @returns {Object} pending action , errors
*/
function getReportOfflinePendingActionAndErrors(report) {
// We are either adding a workspace room, or we're creating a chat, it isn't possible for both of these to be pending, or to have errors for the same report at the same time, so
// simply looking up the first truthy value for each case will get the relevant property if it's set.
const addWorkspaceRoomOrChatPendingAction = lodashGet(report, 'pendingFields.addWorkspaceRoom') || lodashGet(report, 'pendingFields.createChat');
const addWorkspaceRoomOrChatErrors = lodashGet(report, 'errorFields.addWorkspaceRoom') || lodashGet(report, 'errorFields.createChat');
return {addWorkspaceRoomOrChatPendingAction, addWorkspaceRoomOrChatErrors};
}

export {
getReportParticipantsTitle,
isReportMessageAttachment,
Expand Down Expand Up @@ -2589,4 +2602,5 @@ export {
shouldHideComposer,
getOriginalReportID,
canAccessReport,
getReportOfflinePendingActionAndErrors,
};
5 changes: 1 addition & 4 deletions src/pages/home/ReportScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,11 +232,8 @@ class ReportScreen extends React.Component {
}

render() {
// We are either adding a workspace room, or we're creating a chat, it isn't possible for both of these to be pending, or to have errors for the same report at the same time, so
// simply looking up the first truthy value for each case will get the relevant property if it's set.
const reportID = getReportID(this.props.route);
const addWorkspaceRoomOrChatPendingAction = lodashGet(this.props.report, 'pendingFields.addWorkspaceRoom') || lodashGet(this.props.report, 'pendingFields.createChat');
const addWorkspaceRoomOrChatErrors = lodashGet(this.props.report, 'errorFields.addWorkspaceRoom') || lodashGet(this.props.report, 'errorFields.createChat');
const {addWorkspaceRoomOrChatPendingAction, addWorkspaceRoomOrChatErrors} = ReportUtils.getReportOfflinePendingActionAndErrors(this.props.report);
const screenWrapperStyle = [styles.appContent, styles.flex1, {marginTop: this.props.viewportOffsetTop}];

// There are no reportActions at all to display and we are still in the process of loading the next set of actions.
Expand Down