-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2394 from Expensify/jules-iouDetailsModal
IOU Details Modal
- Loading branch information
Showing
22 changed files
with
660 additions
and
128 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import {withOnyx} from 'react-native-onyx'; | ||
| import ONYXKEYS from '../ONYXKEYS'; | ||
| import ReportActionItemIOUQuote from './ReportActionItemIOUQuote'; | ||
| import ReportActionPropTypes from '../pages/home/report/ReportActionPropTypes'; | ||
| import ReportActionItemIOUPreview from './ReportActionItemIOUPreview'; | ||
| import Navigation from '../libs/Navigation/Navigation'; | ||
| import ROUTES from '../ROUTES'; | ||
|
|
||
| const propTypes = { | ||
| /** All the data of the action */ | ||
| action: PropTypes.shape(ReportActionPropTypes).isRequired, | ||
|
|
||
| /** The associated chatReport */ | ||
| chatReportID: PropTypes.number.isRequired, | ||
|
|
||
| /** Should render the preview Component? */ | ||
| shouldDisplayPreview: PropTypes.bool.isRequired, | ||
|
|
||
| /* Onyx Props */ | ||
| /** ChatReport associated with iouReport */ | ||
| chatReport: PropTypes.shape({ | ||
| /** The participants of this report */ | ||
| participants: PropTypes.arrayOf(PropTypes.string), | ||
| }), | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| chatReport: {}, | ||
| }; | ||
|
|
||
| const ReportActionItemIOUAction = ({ | ||
| action, | ||
| chatReportID, | ||
| shouldDisplayPreview, | ||
| chatReport, | ||
| }) => { | ||
| const launchDetailsModal = () => { | ||
| Navigation.navigate(ROUTES.getIouDetailsRoute(chatReportID, action.originalMessage.IOUReportID)); | ||
| }; | ||
| const hasMultipleParticipants = chatReport.participants.length >= 2; | ||
| return ( | ||
| <> | ||
| <ReportActionItemIOUQuote | ||
| action={action} | ||
| shouldShowViewDetailsLink={!hasMultipleParticipants} | ||
| onViewDetailsPressed={launchDetailsModal} | ||
| /> | ||
| {shouldDisplayPreview && ( | ||
| <ReportActionItemIOUPreview | ||
| iouReportID={action.originalMessage.IOUReportID} | ||
| onPayButtonPressed={launchDetailsModal} | ||
| /> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| ReportActionItemIOUAction.propTypes = propTypes; | ||
| ReportActionItemIOUAction.defaultProps = defaultProps; | ||
| ReportActionItemIOUAction.displayName = 'ReportActionItemIOUAction'; | ||
|
|
||
| export default withOnyx({ | ||
| chatReport: { | ||
| key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`, | ||
| }, | ||
| })(ReportActionItemIOUAction); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,58 @@ | ||
| import React from 'react'; | ||
| import {View} from 'react-native'; | ||
| import {View, Text} from 'react-native'; | ||
| import PropTypes from 'prop-types'; | ||
| import _ from 'underscore'; | ||
| import styles from '../styles/styles'; | ||
| import ReportActionPropTypes from '../pages/home/report/ReportActionPropTypes'; | ||
| import RenderHTML from './RenderHTML'; | ||
| import withLocalize, {withLocalizePropTypes} from './withLocalize'; | ||
|
|
||
| const propTypes = { | ||
| /** All the data of the action */ | ||
| action: PropTypes.shape(ReportActionPropTypes).isRequired, | ||
|
|
||
| /** Should the View Details link be displayed? */ | ||
| shouldShowViewDetailsLink: PropTypes.bool, | ||
|
|
||
| /** Callback invoked when View Details is pressed */ | ||
| onViewDetailsPressed: PropTypes.func, | ||
|
|
||
| ...withLocalizePropTypes, | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| shouldShowViewDetailsLink: false, | ||
| onViewDetailsPressed: () => {}, | ||
| }; | ||
|
|
||
| const ReportActionItemIOUQuote = ({action}) => ( | ||
| const ReportActionItemIOUQuote = ({ | ||
| action, | ||
| shouldShowViewDetailsLink, | ||
| onViewDetailsPressed, | ||
| translate, | ||
| }) => ( | ||
| <View style={[styles.chatItemMessage]}> | ||
| {_.map(action.message, (fragment, index) => { | ||
| const viewDetails = '<br /><a href="#">View Details</a>'; | ||
| const html = `<blockquote>${fragment.text}${viewDetails}</blockquote>`; | ||
| return ( | ||
| <RenderHTML key={`iouQuote-${action.sequenceNumber}-${index}`} html={html} /> | ||
| ); | ||
| })} | ||
| {_.map(action.message, (fragment, index) => ( | ||
| <View key={`iouQuote-${action.sequenceNumber}-${index}`}> | ||
| <View style={[styles.blockquote]}> | ||
| <Text style={[styles.chatItemMessage]}> | ||
| {fragment.text} | ||
| </Text> | ||
| {shouldShowViewDetailsLink && ( | ||
| <Text | ||
| style={[styles.chatItemMessageLink]} | ||
| onPress={onViewDetailsPressed} | ||
| > | ||
| {translate('iou.viewDetails')} | ||
| </Text> | ||
| )} | ||
| </View> | ||
| </View> | ||
| ))} | ||
| </View> | ||
| ); | ||
|
|
||
| ReportActionItemIOUQuote.propTypes = propTypes; | ||
| ReportActionItemIOUQuote.defaultProps = defaultProps; | ||
| ReportActionItemIOUQuote.displayName = 'ReportActionItemIOUQuote'; | ||
|
|
||
| export default ReportActionItemIOUQuote; | ||
| export default withLocalize(ReportActionItemIOUQuote); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import {Text} from 'react-native'; | ||
| import styles from '../styles/styles'; | ||
| import ReportActionPropTypes from '../pages/home/report/ReportActionPropTypes'; | ||
| import ReportActionItemSingle from '../pages/home/report/ReportActionItemSingle'; | ||
|
|
||
| const propTypes = { | ||
| /** The chatReport which the transaction is associated with */ | ||
| /* eslint-disable-next-line react/no-unused-prop-types */ | ||
| chatReportID: PropTypes.number.isRequired, | ||
|
|
||
| /** ID for the IOU report */ | ||
| /* eslint-disable-next-line react/no-unused-prop-types */ | ||
| iouReportID: PropTypes.number.isRequired, | ||
|
|
||
| /** The report action which we are displaying */ | ||
| action: PropTypes.shape(ReportActionPropTypes).isRequired, | ||
| }; | ||
|
|
||
| const ReportTransaction = ({ | ||
| action, | ||
| }) => ( | ||
| <ReportActionItemSingle | ||
| action={action} | ||
| wrapperStyles={[styles.reportTransaction]} | ||
| > | ||
| <Text style={[styles.chatItemMessage]}> | ||
| {action.message[0].text} | ||
| </Text> | ||
| </ReportActionItemSingle> | ||
| ); | ||
|
|
||
| ReportTransaction.displayName = 'ReportTransaction'; | ||
| ReportTransaction.propTypes = propTypes; | ||
| export default ReportTransaction; |
Oops, something went wrong.