From 76bf1313e6e9083867a800445145f4ec04c1a136 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Tue, 14 Nov 2023 13:21:46 +0100
Subject: [PATCH 1/4] ref: started moving FormAlertWithSubmitButton to
 Typescript

---
 src/components/FormAlertWithSubmitButton.js  | 113 -------------------
 src/components/FormAlertWithSubmitButton.tsx | 104 +++++++++++++++++
 2 files changed, 104 insertions(+), 113 deletions(-)
 delete mode 100644 src/components/FormAlertWithSubmitButton.js
 create mode 100644 src/components/FormAlertWithSubmitButton.tsx

diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
deleted file mode 100644
index 1ffbf0d667e2..000000000000
--- a/src/components/FormAlertWithSubmitButton.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {View} from 'react-native';
-import _ from 'underscore';
-import styles from '@styles/styles';
-import Button from './Button';
-import FormAlertWrapper from './FormAlertWrapper';
-
-const propTypes = {
-    /** Text for the button */
-    buttonText: PropTypes.string.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.isRequired,
-
-    /** Whether the button is disabled */
-    isDisabled: PropTypes.bool,
-
-    /** Is the button in a loading state */
-    isLoading: PropTypes.bool,
-
-    /** Whether message is in html format */
-    isMessageHtml: PropTypes.bool,
-
-    /** Error message to display above button */
-    message: PropTypes.string,
-
-    /** Callback fired when the "fix the errors" link is pressed */
-    onFixTheErrorsLinkPressed: PropTypes.func,
-
-    /** Submit function */
-    onSubmit: PropTypes.func.isRequired,
-
-    /** Should the button be enabled when offline */
-    enabledWhenOffline: PropTypes.bool,
-
-    /** Disable press on enter for submit button */
-    disablePressOnEnter: PropTypes.bool,
-
-    /** Whether the form submit action is dangerous */
-    isSubmitActionDangerous: PropTypes.bool,
-
-    /** Custom content to display in the footer after submit button */
-    footerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-
-    /** Styles for the button */
-    // eslint-disable-next-line react/forbid-prop-types
-    buttonStyles: PropTypes.arrayOf(PropTypes.object),
-};
-
-const defaultProps = {
-    message: '',
-    isDisabled: false,
-    isMessageHtml: false,
-    containerStyles: [],
-    isLoading: false,
-    onFixTheErrorsLinkPressed: () => {},
-    enabledWhenOffline: false,
-    disablePressOnEnter: false,
-    isSubmitActionDangerous: false,
-    footerContent: null,
-    buttonStyles: [],
-};
-
-function FormAlertWithSubmitButton(props) {
-    const buttonStyles = [_.isEmpty(props.footerContent) ? {} : styles.mb3, ...props.buttonStyles];
-
-    return (
-        <FormAlertWrapper
-            containerStyles={[styles.mh5, styles.mb5, styles.justifyContentEnd, ...props.containerStyles]}
-            isAlertVisible={props.isAlertVisible}
-            isMessageHtml={props.isMessageHtml}
-            message={props.message}
-            onFixTheErrorsLinkPressed={props.onFixTheErrorsLinkPressed}
-        >
-            {(isOffline) => (
-                <View>
-                    {isOffline && !props.enabledWhenOffline ? (
-                        <Button
-                            success
-                            isDisabled
-                            text={props.buttonText}
-                            style={buttonStyles}
-                            danger={props.isSubmitActionDangerous}
-                        />
-                    ) : (
-                        <Button
-                            success
-                            pressOnEnter={!props.disablePressOnEnter}
-                            text={props.buttonText}
-                            style={buttonStyles}
-                            onPress={props.onSubmit}
-                            isDisabled={props.isDisabled}
-                            isLoading={props.isLoading}
-                            danger={props.isSubmitActionDangerous}
-                        />
-                    )}
-                    {props.footerContent}
-                </View>
-            )}
-        </FormAlertWrapper>
-    );
-}
-
-FormAlertWithSubmitButton.propTypes = propTypes;
-FormAlertWithSubmitButton.defaultProps = defaultProps;
-FormAlertWithSubmitButton.displayName = 'FormAlertWithSubmitButton';
-
-export default FormAlertWithSubmitButton;
diff --git a/src/components/FormAlertWithSubmitButton.tsx b/src/components/FormAlertWithSubmitButton.tsx
new file mode 100644
index 000000000000..e64c7cbff998
--- /dev/null
+++ b/src/components/FormAlertWithSubmitButton.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import {StyleProp, View, ViewStyle} from 'react-native';
+import styles from '@styles/styles';
+import Button from './Button';
+import FormAlertWrapper from './FormAlertWrapper';
+
+type FormAlertWithSubmitButtonProps = {
+    /** Error message to display above button */
+    message?: string;
+
+    /** Whether the button is disabled */
+    isDisabled?: boolean;
+
+    /** Whether message is in html format */
+    isMessageHtml?: boolean;
+
+    /** Styles for container element */
+    containerStyles?: StyleProp<ViewStyle>;
+
+    /** Is the button in a loading state */
+    isLoading?: boolean;
+
+    /** Callback fired when the "fix the errors" link is pressed */
+    onFixTheErrorsLinkPressed?: () => void;
+
+    /** Should the button be enabled when offline */
+    enabledWhenOffline?: boolean;
+
+    /** Disable press on enter for submit button */
+    disablePressOnEnter?: boolean;
+
+    /** Whether the form submit action is dangerous */
+    isSubmitActionDangerous?: boolean;
+
+    /** Custom content to display in the footer after submit button */
+    footerContent?: React.ReactNode;
+
+    /** Styles for the button */
+    buttonStyles?: StyleProp<ViewStyle>;
+
+    /** Whether to show the alert text */
+    isAlertVisible: boolean;
+
+    /** Text for the button */
+    buttonText: string;
+};
+
+function FormAlertWithSubmitButton({
+    message = '',
+    isDisabled = false,
+    isMessageHtml = false,
+    containerStyles = [],
+    isLoading = false,
+    onFixTheErrorsLinkPressed = () => {},
+    enabledWhenOffline = false,
+    disablePressOnEnter = false,
+    isSubmitActionDangerous = false,
+    footerContent = null,
+    buttonStyles = [],
+    buttonText,
+    isAlertVisible,
+}: FormAlertWithSubmitButtonProps) {
+    const style = [!footerContent ? {} : styles.mb3, buttonStyles];
+
+    return (
+        <FormAlertWrapper
+            containerStyles={[styles.mh5, styles.mb5, styles.justifyContentEnd, containerStyles]}
+            isAlertVisible={isAlertVisible}
+            isMessageHtml={isMessageHtml}
+            message={message}
+            onFixTheErrorsLinkPressed={onFixTheErrorsLinkPressed}
+        >
+            {(isOffline) => (
+                <View>
+                    {isOffline && !enabledWhenOffline ? (
+                        <Button
+                            success
+                            isDisabled
+                            text={buttonText}
+                            style={style}
+                            danger={isSubmitActionDangerous}
+                        />
+                    ) : (
+                        <Button
+                            success
+                            pressOnEnter={!disablePressOnEnter}
+                            text={buttonText}
+                            style={style}
+                            onPress={onSubmit}
+                            isDisabled={isDisabled}
+                            isLoading={isLoading}
+                            danger={isSubmitActionDangerous}
+                        />
+                    )}
+                    {footerContent}
+                </View>
+            )}
+        </FormAlertWrapper>
+    );
+}
+
+FormAlertWithSubmitButton.displayName = 'FormAlertWithSubmitButton';
+
+export default FormAlertWithSubmitButton;

