Composition over configuration for FeatureTrainingContent

src/components/AIFeaturesPromoModal.tsx

@@ -12,11 +12,9 @@ import CONST from '@src/CONST';
 import React from 'react';
 import {View} from 'react-native';
 
-import type {FeatureTrainingContentDataProps} from './FeatureTrainingContent';
-
 import Badge from './Badge';
 import CenteredModalLayout from './CenteredModalLayout';
-import {FeatureTrainingCarousel} from './FeatureTrainingContent';
+import FeatureTraining from './FeatureTraining';
 import LottieAnimations from './LottieAnimations';
 import Text from './Text';
 
@@ -38,34 +36,6 @@ function AIFeaturesPromoModal() {
         </View>
     );
 
-    const pages: FeatureTrainingContentDataProps[] = [
-        {
-            animation: LottieAnimations.SpendAnalysis,
-            title: translate('aiFeaturesPromoModal.spendAnalysis.title'),
-            subtitle: translate('aiFeaturesPromoModal.subtitle'),
-            description: translate('aiFeaturesPromoModal.spendAnalysis.description'),
-            confirmText: translate('common.next'),
-        },
-        {
-            animation: LottieAnimations.ExpenseAssistant,
-            title: translate('aiFeaturesPromoModal.expenseAssistant.title'),
-            subtitle: translate('aiFeaturesPromoModal.subtitle'),
-            description: translate('aiFeaturesPromoModal.expenseAssistant.description'),
-            confirmText: canUseCustomAgent ? translate('common.next') : translate('aiFeaturesPromoModal.confirmText'),
-        },
-        ...(canUseCustomAgent
-            ? [
-                  {
-                      animation: LottieAnimations.CustomAgents,
-                      title: customAgentPromoTitle,
-                      subtitle: translate('aiFeaturesPromoModal.subtitle'),
-                      description: translate('aiFeaturesPromoModal.customAgents.description'),
-                      confirmText: translate('aiFeaturesPromoModal.confirmText'),
-                  },
-              ]
-            : []),
-    ];
-
     const dismissNVP = (isDismissedUsingCloseButton: boolean) => {
         dismissProductTraining(CONST.AI_FEATURES_PROMO_MODAL, isDismissedUsingCloseButton);
     };
@@ -80,26 +50,72 @@ function AIFeaturesPromoModal() {
         dismissNVP(true);
     };
 
