feat(Wallet): add empty state and redesign wallet page

# Conflicts:
#	src/components/LottieAnimations.js
#	src/pages/settings/Wallet/WalletPage/BaseWalletPage.js

fix(wallet): item styles not matching designs

fix(wallet): PropTypes console errors

fix(wallet): popover menu positioning issues

fix(wallet): flags used to determine if the empty state should be shown

refactor(wallet): code style

# Conflicts:
#	src/pages/settings/Wallet/PaymentMethodList.js

fix(wallet): accessing wrong onyx key to look for assigned cards

fix(wallet): spanish translations

refactor(wallet): apply code style guidelines

refactor(wallet): differentiate old wallet from new version using URL

# Conflicts:
#	src/ROUTES.ts
#	src/libs/Navigation/AppNavigator/ModalStackNavigators.js
#	src/libs/Navigation/linkingConfig.js

add padding top prop to IlustratedHeaderPageLayout

# Conflicts:
#	src/components/IllustratedHeaderPageLayout.js

remove header top padding

replace hardcoded values with references to SCREENS

# Conflicts:
#	src/SCREENS.ts

add scroll to WalletPage, disable scroll in PaymentMethodList

lint code

# Conflicts:
#	src/pages/settings/Wallet/PaymentMethodList.js

chore: reduce FastMoney animation filesize

chore: add wallet backgriound color to light theme

refactor: wallet route

refactor: remove unused prop

refactor(wallet): remove unnecessary wrapper component

fix(wallet): linter issue

refactor(wallet): remove underscore dependency

chore(wallet): use old wallet instead of new one

# Conflicts:
#	src/libs/Navigation/AppNavigator/ModalStackNavigators.js

chore: apply prettier

# Conflicts:
#	src/SCREENS.ts

chore(wallet): remove card item left padding

fix(section): missing subtitle

refactor(wallet): use constant screen name for wallet domain cards

# Conflicts:
#	src/libs/Navigation/linkingConfig.js

refactor(wallet): use constant screen name for wallet

fix(wallet): screen wrapper adding unnecessary vertical padding

# Conflicts:
#	src/pages/settings/Wallet/WalletPage/WalletPage.js

fix(wallet): wrong display name type

fix(wallet): missing testID for screen wrapper and unnecessary fragment

fix(wallet): unused import

fix(wallet): status bar background color

fix(wallet): revert scrollview removal

fix(wallet): wrong section border radius

fix(wallet): wrong payment item height

fix(wallet): console error with nested Flatlist inside a ScrollView

# Conflicts:
#	src/pages/settings/Wallet/PaymentMethodList.js

fix(wallet): section card item styles

refactor(wallet): replace direct import from colors with themeColors

fix(wallet): popover menu positioning

fix(wallet): transfer balance button styles

refactor(wallet): remove paypal references

fix(wallet): adjust spacings inside wallet section

fix(wallet): bank accounts section spacing

chore(wallet): fix linter issues

refactor: remove unused paypal route

# Conflicts:
#	src/ROUTES.ts

chore(wallet): remove old wallet page

# Conflicts:
#	src/pages/settings/Wallet/WalletPage/BaseWalletPage.js

chore: rebase with main branch

fix(wallet): wrong lineHeight type

Author: pac-guerreiro

assets/animations/FastMoney.json

