diff --git a/assets/images/product-illustrations/simple-illustration__smartscan.svg b/assets/images/product-illustrations/simple-illustration__smartscan.svg
new file mode 100644
index 000000000000..34d1fadfaa3b
--- /dev/null
+++ b/assets/images/product-illustrations/simple-illustration__smartscan.svg
@@ -0,0 +1,21 @@
+
diff --git a/src/CONST.ts b/src/CONST.ts
index bc74cbe77717..9699ec9dbd40 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -1244,7 +1244,7 @@ const CONST = {
BANK: 'Expensify Card',
FRAUD_TYPES: {
DOMAIN: 'domain',
- INDIVIDUAL: 'individal',
+ INDIVIDUAL: 'individual',
NONE: 'none',
},
STATE: {
diff --git a/src/components/DotIndicatorMessage.js b/src/components/DotIndicatorMessage.js
index b3528b43dc75..fc4d74339d6e 100644
--- a/src/components/DotIndicatorMessage.js
+++ b/src/components/DotIndicatorMessage.js
@@ -3,6 +3,7 @@ import _ from 'underscore';
import PropTypes from 'prop-types';
import {View} from 'react-native';
import styles from '../styles/styles';
+import stylePropTypes from '../styles/stylePropTypes';
import Icon from './Icon';
import * as Expensicons from './Icon/Expensicons';
import themeColors from '../styles/themes/default';
@@ -25,11 +26,15 @@ const propTypes = {
// Additional styles to apply to the container */
// eslint-disable-next-line react/forbid-prop-types
style: PropTypes.arrayOf(PropTypes.object),
+
+ // Additional styles to apply to the text
+ textStyles: stylePropTypes,
};
const defaultProps = {
messages: {},
style: [],
+ textStyles: [],
};
function DotIndicatorMessage(props) {
@@ -64,7 +69,7 @@ function DotIndicatorMessage(props) {
{_.map(sortedMessages, (message, i) => (
{message}
diff --git a/src/components/Icon/Illustrations.js b/src/components/Icon/Illustrations.js
index 0e39872a3da6..c9a86cf8f10c 100644
--- a/src/components/Icon/Illustrations.js
+++ b/src/components/Icon/Illustrations.js
@@ -46,6 +46,7 @@ import TreasureChest from '../../../assets/images/simple-illustrations/simple-il
import ThumbsUpStars from '../../../assets/images/simple-illustrations/simple-illustration__thumbsupstars.svg';
import Hands from '../../../assets/images/product-illustrations/home-illustration-hands.svg';
import HandEarth from '../../../assets/images/simple-illustrations/simple-illustration__handearth.svg';
+import SmartScan from '../../../assets/images/product-illustrations/simple-illustration__smartscan.svg';
export {
Abracadabra,
@@ -96,4 +97,5 @@ export {
ThumbsUpStars,
Hands,
HandEarth,
+ SmartScan,
};
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 50f15de2290e..d1a0181d5491 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -872,6 +872,10 @@ export default {
virtualCardNumber: 'Virtual card number',
physicalCardNumber: 'Physical card number',
reportFraud: 'Report virtual card fraud',
+ reviewTransaction: 'Review transaction',
+ suspiciousBannerTitle: 'Suspicious transaction',
+ suspiciousBannerDescription: 'We noticed suspicious transaction on your card. Tap below to review.',
+ cardLocked: "Your card is temporarily locked while our team reviews your company's account.",
cardDetails: {
cardNumber: 'Virtual card number',
expiration: 'Expiration',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 8f8addda8273..512373a574d2 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -868,6 +868,10 @@ export default {
virtualCardNumber: 'Número de la tarjeta virtual',
physicalCardNumber: 'Número de la tarjeta física',
reportFraud: 'Reportar fraude con la tarjeta virtual',
+ reviewTransaction: 'Revisar transacción',
+ suspiciousBannerTitle: 'Transacción sospechosa',
+ suspiciousBannerDescription: 'Hemos detectado una transacción sospechosa en la tarjeta. Haga click abajo para revisarla.',
+ cardLocked: 'La tarjeta está temporalmente bloqueada mientras nuestro equipo revisa la cuenta de tu empresa.',
cardDetails: {
cardNumber: 'Número de tarjeta virtual',
expiration: 'Expiración',
diff --git a/src/pages/settings/Wallet/DangerCardSection.js b/src/pages/settings/Wallet/DangerCardSection.js
new file mode 100644
index 000000000000..bd67ba03c43b
--- /dev/null
+++ b/src/pages/settings/Wallet/DangerCardSection.js
@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {View} from 'react-native';
+import styles from '../../../styles/styles';
+import * as Illustrations from '../../../components/Icon/Illustrations';
+import Text from '../../../components/Text';
+
+const propTypes = {
+ title: PropTypes.string.isRequired,
+ description: PropTypes.string.isRequired,
+};
+
+function DangerCardSection({title, description}) {
+ 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 c7a178134139..e198d449d57d 100644
--- a/src/pages/settings/Wallet/ExpensifyCardPage.js
+++ b/src/pages/settings/Wallet/ExpensifyCardPage.js
@@ -21,6 +21,10 @@ import CardDetails from './WalletPage/CardDetails';
import MenuItem from '../../../components/MenuItem';
import CONST from '../../../CONST';
import assignedCardPropTypes from './assignedCardPropTypes';
+import theme from '../../../styles/themes/default';
+import DotIndicatorMessage from '../../../components/DotIndicatorMessage';
+import * as Link from '../../../libs/actions/Link';
+import DangerCardSection from './DangerCardSection';
const propTypes = {
/* Onyx Props */
@@ -63,6 +67,9 @@ function ExpensifyCardPage({
setShouldShowCardDetails(true);
};
+ const hasDetectedDomainFraud = _.some(domainCards, (card) => card.fraud === CONST.EXPENSIFY_CARD.FRAUD_TYPES.DOMAIN);
+ const hasDetectedIndividualFraud = _.some(domainCards, (card) => card.fraud === CONST.EXPENSIFY_CARD.FRAUD_TYPES.INDIVIDUAL);
+
return (
Navigation.goBack(ROUTES.SETTINGS_WALLET)}
/>
-
+
-
- {!_.isEmpty(virtualCard) && (
+ {hasDetectedDomainFraud ? (
+
+ ) : null}
+
+ {hasDetectedIndividualFraud && !hasDetectedDomainFraud ? (
<>
- {shouldShowCardDetails ? (
-
- ) : (
-
- }
- />
- )}
+
Navigation.navigate(ROUTES.SETTINGS_REPORT_FRAUD.getRoute(domain))}
+ brickRoadIndicator="error"
+ onPress={() => Link.openOldDotLink('inbox')}
/>
- )}
- {!_.isEmpty(physicalCard) && (
+ ) : null}
+
+ {!hasDetectedDomainFraud ? (
<>
-
{physicalCard.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED && (
),
diff --git a/src/pages/settings/Wallet/assignedCardPropTypes.js b/src/pages/settings/Wallet/assignedCardPropTypes.js
index e45b57a05d31..a8bfc1a2cbd0 100644
--- a/src/pages/settings/Wallet/assignedCardPropTypes.js
+++ b/src/pages/settings/Wallet/assignedCardPropTypes.js
@@ -10,7 +10,7 @@ const assignedCardPropTypes = PropTypes.shape({
domainName: PropTypes.string,
maskedPan: PropTypes.string,
isVirtual: PropTypes.bool,
- fraud: PropTypes.oneOf([CONST.EXPENSIFY_CARD.FRAUD_TYPES.DOMAIN, CONST.EXPENSIFY_CARD.FRAUD_TYPES.USER, CONST.EXPENSIFY_CARD.FRAUD_TYPES.NONE]),
+ fraud: PropTypes.oneOf([CONST.EXPENSIFY_CARD.FRAUD_TYPES.DOMAIN, CONST.EXPENSIFY_CARD.FRAUD_TYPES.INDIVIDUAL, CONST.EXPENSIFY_CARD.FRAUD_TYPES.NONE]),
cardholderFirstName: PropTypes.string,
cardholderLastName: PropTypes.string,
});
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 0b32876036e6..86810a337334 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -3954,8 +3954,11 @@ const styles = (theme: ThemeDefault) =>
},
walletCardMenuItem: {
+ fontFamily: fontFamily.EXP_NEUE_BOLD,
+ fontWeight: fontWeightBold,
color: theme.text,
fontSize: variables.fontSizeNormal,
+ lineHeight: variables.lineHeightXLarge,
},
walletCardHolder: {
@@ -3975,6 +3978,33 @@ const styles = (theme: ThemeDefault) =>
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,
+ fontWeight: fontWeightBold,
+ lineHeight: variables.lineHeightXLarge,
+ },
+
+ walletDangerSectionText: {
+ fontSize: variables.fontSizeLabel,
+ lineHeight: variables.lineHeightNormal,
+ },
+
+ walletLockedMessage: {
+ color: theme.text,
+ fontSize: variables.fontSizeNormal,
+ lineHeight: variables.lineHeightXLarge,
+ },
+
aspectRatioLottie: (source) => {
if (!source.uri && typeof source === 'object' && source.w && source.h) {
return {aspectRatio: source.w / source.h};
diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts
index aabe9140bf9d..c8a44bb3bbaf 100644
--- a/src/styles/themes/default.ts
+++ b/src/styles/themes/default.ts
@@ -33,6 +33,7 @@ const darkTheme = {
successPressed: colors.greenPressed,
transparent: colors.transparent,
signInPage: colors.green800,
+ dangerSection: colors.tangerine800,
// Additional keys
overlay: colors.darkBorders,
diff --git a/src/styles/themes/light.ts b/src/styles/themes/light.ts
index cd3079c3313f..214975cd0902 100644
--- a/src/styles/themes/light.ts
+++ b/src/styles/themes/light.ts
@@ -33,6 +33,7 @@ const lightTheme = {
successPressed: colors.greenPressed,
transparent: colors.transparent,
signInPage: colors.green800,
+ dangerSection: colors.tangerine800,
// Additional keys
overlay: colors.lightBorders,
diff --git a/src/styles/utilities/sizing.ts b/src/styles/utilities/sizing.ts
index 94d7c5c56f22..e68500beaf99 100644
--- a/src/styles/utilities/sizing.ts
+++ b/src/styles/utilities/sizing.ts
@@ -46,6 +46,10 @@ export default {
width: '70%',
},
+ w80: {
+ width: '80%',
+ },
+
w100: {
width: '100%',
},
diff --git a/src/styles/utilities/spacing.ts b/src/styles/utilities/spacing.ts
index e2b161ca0d62..c66b7cbd5250 100644
--- a/src/styles/utilities/spacing.ts
+++ b/src/styles/utilities/spacing.ts
@@ -207,6 +207,10 @@ export default {
marginTop: 32,
},
+ mt9: {
+ marginTop: 36,
+ },
+
mt11: {
marginTop: 44,
},
@@ -255,6 +259,10 @@ export default {
marginBottom: 32,
},
+ mb9: {
+ marginBottom: 36,
+ },
+
mb10: {
marginBottom: 40,
},