Merge branch 'main' into Sebryu-DynamicChecklistPOC

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

config/webpack/webpack.common.js

@@ -180,6 +180,10 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
                 resourceQuery: /raw/,
                 type: 'asset/source',
             },
+            {
+                test: /\.lottie$/,
+                type: 'asset/resource',
+            },
         ],
     },
     resolve: {

jest.config.js

@@ -26,4 +26,7 @@ module.exports = {
     setupFiles: ['<rootDir>/jest/setup.js', './node_modules/@react-native-google-signin/google-signin/jest/build/setup.js'],
     setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect', '<rootDir>/jest/setupAfterEnv.js'],
     cacheDirectory: '<rootDir>/.jest-cache',
+    moduleNameMapper: {
+        '\\.(lottie)$': '<rootDir>/__mocks__/fileMock.js',
+    },
 };

metro.config.js

@@ -23,7 +23,7 @@ const e2eSourceExts = ['e2e.js', 'e2e.ts'];
  */
 const config = {
     resolver: {
-        assetExts: _.filter(defaultAssetExts, (ext) => ext !== 'svg'),
+        assetExts: [..._.filter(defaultAssetExts, (ext) => ext !== 'svg'), 'lottie'],
         // When we run the e2e tests we want files that have the extension e2e.js to be resolved as source files
         sourceExts: [...(isE2ETesting ? e2eSourceExts : []), ...defaultSourceExts, 'jsx', 'svg'],
         resolveRequest: (context, moduleName, platform) => {

package.json

@@ -70,7 +70,6 @@
     "@invertase/react-native-apple-authentication": "^2.2.2",
     "@kie/act-js": "^2.0.1",
     "@kie/mock-github": "^1.0.0",
-    "@lottiefiles/react-lottie-player": "^3.5.3",
     "@oguzhnatly/react-native-image-manipulator": "github:Expensify/react-native-image-manipulator#5cdae3d4455b03a04c57f50be3863e2fe6c92c52",
     "@onfido/react-native-sdk": "8.3.0",
     "@react-native-async-storage/async-storage": "^1.17.10",

src/components/ConfirmationPage.js

@@ -5,7 +5,7 @@ import styles from '@styles/styles';
 import Button from './Button';
 import FixedFooter from './FixedFooter';
 import Lottie from './Lottie';
-import * as LottieAnimations from './LottieAnimations';
+import LottieAnimations from './LottieAnimations';
 import Text from './Text';
 
 const propTypes = {

src/components/Lottie/Lottie.tsx

@@ -1,22 +1,39 @@
 import LottieView, {LottieViewProps} from 'lottie-react-native';
-import React, {forwardRef} from 'react';
+import React, {ForwardedRef, forwardRef} from 'react';
 import {View} from 'react-native';
+import DotLottieAnimation from '@components/LottieAnimations/types';
+import useNetwork from '@hooks/useNetwork';
 import styles from '@styles/styles';
 
-const Lottie = forwardRef<LottieView, LottieViewProps>((props: LottieViewProps, ref) => {
-    const aspectRatioStyle = styles.aspectRatioLottie(props.source);
+type Props = {
+    source: DotLottieAnimation;
+} & Omit<LottieViewProps, 'source'>;
+
+function Lottie({source, webStyle, ...props}: Props, ref: ForwardedRef<LottieView>) {
+    const [isError, setIsError] = React.useState(false);
+
+    useNetwork({onReconnect: () => setIsError(false)});
+
+    const aspectRatioStyle = styles.aspectRatioLottie(source);
+
+    // If the image fails to load, we'll just render an empty view
+    if (isError) {
+        return <View style={aspectRatioStyle} />;
+    }
 
     return (
-        <View style={[aspectRatioStyle, styles.w100]}>
-            <LottieView
-                // eslint-disable-next-line
-                {...props}
-                ref={ref}
-                style={[aspectRatioStyle, props.style]}
-                webStyle={{...aspectRatioStyle, ...props.webStyle}}
-            />
-        </View>
+        <LottieView
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            source={source.file}
+            ref={ref}
+            style={[aspectRatioStyle, props.style]}
+            webStyle={{...aspectRatioStyle, ...webStyle}}
+            onAnimationFailure={() => setIsError(true)}
+        />
     );
-});
+}
+
+Lottie.displayName = 'Lottie';
 
-export default Lottie;
+export default forwardRef(Lottie);

src/components/LottieAnimations/index.tsx

@@ -0,0 +1,56 @@
+import DotLottieAnimation from './types';
+
+const DotLottieAnimations: Record<string, DotLottieAnimation> = {
+    ExpensifyLounge: {
+        file: require('@assets/animations/ExpensifyLounge.lottie'),
+        w: 1920,
+        h: 1080,
+    },
+    FastMoney: {
+        file: require('@assets/animations/FastMoney.lottie'),
+        w: 375,
+        h: 240,
+    },
+    Fireworks: {
+        file: require('@assets/animations/Fireworks.lottie'),
+        w: 360,
+        h: 360,
+    },
+    Hands: {
+        file: require('@assets/animations/Hands.lottie'),
+        w: 375,
+        h: 375,
+    },
+    PreferencesDJ: {
+        file: require('@assets/animations/PreferencesDJ.lottie'),
+        w: 375,
+        h: 240,
+    },
+    ReviewingBankInfo: {
+        file: require('@assets/animations/ReviewingBankInfo.lottie'),
+        w: 280,
+        h: 280,
+    },
+    WorkspacePlanet: {
+        file: require('@assets/animations/WorkspacePlanet.lottie'),
+        w: 375,
+        h: 240,
+    },
+    SaveTheWorld: {
+        file: require('@assets/animations/SaveTheWorld.lottie'),
+        w: 375,
+        h: 240,
+    },
+    Safe: {
+        file: require('@assets/animations/Safe.lottie'),
+        w: 625,
+        h: 400,
+    },
+    Magician: {
+        file: require('@assets/animations/Magician.lottie'),
+        w: 853,
+        h: 480,
+    },
+};
+
+export default DotLottieAnimations;

src/components/LottieAnimations/types.ts

@@ -0,0 +1,9 @@
+import {LottieViewProps} from 'lottie-react-native';
+
+type DotLottieAnimation = {
+    file: LottieViewProps['source'];
+    w: number;
+    h: number;
+};
+
+export default DotLottieAnimation;

src/components/RadioButton.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
 import CONST from '@src/CONST';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
@@ -39,13 +40,15 @@ function RadioButton(props) {
             accessibilityLabel={props.accessibilityLabel}
             role={CONST.ACCESSIBILITY_ROLE.RADIO}
         >
-            <View style={[styles.radioButtonContainer, props.isChecked && styles.checkedContainer, props.hasError && styles.borderColorDanger, props.disabled && styles.cursorDisabled]}>
-                <Icon
-                    src={Expensicons.Checkmark}
-                    fill="white"
-                    height={14}
-                    width={14}
-                />
+            <View style={[styles.radioButtonContainer, props.hasError && styles.borderColorDanger, props.disabled && styles.cursorDisabled]}>
+                {props.isChecked && (
+                    <Icon
+                        src={Expensicons.Checkmark}
+                        fill={themeColors.checkBox}
+                        height={14}
+                        width={14}
+                    />
+                )}
             </View>
         </PressableWithFeedback>
     );

src/components/RadioButtonWithLabel.js

@@ -65,8 +65,8 @@ function RadioButtonWithLabel(props) {
                     style={[styles.flexRow, styles.flexWrap, styles.flexShrink1, styles.alignItemsCenter]}
                     wrapperStyle={[styles.ml3, styles.pr2, styles.w100]}
                     // disable hover style when disabled
-                    hoverDimmingValue={1}
-                    pressDimmingValue={0.2}
+                    hoverDimmingValue={0.8}
+                    pressDimmingValue={0.5}
                 >
                     {Boolean(props.label) && <Text style={[styles.ml1]}>{props.label}</Text>}
                     {Boolean(LabelComponent) && <LabelComponent />}

src/components/ReimbursementAccountLoadingIndicator.js

@@ -7,7 +7,7 @@ import FullPageOfflineBlockingView from './BlockingViews/FullPageOfflineBlocking
 import FullScreenLoadingIndicator from './FullscreenLoadingIndicator';
 import HeaderWithBackButton from './HeaderWithBackButton';
 import Lottie from './Lottie';
-import * as LottieAnimations from './LottieAnimations';
+import LottieAnimations from './LottieAnimations';
 import ScreenWrapper from './ScreenWrapper';
 import Text from './Text';
 

src/pages/EnablePayments/ActivateStep.js

@@ -3,7 +3,7 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import ConfirmationPage from '@components/ConfirmationPage';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import * as LottieAnimations from '@components/LottieAnimations';
+import LottieAnimations from '@components/LottieAnimations';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import compose from '@libs/compose';
 import * as PaymentMethods from '@userActions/PaymentMethods';

src/pages/TeachersUnite/SaveTheWorldPage.js

@@ -4,7 +4,7 @@ import React from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
-import * as LottieAnimations from '@components/LottieAnimations';
+import LottieAnimations from '@components/LottieAnimations';
 import MenuItem from '@components/MenuItem';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';

src/pages/settings/Preferences/PreferencesPage.js

@@ -4,7 +4,7 @@ import React from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
-import * as LottieAnimations from '@components/LottieAnimations';
+import LottieAnimations from '@components/LottieAnimations';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import Switch from '@components/Switch';
 import TestToolMenu from '@components/TestToolMenu';

src/pages/settings/Profile/LoungeAccessPage.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
 import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
-import * as LottieAnimations from '@components/LottieAnimations';
+import LottieAnimations from '@components/LottieAnimations';
 import Text from '@components/Text';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';

src/pages/settings/Security/SecuritySettingsPage.js

@@ -5,7 +5,7 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import * as Expensicons from '@components/Icon/Expensicons';
 import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
-import * as LottieAnimations from '@components/LottieAnimations';
+import LottieAnimations from '@components/LottieAnimations';
 import MenuItemList from '@components/MenuItemList';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';

src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ConfirmationPage from '@components/ConfirmationPage';
-import * as LottieAnimations from '@components/LottieAnimations';
+import LottieAnimations from '@components/LottieAnimations';
 import useLocalize from '@hooks/useLocalize';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';

src/pages/settings/Wallet/ActivatePhysicalCardPage.js

@@ -7,7 +7,7 @@ import _ from 'underscore';
 import BigNumberPad from '@components/BigNumberPad';
 import Button from '@components/Button';
 import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
-import * as LottieAnimations from '@components/LottieAnimations';
+import LottieAnimations from '@components/LottieAnimations';
 import MagicCodeInput from '@components/MagicCodeInput';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';

src/pages/settings/Wallet/WalletEmptyState.js

@@ -4,7 +4,7 @@ import Button from '@components/Button';
 import FeatureList from '@components/FeatureList';
 import * as Illustrations from '@components/Icon/Illustrations';
 import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
-import * as LottieAnimations from '@components/LottieAnimations';
+import LottieAnimations from '@components/LottieAnimations';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
 import themeColors from '@styles/themes/default';

src/pages/signin/SignInHeroImage.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Lottie from '@components/Lottie';
-import * as LottieAnimations from '@components/LottieAnimations';
+import LottieAnimations from '@components/LottieAnimations';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import styles from '@styles/styles';
 import variables from '@styles/variables';

src/pages/workspace/WorkspacesListPage.js

@@ -7,7 +7,7 @@ import FeatureList from '@components/FeatureList';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
-import * as LottieAnimations from '@components/LottieAnimations';
+import LottieAnimations from '@components/LottieAnimations';
 import MenuItem from '@components/MenuItem';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import useLocalize from '@hooks/useLocalize';