Skip to content

Commit

Permalink
Merge pull request Expensify#26603 from Expensify/vit-26503theft
Browse files Browse the repository at this point in the history 
Design clean-up and consistency across expense reports and requests
  • Loading branch information
@Julesssss
Julesssss authored Sep 4, 2023
2 parents d58bc2a + 05d63ca commit a7cba2d
Show file tree
Hide file tree
Showing 7 changed files with 41 additions and 20 deletions.
1 change: 1 addition & 0 deletions src/CONST.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -666,6 +666,7 @@ const CONST = {
TRANSACTION: {
DEFAULT_MERCHANT: 'Request',
UNKNOWN_MERCHANT: 'Unknown Merchant',
PARTIAL_TRANSACTION_MERCHANT: '(none)',
TYPE: {
CUSTOM_UNIT: 'customUnit',
},
Expand Down
6 changes: 6 additions & 0 deletions src/components/ReportActionItem/MoneyRequestAction.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,9 @@ const propTypes = {

network: networkPropTypes.isRequired,

/** Whether a message is a whisper */
isWhisper: PropTypes.bool,

/** Styles to be assigned to Container */
// eslint-disable-next-line react/forbid-prop-types
style: PropTypes.arrayOf(PropTypes.object),
Expand All @@ -71,6 +74,7 @@ const defaultProps = {
reportActions: {},
isHovered: false,
style: [],
isWhisper: false,
};

function MoneyRequestAction({
Expand All @@ -86,6 +90,7 @@ function MoneyRequestAction({
isHovered,
network,
style,
isWhisper,
}) {
const {translate} = useLocalize();
const isSplitBillAction = lodashGet(action, 'originalMessage.type', '') === CONST.IOU.REPORT_ACTION_TYPE.SPLIT;
Expand Down Expand Up @@ -137,6 +142,7 @@ function MoneyRequestAction({
onPreviewPressed={onMoneyRequestPreviewPressed}
containerStyles={[styles.cursorPointer, isHovered ? styles.reportPreviewBoxHoverBorder : undefined, ...style]}
isHovered={isHovered}
isWhisper={isWhisper}
/>
);
}
Expand Down
21 changes: 12 additions & 9 deletions src/components/ReportActionItem/MoneyRequestPreview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,6 @@ import * as CurrencyUtils from '../../libs/CurrencyUtils';
import * as IOUUtils from '../../libs/IOUUtils';
import * as ReportUtils from '../../libs/ReportUtils';
import * as TransactionUtils from '../../libs/TransactionUtils';
import * as StyleUtils from '../../styles/StyleUtils';
import getButtonState from '../../libs/getButtonState';
import refPropTypes from '../refPropTypes';
import PressableWithFeedback from '../Pressable/PressableWithoutFeedback';
import * as ReceiptUtils from '../../libs/ReceiptUtils';
Expand Down Expand Up @@ -111,6 +109,9 @@ const propTypes = {
*/
shouldShowPendingConversionMessage: PropTypes.bool,

/** Whether a message is a whisper */
isWhisper: PropTypes.bool,

...withLocalizePropTypes,
};

Expand All @@ -129,6 +130,7 @@ const defaultProps = {
},
transaction: {},
shouldShowPendingConversionMessage: false,
isWhisper: false,
};

function MoneyRequestPreview(props) {
Expand Down Expand Up @@ -156,6 +158,11 @@ function MoneyRequestPreview(props) {
const hasFieldErrors = TransactionUtils.hasMissingSmartscanFields(props.transaction);
const isDistanceRequest = TransactionUtils.isDistanceRequest(props.transaction);

// Show the merchant for IOUs and expenses only if they are custom or not related to scanning smartscan
const shouldShowMerchant =
!_.isEmpty(requestMerchant) && !props.isBillSplit && requestMerchant !== CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT && requestMerchant !== CONST.TRANSACTION.DEFAULT_MERCHANT;
const shouldShowDescription = !_.isEmpty(description) && !shouldShowMerchant;

const getSettledMessage = () => {
switch (lodashGet(props.action, 'originalMessage.paymentType', '')) {
case CONST.IOU.PAYMENT_TYPE.PAYPAL_ME:
Expand Down Expand Up @@ -220,7 +227,7 @@ function MoneyRequestPreview(props) {
errorRowStyles={[styles.mbn1]}
needsOffscreenAlphaCompositing
>
<View style={[styles.moneyRequestPreviewBox, isScanning ? styles.reportPreviewBoxHoverBorder : undefined, ...props.containerStyles]}>
<View style={[styles.moneyRequestPreviewBox, isScanning || props.isWhisper ? styles.reportPreviewBoxHoverBorder : undefined, ...props.containerStyles]}>
{hasReceipt && (
<ReportActionItemImages
images={[ReceiptUtils.getThumbnailAndImageURIs(props.transaction.receipt.source, props.transaction.filename || '')]}
Expand Down Expand Up @@ -249,10 +256,6 @@ function MoneyRequestPreview(props) {
fill={colors.red}
/>
)}
<Icon
fill={StyleUtils.getIconFillColor(getButtonState(props.isHovered))}
src={Expensicons.ArrowRight}
/>
</View>
<View style={[styles.flexRow]}>
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
Expand All @@ -278,7 +281,7 @@ function MoneyRequestPreview(props) {
</View>
)}
</View>
{!props.isBillSplit && !_.isEmpty(requestMerchant) && (
{shouldShowMerchant && (
<View style={[styles.flexRow]}>
<Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20, styles.breakWord]}>{requestMerchant}</Text>
</View>
Expand All @@ -288,7 +291,7 @@ function MoneyRequestPreview(props) {
{!isCurrentUserManager && props.shouldShowPendingConversionMessage && (
<Text style={[styles.textLabel, styles.colorMuted, styles.mt1]}>{props.translate('iou.pendingConversionMessage')}</Text>
)}
{!_.isEmpty(description) && <Text style={[styles.mt1, styles.colorMuted]}>{description}</Text>}
{shouldShowDescription && <Text style={[styles.mt1, styles.colorMuted]}>{description}</Text>}
</View>
{props.isBillSplit && !_.isEmpty(participantAccountIDs) && (
<Text style={[styles.textLabel, styles.colorMuted, styles.ml1]}>
Expand Down
14 changes: 6 additions & 8 deletions src/components/ReportActionItem/ReportPreview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,6 @@ import ROUTES from '../../ROUTES';
import SettlementButton from '../SettlementButton';
import * as IOU from '../../libs/actions/IOU';
import refPropTypes from '../refPropTypes';
import * as StyleUtils from '../../styles/StyleUtils';
import getButtonState from '../../libs/getButtonState';
import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
import themeColors from '../../styles/themes/default';
import reportPropTypes from '../../pages/reportPropTypes';
Expand Down Expand Up @@ -89,6 +87,9 @@ const propTypes = {
/** Callback for updating context menu active state, used for showing context menu */
checkIfContextMenuActive: PropTypes.func,

/** Whether a message is a whisper */
isWhisper: PropTypes.bool,

...withLocalizePropTypes,
};

Expand All @@ -101,6 +102,7 @@ const defaultProps = {
session: {
accountID: null,
},
isWhisper: false,
};

function ReportPreview(props) {
Expand Down Expand Up @@ -176,7 +178,7 @@ function ReportPreview(props) {
accessibilityRole="button"
accessibilityLabel={props.translate('iou.viewDetails')}
>
<View style={[styles.reportPreviewBox, props.isHovered || isScanning ? styles.reportPreviewBoxHoverBorder : undefined]}>
<View style={[styles.reportPreviewBox, props.isHovered || isScanning || props.isWhisper ? styles.reportPreviewBoxHoverBorder : undefined]}>
{hasReceipts && (
<ReportActionItemImages
images={_.map(lastThreeTransactionsWithReceipts, ({receipt, filename}) => ReceiptUtils.getThumbnailAndImageURIs(receipt.source, filename || ''))}
Expand All @@ -196,10 +198,6 @@ function ReportPreview(props) {
fill={colors.red}
/>
)}
<Icon
fill={StyleUtils.getIconFillColor(getButtonState(props.isHovered))}
src={Expensicons.ArrowRight}
/>
</View>
<View style={styles.flexRow}>
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
Expand All @@ -214,7 +212,7 @@ function ReportPreview(props) {
)}
</View>
</View>
{hasReceipts && !isScanning && (
{!isScanning && (numberOfRequests > 1 || hasReceipts) && (
<View style={styles.flexRow}>
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
<Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{previewSubtitle || moneyRequestComment}</Text>
Expand Down
10 changes: 9 additions & 1 deletion src/libs/ReportUtils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,15 @@ function getPolicyName(report, returnEmptyIfNotFound = false, policy = undefined

// Public rooms send back the policy name with the reportSummary,
// since they can also be accessed by people who aren't in the workspace
return lodashGet(finalPolicy, 'name') || report.policyName || report.oldPolicyName || noPolicyFound;
const policyName = lodashGet(finalPolicy, 'name') || report.policyName || report.oldPolicyName || noPolicyFound;

// The SBE and SAASTR policies have the user name in its name, however, we do not want to show that
if (lodashGet(finalPolicy, 'owner') === CONST.EMAIL.SBE || lodashGet(finalPolicy, 'owner') === CONST.EMAIL.SAASTR) {
const policyNameParts = policyName.split(' ');
if (!Str.isValidEmail(policyNameParts[0])) return policyName;
return policyNameParts.length > 1 ? policyNameParts.slice(1).join(' ') : policyName;
}
return policyName;
}

/**
Expand Down
7 changes: 5 additions & 2 deletions src/pages/home/report/ReportActionItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,10 +244,11 @@ function ReportActionItem(props) {
/**
* Get the content of ReportActionItem
* @param {Boolean} hovered whether the ReportActionItem is hovered
* @param {Boolean} isWhisper whether the report action is a whisper
* @param {Boolean} hasErrors whether the report action has any errors
* @returns {Object} child component(s)
*/
const renderItemContent = (hovered = false, hasErrors = false) => {
const renderItemContent = (hovered = false, isWhisper = false, hasErrors = false) => {
let children;
const originalMessage = lodashGet(props.action, 'originalMessage', {});

Expand All @@ -273,6 +274,7 @@ function ReportActionItem(props) {
contextMenuAnchor={popoverAnchorRef}
checkIfContextMenuActive={toggleContextMenuFromActiveReportAction}
style={props.displayAsGroup ? [] : [styles.mt2]}
isWhisper={isWhisper}
/>
);
} else if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW) {
Expand All @@ -286,6 +288,7 @@ function ReportActionItem(props) {
isHovered={hovered}
contextMenuAnchor={popoverAnchorRef}
checkIfContextMenuActive={toggleContextMenuFromActiveReportAction}
isWhisper={isWhisper}
/>
);
} else if (
Expand Down Expand Up @@ -447,7 +450,7 @@ function ReportActionItem(props) {
* @returns {Object} report action item
*/
const renderReportActionItem = (hovered, isWhisper, hasErrors) => {
const content = renderItemContent(hovered || isContextMenuActive, hasErrors);
const content = renderItemContent(hovered || isContextMenuActive, isWhisper, hasErrors);

if (props.draftMessage) {
return <ReportActionItemDraft>{content}</ReportActionItemDraft>;
Expand Down
2 changes: 2 additions & 0 deletions src/styles/styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3782,6 +3782,8 @@ const styles = {
borderColor: themeColors.cardBG,
borderTopLeftRadius: variables.componentBorderRadiusLarge,
borderTopRightRadius: variables.componentBorderRadiusLarge,
borderBottomLeftRadius: variables.componentBorderRadiusLarge,
borderBottomRightRadius: variables.componentBorderRadiusLarge,
overflow: 'hidden',
height: 200,
},
Expand Down

0 comments on commit a7cba2d

Please sign in to comment.