Replace Lottie animations of some empty states to static images on Web

src/components/BlockingViews/BlockingView.tsx

@@ -182,4 +182,5 @@ function BlockingView({
 
 BlockingView.displayName = 'BlockingView';
 
+export type {BlockingViewProps};
 export default BlockingView;

src/components/EmptyStateComponent/GenericEmptyStateComponent.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import EmptyStateComponent from '.';
+import type {EmptyStateComponentProps, GenericEmptyStateComponentProps} from './types';
+
+// Only use this component when you need to pass/spread the props in a generic way, as
+// EmptyStateComponent component wouldn't allow it in some cases.
+function GenericEmptyStateComponent(props: GenericEmptyStateComponentProps) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <EmptyStateComponent {...(props as EmptyStateComponentProps)} />;
+}
+
+export default GenericEmptyStateComponent;

src/components/EmptyStateComponent/index.tsx

@@ -1,7 +1,7 @@
 import type {VideoReadyForDisplayEvent} from 'expo-av';
 import isEmpty from 'lodash/isEmpty';
 import React, {useMemo, useState} from 'react';
-import {View} from 'react-native';
+import {StyleSheet, View} from 'react-native';
 import Button from '@components/Button';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
 import ImageSVG from '@components/ImageSVG';
@@ -80,7 +80,7 @@ function EmptyStateComponent({
             case CONST.EMPTY_STATE_MEDIA.ILLUSTRATION:
                 return (
                     <ImageSVG
-                        style={headerContentStyles}
+                        style={StyleSheet.flatten(headerContentStyles)}
                         src={headerMedia}
                     />
                 );

src/components/EmptyStateComponent/types.ts

@@ -10,6 +10,7 @@ import type IconAsset from '@src/types/utils/IconAsset';
 
 type ValidSkeletons = typeof SearchRowSkeleton | typeof TableRowSkeleton;
 type MediaTypes = ValueOf<typeof CONST.EMPTY_STATE_MEDIA>;
+type HeaderMedia = string | IconAsset | DotLottieAnimation;
 type EmptyStateButton = {
     buttonText?: string;
     buttonAction?: () => void;
@@ -24,7 +25,7 @@ type EmptyStateButton = {
     >;
 };
 
-type SharedProps<T> = {
+type SharedProps<TMediaType> = {
     SkeletonComponent?: ValidSkeletons;
     title: string;
     titleStyles?: StyleProp<TextStyle>;
@@ -35,22 +36,23 @@ type SharedProps<T> = {
     cardStyles?: StyleProp<ViewStyle>;
     cardContentStyles?: StyleProp<ViewStyle>;
     headerStyles?: StyleProp<ViewStyle>;
-    headerMediaType: T;
+    headerMediaType: TMediaType;
     headerContentStyles?: StyleProp<ViewStyle & ImageStyle>;
     lottieWebViewStyles?: React.CSSProperties | undefined;
     minModalHeight?: number;
     subtitleText?: React.ReactNode;
 };
 
-type MediaType<HeaderMedia, T extends MediaTypes> = SharedProps<T> & {
-    headerMedia: HeaderMedia;
+type MediaType<THeaderMedia, TMediaType extends MediaTypes> = SharedProps<TMediaType> & {
+    headerMedia: THeaderMedia;
 };
 
 type VideoProps = MediaType<string, 'video'>;
 type IllustrationProps = MediaType<IconAsset, 'illustration'>;
 type AnimationProps = MediaType<DotLottieAnimation, 'animation'>;
 
 type EmptyStateComponentProps = VideoProps | IllustrationProps | AnimationProps;
+type GenericEmptyStateComponentProps = SharedProps<MediaTypes> & {headerMedia: HeaderMedia};
 
 type VideoLoadedEventType = {
     srcElement: {
@@ -59,4 +61,4 @@ type VideoLoadedEventType = {
     };
 };
 
-export type {EmptyStateComponentProps, VideoLoadedEventType, EmptyStateButton};
+export type {EmptyStateComponentProps, VideoLoadedEventType, EmptyStateButton, GenericEmptyStateComponentProps, MediaTypes, HeaderMedia};

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

@@ -49,13 +49,16 @@ import DjBoothReferenceHands from '@assets/images/product-illustrations/dj-booth
 import EmptyStateExpenses from '@assets/images/product-illustrations/emptystate__expenses.svg';
 import HoldExpense from '@assets/images/product-illustrations/emptystate__holdexpense.svg';
 import ReceiptFairy from '@assets/images/product-illustrations/emptystate__receiptfairy.svg';
+import Fireworks from '@assets/images/product-illustrations/fireworks.svg';
+import FolderWithPapersAndWatch from '@assets/images/product-illustrations/folder-with-papers-and-watch.svg';
 import FolderWithPapers from '@assets/images/product-illustrations/folder-with-papers.svg';
 import Hands from '@assets/images/product-illustrations/home-illustration-hands.svg';
 import CardReplacementSuccess from '@assets/images/product-illustrations/illustration__card-replacement-success.svg';
 import MagicCode from '@assets/images/product-illustrations/magic-code.svg';
 import ModalHoldOrReject from '@assets/images/product-illustrations/modal-hold-or-reject.svg';
 import MushroomTopHat from '@assets/images/product-illustrations/mushroom-top-hat.svg';
 import PaymentHands from '@assets/images/product-illustrations/payment-hands.svg';
+import PlanetWithMobileApp from '@assets/images/product-illustrations/planet-with-mobile-app.svg';
 import ReceiptsStackedOnPin from '@assets/images/product-illustrations/receipts-stacked-on-pin.svg';
 import RocketBlue from '@assets/images/product-illustrations/rocket--blue.svg';
 import RocketDude from '@assets/images/product-illustrations/rocket-dude.svg';
@@ -204,13 +207,16 @@ const Illustrations = {
     EmptyStateExpenses,
     HoldExpense,
     ReceiptFairy,
+    Fireworks,
+    FolderWithPapersAndWatch,
     FolderWithPapers,
     Hands,
     CardReplacementSuccess,
     MagicCode,
     ModalHoldOrReject,
     MushroomTopHat,
     PaymentHands,
+    PlanetWithMobileApp,
     ReceiptsStackedOnPin,
     RocketBlue,
     RocketDude,