Merge pull request #102 from bambu-group-03/feat/verify

Feat/verify

src/core/auth/utils.tsx

@@ -25,6 +25,9 @@ export type UserType = {
   username: null | string;
   ubication: null | string;
   is_followed?: boolean;
+  dni?: string;
+  img_1_url?: string;
+  img_2_url?: string;
 };
 
 export const getToken = () => getItem<TokenType>(TOKEN);

src/screens/profile/components/edit-profile-button.tsx

@@ -17,10 +17,10 @@ export const EditProfileButton = ({
 
   if (user?.id === currentUser?.id) {
     return (
-      <View className="flex flex-row justify-center">
+      <View className="flex  justify-center">
         <Button
           label="Edit"
-          className="mt-4 rounded-full bg-blue-400 px-4 py-2 text-center font-bold text-white shadow hover:bg-blue-500"
+          className="mb-2 mt-4 rounded-full bg-blue-400 px-4 py-2 text-center font-bold text-white shadow hover:bg-blue-500"
           onPress={() => {
             navigation.navigate('EditProfileScreen', { user: currentUser });
           }}

src/screens/profile/components/stadistics-button.tsx

@@ -17,9 +17,9 @@ export const StadisticsButton = ({
 
   if (user?.id === currentUser?.id) {
     return (
-      <View className="mb-2 flex flex-row justify-center">
+      <View className="mb-2 flex  justify-center">
         <Button
-          label="Stadistics"
+          label="Stats"
           className="mt-4 rounded-full bg-violet-400 px-4 py-2 text-center font-bold text-white shadow"
           onPress={() => {
             navigate('StadisticsScreen');

src/screens/profile/components/verify-button.tsx

@@ -0,0 +1,35 @@
+import { useNavigation } from '@react-navigation/native';
+import React from 'react';
+
+import type { UserType } from '@/core/auth/utils';
+import { Button, View } from '@/ui';
+
+type VerifyProfileButtonProps = {
+  user: UserType | undefined;
+  currentUser: UserType | undefined;
+};
+
+export const VerifyButton = ({
+  user,
+  currentUser,
+}: VerifyProfileButtonProps) => {
+  const { navigate } = useNavigation();
+
+  if (user?.id === currentUser?.id) {
+    return (
+      <View className="mb-2 flex justify-center">
+        <Button
+          label="Verify"
+          className="mt-4 rounded-full bg-green-400 px-4 py-2 text-center font-bold text-white shadow"
+          onPress={() => {
+            navigate('Verify');
+          }}
+        />
+      </View>
+    );
+  }
+
+  return null;
+};
+
+export default VerifyButton;

src/screens/profile/other-graph.tsx

@@ -0,0 +1,73 @@
+import { View, Text } from '@/ui';
+
+const NewGraph = () => {
+  return (
+    <View>
+        <View className="container flex flex-col mx-auto bg-white">
+            <View className="w-full draggable">
+                <View className="container flex flex-col items-center gap-16 mx-auto my-32">
+                <View className="grid w-full grid-cols-1 lg:grid-cols-4 md:grid-cols-2 gap-y-8">
+                    <View className="flex flex-col items-center">
+                    <Text className="text-5xl font-extrabold leading-tight text-center text-dark-grey-900"><span id="countto1" countTo="250"></span>+</Text>
+                    <Text className="text-base font-medium leading-7 text-center text-dark-grey-600">Successful Projects</Text>
+                    </View>
+                    <View className="flex flex-col items-center">
+                    <h3 className="text-5xl font-extrabold leading-tight text-center text-dark-grey-900">$<span id="countto2" countTo="12"></span>m</h3>
+                    <p className="text-base font-medium leading-7 text-center text-dark-grey-600">Annual Revenue Growth</p>
+                    </View>
+                    <View className="flex flex-col items-center">
+                    <h3 className="text-5xl font-extrabold leading-tight text-center text-dark-grey-900"><span id="countto3" countTo="2600" data-decimal="1"></span>k+</h3>
+                    <p className="text-base font-medium leading-7 text-center text-dark-grey-600">Global Partners</p>
+                    </View>
+                    <View className="flex flex-col items-center">
+                    <h3 className="text-5xl font-extrabold leading-tight text-center text-dark-grey-900"><span id="countto4" countTo="18000"></span>+</h3>
+                    <p className="text-base font-medium leading-7 text-center text-dark-grey-600">Daily Website Visitors</p>
+                    </View>
+                </View>
+                </View>
+            </View>
+        </View>
+
+         <View className="flex flex-wrap -mx-3 my-5">
+            <View className="w-full max-w-full sm:w-3/4 mx-auto text-center">
+                <p className="text-sm text-slate-500 py-1">
+                    Tailwind CSS Component from <a href="https://www.loopple.com/theme/motion-landing-library?ref=tailwindcomponents" className="text-slate-700 hover:text-slate-900" target="_blank">Motion Landing Library</a> by <a href="https://www.loopple.com" className="text-slate-700 hover:text-slate-900" target="_blank">Loopple Builder</a>.
+                </p>
+            </View>
+        </View>
+
+        <script src="https://cdn.jsdelivr.net/gh/Loopple/loopple-public-assets@main/motion-tailwind/scripts/plugins/countup.min.js"></script>
+        <script>
+             let numbers = document.querySelectorAll("[countTo]");
+
+                numbers.forEach((number) => {
+                    let ID = number.getAttribute("id");
+                    let value = number.getAttribute("countTo");
+                    let countUp = new CountUp(ID, value);
+
+                    if (number.hasAttribute("data-decimal")) {
+                    const options = {
+                          decimalPlaces: 1,
+                        };
+                    countUp = new CountUp(ID, 2.8, options);
+                    } else {
+                    countUp = new CountUp(ID, value);
+                    }
+
+                    if (!countUp.error) {
+                    countUp.start();
+                    } else {
+                    console.error(countUp.error);
+                    number.innerHTML = value;
+                    }
+                }); 
+        </script>
+
+        </View>
+
+
+  );
+
+};
+
+export default NewGraph;

src/screens/profile/profile-navigator.tsx

@@ -9,6 +9,7 @@ import ChatScreen from '../chat/chat-screen';
 import InteractionsScreen from './interaction-view';
 import ProfileScreen from './profile-screen';
 import StadisticsScreen from './stadistics-screen';
+import VerifyScreen from './verify-screen';
 
 export type ProfileStackParamList = {
   UserProfile: { user: UserType };
@@ -20,6 +21,7 @@ export type ProfileStackParamList = {
     user: UserType;
   };
   StadisticsScreen: undefined;
+  Verify: undefined;
 };
 
 const Stack = createNativeStackNavigator<ProfileStackParamList>();
@@ -33,6 +35,7 @@ export const ProfileNavigator = () => {
       <Stack.Screen name="EditProfileScreen" component={SignInComplete} />
       <Stack.Screen name="ChatMessagesScreen" component={ChatScreen} />
       <Stack.Screen name="StadisticsScreen" component={StadisticsScreen} />
+      <Stack.Screen name="Verify" component={VerifyScreen} />
     </Stack.Navigator>
   );
 };

src/screens/profile/profile-view.tsx

@@ -10,6 +10,7 @@ import { ProfileBio } from './components/profile-bio';
 import { ProfileStats } from './components/profile-stats';
 import { ProfileHeader } from './components/profle-header';
 import StadisticsButton from './components/stadistics-button';
+import VerifyButton from './components/verify-button';
 
 const ProfileScreenView = ({
   user,
@@ -56,8 +57,11 @@ const ProfileScreenView = ({
         followerCount={followerCount}
         followingCount={followingCount}
       />
-      <EditProfileButton user={user} currentUser={currentUser} />
-      <StadisticsButton user={user} currentUser={currentUser} />
+      <View className=" border-gray-200 flex flex-row py-5 justify-between">
+        <EditProfileButton user={user} currentUser={currentUser} />
+        <StadisticsButton user={user} currentUser={currentUser} />
+        <VerifyButton user={user} currentUser={currentUser} />
+      </View>
       <ProfileBio user={user} />
     </View>
   );

src/screens/profile/verify-screen.tsx

@@ -0,0 +1,107 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import React, { useEffect, useState } from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+import * as z from 'zod';
+
+import { getUserState, signInComplete } from '@/core';
+import type { UserType } from '@/core/auth/utils';
+import { Button, ControlledInput, ScrollView, Text, View } from '@/ui';
+import { client } from '@/api';
+import { showMessage } from 'react-native-flash-message';
+
+const schema = z.object({
+  dni: z
+    .string()
+    .regex(/^\d{8}$/, 'Invalid DNI number format. Must be 8 digits'),
+  img_1_url: z
+    .string()
+    .max(200, 'Profile Photo ID cannot exceed 100 characters'),
+  img_2_url: z
+    .string()
+    .max(200, 'Profile Photo ID cannot exceed 100 characters'),
+});
+
+export type FormType = z.infer<typeof schema>;
+
+export type VerifyFormProps = {
+  onVerifySubmit?: SubmitHandler<FormType>;
+};
+
+const whenVerifyComplete: VerifyFormProps['onVerifySubmit'] = async (data) => {
+  const getCurrentUser = getUserState();
+  console.log('current user data:', getCurrentUser);
+  if (getCurrentUser) {
+    const updatedUser: UserType = {
+      ...getCurrentUser,
+      ...data,
+    };
+
+    try {
+      const response = await client.identity.post(
+        '/api/certified_request/register',
+        {
+          user_id: updatedUser.id,
+          dni: updatedUser.dni,
+          img1_url: updatedUser.img_1_url,
+          img2_url: updatedUser.img_2_url,
+        }
+      );
+    } catch (e) {
+      console.log(e);
+    }
+
+    signInComplete(updatedUser);
+  } else {
+    console.error('Error: Current user data is undefined');
+  }
+};
+
+const VerifyScreen = () => {
+  return <FormVerify onVerifySubmit={whenVerifyComplete} />;
+};
+
+export const FormVerify = ({ onVerifySubmit = () => {} }: VerifyFormProps) => {
+  const { handleSubmit, control, setValue } = useForm<FormType>({
+    resolver: zodResolver(schema),
+  });
+
+  const user = getUserState();
+
+  return (
+    <View className="flex-1 p-4">
+      <ScrollView className="flex-1 p-4">
+        <ControlledInput
+          testID="phone-number-input"
+          control={control}
+          name="dni"
+          label="DNI"
+          keyboardType="numeric"
+        />
+
+        <ControlledInput
+          testID="photo-id-input"
+          control={control}
+          name="img_1_url"
+          label="Image 1"
+        />
+
+        <ControlledInput
+          testID="photo-id-input"
+          control={control}
+          name="img_2_url"
+          label="Image 2"
+        />
+      </ScrollView>
+
+      <Button
+        testID="sign-up-button"
+        label="Send Verification Request"
+        onPress={handleSubmit(onVerifySubmit)}
+        variant="secondary"
+      />
+    </View>
+  );
+};
+
+export default VerifyScreen;