Merge pull request #14344 from Expensify/cmartins-translateSendMoneyB…

…utton Translate IOU buttons
Expensify · Jan 20, 2023 · f586e02 · f586e02
2 parents 5aabd37 + 3b7d72a
commit f586e02
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 18 deletions.
diff --git a/src/components/ButtonWithMenu.js b/src/components/ButtonWithMenu.js
@@ -43,7 +43,7 @@ class ButtonWithMenu extends PureComponent {
         super(props);
 
         this.state = {
-            selectedItem: props.options[0],
+            selectedItemIndex: 0,
             isMenuVisible: false,
         };
     }
@@ -53,15 +53,15 @@ class ButtonWithMenu extends PureComponent {
     }
 
     render() {
-        const selectedItemText = this.state.selectedItem.text;
+        const selectedItem = this.props.options[this.state.selectedItemIndex];
         return (
             <View>
                 {this.props.options.length > 1 ? (
                     <ButtonWithDropdown
-                        buttonText={selectedItemText}
+                        buttonText={selectedItem.text}
                         isLoading={this.props.isLoading}
                         isDisabled={this.props.isDisabled}
-                        onButtonPress={event => this.props.onPress(event, this.state.selectedItem.value)}
+                        onButtonPress={event => this.props.onPress(event, selectedItem.value)}
                         onDropdownPress={() => {
                             this.setMenuVisibility(true);
                         }}
@@ -72,7 +72,7 @@ class ButtonWithMenu extends PureComponent {
                         isDisabled={this.props.isDisabled}
                         style={[styles.w100]}
                         isLoading={this.props.isLoading}
-                        text={selectedItemText}
+                        text={selectedItem.text}
                         onPress={event => this.props.onPress(event, this.props.options[0].value)}
                         pressOnEnter
                     />
@@ -84,10 +84,10 @@ class ButtonWithMenu extends PureComponent {
                         onItemSelected={() => this.setMenuVisibility(false)}
                         anchorPosition={styles.createMenuPositionRightSidepane}
                         headerText={this.props.menuHeaderText}
-                        menuItems={_.map(this.props.options, item => ({
+                        menuItems={_.map(this.props.options, (item, index) => ({
                             ...item,
                             onSelected: () => {
-                                this.setState({selectedItem: item});
+                                this.setState({selectedItemIndex: index});
                             },
                         }))}
                     />

diff --git a/src/components/IOUConfirmationList.js b/src/components/IOUConfirmationList.js
@@ -101,16 +101,6 @@ class IOUConfirmationList extends Component {
             ...participant, selected: true,
         }));
 
-        this.splitOrRequestOptions = [{
-            text: props.translate(props.hasMultipleParticipants ? 'iou.split' : 'iou.request', {
-                amount: props.numberFormat(
-                    props.iouAmount,
-                    {style: 'currency', currency: props.iou.selectedCurrencyCode},
-                ),
-            }),
-            value: props.hasMultipleParticipants ? CONST.IOU.IOU_TYPE.SPLIT : CONST.IOU.IOU_TYPE.REQUEST,
-        }];
-
         this.state = {
             participants: formattedParticipants,
         };
@@ -119,6 +109,22 @@ class IOUConfirmationList extends Component {
         this.confirm = this.confirm.bind(this);
     }
 
+    /**
+     * Get the confirmation button options
+     * @returns {Array}
+     */
+    getSplitOrRequestOptions() {
+        return [{
+            text: this.props.translate(this.props.hasMultipleParticipants ? 'iou.split' : 'iou.request', {
+                amount: this.props.numberFormat(
+                    this.props.iouAmount,
+                    {style: 'currency', currency: this.props.iou.selectedCurrencyCode},
+                ),
+            }),
+            value: this.props.hasMultipleParticipants ? CONST.IOU.IOU_TYPE.SPLIT : CONST.IOU.IOU_TYPE.REQUEST,
+        }];
+    }
+
     /**
      * Get selected participants
      * @returns {Array}
@@ -309,7 +315,7 @@ class IOUConfirmationList extends Component {
                         <ButtonWithMenu
                             isDisabled={shouldDisableButton}
                             onPress={(_event, value) => this.confirm(value)}
-                            options={this.splitOrRequestOptions}
+                            options={this.getSplitOrRequestOptions()}
                         />
                     )}
             />