Add default/delete popover and supporting methods

src/components/ConfirmPopover.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import {View, TouchableOpacity} from 'react-native';
+import PropTypes from 'prop-types';
+import styles from '../styles/styles';
+import Popover from './Popover';
+import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import compose from '../libs/compose';
+import Text from './Text';
+
+const propTypes = {
+    /** Title of the modal */
+    title: PropTypes.string.isRequired,
+
+    /** A callback to call when the form has been submitted */
+    onConfirm: PropTypes.func.isRequired,
+
+    /** A callback to call when the form has been closed */
+    onCancel: PropTypes.func,
+
+    /** Modal visibility */
+    isVisible: PropTypes.bool.isRequired,
+
+    /** Confirm button text */
+    confirmText: PropTypes.string,
+
+    /** Cancel button text */
+    cancelText: PropTypes.string,
+
+    /** Is the action destructive */
+    danger: PropTypes.bool,
+
+    /** Whether we should show the cancel button */
+    shouldShowCancelButton: PropTypes.bool,
+
+    /** Where the popover should be positioned */
+    anchorPosition: PropTypes.shape({
+        top: PropTypes.number,
+        left: PropTypes.number,
+    }).isRequired,
+
+    ...withLocalizePropTypes,
+
+    ...windowDimensionsPropTypes,
+};
+
+const defaultProps = {
+    confirmText: '',
+    cancelText: '',
+    danger: false,
+    onCancel: () => {},
+    shouldShowCancelButton: true,
+};
+
+const ConfirmPopover = props => (
+    <Popover
+        onSubmit={props.onConfirm}
+        onClose={props.onCancel}
+        isVisible={props.isVisible}
+        anchorPosition={props.anchorPosition}
+    >
+        <View
+            style={[
+                styles.m5,
+                styles.alignItemsCenter,
+                !props.isSmallScreenWidth ? styles.sidebarPopover : '',
+            ]}
+        >
+            <Text
+                style={[
+                    styles.mb5,
+                ]}
+            >
+                {props.title}
+            </Text>
+            <TouchableOpacity
+                style={[
+                    styles.button,
+                    styles.mt2,
+                    styles.w100,
+                    props.danger ? styles.buttonDanger : styles.buttonSuccess,
+                    styles.alignSelfCenter,
+                ]}
+                onPress={props.onConfirm}
+            >
+                <Text style={[styles.buttonText, props.danger && styles.textWhite]}>
+                    {props.confirmText || props.translate('common.yes')}
+                </Text>
+            </TouchableOpacity>
+            {props.shouldShowCancelButton
+            && (
+                <TouchableOpacity
+                    style={[
+                        styles.button,
+                        styles.mt4,
+                        styles.w100,
+                        styles.alignSelfCenter,
+                    ]}
+                    onPress={props.onCancel}
+                >
+                    <Text style={[styles.buttonText]}>
+                        {props.cancelText || props.translate('common.no')}
+                    </Text>
+                </TouchableOpacity>
+            )}
+        </View>
+    </Popover>
+);
+
+ConfirmPopover.propTypes = propTypes;
+ConfirmPopover.defaultProps = defaultProps;
+ConfirmPopover.displayName = 'ConfirmPopover';
+export default compose(
+    withWindowDimensions,
+    withLocalize,
+)(ConfirmPopover);

src/components/PasswordPopover.js

@@ -0,0 +1,119 @@
+import {TouchableOpacity, View} from 'react-native';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import styles from '../styles/styles';
+import Text from './Text';
+import Popover from './Popover';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import compose from '../libs/compose';
+import withWindowDimensions from './withWindowDimensions';
+import TextInput from './TextInput';
+
+const propTypes = {
+    /** Is the popover currently showing? */
+    isVisible: PropTypes.bool.isRequired,
+
+    /** Function that gets called when the user closes the modal */
+    onClose: PropTypes.func.isRequired,
+
+    /** Where the popover should be placed */
+    anchorPosition: PropTypes.shape({
+        top: PropTypes.number,
+        left: PropTypes.number,
+    }).isRequired,
+
+    /** Function that gets called when the user clicks the delete / make default button */
+    onSubmit: PropTypes.func,
+
+    /** The text that should be displayed in the submit button */
+    submitButtonText: PropTypes.string,
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    onSubmit: () => {},
+    submitButtonText: '',
+};
+
+class PasswordPopover extends Component {
+    constructor(props) {
+        super(props);
+
+        this.passwordInput = undefined;
+
+        this.focusInput = this.focusInput.bind(this);
+
+        this.state = {
+            password: '',
+        };
+    }
+
+    /**
+     * Focus the password input
+     */
+    focusInput() {
+        if (!this.passwordInput) {
+            return;
+        }
+        this.passwordInput.focus();
+    }
+
+    render() {
+        return (
+            <Popover
+                isVisible={this.props.isVisible}
+                onClose={this.props.onClose}
+                anchorPosition={this.props.anchorPosition}
+                onModalShow={this.focusInput}
+            >
+                <View
+                    style={[
+                        styles.m5,
+                        !this.props.isSmallScreenWidth ? styles.sidebarPopover : '',
+                    ]}
+                >
+                    <Text
+                        style={[
+                            styles.mb3,
+                        ]}
+                    >
+                        {this.props.translate('passwordForm.pleaseFillPassword')}
+                    </Text>
+                    <TextInput
+                        label={this.props.translate('common.password')}
+                        ref={el => this.passwordInput = el}
+                        secureTextEntry
+                        autoCompleteType="password"
+                        textContentType="password"
+                        value={this.state.currentPassword}
+                        onChangeText={password => this.setState({password})}
+                        returnKeyType="done"
+                        onSubmitEditing={() => this.props.onSubmit(this.state.password)}
+                        style={styles.mt3}
+                        autoFocus
+                    />
+                    <TouchableOpacity
+                        onPress={() => this.props.onSubmit(this.state.password)}
+                        style={[
+                            styles.button,
+                            styles.mt3,
+                            styles.w100,
+                        ]}
+                    >
+                        <Text style={[styles.buttonText]}>
+                            {this.props.submitButtonText}
+                        </Text>
+                    </TouchableOpacity>
+                </View>
+            </Popover>
+        );
+    }
+}
+
+PasswordPopover.propTypes = propTypes;
+PasswordPopover.defaultProps = defaultProps;
+export default compose(
+    withWindowDimensions,
+    withLocalize,
+)(PasswordPopover);

