Merge pull request #64674 from nkdengineer/fix/63919

Test drive modal appears briefly when closing the validation page

Author: inimaga

src/components/FeatureTrainingModal.tsx

@@ -127,6 +127,9 @@ type BaseFeatureTrainingModalProps = {
 
     /** Whether to navigate back when closing the modal */
     shouldGoBack?: boolean;
+
+    /** Whether to call onHelp when modal is hidden completely */
+    shouldCallOnHelpWhenModalHidden?: boolean;
 };
 
 type FeatureTrainingModalVideoProps = {
@@ -192,6 +195,7 @@ function FeatureTrainingModal({
     shouldShowConfirmationLoader = false,
     canConfirmWhileOffline = true,
     shouldGoBack = true,
+    shouldCallOnHelpWhenModalHidden = false,
 }: FeatureTrainingModalProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -372,6 +376,12 @@ function FeatureTrainingModal({
                     : {}),
                 ...modalInnerContainerStyle,
             }}
+            onModalHide={() => {
+                if (!shouldCallOnHelpWhenModalHidden) {
+                    return;
+                }
+                onHelp();
+            }}
         >
             <Wrapper
                 style={[styles.mh100, onboardingIsMediumOrLargerScreenWidth && StyleUtils.getWidthStyle(width)]}
@@ -405,7 +415,13 @@ function FeatureTrainingModal({
                         <Button
                             large
                             style={[styles.mb3]}
-                            onPress={onHelp}
+                            onPress={() => {
+                                if (shouldCallOnHelpWhenModalHidden) {
+                                    setIsModalVisible(false);
+                                    return;
+                                }
+                                onHelp();
+                            }}
                             text={helpText}
                         />
                     )}

src/components/TestDrive/Modal/AdminTestDriveModal.tsx

@@ -35,6 +35,7 @@ function AdminTestDriveModal() {
             description={translate('testDrive.modal.description')}
             onConfirm={navigate}
             onHelp={skipTestDrive}
+            shouldCallOnHelpWhenModalHidden
         />
     );
 }

src/components/TestDrive/Modal/BaseTestDriveModal.tsx

@@ -9,7 +9,16 @@ import CONST from '@src/CONST';
 
 type BaseTestDriveModalProps = Pick<
     FeatureTrainingModalProps,
-    'children' | 'description' | 'onConfirm' | 'shouldCloseOnConfirm' | 'shouldRenderHTMLDescription' | 'avoidKeyboard' | 'shouldShowConfirmationLoader' | 'canConfirmWhileOffline' | 'onHelp'
+    | 'children'
+    | 'description'
+    | 'onConfirm'
+    | 'shouldCloseOnConfirm'
+    | 'shouldRenderHTMLDescription'
+    | 'avoidKeyboard'
+    | 'shouldShowConfirmationLoader'
+    | 'canConfirmWhileOffline'
+    | 'onHelp'
+    | 'shouldCallOnHelpWhenModalHidden'
 >;
 
 function BaseTestDriveModal({
@@ -22,6 +31,7 @@ function BaseTestDriveModal({
     avoidKeyboard,
     shouldShowConfirmationLoader,
     canConfirmWhileOffline,
+    shouldCallOnHelpWhenModalHidden,
 }: BaseTestDriveModalProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -46,6 +56,7 @@ function BaseTestDriveModal({
             shouldShowConfirmationLoader={shouldShowConfirmationLoader}
             shouldUseScrollView
             canConfirmWhileOffline={canConfirmWhileOffline}
+            shouldCallOnHelpWhenModalHidden={shouldCallOnHelpWhenModalHidden}
         >
             {children}
         </FeatureTrainingModal>

src/components/TestDrive/Modal/EmployeeTestDriveModal.tsx

@@ -109,6 +109,7 @@ function EmployeeTestDriveModal() {
             avoidKeyboard
             shouldShowConfirmationLoader={isLoading}
             canConfirmWhileOffline={false}
+            shouldCallOnHelpWhenModalHidden
         >
             <TextInput
                 placeholder={translate('testDrive.modal.employee.email')}