@@ -17,6 +17,8 @@ export default {
         WORKSPACES: 'Settings_Workspaces',
         SECURITY: 'Settings_Security',
         STATUS: 'Settings_Status',
+        WALLET: 'Settings_Wallet',
+        WALLET_DOMAIN_CARDS: 'Settings_Wallet_DomainCards',
     },
     SAVE_THE_WORLD: {
         ROOT: 'SaveTheWorld_Root',

assets/images/simple-illustrations/simple-illustration__handearth.svg

@@ -45,6 +45,7 @@ import MoneyBadge from '../../../assets/images/simple-illustrations/simple-illus
 import TreasureChest from '../../../assets/images/simple-illustrations/simple-illustration__treasurechest.svg';
 import ThumbsUpStars from '../../../assets/images/simple-illustrations/simple-illustration__thumbsupstars.svg';
 import Hands from '../../../assets/images/product-illustrations/home-illustration-hands.svg';
+import HandEarth from '../../../assets/images/simple-illustrations/simple-illustration__handearth.svg';
 
 export {
     Abracadabra,
@@ -94,4 +95,5 @@ export {
     TreasureChest,
     ThumbsUpStars,
     Hands,
+    HandEarth,
 };

src/SCREENS.ts

@@ -1,10 +1,17 @@
+import _ from 'underscore';
 import React from 'react';
 import PropTypes from 'prop-types';
-import Lottie from './Lottie';
+import {ScrollView, View} from 'react-native';
+import Lottie from 'lottie-react-native';
 import headerWithBackButtonPropTypes from './HeaderWithBackButton/headerWithBackButtonPropTypes';
+import HeaderWithBackButton from './HeaderWithBackButton';
+import ScreenWrapper from './ScreenWrapper';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
-import HeaderPageLayout from './HeaderPageLayout';
+import * as StyleUtils from '../styles/StyleUtils';
+import useWindowDimensions from '../hooks/useWindowDimensions';
+import FixedFooter from './FixedFooter';
+import useNetwork from '../hooks/useNetwork';
 
 const propTypes = {
     ...headerWithBackButtonPropTypes,
@@ -23,37 +30,59 @@ const propTypes = {
 
     /** Overlay content to display on top of animation */
     overlayContent: PropTypes.func,
+
+    /** Whether to include padding top */
+    includePaddingTop: PropTypes.bool,
 };
 
 const defaultProps = {
     backgroundColor: themeColors.appBG,
     footer: null,
     overlayContent: null,
+    includePaddingTop: true,
 };
 
-function IllustratedHeaderPageLayout({backgroundColor, children, illustration, footer, overlayContent, ...propsToPassToHeader}) {
+function IllustratedHeaderPageLayout({backgroundColor, children, illustration, footer, overlayContent, includePaddingTop, ...propsToPassToHeader}) {
+    const {windowHeight} = useWindowDimensions();
+    const {isOffline} = useNetwork();
     return (
-        <HeaderPageLayout
-            backgroundColor={backgroundColor}
-            title={propsToPassToHeader.title}
-            headerContent={
+        <ScreenWrapper
+            style={[StyleUtils.getBackgroundColorStyle(backgroundColor)]}
+            shouldEnablePickerAvoiding={false}
+            includeSafeAreaPaddingBottom={false}
+            includePaddingTop={includePaddingTop}
+            offlineIndicatorStyle={[StyleUtils.getBackgroundColorStyle(themeColors.appBG)]}
+        >
+            {({safeAreaPaddingBottomStyle}) => (
                 <>
-                    <Lottie
-                        source={illustration}
-                        style={styles.w100}
-                        autoPlay
-                        loop
+                    <HeaderWithBackButton
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...propsToPassToHeader}
+                        titleColor={backgroundColor === themeColors.appBG ? undefined : themeColors.textColorfulBackground}
+                        iconFill={backgroundColor === themeColors.appBG ? undefined : themeColors.iconColorfulBackground}
                     />
-                    {overlayContent && overlayContent()}
+                    <View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(themeColors.appBG), !isOffline ? safeAreaPaddingBottomStyle : {}]}>
+                        <ScrollView
+                            contentContainerStyle={safeAreaPaddingBottomStyle}
+                            showsVerticalScrollIndicator={false}
+                        >
+                            <View style={styles.overscrollSpacer(backgroundColor, windowHeight)} />
+                            <View style={[styles.alignItemsCenter, styles.justifyContentEnd, StyleUtils.getBackgroundColorStyle(backgroundColor)]}>
+                                <Lottie
+                                    source={illustration}
+                                    style={styles.w100}
+                                    autoPlay
+                                    loop
+                                />
+                                {overlayContent && overlayContent()}
+                            </View>
+                            <View style={[styles.pt5]}>{children}</View>
+                        </ScrollView>
+                        {!_.isNull(footer) && <FixedFooter>{footer}</FixedFooter>}
+                    </View>
                 </>
-            }
-            headerContainerStyles={[styles.justifyContentCenter, styles.w100]}
-            footer={footer}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...propsToPassToHeader}
-        >
-            {children}
-        </HeaderPageLayout>
+            )}
+        </ScreenWrapper>
     );
 }
 

