Merge pull request Expensify#66868 from software-mansion-labs/feat/reanimated-modal-for-compare-plans-modal

Migrate ComparePlansModal

Author: mountiny

src/pages/settings/Subscription/CardAuthenticationModal/index.tsx

@@ -5,6 +5,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useOnyx from '@hooks/useOnyx';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {clearPaymentCard3dsVerification, verifySetupIntent} from '@userActions/PaymentMethods';
 import {verifySetupIntentAndRequestPolicyOwnerChange} from '@userActions/Policy/Policy';
@@ -19,6 +20,9 @@ type CardAuthenticationModalProps = {
 };
 function CardAuthenticationModal({headerTitle, policyID}: CardAuthenticationModalProps) {
     const styles = useThemeStyles();
+    // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to be consistent with BaseModal component
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {isSmallScreenWidth} = useResponsiveLayout();
     const [authenticationLink] = useOnyx(ONYXKEYS.VERIFY_3DS_SUBSCRIPTION, {canBeMissing: true});
     const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: true});
     const [isLoading, setIsLoading] = useState(true);
@@ -75,9 +79,10 @@ function CardAuthenticationModal({headerTitle, policyID}: CardAuthenticationModa
                 <HeaderWithBackButton
                     title={headerTitle}
                     shouldShowBorderBottom
-                    shouldShowCloseButton
+                    shouldShowCloseButton={!isSmallScreenWidth}
                     onCloseButtonPress={onModalClose}
-                    shouldShowBackButton={false}
+                    shouldShowBackButton={isSmallScreenWidth}
+                    onBackButtonPress={onModalClose}
                     shouldDisplayHelpButton={false}
                 />
                 {isLoading && <FullScreenLoadingIndicator />}

src/pages/settings/Subscription/SubscriptionPlan/ComparePlansModal.tsx

@@ -40,6 +40,8 @@ function ComparePlansModal({isModalVisible, setIsModalVisible}: ComparePlansModa
         setIsModalVisible(false);
     };
 
+    const onClose = () => setIsModalVisible(false);
+
     const renderPlans = () => (
         <View style={isSmallScreenWidth ? [styles.ph4, styles.pb8] : [styles.ph8, styles.pb8]}>
             <Text style={[styles.textLabelSupporting, styles.textNormal]}>
@@ -70,15 +72,17 @@ function ComparePlansModal({isModalVisible, setIsModalVisible}: ComparePlansModa
                 <Modal
                     isVisible={isModalVisible}
                     type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED : CONST.MODAL.MODAL_TYPE.CENTERED_SMALL}
-                    onClose={() => setIsModalVisible(false)}
+                    onClose={onClose}
                     animationOut={isSmallScreenWidth ? animationOut : undefined}
                     innerContainerStyle={isSmallScreenWidth ? {...safeAreaPaddingBottomStyle, maxHeight} : {...styles.workspaceSection, ...safeAreaPaddingBottomStyle, maxHeight}}
+                    shouldUseReanimatedModal
                 >
                     <HeaderWithBackButton
                         title={translate('subscription.compareModal.comparePlans')}
-                        shouldShowCloseButton
-                        onCloseButtonPress={() => setIsModalVisible(false)}
-                        shouldShowBackButton={false}
+                        shouldShowCloseButton={!isSmallScreenWidth}
+                        onCloseButtonPress={onClose}
+                        shouldShowBackButton={isSmallScreenWidth}
+                        onBackButtonPress={onClose}
                         style={isSmallScreenWidth ? styles.pl4 : [styles.pr3, styles.pl8]}
                         shouldDisplayHelpButton={false}
                     />

src/styles/utils/generators/ModalStyleUtils.ts

@@ -208,6 +208,8 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                     boxShadow: theme.shadow,
                     borderRadius: variables.componentBorderRadiusLarge,
                     borderWidth: 0,
+                    marginTop: 'auto',
+                    marginBottom: 'auto',
                 };
 
                 // Allow this modal to be dismissed with a swipe down or swipe right