Merge pull request #7850 from thesahindia/thesahindia/ui/confirmView

Thesahindia/UI/confirmView

src/components/ConfirmContent.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import {View} from 'react-native';
+import _ from 'underscore';
+import PropTypes from 'prop-types';
+import Header from './Header';
+import styles from '../styles/styles';
+import Button from './Button';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+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,
+
+    /** Confirm button text */
+    confirmText: PropTypes.string,
+
+    /** Cancel button text */
+    cancelText: PropTypes.string,
+
+    /** Modal content text/element */
+    prompt: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+
+    /** Whether we should use the success button color */
+    success: PropTypes.bool,
+
+    /** Whether we should use the danger button color. Use if the action is destructive */
+    danger: PropTypes.bool,
+
+    /** Whether we should show the cancel button */
+    shouldShowCancelButton: PropTypes.bool,
+
+    /** Styles for view */
+    contentStyles: PropTypes.arrayOf(PropTypes.object),
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    confirmText: '',
+    cancelText: '',
+    prompt: '',
+    success: true,
+    danger: false,
+    onCancel: () => {},
+    shouldShowCancelButton: true,
+    contentStyles: [],
+};
+
+const ConfirmContent = props => (
+    <View style={[styles.m5, ...props.contentStyles]}>
+        <View style={[styles.flexRow, styles.mb4]}>
+            <Header title={props.title} />
+        </View>
+
+        {_.isString(props.prompt)
+            ? (
+                <Text>
+                    {props.prompt}
+                </Text>
+            ) : props.prompt}
+
+        <Button
+            success={props.success}
+            danger={props.danger}
+            style={[styles.mt4]}
+            onPress={props.onConfirm}
+            pressOnEnter
+            text={props.confirmText || props.translate('common.yes')}
+        />
+        {props.shouldShowCancelButton && (
+            <Button
+                style={[styles.mt3]}
+                onPress={props.onCancel}
+                text={props.cancelText || props.translate('common.no')}
+            />
+        )}
+    </View>
+);
+
+ConfirmContent.propTypes = propTypes;
+ConfirmContent.defaultProps = defaultProps;
+ConfirmContent.displayName = 'ConfirmContent';
+export default withLocalize(ConfirmContent);

src/components/ConfirmModal.js

@@ -1,16 +1,9 @@
 import React from 'react';
-import {View} from 'react-native';
-import _ from 'underscore';
 import PropTypes from 'prop-types';
-import Header from './Header';
 import Modal from './Modal';
-import styles from '../styles/styles';
 import CONST from '../CONST';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import compose from '../libs/compose';
-import Button from './Button';
-import Text from './Text';
+import ConfirmContent from './ConfirmContent';
 
 const propTypes = {
     /** Title of the modal */
@@ -49,8 +42,6 @@ const propTypes = {
     /** Should we announce the Modal visibility changes? */
     shouldSetModalVisibility: PropTypes.bool,
 
-    ...withLocalizePropTypes,
-
     ...windowDimensionsPropTypes,
 };
 
@@ -77,42 +68,21 @@ const ConfirmModal = props => (
             ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED
             : CONST.MODAL.MODAL_TYPE.CONFIRM}
     >
-        <View style={styles.m5}>
-            <View style={[styles.flexRow, styles.mb4]}>
-                <Header title={props.title} />
-            </View>
-
-            {_.isString(props.prompt)
-                ? (
-                    <Text>
-                        {props.prompt}
-                    </Text>
-                ) : (props.prompt)}
-
-            <Button
-                success={props.success}
-                danger={props.danger}
-                style={[styles.mt4]}
-                onPress={props.onConfirm}
-                pressOnEnter
-                text={props.confirmText || props.translate('common.yes')}
-            />
-            {props.shouldShowCancelButton
-            && (
-                <Button
-                    style={[styles.mt3]}
-                    onPress={props.onCancel}
-                    text={props.cancelText || props.translate('common.no')}
-                />
-            )}
-        </View>
+        <ConfirmContent
+            title={props.title}
+            onConfirm={props.onConfirm}
+            onCancel={props.onCancel}
+            confirmText={props.confirmText}
+            cancelText={props.cancelText}
+            prompt={props.prompt}
+            success={props.success}
+            danger={props.danger}
+            shouldShowCancelButton={props.shouldShowCancelButton}
+        />
     </Modal>
 );
 
 ConfirmModal.propTypes = propTypes;
 ConfirmModal.defaultProps = defaultProps;
 ConfirmModal.displayName = 'ConfirmModal';
