diff --git a/src/components/OfflineWithFeedback.js b/src/components/OfflineWithFeedback.js index dae170dd1d5c..643e7b2f4a2f 100644 --- a/src/components/OfflineWithFeedback.js +++ b/src/components/OfflineWithFeedback.js @@ -58,6 +58,9 @@ const propTypes = { /** Whether to apply needsOffscreenAlphaCompositing prop to the children */ needsOffscreenAlphaCompositing: PropTypes.bool, + + /** Whether we can dismiss the error message */ + canDismissError: PropTypes.bool, }; const defaultProps = { @@ -72,6 +75,7 @@ const defaultProps = { errorRowStyles: [], shouldDisableStrikeThrough: false, needsOffscreenAlphaCompositing: false, + canDismissError: true, }; /** @@ -130,16 +134,18 @@ function OfflineWithFeedback(props) { messages={errorMessages} type="error" /> - - - - - + {props.canDismissError && ( + + + + + + )} )} diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts index 8df554dd4dbf..4b5374c92b12 100644 --- a/src/libs/CardUtils.ts +++ b/src/libs/CardUtils.ts @@ -1,6 +1,5 @@ import lodash from 'lodash'; import Onyx from 'react-native-onyx'; -import {Card} from '../types/onyx'; import CONST from '../CONST'; import * as Localize from './Localize'; import * as OnyxTypes from '../types/onyx'; @@ -60,13 +59,6 @@ function getYearFromExpirationDateString(expirationDateString: string) { return cardYear.length === 2 ? `20${cardYear}` : cardYear; } -function getCompanyCards(cardList: {string: Card}) { - if (!cardList) { - return []; - } - return Object.values(cardList).filter((card) => card.bank !== CONST.EXPENSIFY_CARD.BANK); -} - /** * @param cardList - collection of assigned cards * @returns collection of assigned cards grouped by domain @@ -96,4 +88,4 @@ function maskCard(lastFour = ''): string { return maskedString.replace(/(.{4})/g, '$1 ').trim(); } -export {isExpensifyCard, getDomainCards, getCompanyCards, getMonthFromExpirationDateString, getYearFromExpirationDateString, maskCard, getCardDescription}; +export {isExpensifyCard, getDomainCards, getMonthFromExpirationDateString, getYearFromExpirationDateString, maskCard, getCardDescription}; diff --git a/src/pages/settings/Wallet/PaymentMethodList.js b/src/pages/settings/Wallet/PaymentMethodList.js index 2943fa9544ae..2a533a784a62 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.js +++ b/src/pages/settings/Wallet/PaymentMethodList.js @@ -27,6 +27,7 @@ import Navigation from '../../../libs/Navigation/Navigation'; import ROUTES from '../../../ROUTES'; import getBankIcon from '../../../components/Icon/BankIcons'; import assignedCardPropTypes from './assignedCardPropTypes'; +import * as CardUtils from '../../../libs/CardUtils'; const propTypes = { /** What to do when a menu item is pressed */ @@ -199,14 +200,23 @@ function PaymentMethodList({ const paymentCardList = fundList || {}; if (shouldShowAssignedCards) { - const assignedCards = _.filter(cardList, (card) => CONST.EXPENSIFY_CARD.ACTIVE_STATES.includes(card.state)); + const assignedCards = _.chain(cardList) + .filter((card) => CONST.EXPENSIFY_CARD.ACTIVE_STATES.includes(card.state)) + .sortBy((card) => (CardUtils.isExpensifyCard(card.cardID) ? 0 : 1)) + .value(); + return _.map(assignedCards, (card) => { const icon = getBankIcon(card.bank); + const isExpensifyCard = CardUtils.isExpensifyCard(card.cardID); return { - key: card.key, - title: translate('walletPage.expensifyCard'), + key: card.cardID, + title: isExpensifyCard ? translate('walletPage.expensifyCard') : card.cardName, description: card.domainName, - onPress: () => Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARDS.getRoute(card.domainName)), + onPress: isExpensifyCard ? () => Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARDS.getRoute(card.domainName)) : () => {}, + shouldShowRightIcon: isExpensifyCard, + interactive: isExpensifyCard, + canDismissError: isExpensifyCard, + errors: card.errors, ...icon, }; }); @@ -274,6 +284,7 @@ function PaymentMethodList({ pendingAction={item.pendingAction} errors={item.errors} errorRowStyles={styles.ph6} + canDismissError={item.canDismissError} > ), - [filteredPaymentMethods, translate, shouldShowAssignedCards, shouldShowSelectedState, selectedMethodID], + [filteredPaymentMethods, translate, shouldShowSelectedState, selectedMethodID], ); return (