src/components/Icon/Illustrations.js

@@ -1,11 +1,11 @@
 const ExpensifyLounge = require('../../assets/animations/ExpensifyLounge.json');
+const FastMoney = require('../../assets/animations/FastMoney.json');
 const Fireworks = require('../../assets/animations/Fireworks.json');
 const Hands = require('../../assets/animations/Hands.json');
 const PreferencesDJ = require('../../assets/animations/PreferencesDJ.json');
 const ReviewingBankInfo = require('../../assets/animations/ReviewingBankInfo.json');
 const WorkspacePlanet = require('../../assets/animations/WorkspacePlanet.json');
 const SaveTheWorld = require('../../assets/animations/SaveTheWorld.json');
 const Safe = require('../../assets/animations/Safe.json');
-const Magician = require('../../assets/animations/Magician.json');
 
-export {ExpensifyLounge, Fireworks, Hands, PreferencesDJ, ReviewingBankInfo, SaveTheWorld, WorkspacePlanet, Safe, Magician};
+export {ExpensifyLounge, FastMoney, Fireworks, Hands, PreferencesDJ, ReviewingBankInfo, SaveTheWorld, WorkspacePlanet, Safe};

src/components/IllustratedHeaderPageLayout.js

@@ -14,6 +14,9 @@ const propTypes = {
     /** The text to display in the title of the section */
     title: PropTypes.string.isRequired,
 
+    /** The text to display in the subtitle of the section */
+    subtitle: PropTypes.string,
+
     /** The icon to display along with the title */
     icon: PropTypes.func,
 
@@ -27,6 +30,18 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     containerStyles: PropTypes.arrayOf(PropTypes.object),
 
+    /** Customize the Section container */
+    // eslint-disable-next-line react/forbid-prop-types
+    titleStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** Customize the Section container */
+    // eslint-disable-next-line react/forbid-prop-types
+    subtitleStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** Customize the Section container */
+    // eslint-disable-next-line react/forbid-prop-types
+    childrenStyles: PropTypes.arrayOf(PropTypes.object),
+
     /** Customize the Icon container */
     // eslint-disable-next-line react/forbid-prop-types
     iconContainerStyles: PropTypes.arrayOf(PropTypes.object),
@@ -39,21 +54,24 @@ const defaultProps = {
     IconComponent: null,
     containerStyles: [],
     iconContainerStyles: [],
+    titleStyles: [],
+    subtitleStyles: [],
+    childrenStyles: [],
+    subtitle: null,
 };
 
-function Section(props) {
-    const IconComponent = props.IconComponent;
+function Section({children, childrenStyles, containerStyles, icon, IconComponent, iconContainerStyles, menuItems, subtitle, subtitleStyles, title, titleStyles}) {
     return (
         <>
-            <View style={[styles.pageWrapper, styles.cardSection, ...props.containerStyles]}>
-                <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100]}>
+            <View style={[styles.pageWrapper, styles.cardSection, ...containerStyles]}>
+                <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, ...titleStyles]}>
                     <View style={[styles.flexShrink1]}>
-                        <Text style={[styles.textHeadline, styles.cardSectionTitle]}>{props.title}</Text>
+                        <Text style={[styles.textHeadline, styles.cardSectionTitle]}>{title}</Text>
                     </View>
