From bea9c64188b6244e06611cddc2fc6b79248fdc82 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Tue, 28 Nov 2023 13:12:00 +0100 Subject: [PATCH 1/4] update wallet banner UI, wallet red dot condition --- src/libs/CardUtils.ts | 12 +++++- src/pages/settings/InitialSettingsPage.js | 14 ++++++- .../settings/Wallet/DangerCardSection.js | 33 --------------- .../settings/Wallet/ExpensifyCardPage.js | 22 +++++----- .../settings/Wallet/RedDotCardSection.js | 40 +++++++++++++++++++ src/styles/styles.ts | 18 +++------ src/styles/themes/default.ts | 2 +- src/styles/themes/light.ts | 2 +- src/styles/themes/types.ts | 2 +- 9 files changed, 81 insertions(+), 64 deletions(-) delete mode 100644 src/pages/settings/Wallet/DangerCardSection.js create mode 100644 src/pages/settings/Wallet/RedDotCardSection.js diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts index b0d426c9774a..9f0fc5dce7df 100644 --- a/src/libs/CardUtils.ts +++ b/src/libs/CardUtils.ts @@ -107,4 +107,14 @@ 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 + * @returns boolean + */ +function hasDetectedFraud(cardList: Record) { + 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 61950e14337f..1b484775feaa 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 c1b78a224eb3..b71a6e853432 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -3939,23 +3939,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 8dd76a4776a4..e0ef1c10f518 100644 --- a/src/styles/themes/default.ts +++ b/src/styles/themes/default.ts @@ -33,7 +33,7 @@ const darkTheme = { successPressed: colors.greenPressed, transparent: colors.transparent, signInPage: colors.green800, - dangerSection: colors.tangerine800, + darkSupportingText: colors.darkSupportingText, // Additional keys overlay: colors.darkBorders, diff --git a/src/styles/themes/light.ts b/src/styles/themes/light.ts index cbaadcf196ba..4dac73be018b 100644 --- a/src/styles/themes/light.ts +++ b/src/styles/themes/light.ts @@ -33,7 +33,7 @@ const lightTheme = { successPressed: colors.greenPressed, transparent: colors.transparent, signInPage: colors.green800, - dangerSection: colors.tangerine800, + darkSupportingText: colors.darkSupportingText, // Additional keys overlay: colors.lightBorders, diff --git a/src/styles/themes/types.ts b/src/styles/themes/types.ts index d6d1dcea0833..79dbfed9215b 100644 --- a/src/styles/themes/types.ts +++ b/src/styles/themes/types.ts @@ -36,7 +36,7 @@ type ThemeColors = { successPressed: Color; transparent: Color; signInPage: Color; - dangerSection: Color; + darkSupportingText: Color; // Additional keys overlay: Color; From a5e82b180353a73569bdd9e1667fa024a781bf36 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Wed, 29 Nov 2023 12:55:15 +0100 Subject: [PATCH 2/4] update hasDetectedFraud return type MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fábio Henriques --- src/libs/CardUtils.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts index 9f0fc5dce7df..34a2945e21a2 100644 --- a/src/libs/CardUtils.ts +++ b/src/libs/CardUtils.ts @@ -111,9 +111,8 @@ function findPhysicalCard(cards: Card[]) { * Checks if any of the cards in the list have detected fraud * * @param cardList - collection of assigned cards - * @returns boolean */ -function hasDetectedFraud(cardList: Record) { +function hasDetectedFraud(cardList: Record): boolean { return Object.values(cardList).some((card) => card.fraud !== CONST.EXPENSIFY_CARD.FRAUD_TYPES.NONE); } From 2f639155a9e721a533ea4fa5491ee328258b753e Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Wed, 29 Nov 2023 15:17:54 +0100 Subject: [PATCH 3/4] apply prettier --- src/libs/CardUtils.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts index 34a2945e21a2..9b2bd2616e8e 100644 --- a/src/libs/CardUtils.ts +++ b/src/libs/CardUtils.ts @@ -116,4 +116,14 @@ 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}; +export { + isExpensifyCard, + isCorporateCard, + getDomainCards, + getMonthFromExpirationDateString, + getYearFromExpirationDateString, + maskCard, + getCardDescription, + findPhysicalCard, + hasDetectedFraud, +}; From fef4dc40ac2639344da151ed32a6553e9a7f58e6 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Tue, 12 Dec 2023 17:43:49 +0100 Subject: [PATCH 4/4] update dark supporting text color --- src/styles/themes/default.ts | 2 +- src/styles/themes/light.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts index 7759ee2db4c7..db4463889e29 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, - darkSupportingText: colors.darkSupportingText, + darkSupportingText: colors.productDark800, // Additional keys overlay: colors.productDark400, diff --git a/src/styles/themes/light.ts b/src/styles/themes/light.ts index 732662122e4d..f81253370ff9 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, - darkSupportingText: colors.darkSupportingText, + darkSupportingText: colors.productDark800, // Additional keys overlay: colors.productLight400,