From b9f0f84059077d4e796f46124c74ec5b0f0dd99c Mon Sep 17 00:00:00 2001
From: Blazej Kustra <blazej.kustra@swmansion.com>
Date: Mon, 11 Dec 2023 12:17:28 +0100
Subject: [PATCH] [TS migration] Migrate 'FormAlertWrapper.js' component to
 TypeScript

---
 src/components/FormAlertWrapper.js  | 91 -----------------------------
 src/components/FormAlertWrapper.tsx | 78 +++++++++++++++++++++++++
 2 files changed, 78 insertions(+), 91 deletions(-)
 delete mode 100644 src/components/FormAlertWrapper.js
 create mode 100644 src/components/FormAlertWrapper.tsx

diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js
deleted file mode 100644
index c577048c0a1b..000000000000
--- a/src/components/FormAlertWrapper.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {View} from 'react-native';
-import _ from 'underscore';
-import compose from '@libs/compose';
-import useThemeStyles from '@styles/useThemeStyles';
-import FormHelpMessage from './FormHelpMessage';
-import networkPropTypes from './networkPropTypes';
-import {withNetwork} from './OnyxProvider';
-import RenderHTML from './RenderHTML';
-import Text from './Text';
-import TextLink from './TextLink';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-
-const propTypes = {
-    /** Wrapped child components */
-    children: PropTypes.func.isRequired,
-
-    /** Styles for container element */
-    // eslint-disable-next-line react/forbid-prop-types
-    containerStyles: PropTypes.arrayOf(PropTypes.object),
-
-    /** Whether to show the alert text */
-    isAlertVisible: PropTypes.bool,
-
-    /** Whether message is in html format */
-    isMessageHtml: PropTypes.bool,
-
-    /** Error message to display above button */
-    message: PropTypes.string,
-
-    /** Props to detect online status */
-    network: networkPropTypes.isRequired,
-
-    /** Callback fired when the "fix the errors" link is pressed */
-    onFixTheErrorsLinkPressed: PropTypes.func,
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    containerStyles: [],
-    isAlertVisible: false,
-    isMessageHtml: false,
-    message: '',
-    onFixTheErrorsLinkPressed: () => {},
-};
-
-// The FormAlertWrapper offers a standardized way of showing error messages and offline functionality.
-//
-// This component takes other components as a child prop. It will then render any wrapped components as a function using "render props",
-// and passes it a (bool) isOffline parameter. Child components can then use the isOffline variable to determine offline behavior.
-function FormAlertWrapper(props) {
-    const styles = useThemeStyles();
-    let children;
-    if (_.isEmpty(props.message)) {
-        children = (
-            <Text style={[styles.formError, styles.mb0]}>
-                {`${props.translate('common.please')} `}
-                <TextLink
-                    style={styles.label}
-                    onPress={props.onFixTheErrorsLinkPressed}
-                >
-                    {props.translate('common.fixTheErrors')}
-                </TextLink>
-                {` ${props.translate('common.inTheFormBeforeContinuing')}.`}
-            </Text>
-        );
-    } else if (props.isMessageHtml) {
-        children = <RenderHTML html={`<alert-text>${props.message}</alert-text>`} />;
-    }
-    return (
-        <View style={props.containerStyles}>
-            {props.isAlertVisible && (
-                <FormHelpMessage
-                    message={props.message}
-                    style={[styles.mb3]}
-                >
-                    {children}
-                </FormHelpMessage>
-            )}
-            {props.children(props.network.isOffline)}
-        </View>
-    );
-}
-
-FormAlertWrapper.propTypes = propTypes;
-FormAlertWrapper.defaultProps = defaultProps;
-FormAlertWrapper.displayName = 'FormAlertWrapper';
-
-export default compose(withLocalize, withNetwork())(FormAlertWrapper);
diff --git a/src/components/FormAlertWrapper.tsx b/src/components/FormAlertWrapper.tsx
new file mode 100644
index 000000000000..f77c5143f512
--- /dev/null
+++ b/src/components/FormAlertWrapper.tsx
@@ -0,0 +1,78 @@
+import React, {ReactNode} from 'react';
+import {StyleProp, View, ViewStyle} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@styles/useThemeStyles';
+import Network from '@src/types/onyx/Network';
+import FormHelpMessage from './FormHelpMessage';
+import {withNetwork} from './OnyxProvider';
+import RenderHTML from './RenderHTML';
+import Text from './Text';
+import TextLink from './TextLink';
+
+type FormAlertWrapperProps = {
+    /** Wrapped child components */
+    children: (isOffline?: boolean) => ReactNode;
+
+    /** Styles for container element */
+    containerStyles?: StyleProp<ViewStyle>;
+
+    /** Whether to show the alert text */
+    isAlertVisible?: boolean;
+
+    /** Whether message is in html format */
+    isMessageHtml?: boolean;
+
+    /** Error message to display above button */
+    message?: string;
+
+    /** Props to detect online status */
+    network: Network;
+
+    /** Callback fired when the "fix the errors" link is pressed */
+    onFixTheErrorsLinkPressed?: () => void;
+};
+
+// The FormAlertWrapper offers a standardized way of showing error messages and offline functionality.
+//
+// This component takes other components as a child prop. It will then render any wrapped components as a function using "render props",
+// and passes it a (bool) isOffline parameter. Child components can then use the isOffline variable to determine offline behavior.
+function FormAlertWrapper({children, containerStyles, isAlertVisible = false, isMessageHtml = false, message = '', network, onFixTheErrorsLinkPressed = () => {}}: FormAlertWrapperProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
+    let content;
+    if (!message?.length) {
+        content = (
+            <Text style={[styles.formError, styles.mb0]}>
+                {`${translate('common.please')} `}
+                <TextLink
+                    style={styles.label}
+                    onPress={onFixTheErrorsLinkPressed}
+                >
+                    {translate('common.fixTheErrors')}
+                </TextLink>
+                {` ${translate('common.inTheFormBeforeContinuing')}.`}
+            </Text>
+        );
+    } else if (isMessageHtml) {
+        content = <RenderHTML html={`<alert-text>${message}</alert-text>`} />;
+    }
+
+    return (
+        <View style={containerStyles}>
+            {isAlertVisible && (
+                <FormHelpMessage
+                    message={message}
+                    style={[styles.mb3]}
+                >
+                    {content}
+                </FormHelpMessage>
+            )}
+            {children(!!network.isOffline)}
+        </View>
+    );
+}
+
+FormAlertWrapper.displayName = 'FormAlertWrapper';
+
+export default withNetwork()(FormAlertWrapper);