Skip to content

Commit

Permalink
Merge pull request #46380 from Krishna2323/krishna2323/issue/46242
Browse files Browse the repository at this point in the history 
fix: Update the Wallets page to put bank accounts at top.
  • Loading branch information
@neil-marcellini
neil-marcellini authored Aug 6, 2024
2 parents 7b8492b + 56df09d commit c6fb0cc
Show file tree
Hide file tree
Showing 7 changed files with 478 additions and 69 deletions.
378 changes: 378 additions & 0 deletions assets/images/simple-illustrations/emptystate__big-vault.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions src/components/Icon/Illustrations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import TadaYellow from '@assets/images/product-illustrations/tada--yellow.svg';
import TeleScope from '@assets/images/product-illustrations/telescope.svg';
import ThreeLeggedLaptopWoman from '@assets/images/product-illustrations/three_legged_laptop_woman.svg';
import ToddBehindCloud from '@assets/images/product-illustrations/todd-behind-cloud.svg';
import BigVault from '@assets/images/simple-illustrations/emptystate__big-vault.svg';
import Abacus from '@assets/images/simple-illustrations/simple-illustration__abacus.svg';
import Accounting from '@assets/images/simple-illustrations/simple-illustration__accounting.svg';
import Alert from '@assets/images/simple-illustrations/simple-illustration__alert.svg';
Expand Down Expand Up @@ -211,5 +212,6 @@ export {
FolderWithPapers,
VirtualCard,
Tire,
BigVault,
Filters,
};
18 changes: 14 additions & 4 deletions src/components/Section/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,9 @@ type SectionProps = Partial<ChildrenProps> & {
/** The background color to apply in the upper half of the screen. */
illustrationBackgroundColor?: string;

/** Customize the Illustration container */
illustrationContainerStyle?: StyleProp<ViewStyle>;

/** Styles to apply to illustration component */
illustrationStyle?: StyleProp<ViewStyle>;

Expand Down Expand Up @@ -109,6 +112,7 @@ function Section({
isCentralPane = false,
illustration,
illustrationBackgroundColor,
illustrationContainerStyle,
illustrationStyle,
contentPaddingOnLargeScreens,
overlayContent,
Expand All @@ -125,9 +129,6 @@ function Section({
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]}>
{banner}
Expand All @@ -140,7 +141,16 @@ function Section({
/>
)}
{!!illustration && (
<View style={[styles.w100, styles.dFlex, styles.alignItemsCenter, styles.justifyContentCenter, illustrationContainerStyle]}>
<View
style={[
styles.w100,
styles.dFlex,
styles.alignItemsCenter,
styles.justifyContentCenter,
StyleUtils.getBackgroundColorStyle(illustrationBackgroundColor ?? lottieIllustration?.backgroundColor ?? theme.appBG),
illustrationContainerStyle,
]}
>
<View style={[styles.cardSectionIllustration, illustrationStyle]}>
{isLottie ? (
<Lottie
Expand Down
6 changes: 4 additions & 2 deletions src/languages/en.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1182,6 +1182,7 @@ export default {
},
},
walletPage: {
balance: 'Balance',
paymentMethodsTitle: 'Payment methods',
setDefaultConfirmation: 'Make default payment method',
setDefaultSuccess: 'Default payment method set!',
Expand All @@ -1200,11 +1201,12 @@ export default {
secureAccessToYourMoney: 'Secure access to your money',
receiveMoney: 'Receive money in your local currency',
expensifyWallet: 'Expensify Wallet',
sendAndReceiveMoney: 'Send and receive money with friends.',
sendAndReceiveMoney: 'Send and receive money with friends',
enableWalletToSendAndReceiveMoney: 'Enable your wallet to send and receive money with friends.',
walletEnabledToSendAndReceiveMoney: 'Your wallet has been enabled to send and receive money with friends.',
enableWallet: 'Enable wallet',
bankAccounts: 'Bank accounts',
addBankAccountToSendAndReceive: 'Add a bank account to send and receive payments directly in the app.',
addBankAccountToSendAndReceive: 'Adding a bank account allows you to get paid back for expenses you submit to a workspace.',
addBankAccount: 'Add bank account',
assignedCards: 'Assigned cards',
assignedCardsDescription: 'These are cards assigned by a workspace admin to manage company spend.',
Expand Down
8 changes: 5 additions & 3 deletions src/languages/es.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1191,6 +1191,7 @@ export default {
},
},
walletPage: {
balance: 'Saldo',
paymentMethodsTitle: 'Métodos de pago',
setDefaultConfirmation: 'Marcar como método de pago predeterminado',
setDefaultSuccess: 'Método de pago configurado',
Expand All @@ -1209,11 +1210,12 @@ export default {
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.',
enableWalletToSendAndReceiveMoney: 'Habilita tu Billetera Expensify para comenzar a enviar y recibir dinero con amigos',
sendAndReceiveMoney: 'Envía y recibe dinero desde tu Billetera Expensify',
enableWalletToSendAndReceiveMoney: 'Habilita tu Billetera Expensify para comenzar a enviar y recibir dinero con amigos.',
walletEnabledToSendAndReceiveMoney: 'Tu billetera ha sido habilitada para enviar y recibir dinero con amigos.',
enableWallet: 'Habilitar billetera',
bankAccounts: 'Cuentas bancarias',
addBankAccountToSendAndReceive: 'Añade una cuenta bancaria para enviar y recibir pagos directamente en la aplicación.',
addBankAccountToSendAndReceive: 'Agregar una cuenta bancaria te permite recibir reembolsos por los gastos que envíes a un espacio de trabajo.',
addBankAccount: 'Añadir cuenta bancaria',
assignedCards: 'Tarjetas asignadas',
assignedCardsDescription: 'Son tarjetas asignadas por un administrador del espacio de trabajo para gestionar los gastos de la empresa.',
Expand Down
123 changes: 70 additions & 53 deletions src/pages/settings/Wallet/WalletPage/WalletPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,15 @@ import type {GestureResponderEvent} from 'react-native';
import {ActivityIndicator, Dimensions, View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import AddPaymentMethodMenu from '@components/AddPaymentMethodMenu';
import Button from '@components/Button';
import ConfirmModal from '@components/ConfirmModal';
import CurrentWalletBalance from '@components/CurrentWalletBalance';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import Icon from '@components/Icon';
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 MenuItem from '@components/MenuItem';
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
import OfflineWithFeedback from '@components/OfflineWithFeedback';
import Popover from '@components/Popover';
import ScreenWrapper from '@components/ScreenWrapper';
Expand All @@ -27,6 +26,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
import * as CurrencyUtils from '@libs/CurrencyUtils';
import getClickedTargetLocation from '@libs/getClickedTargetLocation';
import Navigation from '@libs/Navigation/Navigation';
import * as PaymentUtils from '@libs/PaymentUtils';
Expand Down Expand Up @@ -367,10 +367,58 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi
errors={userWallet?.errors}
errorRowStyles={[styles.ph6]}
>
<Section
subtitle={translate('walletPage.addBankAccountToSendAndReceive')}
title={translate('walletPage.bankAccounts')}
isCentralPane
titleStyles={styles.accountSettingsSectionTitle}
illustration={Illustrations.BigVault}
illustrationStyle={styles.walletIllustration}
illustrationContainerStyle={{height: 220}}
illustrationBackgroundColor="#411103"
>
<PaymentMethodList
shouldShowAddPaymentMethodButton={false}
shouldShowEmptyListMessage={false}
onPress={paymentMethodPressed}
actionPaymentMethodType={shouldShowDefaultDeleteMenu ? paymentMethod.selectedPaymentMethodType : ''}
activePaymentMethodID={shouldShowDefaultDeleteMenu ? getSelectedPaymentMethodID() : ''}
buttonRef={addPaymentMethodAnchorRef}
onListContentSizeChange={shouldShowAddPaymentMenu || shouldShowDefaultDeleteMenu ? setMenuPosition : () => {}}
shouldEnableScroll={false}
style={[styles.mt5, [shouldUseNarrowLayout ? styles.mhn5 : styles.mhn8]]}
listItemStyle={shouldUseNarrowLayout ? styles.ph5 : styles.ph8}
/>
</Section>

{hasAssignedCard ? (
<Section
subtitle={translate('walletPage.assignedCardsDescription')}
title={translate('walletPage.assignedCards')}
isCentralPane
titleStyles={styles.accountSettingsSectionTitle}
>
<PaymentMethodList
shouldShowAddBankAccount={false}
shouldShowAddPaymentMethodButton={false}
shouldShowAssignedCards
shouldShowEmptyListMessage={false}
shouldEnableScroll={false}
onPress={paymentMethodPressed}
style={[styles.mt5, [shouldUseNarrowLayout ? styles.mhn5 : styles.mhn8]]}
listItemStyle={shouldUseNarrowLayout ? styles.ph5 : styles.ph8}
actionPaymentMethodType={shouldShowDefaultDeleteMenu ? paymentMethod.selectedPaymentMethodType : ''}
activePaymentMethodID={shouldShowDefaultDeleteMenu ? getSelectedPaymentMethodID() : ''}
buttonRef={addPaymentMethodAnchorRef}
onListContentSizeChange={shouldShowAddPaymentMenu || shouldShowDefaultDeleteMenu ? setMenuPosition : () => {}}
/>
</Section>
) : null}

{hasWallet && (
<Section
subtitle={translate(`walletPage.${hasActivatedWallet ? 'sendAndReceiveMoney' : 'enableWalletToSendAndReceiveMoney'}`)}
title={translate('walletPage.expensifyWallet')}
subtitle={translate(`walletPage.${hasActivatedWallet ? 'walletEnabledToSendAndReceiveMoney' : 'enableWalletToSendAndReceiveMoney'}`)}
title={translate('walletPage.sendAndReceiveMoney')}
isCentralPane
titleStyles={styles.accountSettingsSectionTitle}
>
Expand All @@ -387,9 +435,15 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi
errors={walletTerms?.errors}
onClose={PaymentMethods.clearWalletTermsError}
errorRowStyles={[styles.ml10, styles.mr2]}
style={[styles.mt7, styles.mb5, styles.alignSelfStart]}
style={[styles.mt4, styles.mb2]}
>
<CurrentWalletBalance balanceStyles={[styles.walletBalance]} />
<MenuItemWithTopDescription
description={translate('walletPage.balance')}
title={CurrencyUtils.convertToDisplayString(userWallet?.currentBalance ?? 0)}
titleStyle={styles.textHeadlineH2}
interactive={false}
wrapperStyle={styles.sectionMenuItemTopDescription}
/>
</OfflineWithFeedback>
)}

Expand Down Expand Up @@ -462,62 +516,25 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi
}

return (
<Button
<MenuItem
ref={buttonRef as ForwardedRef<View>}
text={translate('walletPage.enableWallet')}
onPress={() => Navigation.navigate(ROUTES.SETTINGS_ENABLE_PAYMENTS)}
isDisabled={network.isOffline}
success
large
disabled={network.isOffline}
title={translate('walletPage.enableWallet')}
icon={Expensicons.Wallet}
hoverAndPressStyle={styles.hoveredComponentBG}
wrapperStyle={[
styles.transferBalance,
shouldUseNarrowLayout ? styles.mhn5 : styles.mhn8,
shouldUseNarrowLayout ? styles.ph5 : styles.ph8,
]}
/>
);
}}
</KYCWall>
</>
</Section>
)}
{hasAssignedCard ? (
<Section
subtitle={translate('walletPage.assignedCardsDescription')}
title={translate('walletPage.assignedCards')}
isCentralPane
titleStyles={styles.accountSettingsSectionTitle}
>
<PaymentMethodList
shouldShowAddBankAccount={false}
shouldShowAddPaymentMethodButton={false}
shouldShowAssignedCards
shouldShowEmptyListMessage={false}
shouldEnableScroll={false}
onPress={paymentMethodPressed}
style={[styles.mt5, [shouldUseNarrowLayout ? styles.mhn5 : styles.mhn8]]}
listItemStyle={shouldUseNarrowLayout ? styles.ph5 : styles.ph8}
actionPaymentMethodType={shouldShowDefaultDeleteMenu ? paymentMethod.selectedPaymentMethodType : ''}
activePaymentMethodID={shouldShowDefaultDeleteMenu ? getSelectedPaymentMethodID() : ''}
buttonRef={addPaymentMethodAnchorRef}
onListContentSizeChange={shouldShowAddPaymentMenu || shouldShowDefaultDeleteMenu ? setMenuPosition : () => {}}
/>
</Section>
) : null}
<Section
subtitle={translate('walletPage.addBankAccountToSendAndReceive')}
title={translate('walletPage.bankAccounts')}
isCentralPane
titleStyles={styles.accountSettingsSectionTitle}
>
<PaymentMethodList
shouldShowAddPaymentMethodButton={false}
shouldShowEmptyListMessage={false}
onPress={paymentMethodPressed}
actionPaymentMethodType={shouldShowDefaultDeleteMenu ? paymentMethod.selectedPaymentMethodType : ''}
activePaymentMethodID={shouldShowDefaultDeleteMenu ? getSelectedPaymentMethodID() : ''}
buttonRef={addPaymentMethodAnchorRef}
onListContentSizeChange={shouldShowAddPaymentMenu || shouldShowDefaultDeleteMenu ? setMenuPosition : () => {}}
shouldEnableScroll={false}
style={[styles.mt5, [shouldUseNarrowLayout ? styles.mhn5 : styles.mhn8]]}
listItemStyle={shouldUseNarrowLayout ? styles.ph5 : styles.ph8}
/>
</Section>
</OfflineWithFeedback>
</View>
</ScrollView>
Expand Down
12 changes: 5 additions & 7 deletions src/styles/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4713,6 +4713,11 @@ const styles = (theme: ThemeColors) =>
minHeight: variables.componentSizeNormal,
},

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

walletCardLimit: {
color: theme.text,
fontSize: variables.fontSizeNormal,
Expand Down Expand Up @@ -4747,13 +4752,6 @@ const styles = (theme: ThemeColors) =>
lineHeight: variables.lineHeightLarge,
},

walletBalance: {
lineHeight: undefined,
fontSize: 45,
paddingTop: 0,
paddingBottom: 0,
},

walletRedDotSectionTitle: {
color: theme.text,
fontWeight: FontUtils.fontWeight.bold,
Expand Down

0 comments on commit c6fb0cc

Please sign in to comment.