From 747cc21d40d120e526532eec95442386ba6b9bb1 Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Wed, 13 Dec 2023 22:01:13 +0100
Subject: [PATCH 2/4] fix: typo

---
 src/components/FormAlertWithSubmitButton.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/components/FormAlertWithSubmitButton.tsx b/src/components/FormAlertWithSubmitButton.tsx
index b8190d8ced4b..942391819762 100644
--- a/src/components/FormAlertWithSubmitButton.tsx
+++ b/src/components/FormAlertWithSubmitButton.tsx
@@ -46,6 +46,12 @@ type FormAlertWithSubmitButtonProps = {
 
     /** Text for the button */
     buttonText: string;
+
+    /** Whether to use a smaller submit button size */
+    useSmallerSubmitButtonSize?: boolean;
+
+    /** Style for the error message for submit button */
+    errorMessageStyle?: StyleProp<ViewStyle>;
 };
 
 function FormAlertWithSubmitButton({
@@ -63,6 +69,8 @@ function FormAlertWithSubmitButton({
     buttonText,
     isAlertVisible,
     onSubmit,
+    useSmallerSubmitButtonSize = false,
+    errorMessageStyle,
 }: FormAlertWithSubmitButtonProps) {
     const styles = useThemeStyles();
     const style = [!footerContent ? {} : styles.mb3, buttonStyles];
@@ -74,6 +82,7 @@ function FormAlertWithSubmitButton({
             isMessageHtml={isMessageHtml}
             message={message}
             onFixTheErrorsLinkPressed={onFixTheErrorsLinkPressed}
+            errorMessageStyle={errorMessageStyle}
         >
             {(isOffline: boolean) => (
                 <View>
@@ -84,6 +93,7 @@ function FormAlertWithSubmitButton({
                             text={buttonText}
                             style={style}
                             danger={isSubmitActionDangerous}
+                            medium={useSmallerSubmitButtonSize}
                         />
                     ) : (
                         <Button
@@ -95,6 +105,7 @@ function FormAlertWithSubmitButton({
                             isDisabled={isDisabled}
                             isLoading={isLoading}
                             danger={isSubmitActionDangerous}
+                            medium={props.useSmallerSubmitButtonSize}
                         />
                     )}
                     {footerContent}

From fdb2b8ae4d27171d22cb0cf65fc1267c4e273bda Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Wed, 13 Dec 2023 22:02:18 +0100
Subject: [PATCH 3/4] fix: typo

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

diff --git a/src/components/FormAlertWithSubmitButton.tsx b/src/components/FormAlertWithSubmitButton.tsx
index 942391819762..a3dba608b769 100644
--- a/src/components/FormAlertWithSubmitButton.tsx
+++ b/src/components/FormAlertWithSubmitButton.tsx
@@ -105,7 +105,7 @@ function FormAlertWithSubmitButton({
                             isDisabled={isDisabled}
                             isLoading={isLoading}
                             danger={isSubmitActionDangerous}
-                            medium={props.useSmallerSubmitButtonSize}
+                            medium={useSmallerSubmitButtonSize}
                         />
                     )}
                     {footerContent}

From 7f17798229e372088d88aaedff106ed39f9452bc Mon Sep 17 00:00:00 2001
From: Jakub Butkiewicz <jakub.butkiewicz94@gmail.com>
Date: Mon, 18 Dec 2023 11:31:31 +0100
Subject: [PATCH 4/4] fix: resolve type issue

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

diff --git a/src/components/FormAlertWithSubmitButton.tsx b/src/components/FormAlertWithSubmitButton.tsx
index ae8b56284b15..d8e30b27371d 100644
--- a/src/components/FormAlertWithSubmitButton.tsx
+++ b/src/components/FormAlertWithSubmitButton.tsx
@@ -84,7 +84,7 @@ function FormAlertWithSubmitButton({
             onFixTheErrorsLinkPressed={onFixTheErrorsLinkPressed}
             errorMessageStyle={errorMessageStyle}
         >
-            {(isOffline: boolean) => (
+            {(isOffline: boolean | undefined) => (
                 <View>
                     {isOffline && !enabledWhenOffline ? (
                         <Button