ConfirmationPage composition migration

src/components/ConfirmationPage/ConfirmationPage.tsx

@@ -0,0 +1,18 @@
+import useThemeStyles from '@hooks/useThemeStyles';
+
+import type {StyleProp, ViewStyle} from 'react-native';
+
+import {View} from 'react-native';
+
+type ConfirmationPageProps = {
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+};
+
+function ConfirmationPage({children, style}: ConfirmationPageProps) {
+    const styles = useThemeStyles();
+
+    return <View style={[styles.flex1, style]}>{children}</View>;
+}
+
+export default ConfirmationPage;

src/components/ConfirmationPage/composed/ConfirmationPageDefault.tsx

@@ -0,0 +1,101 @@
+import ConfirmationPage from '@components/ConfirmationPage/ConfirmationPage';
+import ConfirmationPageContent from '@components/ConfirmationPage/layout/ConfirmationPageContent';
+import ConfirmationPageDescription from '@components/ConfirmationPage/primitives/ConfirmationPageDescription';
+import ConfirmationPageHeading from '@components/ConfirmationPage/primitives/ConfirmationPageHeading';
+import ConfirmationPageIllustration from '@components/ConfirmationPage/primitives/ConfirmationPageIllustration';
+import ConfirmationPagePrimaryButton from '@components/ConfirmationPage/primitives/ConfirmationPagePrimaryButton';
+import FixedFooter from '@components/FixedFooter';
+import LottieAnimations from '@components/LottieAnimations';
+import type DotLottieAnimation from '@components/LottieAnimations/types';
+
+import type {Errors} from '@src/types/onyx/OnyxCommon';
+import type IconAsset from '@src/types/utils/IconAsset';
+
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
+
+type ConfirmationPageProps = {
+    /** Illustration shown at the top: a Lottie animation or a static icon. Defaults to the fireworks animation */
+    illustration?: DotLottieAnimation | IconAsset;
+
+    /** Heading text displayed below the illustration */
+    heading: string;
+
+    /** Description text displayed below the heading */
+    description: string;
+
+    /** The text for the button label */
+    buttonText?: string;
+
+    /** A function that is called when the button is clicked on */
+    onButtonPress?: () => void;
+
+    /** Whether the button should be disabled */
+    isButtonDisabled?: boolean;
+
+    /** Whether the button should show a loading spinner */
+    isButtonLoading?: boolean;
+
+    /** Errors rendered as a message inside the footer, above the button */
+    requestErrors?: Errors | null;
+
+    /** Additional style for the outermost container */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /** Additional style for the centered container wrapping the illustration, heading and description */
+    innerContainerStyle?: StyleProp<ViewStyle>;
+
+    /** Additional style for the illustration */
+    illustrationStyle?: StyleProp<ViewStyle>;
+
+    /** Additional style for the heading text */
+    headingStyle?: StyleProp<TextStyle>;
+
+    /** Additional style for the description text */
+    descriptionStyle?: StyleProp<TextStyle>;
+
+    /** Additional style for the footer containing the button */
+    footerStyle?: StyleProp<ViewStyle>;
+};
+
+function ConfirmationPageDefault({
+    illustration = LottieAnimations.Fireworks,
+    heading,
+    description,
+    buttonText = '',
+    onButtonPress = () => {},
+    isButtonDisabled = false,
+    isButtonLoading = false,
+    headingStyle,
+    illustrationStyle,
+    descriptionStyle,
+    footerStyle,
+    requestErrors,
+    containerStyle,
+    innerContainerStyle,
+}: ConfirmationPageProps) {
+    return (
+        <ConfirmationPage style={containerStyle}>
+            <ConfirmationPageContent
+                style={innerContainerStyle}
+                requestErrors={requestErrors}
+            >
+                <ConfirmationPageIllustration
+                    illustration={illustration}
+                    illustrationStyle={illustrationStyle}
+                />
+                <ConfirmationPageHeading style={headingStyle}>{heading}</ConfirmationPageHeading>
+                <ConfirmationPageDescription style={descriptionStyle}>{description}</ConfirmationPageDescription>
+            </ConfirmationPageContent>
+            <FixedFooter style={footerStyle}>
+                <ConfirmationPagePrimaryButton
+                    text={buttonText}
+                    isDisabled={isButtonDisabled}
+                    isLoading={isButtonLoading}
+                    onPress={onButtonPress}
+                />
+            </FixedFooter>
+        </ConfirmationPage>
+    );
+}
+
+export default ConfirmationPageDefault;

src/components/ConfirmationPage/index.tsx

@@ -0,0 +1,48 @@
+/**
+ * ConfirmationPage: a confirmation/illustration screen built with composition API.
+ *
+ * Instead of a large flat props list (illustration, heading, description, shouldShowButton, …),
+ * sub-components are composed as children:
+ *
+ * @example
+ * ```tsx
+ * import ConfirmationPage from '@components/ConfirmationPage';
+ *
+ * <ConfirmationPage>
+ *   <ConfirmationPage.Content>
+ *     <ConfirmationPage.Illustration illustration={LottieAnimations.Fireworks} />
+ *     <ConfirmationPage.Heading>All set!</ConfirmationPage.Heading>
+ *     <ConfirmationPage.Description>Your changes have been saved.</ConfirmationPage.Description>
+ *   </ConfirmationPage.Content>
+ *   <FixedFooter>
+ *     <ConfirmationPage.PrimaryButton text="Got it" onPress={handleConfirm} />
+ *   </FixedFooter>
+ * </ConfirmationPage>
+ * ```
+ *
+ * For the common illustration/heading/description/button shape without custom composition, use `ConfirmationPageDefault` instead.
+ */
+import React from 'react';
+
+import ConfirmationPageComponent from './ConfirmationPage';
+import ConfirmationPageContent from './layout/ConfirmationPageContent';
+import ConfirmationPageDescription from './primitives/ConfirmationPageDescription';
+import ConfirmationPageHeading from './primitives/ConfirmationPageHeading';
+import ConfirmationPageIllustration from './primitives/ConfirmationPageIllustration';
+import ConfirmationPagePrimaryButton from './primitives/ConfirmationPagePrimaryButton';
+import ConfirmationPageSecondaryButton from './primitives/ConfirmationPageSecondaryButton';
+
+function ConfirmationPageBase(props: React.ComponentProps<typeof ConfirmationPageComponent>) {
+    return <ConfirmationPageComponent {...props} />;
+}
+
+const ConfirmationPage = Object.assign(ConfirmationPageBase, {
+    Illustration: ConfirmationPageIllustration,
+    Heading: ConfirmationPageHeading,
+    Description: ConfirmationPageDescription,
+    PrimaryButton: ConfirmationPagePrimaryButton,
+    SecondaryButton: ConfirmationPageSecondaryButton,
+    Content: ConfirmationPageContent,
+});
+
+export default ConfirmationPage;