Merge pull request Expensify#67290 from Krishna2323/krishna2323/issue/65681

Author: blimpich

src/pages/settings/Subscription/CardSection/CardSection.tsx

@@ -1,6 +1,5 @@
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
-import Button from '@components/Button';
 import ConfirmModal from '@components/ConfirmModal';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -34,6 +33,7 @@ import SubscriptionBillingBanner from './BillingBanner/SubscriptionBillingBanner
 import TrialEndedBillingBanner from './BillingBanner/TrialEndedBillingBanner';
 import TrialStartedBillingBanner from './BillingBanner/TrialStartedBillingBanner';
 import CardSectionActions from './CardSectionActions';
+import CardSectionButton from './CardSectionButton';
 import CardSectionDataEmpty from './CardSectionDataEmpty';
 import RequestEarlyCancellationMenuItem from './RequestEarlyCancellationMenuItem';
 import type {BillingStatusResult} from './utils';
@@ -176,7 +176,7 @@ function CardSection() {
 
                 <View style={styles.mb3}>{isEmptyObject(defaultCard?.accountData) && <CardSectionDataEmpty />}</View>
                 {billingStatus?.isRetryAvailable !== undefined && (
-                    <Button
+                    <CardSectionButton
                         text={translate('subscription.cardSection.retryPaymentButton')}
                         isDisabled={isOffline || !billingStatus?.isRetryAvailable}
                         isLoading={subscriptionRetryBillingStatusPending}
@@ -186,7 +186,7 @@ function CardSection() {
                     />
                 )}
                 {hasCardAuthenticatedError() && (
-                    <Button
+                    <CardSectionButton
                         text={translate('subscription.cardSection.authenticatePayment')}
                         isDisabled={isOffline || !billingStatus?.isAuthenticationRequired}
                         isLoading={subscriptionRetryBillingStatusPending}

src/pages/settings/Subscription/CardSection/CardSectionButton/index.native.tsx

@@ -0,0 +1,8 @@
+import type {ButtonProps} from '@components/Button';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function CardSectionButton(_props: ButtonProps) {
+    return null;
+}
+
+export default CardSectionButton;

src/pages/settings/Subscription/CardSection/CardSectionButton/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import type {ButtonProps} from '@components/Button';
+import Button from '@components/Button';
+
+function CardSectionButton(props: ButtonProps) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <Button {...props} />;
+}
+
+export default CardSectionButton;