From ae7c838ac7e4318e4c649177d65775dbec0fd3bd Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Fri, 1 Jul 2022 12:41:21 -0700
Subject: [PATCH 1/5] allow for custom buttons

---
 src/components/FormAlertWithSubmitButton.js | 24 ++++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index 82cff4bf3838..49c2d111c318 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -17,6 +17,9 @@ import networkPropTypes from './networkPropTypes';
 import {withNetwork} from './OnyxProvider';
 
 const propTypes = {
+    /** Children to wrap */
+    children: PropTypes.node,
+
     /** Whether to show the alert text */
     isAlertVisible: PropTypes.bool.isRequired,
 
@@ -51,6 +54,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+    children: null,
     message: '',
     isDisabled: false,
     isMessageHtml: false,
@@ -124,14 +128,18 @@ const FormAlertWithSubmitButton = (props) => {
                     {getAlertPrompt()}
                 </View>
             )}
-            <Button
-                success
-                pressOnEnter
-                text={props.buttonText}
-                onPress={props.onSubmit}
-                isDisabled={props.isDisabled}
-                isLoading={props.isLoading}
-            />
+            {props.children ? (
+                props.children
+            ) : (
+                <Button
+                    success
+                    pressOnEnter
+                    text={props.buttonText}
+                    onPress={props.onSubmit}
+                    isDisabled={props.isDisabled}
+                    isLoading={props.isLoading}
+                />
+            )}
         </View>
     );
 };

From 90561c0d5344636f248857058b2bcf42203510ac Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Fri, 1 Jul 2022 13:53:26 -0700
Subject: [PATCH 2/5] allow adding children

---
 src/components/FormAlertWithSubmitButton.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index 49c2d111c318..57e889d3782d 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -21,16 +21,16 @@ const propTypes = {
     children: PropTypes.node,
 
     /** Whether to show the alert text */
-    isAlertVisible: PropTypes.bool.isRequired,
+    isAlertVisible: PropTypes.bool,
 
     /** Whether the button is disabled */
     isDisabled: PropTypes.bool,
 
     /** Submit function */
-    onSubmit: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func,
 
     /** Text for the button */
-    buttonText: PropTypes.string.isRequired,
+    buttonText: PropTypes.string,
 
     /** Callback fired when the "fix the errors" link is pressed */
     onFixTheErrorsLinkPressed: PropTypes.func,
@@ -54,6 +54,9 @@ const propTypes = {
 };
 
 const defaultProps = {
+    isAlertVisible: false,
+    buttonText: '',
+    onSubmit: () => {},
     children: null,
     message: '',
     isDisabled: false,
@@ -106,7 +109,7 @@ const FormAlertWithSubmitButton = (props) => {
         );
     }
 
-    if (props.network.isOffline) {
+    if (props.network.isOffline && !props.children) {
         return (
             <View style={[styles.mh5, styles.mb5, styles.flex1, styles.justifyContentEnd, ...props.containerStyles]}>
                 <Button
@@ -129,7 +132,7 @@ const FormAlertWithSubmitButton = (props) => {
                 </View>
             )}
             {props.children ? (
-                props.children
+                props.children(props.network.isOffline)
             ) : (
                 <Button
                     success

From 49b75166869c4d8ac94eefd148dc0748d448e4b0 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Fri, 1 Jul 2022 14:48:03 -0700
Subject: [PATCH 3/5] Wrap example

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

diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js
index 9f1ddd25ea33..152f7e2d51fd 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 FormAlertWithSubmitButton from '../../../components/FormAlertWithSubmitButton';
 
 const MENU_ITEM = 'menuItem';
 const BUTTON = 'button';
@@ -210,17 +211,21 @@ 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
-                />
+                <FormAlertWithSubmitButton>
+                    {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
+                        />
+                    )}
+                </FormAlertWithSubmitButton>
             );
         }
 

From 9ff3ce47839063b239a7c461eb55b9d4af0375fe Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Fri, 1 Jul 2022 14:58:36 -0700
Subject: [PATCH 4/5] Sort alphabetically

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

diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index 57e889d3782d..44049d34db51 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -17,53 +17,53 @@ import networkPropTypes from './networkPropTypes';
 import {withNetwork} from './OnyxProvider';
 
 const propTypes = {
-    /** Children to wrap */
+    /** Text for the button */
+    buttonText: PropTypes.string,
+
+    /** Allow custom buttons and components to be wrapped by FormAlertWithSubmitButton */
     children: PropTypes.node,
 
+    /** Styles for container element */
+    containerStyles: PropTypes.arrayOf(PropTypes.object),
+
     /** Whether to show the alert text */
     isAlertVisible: PropTypes.bool,
 
     /** Whether the button is disabled */
     isDisabled: PropTypes.bool,
 
-    /** Submit function */
-    onSubmit: PropTypes.func,
-
-    /** Text for the button */
-    buttonText: PropTypes.string,
+    /** 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,
+    /** Props to detect online status */
+    network: networkPropTypes.isRequired,
 
-    /** 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,
 
     ...withLocalizePropTypes,
-
-    /** Props to detect online status */
-    network: networkPropTypes.isRequired,
 };
 
 const defaultProps = {
-    isAlertVisible: false,
     buttonText: '',
-    onSubmit: () => {},
     children: null,
-    message: '',
-    isDisabled: false,
-    isMessageHtml: false,
     containerStyles: [],
+    isAlertVisible: false,
+    isDisabled: false,
     isLoading: false,
+    isMessageHtml: false,
+    message: '',
     onFixTheErrorsLinkPressed: () => {},
+    onSubmit: () => {},
 };
 
 const FormAlertWithSubmitButton = (props) => {

From bccac78d100db00fa3a78b06bcee649d4b29a4ba Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Fri, 1 Jul 2022 14:58:58 -0700
Subject: [PATCH 5/5] add comment

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

diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index 44049d34db51..15ae0facabef 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -109,6 +109,7 @@ const FormAlertWithSubmitButton = (props) => {
         );
     }
 
+    // Display generic offline button unless this component is wrapping custom components
     if (props.network.isOffline && !props.children) {
         return (
             <View style={[styles.mh5, styles.mb5, styles.flex1, styles.justifyContentEnd, ...props.containerStyles]}>