-export default compose(
-    withWindowDimensions,
-    withLocalize,
-)(ConfirmModal);
+export default withWindowDimensions(ConfirmModal);

src/components/ConfirmPopover.js

@@ -1,12 +1,8 @@
 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';
+import ConfirmContent from './ConfirmContent';
 
 const propTypes = {
     /** Title of the modal */
@@ -33,13 +29,17 @@ const propTypes = {
     /** Whether we should show the cancel button */
     shouldShowCancelButton: PropTypes.bool,
 
+    /** Modal content text/element */
+    prompt: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+
     /** Where the popover should be positioned */
     anchorPosition: PropTypes.shape({
         top: PropTypes.number,
         left: PropTypes.number,
     }).isRequired,
 
-    ...withLocalizePropTypes,
+    /** Styles for view */
+    contentStyles: PropTypes.arrayOf(PropTypes.object),
 
     ...windowDimensionsPropTypes,
 };
@@ -50,6 +50,8 @@ const defaultProps = {
     danger: false,
     onCancel: () => {},
     shouldShowCancelButton: true,
+    prompt: '',
+    contentStyles: [],
 };
 
 const ConfirmPopover = props => (
@@ -59,58 +61,22 @@ const ConfirmPopover = props => (
         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>
+        <ConfirmContent
+            contentStyles={props.contentStyles}
+            title={props.title}
+            prompt={props.prompt}
+            confirmText={props.confirmText}
+            cancelText={props.cancelText}
+            danger={props.danger}
+            shouldShowCancelButton={props.shouldShowCancelButton}
+            onConfirm={props.onConfirm}
+            onCancel={props.onCancel}
+            onClose={props.onCancel}
+        />
     </Popover>
 );
 
 ConfirmPopover.propTypes = propTypes;
 ConfirmPopover.defaultProps = defaultProps;
 ConfirmPopover.displayName = 'ConfirmPopover';
-export default compose(
-    withWindowDimensions,
-    withLocalize,
-)(ConfirmPopover);
+export default withWindowDimensions(ConfirmPopover);

src/languages/en.js

@@ -358,6 +358,7 @@ export default {
         setDefaultConfirmation: 'Make default payment method',
         setDefaultSuccess: 'Default payment method set!',
         setDefaultFailure: 'Failed to set default payment method.',
+        deleteAccount: 'Delete Account',
         deleteConfirmation: 'Are you sure that you want to delete this account?',
         deleteBankAccountSuccess: 'Bank account successfully deleted',
         deleteDebitCardSuccess: 'Debit Card successfully deleted',

src/languages/es.js

@@ -358,6 +358,7 @@ export default {
         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.',
+        deleteAccount: 'Eliminar cuenta',
         deleteConfirmation: '¿Estás seguro de que quieres eliminar esta cuenta?',
         deleteBankAccountSuccess: 'Cuenta bancaria eliminada correctamente',
         deleteDebitCardSuccess: 'Tarjeta de débito eliminada correctamente',

src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js

@@ -305,6 +305,7 @@ class PopoverReportActionContextMenu extends React.Component {
                     prompt={this.props.translate('reportActionContextMenu.deleteConfirmation')}
                     confirmText={this.props.translate('common.delete')}
                     cancelText={this.props.translate('common.cancel')}
+                    danger
                 />
             </>
         );

src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js

@@ -362,8 +362,10 @@ class BasePaymentsPage extends React.Component {
                         isDangerousAction
                     />
                     <ConfirmPopover
+                        contentStyles={[!this.props.isSmallScreenWidth ? styles.sidebarPopover : '']}
                         isVisible={this.state.shouldShowConfirmPopover}
-                        title={this.props.translate('paymentsPage.deleteConfirmation')}
+                        title={this.props.translate('paymentsPage.deleteAccount')}
+                        prompt={this.props.translate('paymentsPage.deleteConfirmation')}
                         confirmText={this.props.translate('common.delete')}
                         cancelText={this.props.translate('common.cancel')}
                         anchorPosition={{

src/pages/workspace/WorkspaceInitialPage.js

@@ -212,6 +212,7 @@ class WorkspaceInitialPage extends React.Component {
                     prompt={this.props.translate('workspace.common.deleteConfirmation')}
                     confirmText={this.props.translate('common.delete')}
                     cancelText={this.props.translate('common.cancel')}
+                    danger
                 />
             </ScreenWrapper>
         );