Update FormAlertWithSubmitButton

src/components/FormAlertWithSubmitButton.js

@@ -6,11 +6,15 @@ 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';
 
 const propTypes = {
     /** Whether to show the alert text */
@@ -41,6 +45,9 @@ const propTypes = {
     isLoading: PropTypes.bool,
 
     ...withLocalizePropTypes,
+
+    /** Props to detect online status */
+    network: networkPropTypes.isRequired,
 };
 
 const defaultProps = {
@@ -95,6 +102,20 @@ const FormAlertWithSubmitButton = (props) => {
         );
     }
 
+    if (props.network.isOffline) {
+        return (
+            <View style={[styles.mh5, styles.mb5, styles.flex1, styles.justifyContentEnd, ...props.containerStyles]}>
+                <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 && (
@@ -119,4 +140,7 @@ FormAlertWithSubmitButton.propTypes = propTypes;
 FormAlertWithSubmitButton.defaultProps = defaultProps;
 FormAlertWithSubmitButton.displayName = 'FormAlertWithSubmitButton';
 
-export default withLocalize(FormAlertWithSubmitButton);
+export default compose(
+    withLocalize,
+    withNetwork(),
+)(FormAlertWithSubmitButton);

src/stories/FormAlertWithSubmitButton.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import FormAlertWithSubmitButton from '../components/FormAlertWithSubmitButton';
+
+/**
+ * We use the Component Story Format for writing stories. Follow the docs here:
+ *
+ * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
+ */
+const story = {
+    title: 'Components/FormAlertWithSubmitButton',
+    component: FormAlertWithSubmitButton,
+};
+
+// eslint-disable-next-line react/jsx-props-no-spreading
+const Template = args => <FormAlertWithSubmitButton {...args} />;
+
+// Arguments can be passed to the component by binding
+// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Default = Template.bind({});
+Default.args = {
+    isAlertVisible: true,
+    onSubmit: () => {},
+    buttonText: 'Submit',
+    network: {
+        isOffline: true,
+    },
+};
+
+export default story;
+export {
+    Default,
+};