Update card and giftcard deeplinks

cnguyen812 · gabrielbazan7 · commit 24bf639027c4 · 2023-07-12T16:57:29.000+02:00
diff --git a/src/navigation/card/components/CardSettingsList.tsx b/src/navigation/card/components/CardSettingsList.tsx
@@ -30,7 +30,7 @@ import {ToggleSpinnerState} from './ToggleSpinner';
 interface SettingsListProps {
   card: Card;
   orderPhysical?: boolean;
-  navigation: StackNavigationProp<CardStackParamList, 'Settings'>;
+  navigation: StackNavigationProp<CardStackParamList, CardScreens.SETTINGS>;
 }
 
 const LINKS: {
diff --git a/src/navigation/card/screens/CardPairingScreen.tsx b/src/navigation/card/screens/CardPairingScreen.tsx
@@ -1,7 +1,7 @@
-import {StackActions, useNavigation} from '@react-navigation/native';
+import {StackActions} from '@react-navigation/native';
 import {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback} from 'react';
-import {RootStacks} from '../../../Root';
+import {RootStacks, navigationRef} from '../../../Root';
 import {CardActions} from '../../../store/card';
 import {VirtualDesignCurrency} from '../../../store/card/card.types';
 import {incomingData} from '../../../store/scan/scan.effects';
@@ -25,20 +25,10 @@ const CardPairingScreen: React.FC<
 > = props => {
   const {route} = props;
   const {secret, code, paymentUrl, dashboardRedirect} = route.params || {};
-  const navigation = useNavigation();
   const dispatch = useAppDispatch();
 
   const goToHomeTab = () => {
-    const navState = navigation.getState();
-
-    // @ts-ignore
-    if (navState.routeNames.some(name => name === 'Home')) {
-      navigation.navigate('Tabs', {
-        screen: 'Home',
-      });
-    } else {
-      navigation.dispatch(StackActions.replace('Tabs', {screen: 'Home'}));
-    }
+    navigationRef.dispatch(StackActions.replace('Tabs', {screen: 'Home'}));
   };
 
   const onSuccess = useCallback(() => {
@@ -58,7 +48,7 @@ const CardPairingScreen: React.FC<
     goToHomeTab();
 
     if (paymentUrl) {
-      navigation.dispatch(StackActions.replace('Tabs', {screen: 'Home'}));
+      navigationRef.dispatch(StackActions.replace('Tabs', {screen: 'Home'}));
       //  Reconstructing the url since paymentUrl from deeplink is not in the right format
       if (paymentUrl.includes('bitpay.com')) {
         let url = 'https://';
@@ -75,14 +65,15 @@ const CardPairingScreen: React.FC<
 
   const onComplete = useCallback(() => {
     if (!paymentUrl) {
-      const navState = navigation.getState();
+      const navState = navigationRef.getState();
+
       // @ts-ignore
-      if (navState.routeNames.some(name => name === TabsScreens.CARD)) {
-        navigation.navigate(RootStacks.TABS, {
+      if (navState.routeNames.some(name => name === RootStacks.TABS)) {
+        navigationRef.navigate(RootStacks.TABS, {
           screen: TabsScreens.CARD,
         });
       } else {
-        navigation.dispatch(StackActions.replace(RootStacks.TABS, {screen: TabsScreens.CARD}));
+        navigationRef.dispatch(StackActions.replace(RootStacks.TABS, {screen: TabsScreens.CARD}));
       }
     }
   }, []);
diff --git a/src/navigation/card/screens/CardSettings.tsx b/src/navigation/card/screens/CardSettings.tsx
@@ -20,15 +20,15 @@ import {Card} from '../../../store/card/card.models';
 import {selectCardGroups} from '../../../store/card/card.selectors';
 import {useAppSelector} from '../../../utils/hooks';
 import {TabsScreens} from '../../tabs/TabsStack';
-import {CardStackParamList} from '../CardStack';
+import {CardScreens, CardStackParamList} from '../CardStack';
 import SettingsList from '../components/CardSettingsList';
 import SettingsSlide from '../components/CardSettingsSlide';
 
 export type CardSettingsParamList = {
   id: string;
 };
 
-type CardSettingsProps = StackScreenProps<CardStackParamList, 'Settings'>;
+type CardSettingsProps = StackScreenProps<CardStackParamList, CardScreens.SETTINGS>;
 
 const CardSettingsContainer = styled.View`
   padding: 0 ${ScreenGutter} ${ScreenGutter};
diff --git a/src/navigation/tabs/shop/gift-card/GiftCardDeeplink.tsx b/src/navigation/tabs/shop/gift-card/GiftCardDeeplink.tsx
@@ -1,9 +1,11 @@
 import {StackScreenProps} from '@react-navigation/stack';
 import React, {useEffect, useRef} from 'react';
-import {RootStackParamList} from '../../../../Root';
+import {RootStackParamList, RootStacks} from '../../../../Root';
 import {Analytics} from '../../../../store/analytics/analytics.effects';
 import {selectAvailableGiftCards} from '../../../../store/shop/shop.selectors';
 import {useAppDispatch, useAppSelector} from '../../../../utils/hooks';
+import {TabsScreens} from '../../TabsStack';
+import {GiftCardScreens} from './GiftCardStack';
 
 export type GiftCardDeeplinkScreenParamList =
   | {
@@ -16,7 +18,7 @@ export type GiftCardDeeplinkScreenParamList =
  * Otherwise we should configure the deeplink directly.
  */
 const GiftCardDeeplinkScreen: React.FC<
-  StackScreenProps<RootStackParamList, 'GiftCardDeeplink'>
+  StackScreenProps<RootStackParamList, RootStacks.GIFT_CARD_DEEPLINK>
 > = ({navigation, route}) => {
   const merchantName = ((route.params || {}).merchant || '').toLowerCase();
   const availableGiftCards = useAppSelector(selectAvailableGiftCards);
@@ -34,18 +36,15 @@ const GiftCardDeeplinkScreen: React.FC<
       }),
     );
     if (targetedGiftCardRef.current) {
-      navigation.replace('GiftCard', {
-        screen: 'BuyGiftCard',
+      navigation.replace(RootStacks.GIFT_CARD, {
+        screen: GiftCardScreens.BUY_GIFT_CARD,
         params: {
           cardConfig: targetedGiftCardRef.current,
         },
       });
     } else {
-      navigation.replace('Tabs', {
-        screen: 'Shop',
-        params: {
-          screen: 'Home',
-        },
+      navigation.replace(RootStacks.TABS, {
+        screen: TabsScreens.SHOP,
       });
     }
   }, [navigation]);
diff --git a/src/store/app/app.effects.ts b/src/store/app/app.effects.ts
@@ -81,10 +81,9 @@ import {
   getAvailableGiftCards,
   getCategoriesWithIntegrations,
 } from '../shop/shop.selectors';
-import {SettingsScreens} from '../../navigation/tabs/settings/SettingsStack';
 import {MerchantScreens} from '../../navigation/tabs/shop/merchant/MerchantStack';
 import {ShopTabs} from '../../navigation/tabs/shop/ShopHome';
-import {ShopScreens} from '../../navigation/tabs/shop/ShopStack';
+import {ShopScreens} from '../../navigation/shop/ShopStack';
 import QuickActions, {ShortcutItem} from 'react-native-quick-actions';
 import {ShortcutList} from '../../constants/shortcuts';
 import {goToBuyCrypto} from '../buy-crypto/buy-crypto.effects';
@@ -970,8 +969,8 @@ export const incomingShopLink =
           },
         });
       } else {
-        navigationRef.navigate('Shop', {
-          screen: ShopScreens.HOME,
+        navigationRef.navigate(RootStacks.TABS, {
+          screen: TabsScreens.SHOP,
           params: {
             screen: ShopTabs.GIFT_CARDS,
           },
@@ -1001,8 +1000,8 @@ export const incomingShopLink =
           },
         });
       } else {
-        navigationRef.navigate('Shop', {
-          screen: ShopScreens.HOME,
+        navigationRef.navigate(RootStacks.TABS, {
+          screen: TabsScreens.SHOP,
           params: {
             screen: ShopTabs.SHOP_ONLINE,
           },
@@ -1062,10 +1061,7 @@ export const incomingLink =
         navigationRef.navigate(RootStacks.TABS, {
           screen: TabsScreens.SETTINGS,
           params: {
-            screen: SettingsScreens.Root,
-            params: {
-              redirectTo: redirectTo as any,
-            },
+            redirectTo: redirectTo as any,
           },
         });
       };
@@ -1078,6 +1074,15 @@ export const incomingLink =
           });
         };
       }
+    } else if (pathSegments[0] === 'wallet-card') {
+      const cardPath = pathSegments[1];
+
+      if (cardPath === 'pairing') {
+        navigationRef.navigate(RootStacks.CARD, {
+          screen: CardScreens.PAIRING,
+          params,
+        });
+      }
     } else if (pathSegments[0] === 'card') {
       const cardPath = pathSegments[1];
       const createCardHandler = (cb: (cards: Card[]) => void) => {
@@ -1090,9 +1095,6 @@ export const incomingLink =
           } else {
             navigationRef.navigate(RootStacks.TABS, {
               screen: TabsScreens.CARD,
-              params: {
-                screen: CardScreens.HOME,
-              },
             });
           }
         };
@@ -1109,27 +1111,21 @@ export const incomingLink =
         });
       } else if (cardPath === 'offers') {
         handler = createCardHandler(cards => {
-          navigationRef.navigate(RootStacks.TABS, {
-            screen: TabsScreens.CARD,
+          navigationRef.navigate(RootStacks.CARD, {
+            screen: CardScreens.SETTINGS,
             params: {
-              screen: CardScreens.SETTINGS,
-              params: {
-                id: cards[0].id,
-              },
+              id: cards[0].id,
             },
           });
 
           dispatch(CardEffects.startOpenDosh());
         });
       } else if (cardPath === 'referral') {
         handler = createCardHandler(cards => {
-          navigationRef.navigate(RootStacks.TABS, {
-            screen: TabsScreens.CARD,
+          navigationRef.navigate(RootStacks.CARD, {
+            screen: CardScreens.REFERRAL,
             params: {
-              screen: CardScreens.REFERRAL,
-              params: {
-                card: cards[0],
-              },
+              card: cards[0],
             },
           });
         });
diff --git a/src/utils/hooks/useDeeplinks.ts b/src/utils/hooks/useDeeplinks.ts
@@ -2,7 +2,6 @@ import {
   getActionFromState,
   getStateFromPath,
   LinkingOptions,
-  PathConfig,
 } from '@react-navigation/native';
 import {useMemo, useRef} from 'react';
 import {Linking} from 'react-native';
@@ -14,12 +13,10 @@ import {
   APP_UNIVERSAL_LINK_DOMAINS,
 } from '../../constants/config';
 import {BitpayIdScreens} from '../../navigation/bitpay-id/BitpayIdStack';
-import {CardScreens} from '../../navigation/card/CardStack';
 import {BuyCryptoScreens} from '../../navigation/services/buy-crypto/BuyCryptoStack';
 import {SwapCryptoScreens} from '../../navigation/services/swap-crypto/SwapCryptoStack';
 import {CoinbaseScreens} from '../../navigation/coinbase/CoinbaseStack';
 import {navigationRef, RootStackParamList, RootStacks} from '../../Root';
-import {TabsScreens, TabsStackParamList} from '../../navigation/tabs/TabsStack';
 import {incomingData} from '../../store/scan/scan.effects';
 import {showBlur} from '../../store/app/app.actions';
 import {incomingLink} from '../../store/app/app.effects';
@@ -40,17 +37,6 @@ const getLinkingConfig = (): LinkingOptions<RootStackParamList>['config'] => ({
         [BitpayIdScreens.RECEIVE_SETTINGS]: 'receive-settings',
       },
     },
-    [RootStacks.TABS]: {
-      screens: {
-        [TabsScreens.CARD]: {
-          path: 'wallet-card',
-          initialRouteName: CardScreens.HOME,
-          screens: {
-            [CardScreens.PAIRING]: 'pairing',
-          },
-        },
-      },
-    } as PathConfig<TabsStackParamList>,
     [RootStacks.GIFT_CARD_DEEPLINK]: 'giftcard',
     [RootStacks.BUY_CRYPTO]: {
       screens: {

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ import {ToggleSpinnerState} from './ToggleSpinner';`
`30`	`30`	`interface SettingsListProps {`
`31`	`31`	`card: Card;`
`32`	`32`	`orderPhysical?: boolean;`
`33`		`- navigation: StackNavigationProp<CardStackParamList, 'Settings'>;`
	`33`	`+ navigation: StackNavigationProp<CardStackParamList, CardScreens.SETTINGS>;`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`const LINKS: {`