Merge pull request #579 from BinaryStudioAcademy/task/bt-502-add-veri…

…fication-message-after-onboarding bt-502: Mobile - Add verification message after onboarding steps for both roles
BinaryStudioAcademy · Sep 25, 2023 · 5405ac5 · 5405ac5
2 parents a95b364 + 92a655e
commit 5405ac5
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 4 deletions.
diff --git a/mobile/src/bundles/common/components/components.ts b/mobile/src/bundles/common/components/components.ts
@@ -24,6 +24,7 @@ export { Slider } from './slider/slider';
 export { Switch } from './switch/switch';
 export { Tag } from './tag/tag';
 export { Text } from './text/text';
+export { VerificationMessage } from './verification-message/verification-message';
 export { default as CheckBox } from '@react-native-community/checkbox';
 export { default as CommunitySlider } from '@react-native-community/slider';
 export { DrawerContentScrollView } from '@react-navigation/drawer';

diff --git a/mobile/src/bundles/common/components/verification-message/styles.ts b/mobile/src/bundles/common/components/verification-message/styles.ts
@@ -0,0 +1,12 @@
+import { Color } from '~/bundles/common/enums/enums';
+import { StyleSheet } from '~/bundles/common/styles/styles';
+
+const styles = StyleSheet.create({
+    text: {
+        borderRadius: 20,
+        backgroundColor: Color.WARNING,
+        color: '#FFFFFF',
+    },
+});
+
+export { styles };
diff --git a/mobile/src/bundles/common/components/verification-message/verification-message.tsx b/mobile/src/bundles/common/components/verification-message/verification-message.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Text } from '~/bundles/common/components/components';
+import { TextCategory } from '~/bundles/common/enums/enums';
+import { globalStyles } from '~/bundles/common/styles/styles';
+
+import { styles } from './styles';
+
+const VerificationMessage: React.FC = () => {
+    return (
+        <Text
+            category={TextCategory.CAPTION}
+            style={[styles.text, globalStyles.p5, globalStyles.ph10]}
+        >
+            Waiting for approval
+        </Text>
+    );
+};
+
+export { VerificationMessage };
diff --git a/mobile/src/bundles/common/enums/ui/colors.enum.ts b/mobile/src/bundles/common/enums/ui/colors.enum.ts
@@ -10,6 +10,7 @@ const Color = {
     BUTTON_PRESSED: '#2E61AE',
     BUTTON_DISABLED: '#AAB1BB',
     TEXT: '#1F1E29',
+    WARNING: '#F0AD4E',
 } as const;
 
 export { Color };
diff --git a/mobile/src/bundles/employer/screens/employer-profile/employer-profile.tsx b/mobile/src/bundles/employer/screens/employer-profile/employer-profile.tsx
@@ -4,6 +4,7 @@ import {
     ScrollView,
     StatusBar,
     Text,
+    VerificationMessage,
     View,
 } from '~/bundles/common/components/components';
 import { Color, TextCategory } from '~/bundles/common/enums/enums';
