Skip to content

Commit

Permalink
Merge pull request #32106 from pasyukevich/feature/fraud-design-update
Browse files Browse the repository at this point in the history
update wallet banner UI, wallet red dot condition
  • Loading branch information
grgia authored Dec 12, 2023
2 parents 798deda + fef4dc4 commit 1510651
Show file tree
Hide file tree
Showing 9 changed files with 90 additions and 64 deletions.
21 changes: 20 additions & 1 deletion src/libs/CardUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -107,4 +107,23 @@ function findPhysicalCard(cards: Card[]) {
return cards.find((card) => !card.isVirtual);
}

export {isExpensifyCard, isCorporateCard, getDomainCards, getMonthFromExpirationDateString, getYearFromExpirationDateString, maskCard, getCardDescription, findPhysicalCard};
/**
* Checks if any of the cards in the list have detected fraud
*
* @param cardList - collection of assigned cards
*/
function hasDetectedFraud(cardList: Record<string, OnyxTypes.Card>): boolean {
return Object.values(cardList).some((card) => card.fraud !== CONST.EXPENSIFY_CARD.FRAUD_TYPES.NONE);
}

export {
isExpensifyCard,
isCorporateCard,
getDomainCards,
getMonthFromExpirationDateString,
getYearFromExpirationDateString,
maskCard,
getCardDescription,
findPhysicalCard,
hasDetectedFraud,
};
14 changes: 13 additions & 1 deletion src/pages/settings/InitialSettingsPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
import useLocalize from '@hooks/useLocalize';
import useSingleExecution from '@hooks/useSingleExecution';
import useWaitForNavigation from '@hooks/useWaitForNavigation';
import * as CardUtils from '@libs/CardUtils';
import compose from '@libs/compose';
import * as CurrencyUtils from '@libs/CurrencyUtils';
import Navigation from '@libs/Navigation/Navigation';
Expand All @@ -43,6 +44,7 @@ import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import SCREENS from '@src/SCREENS';
import assignedCardPropTypes from './Wallet/assignedCardPropTypes';

const propTypes = {
/* Onyx Props */
Expand Down Expand Up @@ -102,6 +104,8 @@ const propTypes = {
}),
),

cardList: PropTypes.objectOf(assignedCardPropTypes),

/** Members keyed by accountID for all policies */
allPolicyMembers: PropTypes.objectOf(PropTypes.objectOf(policyMemberPropType)),

Expand All @@ -120,6 +124,7 @@ const defaultProps = {
bankAccountList: {},
fundList: null,
loginList: {},
cardList: {},
allPolicyMembers: {},
...withCurrentUserPersonalDetailsDefaultProps,
};
Expand Down Expand Up @@ -235,7 +240,10 @@ function InitialSettingsPage(props) {
Navigation.navigate(ROUTES.SETTINGS_WALLET);
}),
brickRoadIndicator:
PaymentMethods.hasPaymentMethodError(props.bankAccountList, paymentCardList) || !_.isEmpty(props.userWallet.errors) || !_.isEmpty(props.walletTerms.errors)
PaymentMethods.hasPaymentMethodError(props.bankAccountList, paymentCardList) ||
!_.isEmpty(props.userWallet.errors) ||
!_.isEmpty(props.walletTerms.errors) ||
CardUtils.hasDetectedFraud(props.cardList)
? 'error'
: null,
},
Expand Down Expand Up @@ -267,6 +275,7 @@ function InitialSettingsPage(props) {
}, [
props.allPolicyMembers,
props.bankAccountList,
props.cardList,
props.fundList,
props.loginList,
props.network.isOffline,
Expand Down Expand Up @@ -435,6 +444,9 @@ export default compose(
loginList: {
key: ONYXKEYS.LOGIN_LIST,
},
cardList: {
key: ONYXKEYS.CARD_LIST,
},
}),
withNetwork(),
)(InitialSettingsPage);
33 changes: 0 additions & 33 deletions src/pages/settings/Wallet/DangerCardSection.js

This file was deleted.

22 changes: 9 additions & 13 deletions src/pages/settings/Wallet/ExpensifyCardPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,14 @@ import FormUtils from '@libs/FormUtils';
import * as GetPhysicalCardUtils from '@libs/GetPhysicalCardUtils';
import Navigation from '@libs/Navigation/Navigation';
import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
import useTheme from '@styles/themes/useTheme';
import useThemeStyles from '@styles/useThemeStyles';
import * as Card from '@userActions/Card';
import * as Link from '@userActions/Link';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import assignedCardPropTypes from './assignedCardPropTypes';
import DangerCardSection from './DangerCardSection';
import RedDotCardSection from './RedDotCardSection';
import CardDetails from './WalletPage/CardDetails';