+    const illustrationAspectRatio = LottieAnimations.SpendAnalysis.w / LottieAnimations.SpendAnalysis.h;
+    const subtitle = translate('aiFeaturesPromoModal.subtitle');
+
     return (
         <CenteredModalLayout
             onBackdropPress={closeModal}
             width={variables.aiFeaturesPromoModalWidth}
             contentStyle={styles.pt0}
         >
-            <FeatureTrainingCarousel
-                pages={pages}
+            <FeatureTraining.Carousel
                 onConfirm={confirmAndCloseModal}
                 onClose={closeModal}
                 width={variables.aiFeaturesPromoModalWidth}
-                shouldRenderHTMLDescription
-                shouldUseScrollView
-                illustrationOuterContainerStyle={styles.p0}
-                illustrationAspectRatio={LottieAnimations.SpendAnalysis.w / LottieAnimations.SpendAnalysis.h}
-                contentInnerContainerStyles={styles.mb4}
-                titleStyles={styles.mb2}
                 confirmSentryLabel={CONST.SENTRY_LABEL.AI_FEATURES_PROMO_MODAL.CONFIRM_BUTTON}
-                helpSentryLabel={CONST.SENTRY_LABEL.AI_FEATURES_PROMO_MODAL.HELP_BUTTON}
-            />
+            >
+                <FeatureTraining.Page>
+                    <FeatureTraining.Illustration
+                        animation={LottieAnimations.SpendAnalysis}
+                        outerContainerStyle={styles.p0}
+                        aspectRatio={illustrationAspectRatio}
+                    />
+                    <FeatureTraining.Body innerStyle={[styles.mb4]}>
+                        <FeatureTraining.Subtitle>{subtitle}</FeatureTraining.Subtitle>
+                        <FeatureTraining.Title style={styles.mb2}>{translate('aiFeaturesPromoModal.spendAnalysis.title')}</FeatureTraining.Title>
+                        <FeatureTraining.Description shouldRenderHTML>{translate('aiFeaturesPromoModal.spendAnalysis.description')}</FeatureTraining.Description>
+                        <FeatureTraining.ButtonRow>
+                            <FeatureTraining.BackButton />
+                            <FeatureTraining.ConfirmButton>{translate('common.next')}</FeatureTraining.ConfirmButton>
+                        </FeatureTraining.ButtonRow>
+                    </FeatureTraining.Body>
+                </FeatureTraining.Page>
+                <FeatureTraining.Page>
+                    <FeatureTraining.Illustration
+                        animation={LottieAnimations.ExpenseAssistant}
+                        outerContainerStyle={styles.p0}
+                        aspectRatio={illustrationAspectRatio}
+                    />
+                    <FeatureTraining.Body innerStyle={[styles.mb4]}>
+                        <FeatureTraining.Subtitle>{subtitle}</FeatureTraining.Subtitle>
+                        <FeatureTraining.Title style={styles.mb2}>{translate('aiFeaturesPromoModal.expenseAssistant.title')}</FeatureTraining.Title>
+                        <FeatureTraining.Description shouldRenderHTML>{translate('aiFeaturesPromoModal.expenseAssistant.description')}</FeatureTraining.Description>
+                        <FeatureTraining.ButtonRow>
+                            <FeatureTraining.BackButton />
+                            <FeatureTraining.ConfirmButton>{canUseCustomAgent ? translate('common.next') : translate('aiFeaturesPromoModal.confirmText')}</FeatureTraining.ConfirmButton>
+                        </FeatureTraining.ButtonRow>
+                    </FeatureTraining.Body>
+                </FeatureTraining.Page>
+                {canUseCustomAgent && (
+                    <FeatureTraining.Page>
+                        <FeatureTraining.Illustration
+                            animation={LottieAnimations.CustomAgents}
+                            outerContainerStyle={styles.p0}
+                            aspectRatio={illustrationAspectRatio}
+                        />
+                        <FeatureTraining.Body innerStyle={[styles.mb4]}>
+                            <FeatureTraining.Subtitle>{subtitle}</FeatureTraining.Subtitle>
+                            <FeatureTraining.Title>{customAgentPromoTitle}</FeatureTraining.Title>
+                            <FeatureTraining.Description shouldRenderHTML>{translate('aiFeaturesPromoModal.customAgents.description')}</FeatureTraining.Description>
+                            <FeatureTraining.ButtonRow>
+                                <FeatureTraining.BackButton />
+                                <FeatureTraining.ConfirmButton>{translate('aiFeaturesPromoModal.confirmText')}</FeatureTraining.ConfirmButton>
+                            </FeatureTraining.ButtonRow>
+                        </FeatureTraining.Body>
+                    </FeatureTraining.Page>
+                )}
+            </FeatureTraining.Carousel>
         </CenteredModalLayout>
     );
 }

src/components/AutoSubmitModal.tsx

@@ -21,7 +21,7 @@ import React, {useMemo, useRef} from 'react';
 import {View} from 'react-native';
 
 import CenteredModalLayout from './CenteredModalLayout';
-import FeatureTrainingContent from './FeatureTrainingContent';
+import FeatureTraining from './FeatureTraining';
 import Icon from './Icon';
 import Text from './Text';
 
