Allow passing children components into FormAlertWithSubmitButton

src/components/FormAlertWithSubmitButton.js

@@ -17,46 +17,53 @@ import networkPropTypes from './networkPropTypes';
 import {withNetwork} from './OnyxProvider';
 
 const propTypes = {
+    /** 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.isRequired,
+    isAlertVisible: PropTypes.bool,
 
     /** 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,
+    /** 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 = {
-    message: '',
-    isDisabled: false,
-    isMessageHtml: false,
+    buttonText: '',
+    children: null,
     containerStyles: [],
+    isAlertVisible: false,
+    isDisabled: false,
     isLoading: false,
+    isMessageHtml: false,
+    message: '',
     onFixTheErrorsLinkPressed: () => {},
+    onSubmit: () => {},
 };
 
 const FormAlertWithSubmitButton = (props) => {
@@ -102,7 +109,8 @@ const FormAlertWithSubmitButton = (props) => {
         );
     }
 
-    if (props.network.isOffline) {
+    // 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]}>
                 <Button
@@ -124,14 +132,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(props.network.isOffline)
+            ) : (
+                <Button
+                    success
+                    pressOnEnter
+                    text={props.buttonText}
+                    onPress={props.onSubmit}
+                    isDisabled={props.isDisabled}
+                    isLoading={props.isLoading}
+                />
+            )}
         </View>
     );
 };

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>
             );
         }