From fae74d257047a58d631521f78fe568861017bc2e Mon Sep 17 00:00:00 2001
From: Sam Hariri <137707942+samh-nl@users.noreply.github.com>
Date: Mon, 31 Jul 2023 12:07:25 +0200
Subject: [PATCH 1/4] fix: disable confirm button if offline

---
 src/components/ConfirmContent.js                | 16 +++++++++++++++-
 src/components/ConfirmModal.js                  |  5 +++++
 src/pages/settings/Security/CloseAccountPage.js |  1 +
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/ConfirmContent.js b/src/components/ConfirmContent.js
index 7af2eb6d1d3e..d7d222da1e67 100644
--- a/src/components/ConfirmContent.js
+++ b/src/components/ConfirmContent.js
@@ -6,6 +6,9 @@ import Header from './Header';
 import styles from '../styles/styles';
 import Button from './Button';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import {withNetwork} from './OnyxProvider';
+import networkPropTypes from './networkPropTypes';
+import compose from '../libs/compose';
 import Text from './Text';
 
 const propTypes = {
@@ -33,6 +36,9 @@ const propTypes = {
     /** Whether we should use the danger button color. Use if the action is destructive */
     danger: PropTypes.bool,
 
+    /** Whether we should disable the confirm button when offline */
+    shouldDisableConfirmButtonWhenOffline: PropTypes.bool,
+
     /** Whether we should show the cancel button */
     shouldShowCancelButton: PropTypes.bool,
 
@@ -40,6 +46,9 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     contentStyles: PropTypes.arrayOf(PropTypes.object),
 
+    /** Information about the network */
+    network: networkPropTypes.isRequired,
+
     ...withLocalizePropTypes,
 };
 
@@ -50,6 +59,7 @@ const defaultProps = {
     success: true,
     danger: false,
     onCancel: () => {},
+    shouldDisableConfirmButtonWhenOffline: false,
     shouldShowCancelButton: true,
     contentStyles: [],
 };
@@ -70,6 +80,7 @@ function ConfirmContent(props) {
                 onPress={props.onConfirm}
                 pressOnEnter
                 text={props.confirmText || props.translate('common.yes')}
+                isDisabled={props.network.isOffline && props.shouldDisableConfirmButtonWhenOffline}
             />
             {props.shouldShowCancelButton && (
                 <Button
@@ -86,4 +97,7 @@ function ConfirmContent(props) {
 ConfirmContent.propTypes = propTypes;
 ConfirmContent.defaultProps = defaultProps;
 ConfirmContent.displayName = 'ConfirmContent';
-export default withLocalize(ConfirmContent);
+export default compose(
+    withLocalize,
+    withNetwork(),
+)(ConfirmContent);
diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js
index e9e22c0fc012..56bcfe933aaf 100755
--- a/src/components/ConfirmModal.js
+++ b/src/components/ConfirmModal.js
@@ -33,6 +33,9 @@ const propTypes = {
     /** Is the action destructive */
     danger: PropTypes.bool,
 
+    /** Whether we should disable the confirm button when offline */
+    shouldDisableConfirmButtonWhenOffline: PropTypes.bool,
+
     /** Whether we should show the cancel button */
     shouldShowCancelButton: PropTypes.bool,
 
@@ -52,6 +55,7 @@ const defaultProps = {
     success: true,
     danger: false,
     onCancel: () => {},
+    shouldDisableConfirmButtonWhenOffline: false,
     shouldShowCancelButton: true,
     shouldSetModalVisibility: true,
     title: '',
@@ -79,6 +83,7 @@ function ConfirmModal(props) {
                 prompt={props.prompt}
                 success={props.success}
                 danger={props.danger}
+                shouldDisableConfirmButtonWhenOffline={props.shouldDisableConfirmButtonWhenOffline}
                 shouldShowCancelButton={props.shouldShowCancelButton}
             />
         </Modal>
diff --git a/src/pages/settings/Security/CloseAccountPage.js b/src/pages/settings/Security/CloseAccountPage.js
index 652748af2a8f..9ec5a52b8d3a 100644
--- a/src/pages/settings/Security/CloseAccountPage.js
+++ b/src/pages/settings/Security/CloseAccountPage.js
@@ -121,6 +121,7 @@ function CloseAccountPage(props) {
                         prompt={props.translate('closeAccountPage.closeAccountPermanentlyDeleteData')}
                         confirmText={props.translate('common.yesContinue')}
                         cancelText={props.translate('common.cancel')}
+                        shouldDisableConfirmButtonWhenOffline
                         shouldShowCancelButton
                     />
                 </View>

From cc774f20fb08d6bbcdd8b9491efcd256eda20655 Mon Sep 17 00:00:00 2001
From: Sam Hariri <137707942+samh-nl@users.noreply.github.com>
Date: Mon, 31 Jul 2023 14:10:43 +0200
Subject: [PATCH 2/4] style: prettify

---
 src/components/ConfirmContent.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/ConfirmContent.js b/src/components/ConfirmContent.js
index d7d222da1e67..c381fdc2274d 100644
--- a/src/components/ConfirmContent.js
+++ b/src/components/ConfirmContent.js
@@ -97,7 +97,4 @@ function ConfirmContent(props) {
 ConfirmContent.propTypes = propTypes;
 ConfirmContent.defaultProps = defaultProps;
 ConfirmContent.displayName = 'ConfirmContent';
-export default compose(
-    withLocalize,
-    withNetwork(),
-)(ConfirmContent);
+export default compose(withLocalize, withNetwork())(ConfirmContent);

From e0983a8243a784522fedda9a646cbd2b4132d8a4 Mon Sep 17 00:00:00 2001
From: Sam Hariri <137707942+samh-nl@users.noreply.github.com>
Date: Tue, 1 Aug 2023 17:48:38 +0200
Subject: [PATCH 3/4] refactor: use hooks instead of HOC

---
 src/components/ConfirmContent.js | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/components/ConfirmContent.js b/src/components/ConfirmContent.js
index c381fdc2274d..dbf8d4889d99 100644
--- a/src/components/ConfirmContent.js
+++ b/src/components/ConfirmContent.js
@@ -5,10 +5,8 @@ import PropTypes from 'prop-types';
 import Header from './Header';
 import styles from '../styles/styles';
 import Button from './Button';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import {withNetwork} from './OnyxProvider';
-import networkPropTypes from './networkPropTypes';
-import compose from '../libs/compose';
+import useLocalize from '../hooks/useLocalize';
+import useNetwork from '../hooks/useNetwork';
 import Text from './Text';
 
 const propTypes = {
@@ -45,11 +43,6 @@ const propTypes = {
     /** Styles for view */
     // eslint-disable-next-line react/forbid-prop-types
     contentStyles: PropTypes.arrayOf(PropTypes.object),
-
-    /** Information about the network */
-    network: networkPropTypes.isRequired,
-
-    ...withLocalizePropTypes,
 };
 
 const defaultProps = {
@@ -65,6 +58,9 @@ const defaultProps = {
 };
 
 function ConfirmContent(props) {
+    const {translate} = useLocalize();
+    const {isOffline} = useNetwork();
+    
     return (
         <View style={[styles.m5, ...props.contentStyles]}>
             <View style={[styles.flexRow, styles.mb4]}>
@@ -79,14 +75,14 @@ function ConfirmContent(props) {
                 style={[styles.mt4]}
                 onPress={props.onConfirm}
                 pressOnEnter
-                text={props.confirmText || props.translate('common.yes')}
-                isDisabled={props.network.isOffline && props.shouldDisableConfirmButtonWhenOffline}
+                text={props.confirmText || translate('common.yes')}
+                isDisabled={isOffline && props.shouldDisableConfirmButtonWhenOffline}
             />
             {props.shouldShowCancelButton && (
                 <Button
                     style={[styles.mt3, styles.noSelect]}
                     onPress={props.onCancel}
-                    text={props.cancelText || props.translate('common.no')}
+                    text={props.cancelText || translate('common.no')}
                     shouldUseDefaultHover
                 />
             )}
@@ -97,4 +93,4 @@ function ConfirmContent(props) {
 ConfirmContent.propTypes = propTypes;
 ConfirmContent.defaultProps = defaultProps;
 ConfirmContent.displayName = 'ConfirmContent';
-export default compose(withLocalize, withNetwork())(ConfirmContent);
+export default ConfirmContent;

From 0b7ca5232c0b93ee7b5beca86edd513b680856ec Mon Sep 17 00:00:00 2001
From: Sam Hariri <137707942+samh-nl@users.noreply.github.com>
Date: Tue, 1 Aug 2023 17:52:02 +0200
Subject: [PATCH 4/4] style: prettify

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

diff --git a/src/components/ConfirmContent.js b/src/components/ConfirmContent.js
index dbf8d4889d99..6981fd451309 100644
--- a/src/components/ConfirmContent.js
+++ b/src/components/ConfirmContent.js
@@ -60,7 +60,7 @@ const defaultProps = {
 function ConfirmContent(props) {
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
-    
+
     return (
         <View style={[styles.m5, ...props.contentStyles]}>
             <View style={[styles.flexRow, styles.mb4]}>