Introduce free trial countdown pop-up

src/CONST/index.ts

@@ -6320,6 +6320,11 @@ const CONST = {
         CONTROL: 'control',
     },
     ACTIONABLE_TRACK_EXPENSE_WHISPER_MESSAGE: 'What would you like to do with this expense?',
+    TRIAL_REMINDER_VARIANT: {
+        BASIC: 'basic',
+        NEAR_END: 'nearEnd',
+        COUNTDOWN: 'countdown',
+    },
     ONBOARDING_ACCOUNTING_MAPPING,
 
     REPORT_FIELD_TITLE_FIELD_ID: 'text_title',

src/Expensify.tsx

@@ -12,6 +12,7 @@ import ProactiveAppReviewModalManager from './components/ProactiveAppReviewModal
 import ScreenShareRequestModal from './components/ScreenShareRequestModal';
 import AppleAuthWrapper from './components/SignInButtons/AppleAuthWrapper';
 import SplashScreenHider from './components/SplashScreenHider';
+import TrialPaymentReminderModalManager from './components/TrialPaymentReminderModalManager';
 import UpdateAppModal from './components/UpdateAppModal';
 import CONFIG from './CONFIG';
 import CONST from './CONST';
@@ -299,6 +300,7 @@ function Expensify() {
                     {updateAvailable && !updateRequired ? <UpdateAppModal /> : null}
                     {/* Proactive app review modal shown when user has completed a trigger action */}
                     <ProactiveAppReviewModalManager />
+                    <TrialPaymentReminderModalManager />
                     <ScreenShareRequestModal />
                 </>
             )}

src/ONYXKEYS.ts

@@ -268,6 +268,9 @@ const ONYXKEYS = {
     /** ID associated with the payment card added by the user. */
     NVP_BILLING_FUND_ID: 'nvp_expensify_billingFundID',
 
+    /** The last dismissed trial payment reminder variation */
+    NVP_TRIAL_PAYMENT_REMINDER_DISMISSED: 'nvp_trialPaymentReminderDismissed',
+
     /** The amount owed by the workspace’s owner. */
     NVP_PRIVATE_AMOUNT_OWED: 'nvp_private_amountOwed',
 
@@ -1404,6 +1407,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.NVP_FIRST_DAY_FREE_TRIAL]: string;
     [ONYXKEYS.NVP_LAST_DAY_FREE_TRIAL]: string;
     [ONYXKEYS.NVP_BILLING_FUND_ID]: number;
+    [ONYXKEYS.NVP_TRIAL_PAYMENT_REMINDER_DISMISSED]: string;
     [ONYXKEYS.NVP_PRIVATE_AMOUNT_OWED]: number;
     [ONYXKEYS.NVP_PRIVATE_OWNER_BILLING_GRACE_PERIOD_END]: number;
     [ONYXKEYS.NVP_DELETE_TRANSACTION_NAVIGATE_BACK_URL]: string | undefined;

src/components/Icon/chunks/illustrations.chunk.ts

@@ -55,6 +55,7 @@ import RunOutOfTime from '@assets/images/multifactorAuthentication/running-out-o
 import PendingTravel from '@assets/images/pending-travel.svg';
 // Product Illustrations
 import Abracadabra from '@assets/images/product-illustrations/abracadabra.svg';
+import ArmWithCardPos from '@assets/images/product-illustrations/arm_with_card_pos.svg';
 import BigVault from '@assets/images/product-illustrations/big-vault.svg';
 import BrokenCompanyCardBankConnection from '@assets/images/product-illustrations/broken-humpty-dumpty.svg';
 import BrokenMagnifyingGlass from '@assets/images/product-illustrations/broken-magnifying-glass.svg';
