Merge pull request #32106 from pasyukevich/feature/fraud-design-update

update wallet banner UI, wallet red dot condition

src/libs/CardUtils.ts

@@ -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,
+};

src/pages/settings/InitialSettingsPage.js

@@ -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';
@@ -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 */
@@ -102,6 +104,8 @@ const propTypes = {
         }),
     ),
 
+    cardList: PropTypes.objectOf(assignedCardPropTypes),
+
     /** Members keyed by accountID for all policies */
     allPolicyMembers: PropTypes.objectOf(PropTypes.objectOf(policyMemberPropType)),
 
@@ -120,6 +124,7 @@ const defaultProps = {
     bankAccountList: {},
     fundList: null,
     loginList: {},
+    cardList: {},
     allPolicyMembers: {},
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
@@ -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,
             },
@@ -267,6 +275,7 @@ function InitialSettingsPage(props) {
     }, [
         props.allPolicyMembers,
         props.bankAccountList,
+        props.cardList,
         props.fundList,
         props.loginList,
         props.network.isOffline,
@@ -435,6 +444,9 @@ export default compose(
         loginList: {
             key: ONYXKEYS.LOGIN_LIST,
         },
+        cardList: {
+            key: ONYXKEYS.CARD_LIST,
+        },
     }),
     withNetwork(),
 )(InitialSettingsPage);

src/pages/settings/Wallet/ExpensifyCardPage.js

@@ -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 = {
@@ -123,7 +122,6 @@ function ExpensifyCardPage({
         params: {domain},
     },
 }) {
-    const theme = useTheme();
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
@@ -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')}
                                 />
                             </>

src/pages/settings/Wallet/RedDotCardSection.js

@@ -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;

src/styles/styles.ts

@@ -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,
         },

src/styles/themes/default.ts

@@ -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,

src/styles/themes/light.ts

@@ -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,

src/styles/themes/types.ts

@@ -37,7 +37,7 @@ type ThemeColors = {
     successPressed: Color;
     transparent: Color;
     signInPage: Color;
-    dangerSection: Color;
+    darkSupportingText: Color;
 
     // Additional keys
     overlay: Color;