Use quotation marks

Expensify · Jun 28, 2022 · 75e4731 · 75e4731
1 parent 431727a
commit 75e4731
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 31 deletions.
diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js
@@ -151,23 +151,6 @@ class PaymentMethodList extends Component {
             });
         }
 
-        if (!this.props.shouldShowAddPaymentMethodButton) {
-            return combinedPaymentMethods;
-        }
-
-        combinedPaymentMethods.push({
-            type: BUTTON,
-            text: this.props.translate('paymentMethodList.addPaymentMethod'),
-            icon: Expensicons.CreditCard,
-            style: [styles.mh4],
-            iconStyles: [styles.mr4],
-            onPress: e => this.props.onPress(e),
-            isDisabled: this.props.isLoadingPayments,
-            shouldShowRightIcon: true,
-            success: true,
-            key: 'addPaymentMethodButton',
-        });
-
         return combinedPaymentMethods;
     }
 
@@ -235,11 +218,29 @@ class PaymentMethodList extends Component {
 
     render() {
         return (
-            <FlatList
-                data={this.createPaymentMethodList()}
-                renderItem={this.renderItem}
-                keyExtractor={item => item.key}
-            />
+            <>
+                <FlatList
+                    bounces={false}
+                    data={this.createPaymentMethodList()}
+                    renderItem={this.renderItem}
+                    keyExtractor={item => item.key}
+                />
+                {
+                    this.props.shouldShowAddPaymentMethodButton
+                    && (
+                        <Button
+                            text={this.props.translate('paymentMethodList.addPaymentMethod')}
+                            icon={Expensicons.CreditCard}
+                            onPress={e => this.props.onPress(e)}
+                            isDisabled={this.props.isLoadingPayments}
+                            style={[styles.mb4, styles.mh4]}
+                            success
+                            shouldShowRightIco
+                            extraLarge
+                        />
+                    )
+                }
+            </>
         );
     }
 }

diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
@@ -45,7 +45,8 @@ class BasePaymentsPage extends React.Component {
             selectedPaymentMethod: {},
             formattedSelectedPaymentMethod: {},
             anchorPositionTop: 0,
-            anchorPositionLeft: 0,
+            anchorPositionBottom: 0,
+            anchorPositionRigth: 0,
             addPaymentMethodButton: null,
         };
 
@@ -109,10 +110,24 @@ class BasePaymentsPage extends React.Component {
      */
     setPositionAddPaymentMenu(position) {
         this.setState({
-            anchorPositionTop: position.bottom,
+            anchorPositionTop: position.top + position.height,
 
             // We want the position to be 13px to the right of the left border
-            anchorPositionLeft: position.left + 13,
+            anchorPositionRigth: (window.innerWidth - position.right) + 13,
+        });
+    }
+
+    /**
+     * Set position of the payment method menu
+     *
+     * @param {Object} position
+     */
+    setPositionAddPaymentMethod(position) {
+        this.setState({
+            anchorPositionBottom: window.innerHeight - position.top,
+
+            // We want the position to be 5px to the right of the left border
+            anchorPositionRigth: (window.innerWidth - position.right) + 5,
         });
     }
 
@@ -129,6 +144,8 @@ class BasePaymentsPage extends React.Component {
         this.setState({
             addPaymentMethodButton: nativeEvent,
         });
+
+        // The delete/default menu
         if (accountType) {
             let formattedSelectedPaymentMethod;
             if (accountType === CONST.PAYMENT_METHODS.PAYPAL) {
@@ -166,7 +183,9 @@ class BasePaymentsPage extends React.Component {
         this.setState({
             shouldShowAddPaymentMenu: true,
         });
-        this.setPositionAddPaymentMenu(position);
+
+        // Add payment method menu
+        this.setPositionAddPaymentMethod(position);
     }
 
     /**
@@ -305,8 +324,8 @@ class BasePaymentsPage extends React.Component {
                         isVisible={this.state.shouldShowAddPaymentMenu}
                         onClose={this.hideAddPaymentMenu}
                         anchorPosition={{
-                            top: this.state.anchorPositionTop,
-                            left: this.state.anchorPositionLeft,
+                            bottom: this.state.anchorPositionBottom,
+                            right: this.state.anchorPositionRigth,
                         }}
                         onItemSelected={method => this.addPaymentMethodTypePressed(method)}
                     />
@@ -315,7 +334,7 @@ class BasePaymentsPage extends React.Component {
                         onClose={this.hideDefaultDeleteMenu}
                         anchorPosition={{
                             top: this.state.anchorPositionTop,
-                            left: this.state.anchorPositionLeft,
+                            right: this.state.anchorPositionRigth,
                         }}
                     >
                         <View
@@ -388,7 +407,7 @@ class BasePaymentsPage extends React.Component {
                         onClose={this.hidePasswordPrompt}
                         anchorPosition={{
                             top: this.state.anchorPositionTop,
-                            left: this.state.anchorPositionLeft,
+                            right: this.state.anchorPositionRigth,
                         }}
                         onSubmit={(password) => {
                             this.hidePasswordPrompt();
@@ -406,7 +425,7 @@ class BasePaymentsPage extends React.Component {
                         cancelText={this.props.translate('common.cancel')}
                         anchorPosition={{
                             top: this.state.anchorPositionTop,
-                            left: this.state.anchorPositionLeft,
+                            right: this.state.anchorPositionRigth,
                         }}
                         onConfirm={() => {
                             this.setState({