@@ -241,6 +242,7 @@ const Illustrations = {
 
     // Product Illustrations
     Abracadabra,
+    ArmWithCardPos,
     BigVault,
     BrokenCompanyCardBankConnection,
     BrokenMagnifyingGlass,

src/components/TrialPaymentReminderModal.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import {View} from 'react-native';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import type {CountdownTime, TrialReminderVariant} from '@hooks/useTrialPaymentReminder';
+import colors from '@styles/theme/colors';
+import CONST from '@src/CONST';
+import Button from './Button';
+import ImageSVG from './ImageSVG';
+import Modal from './Modal';
+import Text from './Text';
+
+type TrialPaymentReminderModalProps = {
+    /** Whether the modal is visible */
+    isVisible: boolean;
+
+    /** The variant of the modal to display */
+    variant: TrialReminderVariant;
+
+    /** Number of days remaining for 'nearEnd' variant */
+    daysRemaining?: number;
+
+    /** Countdown time for 'countdown' variant */
+    countdownTime?: CountdownTime;
+
+    /** Called when user presses Close */
+    onClose: () => void;
+
+    /** Called when user presses Add payment card */
+    onAddPaymentCard: () => void;
+};
+
+function padZero(num: number): string {
+    return num.toString().padStart(2, '0');
+}
+
+function TrialPaymentReminderModal({isVisible, variant, daysRemaining, countdownTime, onClose, onAddPaymentCard}: TrialPaymentReminderModalProps) {
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['ArmWithCardPos']);
+    const {translate} = useLocalize();
+
+    return (
+        <Modal
+            onClose={onClose}
+            onBackdropPress={() => {}}
+            isVisible={isVisible}
+            type={shouldUseNarrowLayout ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM}
+            innerContainerStyle={styles.pv0}
+        >
+            <View style={[styles.alignItemsCenter, styles.wAuto, {backgroundColor: colors.blue800, height: CONST.CONFIRM_CONTENT_SVG_SIZE.HEIGHT}, styles.pb7]}>
+                <ImageSVG
+                    src={illustrations.ArmWithCardPos}
+                    contentFit="contain"
+                />
+            </View>
+            <View style={[styles.m5]}>
+                {variant === CONST.TRIAL_REMINDER_VARIANT.NEAR_END && daysRemaining !== undefined && (
+                    <Text style={[styles.textSuccess, styles.textStrong, styles.mb2]}>{translate('trialPaymentReminder.trialEndsInDays', {days: daysRemaining})}</Text>
+                )}
+                {variant === CONST.TRIAL_REMINDER_VARIANT.COUNTDOWN && !!countdownTime && (
+                    <Text style={[styles.textSuccess, styles.textStrong, styles.mb2]}>
+                        {translate('trialPaymentReminder.trialEndsCountdown', {
+                            hours: padZero(countdownTime.hours),
+                            minutes: padZero(countdownTime.minutes),
+                            seconds: padZero(countdownTime.seconds),
+                        })}
+                    </Text>
+                )}
+
+                <Text style={[styles.textHeadlineH1, styles.mb3]}>{translate('trialPaymentReminder.title')}</Text>
+                <Text style={[styles.textSupporting]}>{translate('trialPaymentReminder.subtitle')}</Text>
+
+                <Button
+                    style={[styles.mt5]}
+                    onPress={onClose}
+                    text={translate('trialPaymentReminder.closeButton')}
+                    large
+                />
+                <Button
+                    success
+                    style={[styles.mt3]}
+                    onPress={onAddPaymentCard}
+                    pressOnEnter
+                    text={translate('trialPaymentReminder.addPaymentCardButton')}
+                    large
+                />
+            </View>
+        </Modal>
+    );
+}
+
+export default TrialPaymentReminderModal;

src/components/TrialPaymentReminderModalManager.tsx

@@ -0,0 +1,35 @@
+import React, {useCallback} from 'react';
+import useTrialPaymentReminder from '@hooks/useTrialPaymentReminder';
+import Navigation from '@libs/Navigation/Navigation';
+import ROUTES from '@src/ROUTES';
+import TrialPaymentReminderModal from './TrialPaymentReminderModal';
+
+function TrialPaymentReminderModalManager() {
+    const {shouldShowModal, currentVariation, countdownTime, dismiss} = useTrialPaymentReminder();
+
+    const handleClose = useCallback(() => {
+        dismiss();
+    }, [dismiss]);
+
+    const handleAddPaymentCard = useCallback(() => {
+        dismiss();
+        Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION_ADD_PAYMENT_CARD);
+    }, [dismiss]);
+
+    if (!currentVariation) {
+        return null;
+    }
+
+    return (
+        <TrialPaymentReminderModal
+            isVisible={shouldShowModal}
+            variant={currentVariation.variant}
+            daysRemaining={currentVariation.daysRemaining}
+            countdownTime={countdownTime}
+            onClose={handleClose}
+            onAddPaymentCard={handleAddPaymentCard}
+        />
+    );
+}
+
+export default TrialPaymentReminderModalManager;

src/hooks/useTrialPaymentReminder.ts

