Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Update the Wallets page to put bank accounts at top. #46380

Merged
merged 10 commits into from
Aug 6, 2024
Merged

fix: Update the Wallets page to put bank accounts at top. #46380

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
1e063ec
fix: Update the Wallets page to put bank accounts at top.
Krishna2323 Jul 28, 2024
38615fa
add big-vault illustration.
Krishna2323 Jul 30, 2024
9997aa0
remove redundant code.
Krishna2323 Jul 30, 2024
759edbd
add enabled wallet subtitle.
Krishna2323 Jul 30, 2024
93e1f57
update translation.
Krishna2323 Jul 31, 2024
c7d914e
Merge branch 'main' into krishna2323/issue/46242
Krishna2323 Jul 31, 2024
48b1f58
fix: illustration container height.
Krishna2323 Jul 31, 2024
a83cd22
minor fix.
Krishna2323 Aug 2, 2024
b5c88f6
minor fix.
Krishna2323 Aug 2, 2024
56df09d
move assigned card section above wallet section.
Krishna2323 Aug 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
378 changes: 378 additions & 0 deletions assets/images/simple-illustrations/emptystate__big-vault.svg
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1171,6 +1171,7 @@ export default {
},
},
walletPage: {
balance: 'Balance',
paymentMethodsTitle: 'Payment methods',
setDefaultConfirmation: 'Make default payment method',
setDefaultSuccess: 'Default payment method set!',
Expand All @@ -1189,11 +1190,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
6 changes: 4 additions & 2 deletions src/languages/es.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1180,6 +1180,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 @@ -1198,11 +1199,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.',
sendAndReceiveMoney: 'Envía y recibe dinero desde tu Billetera Expensify',
enableWalletToSendAndReceiveMoney: 'Habilita tu Billetera Expensify para comenzar a enviar y recibir dinero con amigos',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add a dot at the end here. I know it's an old copy, but we need to align it with the others.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@paultsimura, do we need dot at the end for titles also?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, only for the subtitles

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ohh sorry, I thought you were asking to add the dot to sendAndReceiveMoney. Updated.

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
75 changes: 45 additions & 30 deletions src/pages/settings/Wallet/WalletPage/WalletPage.tsx
View file
Open in desktop
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,33 @@ 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>
{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 +410,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,13 +491,18 @@ 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,
]}
/>
);
}}
Expand Down Expand Up @@ -499,25 +533,6 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi
/>
</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
Open in desktop
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
Loading