[TMA 472] Added option to be added to Taggs wait list (#168)

* Added screens to add to waitlist and a page to display on success of the same

* Incorporated small comment

15 files changed, 506 insertions, 8 deletions

diff --git a/src/assets/icons/celebration-logo.svg b/src/assets/icons/celebration-logo.svg
new file mode 100644
index 00000000..5e4e89a0
--- /dev/null
+++ b/src/assets/icons/celebration-logo.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 792"><defs><style>.cls-1,.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:16px;}.cls-1{stroke-linecap:round;}</style></defs><path class="cls-1" d="M204.9,167.55,28.36,646.4S1.75,738.3,98.49,728.63l474-241.84s12.09-65.3-166.87-208c0,0-128.76-110.7-167.1-104.59s-.72,56.67-.72,56.67"/><path class="cls-1" d="M229.34,306.39S331,523.27,447.9,550.36"/><path class="cls-1" d="M253.14,60.8S384.68,150,315.57,321.65"/><line class="cls-1" x1="360.41" y1="346.18" x2="427.04" y2="228.01"/><line class="cls-1" x1="427.04" y1="339.49" x2="624.4" y2="216.5"/><path class="cls-1" d="M460.48,377.39s165-42.71,251.94,19.89"/><path class="cls-1" d="M509.83,448.45s181.48,37.33,143.76,85.09-68.67-73.61-23.17-88S809.22,484.4,768,513.07s-61.64-91.86-25.16-106.5"/><path class="cls-1" d="M102.2,292.31s61.68-84.89,0-93.63S2.53,214.54,42.88,161.89s57-50.28,11.87-55-9.49-64.09-9.49-64.09"/><rect class="cls-2" x="332.02" y="88.01" width="41.09" height="41.09" rx="7.51" transform="translate(204.55 -229.35) rotate(49.23)"/><rect class="cls-2" x="540.13" y="88.01" width="41.09" height="41.09" rx="7.51" transform="translate(276.77 -386.97) rotate(49.23)"/><rect class="cls-2" x="439.94" y="157.42" width="41.09" height="41.09" rx="7.51" transform="translate(518.03 -312.35) rotate(75.56)"/><rect class="cls-2" x="170.83" y="88.01" width="41.09" height="41.09" rx="7.51" transform="translate(148.62 -107.27) rotate(49.23)"/><rect class="cls-2" x="594.88" y="556.9" width="41.09" height="41.09" rx="7.51" transform="translate(250.85 -183.66) rotate(21.23)"/><rect class="cls-2" x="464.79" y="561.95" width="41.09" height="41.09" rx="7.51" transform="translate(686.08 -148.64) rotate(55.15)"/><rect class="cls-2" x="57.36" y="386.02" width="41.09" height="41.09" rx="7.51" transform="translate(275.76 42.94) rotate(39.4)"/><path class="cls-1" d="M128.59,421.33s31.27,145.46,170.25,203"/><path class="cls-1" d="M77.91,544.6s9.62,149.81,65.73,159.48"/></svg>
\ No newline at end of file
diff --git a/src/components/onboarding/TaggBigInput.tsx b/src/components/onboarding/TaggBigInput.tsx
index ba965465..4e8e1ef7 100644
--- a/src/components/onboarding/TaggBigInput.tsx
+++ b/src/components/onboarding/TaggBigInput.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {View, TextInput, StyleSheet, TextInputProps} from 'react-native';
 import * as Animatable from 'react-native-animatable';
+import {TAGG_LIGHT_PURPLE} from '../../constants';
 
 interface TaggBigInputProps extends TextInputProps {
   valid?: boolean;
@@ -55,7 +56,7 @@ const styles = StyleSheet.create({
   warning: {
     fontSize: 14,
     marginTop: 5,
-    color: '#f4ddff',
+    color: TAGG_LIGHT_PURPLE,
     maxWidth: 350,
     textAlign: 'center',
   },
diff --git a/src/components/onboarding/TaggInput.tsx b/src/components/onboarding/TaggInput.tsx
index 12d99325..405564ab 100644
--- a/src/components/onboarding/TaggInput.tsx
+++ b/src/components/onboarding/TaggInput.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {View, TextInput, StyleSheet, TextInputProps} from 'react-native';
 import * as Animatable from 'react-native-animatable';
+import {TAGG_LIGHT_PURPLE} from '../../constants';
 
 interface TaggInputProps extends TextInputProps {
   valid?: boolean;
@@ -52,7 +53,7 @@ const styles = StyleSheet.create({
   warning: {
     fontSize: 14,
     marginTop: 5,
-    color: '#f4ddff',
+    color: TAGG_LIGHT_PURPLE,
     maxWidth: 350,
     textAlign: 'center',
   },
diff --git a/src/components/onboarding/TermsAndConditionsText.tsx b/src/components/onboarding/TermsAndConditionsText.tsx
index 39450667..2102d613 100644
--- a/src/components/onboarding/TermsAndConditionsText.tsx
+++ b/src/components/onboarding/TermsAndConditionsText.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import {StyleSheet, Text} from 'react-native';
+import {Linking, StyleSheet, Text} from 'react-native';
+import {TAGG_WEBSITE} from '../../constants';
 
 const TermsAndConditionsText: React.FC = () => {
   const textWithBulletPoint = (data: string, style: object) => {
@@ -550,8 +551,14 @@ const TermsAndConditionsText: React.FC = () => {
         By email: <Text style={styles.link}>support@tagg.id</Text>
       </Text>
       <Text style={styles.paraLeftAlign}>
-        By visiting this page on our website:{' '}
-        <Text style={styles.link}>https://www.tagg.id/</Text>
+        By visiting this page on our{' '}
+        <Text
+          style={styles.link}
+          onPress={() => {
+            Linking.openURL(TAGG_WEBSITE + 'terms-and-conditions/');
+          }}>
+          website
+        </Text>
       </Text>
     </React.Fragment>
   );
diff --git a/src/constants/api.ts b/src/constants/api.ts
index 3b2289fd..639bc8f8 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -27,6 +27,7 @@ export const BLOCK_USER_ENDPOINT: string = API_URL + 'block/';
 export const PASSWORD_RESET_ENDPOINT: string = API_URL + 'password-reset/';
 export const MOMENT_CATEGORY_ENDPOINT: string = API_URL + 'moment-category/';
 export const NOTIFICATIONS_ENDPOINT: string = API_URL + 'notifications/';
+export const WAITLIST_USER_ENDPOINT: string = API_URL + 'waitlist-user/';
 
 // Register as FCM device
 export const FCM_ENDPOINT: string = API_URL + 'fcm/';
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index 8d8b7dfe..90d70724 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -60,6 +60,7 @@ export const YOUTUBE_FONT_COLOR: string = '#FCA4A4';
 
 export const TAGG_DARK_BLUE = '#4E699C';
 export const TAGG_TEXT_LIGHT_BLUE: string = '#698DD3';
+export const TAGG_LIGHT_PURPLE = '#F4DDFF';
 
 export const TAGGS_GRADIENT = {
   start: '#9F00FF',
@@ -141,6 +142,7 @@ export const CLASS_YEAR_LIST: Array<string> = [
   '2026',
 ];
 
+export const TAGG_WEBSITE = 'https://www.tagg.id/';
 export const MOMENT_CATEGORY_BG_COLORS: string[] = [
   '#5E4AE4',
   '#5044A6',
diff --git a/src/routes/onboarding/OnboardingStackNavigator.tsx b/src/routes/onboarding/OnboardingStackNavigator.tsx
index ea7ce8e8..9f614f7c 100644
--- a/src/routes/onboarding/OnboardingStackNavigator.tsx
+++ b/src/routes/onboarding/OnboardingStackNavigator.tsx
@@ -39,6 +39,8 @@ export type OnboardingStackParams = {
   TaggPopup: {
     popupProps: TaggPopupType;
   };
+  AddWaitlistUser: undefined;
+  WaitlistSuccess: undefined;
 };
 
 export const OnboardingStack = createStackNavigator<OnboardingStackParams>();
diff --git a/src/routes/onboarding/OnboardingStackScreen.tsx b/src/routes/onboarding/OnboardingStackScreen.tsx
index 54614b32..afc5be99 100644
--- a/src/routes/onboarding/OnboardingStackScreen.tsx
+++ b/src/routes/onboarding/OnboardingStackScreen.tsx
@@ -14,6 +14,8 @@ import {
   PasswordReset,
   WelcomeScreen,
   CategorySelection,
+  AddWaitlistUserScreen,
+  WaitlistSuccessScreen,
 } from '../../screens';
 import {StackCardInterpolationProps} from '@react-navigation/stack';
 import TaggPopup from '../../components/common/TaggPopup';
@@ -97,6 +99,14 @@ const Onboarding: React.FC = () => {
         component={InvitationCodeVerification}
       />
       <OnboardingStack.Screen
+        name="AddWaitlistUser"
+        component={AddWaitlistUserScreen}
+      />
+      <OnboardingStack.Screen
+        name="WaitlistSuccess"
+        component={WaitlistSuccessScreen}
+      />
+      <OnboardingStack.Screen
         name="RegistrationOne"
         component={RegistrationOne}
       />
diff --git a/src/screens/onboarding/AddWaitlistUserScreen.tsx b/src/screens/onboarding/AddWaitlistUserScreen.tsx
new file mode 100644
index 00000000..1c13ffb5
--- /dev/null
+++ b/src/screens/onboarding/AddWaitlistUserScreen.tsx
@@ -0,0 +1,238 @@
+import {StackNavigationProp} from '@react-navigation/stack';
+import * as React from 'react';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {
+  ArrowButton,
+  Background,
+  LoadingIndicator,
+  SubmitButton,
+  TaggInput,
+} from '../../components';
+import {nameRegex, phoneRegex} from '../../constants';
+import {OnboardingStackParams} from '../../routes';
+import {adduserToWaitlist} from '../../services';
+import {BackgroundGradientType} from '../../types';
+import {SCREEN_HEIGHT} from '../../utils';
+
+type AddWaitlistUserScreenProp = StackNavigationProp<
+  OnboardingStackParams,
+  'AddWaitlistUser'
+>;
+
+interface AddWaitlistUserScreenProps {
+  navigation: AddWaitlistUserScreenProp;
+}
+
+const AddWaitlistUserScreen: React.FC<AddWaitlistUserScreenProps> = ({
+  navigation,
+}) => {
+  const phoneRef = React.useRef();
+  const lnameRef = React.useRef();
+
+  const [form, setForm] = React.useState({
+    phone_number: {value: '', isValid: false},
+    first_name: {value: '', isValid: false},
+    last_name: {value: '', isValid: false},
+    attemptedSubmit: false,
+  });
+
+  //Handlers
+  const handleFocusChange = (field: string): void => {
+    switch (field) {
+      case 'last_name':
+        const lnameField: any = lnameRef.current;
+        lnameField.focus();
+        break;
+      case 'phone_number':
+        const phoneField: any = phoneRef.current;
+        phoneField.focus();
+        break;
+      default:
+        return;
+    }
+  };
+
+  const validate = (value: string, type: string) => {
+    let isValid: boolean = false;
+    switch (type) {
+      case 'phone_number':
+        isValid = phoneRegex.test(value);
+        break;
+      default:
+        isValid = nameRegex.test(value);
+        break;
+    }
+    return isValid;
+  };
+
+  const handleUpdate = (value: string, type: string) => {
+    value = value.trim();
+    const isValid = validate(value, type);
+    setForm({
+      ...form,
+      [type]: {value, isValid},
+    });
+  };
+
+  const handleAddUser = async () => {
+    if (!form.attemptedSubmit) {
+      setForm({
+        ...form,
+        attemptedSubmit: true,
+      });
+    }
+    try {
+      const {phone_number, first_name, last_name} = form;
+      if (phone_number.isValid && first_name.isValid && last_name.isValid) {
+        const success = await adduserToWaitlist(
+          phone_number.value,
+          first_name.value,
+          last_name.value,
+        );
+        if (success) {
+          navigation.navigate('WaitlistSuccess');
+        }
+      } else {
+        setForm({...form, attemptedSubmit: false});
+        setTimeout(() => setForm({...form, attemptedSubmit: true}));
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  //Components
+  const Footer = () => (
+    <View style={styles.footer}>
+      <ArrowButton
+        direction="backward"
+        onPress={() => navigation.navigate('InvitationCodeVerification')}
+      />
+    </View>
+  );
+
+  const {phone_number, first_name, last_name} = form;
+
+  return (
+    <Background
+      style={styles.container}
+      gradientType={BackgroundGradientType.Light}>
+      <StatusBar barStyle="light-content" />
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.container}>
+        <View>
+          <Text style={styles.formHeader}>JOIN WAITLIST</Text>
+        </View>
+        <TaggInput
+          accessibilityHint="Enter your first name."
+          accessibilityLabel="First name input field."
+          placeholder="First Name"
+          autoCompleteType="name"
+          textContentType="name"
+          returnKeyType="next"
+          onChangeText={(text) => handleUpdate(text, 'first_name')}
+          onSubmitEditing={() => handleFocusChange('first_name')}
+          blurOnSubmit={false}
+          valid={first_name.isValid}
+          invalidWarning="Please enter a valid first name."
+          attemptedSubmit={form.attemptedSubmit}
+          width={280}
+        />
+        <TaggInput
+          accessibilityHint="Enter your last name."
+          accessibilityLabel="Last name input field."
+          placeholder="Last Name"
+          autoCompleteType="name"
+          textContentType="name"
+          returnKeyType="next"
+          onChangeText={(text) => handleUpdate(text, 'last_name')}
+          blurOnSubmit={false}
+          ref={lnameRef}
+          valid={last_name.isValid}
+          invalidWarning="Please enter a valid last name."
+          onSubmitEditing={() => handleFocusChange('phone_number')}
+          attemptedSubmit={form.attemptedSubmit}
+          width={280}
+        />
+        <TaggInput
+          maxLength={12}
+          accessibilityHint="Enter your phone number."
+          accessibilityLabel="Phone number input field."
+          placeholder="Phone Number"
+          autoCompleteType="tel"
+          textContentType="telephoneNumber"
+          autoCapitalize="none"
+          returnKeyType="next"
+          keyboardType="phone-pad"
+          onChangeText={(text) => handleUpdate(text, 'phone_number')}
+          blurOnSubmit={false}
+          ref={phoneRef}
+          valid={phone_number.isValid}
+          invalidWarning="Please enter a valid 10 digit number."
+          onSubmitEditing={handleAddUser}
+          attemptedSubmit={form.attemptedSubmit}
+          width={280}
+        />
+        <TouchableOpacity onPress={handleAddUser} style={styles.finalAction}>
+          <Text style={styles.finalActionLabel}>Submit</Text>
+        </TouchableOpacity>
+        <LoadingIndicator />
+      </KeyboardAvoidingView>
+      <Footer />
+    </Background>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  finalAction: {
+    backgroundColor: 'white',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 150,
+    height: 40,
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: '#fff',
+    marginVertical: SCREEN_HEIGHT / 20,
+  },
+  finalActionLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: 'black',
+  },
+  formHeader: {
+    color: '#fff',
+    fontSize: 30,
+    fontWeight: '600',
+    marginBottom: '16%',
+  },
+  footer: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    ...Platform.select({
+      ios: {
+        bottom: '20%',
+      },
+      android: {
+        bottom: '10%',
+      },
+    }),
+  },
+});
+
+export default AddWaitlistUserScreen;
diff --git a/src/screens/onboarding/InvitationCodeVerification.tsx b/src/screens/onboarding/InvitationCodeVerification.tsx
index a9d1c12e..cc7cd678 100644
--- a/src/screens/onboarding/InvitationCodeVerification.tsx
+++ b/src/screens/onboarding/InvitationCodeVerification.tsx
@@ -10,7 +10,10 @@ import {
   LoadingIndicator,
 } from '../../components';
 
-import {VERIFY_INVITATION_CODE_ENDPOUNT} from '../../constants';
+import {
+  TAGG_LIGHT_PURPLE,
+  VERIFY_INVITATION_CODE_ENDPOUNT,
+} from '../../constants';
 
 import {Text} from 'react-native-animatable';
 import {
@@ -83,6 +86,10 @@ const InvitationCodeVerification: React.FC<InvitationCodeVerificationProps> = ({
     }
   };
 
+  const navigateToAddWaitList = () => {
+    navigation.navigate('AddWaitlistUser');
+  };
+
   const Footer = () => (
     <View style={styles.footer}>
       <ArrowButton
@@ -131,6 +138,13 @@ const InvitationCodeVerification: React.FC<InvitationCodeVerificationProps> = ({
           accessibilityHint="Select this after entering your invitation code"
           onPress={handleInvitationCodeVerification}
         />
+        <View style={styles.noInviteCode}>
+          <Text style={styles.inviteCodeText}>Don't have an invite? </Text>
+          <Text style={styles.inviteCodeLink} onPress={navigateToAddWaitList}>
+            {' '}
+            Join the Waitlist
+          </Text>
+        </View>
         <LoadingIndicator />
       </KeyboardAvoidingView>
       <Footer />
@@ -206,6 +220,19 @@ const styles = StyleSheet.create({
       },
     }),
   },
+  noInviteCode: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  inviteCodeText: {
+    color: TAGG_LIGHT_PURPLE,
+    fontSize: 18,
+  },
+  inviteCodeLink: {
+    color: 'white',
+    fontSize: 18,
+    textDecorationLine: 'underline',
+  },
 });
 
 export default InvitationCodeVerification;
diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index 006b38db..d1717fc1 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -15,7 +15,11 @@ import {
 import {fcmService} from '../../services';
 import {OnboardingStackParams} from '../../routes/onboarding';
 import {Background, TaggInput, SubmitButton} from '../../components';
-import {usernameRegex, LOGIN_ENDPOINT} from '../../constants';
+import {
+  usernameRegex,
+  LOGIN_ENDPOINT,
+  TAGG_LIGHT_PURPLE,
+} from '../../constants';
 import AsyncStorage from '@react-native-community/async-storage';
 import {BackgroundGradientType, UserType} from '../../types';
 import {useDispatch} from 'react-redux';
@@ -351,7 +355,7 @@ const styles = StyleSheet.create({
   },
   newUser: {
     fontSize: 14,
-    color: '#f4ddff',
+    color: TAGG_LIGHT_PURPLE,
   },
   getStarted: {
     fontSize: 14,
diff --git a/src/screens/onboarding/WaitlistSuccessScreen.tsx b/src/screens/onboarding/WaitlistSuccessScreen.tsx
new file mode 100644
index 00000000..1f603e3a
--- /dev/null
+++ b/src/screens/onboarding/WaitlistSuccessScreen.tsx
@@ -0,0 +1,156 @@
+import {StackNavigationProp} from '@react-navigation/stack';
+import * as React from 'react';
+import {
+  KeyboardAvoidingView,
+  Linking,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {ArrowButton, Background, SubmitButton} from '../../components';
+import {OnboardingStackParams} from '../../routes';
+import {BackgroundGradientType} from '../../types';
+import CelebrationLogo from '../../assets/icons/celebration-logo.svg';
+import {SCREEN_HEIGHT} from '../../utils';
+import {TAGG_WEBSITE} from '../../constants';
+
+type WaitlistSuccessScreenProp = StackNavigationProp<
+  OnboardingStackParams,
+  'WaitlistSuccess'
+>;
+
+interface WaitlistSuccessScreenProps {
+  navigation: WaitlistSuccessScreenProp;
+}
+
+const WaitlistSuccessScreen: React.FC<WaitlistSuccessScreenProps> = ({
+  navigation,
+}) => {
+  const handleSignIn = () => {
+    navigation.navigate('InvitationCodeVerification');
+  };
+
+  const Footer = () => (
+    <View style={styles.footer}>
+      <ArrowButton
+        direction="backward"
+        onPress={() => navigation.navigate('AddWaitlistUser')}
+      />
+    </View>
+  );
+  return (
+    <Background
+      style={styles.container}
+      gradientType={BackgroundGradientType.Light}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.container}>
+        <StatusBar barStyle="light-content" />
+        <CelebrationLogo width={100} height={100} />
+        <Text style={styles.heading}>
+          You've successfully joined{'\n'}
+          the waitlist, we'll let you know{'\n'}
+          as soon as your invite is{'\n'}ready!
+        </Text>
+        <Text style={[styles.subHeading, styles.subHeadOneMargin]}>
+          To learn more about Tagg you can visit our{'\n'}{' '}
+          <Text
+            style={styles.link}
+            onPress={() => {
+              Linking.openURL(TAGG_WEBSITE);
+            }}>
+            website
+          </Text>
+          . Thank you!
+        </Text>
+        <Text style={[styles.subHeading, styles.subHeadTwoMargin]}>
+          Got your invite text?
+        </Text>
+        <TouchableOpacity onPress={handleSignIn} style={styles.finalAction}>
+          <Text style={styles.finalActionLabel}>Sign In</Text>
+        </TouchableOpacity>
+      </KeyboardAvoidingView>
+      <Footer />
+    </Background>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  wizard: {
+    ...Platform.select({
+      ios: {
+        top: 50,
+      },
+      android: {
+        bottom: 40,
+      },
+    }),
+  },
+  link: {
+    textDecorationLine: 'underline',
+  },
+  finalAction: {
+    backgroundColor: 'white',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 150,
+    height: 40,
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: '#fff',
+    marginBottom: SCREEN_HEIGHT / 20,
+    marginTop: SCREEN_HEIGHT / 45,
+  },
+  finalActionLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: 'black',
+  },
+  formHeader: {
+    color: '#fff',
+    fontSize: 30,
+    fontWeight: '600',
+    marginBottom: '16%',
+  },
+  footer: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    ...Platform.select({
+      ios: {
+        bottom: '20%',
+      },
+      android: {
+        bottom: '10%',
+      },
+    }),
+  },
+  heading: {
+    fontSize: 25,
+    fontWeight: 'bold',
+    color: 'white',
+    marginTop: SCREEN_HEIGHT / 25,
+    textAlign: 'center',
+  },
+  subHeading: {
+    color: 'white',
+    textAlign: 'center',
+  },
+  subHeadOneMargin: {
+    marginTop: SCREEN_HEIGHT / 30,
+  },
+  subHeadTwoMargin: {
+    marginTop: SCREEN_HEIGHT / 10,
+  },
+});
+
+export default WaitlistSuccessScreen;
diff --git a/src/screens/onboarding/index.ts b/src/screens/onboarding/index.ts
index 20a8020d..14d0e405 100644
--- a/src/screens/onboarding/index.ts
+++ b/src/screens/onboarding/index.ts
@@ -11,4 +11,6 @@ export {default as PasswordResetRequest} from './PasswordResetRequest';
 export {default as PasswordReset} from './PasswordReset';
 export {default as WelcomeScreen} from './WelcomeScreen';
 export {default as CategorySelection} from './CategorySelection';
+export {default as AddWaitlistUserScreen} from './AddWaitlistUserScreen';
+export {default as WaitlistSuccessScreen} from './WaitlistSuccessScreen';
 export {default as CreateCustomCategory} from './CreateCustomCategory';
diff --git a/src/services/WaitlistUserService.tsx b/src/services/WaitlistUserService.tsx
new file mode 100644
index 00000000..516affe3
--- /dev/null
+++ b/src/services/WaitlistUserService.tsx
@@ -0,0 +1,45 @@
+import {Alert} from 'react-native';
+import {WAITLIST_USER_ENDPOINT} from '../constants';
+
+export const adduserToWaitlist: (
+  phone_number: string,
+  first_name: string,
+  last_name: string,
+) => Promise<boolean> = async (phone_number, first_name, last_name) => {
+  try {
+    console.log(phone_number, first_name, last_name);
+    const response = await fetch(WAITLIST_USER_ENDPOINT, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        phone_number,
+        first_name,
+        last_name,
+      }),
+    });
+    const status = response.status;
+    const message = await response.json();
+    if (status === 200) {
+      return true;
+    } else {
+      if (status === 409) {
+        Alert.alert('You are already on our waitlist / on our app');
+      } else if (status === 400) {
+        Alert.alert('Some information needed was missing / ill-formatted');
+      } else if (status === 500) {
+        Alert.alert(
+          'Something went wrong. Sorry unable to add you to the waitlist 😔',
+        );
+      }
+      console.log(message);
+    }
+  } catch (err) {
+    Alert.alert(
+      'Something went wrong. Sorry unable to add you to the waitlist 😔',
+    );
+    console.log(err);
+  }
+  return false;
+};
diff --git a/src/services/index.ts b/src/services/index.ts
index 7ea5bf5d..56cefddd 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -8,3 +8,4 @@ export * from './BlockUserService';
 export * from './MomentCategoryService';
 export * from './NotificationService';
 export * from './FCMService';
+export * from './WaitlistUserService';