@@ -57,7 +57,6 @@ function AutoSubmitModal() {
         const shouldDismiss = !willShowAgainRef.current;
         willShowAgainRef.current = null;
 
-        // Defer the Onyx write until after the close transition finishes. This prevents potential checkbox flicker.
         TransitionTracker.runAfterTransitions({
             callback: () => dismissASAPSubmitExplanation(shouldDismiss),
             waitForUpcomingTransition: true,
@@ -72,49 +71,55 @@ function AutoSubmitModal() {
         willShowAgainRef.current = willShowAgain;
     };
 
+    const shouldShowDismissOption = dismissedASAPSubmitExplanation === false;
+
     return (
         <CenteredModalLayout
             onBackdropPress={handleClose}
             width={variables.holdEducationModalWidth}
             contentStyle={[styles.pt0, styles.pb0]}
         >
-            <FeatureTrainingContent
-                title={translate('autoSubmitModal.title')}
-                description={translate('autoSubmitModal.description')}
-                confirmText={translate('common.buttonConfirm')}
-                image={illustrations.ReceiptsStackedOnPin}
-                contentFitImage="cover"
-                width={variables.holdEducationModalWidth}
-                imageWidth={variables.changePolicyEducationModalIconWidth}
-                imageHeight={variables.changePolicyEducationModalIconHeight}
-                illustrationAspectRatio={CONST.ILLUSTRATION_ASPECT_RATIO}
-                illustrationInnerContainerStyle={[styles.alignItemsCenter, styles.justifyContentCenter, StyleUtils.getBackgroundColorStyle(colors.green700), styles.p8]}
-                illustrationOuterContainerStyle={styles.p0}
-                shouldShowDismissModalOption={dismissedASAPSubmitExplanation === false}
+            <FeatureTraining
                 onConfirm={onConfirm}
                 onClose={handleClose}
-                titleStyles={[styles.mb1]}
-                contentInnerContainerStyles={[styles.mb5]}
+                width={variables.holdEducationModalWidth}
                 shouldUseScrollView
             >
-                {menuSections.map((section) => (
-                    <View
-                        key={section.titleTranslationKey}
-                        style={[styles.flexRow, styles.alignItemsCenter, styles.mt3]}
-                    >
-                        <Icon
-                            width={variables.menuIconSize}
-                            height={variables.menuIconSize}
-                            src={section.icon}
-                            additionalStyles={[styles.mr4]}
-                        />
-                        <View style={[styles.flex1, styles.justifyContentCenter]}>
-                            <Text style={[styles.textStrong, styles.mb1]}>{translate(section.titleTranslationKey as TranslationPaths)}</Text>
-                            <Text style={[styles.mutedTextLabel, styles.lh16]}>{translate(section.descriptionTranslationKey as TranslationPaths)}</Text>
+                <FeatureTraining.Illustration
+                    image={illustrations.ReceiptsStackedOnPin}
+                    contentFitImage="cover"
+                    imageWidth={variables.changePolicyEducationModalIconWidth}
+                    imageHeight={variables.changePolicyEducationModalIconHeight}
+                    aspectRatio={CONST.ILLUSTRATION_ASPECT_RATIO}
+                    innerContainerStyle={[styles.alignItemsCenter, styles.justifyContentCenter, StyleUtils.getBackgroundColorStyle(colors.green700), styles.p8]}
+                    outerContainerStyle={styles.p0}
+                />
+                <FeatureTraining.Body innerStyle={[styles.mb5]}>
+                    <FeatureTraining.Title style={[styles.mb1]}>{translate('autoSubmitModal.title')}</FeatureTraining.Title>
+                    <FeatureTraining.Description>{translate('autoSubmitModal.description')}</FeatureTraining.Description>
+                    {menuSections.map((section) => (
+                        <View
+                            key={section.titleTranslationKey}
+                            style={[styles.flexRow, styles.alignItemsCenter, styles.mt3]}
+                        >
+                            <Icon
+                                width={variables.menuIconSize}
+                                height={variables.menuIconSize}
+                                src={section.icon}
+                                additionalStyles={[styles.mr4]}
+                            />
+                            <View style={[styles.flex1, styles.justifyContentCenter]}>
+                                <Text style={[styles.textStrong, styles.mb1]}>{translate(section.titleTranslationKey as TranslationPaths)}</Text>
+                                <Text style={[styles.mutedTextLabel, styles.lh16]}>{translate(section.descriptionTranslationKey as TranslationPaths)}</Text>
+                            </View>
                         </View>
-                    </View>
-                ))}
-            </FeatureTrainingContent>
+                    ))}
+                    {shouldShowDismissOption && <FeatureTraining.DismissOption />}
+                    <FeatureTraining.ButtonRow>
+                        <FeatureTraining.ConfirmButton>{translate('common.buttonConfirm')}</FeatureTraining.ConfirmButton>
+                    </FeatureTraining.ButtonRow>
+                </FeatureTraining.Body>
+            </FeatureTraining>
         </CenteredModalLayout>
     );
 }

src/components/CenteredModalLayout/index.tsx

@@ -35,7 +35,7 @@ type CenteredModalLayoutProps = {
 
     /**
      * Whether the content wrapper should apply the bottom safe-area inset. Disable it when the children
-     * already handle the inset themselves (e.g. FeatureTrainingContent with `shouldUseScrollView`, whose
+     * already handle the inset themselves (e.g. FeatureTraining with `shouldUseScrollView`, whose
      * ScrollView content padding includes it), otherwise the inset is applied twice and renders as an
      * empty band under the content on devices with a bottom inset.
      */

src/components/FeatureTraining/FeatureTraining.tsx

@@ -0,0 +1,74 @@
+import variables from '@styles/variables';
+
+import React, {useCallback, useMemo, useState} from 'react';
+
+import type {FeatureTrainingActionsValue, FeatureTrainingStateValue} from './context';
+import type {FeatureTrainingProps} from './types';
+
+import {FeatureTrainingActionsContext, FeatureTrainingStateContext} from './context';
+import useScrollableWrapper from './hooks/useScrollableWrapper';
+
+function FeatureTraining({
+    onConfirm,
+    onClose,
+    onWillShowAgainChange,
+    shouldCloseOnConfirm = true,
+    shouldUseScrollView = false,
+    width = variables.featureTrainingModalWidth,
+    confirmSentryLabel,
+    children,
+}: FeatureTrainingProps) {
+    const [willShowAgain, setWillShowAgain] = useState(true);
+    const {Wrapper, wrapperProps} = useScrollableWrapper({shouldUseScrollView, width});
+
+    const toggleWillShowAgain = useCallback(() => {
+        onWillShowAgainChange?.(!willShowAgain);
+        setWillShowAgain((prev) => !prev);
+    }, [onWillShowAgainChange, willShowAgain]);
+
+    const handleConfirm = useCallback(() => {
+        onConfirm?.(willShowAgain);
+        if (shouldCloseOnConfirm) {
+            onClose?.();
+        }
+    }, [onConfirm, onClose, shouldCloseOnConfirm, willShowAgain]);
+
+    const handleClose = useCallback(() => onClose?.(), [onClose]);
+
+    const stateValue = useMemo<FeatureTrainingStateValue>(
+        () => ({
+            willShowAgain,
+            shouldShowLoadingImmediatelyOnPress: undefined,
+            isCarousel: false,
+            confirmSentryLabel,
+            currentPage: undefined,
+            pageCount: undefined,
+            isLastPage: undefined,
+            contentMinHeight: undefined,
+        }),
+        [willShowAgain, confirmSentryLabel],
+    );
+
+    const actionsValue = useMemo<FeatureTrainingActionsValue>(
+        () => ({
+            toggleWillShowAgain,
+            handleConfirm,
+            handleClose,
+            advance: undefined,
+            goBack: undefined,
+        }),
+        [toggleWillShowAgain, handleConfirm, handleClose],
+    );
+
+    return (
+        <FeatureTrainingStateContext.Provider value={stateValue}>
+            <FeatureTrainingActionsContext.Provider value={actionsValue}>
+                <Wrapper {...wrapperProps}>{children}</Wrapper>
+            </FeatureTrainingActionsContext.Provider>
+        </FeatureTrainingStateContext.Provider>
+    );
+}
+
+FeatureTraining.displayName = 'FeatureTraining';
+
+export default FeatureTraining;