@@ -0,0 +1,194 @@
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import type {ValueOf} from 'type-fest';
+import {calculateRemainingTrialSeconds, calculateTrialDayNumber, doesUserHavePaymentCardAdded, isUserOnFreeTrial} from '@libs/SubscriptionUtils';
+import {setNameValuePair} from '@userActions/User';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
+import useOnyx from './useOnyx';
+
+const FIVE_MINUTES_MS = 5 * 60 * 1000;
+const TWENTY_FOUR_HOURS_IN_SECONDS = 24 * 60 * 60;
+
+/** Waiting for trial data to load */
+const DELAY_LOADING = 'loading';
+/** No trial yet, waiting for workspace creation */
+const DELAY_WAITING = 'waiting';
+/** Trial just started, 5-minute timer running */
+const DELAY_TIMING = 'timing';
+/** Ready to show modal */
+const DELAY_NO_DELAY = 'no_delay';
+
+const DELAY_STATE = {
+    LOADING: DELAY_LOADING,
+    WAITING: DELAY_WAITING,
+    TIMING: DELAY_TIMING,
+    NO_DELAY: DELAY_NO_DELAY,
+} as const;
+
+type TrialReminderVariant = ValueOf<typeof CONST.TRIAL_REMINDER_VARIANT>;
+type DelayState = ValueOf<typeof DELAY_STATE>;
+
+type TrialReminderVariation = {
+    id: string;
+    variant: TrialReminderVariant;
+    daysRemaining?: number;
+};
+
+type CountdownTime = {
+    hours: number;
+    minutes: number;
+    seconds: number;
+};
+
+const TRIAL_REMINDER_VARIATIONS = [
+    {id: 'day1', dayOfTrial: 1, variant: CONST.TRIAL_REMINDER_VARIANT.BASIC},
+    {id: 'day2', dayOfTrial: 2, variant: CONST.TRIAL_REMINDER_VARIANT.BASIC},
+    {id: 'day3', dayOfTrial: 3, variant: CONST.TRIAL_REMINDER_VARIANT.BASIC},
+    {id: 'day7', dayOfTrial: 7, variant: CONST.TRIAL_REMINDER_VARIANT.BASIC},
+    {id: 'day15', dayOfTrial: 15, variant: CONST.TRIAL_REMINDER_VARIANT.BASIC},
+    {id: 'day28', dayOfTrial: 28, variant: CONST.TRIAL_REMINDER_VARIANT.NEAR_END},
+    {id: 'day29', dayOfTrial: 29, variant: CONST.TRIAL_REMINDER_VARIANT.NEAR_END},
+    {id: 'last24h', dayOfTrial: -1, variant: CONST.TRIAL_REMINDER_VARIANT.COUNTDOWN},
+] as const;
+
+function computeCurrentVariation(firstDayFreeTrial: string | undefined, lastDayFreeTrial: string | undefined): TrialReminderVariation | null {
+    if (!isUserOnFreeTrial(firstDayFreeTrial, lastDayFreeTrial)) {
+        return null;
+    }
+
+    const remainingSeconds = calculateRemainingTrialSeconds(lastDayFreeTrial);
+
+    // Last 24 hours takes priority
+    if (remainingSeconds <= TWENTY_FOUR_HOURS_IN_SECONDS && remainingSeconds > 0) {
+        return {
+            id: 'last24h',
+            variant: CONST.TRIAL_REMINDER_VARIANT.COUNTDOWN,
+        };
+    }
+
+    const currentTrialDay = calculateTrialDayNumber(firstDayFreeTrial);
+    if (currentTrialDay <= 0) {
+        return null;
+    }
+
+    for (let i = TRIAL_REMINDER_VARIATIONS.length - 1; i >= 0; i--) {
+        const variation = TRIAL_REMINDER_VARIATIONS[i];
+        if (variation.dayOfTrial > 0 && variation.dayOfTrial <= currentTrialDay) {
+            if (variation.variant === CONST.TRIAL_REMINDER_VARIANT.NEAR_END) {
+                const daysRemaining = Math.ceil(remainingSeconds / TWENTY_FOUR_HOURS_IN_SECONDS);
+                return {
+                    id: variation.id,
+                    variant: variation.variant,
+                    daysRemaining,
+                };
+            }
+            return {
+                id: variation.id,
+                variant: variation.variant,
+            };
+        }
+    }
+
+    return null;
+}
+
+function useTrialPaymentReminder() {
+    const [firstDayFreeTrial, firstDayFreeTrialResult] = useOnyx(ONYXKEYS.NVP_FIRST_DAY_FREE_TRIAL);
+    const [lastDayFreeTrial] = useOnyx(ONYXKEYS.NVP_LAST_DAY_FREE_TRIAL);
+    const [billingFundID] = useOnyx(ONYXKEYS.NVP_BILLING_FUND_ID);
+    const [dismissedVariation, dismissedVariationResult] = useOnyx(ONYXKEYS.NVP_TRIAL_PAYMENT_REMINDER_DISMISSED);
+
+    const [delayState, setDelayState] = useState<DelayState>(DELAY_STATE.LOADING);
+
+    useEffect(() => {
+        if (isLoadingOnyxValue(firstDayFreeTrialResult)) {
+            return;
+        }
+
+        if (delayState === DELAY_STATE.LOADING) {
+            setDelayState(firstDayFreeTrial ? DELAY_STATE.NO_DELAY : DELAY_STATE.WAITING);
+            return;
+        }
+
+        if (delayState === DELAY_STATE.WAITING && firstDayFreeTrial) {
+            setDelayState(DELAY_STATE.TIMING);
+        }
+    }, [delayState, firstDayFreeTrial, firstDayFreeTrialResult]);
+
+    // Run 5-minute timer when in 'timing' state
+    useEffect(() => {
+        if (delayState !== DELAY_STATE.TIMING) {
+            return;
+        }
+        const timer = setTimeout(() => setDelayState(DELAY_STATE.NO_DELAY), FIVE_MINUTES_MS);
+        return () => clearTimeout(timer);
+    }, [delayState]);
+
+    const remainingSecondsRef = useRef(0);
+
+    const [countdownTime, setCountdownTime] = useState<CountdownTime>({hours: 0, minutes: 0, seconds: 0});
+
+    const currentVariation = useMemo(() => computeCurrentVariation(firstDayFreeTrial, lastDayFreeTrial), [firstDayFreeTrial, lastDayFreeTrial]);
+
+    // Run countdown timer when variant is 'countdown'
+    useEffect(() => {
+        if (currentVariation?.variant !== CONST.TRIAL_REMINDER_VARIANT.COUNTDOWN) {
+            return;
+        }
+
+        remainingSecondsRef.current = calculateRemainingTrialSeconds(lastDayFreeTrial);
+
+        const updateCountdown = () => {
+            remainingSecondsRef.current -= 1;
+            const secs = remainingSecondsRef.current;
+            if (secs <= 0) {
+                setCountdownTime({hours: 0, minutes: 0, seconds: 0});
+                return;
+            }
+            setCountdownTime({
+                hours: Math.floor(secs / 3600),
+                minutes: Math.floor((secs % 3600) / 60),
+                seconds: Math.floor(secs % 60),
+            });
+        };
+
+        updateCountdown();
+        const interval = setInterval(updateCountdown, 1000);
+        return () => clearInterval(interval);
+    }, [currentVariation?.variant, lastDayFreeTrial]);
+
+    const shouldShowModal = useMemo(() => {
+        if (!isUserOnFreeTrial(firstDayFreeTrial, lastDayFreeTrial)) {
+            return false;
+        }
+        if (doesUserHavePaymentCardAdded(billingFundID)) {
+            return false;
+        }
+        if (delayState !== DELAY_STATE.NO_DELAY) {
+            return false;
+        }
+        if (isLoadingOnyxValue(dismissedVariationResult)) {
+            return false;
+        }
+        if (!currentVariation) {
+            return false;
+        }
+        if (dismissedVariation === currentVariation.id) {
+            return false;
+        }
+        return true;
+    }, [firstDayFreeTrial, lastDayFreeTrial, billingFundID, delayState, currentVariation, dismissedVariation, dismissedVariationResult]);
+
+    const dismiss = useCallback(() => {
+        if (!currentVariation) {
+            return;
+        }
+        setNameValuePair(ONYXKEYS.NVP_TRIAL_PAYMENT_REMINDER_DISMISSED, currentVariation.id, dismissedVariation ?? '');
+    }, [currentVariation, dismissedVariation]);
+
+    return {shouldShowModal, currentVariation, countdownTime, dismiss};
+}
+
+export default useTrialPaymentReminder;
+export type {TrialReminderVariant, CountdownTime};