Merge pull request #29718 from Expensify/cmartins-displayCompanyCards

Expensify · Oct 17, 2023 · 79ade92 · 79ade92
2 parents 12d3669 + 40b308f
commit 79ade92
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 25 deletions.
diff --git 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"
                     />
-                    <Tooltip text={translate('common.close')}>
-                        <PressableWithoutFeedback
-                            onPress={props.onClose}
-                            style={[styles.touchableButtonImage]}
-                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                            accessibilityLabel={translate('common.close')}
-                        >
-                            <Icon src={Expensicons.Close} />
-                        </PressableWithoutFeedback>
-                    </Tooltip>
+                    {props.canDismissError && (
+                        <Tooltip text={translate('common.close')}>
+                            <PressableWithoutFeedback
+                                onPress={props.onClose}
+                                style={[styles.touchableButtonImage]}
+                                accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                                accessibilityLabel={translate('common.close')}
+                            >
+                                <Icon src={Expensicons.Close} />
+                            </PressableWithoutFeedback>
+                        </Tooltip>
+                    )}
                 </View>
             )}
         </View>

diff --git 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
@@ -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}
             >
                 <MenuItem
                     onPress={item.onPress}
@@ -286,13 +297,14 @@ function PaymentMethodList({
                     iconWidth={item.iconSize}
                     badgeText={shouldShowDefaultBadge(filteredPaymentMethods, item.isDefault) ? translate('paymentMethodList.defaultPaymentMethod') : null}
                     wrapperStyle={styles.paymentMethod}
-                    shouldShowRightIcon={shouldShowAssignedCards}
+                    shouldShowRightIcon={item.shouldShowRightIcon}
                     shouldShowSelectedState={shouldShowSelectedState}
                     isSelected={selectedMethodID === item.methodID}
+                    interactive={item.interactive}
                 />
             </OfflineWithFeedback>
         ),
-        [filteredPaymentMethods, translate, shouldShowAssignedCards, shouldShowSelectedState, selectedMethodID],
+        [filteredPaymentMethods, translate, shouldShowSelectedState, selectedMethodID],
     );
 
     return (