Skip to content

Commit

Permalink
Merge pull request Expensify#35806 from software-mansion-labs/@szymcz…
Browse files Browse the repository at this point in the history 
…ak/restyle-wallet-page

[Update Account Settings] Restyle Wallet Page
  • Loading branch information
@mountiny
mountiny authored Feb 13, 2024
2 parents b49c384 + 29451db commit 769d823
Show file tree
Hide file tree
Showing 6 changed files with 58 additions and 24 deletions.
2 changes: 1 addition & 1 deletion src/components/FeatureList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ function FeatureList({
menuItems,
illustration,
illustrationStyle,
illustrationBackgroundColor = '',
illustrationBackgroundColor,
}: FeatureListProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
Expand Down
11 changes: 10 additions & 1 deletion src/components/MenuItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,9 @@ type MenuItemBaseProps = {
/** Used to apply styles specifically to the title */
titleStyle?: ViewStyle;

/** Any additional styles to apply on the badge element */
badgeStyle?: ViewStyle;

/** Any adjustments to style when menu item is hovered or pressed */
hoverAndPressStyle?: StyleProp<AnimatedStyle<ViewStyle>>;

Expand Down Expand Up @@ -246,6 +249,7 @@ function MenuItem(
titleStyle,
hoverAndPressStyle,
descriptionTextStyle,
badgeStyle,
viewMode = CONST.OPTION_MODE.DEFAULT,
numberOfLinesTitle = 1,
icon,
Expand Down Expand Up @@ -564,7 +568,12 @@ function MenuItem(
{badgeText && (
<Badge
text={badgeText}
badgeStyles={[styles.alignSelfCenter, brickRoadIndicator ? styles.mr2 : undefined, focused || isHovered || pressed ? styles.buttonHoveredBG : {}]}
badgeStyles={[
styles.alignSelfCenter,
brickRoadIndicator ? styles.mr2 : undefined,
focused || isHovered || pressed ? styles.buttonHoveredBG : {},
badgeStyle,
]}
/>
)}
{/* Since subtitle can be of type number, we should allow 0 to be shown */}
Expand Down
21 changes: 17 additions & 4 deletions src/pages/settings/Wallet/PaymentMethodList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,9 @@ const propTypes = {

/** List container style */
style: stylePropTypes,

/** List item style */
listItemStyle: stylePropTypes,
};

const defaultProps = {
Expand All @@ -120,6 +123,7 @@ const defaultProps = {
onListContentSizeChange: () => {},
shouldEnableScroll: true,
style: {},
listItemStyle: {},
shouldShowSelectedState: false,
};

Expand Down Expand Up @@ -205,6 +209,7 @@ function PaymentMethodList({
onListContentSizeChange,
shouldEnableScroll,
style,
listItemStyle,
}) {
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
Expand Down Expand Up @@ -264,9 +269,12 @@ function PaymentMethodList({

return {
...paymentMethod,
iconRight: Expensicons.ThreeDots,
shouldShowRightIcon: true,
onPress: (e) => onPress(e, paymentMethod.accountType, paymentMethod.accountData, paymentMethod.isDefault, paymentMethod.methodID),
wrapperStyle: isMethodActive ? [StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED)] : null,
disabled: paymentMethod.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
isMethodActive,
};
});

Expand All @@ -286,12 +294,13 @@ function PaymentMethodList({
onPress={onPress}
title={translate('walletPage.addBankAccount')}
icon={Expensicons.Plus}
wrapperStyle={styles.paymentMethod}
wrapperStyle={[styles.paymentMethod, listItemStyle]}
hoverAndPressStyle={styles.hoveredComponentBG}
ref={buttonRef}
/>
),

[onPress, styles.paymentMethod, translate, buttonRef],
[onPress, translate, styles.paymentMethod, styles.hoveredComponentBG, listItemStyle, buttonRef],
);

/**
Expand Down Expand Up @@ -322,17 +331,21 @@ function PaymentMethodList({
iconWidth={item.iconWidth || item.iconSize}
iconStyles={item.iconStyles}
badgeText={shouldShowDefaultBadge(filteredPaymentMethods, item.isDefault) ? translate('paymentMethodList.defaultPaymentMethod') : null}
wrapperStyle={styles.paymentMethod}
wrapperStyle={[styles.paymentMethod, listItemStyle]}
iconRight={item.iconRight}
badgeStyle={styles.badgeBordered}
hoverAndPressStyle={styles.hoveredComponentBG}
shouldShowRightIcon={item.shouldShowRightIcon}
shouldShowSelectedState={shouldShowSelectedState}
isSelected={selectedMethodID === item.methodID}
interactive={item.interactive}
brickRoadIndicator={item.brickRoadIndicator}
success={item.isMethodActive}
/>
</OfflineWithFeedback>
),

[styles.ph6, styles.paymentMethod, filteredPaymentMethods, translate, shouldShowSelectedState, selectedMethodID],
[styles.ph6, styles.paymentMethod, styles.badgeBordered, styles.hoveredComponentBG, filteredPaymentMethods, translate, listItemStyle, shouldShowSelectedState, selectedMethodID],
);

return (
Expand Down
38 changes: 21 additions & 17 deletions src/pages/settings/Wallet/WalletPage/WalletPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,9 +97,9 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
const position = getClickedTargetLocation(paymentMethodButtonRef.current);

setAnchorPosition({
anchorPositionTop: position.top + position.height + variables.addPaymentPopoverTopSpacing,
anchorPositionTop: position.top + position.height - variables.bankAccountActionPopoverTopSpacing,
// We want the position to be 23px to the right of the left border
anchorPositionRight: windowWidth - position.right - variables.addBankAccountLeftSpacing,
anchorPositionRight: windowWidth - position.right + variables.bankAccountActionPopoverRightSpacing,
anchorPositionHorizontal: position.x + (shouldShowEmptyState ? -variables.addPaymentMethodLeftSpacing : variables.addBankAccountLeftSpacing),
anchorPositionVertical: position.y,
});
Expand Down Expand Up @@ -344,7 +344,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
icon={Illustrations.MoneyIntoWallet}
shouldShowBackButton={isSmallScreenWidth}
/>
<ScrollView>
<ScrollView style={styles.pt3}>
<View style={[styles.flex1, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
<OfflineWithFeedback
style={styles.flex1}
Expand All @@ -355,10 +355,10 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
>
{hasWallet && (
<Section
icon={Illustrations.MoneyIntoWallet}
subtitle={translate(`walletPage.${hasActivatedWallet ? 'sendAndReceiveMoney' : 'enableWalletToSendAndReceiveMoney'}`)}
title={translate('walletPage.expensifyWallet')}
isCentralPane
titleStyles={styles.accountSettingsSectionTitle}
>
<>
{shouldShowLoadingSpinner ? (
Expand All @@ -373,7 +373,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
errors={walletTerms.errors}
onClose={PaymentMethods.clearWalletTermsError}
errorRowStyles={[styles.ml10, styles.mr2]}
style={[styles.mt7, styles.mb5]}
style={[styles.mt7, styles.mb5, styles.alignSelfStart]}
>
<CurrentWalletBalance balanceStyles={[styles.walletBalance]} />
</OfflineWithFeedback>
Expand Down Expand Up @@ -457,10 +457,10 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
)}
{hasAssignedCard ? (
<Section
icon={Illustrations.CreditCardsNew}
subtitle={translate('walletPage.assignedCardsDescription')}
title={translate('walletPage.assignedCards')}
isCentralPane
titleStyles={styles.accountSettingsSectionTitle}
>
<PaymentMethodList
shouldShowAddBankAccount={false}
Expand All @@ -469,7 +469,8 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
shouldShowEmptyListMessage={false}
shouldEnableScroll={false}
onPress={paymentMethodPressed}
style={styles.mt5}
style={[styles.mt5, [isSmallScreenWidth ? styles.mhn5 : styles.mhn8]]}
listItemStyle={isSmallScreenWidth ? styles.ph5 : styles.ph8}
isAddPaymentMenuActive={shouldShowAddPaymentMenu}
actionPaymentMethodType={shouldShowDefaultDeleteMenu ? paymentMethod.selectedPaymentMethodType : ''}
activePaymentMethodID={shouldShowDefaultDeleteMenu ? getSelectedPaymentMethodID() : ''}
Expand All @@ -479,10 +480,10 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
</Section>
) : null}
<Section
icon={Illustrations.BankArrow}
subtitle={translate('walletPage.addBankAccountToSendAndReceive')}
title={translate('walletPage.bankAccounts')}
isCentralPane
titleStyles={styles.accountSettingsSectionTitle}
>
<PaymentMethodList
shouldShowAddPaymentMethodButton={false}
Expand All @@ -494,7 +495,8 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
buttonRef={addPaymentMethodAnchorRef}
onListContentSizeChange={shouldShowAddPaymentMenu || shouldShowDefaultDeleteMenu ? setMenuPosition : () => {}}
shouldEnableScroll={false}
style={styles.mt5}
style={[styles.mt5, [isSmallScreenWidth ? styles.mhn5 : styles.mhn8]]}
listItemStyle={isSmallScreenWidth ? styles.ph5 : styles.ph8}
/>
</Section>
</OfflineWithFeedback>
Expand All @@ -510,30 +512,32 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
anchorRef={paymentMethodButtonRef}
>
{!showConfirmDeleteModal && (
<View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
<View style={[styles.mv5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
{isPopoverBottomMount && (
<MenuItem
title={paymentMethod.formattedSelectedPaymentMethod.title || ''}
icon={paymentMethod.formattedSelectedPaymentMethod.icon}
description={paymentMethod.formattedSelectedPaymentMethod.description}
wrapperStyle={[styles.pv0, styles.ph0, styles.mb4]}
wrapperStyle={[styles.mb4, styles.ph5, styles.pv0]}
interactive={false}
/>
)}
{shouldShowMakeDefaultButton && (
<Button
<MenuItem
title={translate('walletPage.setDefaultConfirmation')}
icon={Expensicons.Mail}
onPress={() => {
makeDefaultPaymentMethod();
setShouldShowDefaultDeleteMenu(false);
}}
text={translate('walletPage.setDefaultConfirmation')}
wrapperStyle={[styles.pv3, styles.ph5, !isSmallScreenWidth ? styles.sidebarPopover : '']}
/>
)}
<Button
<MenuItem
title={translate('common.delete')}
icon={Expensicons.Trashcan}
onPress={() => setShowConfirmDeleteModal(true)}
style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
text={translate('common.delete')}
danger
wrapperStyle={[styles.pv3, styles.ph5, !isSmallScreenWidth ? styles.sidebarPopover : '']}
/>
</View>
)}
Expand Down
7 changes: 7 additions & 0 deletions src/styles/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -813,6 +813,13 @@ const styles = (theme: ThemeColors) =>
backgroundColor: theme.dangerPressed,
},

badgeBordered: {
backgroundColor: theme.transparent,
borderWidth: 1,
borderRadius: variables.componentBorderRadiusSmall,
borderColor: theme.border,
},

badgeText: {
color: theme.text,
fontSize: variables.fontSizeSmall,
Expand Down
3 changes: 2 additions & 1 deletion src/styles/variables.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,8 @@ export default {
modalContentMaxWidth: 360,
listItemHeightNormal: 64,
popoverWidth: 375,
addPaymentPopoverTopSpacing: 8,
bankAccountActionPopoverRightSpacing: 32,
bankAccountActionPopoverTopSpacing: 14,
addPaymentPopoverRightSpacing: 23,
anonymousReportFooterBreakpoint: 650,
dropDownButtonDividerHeight: 28,
Expand Down

0 comments on commit 769d823

Please sign in to comment.