From c8dddd74ffcfac5ae864b0debc4233a818f0f927 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Thu, 30 Jun 2022 21:36:18 -0700
Subject: [PATCH 01/15] Add new wrapper

---
 src/components/FormAlertWrapper.js | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/components/FormAlertWrapper.js

diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js
new file mode 100644
index 000000000000..8853b5437190
--- /dev/null
+++ b/src/components/FormAlertWrapper.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+import compose from '../libs/compose';
+import styles from '../styles/styles';
+
+const propTypes = {
+    /** Styles for container element */
+    containerStyles: PropTypes.arrayOf(PropTypes.object),
+};
+
+const defaultProps = {
+    containerStyles: [],
+};
+
+const FormAlertWrapper = (props) => {
+    return (
+        <View style={[styles.mh5, styles.mb5, styles.flex1, styles.justifyContentEnd, ...props.containerStyles]}>
+        </View>
+    );
+};
+
+FormAlertWrapper.propTypes = propTypes;
+FormAlertWrapper.defaultProps = defaultProps;
+FormAlertWrapper.displayName = 'FormAlertWrapper';
+
+export default compose(
+)(FormAlertWrapper);

From 16ac2c40918e067a7863206154321a5f2a9ae090 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Thu, 30 Jun 2022 23:25:27 -0700
Subject: [PATCH 02/15] Add isDisabled

---
 src/components/ButtonWithDropdown.js | 4 ++++
 src/components/ButtonWithMenu.js     | 1 +
 2 files changed, 5 insertions(+)

diff --git a/src/components/ButtonWithDropdown.js b/src/components/ButtonWithDropdown.js
index e4eb23502741..8e02a04350e5 100644
--- a/src/components/ButtonWithDropdown.js
+++ b/src/components/ButtonWithDropdown.js
@@ -17,6 +17,9 @@ const propTypes = {
     /** Callback to execute when the dropdown element is pressed */
     onDropdownPress: PropTypes.func,
 
+    /** Should this button be disabled? */
+    isDisabled: PropTypes.bool,
+
     /** Whether we should show a loading state for the main button */
     isLoading: PropTypes.bool,
 };