const propTypes = {
Expand Down Expand Up @@ -123,7 +122,6 @@ function ExpensifyCardPage({
params: {domain},
},
}) {
const theme = useTheme();
const styles = useThemeStyles();
const {isOffline} = useNetwork();
const {translate} = useLocalize();
Expand Down Expand Up @@ -184,26 +182,24 @@ function ExpensifyCardPage({

{hasDetectedDomainFraud ? (
<DotIndicatorMessage
style={[styles.pageWrapper]}
textStyle={[styles.walletLockedMessage]}
style={styles.pageWrapper}
textStyles={styles.walletLockedMessage}
messages={{0: translate('cardPage.cardLocked')}}
type="error"
/>
) : null}

{hasDetectedIndividualFraud && !hasDetectedDomainFraud ? (
<>
<DangerCardSection
<RedDotCardSection
title={translate('cardPage.suspiciousBannerTitle')}
description={translate('cardPage.suspiciousBannerDescription')}
/>
<MenuItemWithTopDescription
title={translate('cardPage.reviewTransaction')}
titleStyle={styles.walletCardMenuItem}
icon={Expensicons.MagnifyingGlass}
iconFill={theme.icon}
shouldShowRightIcon
brickRoadIndicator="error"

<Button
medium
style={[styles.mh5, styles.mb5]}
text={translate('cardPage.reviewTransaction')}
onPress={() => Link.openOldDotLink('inbox')}
/>
</>
Expand Down
40 changes: 40 additions & 0 deletions src/pages/settings/Wallet/RedDotCardSection.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
import Icon from '@components/Icon';
import * as Expensicons from '@components/Icon/Expensicons';
import Text from '@components/Text';
import useTheme from '@styles/themes/useTheme';
import useThemeStyles from '@styles/useThemeStyles';

const propTypes = {
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
};

function RedDotCardSection({title, description}) {
const theme = useTheme();
const styles = useThemeStyles();

return (
<View style={[styles.p5, styles.flexRow, styles.alignItemsStart]}>
<View style={styles.offlineFeedback.errorDot}>
<Icon
src={Expensicons.DotIndicator}
fill={theme.danger}
/>
</View>
<View style={[styles.flexRow, styles.flexShrink1]}>
<View style={styles.flexShrink1}>
<Text style={[styles.walletRedDotSectionTitle, styles.mb1]}>{title}</Text>
<Text styles={styles.walletRedDotSectionText}>{description}</Text>
</View>
</View>
</View>
);
}

RedDotCardSection.propTypes = propTypes;
RedDotCardSection.displayName = 'RedDotCardSection';

export default RedDotCardSection;
18 changes: 5 additions & 13 deletions src/styles/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3957,23 +3957,15 @@ const styles = (theme: ThemeColors) =>
paddingBottom: 0,
},

walletDangerSection: {
backgroundColor: theme.dangerSection,
color: theme.dangerSection,
borderRadius: variables.componentBorderRadiusCard,
width: 'auto',
marginHorizontal: 20,
marginBottom: 6,
},

walletDangerSectionTitle: {
fontSize: variables.fontSizeNormal,
fontFamily: fontFamily.EXP_NEUE_BOLD,
walletRedDotSectionTitle: {
color: theme.text,
fontWeight: fontWeightBold,
fontSize: variables.fontSizeNormal,
lineHeight: variables.lineHeightXLarge,
},

walletDangerSectionText: {
walletRedDotSectionText: {
color: theme.darkSupportingText,
fontSize: variables.fontSizeLabel,
lineHeight: variables.lineHeightNormal,
},
Expand Down
2 changes: 1 addition & 1 deletion src/styles/themes/default.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const darkTheme = {
successPressed: colors.greenPressed,
transparent: colors.transparent,
signInPage: colors.green800,
dangerSection: colors.tangerine800,
darkSupportingText: colors.productDark800,

// Additional keys
overlay: colors.productDark400,
Expand Down
2 changes: 1 addition & 1 deletion src/styles/themes/light.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const lightTheme = {
successPressed: colors.greenPressed,
transparent: colors.transparent,
signInPage: colors.green800,
dangerSection: colors.tangerine800,
darkSupportingText: colors.productDark800,

// Additional keys
overlay: colors.productLight400,
Expand Down
2 changes: 1 addition & 1 deletion src/styles/themes/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ type ThemeColors = {
successPressed: Color;
transparent: Color;
signInPage: Color;
dangerSection: Color;
darkSupportingText: Color;

// Additional keys
overlay: Color;
Expand Down

0 comments on commit 1510651

Please sign in to comment.