diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index 82cff4bf3838..15ae0facabef 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/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 (
)}
-
+ {props.children ? (
+ props.children(props.network.isOffline)
+ ) : (
+
+ )}
);
};
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 (
-
+
+ {isOffline => (
+
+ )}
+
);
}