@@ -24,6 +27,7 @@ const propTypes = {
 const defaultProps = {
     onButtonPress: () => {},
     onDropdownPress: () => {},
+    isDisabled: false,
     isLoading: false,
 };
 
diff --git a/src/components/ButtonWithMenu.js b/src/components/ButtonWithMenu.js
index e9fafa75095e..e8c5e2590d31 100644
--- a/src/components/ButtonWithMenu.js
+++ b/src/components/ButtonWithMenu.js
@@ -59,6 +59,7 @@ class ButtonWithMenu extends PureComponent {
                 {this.props.options.length > 1 ? (
                     <ButtonWithDropdown
                         buttonText={selectedItemText}
+                        isDisabled={this.props.isDisabled}
                         isLoading={this.props.isLoading}
                         onButtonPress={event => this.props.onPress(event, this.state.selectedItem.value)}
                         onDropdownPress={() => {

From 9b64a6ba61dc51b36fb7935493e19bce56dc2ae9 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Thu, 30 Jun 2022 23:30:21 -0700
Subject: [PATCH 03/15] Add wrapper functionality

---
 src/components/FormAlertWrapper.js | 81 +++++++++++++++++++++++++++++-
 1 file changed, 79 insertions(+), 2 deletions(-)

diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js
index 8853b5437190..4a683f4066f4 100644
--- a/src/components/FormAlertWrapper.js
+++ b/src/components/FormAlertWrapper.js
@@ -1,21 +1,96 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import _ from 'underscore';
 import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {withNetwork} from './OnyxProvider';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import RenderHTML from './RenderHTML';
+import TextLink from './TextLink';
+import Text from './Text';
+import colors from '../styles/colors';
 import compose from '../libs/compose';
+import networkPropTypes from './networkPropTypes';
 import styles from '../styles/styles';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
 const propTypes = {
+    /** Children to wrap */
+    children: PropTypes.node.isRequired,
+
     /** Styles for container element */
     containerStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** Whether to show the alert text */
+    isAlertVisible: PropTypes.bool.isRequired,
+
+    /** Whether message is in html format */
+    isMessageHtml: PropTypes.bool,
+
+    /** Error message to display above button */
+    message: PropTypes.string,
+
+    /** Props to detect online status */
+    network: networkPropTypes.isRequired,
+
+    ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     containerStyles: [],
+    isMessageHtml: false,
+    message: '',
 };
 
 const FormAlertWrapper = (props) => {
+    function getAlertPrompt() {
+        let error = '';
+
+        if (!_.isEmpty(props.message)) {
+            if (props.isMessageHtml) {
+                error = (
+                    <RenderHTML html={`<muted-text>${props.message}</muted-text>`} />
+                );
+            } else {
+                error = (
+                    <Text style={styles.mutedTextLabel}>{props.message}</Text>
+                );
+            }
+        } else {
+            error = (
+                <>
+                    <Text style={styles.mutedTextLabel}>
+                        {`${props.translate('common.please')} `}
+                    </Text>
+                    <TextLink
+                        style={styles.label}
+                        onPress={props.onFixTheErrorsLinkPressed}
+                    >
+                        {props.translate('common.fixTheErrors')}
+                    </TextLink>
+                    <Text style={styles.mutedTextLabel}>
+                        {` ${props.translate('common.inTheFormBeforeContinuing')}.`}
+                    </Text>
+                </>
+            );
+        }
+
+        return (
+            <View style={[styles.flexRow, styles.ml2, styles.flexWrap, styles.flex1]}>
+                {error}
+            </View>
+        );
+    }
+
     return (
         <View style={[styles.mh5, styles.mb5, styles.flex1, styles.justifyContentEnd, ...props.containerStyles]}>
+            {props.isAlertVisible && (
+                <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
+                    <Icon src={Expensicons.Exclamation} fill={colors.red} />
+                    {getAlertPrompt()}
+                </View>
+            )}
+            {props.children(props.network.isOffline)}
         </View>
     );
 };
@@ -25,4 +100,6 @@ FormAlertWrapper.defaultProps = defaultProps;
 FormAlertWrapper.displayName = 'FormAlertWrapper';
 
 export default compose(
+    withLocalize,
+    withNetwork(),
 )(FormAlertWrapper);

From 2b56a4111fd29e94e4e12e07ce98bcf72a7f7ae8 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Thu, 30 Jun 2022 23:39:58 -0700
Subject: [PATCH 04/15] Add offline indicator

---
 src/components/FormAlertWrapper.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js
index 4a683f4066f4..c10ff159ee8f 100644
--- a/src/components/FormAlertWrapper.js
+++ b/src/components/FormAlertWrapper.js
@@ -10,6 +10,7 @@ import TextLink from './TextLink';
 import Text from './Text';
 import colors from '../styles/colors';
 import compose from '../libs/compose';
+import OfflineIndicator from './OfflineIndicator';
 import networkPropTypes from './networkPropTypes';
 import styles from '../styles/styles';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
@@ -91,6 +92,7 @@ const FormAlertWrapper = (props) => {
                 </View>
             )}
             {props.children(props.network.isOffline)}
+            {props.network.isOffline && (<OfflineIndicator />)}
         </View>
     );
 };

From 6d31ea57c75b6fd624b24955437e2b2fbd7dfa4b Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Thu, 30 Jun 2022 23:40:19 -0700
Subject: [PATCH 05/15] Add it to Payment page for example

---
 .../settings/Payments/PaymentMethodList.js    | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js
index 9f1ddd25ea33..4374aa24f4ff 100644
--- a/src/pages/settings/Payments/PaymentMethodList.js
+++ b/src/pages/settings/Payments/PaymentMethodList.js
@@ -15,6 +15,7 @@ import CONST from '../../../CONST';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import bankAccountPropTypes from '../../../components/bankAccountPropTypes';
 import * as PaymentUtils from '../../../libs/PaymentUtils';
+import FormAlertWrapper from '../../../components/FormAlertWrapper';
 
 const MENU_ITEM = 'menuItem';
 const BUTTON = 'button';
@@ -210,17 +211,23 @@ class PaymentMethodList extends Component {
         }
         if (item.type === BUTTON) {
             return (
-                <Button
-                    text={item.text}
-                    icon={item.icon}
-                    onPress={item.onPress}
-                    isDisabled={item.isDisabled}
-                    style={item.style}
-                    iconStyles={item.iconStyles}
-                    success={item.success}
-                    shouldShowRightIcon={item.shouldShowRightIcon}
-                    extraLarge
-                />
+                <FormAlertWrapper
+                    isAlertVisible={false}
+                >
+                    {isOffline => (
+                        <Button
+                            text={item.text}
+                            icon={item.icon}
+                            onPress={item.onPress}
+                            isDisabled={item.isDisabled || isOffline}
+                            style={item.style}
+                            iconStyles={item.iconStyles}
+                            success={item.success}
+                            shouldShowRightIcon={item.shouldShowRightIcon}
+                            extraLarge
+                        />
+                    )}
+                </FormAlertWrapper>
             );
         }
 

From 71b2f187df048cc10f2208064f9eb7a23c96d3cc Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Thu, 30 Jun 2022 23:49:19 -0700
Subject: [PATCH 06/15] Add it for menu

---
 src/components/ButtonWithDropdown.js |  2 ++
 src/components/SettlementButton.js   | 43 ++++++++++++++--------------
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/components/ButtonWithDropdown.js b/src/components/ButtonWithDropdown.js
index 8e02a04350e5..c1fbf97e44f3 100644
--- a/src/components/ButtonWithDropdown.js
+++ b/src/components/ButtonWithDropdown.js
@@ -37,6 +37,7 @@ const ButtonWithDropdown = props => (
             success
             onPress={props.onButtonPress}
             text={props.buttonText}
+            isDisabled={props.isDisabled}
             isLoading={props.isLoading}
             shouldRemoveRightBorderRadius
             style={[styles.flex1]}
@@ -45,6 +46,7 @@ const ButtonWithDropdown = props => (
         <Button
             success
             style={[styles.buttonDropdown]}
+            isDisabled={props.isDisabled}
             onPress={props.onDropdownPress}
             shouldRemoveLeftBorderRadius
             ContentComponent={() => (
diff --git a/src/components/SettlementButton.js b/src/components/SettlementButton.js
index 2997d2cadc60..47a3c8778eb1 100644
--- a/src/components/SettlementButton.js
+++ b/src/components/SettlementButton.js
@@ -13,6 +13,7 @@ import CONST from '../CONST';
 import compose from '../libs/compose';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import KYCWall from './KYCWall';
+import FormAlertWrapper from './FormAlertWrapper';
 
 const propTypes = {
     /** Callback to execute when this button is pressed. Receives a single payment type argument. */
@@ -123,28 +124,26 @@ class SettlementButton extends React.Component {
 
     render() {
         return (
-            <KYCWall
-                onSuccessfulKYC={() => this.props.onPress(CONST.IOU.PAYMENT_TYPE.EXPENSIFY)}
-                enablePaymentsRoute={this.props.enablePaymentsRoute}
-                addBankAccountRoute={this.props.addBankAccountRoute}
-                addDebitCardRoute={this.props.addDebitCardRoute}
-            >
-                {triggerKYCFlow => (
-                    <ButtonWithMenu
-                        isDisabled={this.props.isDisabled}
-                        isLoading={this.props.isLoading}
-                        onPress={(event, iouPaymentType) => {
-                            if (iouPaymentType === CONST.IOU.PAYMENT_TYPE.EXPENSIFY) {
-                                triggerKYCFlow(event);
-                                return;
-                            }
-
-                            this.props.onPress(iouPaymentType);
-                        }}
-                        options={this.state.buttonOptions}
-                    />
-                )}
-            </KYCWall>
+            <>
+                <FormAlertWrapper>
+                    {isOffline => (
+                        <ButtonWithMenu
+                            isDisabled={isOffline}
+                            isLoading={this.props.isLoading}
+                            onPress={(event, iouPaymentType) => {
+                                if (iouPaymentType === CONST.IOU.PAYMENT_TYPE.EXPENSIFY) {
+                                    console.log(test);
+                                    return;
+                                }
+
+                                this.props.onPress(iouPaymentType);
+                            }}
+                            options={this.state.buttonOptions}
+                        />
+
+                    )}
+                </FormAlertWrapper>
+            </>
         );
     }
 }

From da544cc4205ecade7002b7e40ec9cad5aaf62005 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Tue, 5 Jul 2022 16:48:42 -0700
Subject: [PATCH 07/15] reel back PR a bit

---
 src/components/ButtonWithDropdown.js |  6 ----
 src/components/ButtonWithMenu.js     |  1 -
 src/components/SettlementButton.js   | 43 ++++++++++++++--------------
 3 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/src/components/ButtonWithDropdown.js b/src/components/ButtonWithDropdown.js
index c1fbf97e44f3..e4eb23502741 100644
--- a/src/components/ButtonWithDropdown.js
+++ b/src/components/ButtonWithDropdown.js
@@ -17,9 +17,6 @@ const propTypes = {
     /** Callback to execute when the dropdown element is pressed */
     onDropdownPress: PropTypes.func,
 
-    /** Should this button be disabled? */
-    isDisabled: PropTypes.bool,
-
     /** Whether we should show a loading state for the main button */
     isLoading: PropTypes.bool,
 };
@@ -27,7 +24,6 @@ const propTypes = {
 const defaultProps = {
     onButtonPress: () => {},
     onDropdownPress: () => {},
-    isDisabled: false,
     isLoading: false,
 };
 
@@ -37,7 +33,6 @@ const ButtonWithDropdown = props => (
             success
             onPress={props.onButtonPress}
             text={props.buttonText}
-            isDisabled={props.isDisabled}
             isLoading={props.isLoading}
             shouldRemoveRightBorderRadius
             style={[styles.flex1]}
@@ -46,7 +41,6 @@ const ButtonWithDropdown = props => (
         <Button
             success
             style={[styles.buttonDropdown]}
-            isDisabled={props.isDisabled}
             onPress={props.onDropdownPress}
             shouldRemoveLeftBorderRadius
             ContentComponent={() => (
diff --git a/src/components/ButtonWithMenu.js b/src/components/ButtonWithMenu.js
index e8c5e2590d31..e9fafa75095e 100644
--- a/src/components/ButtonWithMenu.js
+++ b/src/components/ButtonWithMenu.js
@@ -59,7 +59,6 @@ class ButtonWithMenu extends PureComponent {
                 {this.props.options.length > 1 ? (
                     <ButtonWithDropdown
                         buttonText={selectedItemText}
-                        isDisabled={this.props.isDisabled}
                         isLoading={this.props.isLoading}
                         onButtonPress={event => this.props.onPress(event, this.state.selectedItem.value)}
                         onDropdownPress={() => {
diff --git a/src/components/SettlementButton.js b/src/components/SettlementButton.js
index 47a3c8778eb1..2997d2cadc60 100644
--- a/src/components/SettlementButton.js
+++ b/src/components/SettlementButton.js
@@ -13,7 +13,6 @@ import CONST from '../CONST';
 import compose from '../libs/compose';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import KYCWall from './KYCWall';
-import FormAlertWrapper from './FormAlertWrapper';
 
 const propTypes = {
     /** Callback to execute when this button is pressed. Receives a single payment type argument. */
@@ -124,26 +123,28 @@ class SettlementButton extends React.Component {
 
     render() {
         return (
-            <>
-                <FormAlertWrapper>
-                    {isOffline => (
-                        <ButtonWithMenu
-                            isDisabled={isOffline}
-                            isLoading={this.props.isLoading}
-                            onPress={(event, iouPaymentType) => {
-                                if (iouPaymentType === CONST.IOU.PAYMENT_TYPE.EXPENSIFY) {
-                                    console.log(test);
-                                    return;
-                                }
-
-                                this.props.onPress(iouPaymentType);
-                            }}
-                            options={this.state.buttonOptions}
-                        />
-
-                    )}
-                </FormAlertWrapper>
-            </>
+            <KYCWall
+                onSuccessfulKYC={() => this.props.onPress(CONST.IOU.PAYMENT_TYPE.EXPENSIFY)}
+                enablePaymentsRoute={this.props.enablePaymentsRoute}
+                addBankAccountRoute={this.props.addBankAccountRoute}
+                addDebitCardRoute={this.props.addDebitCardRoute}
+            >
+                {triggerKYCFlow => (
+                    <ButtonWithMenu
+                        isDisabled={this.props.isDisabled}
+                        isLoading={this.props.isLoading}
+                        onPress={(event, iouPaymentType) => {
+                            if (iouPaymentType === CONST.IOU.PAYMENT_TYPE.EXPENSIFY) {
+                                triggerKYCFlow(event);
+                                return;
+                            }
+
+                            this.props.onPress(iouPaymentType);
+                        }}
+                        options={this.state.buttonOptions}
+                    />
+                )}
+            </KYCWall>
         );
     }
 }

From e71c610f40233f7ab997b1c20cca296ab40ce5e9 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Tue, 5 Jul 2022 17:50:28 -0700
Subject: [PATCH 08/15] use wrapper in formsubmit

---
 src/components/FormAlertWithSubmitButton.js | 133 ++++++--------------
 src/components/FormAlertWrapper.js          |   4 +
 2 files changed, 39 insertions(+), 98 deletions(-)

diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index 82cff4bf3838..fa0b137390d3 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -1,53 +1,40 @@
-import _ from 'underscore';
 import React from 'react';
-import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
-import Icon from './Icon';
-import * as Expensicons from './Icon/Expensicons';
-import colors from '../styles/colors';
-import compose from '../libs/compose';
 import Button from './Button';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import TextLink from './TextLink';
-import Text from './Text';
-import RenderHTML from './RenderHTML';
 import OfflineIndicator from './OfflineIndicator';
-import networkPropTypes from './networkPropTypes';
-import {withNetwork} from './OnyxProvider';
+import FormAlertWrapper from './FormAlertWrapper';
 
 const propTypes = {
+    /** Text for the button */
+    buttonText: PropTypes.string.isRequired,
+
+    /** Styles for container element */
+    containerStyles: PropTypes.arrayOf(PropTypes.object),
+
     /** Whether to show the alert text */
     isAlertVisible: PropTypes.bool.isRequired,
 
     /** Whether the button is disabled */
     isDisabled: PropTypes.bool,
 
-    /** Submit function */
-    onSubmit: PropTypes.func.isRequired,
-
-    /** Text for the button */
-    buttonText: PropTypes.string.isRequired,
+    /** Is the button in a loading state */
+    isLoading: PropTypes.bool,
 
-    /** Callback fired when the "fix the errors" link is pressed */
-    onFixTheErrorsLinkPressed: PropTypes.func,
+    /** Whether message is in html format */
+    isMessageHtml: PropTypes.bool,
 
     /** Error message to display above button */
     message: PropTypes.string,
 
-    /** Whether message is in html format */
-    isMessageHtml: PropTypes.bool,
-
-    /** Styles for container element */
-    containerStyles: PropTypes.arrayOf(PropTypes.object),
+    /** Callback fired when the "fix the errors" link is pressed */
+    onFixTheErrorsLinkPressed: PropTypes.func,
 
-    /** Is the button in a loading state */
-    isLoading: PropTypes.bool,
+    /** Submit function */
+    onSubmit: PropTypes.func.isRequired,
 
     ...withLocalizePropTypes,
-
-    /** Props to detect online status */
-    network: networkPropTypes.isRequired,
 };
 
 const defaultProps = {
@@ -60,79 +47,32 @@ const defaultProps = {
 };
 
 const FormAlertWithSubmitButton = (props) => {
-    /**
-     * @returns {React.Component}
-     */
-    function getAlertPrompt() {
-        let error = '';
-
-        if (!_.isEmpty(props.message)) {
-            if (props.isMessageHtml) {
-                error = (
-                    <RenderHTML html={`<muted-text>${props.message}</muted-text>`} />
-                );
-            } else {
-                error = (
-                    <Text style={styles.mutedTextLabel}>{props.message}</Text>
-                );
-            }
-        } else {
-            error = (
-                <>
-                    <Text style={styles.mutedTextLabel}>
-                        {`${props.translate('common.please')} `}
-                    </Text>
-                    <TextLink
-                        style={styles.label}
-                        onPress={props.onFixTheErrorsLinkPressed}
-                    >
-                        {props.translate('common.fixTheErrors')}
-                    </TextLink>
-                    <Text style={styles.mutedTextLabel}>
-                        {` ${props.translate('common.inTheFormBeforeContinuing')}.`}
-                    </Text>
-                </>
-            );
-        }
-
-        return (
-            <View style={[styles.flexRow, styles.ml2, styles.flexWrap, styles.flex1]}>
-                {error}
-            </View>
-        );
-    }
-
-    if (props.network.isOffline) {
-        return (
-            <View style={[styles.mh5, styles.mb5, styles.flex1, styles.justifyContentEnd, ...props.containerStyles]}>
+    console.log(props);
+    return (
+        <FormAlertWrapper
+            containerStyles={props.containerStyles}
+            isAlertVisible={props.isAlertVisible}
+            onFixTheErrorsLinkPressed={props.onFixTheErrorsLinkPressed}
+        >
+            {isOffline => (isOffline ? (
                 <Button
                     success
                     isDisabled
                     text={props.buttonText}
                     style={[styles.mb3]}
                 />
-                <OfflineIndicator />
-            </View>
-        );
-    }
-
-    return (
-        <View style={[styles.mh5, styles.mb5, styles.flex1, styles.justifyContentEnd, ...props.containerStyles]}>
-            {props.isAlertVisible && (
-                <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
-                    <Icon src={Expensicons.Exclamation} fill={colors.red} />
-                    {getAlertPrompt()}
-                </View>
+            ) : (
+                <Button
+                    success
+                    pressOnEnter
+                    text={props.buttonText}
+                    onPress={props.onSubmit}
+                    isDisabled={props.isDisabled}
+                    isLoading={props.isLoading}
+                />
+            )
             )}
-            <Button
-                success
-                pressOnEnter
-                text={props.buttonText}
-                onPress={props.onSubmit}
-                isDisabled={props.isDisabled}
-                isLoading={props.isLoading}
-            />
-        </View>
+        </FormAlertWrapper>
     );
 };
 
@@ -140,7 +80,4 @@ FormAlertWithSubmitButton.propTypes = propTypes;
 FormAlertWithSubmitButton.defaultProps = defaultProps;
 FormAlertWithSubmitButton.displayName = 'FormAlertWithSubmitButton';
 
-export default compose(
-    withLocalize,
-    withNetwork(),
-)(FormAlertWithSubmitButton);
+export default withLocalize(FormAlertWithSubmitButton);
diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js
index c10ff159ee8f..20e5510def84 100644
--- a/src/components/FormAlertWrapper.js
+++ b/src/components/FormAlertWrapper.js
@@ -34,6 +34,9 @@ const propTypes = {
     /** Props to detect online status */
     network: networkPropTypes.isRequired,
 
+    /** Callback fired when the "fix the errors" link is pressed */
+    onFixTheErrorsLinkPressed: PropTypes.func,
+
     ...withLocalizePropTypes,
 };
 
@@ -41,6 +44,7 @@ const defaultProps = {
     containerStyles: [],
     isMessageHtml: false,
     message: '',
+    onFixTheErrorsLinkPressed: () => {},
 };
 
 const FormAlertWrapper = (props) => {

From 1f7478f7cfd7459cbe742668a7a1ca00e8aa9041 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Tue, 5 Jul 2022 21:33:44 -0700
Subject: [PATCH 09/15] Add missing props

---
 src/components/FormAlertWithSubmitButton.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index fa0b137390d3..af6b979fa1b5 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -47,11 +47,11 @@ const defaultProps = {
 };
 
 const FormAlertWithSubmitButton = (props) => {
-    console.log(props);
     return (
         <FormAlertWrapper
             containerStyles={props.containerStyles}
             isAlertVisible={props.isAlertVisible}
+            isMessageHtml={props.isMessageHtml}
             onFixTheErrorsLinkPressed={props.onFixTheErrorsLinkPressed}
         >
             {isOffline => (isOffline ? (

From b9dd27bb338827e9d8ce3f8f7a43a2560133ce2f Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Tue, 5 Jul 2022 21:50:55 -0700
Subject: [PATCH 10/15] Add message

---
 src/components/FormAlertWithSubmitButton.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index af6b979fa1b5..5ed85f4318a9 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import styles from '../styles/styles';
 import Button from './Button';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import OfflineIndicator from './OfflineIndicator';
 import FormAlertWrapper from './FormAlertWrapper';
 
 const propTypes = {
@@ -46,12 +45,12 @@ const defaultProps = {
     onFixTheErrorsLinkPressed: () => {},
 };
 
-const FormAlertWithSubmitButton = (props) => {
-    return (
+const FormAlertWithSubmitButton = (props) => (
         <FormAlertWrapper
             containerStyles={props.containerStyles}
             isAlertVisible={props.isAlertVisible}
             isMessageHtml={props.isMessageHtml}
+            message={props.message}
             onFixTheErrorsLinkPressed={props.onFixTheErrorsLinkPressed}
         >
             {isOffline => (isOffline ? (
@@ -74,7 +73,6 @@ const FormAlertWithSubmitButton = (props) => {
             )}
         </FormAlertWrapper>
     );
-};
 
 FormAlertWithSubmitButton.propTypes = propTypes;
 FormAlertWithSubmitButton.defaultProps = defaultProps;

From cadc08f2460c718a08891fc5284015dfc3c01a00 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Tue, 5 Jul 2022 21:56:16 -0700
Subject: [PATCH 11/15] fix style

---
 src/components/FormAlertWithSubmitButton.js | 56 ++++++++++-----------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index 5ed85f4318a9..341eb89eca58 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -45,34 +45,34 @@ const defaultProps = {
     onFixTheErrorsLinkPressed: () => {},
 };
 
-const FormAlertWithSubmitButton = (props) => (
-        <FormAlertWrapper
-            containerStyles={props.containerStyles}
-            isAlertVisible={props.isAlertVisible}
-            isMessageHtml={props.isMessageHtml}
-            message={props.message}
-            onFixTheErrorsLinkPressed={props.onFixTheErrorsLinkPressed}
-        >
-            {isOffline => (isOffline ? (
-                <Button
-                    success
-                    isDisabled
-                    text={props.buttonText}
-                    style={[styles.mb3]}
-                />
-            ) : (
-                <Button
-                    success
-                    pressOnEnter
-                    text={props.buttonText}
-                    onPress={props.onSubmit}
-                    isDisabled={props.isDisabled}
-                    isLoading={props.isLoading}
-                />
-            )
-            )}
-        </FormAlertWrapper>
-    );
+const FormAlertWithSubmitButton = props => (
+    <FormAlertWrapper
+        containerStyles={props.containerStyles}
+        isAlertVisible={props.isAlertVisible}
+        isMessageHtml={props.isMessageHtml}
+        message={props.message}
+        onFixTheErrorsLinkPressed={props.onFixTheErrorsLinkPressed}
+    >
+        {isOffline => (isOffline ? (
+            <Button
+                success
+                isDisabled
+                text={props.buttonText}
+                style={[styles.mb3]}
+            />
+        ) : (
+            <Button
+                success
+                pressOnEnter
+                text={props.buttonText}
+                onPress={props.onSubmit}
+                isDisabled={props.isDisabled}
+                isLoading={props.isLoading}
+            />
+        )
+        )}
+    </FormAlertWrapper>
+);
 
 FormAlertWithSubmitButton.propTypes = propTypes;
 FormAlertWithSubmitButton.defaultProps = defaultProps;

From 021901c5f1e5d8595199e7f508814c1e3de50fb7 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Tue, 5 Jul 2022 22:36:05 -0700
Subject: [PATCH 12/15] add comments

---
 src/components/FormAlertWrapper.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js
index 20e5510def84..129bc26d0d8e 100644
--- a/src/components/FormAlertWrapper.js
+++ b/src/components/FormAlertWrapper.js
@@ -16,7 +16,7 @@ import styles from '../styles/styles';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
 const propTypes = {
-    /** Children to wrap */
+    /** Wrapped child components */
     children: PropTypes.node.isRequired,
 
     /** Styles for container element */
@@ -47,6 +47,12 @@ const defaultProps = {
     onFixTheErrorsLinkPressed: () => {},
 };
 
+/**
+ * The FormAlertWrapper offers a standardized way of showing error messages and offline functionality.
+ *
+ * This component takes other components as a child prop. It will then render any wrapped components as a function using "render props",
+ * and passes it a (bool) isOffline parameter. Child components can then use that isOffline to determine offline behavior.
+ */
 const FormAlertWrapper = (props) => {
     function getAlertPrompt() {
         let error = '';

From 55b34c92187fb24794118c9d65963f00a68db4b2 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Tue, 5 Jul 2022 22:45:00 -0700
Subject: [PATCH 13/15] Add comments without jsdoc

---
 src/components/FormAlertWrapper.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js
index 129bc26d0d8e..17e07ed427aa 100644
--- a/src/components/FormAlertWrapper.js
+++ b/src/components/FormAlertWrapper.js
@@ -47,12 +47,10 @@ const defaultProps = {
     onFixTheErrorsLinkPressed: () => {},
 };
 
-/**
- * The FormAlertWrapper offers a standardized way of showing error messages and offline functionality.
- *
- * This component takes other components as a child prop. It will then render any wrapped components as a function using "render props",
- * and passes it a (bool) isOffline parameter. Child components can then use that isOffline to determine offline behavior.
- */
+// The FormAlertWrapper offers a standardized way of showing error messages and offline functionality.
+//
+// This component takes other components as a child prop. It will then render any wrapped components as a function using "render props",
+// and passes it a (bool) isOffline parameter. Child components can then use that isOffline to determine offline behavior.
 const FormAlertWrapper = (props) => {
     function getAlertPrompt() {
         let error = '';

From 1d13e7910957af82a32a996ba92ba9fdbb6c37b6 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Wed, 6 Jul 2022 23:58:26 -0700
Subject: [PATCH 14/15] easy fixes

---
 src/components/FormAlertWithSubmitButton.js | 14 +++++---------
 src/components/FormAlertWrapper.js          | 10 +++++-----
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index 341eb89eca58..1e158d63635c 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
 import Button from './Button';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import FormAlertWrapper from './FormAlertWrapper';
 
 const propTypes = {
@@ -28,12 +27,10 @@ const propTypes = {
     message: PropTypes.string,
 
     /** Callback fired when the "fix the errors" link is pressed */
-    onFixTheErrorsLinkPressed: PropTypes.func,
+    onFixTheErrorsPressed: PropTypes.func,
 
     /** Submit function */
     onSubmit: PropTypes.func.isRequired,
-
-    ...withLocalizePropTypes,
 };
 
 const defaultProps = {
@@ -42,7 +39,7 @@ const defaultProps = {
     isMessageHtml: false,
     containerStyles: [],
     isLoading: false,
-    onFixTheErrorsLinkPressed: () => {},
+    onFixTheErrorsPressed: () => {},
 };
 
 const FormAlertWithSubmitButton = props => (
@@ -51,7 +48,7 @@ const FormAlertWithSubmitButton = props => (
         isAlertVisible={props.isAlertVisible}
         isMessageHtml={props.isMessageHtml}
         message={props.message}
-        onFixTheErrorsLinkPressed={props.onFixTheErrorsLinkPressed}
+        onFixTheErrorsPressed={props.onFixTheErrorsPressed}
     >
         {isOffline => (isOffline ? (
             <Button
@@ -69,8 +66,7 @@ const FormAlertWithSubmitButton = props => (
                 isDisabled={props.isDisabled}
                 isLoading={props.isLoading}
             />
-        )
-        )}
+        ))}
     </FormAlertWrapper>
 );
 
@@ -78,4 +74,4 @@ FormAlertWithSubmitButton.propTypes = propTypes;
 FormAlertWithSubmitButton.defaultProps = defaultProps;
 FormAlertWithSubmitButton.displayName = 'FormAlertWithSubmitButton';
 
-export default withLocalize(FormAlertWithSubmitButton);
+export default FormAlertWithSubmitButton;
diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js
index 17e07ed427aa..484057dc7a1c 100644
--- a/src/components/FormAlertWrapper.js
+++ b/src/components/FormAlertWrapper.js
@@ -35,7 +35,7 @@ const propTypes = {
     network: networkPropTypes.isRequired,
 
     /** Callback fired when the "fix the errors" link is pressed */
-    onFixTheErrorsLinkPressed: PropTypes.func,
+    onFixTheErrorsPressed: PropTypes.func,
 
     ...withLocalizePropTypes,
 };
@@ -44,13 +44,13 @@ const defaultProps = {
     containerStyles: [],
     isMessageHtml: false,
     message: '',
-    onFixTheErrorsLinkPressed: () => {},
+    onFixTheErrorsPressed: () => {},
 };
 
 // The FormAlertWrapper offers a standardized way of showing error messages and offline functionality.
 //
 // This component takes other components as a child prop. It will then render any wrapped components as a function using "render props",
-// and passes it a (bool) isOffline parameter. Child components can then use that isOffline to determine offline behavior.
+// and passes it a (bool) isOffline parameter. Child components can then use the isOffline variable to determine offline behavior.
 const FormAlertWrapper = (props) => {
     function getAlertPrompt() {
         let error = '';
@@ -73,7 +73,7 @@ const FormAlertWrapper = (props) => {
                     </Text>
                     <TextLink
                         style={styles.label}
-                        onPress={props.onFixTheErrorsLinkPressed}
+                        onPress={props.onFixTheErrorsPressed}
                     >
                         {props.translate('common.fixTheErrors')}
                     </TextLink>
@@ -100,7 +100,7 @@ const FormAlertWrapper = (props) => {
                 </View>
             )}
             {props.children(props.network.isOffline)}
-            {props.network.isOffline && (<OfflineIndicator />)}
+            {props.network.isOffline && <OfflineIndicator />}
         </View>
     );
 };

From eb78f70586c6fe8e3442163b8c22614f0f899957 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Thu, 7 Jul 2022 13:36:49 -0700
Subject: [PATCH 15/15] more feedback changes

---
 src/components/FormAlertWrapper.js            | 85 +++++++------------
 .../settings/Payments/PaymentMethodList.js    |  4 +-
 2 files changed, 34 insertions(+), 55 deletions(-)

diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js
index 484057dc7a1c..93b196f1bb6b 100644
--- a/src/components/FormAlertWrapper.js
+++ b/src/components/FormAlertWrapper.js
@@ -23,7 +23,7 @@ const propTypes = {
     containerStyles: PropTypes.arrayOf(PropTypes.object),
 
     /** Whether to show the alert text */
-    isAlertVisible: PropTypes.bool.isRequired,
+    isAlertVisible: PropTypes.bool,
 
     /** Whether message is in html format */
     isMessageHtml: PropTypes.bool,
@@ -42,6 +42,7 @@ const propTypes = {
 
 const defaultProps = {
     containerStyles: [],
+    isAlertVisible: false,
     isMessageHtml: false,
     message: '',
     onFixTheErrorsPressed: () => {},
@@ -51,59 +52,39 @@ const defaultProps = {
 //
 // This component takes other components as a child prop. It will then render any wrapped components as a function using "render props",
 // and passes it a (bool) isOffline parameter. Child components can then use the isOffline variable to determine offline behavior.
-const FormAlertWrapper = (props) => {
-    function getAlertPrompt() {
-        let error = '';
+const FormAlertWrapper = props => (
+    <View style={[styles.mh5, styles.mb5, styles.flex1, styles.justifyContentEnd, ...props.containerStyles]}>
+        {props.isAlertVisible && (
+            <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
+                <Icon src={Expensicons.Exclamation} fill={colors.red} />
+                <View style={[styles.flexRow, styles.ml2, styles.flexWrap, styles.flex1]}>
+                    {!_.isEmpty(props.message) && props.isMessageHtml && <RenderHTML html={`<muted-text>${props.message}</muted-text>`} />}
 
-        if (!_.isEmpty(props.message)) {
-            if (props.isMessageHtml) {
-                error = (
-                    <RenderHTML html={`<muted-text>${props.message}</muted-text>`} />
-                );
-            } else {
-                error = (
-                    <Text style={styles.mutedTextLabel}>{props.message}</Text>
-                );
-            }
-        } else {
-            error = (
-                <>
-                    <Text style={styles.mutedTextLabel}>
-                        {`${props.translate('common.please')} `}
-                    </Text>
-                    <TextLink
-                        style={styles.label}
-                        onPress={props.onFixTheErrorsPressed}
-                    >
-                        {props.translate('common.fixTheErrors')}
-                    </TextLink>
-                    <Text style={styles.mutedTextLabel}>
-                        {` ${props.translate('common.inTheFormBeforeContinuing')}.`}
-                    </Text>
-                </>
-            );
-        }
-
-        return (
-            <View style={[styles.flexRow, styles.ml2, styles.flexWrap, styles.flex1]}>
-                {error}
-            </View>
-        );
-    }
-
-    return (
-        <View style={[styles.mh5, styles.mb5, styles.flex1, styles.justifyContentEnd, ...props.containerStyles]}>
-            {props.isAlertVisible && (
-                <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
-                    <Icon src={Expensicons.Exclamation} fill={colors.red} />
-                    {getAlertPrompt()}
+                    {!_.isEmpty(props.message) && !props.isMessageHtml
+                        ? <Text style={styles.mutedTextLabel}>{props.message}</Text>
+                        : (
+                            <>
+                                <Text style={styles.mutedTextLabel}>
+                                    {`${props.translate('common.please')} `}
+                                </Text>
+                                <TextLink
+                                    style={styles.label}
+                                    onPress={props.onFixTheErrorsPressed}
+                                >
+                                    {props.translate('common.fixTheErrors')}
+                                </TextLink>
+                                <Text style={styles.mutedTextLabel}>
+                                    {` ${props.translate('common.inTheFormBeforeContinuing')}.`}
+                                </Text>
+                            </>
+                        )}
                 </View>
-            )}
-            {props.children(props.network.isOffline)}
-            {props.network.isOffline && <OfflineIndicator />}
-        </View>
-    );
-};
+            </View>
+        )}
+        {props.children(props.network.isOffline)}
+        {props.network.isOffline && <OfflineIndicator />}
+    </View>
+);
 
 FormAlertWrapper.propTypes = propTypes;
 FormAlertWrapper.defaultProps = defaultProps;
diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js
index 4374aa24f4ff..716876af7da6 100644
--- a/src/pages/settings/Payments/PaymentMethodList.js
+++ b/src/pages/settings/Payments/PaymentMethodList.js
@@ -211,9 +211,7 @@ class PaymentMethodList extends Component {
         }
         if (item.type === BUTTON) {
             return (
-                <FormAlertWrapper
-                    isAlertVisible={false}
-                >
+                <FormAlertWrapper>
                     {isOffline => (
                         <Button
                             text={item.text}
