diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts index b0d426c9774a..9b2bd2616e8e 100644 --- a/src/libs/CardUtils.ts +++ b/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): 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, +}; diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js index 8ca1f96b3796..295d8c7a1f3e 100755 --- a/src/pages/settings/InitialSettingsPage.js +++ b/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); diff --git a/src/pages/settings/Wallet/DangerCardSection.js b/src/pages/settings/Wallet/DangerCardSection.js deleted file mode 100644 index 91add21b75ea..000000000000 --- a/src/pages/settings/Wallet/DangerCardSection.js +++ /dev/null @@ -1,33 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import {View} from 'react-native'; -import * as Illustrations from '@components/Icon/Illustrations'; -import Text from '@components/Text'; -import useThemeStyles from '@styles/useThemeStyles'; - -const propTypes = { - title: PropTypes.string.isRequired, - description: PropTypes.string.isRequired, -}; - -function DangerCardSection({title, description}) { - const styles = useThemeStyles(); - return ( - - - - {title} - {description} - - - - - - - ); -} - -DangerCardSection.propTypes = propTypes; -DangerCardSection.displayName = 'DangerCardSection'; - -export default DangerCardSection; diff --git a/src/pages/settings/Wallet/ExpensifyCardPage.js b/src/pages/settings/Wallet/ExpensifyCardPage.js index e92fca171817..b469027e6a57 100644 --- a/src/pages/settings/Wallet/ExpensifyCardPage.js +++ b/src/pages/settings/Wallet/ExpensifyCardPage.js @@ -19,7 +19,6 @@ 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'; @@ -27,7 +26,7 @@ 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,8 +182,8 @@ function ExpensifyCardPage({ {hasDetectedDomainFraud ? ( @@ -193,17 +191,15 @@ function ExpensifyCardPage({ {hasDetectedIndividualFraud && !hasDetectedDomainFraud ? ( <> - - Link.openOldDotLink('inbox')} /> diff --git a/src/pages/settings/Wallet/RedDotCardSection.js b/src/pages/settings/Wallet/RedDotCardSection.js new file mode 100644 index 000000000000..65c700575340 --- /dev/null +++ b/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 ( + + + + + + + {title} + {description} + + + + ); +} + +RedDotCardSection.propTypes = propTypes; +RedDotCardSection.displayName = 'RedDotCardSection'; + +export default RedDotCardSection; diff --git a/src/styles/styles.ts b/src/styles/styles.ts index b51c22f7766c..fb851ecfcf54 100644 --- a/src/styles/styles.ts +++ b/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, }, diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts index ee930b4a2a04..f33280feb3b0 100644 --- a/src/styles/themes/default.ts +++ b/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, diff --git a/src/styles/themes/light.ts b/src/styles/themes/light.ts index 0e4ca1c8a879..4e48d6ac1e67 100644 --- a/src/styles/themes/light.ts +++ b/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, diff --git a/src/styles/themes/types.ts b/src/styles/themes/types.ts index c674b6057d0f..3a123419c384 100644 --- a/src/styles/themes/types.ts +++ b/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;