@@ -18,6 +19,8 @@ import { styles } from './styles';
 const EmployerProfile: React.FC = () => {
     const { onboardingData } = useAppSelector(({ common }) => common);
 
+    const { isApproved } = onboardingData ?? {};
+
     const employerOnboardingData: EmployerOnboardingFormDto | null =
         onboardingData
             ? {
@@ -58,6 +61,7 @@ const EmployerProfile: React.FC = () => {
                 ]}
             >
                 <Text category={TextCategory.H3}>My profile</Text>
+                {!isApproved && <VerificationMessage />}
             </View>
 
             <ScrollView

diff --git a/mobile/src/bundles/talent/screens/talent-profile/style.ts b/mobile/src/bundles/talent/screens/talent-profile/style.ts
@@ -0,0 +1,12 @@
+import { Color } from '~/bundles/common/enums/enums';
+import { StyleSheet } from '~/bundles/common/styles/styles';
+
+const styles = StyleSheet.create({
+    header: {
+        backgroundColor: Color.BACKGROUND,
+        borderBottomWidth: 1,
+        borderColor: Color.INPUT,
+    },
+});
+
+export { styles };
diff --git a/mobile/src/bundles/talent/screens/talent-profile/talent-profile.tsx b/mobile/src/bundles/talent/screens/talent-profile/talent-profile.tsx
@@ -1,9 +1,43 @@
 import React from 'react';
 
-import { Text } from '~/bundles/common/components/components';
+import {
+    StatusBar,
+    Text,
+    VerificationMessage,
+    View,
+} from '~/bundles/common/components/components';
+import { Color, TextCategory } from '~/bundles/common/enums/enums';
+import { useAppSelector } from '~/bundles/common/hooks/hooks';
+import { globalStyles } from '~/bundles/common/styles/styles';
+
+import { styles } from './style';
 
 const TalentProfile: React.FC = () => {
-    return <Text>Talent Profile screen</Text>;
+    const { isApproved } =
+        useAppSelector(({ common }) => common.onboardingData) ?? {};
+
+    return (
+        <>
+            <StatusBar
+                barStyle="dark-content"
+                backgroundColor={Color.BACKGROUND}
+            />
+            <View
+                style={[
+                    globalStyles.pv25,
+                    globalStyles.pl25,
+                    globalStyles.pr10,
+                    styles.header,
+                    globalStyles.flexDirectionRow,
+                    globalStyles.justifyContentSpaceBetween,
+                    globalStyles.alignItemsCenter,
+                ]}
+            >
+                <Text category={TextCategory.H3}>Your profile</Text>
+                {!isApproved && <VerificationMessage />}
+            </View>
+        </>
+    );
 };
 
 export { TalentProfile };
diff --git a/mobile/src/navigations/bottom-tab-navigator/employer-bottom-tab/employer-bottom-tab.tsx b/mobile/src/navigations/bottom-tab-navigator/employer-bottom-tab/employer-bottom-tab.tsx
@@ -8,20 +8,28 @@ import {
     IconName,
 } from '~/bundles/common/enums/enums';
 import { createBottomTabNavigator } from '~/bundles/common/helpers/helpers';
+import { useAppSelector } from '~/bundles/common/hooks/hooks';
 import { type EmployerBottomTabNavigationParameterList } from '~/bundles/common/types/types';
 import {
     Candidates,
     EmployerProfile,
 } from '~/bundles/employer/screens/screens';
+import { notifications } from '~/framework/notifications/notifications';
 
 import { bottomTabStyles } from '../styles';
 
 const BottomTab =
     createBottomTabNavigator<EmployerBottomTabNavigationParameterList>();
 
 const EmployerBottomTabNavigator: React.FC = () => {
+    const { isApproved } =
+        useAppSelector(({ common }) => common.onboardingData) ?? {};
+
     return (
-        <BottomTab.Navigator screenOptions={bottomTabStyles}>
+        <BottomTab.Navigator
+            screenOptions={bottomTabStyles}
+            initialRouteName={EmployerBottomTabScreenName.EMPLOYER_PROFILE}
+        >
             <BottomTab.Screen
                 name={EmployerBottomTabScreenName.CANDIDATES}
                 component={Candidates}
@@ -34,6 +42,16 @@ const EmployerBottomTabNavigator: React.FC = () => {
                         />
                     ),
                 }}
+                listeners={{
+                    tabPress: (event): void => {
+                        if (!isApproved) {
+                            notifications.showError({
+                                title: 'You are not verified to see other pages',
+                            });
+                            event.preventDefault();
+                        }
+                    },
+                }}
             />
             <BottomTab.Screen
                 name={EmployerBottomTabScreenName.CHAT_LIST}
@@ -47,6 +65,16 @@ const EmployerBottomTabNavigator: React.FC = () => {
                         />
                     ),
                 }}
+                listeners={{
+                    tabPress: (event): void => {
+                        if (!isApproved) {
+                            notifications.showError({
+                                title: 'You are not verified to see other pages',
+                            });
+                            event.preventDefault();
+                        }
+                    },
+                }}
             />
             <BottomTab.Screen
                 name={EmployerBottomTabScreenName.EMPLOYER_PROFILE}

diff --git a/mobile/src/navigations/bottom-tab-navigator/talent-bottom-tab/talent-bottom-tab.tsx b/mobile/src/navigations/bottom-tab-navigator/talent-bottom-tab/talent-bottom-tab.tsx
@@ -7,17 +7,25 @@ import {
     TalentBottomTabScreenName,
 } from '~/bundles/common/enums/enums';
 import { createBottomTabNavigator } from '~/bundles/common/helpers/helpers';
+import { useAppSelector } from '~/bundles/common/hooks/hooks';
 import { type TalentBottomTabNavigationParameterList } from '~/bundles/common/types/types';
 import { Mail, TalentProfile } from '~/bundles/talent/screens/screens';
+import { notifications } from '~/framework/notifications/notifications';
 
 import { bottomTabStyles } from '../styles';
 
 const BottomTab =
     createBottomTabNavigator<TalentBottomTabNavigationParameterList>();
 
 const TalentBottomTabNavigator: React.FC = () => {
+    const { isApproved } =
+        useAppSelector(({ common }) => common.onboardingData) ?? {};
+
     return (
-        <BottomTab.Navigator screenOptions={bottomTabStyles}>
+        <BottomTab.Navigator
+            screenOptions={bottomTabStyles}
+            initialRouteName={TalentBottomTabScreenName.TALENT_PROFILE}
+        >
             <BottomTab.Screen
                 name={TalentBottomTabScreenName.MAIL}
                 component={Mail}
@@ -30,6 +38,16 @@ const TalentBottomTabNavigator: React.FC = () => {
                         />
                     ),
                 }}
+                listeners={{
+                    tabPress: (event): void => {
+                        if (!isApproved) {
+                            notifications.showError({
+                                title: 'You are not verified to see other pages',
+                            });
+                            event.preventDefault();
+                        }
+                    },
+                }}
             />
             <BottomTab.Screen
                 name={TalentBottomTabScreenName.TALENT_PROFILE}