diff --git a/src/ONYXKEYS.js b/src/ONYXKEYS.js index 6fe8a0625cd8..dbaf6a739e74 100755 --- a/src/ONYXKEYS.js +++ b/src/ONYXKEYS.js @@ -187,6 +187,7 @@ export default { HOME_ADDRESS_FORM: 'homeAddressForm', NEW_ROOM_FORM: 'newRoomForm', ROOM_SETTINGS_FORM: 'roomSettingsForm', + MONEY_REQUEST_DESCRIPTION_FORM: 'moneyRequestDescriptionForm', }, // Whether we should show the compose input or not diff --git a/src/ROUTES.js b/src/ROUTES.js index 470768a594ac..423169d6dd3e 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -75,6 +75,7 @@ export default { getIOUSendRoute: reportID => `${IOU_SEND}/${reportID}`, IOU_BILL_CURRENCY: `${IOU_BILL_CURRENCY}/:reportID?`, IOU_REQUEST_CURRENCY: `${IOU_REQUEST_CURRENCY}/:reportID?`, + MONEY_REQUEST_DESCRIPTION: `${IOU_REQUEST}/description`, IOU_SEND_CURRENCY: `${IOU_SEND_CURRENCY}/:reportID?`, IOU_SEND_ADD_BANK_ACCOUNT: `${IOU_SEND}/add-bank-account`, IOU_SEND_ADD_DEBIT_CARD: `${IOU_SEND}/add-debit-card`, diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 527b2620e557..85101babf5cb 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -30,7 +30,8 @@ const defaultProps = { shouldShowBasicTitle: false, shouldShowDescriptionOnTop: false, wrapperStyle: [], - style: {}, + style: styles.popoverMenuItem, + titleStyle: {}, success: false, icon: undefined, iconWidth: undefined, @@ -59,7 +60,7 @@ const MenuItem = (props) => { (props.shouldShowBasicTitle ? undefined : styles.textStrong), (props.interactive && props.disabled ? {...styles.disabledText, ...styles.userSelectNone} : undefined), styles.pre, - ], props.style); + ], props.titleStyle); const descriptionVerticalMargin = props.shouldShowDescriptionOnTop ? styles.mb1 : styles.mt1; const descriptionTextStyle = StyleUtils.combineStyles([ styles.textLabelSupporting, @@ -67,7 +68,7 @@ const MenuItem = (props) => { styles.breakWord, styles.lineHeightNormal, props.title ? descriptionVerticalMargin : undefined, - ], props.style); + ]); return ( { props.onPress(e); }} style={({hovered, pressed}) => ([ - styles.popoverMenuItem, + props.style, StyleUtils.getButtonBackgroundColorStyle(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive), true), ..._.isArray(props.wrapperStyle) ? props.wrapperStyle : [props.wrapperStyle], ])} diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index c97bfbfc675d..09732a485ce7 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -16,6 +16,8 @@ import SettlementButton from './SettlementButton'; import ROUTES from '../ROUTES'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from './withCurrentUserPersonalDetails'; import * as IOUUtils from '../libs/IOUUtils'; +import MenuItemWithTopDescription from './MenuItemWithTopDescription'; +import Navigation from '../libs/Navigation/Navigation'; import optionPropTypes from './optionPropTypes'; const propTypes = { @@ -25,12 +27,6 @@ const propTypes = { /** Callback to parent modal to send money */ onSendMoney: PropTypes.func.isRequired, - /** Callback to update comment from MoneyRequestModal */ - onUpdateComment: PropTypes.func, - - /** Comment value from MoneyRequestModal */ - comment: PropTypes.string, - /** Should we request a single or multiple participant selection from user */ hasMultipleParticipants: PropTypes.bool.isRequired, @@ -68,14 +64,15 @@ const propTypes = { session: PropTypes.shape({ email: PropTypes.string.isRequired, }), + + /** Callback function to navigate to a provided step in the MoneyRequestModal flow */ + navigateToStep: PropTypes.func.isRequired, }; const defaultProps = { iou: { selectedCurrencyCode: CONST.CURRENCY.USD, }, - onUpdateComment: null, - comment: '', iouType: CONST.IOU.MONEY_REQUEST_TYPE.REQUEST, canModifyParticipants: false, session: { @@ -193,12 +190,7 @@ class MoneyRequestConfirmationList extends Component { indexOffset: 1, }); } else { - const formattedParticipants = OptionsListUtils.getIOUConfirmationOptionsFromParticipants(this.props.participants, - this.props.numberFormat(this.props.iouAmount, { - style: 'currency', - currency: this.props.iou.selectedCurrencyCode, - })); - + const formattedParticipants = this.getParticipantsWithoutAmount(this.props.participants); sections.push({ title: this.props.translate('common.to'), data: formattedParticipants, @@ -272,24 +264,25 @@ class MoneyRequestConfirmationList extends Component { const shouldDisableButton = selectedParticipants.length === 0; const recipient = this.state.participants[0]; const canModifyParticipants = this.props.canModifyParticipants && this.props.hasMultipleParticipants; + const formattedAmount = this.props.numberFormat(this.props.iouAmount, { + style: 'currency', + currency: this.props.iou.selectedCurrencyCode, + }); return ( )} - /> + > + this.props.navigateToStep(0)} + style={styles.moneyRequestMenuItem} + titleStyle={styles.moneyRequestConfirmationAmount} + /> + Navigation.navigate(ROUTES.MONEY_REQUEST_DESCRIPTION)} + style={styles.moneyRequestMenuItem} + /> + ); } } diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 66b613a1ce33..326072b73a1b 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -99,10 +99,12 @@ class BaseOptionsSelector extends Component { return; } - if (this.props.shouldDelayFocus) { - this.focusTimeout = setTimeout(() => this.textInput.focus(), CONST.ANIMATED_TRANSITION); - } else { - this.textInput.focus(); + if (this.props.shouldShowTextInput) { + if (this.props.shouldDelayFocus) { + this.focusTimeout = setTimeout(() => this.textInput.focus(), CONST.ANIMATED_TRANSITION); + } else { + this.textInput.focus(); + } } } @@ -238,7 +240,7 @@ class BaseOptionsSelector extends Component { */ selectRow(option, ref) { return new Promise((resolve) => { - if (this.props.shouldFocusOnSelectRow) { + if (this.props.shouldShowTextInput && this.props.shouldFocusOnSelectRow) { if (this.relatedTarget && ref === this.relatedTarget) { this.textInput.focus(); this.relatedTarget = null; @@ -328,13 +330,15 @@ class BaseOptionsSelector extends Component { {optionsList} - {textInput} + {this.props.children} + {this.props.shouldShowTextInput && textInput} ) : ( <> - {textInput} + {this.props.children} + {this.props.shouldShowTextInput && textInput} {optionsList} diff --git a/src/components/OptionsSelector/optionsSelectorPropTypes.js b/src/components/OptionsSelector/optionsSelectorPropTypes.js index 851b95f05c6e..c9eba7e5f362 100644 --- a/src/components/OptionsSelector/optionsSelectorPropTypes.js +++ b/src/components/OptionsSelector/optionsSelectorPropTypes.js @@ -28,7 +28,7 @@ const propTypes = { value: PropTypes.string.isRequired, /** Callback fired when text changes */ - onChangeText: PropTypes.func.isRequired, + onChangeText: PropTypes.func, /** Limits the maximum number of characters that can be entered in input field */ maxLength: PropTypes.number, @@ -84,6 +84,9 @@ const propTypes = { /** If true, the text input will be below the options in the selector, not above. */ shouldTextInputAppearBelowOptions: PropTypes.bool, + /** If false, the text input will not be shown at all. Defaults to true */ + shouldShowTextInput: PropTypes.bool, + /** Custom content to display in the footer instead of the default button. */ footerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]), @@ -125,6 +128,8 @@ const defaultProps = { shouldHaveOptionSeparator: false, initiallyFocusedOptionKey: undefined, maxLength: undefined, + shouldShowTextInput: true, + onChangeText: () => {}, }; export {propTypes, defaultProps}; diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js index 9f3b40a55b43..c1759d127cfe 100644 --- a/src/components/menuItemPropTypes.js +++ b/src/components/menuItemPropTypes.js @@ -14,6 +14,9 @@ const propTypes = { /** Used to apply offline styles to child text components */ style: stylePropTypes, + /** Used to apply styles specifically to the title */ + titleStyle: stylePropTypes, + /** Function to fire when component is pressed */ onPress: PropTypes.func, diff --git a/src/languages/en.js b/src/languages/en.js index 2d1d7b1e5e41..60929d33bb29 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -131,6 +131,7 @@ export default { yesContinue: 'Yes, continue', websiteExample: 'e.g. https://www.expensify.com', zipCodeExampleFormat: ({zipSampleFormat}) => (zipSampleFormat ? `e.g. ${zipSampleFormat}` : ''), + description: 'Description', }, attachmentPicker: { cameraPermissionRequired: 'Camera access', diff --git a/src/languages/es.js b/src/languages/es.js index 4f64858d766f..2ce2d75d77f4 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -130,6 +130,7 @@ export default { yesContinue: 'Sí, Continuar', websiteExample: 'p. ej. https://www.expensify.com', zipCodeExampleFormat: ({zipSampleFormat}) => (zipSampleFormat ? `p. ej. ${zipSampleFormat}` : ''), + description: 'Descripción', }, attachmentPicker: { cameraPermissionRequired: 'Permiso para acceder a la cámara', diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index 3fa206018cf8..957fa8cb6087 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -63,6 +63,13 @@ const IOURequestModalStackNavigator = createModalStackNavigator([{ return IOUCurrencySelection; }, name: 'IOU_Request_Currency', +}, +{ + getComponent: () => { + const MoneyRequestDescriptionPage = require('../../../pages/iou/MoneyRequestDescriptionPage').default; + return MoneyRequestDescriptionPage; + }, + name: 'Money_Request_Description', }]); const IOUSendModalStackNavigator = createModalStackNavigator([{ diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index 76e00c675852..71caa196abd0 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -226,6 +226,7 @@ export default { screens: { IOU_Request_Root: ROUTES.IOU_REQUEST_WITH_REPORT_ID, IOU_Request_Currency: ROUTES.IOU_REQUEST_CURRENCY, + Money_Request_Description: ROUTES.MONEY_REQUEST_DESCRIPTION, }, }, IOU_Bill: { diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index e73751dc5959..6e739253dd27 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -636,6 +636,15 @@ function setIOUSelectedCurrency(selectedCurrencyCode) { Onyx.merge(ONYXKEYS.IOU, {selectedCurrencyCode}); } +/** + * Sets Money Request description + * + * @param {String} comment + */ +function setMoneyRequestDescription(comment) { + Onyx.merge(ONYXKEYS.IOU, {comment}); +} + /** * @param {Number} amount * @param {String} submitterPayPalMeAddress @@ -1002,6 +1011,7 @@ export { payMoneyRequestElsewhere, payMoneyRequestViaPaypal, setIOUSelectedCurrency, + setMoneyRequestDescription, sendMoneyWithWallet, payMoneyRequestWithWallet, }; diff --git a/src/pages/iou/MoneyRequestDescriptionPage.js b/src/pages/iou/MoneyRequestDescriptionPage.js new file mode 100644 index 000000000000..eb5281ae8230 --- /dev/null +++ b/src/pages/iou/MoneyRequestDescriptionPage.js @@ -0,0 +1,97 @@ +import React, {Component} from 'react'; +import {View} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; +import PropTypes from 'prop-types'; +import TextInput from '../../components/TextInput'; +import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; +import ScreenWrapper from '../../components/ScreenWrapper'; +import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; +import Form from '../../components/Form'; +import ONYXKEYS from '../../ONYXKEYS'; +import styles from '../../styles/styles'; +import Navigation from '../../libs/Navigation/Navigation'; +import compose from '../../libs/compose'; +import * as IOU from '../../libs/actions/IOU'; + +const propTypes = { + ...withLocalizePropTypes, + + /** Onyx Props */ + /** Holds data related to Money Request view state, rather than the underlying Money Request data. */ + iou: PropTypes.shape({ + comment: PropTypes.string, + }), +}; + +const defaultProps = { + iou: { + comment: '', + }, +}; + +class MoneyRequestDescriptionPage extends Component { + constructor(props) { + super(props); + + this.updateComment = this.updateComment.bind(this); + } + + /** + * Closes the modal and clears the description from Onyx. + */ + onCloseButtonPress() { + IOU.setMoneyRequestDescription(''); + Navigation.dismissModal(); + } + + /** + * Sets the money request comment by saving it to Onyx. + * + * @param {Object} value + * @param {String} value.moneyRequestComment + */ + updateComment(value) { + IOU.setMoneyRequestDescription(value.moneyRequestComment); + Navigation.goBack(); + } + + render() { + return ( + + +
({})} + enabledWhenOffline + > + + + +
+ + ); + } +} + +MoneyRequestDescriptionPage.propTypes = propTypes; +MoneyRequestDescriptionPage.defaultProps = defaultProps; + +export default compose( + withLocalize, + withOnyx({ + iou: {key: ONYXKEYS.IOU}, + }), +)(MoneyRequestDescriptionPage); diff --git a/src/pages/iou/MoneyRequestModal.js b/src/pages/iou/MoneyRequestModal.js index 8ba09e0a02a1..14ff7fd682cf 100644 --- a/src/pages/iou/MoneyRequestModal.js +++ b/src/pages/iou/MoneyRequestModal.js @@ -104,14 +104,16 @@ const Steps = { }; const MoneyRequestModal = (props) => { - // Skip IOUParticipants step if participants are passed in + // Skip MoneyRequestParticipants step if participants are passed in const reportParticipants = lodashGet(props, 'report.participants', []); - const steps = reportParticipants.length ? [Steps.MoneyRequestAmount, Steps.MoneyRequestConfirm] : [Steps.MoneyRequestAmount, Steps.MoneyRequestParticipants, Steps.MoneyRequestConfirm]; - + const steps = useMemo(() => (reportParticipants.length + ? [Steps.MoneyRequestAmount, Steps.MoneyRequestConfirm] + : [Steps.MoneyRequestAmount, Steps.MoneyRequestParticipants, Steps.MoneyRequestConfirm]), + [reportParticipants.length]); const prevCreatingIOUTransactionStatusRef = useRef(lodashGet(props.iou, 'creatingIOUTransaction')); const prevNetworkStatusRef = useRef(props.network.isOffline); - const [previousStepIndex, setPreviousStepIndex] = useState(0); + const [previousStepIndex, setPreviousStepIndex] = useState(-1); const [currentStepIndex, setCurrentStepIndex] = useState(0); const [selectedOptions, setSelectedOptions] = useState( ReportUtils.isPolicyExpenseChat(props.report) @@ -119,11 +121,11 @@ const MoneyRequestModal = (props) => { : OptionsListUtils.getParticipantsOptions(props.report, props.personalDetails), ); const [amount, setAmount] = useState(''); - const [comment, setComment] = useState(''); useEffect(() => { PersonalDetails.openMoneyRequestModalPage(); IOU.setIOUSelectedCurrency(props.currentUserPersonalDetails.localCurrencyCode); + IOU.setMoneyRequestDescription(''); // eslint-disable-next-line react-hooks/exhaustive-deps -- props.currentUserPersonalDetails will always exist from Onyx and we don't want this effect to run again }, []); @@ -162,6 +164,17 @@ const MoneyRequestModal = (props) => { * @returns {String|null} */ const direction = useMemo(() => { + // If we're going to the "amount" step from the "confirm" step, push it in and pop it out like we're moving + // forward instead of backwards. + const amountIndex = _.indexOf(steps, Steps.MoneyRequestAmount); + const confirmIndex = _.indexOf(steps, Steps.MoneyRequestConfirm); + if (previousStepIndex === confirmIndex && currentStepIndex === amountIndex) { + return 'in'; + } + if (previousStepIndex === amountIndex && currentStepIndex === confirmIndex) { + return 'out'; + } + if (previousStepIndex < currentStepIndex) { return 'in'; } @@ -173,7 +186,7 @@ const MoneyRequestModal = (props) => { if (previousStepIndex === currentStepIndex) { return null; } - }, [previousStepIndex, currentStepIndex]); + }, [previousStepIndex, currentStepIndex, steps]); /** * Retrieve title for current step, based upon current step and type of request @@ -182,6 +195,10 @@ const MoneyRequestModal = (props) => { */ const titleForStep = useMemo(() => { if (currentStepIndex === 0) { + const confirmIndex = _.indexOf(steps, Steps.MoneyRequestConfirm); + if (previousStepIndex === confirmIndex) { + return props.translate('iou.amount'); + } if (props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.SEND) { return props.translate('iou.sendMoney'); } @@ -189,19 +206,38 @@ const MoneyRequestModal = (props) => { } return props.translate('iou.cash'); // eslint-disable-next-line react-hooks/exhaustive-deps -- props does not need to be a dependency as it will always exist - }, [currentStepIndex, props.translate]); + }, [currentStepIndex, props.translate, steps]); + + /** + * Navigate to a provided step. + * + * @param {Number} stepIndex + * @type {(function(*): void)|*} + */ + const navigateToStep = useCallback((stepIndex) => { + if (stepIndex < 0 || stepIndex > steps.length) { + return; + } + + if (currentStepIndex === stepIndex) { + return; + } + + setPreviousStepIndex(currentStepIndex); + setCurrentStepIndex(stepIndex); + }, [currentStepIndex, steps.length]); /** * Navigate to the previous request step if possible */ const navigateToPreviousStep = useCallback(() => { - if (currentStepIndex <= 0) { + if (currentStepIndex <= 0 && previousStepIndex < 0) { return; } setPreviousStepIndex(currentStepIndex); setCurrentStepIndex(currentStepIndex - 1); - }, [currentStepIndex]); + }, [currentStepIndex, previousStepIndex]); /** * Navigate to the next request step if possible @@ -211,9 +247,16 @@ const MoneyRequestModal = (props) => { return; } + // If we're coming from the confirm step, it means we were editing something so go back to the confirm step. + const confirmIndex = _.indexOf(steps, Steps.MoneyRequestConfirm); + if (previousStepIndex === confirmIndex) { + navigateToStep(confirmIndex); + return; + } + setPreviousStepIndex(currentStepIndex); setCurrentStepIndex(currentStepIndex + 1); - }, [currentStepIndex, steps.length]); + }, [currentStepIndex, previousStepIndex, navigateToStep, steps]); /** * Checks if user has a GOLD wallet then creates a paid IOU report on the fly @@ -223,7 +266,7 @@ const MoneyRequestModal = (props) => { const sendMoney = useCallback((paymentMethodType) => { const amountInDollars = Math.round(amount * 100); const currency = props.iou.selectedCurrencyCode; - const trimmedComment = comment.trim(); + const trimmedComment = props.iou.comment.trim(); const participant = selectedOptions[0]; if (paymentMethodType === CONST.IOU.PAYMENT_TYPE.ELSEWHERE) { @@ -260,14 +303,14 @@ const MoneyRequestModal = (props) => { participant, ); } - }, [amount, comment, selectedOptions, props.currentUserPersonalDetails.login, props.iou.selectedCurrencyCode, props.report]); + }, [amount, props.iou.comment, selectedOptions, props.currentUserPersonalDetails.login, props.iou.selectedCurrencyCode, props.report]); /** * @param {Array} selectedParticipants */ const createTransaction = useCallback((selectedParticipants) => { const reportID = lodashGet(props.route, 'params.reportID', ''); - const trimmedComment = comment.trim(); + const trimmedComment = props.iou.comment.trim(); // IOUs created from a group report will have a reportID param in the route. // Since the user is already viewing the report, we don't need to navigate them to the report @@ -309,12 +352,21 @@ const MoneyRequestModal = (props) => { selectedParticipants[0], trimmedComment, ); - }, [amount, comment, props.currentUserPersonalDetails.login, props.hasMultipleParticipants, props.iou.selectedCurrencyCode, props.preferredLocale, props.report, props.route]); + }, [amount, props.iou.comment, props.currentUserPersonalDetails.login, props.hasMultipleParticipants, props.iou.selectedCurrencyCode, props.preferredLocale, props.report, props.route]); const currentStep = steps[currentStepIndex]; + const moneyRequestStepIndex = _.indexOf(steps, Steps.MoneyRequestConfirm); + const isEditingAmountAfterConfirm = currentStepIndex === 0 && previousStepIndex === _.indexOf(steps, Steps.MoneyRequestConfirm); const reportID = lodashGet(props, 'route.params.reportID', ''); - const shouldShowBackButton = currentStepIndex > 0; - const modalHeader = ; + const shouldShowBackButton = currentStepIndex > 0 || isEditingAmountAfterConfirm; + const modalHeader = ( + navigateToStep(moneyRequestStepIndex) : navigateToPreviousStep} + /> + ); + const amountButtonText = isEditingAmountAfterConfirm ? props.translate('common.save') : props.translate('common.next'); return ( {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => ( @@ -339,6 +391,7 @@ const MoneyRequestModal = (props) => { selectedAmount={amount} navigation={props.navigation} iouType={props.iouType} + buttonText={amountButtonText} /> )} @@ -378,8 +431,6 @@ const MoneyRequestModal = (props) => { hasMultipleParticipants={props.hasMultipleParticipants} participants={_.filter(selectedOptions, email => props.currentUserPersonalDetails.login !== email.login)} iouAmount={amount} - comment={comment} - onUpdateComment={value => setComment(value)} iouType={props.iouType} // The participants can only be modified when the action is initiated from directly within a group chat and not the floating-action-button. @@ -388,6 +439,7 @@ const MoneyRequestModal = (props) => { // split rather than forcing the user to create a new group, just for that expense. The reportID is empty, when the action was initiated from // the floating-action-button (since it is something that exists outside the context of a report). canModifyParticipants={!_.isEmpty(reportID)} + navigateToStep={navigateToStep} /> )} diff --git a/src/pages/iou/steps/MoneyRequestAmountPage.js b/src/pages/iou/steps/MoneyRequestAmountPage.js index 7726bbbde8a4..10c260895490 100755 --- a/src/pages/iou/steps/MoneyRequestAmountPage.js +++ b/src/pages/iou/steps/MoneyRequestAmountPage.js @@ -32,6 +32,9 @@ const propTypes = { /** Previously selected amount to show if the user comes back to this screen */ selectedAmount: PropTypes.string.isRequired, + /** Text to display on the button that "saves" the amount */ + buttonText: PropTypes.string.isRequired, + /* Onyx Props */ /** Holds data related to IOU view state, rather than the underlying IOU data. */ @@ -336,7 +339,7 @@ class MoneyRequestAmountPage extends React.Component { onPress={() => this.props.onStepComplete(this.state.amount)} pressOnEnter isDisabled={!this.state.amount.length || parseFloat(this.state.amount) < 0.01} - text={this.props.translate('common.next')} + text={this.props.buttonText} /> diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js index 81935879ceff..673c229ad9c9 100644 --- a/src/pages/iou/steps/MoneyRequestConfirmPage.js +++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js @@ -8,15 +8,9 @@ const propTypes = { /** Callback to inform parent modal of success */ onConfirm: PropTypes.func.isRequired, - /** Callback to to parent modal to send money */ + /** Callback to parent modal to send money */ onSendMoney: PropTypes.func.isRequired, - /** Callback to update comment from MoneyRequestModal */ - onUpdateComment: PropTypes.func, - - /** Comment value from MoneyRequestModal */ - comment: PropTypes.string, - /** Should we request a single or multiple participant selection from user */ hasMultipleParticipants: PropTypes.bool.isRequired, @@ -31,11 +25,12 @@ const propTypes = { /** Can the participants be modified or not */ canModifyParticipants: PropTypes.bool, + + /** Function to navigate to a given step in the parent MoneyRequestModal */ + navigateToStep: PropTypes.func.isRequired, }; const defaultProps = { - onUpdateComment: null, - comment: '', iouType: CONST.IOU.MONEY_REQUEST_TYPE.REQUEST, canModifyParticipants: false, }; @@ -44,13 +39,12 @@ const MoneyRequestConfirmPage = props => ( ); diff --git a/src/styles/styles.js b/src/styles/styles.js index 92ee739b41e8..9c2eac87884a 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2281,6 +2281,19 @@ const styles = { lineHeight: undefined, }, 0), + moneyRequestConfirmationAmount: { + ...headlineFont, + fontSize: variables.fontSizeh1, + }, + + moneyRequestMenuItem: { + flexDirection: 'row', + borderRadius: 0, + justifyContent: 'space-between', + width: '100%', + marginBottom: 20, + }, + iouPreviewBox: { backgroundColor: themeColors.cardBG, borderRadius: variables.componentBorderRadiusCard,