From 4765bdd3de4dbaae2bfe78b6a1a4287ed316ff9d Mon Sep 17 00:00:00 2001
From: Luke Donahue <luke@expensify.com>
Date: Fri, 27 May 2022 15:37:19 -0700
Subject: [PATCH 1/8] disable submit button and render offline indicator

---
 src/components/FormAlertWithSubmitButton.js | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index 8647ceecf014..e0351d856d5b 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -11,6 +11,8 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import TextLink from './TextLink';
 import Text from './Text';
 import RenderHTML from './RenderHTML';
+import OfflineIndicator from './OfflineIndicator';
+import {withNetwork} from './OnyxProvider';
 
 const propTypes = {
     /** Whether to show the alert text */
@@ -95,6 +97,19 @@ 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}
+                />
+                <OfflineIndicator />
+            </View>
+        );
+     }
+
     return (
         <View style={[styles.mh5, styles.mb5, styles.flex1, styles.justifyContentEnd, ...props.containerStyles]}>
             {props.isAlertVisible && (
@@ -119,4 +134,7 @@ FormAlertWithSubmitButton.propTypes = propTypes;
 FormAlertWithSubmitButton.defaultProps = defaultProps;
 FormAlertWithSubmitButton.displayName = 'FormAlertWithSubmitButton';
 
-export default withLocalize(FormAlertWithSubmitButton);
+export default compose(
+    withLocalize,
+    withNetwork(),
+)(FormAlertWithSubmitButton);

From 28f08dac62010168dbca7f14dffe08e98b0b87e9 Mon Sep 17 00:00:00 2001
From: Luke Donahue <luke@expensify.com>
Date: Fri, 27 May 2022 15:49:21 -0700
Subject: [PATCH 2/8] storybook

---
 .../FormAlertWithSubmitButton.stories.js      | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 src/stories/FormAlertWithSubmitButton.stories.js

diff --git a/src/stories/FormAlertWithSubmitButton.stories.js b/src/stories/FormAlertWithSubmitButton.stories.js
new file mode 100644
index 000000000000..f3a3576181ef
--- /dev/null
+++ b/src/stories/FormAlertWithSubmitButton.stories.js
@@ -0,0 +1,24 @@
+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/Button/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({});
+
+export default story;
+export {
+    Default,
+};

From c22ffa341e5127ca04fdf5f6570660330ddc436f Mon Sep 17 00:00:00 2001
From: Luke Donahue <luke@expensify.com>
Date: Fri, 27 May 2022 15:52:20 -0700
Subject: [PATCH 3/8] taking it out of buttons category of storybook

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

diff --git a/src/stories/FormAlertWithSubmitButton.stories.js b/src/stories/FormAlertWithSubmitButton.stories.js
index f3a3576181ef..a2db3e7ef0ac 100644
--- a/src/stories/FormAlertWithSubmitButton.stories.js
+++ b/src/stories/FormAlertWithSubmitButton.stories.js
@@ -7,7 +7,7 @@ import FormAlertWithSubmitButton from '../components/FormAlertWithSubmitButton';
  * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
  */
 const story = {
-    title: 'Components/Button/FormAlertWithSubmitButton',
+    title: 'Components/FormAlertWithSubmitButton',
     component: FormAlertWithSubmitButton,
 };
 

From 5da9587cc12e3bf953d86aef2f9d0115913b37b3 Mon Sep 17 00:00:00 2001
From: Luke Donahue <luke@expensify.com>
Date: Fri, 27 May 2022 16:00:42 -0700
Subject: [PATCH 4/8] lint

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

diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index e0351d856d5b..874143088720 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -6,6 +6,7 @@ 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';
@@ -108,7 +109,7 @@ const FormAlertWithSubmitButton = (props) => {
                 <OfflineIndicator />
             </View>
         );
-     }
+    }
 
     return (
         <View style={[styles.mh5, styles.mb5, styles.flex1, styles.justifyContentEnd, ...props.containerStyles]}>

From 8d941c81dcb5401688fb1b5999a4ca801d5619dc Mon Sep 17 00:00:00 2001
From: Luke Donahue <luke@expensify.com>
Date: Fri, 27 May 2022 16:01:56 -0700
Subject: [PATCH 5/8] network as prop

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

diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index 874143088720..c7b55285e441 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -44,6 +44,9 @@ const propTypes = {
     isLoading: PropTypes.bool,
 
     ...withLocalizePropTypes,
+
+    /** Props to detect online status */
+    network: networkPropTypes.isRequired,
 };
 
 const defaultProps = {

From 3739c25c35ea05e6dabef6df8e5678a628de51b1 Mon Sep 17 00:00:00 2001
From: Luke Donahue <luke@expensify.com>
Date: Fri, 27 May 2022 16:13:12 -0700
Subject: [PATCH 6/8] add prop types

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

diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index c7b55285e441..ced76e223c57 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -13,6 +13,7 @@ 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 = {

From db958fc8299f46a876a944b7967e2f75feecbb4a Mon Sep 17 00:00:00 2001
From: Luke Donahue <luke@expensify.com>
Date: Fri, 27 May 2022 16:15:09 -0700
Subject: [PATCH 7/8] added args

---
 src/stories/FormAlertWithSubmitButton.stories.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/stories/FormAlertWithSubmitButton.stories.js b/src/stories/FormAlertWithSubmitButton.stories.js
index a2db3e7ef0ac..9747c447cf0d 100644
--- a/src/stories/FormAlertWithSubmitButton.stories.js
+++ b/src/stories/FormAlertWithSubmitButton.stories.js
@@ -17,6 +17,14 @@ 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 {

From 420c1fcc3e2952e69b033168f7d5b9a77615bc08 Mon Sep 17 00:00:00 2001
From: Luke Donahue <luke@expensify.com>
Date: Fri, 27 May 2022 16:37:43 -0700
Subject: [PATCH 8/8] give the indicator a little room

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

diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index ced76e223c57..82cff4bf3838 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -109,6 +109,7 @@ const FormAlertWithSubmitButton = (props) => {
                     success
                     isDisabled
                     text={props.buttonText}
+                    style={[styles.mb3]}
                 />
                 <OfflineIndicator />
             </View>