Merge pull request #171 from cnguyen812/feat/filter-invalid-cards

Feat/filter invalid cards

src/constants/config.card.ts

@@ -17,6 +17,13 @@ import {CardProvider} from './card';
 
 type ProviderConfigType = {
   [k in CardProvider]: {
+    /**
+     * Whether to display cards from this provider in the app. If false, any cards fetched from this provider will not be persisted in the store.
+     */
+    displayInApp: boolean;
+    /**
+     * The year BitPay started using this provider. Used as a max date range to fetch transactions.
+     */
     programStartYear: number;
     /**
      * Maximum number of days ago that we can query for transaction history.
@@ -50,6 +57,7 @@ export const CARD_WIDTH = 324;
 
 export const ProviderConfig: ProviderConfigType = {
   galileo: {
+    displayInApp: true,
     programStartYear: 2020,
     maxHistoryDateRange: 1095,
     groupEnabled: true,
@@ -96,6 +104,7 @@ export const ProviderConfig: ProviderConfigType = {
     },
   },
   firstView: {
+    displayInApp: false,
     programStartYear: 2016,
     maxHistoryDateRange: 30,
     groupEnabled: false,

src/navigation/card/components/CardDashboard.tsx

@@ -226,8 +226,8 @@ const CardDashboard: React.FC<CardDashboardProps> = props => {
     ({CARD}) => CARD.settledTransactions[activeCard.id],
   );
   // only auto-initialize once per mount
-  const [autoInitState, setAutoInitState] = useState(
-    {} as {[k: string]: boolean},
+  const [autoInitState, setAutoInitState] = useState<Record<string, boolean>>(
+    {},
   );
   const uninitializedId = autoInitState[activeCard.id] ? null : activeCard.id;
   const isLoadingInitial = fetchOverviewStatus === 'loading' && !pageData;

src/store/card/card.reducer.ts

@@ -1,5 +1,6 @@
 import {Network} from '../../constants';
-import {CardProvider} from '../../constants/card';
+import {ProviderConfig} from '../../constants/config.card';
+import {isInvalidCard} from '../../utils/card';
 import {
   BitPayIdActionType,
   BitPayIdActionTypes,
@@ -145,15 +146,17 @@ export const cardReducer = (
         {} as {[id: string]: number},
       );
 
-      const filterFirstViewCards = (action.payload.cards || []).filter(
-        c => c.provider !== CardProvider.firstView,
-      );
+      const filteredCards = (action.payload.cards || []).filter(card => {
+        const options = ProviderConfig[card.provider];
+
+        return options.displayInApp && !isInvalidCard(card);
+      });
 
       return {
         ...state,
         cards: {
           ...state.cards,
-          [action.payload.network]: filterFirstViewCards,
+          [action.payload.network]: filteredCards,
         },
         balances: {
           ...state.balances,
@@ -162,16 +165,18 @@ export const cardReducer = (
       };
     }
     case CardActionTypes.SUCCESS_FETCH_CARDS: {
-      const filterFirstViewCards = (action.payload.cards || []).filter(
-        c => c.provider !== CardProvider.firstView,
-      );
+      const filteredCards = (action.payload.cards || []).filter(card => {
+        const options = ProviderConfig[card.provider];
+
+        return options.displayInApp && !isInvalidCard(card);
+      });
 
       return {
         ...state,
         fetchCardsStatus: 'success',
         cards: {
           ...state.cards,
-          [action.payload.network]: filterFirstViewCards,
+          [action.payload.network]: filteredCards,
         },
       };
     }

src/utils/card.ts

@@ -20,6 +20,20 @@ export const getCardCurrencyColorPalette = (
   return config.palette;
 };
 
+const invalidStatusMap: Record<string, boolean> = {
+  lost: true,
+  stolen: true,
+  canceled: true,
+};
+/**
+ * Checks whether the card should be persisted in the app based on disabled flag and card status.
+ * @param card Card to check.
+ * @returns true if card is disabled or lost/stolen/canceledd
+ */
+export const isInvalidCard = (card: Card) => {
+  return card?.disabled || invalidStatusMap[card?.status] || false;
+};
+
 export const isActivationRequired = (card: Card) => {
   const {provider} = card;