fix misc gift card and bill pay bugs

src/api/user/user.queries.ts

@@ -26,6 +26,8 @@ export const basicInfoFields = `
 export const basicInfoExternalFields = `
   address
   dateOfBirth
+  legalFamilyName
+  legalGivenName
 `;
 
 /**

src/lib/gift-cards/gift-card.ts

@@ -306,6 +306,17 @@ export function getGiftCardIcons(supportedCardMap: CardConfigMap) {
   );
 }
 
+export function isGiftCardDisplayable(
+  giftCard: GiftCard,
+  supportedGiftCardMap: CardConfigMap = {},
+) {
+  return (
+    supportedGiftCardMap[giftCard.name] &&
+    (['PENDING', 'SUCCESS', 'SYNCED'].includes(giftCard.status) ||
+      redemptionFailuresLessThanADayOld(giftCard))
+  );
+}
+
 export function generateGiftCardPrintHtml(
   cardConfig: CardConfig,
   giftCard: GiftCard,

src/navigation/tabs/shop/ShopHome.tsx

@@ -13,6 +13,7 @@ import GiftCardCatalog from './components/GiftCardCatalog';
 import {
   getGiftCardConfigList,
   getGiftCardCurations,
+  isGiftCardDisplayable,
 } from '../../../lib/gift-cards/gift-card';
 import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
 import {ScreenOptions} from '../../../styles/tabNavigator';
@@ -73,17 +74,16 @@ const ShopInnerContainer = styled.View`
 const getGiftCardsScrollViewHeight = (
   availableGiftCards: CardConfig[],
   numSelectedGiftCards: number,
-  purchasedCards: GiftCard[],
+  activeGiftCards: GiftCard[],
   curations: any,
 ) => {
-  const activeGiftCards = purchasedCards.filter(giftCard => !giftCard.archived);
-  const purchasedBrandsHeight = activeGiftCards.length * 68 + 260;
+  const activeGiftCardsHeight = activeGiftCards.length * 68 + 260;
   const curationsHeight = curations.length * 320;
   const giftCardItemHeight = 87;
   const giftCardsBottomPadding = 100;
   const searchBarHeight = 150;
   const staticGiftCardScrollViewHeight =
-    purchasedBrandsHeight + curationsHeight + searchBarHeight;
+    activeGiftCardsHeight + curationsHeight + searchBarHeight;
   const giftCardListHeight =
     (numSelectedGiftCards || availableGiftCards.length) * giftCardItemHeight +
     giftCardsBottomPadding;
@@ -106,15 +106,15 @@ const getScrollViewHeight = (
   integrationsCategories: Category[],
   availableGiftCards: CardConfig[],
   numSelectedGiftCards: number,
-  purchasedCards: GiftCard[],
+  activeGiftCards: GiftCard[],
   curations: any,
   billPayAccounts: BillPayAccount[],
 ) => {
   return activeTab === ShopTabs.GIFT_CARDS
     ? getGiftCardsScrollViewHeight(
         availableGiftCards,
         numSelectedGiftCards,
-        purchasedCards,
+        activeGiftCards,
         curations,
       )
     : activeTab === ShopTabs.BILLS
@@ -137,8 +137,11 @@ const ShopHome: React.FC<
     ({SHOP}) => SHOP.billPayAccounts[APP_NETWORK],
   ) as BillPayAccount[];
   const purchasedGiftCards = useMemo(
-    () => giftCards.filter(giftCard => giftCard.status !== 'UNREDEEMED'),
-    [giftCards],
+    () =>
+      giftCards.filter(giftCard =>
+        isGiftCardDisplayable(giftCard, supportedCardMap),
+      ),
+    [giftCards, supportedCardMap],
   );
   const activeGiftCards = useMemo(
     () => purchasedGiftCards.filter(giftCard => !giftCard.archived),
@@ -216,6 +219,7 @@ const ShopHome: React.FC<
         scrollViewRef={scrollViewRef}
         availableGiftCards={availableGiftCards}
         supportedGiftCards={supportedGiftCards}
+        supportedGiftCardMap={supportedCardMap}
         curations={curations}
         categories={categoriesWithGiftCards}
         onSelectedGiftCardsChange={newNumSelectedGiftCards =>
@@ -224,7 +228,9 @@ const ShopHome: React.FC<
       />
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [availableGiftCards, categories, curations].map(obj => JSON.stringify(obj)),
+    [availableGiftCards, categories, curations, supportedCardMap].map(obj =>
+      JSON.stringify(obj),
+    ),
   );
 
   const memoizedShopOnline = useCallback(
@@ -285,7 +291,6 @@ const ShopHome: React.FC<
   ]);
 
   useFocusEffect(() => {
-    dispatch(Analytics.track('Viewed Shop Tab', undefined));
     if (!initialSyncComplete) {
       dispatch(ShopEffects.startSyncGiftCards());
       dispatch(ShopEffects.startGetBillPayAccounts()).catch(_ => {});

src/navigation/tabs/shop/bill/components/BillStatus.tsx

@@ -85,7 +85,7 @@ const statusFields = {
   sent: {
     backgroundColor: '#CBF3E8',
     color: '#0B754A',
-    text: 'Completed',
+    text: 'Sent',
     darkTheme: {
       backgroundColor: '#076A46',
       color: '#4FEFC4',

src/navigation/tabs/shop/bill/components/PaymentList.tsx

@@ -1,5 +1,7 @@
 import React, {useCallback, useEffect, useState} from 'react';
 import styled from 'styled-components/native';
+import {useTheme} from 'styled-components/native';
+import {useTranslation} from 'react-i18next';
 import {ActiveOpacity} from '../../../../../components/styled/Containers';
 import NoPaymentsSvg from '../../../../../../assets/img/bills/no-payments.svg';
 import BillItem from './BillItem';
@@ -9,11 +11,23 @@ import {
   BillPayment,
 } from '../../../../../store/shop/shop.models';
 import {Paragraph} from '../../../../../components/styled/Text';
-import {LightBlack, Slate30} from '../../../../../styles/colors';
-import {FlatList, TouchableOpacity} from 'react-native';
+import {
+  LightBlack,
+  Slate30,
+  SlateDark,
+  White,
+} from '../../../../../styles/colors';
+import {
+  FlatList,
+  RefreshControl,
+  ScrollView,
+  TouchableOpacity,
+} from 'react-native';
 import {useAppDispatch, useAppSelector} from '../../../../../utils/hooks';
 import {APP_NETWORK} from '../../../../../constants/config';
 import {ShopEffects} from '../../../../../store/shop';
+import {AppActions} from '../../../../../store/app';
+import {CustomErrorMessage} from '../../../../wallet/components/ErrorMessages';
 
 const ZeroStateContainer = styled.View`
   border: 1px solid ${({theme}) => (theme.dark ? LightBlack : Slate30)};
@@ -44,11 +58,14 @@ export const PaymentList = ({
   onPress: (account: BillPayAccount, payment: BillPayment) => void;
 }) => {
   const dispatch = useAppDispatch();
+  const theme = useTheme();
+  const {t} = useTranslation();
   const persistedBillPayPayments = useAppSelector(
     ({SHOP}) => SHOP.billPayPayments[APP_NETWORK],
   ) as BillPayPayment[];
   const billPayPayments = persistedBillPayPayments.sort(sortByDescendingDate);
   const [payments, setPayments] = useState(billPayPayments);
+  const [refreshing, setRefreshing] = useState(false);
   const [noMorePayments, setNoMorePayments] = useState(false);
   const billPayPaymentIds = billPayPayments.map(payment => payment.id);
   const allPayments = payments.reduce(
@@ -97,6 +114,37 @@ export const PaymentList = ({
     [accounts, onPress, variation],
   );
 
+  const getPayments = useCallback(async () => {
+    try {
+      const latestBillPayPayments = await dispatch(
+        ShopEffects.startFindBillPayments(
+          account ? {partnerAccountId: account.id} : undefined,
+        ),
+      );
+      const latestUniqueBillPayments = latestBillPayPayments.filter(
+        billPayPayment => !billPayPaymentIds.includes(billPayPayment.id),
+      );
+      setPayments(
+        [...billPayPayments, ...latestUniqueBillPayments].sort(
+          sortByDescendingDate,
+        ),
+      );
+    } catch (err: any) {
+      dispatch(
+        AppActions.showBottomNotificationModal(
+          CustomErrorMessage({
+            title: t('Unable to fetch payments'),
+            errMsg:
+              err?.message ||
+              t(
+                'Unable to refresh bill payment history. Please try again later.',
+              ),
+          }),
+        ),
+      );
+    }
+  }, [account, billPayPaymentIds, billPayPayments, dispatch, t]);
+
   const fetchMore = async () => {
     const lastPayment = displayablePayments[displayablePayments.length - 1];
     const lastPaymentDate = lastPayment.createdOn;
@@ -124,30 +172,28 @@ export const PaymentList = ({
   };
 
   useEffect(() => {
-    const getPayments = async () => {
-      const latestBillPayPayments = await dispatch(
-        ShopEffects.startFindBillPayments(
-          account ? {partnerAccountId: account.id} : undefined,
-        ),
-      );
-      const latestUniqueBillPayments = latestBillPayPayments.filter(
-        billPayPayment => !billPayPaymentIds.includes(billPayPayment.id),
-      );
-      setPayments(
-        [...billPayPayments, ...latestUniqueBillPayments].sort(
-          sortByDescendingDate,
-        ),
-      );
-    };
     getPayments();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const Refresher = (
+    <RefreshControl
+      tintColor={theme.dark ? White : SlateDark}
+      refreshing={refreshing}
+      onRefresh={async () => {
+        setRefreshing(true);
+        await getPayments();
+        setRefreshing(false);
+      }}
+    />
+  );
+
   return (
     <>
       {displayablePayments.length ? (
         <>
           <FlatList
+            refreshControl={Refresher}
             contentContainerStyle={{paddingBottom: 200}}
             data={displayablePayments}
             keyExtractor={keyExtractor}
@@ -157,10 +203,12 @@ export const PaymentList = ({
           />
         </>
       ) : (
-        <ZeroStateContainer>
-          <NoPaymentsIcon />
-          <Paragraph>No payments yet</Paragraph>
-        </ZeroStateContainer>
+        <ScrollView refreshControl={Refresher}>
+          <ZeroStateContainer>
+            <NoPaymentsIcon />
+            <Paragraph>No payments yet</Paragraph>
+          </ZeroStateContainer>
+        </ScrollView>
       )}
     </>
   );