-                    <View style={[styles.flexGrow1, styles.flexRow, styles.justifyContentEnd, ...props.iconContainerStyles]}>
-                        {Boolean(props.icon) && (
+                    <View style={[styles.flexGrow1, styles.flexRow, styles.justifyContentEnd, ...iconContainerStyles]}>
+                        {Boolean(icon) && (
                             <Icon
-                                src={props.icon}
+                                src={icon}
                                 height={68}
                                 width={68}
                             />
@@ -62,9 +80,15 @@ function Section(props) {
                     </View>
                 </View>
 
-                <View style={[styles.w100]}>{props.children}</View>
+                {Boolean(subtitle) && (
+                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, styles.mt4, ...subtitleStyles]}>
+                        <Text style={styles.textNormal}>{subtitle}</Text>
+                    </View>
+                )}
+
+                <View style={[styles.w100, ...childrenStyles]}>{children}</View>
 
-                <View style={[styles.w100]}>{Boolean(props.menuItems) && <MenuItemList menuItems={props.menuItems} />}</View>
+                <View style={[styles.w100]}>{Boolean(menuItems) && <MenuItemList menuItems={menuItems} />}</View>
             </View>
         </>
     );

src/components/LottieAnimations.js

@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Section from './Section';
+import styles from '../styles/styles';
+
+const propTypes = {
+    /** Contents to display inside the section */
+    children: PropTypes.node,
+
+    /** The icon to display along with the title */
+    icon: PropTypes.func,
+
+    /** The text to display in the subtitle of the section */
+    subtitle: PropTypes.string,
+
+    /** The text to display in the title of the section */
+    title: PropTypes.string.isRequired,
+};
+
+const defaultProps = {
+    children: null,
+    icon: null,
+    subtitle: null,
+};
+
+function WalletSection({children, icon, subtitle, title}) {
+    return (
+        <Section
+            icon={icon}
+            subtitle={subtitle}
+            title={title}
+            containerStyles={[styles.p0, styles.pv5]}
+            titleStyles={[styles.ph5]}
+            subtitleStyles={[styles.ph5]}
+        >
+            {children}
+        </Section>
+    );
+}
+
+WalletSection.defaultProps = defaultProps;
+WalletSection.displayName = 'WalletSection';
+WalletSection.propTypes = propTypes;
+
+export default WalletSection;

src/components/Section.js

@@ -834,6 +834,16 @@ export default {
             setDefaultFailure: 'Something went wrong. Please chat with Concierge for further assistance.',
         },
         addBankAccountFailure: 'An unexpected error occurred while trying to add your bank account. Please try again.',
+        getPaidFaster: 'Get paid faster',
+        addPaymentMethod: 'Add a payment method to send and receive payments directly in the app.',
+        getPaidBackFaster: 'Get paid back faster',
+        secureAccessToYourMoney: 'Secure access to your money',
+        receiveMoney: 'Receive money in your local currency',
+        expensifyWallet: 'Expensify Wallet',
+        sendAndReceiveMoney: 'Send and receive money from your Expensify Wallet.',
+        bankAccounts: 'Bank accounts',
+        addBankAccountToSendAndReceive: 'Add a bank account to send and receive payments directly in the app.',
+        addBankAccount: 'Add bank account',
     },
     cardPage: {
         expensifyCard: 'Expensify Card',

src/components/WalletSection.js

@@ -830,6 +830,16 @@ export default {
             setDefaultFailure: 'No se ha podido configurar el método de pago.',
         },
         addBankAccountFailure: 'Ocurrió un error inesperado al intentar añadir la cuenta bancaria. Inténtalo de nuevo.',
+        getPaidFaster: 'Cobra más rápido',
+        addPaymentMethod: 'Añade un método de pago para enviar y recibir pagos directamente en la aplicación.',
+        getPaidBackFaster: 'Recibe tus pagos más rápido',
+        secureAccessToYourMoney: 'Acceso seguro a tu dinero',
+        receiveMoney: 'Recibe dinero en tu moneda local',
+        expensifyWallet: 'Billetera Expensify',
+        sendAndReceiveMoney: 'Envía y recibe dinero desde tu Billetera Expensify.',
+        bankAccounts: 'Cuentas bancarias',
+        addBankAccountToSendAndReceive: 'Añade una cuenta bancaria para enviar y recibir pagos directamente en la aplicación.',
+        addBankAccount: 'Agregar cuenta bancaria',
     },
     cardPage: {
         expensifyCard: 'Tarjeta Expensify',

src/languages/en.ts

@@ -101,7 +101,7 @@ function NavigationRoot(props) {
 
     const animateStatusBarBackgroundColor = () => {
         const currentRoute = navigationRef.getCurrentRoute();
-        const currentScreenBackgroundColor = themeColors.PAGE_BACKGROUND_COLORS[currentRoute.name] || themeColors.appBG;
+        const currentScreenBackgroundColor = (currentRoute.params && currentRoute.params.backgroundColor) || themeColors.PAGE_BACKGROUND_COLORS[currentRoute.name] || themeColors.appBG;
 
         prevStatusBarBackgroundColor.current = statusBarBackgroundColor.current;
         statusBarBackgroundColor.current = currentScreenBackgroundColor;