Join Community Sign Up

src/AppRoutes.tsx

@@ -78,6 +78,7 @@ import {
   SIGN_IN_FLOW,
   SIGN_UP_FLOW,
   CREATE_COMMUNITY_UNAUTHENTICATED_FLOW,
+  JOIN_COMMUNITY_UNAUTHENTICATED_FLOW,
   COMPLETE_STEP_FLOW_NAVIGATE_BACK,
   ADD_MY_STEP_FLOW,
   ADD_PERSON_STEP_FLOW,
@@ -138,6 +139,7 @@ import {
   VideoFullScreen,
   VIDEO_FULL_SCREEN,
 } from './containers/VideoFullScreen';
+import { JoinCommunityUnauthenticatedFlowNavigator } from './routes/groups/joinCommunityUnauthenticatedFlow';
 
 // Do custom animations between pages
 // import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
@@ -283,6 +285,7 @@ const screens = {
   [SIGN_IN_FLOW]: SignInFlowNavigator,
   [SIGN_UP_FLOW]: SignUpFlowNavigator,
   [CREATE_COMMUNITY_UNAUTHENTICATED_FLOW]: CreateCommunityUnauthenticatedFlowNavigator,
+  [JOIN_COMMUNITY_UNAUTHENTICATED_FLOW]: JoinCommunityUnauthenticatedFlowNavigator,
   [JOIN_BY_CODE_FLOW]: JoinByCodeFlowNavigator,
   [JOIN_BY_CODE_ONBOARDING_FLOW]: JoinByCodeOnboardingFlowNavigator,
   [ADD_SOMEONE_ONBOARDING_FLOW]: AddSomeoneOnboardingFlowNavigator,

src/containers/Auth/SignUpScreen/index.tsx

@@ -31,6 +31,7 @@ import styles from './styles';
 
 export const SIGNUP_TYPES = {
   CREATE_COMMUNITY: 'login/CREATE_COMMUNITY',
+  JOIN_COMMUNITY: 'login/JOIN_COMMUNITY',
   SETTINGS_MENU: 'login/SIDE_MENU',
 };
 
@@ -48,6 +49,11 @@ const headerContentOptions: {
     title: i18Next.t('loginOptions:createCommunityTitle'),
     description: i18Next.t('loginOptions:createCommunityDescription'),
   },
+  [SIGNUP_TYPES.JOIN_COMMUNITY]: {
+    image: PEOPLE,
+    title: i18Next.t('loginOptions:joinCommunityTitle'),
+    description: i18Next.t('loginOptions:joinCommunityDescription'),
+  },
 };
 
 const SignUpScreen = ({

src/containers/Groups/GroupsListScreen.tsx

@@ -22,6 +22,7 @@ import { resetScrollGroups } from '../../actions/swipe';
 import { ACTIONS, GLOBAL_COMMUNITY_ID } from '../../constants';
 import {
   CREATE_COMMUNITY_UNAUTHENTICATED_FLOW,
+  JOIN_COMMUNITY_UNAUTHENTICATED_FLOW,
   JOIN_BY_CODE_FLOW,
 } from '../../routes/constants';
 import { useRefreshing } from '../../utils/hooks/useRefreshing';
@@ -195,7 +196,13 @@ const GroupsListScreen = () => {
   };
 
   const join = () => {
-    dispatch(navigatePush(JOIN_BY_CODE_FLOW));
+    dispatch(
+      navigatePush(
+        isAnonymousUser
+          ? JOIN_COMMUNITY_UNAUTHENTICATED_FLOW
+          : JOIN_BY_CODE_FLOW,
+      ),
+    );
   };
 
   const create = () => {

src/containers/Groups/__tests__/GroupsListScreen.tsx

@@ -15,6 +15,7 @@ import { resetScrollGroups } from '../../../actions/swipe';
 import { ACTIONS } from '../../../constants';
 import {
   CREATE_COMMUNITY_UNAUTHENTICATED_FLOW,
+  JOIN_COMMUNITY_UNAUTHENTICATED_FLOW,
   JOIN_BY_CODE_FLOW,
 } from '../../../routes/constants';
 import {
@@ -194,10 +195,29 @@ describe('GroupsListScreen', () => {
       expect(navigatePush).toHaveBeenCalledWith(JOIN_BY_CODE_FLOW);
       expect(store.getActions()).toEqual([navigatePushResponse]);
     });
+
+    it('navigates to Upgrade Account Screen if not signed in', () => {
+      (useIsAnonymousUser as jest.Mock).mockReturnValue(true);
+
+      const { getByTestId, store } = renderWithContext(<GroupsListScreen />, {
+        initialState: {
+          ...initialState,
+        },
+      });
+
+      fireEvent.press(getByTestId('joinCommunity'));
+
+      expect(navigatePush).toHaveBeenCalledWith(
+        JOIN_COMMUNITY_UNAUTHENTICATED_FLOW,
+      );
+      expect(store.getActions()).toEqual([navigatePushResponse]);
+    });
   });
 
   describe('create community button press', () => {
     it('navigates to create community screen if signed', () => {
+      (useIsAnonymousUser as jest.Mock).mockReturnValue(false);
+
       const { getByTestId, store } = renderWithContext(<GroupsListScreen />, {
         initialState,
       });

src/containers/LandingScreen/__tests__/LandingScreen.tsx

@@ -7,7 +7,7 @@ import { navigatePush } from '../../../actions/navigation';
 import { startOnboarding } from '../../../actions/onboarding';
 import {
   FULL_ONBOARDING_FLOW,
-  JOIN_BY_CODE_ONBOARDING_FLOW,
+  JOIN_COMMUNITY_UNAUTHENTICATED_FLOW,
   SIGN_IN_FLOW,
 } from '../../../routes/constants';
 import { useAnalytics } from '../../../utils/hooks/useAnalytics';
@@ -54,7 +54,9 @@ describe('a button is clicked', () => {
     fireEvent.press(getByTestId('communityCodeButton'));
 
     expect(startOnboarding).toHaveBeenCalledWith();
-    expect(navigatePush).toHaveBeenCalledWith(JOIN_BY_CODE_ONBOARDING_FLOW);
+    expect(navigatePush).toHaveBeenCalledWith(
+      JOIN_COMMUNITY_UNAUTHENTICATED_FLOW,
+    );
     expect(store.getActions()).toEqual([
       startOnboardingResult,
       navigatePushResult,

src/containers/LandingScreen/index.tsx

@@ -9,7 +9,7 @@ import { Button } from '../../components/common';
 import { useAnalytics } from '../../utils/hooks/useAnalytics';
 import {
   FULL_ONBOARDING_FLOW,
-  JOIN_BY_CODE_ONBOARDING_FLOW,
+  JOIN_COMMUNITY_UNAUTHENTICATED_FLOW,
   SIGN_IN_FLOW,
 } from '../../routes/constants';
 import { startOnboarding } from '../../actions/onboarding';
@@ -40,7 +40,7 @@ const LandingScreen = () => {
 
   const communityCode = () => {
     dispatch(startOnboarding());
-    dispatch(navigatePush(JOIN_BY_CODE_ONBOARDING_FLOW));
+    dispatch(navigatePush(JOIN_COMMUNITY_UNAUTHENTICATED_FLOW));
   };
 
   const signIn = () => {

src/i18n/locales/en-US.js

@@ -176,6 +176,8 @@ export default {
     member: 'Already a Member?',
     createCommunityTitle: 'Create a Community',
     createCommunityDescription: 'Sign Up to create a MissionHub community.',
+    joinCommunityTitle: 'Join a Community',
+    joinCommunityDescription: 'Sign Up to join a MissionHub community.',
   },
   keyLogin: {
     emailLabel: 'Email',

src/routes/constants.ts

@@ -9,6 +9,8 @@ export const SIGN_IN_FLOW = 'nav/SIGN_IN_FLOW';
 export const SIGN_UP_FLOW = 'nav/SIGN_UP_FLOW';
 export const CREATE_COMMUNITY_UNAUTHENTICATED_FLOW =
   'nav/CREATE_COMMUNITY_UNAUTHENTICATED_FLOW';
+export const JOIN_COMMUNITY_UNAUTHENTICATED_FLOW =
+  'nav/JOIN_COMMUNITY_UNAUTHENTICATED_FLOW';
 export const JOIN_BY_CODE_FLOW = 'nav/JOIN_BY_CODE_FLOW';
 export const JOIN_BY_CODE_ONBOARDING_FLOW = 'nav/JOIN_BY_CODE_ONBOARDING_FLOW';
 export const ADD_SOMEONE_ONBOARDING_FLOW = 'nav/ADD_SOMEONE_ONBOARDING_FLOW';

src/routes/groups/joinCommunityUnauthenticatedFlow.ts

@@ -0,0 +1,29 @@
+import { createStackNavigator } from 'react-navigation-stack';
+
+import { navigateNestedReset } from '../../actions/navigation';
+import { COMMUNITIES_TAB, MAIN_TABS } from '../../constants';
+import { JOIN_GROUP_SCREEN } from '../../containers/Groups/JoinGroupScreen';
+import { authFlowGenerator } from '../auth/authFlowGenerator';
+import { SIGNUP_TYPES } from '../../containers/Auth/SignUpScreen';
+
+const JoinCommunityUnauthenticatedFlowScreens = authFlowGenerator({
+  completeAction: navigateNestedReset([
+    {
+      routeName: MAIN_TABS,
+      tabName: COMMUNITIES_TAB,
+    },
+    { routeName: JOIN_GROUP_SCREEN },
+  ]),
+  includeSignUp: true,
+  // @ts-ignore
+  signUpType: SIGNUP_TYPES.JOIN_COMMUNITY,
+});
+
+export const JoinCommunityUnauthenticatedFlowNavigator = createStackNavigator(
+  JoinCommunityUnauthenticatedFlowScreens,
+  {
+    defaultNavigationOptions: {
+      header: null,
+    },
+  },
+);