[MEDIUM][VIP-Travel] Use static .svg for Travel terms & conditions page, not a .lottie file

src/components/FeatureList.tsx

@@ -35,8 +35,8 @@ type FeatureListProps = {
     /** A list of menuItems representing the feature list. */
     menuItems: FeatureListItem[];
 
-    /** The illustration to display in the header. Can be a JSON object representing a Lottie animation. */
-    illustration: DotLottieAnimation;
+    /** The illustration to display in the header. Can be an image or a JSON object representing a Lottie animation. */
+    illustration: DotLottieAnimation | IconAsset;
 
     /** The style passed to the illustration */
     illustrationStyle?: StyleProp<ViewStyle>;

src/components/Icon/Illustrations.ts

@@ -6,6 +6,7 @@ import ConciergeBlue from '@assets/images/product-illustrations/concierge--blue.
 import ConciergeExclamation from '@assets/images/product-illustrations/concierge--exclamation.svg';
 import CreditCardsBlue from '@assets/images/product-illustrations/credit-cards--blue.svg';
 import EmptyStateExpenses from '@assets/images/product-illustrations/emptystate__expenses.svg';
+import EmptyStateTravel from '@assets/images/product-illustrations/emptystate__travel.svg';
 import GpsTrackOrange from '@assets/images/product-illustrations/gps-track--orange.svg';
 import Hands from '@assets/images/product-illustrations/home-illustration-hands.svg';
 import InvoiceOrange from '@assets/images/product-illustrations/invoice--orange.svg';
@@ -176,4 +177,5 @@ export {
     Tag,
     CarIce,
     Lightbulb,
+    EmptyStateTravel,
 };

src/components/Section/index.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
 import type {ReactNode} from 'react';
+import React from 'react';
 import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import type {ValueOf} from 'type-fest';
+import ImageSVG from '@components/ImageSVG';
 import Lottie from '@components/Lottie';
 import type DotLottieAnimation from '@components/LottieAnimations/types';
 import type {MenuItemWithLink} from '@components/MenuItemList';
@@ -59,8 +60,8 @@ type SectionProps = ChildrenProps & {
     /** Whether the section is in the central pane of the layout */
     isCentralPane?: boolean;
 
-    /** The illustration to display in the header. Can be a JSON object representing a Lottie animation. */
-    illustration?: DotLottieAnimation;
+    /** The illustration to display in the header. Can be an image or a JSON object representing a Lottie animation. */
+    illustration?: DotLottieAnimation | IconAsset;
 
     /** The background color to apply in the upper half of the screen. */
     illustrationBackgroundColor?: string;
@@ -78,6 +79,14 @@ type SectionProps = ChildrenProps & {
     renderSubtitle?: () => ReactNode;
 };
 
+function isIllustrationLottieAnimation(illustration: DotLottieAnimation | IconAsset | undefined): illustration is DotLottieAnimation {
+    if (typeof illustration === 'number' || !illustration) {
+        return false;
+    }
+
+    return 'file' in illustration && 'w' in illustration && 'h' in illustration;
+}
+
 function Section({
     children,
     childrenStyles,
@@ -104,7 +113,11 @@ function Section({
     const StyleUtils = useStyleUtils();
     const {isSmallScreenWidth} = useWindowDimensions();
 
-    const illustrationContainerStyle: StyleProp<ViewStyle> = StyleUtils.getBackgroundColorStyle(illustrationBackgroundColor ?? illustration?.backgroundColor ?? theme.appBG);
+    const isLottie = isIllustrationLottieAnimation(illustration);
+
+    const lottieIllustration = isLottie ? illustration : undefined;
+
+    const illustrationContainerStyle: StyleProp<ViewStyle> = StyleUtils.getBackgroundColorStyle(illustrationBackgroundColor ?? lottieIllustration?.backgroundColor ?? theme.appBG);
 
     return (
         <View style={[styles.pageWrapper, styles.cardSectionContainer, containerStyles, (isCentralPane || !!illustration) && styles.p0]}>
@@ -117,13 +130,20 @@ function Section({
             {!!illustration && (
                 <View style={[styles.w100, styles.dFlex, styles.alignItemsCenter, styles.justifyContentCenter, illustrationContainerStyle]}>
                     <View style={[styles.cardSectionIllustration, illustrationStyle]}>
-                        <Lottie
-                            source={illustration}
-                            style={styles.h100}
-                            webStyle={styles.h100}
-                            autoPlay
-                            loop
-                        />
+                        {isLottie ? (
+                            <Lottie
+                                source={illustration}
+                                style={styles.h100}
+                                webStyle={styles.h100}
+                                autoPlay
+                                loop
+                            />
+                        ) : (
+                            <ImageSVG
+                                src={illustration}
+                                contentFit="contain"
+                            />
+                        )}
                     </View>
                     {overlayContent?.()}
                 </View>

src/pages/Travel/ManageTrips.tsx

@@ -3,15 +3,13 @@ import {View} from 'react-native';
 import type {FeatureListItem} from '@components/FeatureList';
 import FeatureList from '@components/FeatureList';
 import * as Illustrations from '@components/Icon/Illustrations';
-import LottieAnimations from '@components/LottieAnimations';
 import ScrollView from '@components/ScrollView';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Navigation from '@libs/Navigation/Navigation';
 import colors from '@styles/theme/colors';
 import ROUTES from '@src/ROUTES';
-import getTripIllustrationStyle from './getTripIllustrationStyle';
 
 const tripsFeatures: FeatureListItem[] = [
     {
@@ -28,7 +26,6 @@ function ManageTrips() {
     const styles = useThemeStyles();
     const {isSmallScreenWidth} = useWindowDimensions();
     const {translate} = useLocalize();
-    const illustrationStyle = getTripIllustrationStyle();
 
     return (
         <ScrollView contentContainerStyle={styles.pt3}>
@@ -42,8 +39,8 @@ function ManageTrips() {
                     onCtaPress={() => {
                         Navigation.navigate(ROUTES.TRAVEL_TCS);
                     }}
-                    illustration={LottieAnimations.Plane}
-                    illustrationStyle={illustrationStyle}
+                    illustration={Illustrations.EmptyStateTravel}
+                    illustrationStyle={[styles.mv4, styles.tripIllustrationSize]}
                     illustrationBackgroundColor={colors.blue600}
                     titleStyles={styles.textHeadlineH1}
                     contentPaddingOnLargeScreens={styles.p5}

src/styles/index.ts

@@ -4911,6 +4911,11 @@ const styles = (theme: ThemeColors) =>
         textLineThrough: {
             textDecorationLine: 'line-through',
         },
+
+        tripIllustrationSize: {
+            width: 190,
+            height: 172,
+        },
     } satisfies Styles);
 
 type ThemeStyles = ReturnType<typeof styles>;