src/languages/en.js

@@ -349,6 +349,13 @@ export default {
     },
     paymentsPage: {
         paymentMethodsTitle: 'Payment methods',
+        setDefaultConfirmation: 'Make default payment method',
+        setDefaultSuccess: 'Default payment method set!',
+        setDefaultFailure: 'Failed to set default payment method.',
+        deleteConfirmation: 'Are you sure that you want to delete this account?',
+        deleteBankAccountSuccess: 'Bank account successfully deleted',
+        deleteDebitCardSuccess: 'Debit Card successfully deleted',
+        deletePayPalSuccess: 'PayPal.me successfully deleted',
         allSet: 'All Set!',
         transferConfirmText: ({amount}) => `${amount} will hit your account shortly!`,
         gotIt: 'Got it, Thanks!',
@@ -373,6 +380,7 @@ export default {
         accountLastFour: 'Account ending in',
         cardLastFour: 'Card ending in',
         addFirstPaymentMethod: 'Add a payment method to send and receive payments directly in the app.',
+        defaultPaymentMethod: 'Default',
     },
     preferencesPage: {
         mostRecent: 'Most recent',

src/languages/es.js

@@ -349,6 +349,13 @@ export default {
     },
     paymentsPage: {
         paymentMethodsTitle: 'Métodos de pago',
+        setDefaultConfirmation: 'Marcar como método de pago predeterminado',
+        setDefaultSuccess: 'Método de pago configurado',
+        setDefaultFailure: 'No se ha podido configurar el método de pago.',
+        deleteConfirmation: '¿Estás seguro de que quieres eliminar esta cuenta?',
+        deleteBankAccountSuccess: 'Cuenta bancaria eliminada correctamente',
+        deleteDebitCardSuccess: 'Tarjeta de débito eliminada correctamente',
+        deletePayPalSuccess: 'PayPal.me eliminada correctamente',
         allSet: 'Todo listo!',
         transferConfirmText: ({amount}) => `${amount} llegará a tu cuenta en breve!`,
         gotIt: 'Gracias!',
@@ -373,6 +380,7 @@ export default {
         accountLastFour: 'Cuenta con terminación',
         cardLastFour: 'Tarjeta con terminacíon',
         addFirstPaymentMethod: 'Añade un método de pago para enviar y recibir pagos directamente desde la aplicación.',
+        defaultPaymentMethod: 'Predeterminado',
     },
     preferencesPage: {
         mostRecent: 'Más recientes',

src/libs/API.js

@@ -418,6 +418,17 @@ function CreateLogin(parameters) {
     return Network.post(commandName, parameters);
 }
 
+/**
+ * @param {Object} parameters
+ * @param {Number} parameters.fundID
+ * @returns {Promise}
+ */
+function DeleteFund(parameters) {
+    const commandName = 'DeleteFund';
+    requireParameters(['fundID'], parameters, commandName);
+    return Network.post(commandName, parameters);
+}
+
 /**
  * @param {Object} parameters
  * @param {String} parameters.partnerUserID
@@ -739,6 +750,19 @@ function SetPassword(parameters) {
     return Network.post(commandName, parameters);
 }
 
+/**
+ * @param {Object} parameters
+ * @param {String} parameters.password
+ * @param {String|null} parameters.bankAccountID
+ * @param {String|null} parameters.fundID
+ * @returns {Promise}
+ */
+function SetWalletLinkedAccount(parameters) {
+    const commandName = 'SetWalletLinkedAccount';
+    requireParameters(['password'], parameters, commandName);
+    return Network.post(commandName, parameters);
+}
+
 /**
  * @param {Object} parameters
  * @param {String} parameters.subscribed
@@ -1007,7 +1031,7 @@ function BankAccount_SetupWithdrawal(parameters) {
  */
 function DeleteBankAccount(parameters) {
     const commandName = 'DeleteBankAccount';
-    requireParameters(['bankAccountID', 'ownerEmail'], parameters, commandName);
+    requireParameters(['bankAccountID'], parameters, commandName);
     return Network.post(commandName, parameters);
 }
 
@@ -1171,6 +1195,7 @@ export {
     CreateChatReport,
     CreateLogin,
     CreatePolicyRoom,
+    DeleteFund,
     DeleteLogin,
     DeleteBankAccount,
     Get,
@@ -1202,6 +1227,7 @@ export {
     ResetPassword,
     SetNameValuePair,
     SetPassword,
+    SetWalletLinkedAccount,
     UpdateAccount,
     UpdatePolicy,
     User_SignUp,