[Payment card / Subscription] Integrate failed billing scenarios banner with backend data

src/ONYXKEYS.ts

@@ -157,6 +157,18 @@ const ONYXKEYS = {
     /** Store the state of the subscription */
     NVP_PRIVATE_SUBSCRIPTION: 'nvp_private_subscription',
 
+    /** Store the amount of owed money */
+    NVP_PRIVATE_AMOUNT_OWED: 'nvp_private_amountOwed',
+
+    /** Store the stripe id status */
+    NVP_PRIVATE_STRIPE_CUSTOMER_ID: 'nvp_private_stripeCustomerID',
+
+    /** Store the billing dispute status */
+    NVP_PRIVATE_BILLING_DISPUTE_PENDING: 'nvp_private_billingDisputePending',
+
+    /** Store the billing status */
+    NVP_PRIVATE_BILLING_STATUS: 'nvp_private_billingStatus',
+
     /** Store preferred skintone for emoji */
     PREFERRED_EMOJI_SKIN_TONE: 'nvp_expensify_preferredEmojiSkinTone',
 
@@ -339,6 +351,12 @@ const ONYXKEYS = {
     /** Holds the checks used while transferring the ownership of the workspace */
     POLICY_OWNERSHIP_CHANGE_CHECKS: 'policyOwnershipChangeChecks',
 
+    /** Indicates whether ClearOutstandingBalance failed */
+    SUBSCRIPTION_RETRY_BILLING_STATUS_FAILED: 'subscriptionRetryBillingStatusFailed',
+
+    /** Indicates whether ClearOutstandingBalance was successful */
+    SUBSCRIPTION_RETRY_BILLING_STATUS_SUCCESSFUL: 'subscriptionRetryBillingStatusSuccessful',
+
     /** Collection Keys */
     COLLECTION: {
         DOWNLOAD: 'download_',
@@ -672,6 +690,20 @@ type OnyxValuesMapping = {
     [ONYXKEYS.NVP_DISMISSED_REFERRAL_BANNERS]: OnyxTypes.DismissedReferralBanners;
     [ONYXKEYS.NVP_HAS_SEEN_TRACK_TRAINING]: boolean;
     [ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION]: OnyxTypes.PrivateSubscription;
+    [ONYXKEYS.NVP_PRIVATE_AMOUNT_OWED]: number;
+    [ONYXKEYS.NVP_PRIVATE_STRIPE_CUSTOMER_ID]: {
+        paymentMethodID: string;
+        intentsID: string;
+        currency: string;
+        status: 'authentication_required' | 'intent_required' | 'succeeded';
+    };
+    [ONYXKEYS.NVP_PRIVATE_BILLING_DISPUTE_PENDING]: number;
+    [ONYXKEYS.NVP_PRIVATE_BILLING_STATUS]: {
+        action: string;
+        periodMonth: string;
+        periodYear: string;
+        declineReason: 'insufficient_funds' | 'expired_card';
+    };
     [ONYXKEYS.USER_WALLET]: OnyxTypes.UserWallet;
     [ONYXKEYS.WALLET_ONFIDO]: OnyxTypes.WalletOnfido;
     [ONYXKEYS.WALLET_ADDITIONAL_DETAILS]: OnyxTypes.WalletAdditionalDetails;
@@ -719,6 +751,8 @@ type OnyxValuesMapping = {
     [ONYXKEYS.CACHED_PDF_PATHS]: Record<string, string>;
     [ONYXKEYS.POLICY_OWNERSHIP_CHANGE_CHECKS]: Record<string, OnyxTypes.PolicyOwnershipChangeChecks>;
     [ONYXKEYS.NVP_QUICK_ACTION_GLOBAL_CREATE]: OnyxTypes.QuickAction;
+    [ONYXKEYS.SUBSCRIPTION_RETRY_BILLING_STATUS_FAILED]: boolean;
+    [ONYXKEYS.SUBSCRIPTION_RETRY_BILLING_STATUS_SUCCESSFUL]: boolean;
     [ONYXKEYS.NVP_FIRST_DAY_FREE_TRIAL]: string;
     [ONYXKEYS.NVP_LAST_DAY_FREE_TRIAL]: string;
     [ONYXKEYS.NVP_BILLING_FUND_ID]: number;

src/components/Indicator.tsx

@@ -5,6 +5,7 @@ import {withOnyx} from 'react-native-onyx';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as PolicyUtils from '@libs/PolicyUtils';
+import * as SubscriptionUtils from '@libs/SubscriptionUtils';
 import * as UserUtils from '@libs/UserUtils';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -54,6 +55,7 @@ function Indicator({reimbursementAccount, policies, bankAccountList, fundList, u
         () => Object.values(cleanPolicies).some(PolicyUtils.hasPolicyError),
         () => Object.values(cleanPolicies).some(PolicyUtils.hasCustomUnitsError),
         () => Object.values(cleanPolicies).some(PolicyUtils.hasEmployeeListError),
+        () => SubscriptionUtils.hasSubscriptionRedDotError(),
         () => Object.keys(reimbursementAccount?.errors ?? {}).length > 0,
         () => !!loginList && UserUtils.hasLoginListError(loginList),
 
@@ -62,7 +64,7 @@ function Indicator({reimbursementAccount, policies, bankAccountList, fundList, u
     ];
     const infoCheckingMethods: CheckingMethod[] = [() => !!loginList && UserUtils.hasLoginListInfo(loginList)];
     const shouldShowErrorIndicator = errorCheckingMethods.some((errorCheckingMethod) => errorCheckingMethod());
-    const shouldShowInfoIndicator = !shouldShowErrorIndicator && infoCheckingMethods.some((infoCheckingMethod) => infoCheckingMethod());
+    const shouldShowInfoIndicator = !shouldShowErrorIndicator && (infoCheckingMethods.some((infoCheckingMethod) => infoCheckingMethod()) || SubscriptionUtils.hasSubscriptionGreenDotInfo());
 
     const indicatorColor = shouldShowErrorIndicator ? theme.danger : theme.success;
     const indicatorStyles = [styles.alignItemsCenter, styles.justifyContentCenter, styles.statusIndicator(indicatorColor)];

src/languages/en.ts

@@ -3217,6 +3217,25 @@ export default {
     subscription: {
         mobileReducedFunctionalityMessage: 'You can’t make changes to your subscription in the mobile app.',
         billingBanner: {
+            outdatedInfo: 'Your payment info is outdated',
+            updatePaymentInformation: 'Please update your payment information.',
+            updateCardDataByDate: ({date}) => `Update your payment card by ${date} to continue using all of your favorite features.`,
+            paymentPastDuePayByDate: ({date}) => `Your payment is past due. Please pay your invoice by ${date} to avoid service interruption`,
+            paymentPastDue: 'Your payment is past due. Please pay your invoice.',
+            cardCouldNotBeCharged: 'Your card couldn’t be charged',
+            retryMessage: 'Before retrying, please call your bank directly to authorize Expensify charges and remove any holds. Otherwise, try adding a different payment card.',
+            cardNotFullyAuthenticated: ({cardEnding}) =>
+                `Your payment card hasn’t been fully authenticated. Please complete the authentication process to activate your payment card ending in ${cardEnding}.`,
+            cardDeclinedDueToInsufficientFunds: ({amountOwed}) =>
+                `Your payment card was declined due to insufficient funds. Please retry or add a new payment card to clear your ${amountOwed} outstanding balance.`,
+            cardExpired: ({amountOwed}) => `Your payment card expired. Please add a new payment card to clear your ${amountOwed} outstanding balance.`,
+            cardExpiringSoon: 'Your card is expiring soon',
+            cardWillExpireAtTheEndOfMonth:
+                'Your payment card will expire at the end of this month. Click the three-dot menu below to update it and continue using all your favorite features.',
+            cardOnDispute: ({amountOwed, cardEnding}) =>
+                `You disputed the ${amountOwed} charge on the card ending in ${cardEnding}. Your account will be locked until the dispute is resolved with your bank.`,
+            succeeded: 'Success!',
+            billedSuccessfully: 'Your card has been billed successfully.',
             preTrial: {
                 title: 'Start a free trial',
                 subtitle: 'To get started, ',

src/languages/es.ts

@@ -3721,6 +3721,26 @@ export default {
     subscription: {
         mobileReducedFunctionalityMessage: 'No puedes hacer cambios en tu suscripción en la aplicación móvil.',
         billingBanner: {
+            outdatedInfo: 'Tu información de pago está desactualizada',
+            updatePaymentInformation: 'Por favor, actualiza tu información de pago.',
+            updateCardDataByDate: ({date}) => `Actualiza tu tarjeta de pago antes del ${date} para continuar utilizando todas tus herramientas favoritas`,
+            paymentPastDuePayByDate: ({date}) => `Tu pago está vencido. Por favor, paga tu factura antes del ${date} para evitar la interrupción del servicio.`,
+            paymentPastDue: 'Tu pago está vencido. Por favor, paga tu factura.',
+            cardCouldNotBeCharged: 'No se ha podido realizar el cobro a tu tarjeta',
+            retryMessage:
+                'Antes de volver a intentarlo, llama directamente a tu banco para que autorice los cargos de Expensify y elimine las retenciones. De lo contrario, añade una tarjeta de pago diferente.',
+            cardNotFullyAuthenticated: ({cardEnding}) =>
+                `Tu tarjeta de pago no ha sido autenticada completamente. Por favor, completa el proceso de autenticación para activar tu tarjeta de pago que termina en ${cardEnding}.`,
+            cardDeclinedDueToInsufficientFunds: ({amountOwed}) =>
+                `Tu tarjeta de pago fue rechazada por falta de fondos. Vuelve a intentarlo o añade una nueva tarjeta de pago para liquidar tu saldo pendiente de ${amountOwed}.`,
+            cardExpired: ({amountOwed}) => `Tu tarjeta de pago ha expirado. Por favor, añade una nueva tarjeta de pago para liquidar tu saldo pendiente de ${amountOwed}.`,
+            cardExpiringSoon: 'Tu tarjeta caducará pronto',
+            cardWillExpireAtTheEndOfMonth:
+                'Tu tarjeta de pago caducará a finales de este mes. Haz clic en el menú de tres puntos que aparece a continuación para actualizarla y continuar utilizando todas tus herramientas favoritas.',
+            cardOnDispute: ({amountOwed, cardEnding}) =>
+                `Has impugnado el cargo ${amountOwed} en la tarjeta terminada en ${cardEnding}. Tu cuenta estará bloqueada hasta que se resuelva la disputa con tu banco.`,
+            succeeded: 'Éxito!',
+            billedSuccessfully: 'Tu tarjeta fue facturada correctamente.',
             preTrial: {
                 title: 'Iniciar una prueba gratuita',
                 subtitle: 'Para empezar, ',