Skip to content

Commit

Permalink
Merge pull request #48040 from Krishna2323/krishna2323/issue/48013
Browse files Browse the repository at this point in the history 
fix: Update Wallet and Generic Folder empty state to use lottie animations.
  • Loading branch information
@roryabraham
roryabraham authored Sep 20, 2024
2 parents 0d0fb4e + 115b2fc commit 513e6b3
Show file tree
Hide file tree
Showing 15 changed files with 84 additions and 42 deletions.
Binary file added assets/animations/BankVault.lottie
View file
Binary file not shown.
Binary file added assets/animations/GenericEmptyState.lottie
View file
Binary file not shown.
Binary file added assets/animations/TripsEmptyState.lottie
View file
Binary file not shown.
8 changes: 6 additions & 2 deletions src/components/EmptyStateComponent/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Lottie from '@components/Lottie';
import ScrollView from '@components/ScrollView';
import Text from '@components/Text';
import VideoPlayer from '@components/VideoPlayer';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import useThemeStyles from '@hooks/useThemeStyles';
import CONST from '@src/CONST';
import type {EmptyStateComponentProps, VideoLoadedEventType} from './types';
Expand All @@ -24,10 +25,12 @@ function EmptyStateComponent({
subtitle,
headerStyles,
headerContentStyles,
lottieWebViewStyles,
minModalHeight = 400,
}: EmptyStateComponentProps) {
const styles = useThemeStyles();
const [videoAspectRatio, setVideoAspectRatio] = useState(VIDEO_ASPECT_RATIO);
const {isSmallScreenWidth} = useResponsiveLayout();

const setAspectRatio = (event: VideoReadyForDisplayEvent | VideoLoadedEventType | undefined) => {
if (!event) {
Expand Down Expand Up @@ -63,6 +66,7 @@ function EmptyStateComponent({
autoPlay
loop
style={headerContentStyles}
webStyle={lottieWebViewStyles}
/>
);
case CONST.EMPTY_STATE_MEDIA.ILLUSTRATION:
Expand All @@ -75,7 +79,7 @@ function EmptyStateComponent({
default:
return null;
}
}, [headerMedia, headerMediaType, headerContentStyles, videoAspectRatio, styles.emptyStateVideo]);
}, [headerMedia, headerMediaType, headerContentStyles, videoAspectRatio, styles.emptyStateVideo, lottieWebViewStyles]);

return (
<ScrollView contentContainerStyle={[styles.emptyStateScrollView, {minHeight: minModalHeight}, containerStyles]}>
Expand All @@ -88,7 +92,7 @@ function EmptyStateComponent({
<View style={styles.emptyStateForeground}>
<View style={styles.emptyStateContent}>
<View style={[styles.emptyStateHeader(headerMediaType === CONST.EMPTY_STATE_MEDIA.ILLUSTRATION), headerStyles]}>{HeaderComponent}</View>
<View style={styles.p8}>
<View style={isSmallScreenWidth ? styles.p5 : styles.p8}>
<Text style={[styles.textAlignCenter, styles.textHeadlineH1, styles.mb2]}>{title}</Text>
<Text style={[styles.textAlignCenter, styles.textSupporting, styles.textNormal]}>{subtitle}</Text>
{!!buttonText && !!buttonAction && (
Expand Down
1 change: 1 addition & 0 deletions src/components/EmptyStateComponent/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ type SharedProps<T> = {
headerStyles?: StyleProp<ViewStyle>;
headerMediaType: T;
headerContentStyles?: StyleProp<ViewStyle & ImageStyle>;
lottieWebViewStyles?: React.CSSProperties | undefined;
minModalHeight?: number;
};

Expand Down
15 changes: 15 additions & 0 deletions src/components/LottieAnimations/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,21 @@ const DotLottieAnimations = {
w: 180,
h: 200,
},
GenericEmptyState: {
file: require<LottieViewProps['source']>('@assets/animations/GenericEmptyState.lottie'),
w: 375,
h: 240,
},
TripsEmptyState: {
file: require<LottieViewProps['source']>('@assets/animations/TripsEmptyState.lottie'),
w: 375,
h: 240,
},
BankVault: {
file: require<LottieViewProps['source']>('@assets/animations/BankVault.lottie'),
w: 375,
h: 240,
},
} satisfies Record<string, DotLottieAnimation>;

export default DotLottieAnimations;
25 changes: 13 additions & 12 deletions src/pages/Search/EmptySearchView.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React, {useMemo} from 'react';
import EmptyStateComponent from '@components/EmptyStateComponent';
import * as Illustrations from '@components/Icon/Illustrations';
import LottieAnimations from '@components/LottieAnimations';
import SearchRowSkeleton from '@components/Skeletons/SearchRowSkeleton';
import useLocalize from '@hooks/useLocalize';
import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import Navigation from '@libs/Navigation/Navigation';
import variables from '@styles/variables';
import CONST from '@src/CONST';
import ROUTES from '@src/ROUTES';
import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
Expand All @@ -19,14 +19,14 @@ function EmptySearchView({type}: EmptySearchViewProps) {
const theme = useTheme();
const StyleUtils = useStyleUtils();
const {translate} = useLocalize();
const styles = useThemeStyles();

const content = useMemo(() => {
switch (type) {
case CONST.SEARCH.DATA_TYPES.TRIP:
return {
headerMedia: Illustrations.EmptyStateTravel,
headerStyles: StyleUtils.getBackgroundColorStyle(theme.travelBG),
headerContentStyles: StyleUtils.getWidthAndHeightStyle(variables.w191, variables.h172),
headerMedia: LottieAnimations.TripsEmptyState,
headerStyles: [StyleUtils.getBackgroundColorStyle(theme.travelBG), styles.w100],
title: translate('search.searchResults.emptyTripResults.title'),
subtitle: translate('search.searchResults.emptyTripResults.subtitle'),
buttonText: translate('search.searchResults.emptyTripResults.buttonText'),
Expand All @@ -37,28 +37,29 @@ function EmptySearchView({type}: EmptySearchViewProps) {
case CONST.SEARCH.DATA_TYPES.INVOICE:
default:
return {
headerMedia: Illustrations.EmptyState,
headerStyles: StyleUtils.getBackgroundColorStyle(theme.emptyFolderBG),
headerContentStyles: StyleUtils.getWidthAndHeightStyle(variables.w184, variables.h112),
headerMedia: LottieAnimations.GenericEmptyState,
headerStyles: [StyleUtils.getBackgroundColorStyle(theme.emptyFolderBG)],
title: translate('search.searchResults.emptyResults.title'),
subtitle: translate('search.searchResults.emptyResults.subtitle'),
buttonText: undefined,
buttonAction: undefined,
headerContentStyles: styles.emptyStateFolderWebStyles,
};
}
}, [type, StyleUtils, translate, theme]);
}, [type, StyleUtils, translate, theme, styles.w100, styles.emptyStateFolderWebStyles]);

return (
<EmptyStateComponent
SkeletonComponent={SearchRowSkeleton}
headerMediaType={CONST.EMPTY_STATE_MEDIA.ILLUSTRATION}
headerMediaType={CONST.EMPTY_STATE_MEDIA.ANIMATION}
headerMedia={content.headerMedia}
headerStyles={content.headerStyles}
headerContentStyles={content.headerContentStyles}
headerStyles={[content.headerStyles, styles.emptyStateCardIllustrationContainer]}
title={content.title}
subtitle={content.subtitle}
buttonText={content.buttonText}
buttonAction={content.buttonAction}
headerContentStyles={[styles.h100, styles.w100, content.headerContentStyles]}
lottieWebViewStyles={styles.emptyStateFolderWebStyles}
/>
);
}
Expand Down
5 changes: 3 additions & 2 deletions src/pages/Travel/ManageTrips.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import type {FeatureListItem} from '@components/FeatureList';
import FeatureList from '@components/FeatureList';
import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
import * as Illustrations from '@components/Icon/Illustrations';
import LottieAnimations from '@components/LottieAnimations';
import ScrollView from '@components/ScrollView';
import useLocalize from '@hooks/useLocalize';
import usePolicy from '@hooks/usePolicy';
Expand Down Expand Up @@ -82,8 +83,8 @@ function ManageTrips() {
});
}}
ctaErrorMessage={ctaErrorMessage}
illustration={Illustrations.EmptyStateTravel}
illustrationStyle={[styles.mv4, styles.tripIllustrationSize]}
illustration={LottieAnimations.TripsEmptyState}
illustrationStyle={[styles.mv4]}
secondaryButtonText={translate('travel.bookDemo')}
secondaryButtonAccessibilityLabel={translate('travel.bookDemo')}
onSecondaryButtonPress={navigateToBookTravelDemo}
Expand Down
3 changes: 2 additions & 1 deletion src/pages/settings/Wallet/WalletPage/WalletPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
import * as Illustrations from '@components/Icon/Illustrations';
import KYCWall from '@components/KYCWall';
import type {PaymentMethodType, Source} from '@components/KYCWall/types';
import LottieAnimations from '@components/LottieAnimations';
import MenuItem from '@components/MenuItem';
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
import OfflineWithFeedback from '@components/OfflineWithFeedback';
Expand Down Expand Up @@ -381,7 +382,7 @@ function WalletPage({shouldListenForResize = false}: WalletPageProps) {
title={translate('walletPage.bankAccounts')}
isCentralPane
titleStyles={styles.accountSettingsSectionTitle}
illustration={Illustrations.BigVault}
illustration={LottieAnimations.BankVault}
illustrationStyle={styles.walletIllustration}
illustrationContainerStyle={{height: 220}}
illustrationBackgroundColor="#411103"
Expand Down
10 changes: 6 additions & 4 deletions src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import EmptyStateComponent from '@components/EmptyStateComponent';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import * as Expensicons from '@components/Icon/Expensicons';
import * as Illustrations from '@components/Icon/Illustrations';
import LottieAnimations from '@components/LottieAnimations';
import ScreenWrapper from '@components/ScreenWrapper';
import ListItemRightCaretWithLabel from '@components/SelectionList/ListItemRightCaretWithLabel';
import TableListItem from '@components/SelectionList/TableListItem';
Expand Down Expand Up @@ -391,12 +392,13 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) {
{!hasVisibleCategories && !isLoading && (
<EmptyStateComponent
SkeletonComponent={TableListItemSkeleton}
headerMediaType={CONST.EMPTY_STATE_MEDIA.ILLUSTRATION}
headerMedia={Illustrations.EmptyState}
headerStyles={styles.emptyFolderBG}
headerContentStyles={styles.emptyStateFolderIconSize}
headerMediaType={CONST.EMPTY_STATE_MEDIA.ANIMATION}
headerMedia={LottieAnimations.GenericEmptyState}
title={translate('workspace.categories.emptyCategories.title')}
subtitle={translate('workspace.categories.emptyCategories.subtitle')}
headerStyles={[styles.emptyStateCardIllustrationContainer, styles.emptyFolderBG]}
lottieWebViewStyles={styles.emptyStateFolderWebStyles}
headerContentStyles={styles.emptyStateFolderWebStyles}
/>
)}
{hasVisibleCategories && !isLoading && (
Expand Down
6 changes: 3 additions & 3 deletions src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -315,9 +315,9 @@ function ReportFieldsListValuesPage({
subtitle={translate('workspace.reportFields.emptyReportFieldsValues.subtitle')}
SkeletonComponent={TableListItemSkeleton}
headerMediaType={CONST.EMPTY_STATE_MEDIA.ILLUSTRATION}
headerMedia={Illustrations.EmptyStateExpenses}
headerStyles={styles.emptyFolderBG}
headerContentStyles={styles.emptyStateFolderIconSize}
headerMedia={Illustrations.FolderWithPapers}
headerStyles={styles.emptyFolderDarkBG}
headerContentStyles={styles.emptyStateFolderWithPaperIconSize}
/>
)}
{!shouldShowEmptyState && (
Expand Down
10 changes: 6 additions & 4 deletions src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import EmptyStateComponent from '@components/EmptyStateComponent';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import * as Expensicons from '@components/Icon/Expensicons';
import * as Illustrations from '@components/Icon/Illustrations';
import LottieAnimations from '@components/LottieAnimations';
import ScreenWrapper from '@components/ScreenWrapper';
import ListItemRightCaretWithLabel from '@components/SelectionList/ListItemRightCaretWithLabel';
import TableListItem from '@components/SelectionList/TableListItem';
Expand Down Expand Up @@ -289,10 +290,11 @@ function WorkspaceReportFieldsPage({
title={translate('workspace.reportFields.emptyReportFields.title')}
subtitle={translate('workspace.reportFields.emptyReportFields.subtitle')}
SkeletonComponent={TableListItemSkeleton}
headerMediaType={CONST.EMPTY_STATE_MEDIA.ILLUSTRATION}
headerMedia={Illustrations.EmptyStateExpenses}
headerStyles={styles.emptyFolderBG}
headerContentStyles={styles.emptyStateFolderIconSize}
headerMediaType={CONST.EMPTY_STATE_MEDIA.ANIMATION}
headerMedia={LottieAnimations.GenericEmptyState}
headerStyles={[styles.emptyStateCardIllustrationContainer, styles.emptyFolderBG]}
lottieWebViewStyles={styles.emptyStateFolderWebStyles}
headerContentStyles={styles.emptyStateFolderWebStyles}
/>
)}
{!shouldShowEmptyState && !isLoading && (
Expand Down
10 changes: 6 additions & 4 deletions src/pages/workspace/tags/WorkspaceTagsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import EmptyStateComponent from '@components/EmptyStateComponent';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import * as Expensicons from '@components/Icon/Expensicons';
import * as Illustrations from '@components/Icon/Illustrations';
import LottieAnimations from '@components/LottieAnimations';
import type {PopoverMenuItem} from '@components/PopoverMenu';
import ScreenWrapper from '@components/ScreenWrapper';
import ListItemRightCaretWithLabel from '@components/SelectionList/ListItemRightCaretWithLabel';
Expand Down Expand Up @@ -397,12 +398,13 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) {
{!hasVisibleTags && !isLoading && (
<EmptyStateComponent
SkeletonComponent={TableListItemSkeleton}
headerMediaType={CONST.EMPTY_STATE_MEDIA.ILLUSTRATION}
headerMedia={Illustrations.EmptyState}
headerStyles={styles.emptyFolderBG}
headerContentStyles={styles.emptyStateFolderIconSize}
headerMediaType={CONST.EMPTY_STATE_MEDIA.ANIMATION}
headerMedia={LottieAnimations.GenericEmptyState}
title={translate('workspace.tags.emptyTags.title')}
subtitle={translate('workspace.tags.emptyTags.subtitle')}
headerStyles={[styles.emptyStateCardIllustrationContainer, styles.emptyFolderBG]}
lottieWebViewStyles={styles.emptyStateFolderWebStyles}
headerContentStyles={styles.emptyStateFolderWebStyles}
/>
)}
{hasVisibleTags && !isLoading && (
Expand Down
29 changes: 19 additions & 10 deletions src/styles/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4727,8 +4727,7 @@ const styles = (theme: ThemeColors) =>
},

walletIllustration: {
width: 262,
height: 152,
height: 180,
},

walletCardLimit: {
Expand Down Expand Up @@ -5076,6 +5075,8 @@ const styles = (theme: ThemeColors) =>

emptyStateCardIllustrationContainer: {
height: 220,
...flex.alignItemsCenter,
...flex.justifyContentCenter,
},

emptyStateCardIllustration: {
Expand Down Expand Up @@ -5113,11 +5114,6 @@ const styles = (theme: ThemeColors) =>
textDecorationLine: 'line-through',
},

tripIllustrationSize: {
width: 190,
height: 172,
},

reportListItemTitle: {
color: theme.text,
fontSize: variables.fontSizeNormal,
Expand Down Expand Up @@ -5163,14 +5159,27 @@ const styles = (theme: ThemeColors) =>
backgroundColor: theme.emptyFolderBG,
},

emptyFolderDarkBG: {
backgroundColor: '#782c04',
height: 220,
},

emptyStateVideo: {
borderTopLeftRadius: variables.componentBorderRadiusLarge,
borderTopRightRadius: variables.componentBorderRadiusLarge,
},

emptyStateFolderIconSize: {
width: 184,
height: 112,
emptyStateFolderWithPaperIconSize: {
width: 160,
height: 100,
},

emptyStateFolderWebStyles: {
...sizing.w100,
minWidth: 400,
...flex.alignItemsCenter,
...flex.justifyContentCenter,
...display.dFlex,
},

workflowApprovalVerticalLine: {
Expand Down
4 changes: 4 additions & 0 deletions src/styles/utils/spacing.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,10 @@ export default {
marginVertical: 24,
},

mvAuto: {
marginVertical: 'auto',
},

mhv5: {
marginVertical: -20,
},
Expand Down

0 comments on commit 513e6b3

Please sign in to comment.