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 displaying distance receipt images #26704

Merged
merged 15 commits into from
Sep 5, 2023
Merged

Fix displaying distance receipt images #26704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
a51601c
simplify render code
arosiclair Sep 4, 2023
c157585
use placeholder optimistic receipt
arosiclair Sep 4, 2023
168cf36
do not default to the actor account as the manager
arosiclair Sep 4, 2023
f14cbcd
try both transaction.filename and transaction.receiptFilename
arosiclair Sep 4, 2023
0f8f64b
use pending route receipt image
arosiclair Sep 4, 2023
b174d91
make sure filename is also set
arosiclair Sep 4, 2023
c9f4d7f
ignore thumbnail for local assets as well
arosiclair Sep 4, 2023
3ed0a45
Revert "ignore thumbnail for local assets as well"
arosiclair Sep 5, 2023
a202a8c
Revert "make sure filename is also set"
arosiclair Sep 5, 2023
035b011
Revert "use pending route receipt image"
arosiclair Sep 5, 2023
842e85f
transparent border
arosiclair Sep 5, 2023
a87da98
use border only for multiple images
arosiclair Sep 5, 2023
0eea032
use empty object instead
arosiclair Sep 5, 2023
0d81ba2
check for receipt first
arosiclair Sep 5, 2023
fcd8fd8
clarify thumbnail border logic
arosiclair Sep 5, 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
4 changes: 3 additions & 1 deletion src/components/ReportActionItem/MoneyRequestPreview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,8 @@ function MoneyRequestPreview(props) {
!_.isEmpty(requestMerchant) && !props.isBillSplit && requestMerchant !== CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT && requestMerchant !== CONST.TRANSACTION.DEFAULT_MERCHANT;
const shouldShowDescription = !_.isEmpty(description) && !shouldShowMerchant;

const receiptImages = hasReceipt ? [ReceiptUtils.getThumbnailAndImageURIs(props.transaction.receipt.source, props.transaction.filename || props.transaction.receiptFilename || '')] : [];

const getSettledMessage = () => {
switch (lodashGet(props.action, 'originalMessage.paymentType', '')) {
case CONST.IOU.PAYMENT_TYPE.PAYPAL_ME:
Expand Down Expand Up @@ -230,7 +232,7 @@ function MoneyRequestPreview(props) {
<View style={[styles.moneyRequestPreviewBox, isScanning || props.isWhisper ? styles.reportPreviewBoxHoverBorder : undefined, ...props.containerStyles]}>
{hasReceipt && (
<ReportActionItemImages
images={[ReceiptUtils.getThumbnailAndImageURIs(props.transaction.receipt.source, props.transaction.filename || '')]}
images={receiptImages}
arosiclair marked this conversation as resolved.
Show resolved Hide resolved
isHovered={isScanning}
/>
)}
Expand Down
6 changes: 5 additions & 1 deletion src/components/ReportActionItem/ReportActionItemImages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,14 @@ function ReportActionItemImages({images, size, total, isHovered}) {
<View style={[styles.reportActionItemImages, hoverStyle]}>
{_.map(shownImages, ({thumbnail, image}, index) => {
const isLastImage = index === numberOfShownImages - 1;

// Show a border to separate multiple images. Shown to the right for each except the last.
const shouldShowBorder = shownImages.length > 1 && index < shownImages.length - 1;
arosiclair marked this conversation as resolved.
Show resolved Hide resolved
const borderStyle = shouldShowBorder ? styles.reportActionItemImageBorder : {};
return (
<View
key={`${index}-${image}`}
style={[styles.reportActionItemImage, hoverStyle]}
style={[styles.reportActionItemImage, borderStyle, hoverStyle]}
>
<ReportActionItemImage
thumbnail={thumbnail}
Expand Down
7 changes: 5 additions & 2 deletions src/components/ReportActionItem/ReportPreview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ const defaultProps = {
};

function ReportPreview(props) {
const managerID = props.iouReport.managerID || props.action.actorAccountID || 0;
const managerID = props.iouReport.managerID || 0;
const isCurrentUserManager = managerID === lodashGet(props.session, 'accountID');
const reportTotal = ReportUtils.getMoneyRequestTotal(props.iouReport);

Expand All @@ -120,6 +120,9 @@ function ReportPreview(props) {
const isScanning = hasReceipts && ReportUtils.areAllRequestsBeingSmartScanned(props.iouReportID, props.action);
const hasErrors = hasReceipts && ReportUtils.hasMissingSmartscanFields(props.iouReportID);
const lastThreeTransactionsWithReceipts = ReportUtils.getReportPreviewDisplayTransactions(props.action);
const lastThreeReceipts = _.map(lastThreeTransactionsWithReceipts, ({receipt, filename, receiptFilename}) =>
ReceiptUtils.getThumbnailAndImageURIs(receipt.source, filename || receiptFilename || ''),
);
Copy link
Contributor

Choose a reason for hiding this comment

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

can you add hasReceipts check here too?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Commented about that here. We're already checking in ReportUtils.getReportPreviewDisplayTransactions


const hasOnlyOneReceiptRequest = numberOfRequests === 1 && hasReceipts;
const previewSubtitle = hasOnlyOneReceiptRequest
Expand Down Expand Up @@ -181,7 +184,7 @@ function ReportPreview(props) {
<View style={[styles.reportPreviewBox, props.isHovered || isScanning || props.isWhisper ? styles.reportPreviewBoxHoverBorder : undefined]}>
{hasReceipts && (
<ReportActionItemImages
images={_.map(lastThreeTransactionsWithReceipts, ({receipt, filename}) => ReceiptUtils.getThumbnailAndImageURIs(receipt.source, filename || ''))}
images={lastThreeReceipts}
arosiclair marked this conversation as resolved.
Show resolved Hide resolved
size={3}
total={transactionsWithReceipts.length}
isHovered={props.isHovered || isScanning}
Expand Down
9 changes: 7 additions & 2 deletions src/libs/actions/IOU.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import * as ErrorUtils from '../ErrorUtils';
import * as UserUtils from '../UserUtils';
import * as Report from './Report';
import * as NumberUtils from '../NumberUtils';
import ReceiptGeneric from '../../../assets/images/receipt-generic.png';

let allReports;
Onyx.connect({
Expand Down Expand Up @@ -394,7 +395,7 @@ function getMoneyRequestInformation(
let filename;
if (receipt && receipt.source) {
receiptObject.source = receipt.source;
receiptObject.state = CONST.IOU.RECEIPT_STATE.SCANREADY;
receiptObject.state = receipt.state || CONST.IOU.RECEIPT_STATE.SCANREADY;
filename = receipt.name;
}
let optimisticTransaction = TransactionUtils.buildOptimisticTransaction(
Expand Down Expand Up @@ -509,6 +510,10 @@ function getMoneyRequestInformation(
* @param {String} merchant
*/
function createDistanceRequest(report, participant, comment, created, transactionID, amount, currency, merchant) {
const optimisticReceipt = {
source: ReceiptGeneric,
arosiclair marked this conversation as resolved.
Show resolved Hide resolved
state: CONST.IOU.RECEIPT_STATE.OPEN,
};
const {iouReport, chatReport, transaction, iouAction, createdChatReportActionID, createdIOUReportActionID, reportPreviewAction, onyxData} = getMoneyRequestInformation(
report,
participant,
Expand All @@ -519,7 +524,7 @@ function createDistanceRequest(report, participant, comment, created, transactio
merchant,
null,
null,
null,
optimisticReceipt,
transactionID,
);
API.write(
Expand Down
11 changes: 7 additions & 4 deletions src/styles/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3778,8 +3778,8 @@ const styles = {

reportActionItemImages: {
flexDirection: 'row',
borderWidth: 2,
borderColor: themeColors.cardBG,
borderWidth: 4,
borderColor: themeColors.transparent,
borderTopLeftRadius: variables.componentBorderRadiusLarge,
borderTopRightRadius: variables.componentBorderRadiusLarge,
borderBottomLeftRadius: variables.componentBorderRadiusLarge,
Expand All @@ -3789,8 +3789,6 @@ const styles = {
},

reportActionItemImage: {
borderWidth: 1,
borderColor: themeColors.cardBG,
flex: 1,
width: '100%',
height: '100%',
Expand All @@ -3799,6 +3797,11 @@ const styles = {
alignItems: 'center',
},

reportActionItemImageBorder: {
borderRightWidth: 2,
borderColor: themeColors.cardBG,
},

reportActionItemImagesMore: {
position: 'absolute',
borderRadius: 18,
Expand Down
Loading