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

[No QA] Skip IOU participants step if launched from within chat #2321

Merged
merged 5 commits into from
Apr 22, 2021
Merged

[No QA] Skip IOU participants step if launched from within chat #2321

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6d7cd82
skip iou participants step
Maftalion Apr 9, 2021
180946b
Merge branch 'main' into matt-2246-skip-part-iou
Maftalion Apr 20, 2021
2175cbf
format participants for confirm page
Maftalion Apr 20, 2021
42c755a
remove route, fix proptype
Maftalion Apr 21, 2021
a87e33b
add new routes
Maftalion Apr 22, 2021
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
6 changes: 4 additions & 2 deletions src/ROUTES.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,10 @@ export default {
REPORT,
REPORT_WITH_ID: 'r/:reportID',
getReportRoute: reportID => `r/${reportID}`,
IOU_REQUEST: 'iou/request',
IOU_BILL: 'iou/split',
IOU_REQUEST: 'iou/request/:reportID',
getIouRequestRoute: reportID => `iou/request/${reportID}`,
IOU_BILL: 'iou/split/:reportID',
getIouSplitRoute: reportID => `iou/split/${reportID}`,
Maftalion marked this conversation as resolved.
Show resolved Hide resolved
SEARCH: 'search',
SIGNIN: 'signin',
SET_PASSWORD_WITH_VALIDATE_CODE: 'setpassword/:accountID/:validateCode',
Expand Down
64 changes: 53 additions & 11 deletions src/pages/iou/IOUModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, {Component} from 'react';
import {View, TouchableOpacity} from 'react-native';
import PropTypes from 'prop-types';
import lodashGet from 'lodash/get';
import {withOnyx} from 'react-native-onyx';
import IOUAmountPage from './steps/IOUAmountPage';
import IOUParticipantsPage from './steps/IOUParticipantsPage';
Expand All @@ -12,14 +13,21 @@ import {createIOUSplit, createIOUTransaction, getPreferredCurrency} from '../../
import {Close, BackArrow} from '../../components/Icon/Expensicons';
import Navigation from '../../libs/Navigation/Navigation';
import ONYXKEYS from '../../ONYXKEYS';
import {getPersonalDetailsForLogins} from '../../libs/OptionsListUtils';

/**
* IOU modal for requesting money and splitting bills.
*/
const propTypes = {
// Is this new IOU for a single request or group bill split?
// Whether the IOU is for a single request or a group bill split
hasMultipleParticipants: PropTypes.bool,

// The report passed via the route
report: PropTypes.shape({
// Participants associated with current report
participants: PropTypes.arrayOf(PropTypes.string),
}),

// Holds data related to IOU view state, rather than the underlying IOU data.
iou: PropTypes.shape({
// Whether or not transaction creation has started
Expand All @@ -29,11 +37,24 @@ const propTypes = {
error: PropTypes.bool,
}).isRequired,

// Personal details of all the users
personalDetails: PropTypes.shape({
// Primary login of participant
login: PropTypes.string,

// Display Name of participant
displayName: PropTypes.string,

// Avatar url of participant
avatar: PropTypes.string,
}).isRequired,
};

const defaultProps = {
hasMultipleParticipants: false,
report: {
participants: [],
},
};

// Determines type of step to display within Modal, value provides the title for that page.
Expand All @@ -43,29 +64,43 @@ const Steps = {
IOUConfirm: 'Confirm',
};

// The steps to be shown within the create IOU flow.
const steps = [Steps.IOUAmount, Steps.IOUParticipants, Steps.IOUConfirm];

class IOUModal extends Component {
constructor(props) {
super(props);

this.navigateToPreviousStep = this.navigateToPreviousStep.bind(this);
this.navigateToNextStep = this.navigateToNextStep.bind(this);
this.currencySelected = this.currencySelected.bind(this);
this.addParticipants = this.addParticipants.bind(this);
this.createTransaction = this.createTransaction.bind(this);
this.updateComment = this.updateComment.bind(this);
this.addParticipants = this.addParticipants.bind(this);
const participants = lodashGet(props, 'report.participants', []);
const participantsWithDetails = getPersonalDetailsForLogins(participants, props.personalDetails)
.map(personalDetails => ({
login: personalDetails.login,
text: personalDetails.displayName,
alternateText: personalDetails.login,
icons: [personalDetails.avatar],
Copy link
Contributor

Choose a reason for hiding this comment

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

There should now be an avatarThumbnail on personalDetails which is an 80x80 version of the image, can we double check to make sure we're using those instead of full sized? You might also need to update getPersonalDetailsForLogins

Copy link
Contributor

Choose a reason for hiding this comment

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

Good spot @thienlnam.

I could be wrong, but I think that might be out of scope for this issue as participant Avatars were implemented in a previous issue. If we spot that the incorrect size is used though, I'll be happy to create a new issue for this.

Copy link
Contributor

Choose a reason for hiding this comment

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

That's fair, let's go ahead with that then if the incorrect sizes are showing up

keyForList: personalDetails.login,
}));

this.state = {
currentStepIndex: 0,
participants: [],
participants: participantsWithDetails,

// amount is currency in decimal format
amount: '',
selectedCurrency: 'USD',
comment: '',
};

// Skip IOUParticipants step if participants are passed in
if (participants.length) {
// The steps to be shown within the create IOU flow.
this.steps = [Steps.IOUAmount, Steps.IOUConfirm];
} else {
this.steps = [Steps.IOUAmount, Steps.IOUParticipants, Steps.IOUConfirm];
}
}

componentDidMount() {
Expand All @@ -84,7 +119,6 @@ class IOUModal extends Component {
*
* @returns {String}
*/

getTitleForStep() {
const currentStepIndex = this.state.currentStepIndex;
if (currentStepIndex === 1 || currentStepIndex === 2) {
Expand All @@ -93,7 +127,7 @@ class IOUModal extends Component {
if (currentStepIndex === 0) {
return this.props.hasMultipleParticipants ? 'Split Bill' : 'Request Money';
}
return steps[currentStepIndex] || '';
return this.steps[currentStepIndex] || '';
}

addParticipants(participants) {
Expand All @@ -118,7 +152,7 @@ class IOUModal extends Component {
* Navigate to the previous IOU step if possible
*/
navigateToNextStep() {
if (this.state.currentStepIndex >= steps.length - 1) {
if (this.state.currentStepIndex >= this.steps.length - 1) {
return;
}
this.setState(prevState => ({
Expand Down Expand Up @@ -178,7 +212,7 @@ class IOUModal extends Component {
}

render() {
const currentStep = steps[this.state.currentStepIndex];
const currentStep = this.steps[this.state.currentStepIndex];
return (
<>
<View style={[styles.headerBar, true && styles.borderBottom]}>
Expand Down Expand Up @@ -250,8 +284,16 @@ IOUModal.defaultProps = defaultProps;
IOUModal.displayName = 'IOUModal';

export default withOnyx({
report: {
key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
},
iousReport: {
key: ONYXKEYS.COLLECTION.REPORT_IOUS,
},
iou: {key: ONYXKEYS.IOU},
iou: {
key: ONYXKEYS.IOU,
},
personalDetails: {
key: ONYXKEYS.PERSONAL_DETAILS,
},
})(IOUModal);