New profile UI changes

app/_layout.tsx

@@ -6,7 +6,13 @@ import {
   useTheme,
 } from "@react-navigation/native";
 import { useFonts } from "expo-font";
-import { Stack, useLocalSearchParams, usePathname, useRouter, useSegments } from "expo-router";
+import {
+  Stack,
+  useLocalSearchParams,
+  usePathname,
+  useRouter,
+  useSegments,
+} from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import { useEffect } from "react";
 
@@ -27,6 +33,7 @@ import { AutocompleteDropdownContextProvider } from "react-native-autocomplete-d
 import { BrandContextProvider } from "@/contexts/brand-context.provider";
 import CustomPaperTheme from "@/constants/Themes/Theme";
 import { queryParams } from "@/utils/url";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 
 export {
   // Catch any errors thrown by the Layout component.
@@ -64,21 +71,23 @@ export default function RootLayout() {
 
   return (
     <GestureHandlerRootView>
-      <AuthContextProvider>
-        <FirebaseStorageContextProvider>
-          <NotificationContextProvider>
-            <CloudMessagingContextProvider>
-              <BrandContextProvider>
-                <CollaborationContextProvider>
-                  <AutocompleteDropdownContextProvider>
-                    <RootLayoutStack />
-                  </AutocompleteDropdownContextProvider>
-                </CollaborationContextProvider>
-              </BrandContextProvider>
-            </CloudMessagingContextProvider>
-          </NotificationContextProvider>
-        </FirebaseStorageContextProvider>
-      </AuthContextProvider>
+      <BottomSheetModalProvider>
+        <AuthContextProvider>
+          <FirebaseStorageContextProvider>
+            <NotificationContextProvider>
+              <CloudMessagingContextProvider>
+                <BrandContextProvider>
+                  <CollaborationContextProvider>
+                    <AutocompleteDropdownContextProvider>
+                      <RootLayoutStack />
+                    </AutocompleteDropdownContextProvider>
+                  </CollaborationContextProvider>
+                </BrandContextProvider>
+              </CloudMessagingContextProvider>
+            </NotificationContextProvider>
+          </FirebaseStorageContextProvider>
+        </AuthContextProvider>
+      </BottomSheetModalProvider>
     </GestureHandlerRootView>
   );
 }
@@ -119,9 +128,7 @@ const RootLayoutStack = () => {
 
   return (
     <ThemeProvider value={appTheme === "dark" ? DarkTheme : DefaultTheme}>
-      <Provider
-        theme={CustomPaperTheme(theme)}
-      >
+      <Provider theme={CustomPaperTheme(theme)}>
         <Stack
           screenOptions={{
             animation: "ios",
@@ -143,9 +150,7 @@ const RootLayoutStack = () => {
               gestureEnabled: true,
             }}
           />
-          <Stack.Screen
-            name="(modal)/edit-collaboration"
-          />
+          <Stack.Screen name="(modal)/edit-collaboration" />
         </Stack>
       </Provider>
     </ThemeProvider>

components/FilterModal.tsx

@@ -7,7 +7,7 @@ import BottomSheet, {
 } from "@gorhom/bottom-sheet";
 import { useTheme } from "@react-navigation/native";
 import MultiSlider from "@ptomasroos/react-native-multi-slider";
-import { faClose } from "@fortawesome/free-solid-svg-icons";
+import { faCheckDouble, faClose } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
 
 import { stylesFn } from "@/styles/FilterModal.styles";
@@ -131,6 +131,13 @@ const CollaborationFilter = ({
             <View style={styles.chipContainer}>
               {influencerType.map((category, index) => (
                 <Chip
+                  icon={() => localInfluencerType === category ? (
+                    <FontAwesomeIcon
+                      color={Colors(theme).text}
+                      icon={faCheckDouble}
+                      size={14}
+                    />
+                  ) : null}
                   key={index}
                   selected={localInfluencerType === category}
                   onPress={() => setLocalInfluencerType(category)}

components/InfluencerCard.tsx

@@ -30,27 +30,21 @@ import { faEllipsis, faPeopleRoof, faChartLine, faFaceSmile, faComment, faCheck,
 import { imageUrl } from "@/utils/url";
 import Tag from "./ui/tag";
 import { MediaItem } from "./ui/carousel/render-media-item";
+import { User } from "@/types/User";
+import { processRawAttachment } from "@/utils/attachments";
+import RenderHTML from "react-native-render-html";
+import { truncateText } from "@/utils/text";
 
 const { width } = Dimensions.get("window");
 
 interface InfluencerCardPropsType {
-  influencer: {
-    id: string;
-    name: string;
-    handle: string;
-    profilePic: string;
-    media: MediaItem[];
-    followers: number | string;
-    reach: number | string;
-    rating: number | string;
-    bio: string;
-    jobsCompleted: number | string;
-    successRate: number | string;
-  };
+  influencer: User;
   type: string;
   alreadyInvited?: (influencerId: string) => Promise<boolean>;
   ToggleModal: () => void;
   ToggleMessageModal?: () => void;
+  openProfile?: (influencer: User) => void;
+  setSelectedInfluencer?: React.Dispatch<React.SetStateAction<User | null>>;
 }
 
 const InfluencerCard = (props: InfluencerCardPropsType) => {
@@ -68,6 +62,8 @@ const InfluencerCard = (props: InfluencerCardPropsType) => {
   const theme = useTheme();
   const styles = stylesFn(theme);
 
+  const screenWidth = Dimensions.get("window").width;
+
   const pinchHandler =
     useAnimatedGestureHandler<PinchGestureHandlerGestureEvent>({
       onStart: (event) => {
@@ -120,14 +116,30 @@ const InfluencerCard = (props: InfluencerCardPropsType) => {
             styles.header,
           ]}
         >
-          <Avatar.Image
-            size={50}
-            source={imageUrl(influencer.profilePic)}
-          />
-          <View style={styles.nameContainer}>
+          <Pressable
+            onPress={() => {
+              if (props.openProfile) {
+                props.openProfile(influencer);
+              }
+            }}
+          >
+            <Avatar.Image
+              size={50}
+              source={imageUrl(influencer.profileImage)}
+
+            />
+          </Pressable>
+          <Pressable
+            style={styles.nameContainer}
+            onPress={() => {
+              if (props.openProfile) {
+                props.openProfile(influencer);
+              }
+            }}
+          >
             <Text style={styles.name}>{influencer.name}</Text>
-            <Text style={styles.handle}>{influencer.handle}</Text>
-          </View>
+            <Text style={styles.handle}>{influencer.socials?.[0] || 'influencer-handle'}</Text>
+          </Pressable>
           {props.type === "invitation" &&
             (isInvited ? (
               <Tag
@@ -162,6 +174,9 @@ const InfluencerCard = (props: InfluencerCardPropsType) => {
           <Pressable
             onPress={() => {
               props.ToggleModal();
+              if (props?.setSelectedInfluencer) {
+                props.setSelectedInfluencer(props.influencer);
+              }
             }}
           >
             <FontAwesomeIcon
@@ -173,7 +188,7 @@ const InfluencerCard = (props: InfluencerCardPropsType) => {
         </View>
 
         <CarouselNative
-          data={influencer.media}
+          data={influencer.profile?.attachments?.map((attachment) => processRawAttachment(attachment)) || []}
           onImagePress={onImagePress}
         />
 
@@ -189,7 +204,7 @@ const InfluencerCard = (props: InfluencerCardPropsType) => {
                   size={20}
                 />
                 <Text style={styles.statsText}>
-                  {convertToKUnits(Number(influencer.followers))}
+                  {convertToKUnits(Number(influencer.backend?.followers))}
                 </Text>
               </View>
               <View style={styles.statItem}>
@@ -199,7 +214,7 @@ const InfluencerCard = (props: InfluencerCardPropsType) => {
                   size={20}
                 />
                 <Text style={styles.statsText}>
-                  {convertToKUnits(Number(influencer.reach))}
+                  {convertToKUnits(Number(influencer.backend?.reach))}
                 </Text>
               </View>
               <View style={styles.statItem}>
@@ -209,7 +224,7 @@ const InfluencerCard = (props: InfluencerCardPropsType) => {
                   size={20}
                 />
                 <Text style={styles.statsText}>
-                  {influencer.rating}
+                  {influencer.backend?.rating}
                 </Text>
               </View>
             </View>
@@ -222,20 +237,41 @@ const InfluencerCard = (props: InfluencerCardPropsType) => {
             </View>
           </View>
 
-          <TouchableOpacity onPress={() => setBioExpanded(!bioExpanded)}>
-            <Text numberOfLines={bioExpanded ? undefined : 2} style={styles.bio}>
-              {influencer.bio}
+          <Pressable
+            onPress={() => {
+              if (props.openProfile) {
+                props.openProfile(influencer);
+              }
+            }}
+          >
+            <Text>
+              <RenderHTML
+                contentWidth={screenWidth}
+                source={{
+                  html:
+                    truncateText(influencer?.profile?.content?.about as string, 160) ||
+                    "<p>No content available.</p>",
+                }}
+                defaultTextProps={{
+                  style: {
+                    color: Colors(theme).text,
+                    fontSize: 16,
+                    lineHeight: 22,
+                  },
+                }}
+              />
             </Text>
-          </TouchableOpacity>
+          </Pressable>
 
           <TouchableOpacity
             onPress={() => {
               return router.push("/(main)/CollaborationHistory");
             }}
           >
             <Text style={styles.jobHistory}>
-              {influencer.jobsCompleted} Jobs completed ({influencer.successRate}{" "}
-              success rate)
+              {/* {influencer.jobsCompleted} Jobs completed ({influencer.successRate}{" "}
+              success rate) */}
+              10 Jobs completed 100% success rate
             </Text>
           </TouchableOpacity>
         </View>

components/collaboration/collaboration-details/ApplicationsTabContent.tsx

@@ -1,8 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { View, FlatList } from "react-native";
-import {
-  ActivityIndicator,
-} from "react-native-paper";
+import { View, FlatList, ActivityIndicator } from "react-native";
 
 import { useTheme } from "@react-navigation/native";
 import InfluencerCard from "@/components/InfluencerCard";
@@ -11,7 +8,6 @@ import { collection, doc, getDoc, getDocs } from "firebase/firestore";
 import BottomSheetActions from "@/components/BottomSheetActions";
 import EmptyState from "@/components/ui/empty-state";
 import Colors from "@/constants/Colors";
-import { processRawAttachment } from "@/utils/attachments";
 import { useBreakpoints } from "@/hooks";
 
 const ApplicationsTabContent = (props: any) => {
@@ -75,7 +71,7 @@ const ApplicationsTabContent = (props: any) => {
           gap: 40,
         }}
       >
-        <ActivityIndicator size="large" color={theme.colors.primary} />
+        <ActivityIndicator size="large" color={Colors(theme).primary} />
       </View>
     );
   }
@@ -97,19 +93,7 @@ const ApplicationsTabContent = (props: any) => {
         renderItem={({ item }) => (
           <InfluencerCard
             type="application"
-            influencer={{
-              id: item.id,
-              profilePic: item.profileImage,
-              name: item.name,
-              handle: item.handle || "@handle",
-              media: item.attachments.map((media: any) => processRawAttachment(media)),
-              followers: item.backend ? item.backend.followers : 1000,
-              reach: item.backend ? item.backend.reach : 10000,
-              rating: item.backend ? item.backend.rating : 4.5,
-              bio: "I am a content creator",
-              jobsCompleted: 12,
-              successRate: 100,
-            }}
+            influencer={item}
             ToggleModal={() => {
               setIsVisible(true);
               setSelectedApplication({

components/collaboration/collaboration-details/InvitationsTabContent.tsx

@@ -117,22 +117,15 @@ const InvitationsTabContent = (props: any) => {
             type="invitation"
             alreadyInvited={checkIfAlreadyInvited}
             influencer={{
-              id: item.id,
-              profilePic: item.profileImage,
-              name: item.name,
-              handle: item.handle || "@handle",
-              media: [
-                {
-                  type: "image",
-                  url: item.profileImage,
-                },
-              ],
-              followers: item.backend ? item.backend.followers : 1000,
-              reach: item.backend ? item.backend.reach : 10000,
-              rating: item.backend ? item.backend.rating : 4.5,
-              bio: "I am a content creator",
-              jobsCompleted: 12,
-              successRate: 100,
+              ...item,
+              profile: {
+                attachments: [
+                  {
+                    type: "image",
+                    imageUrl: item.profileImage,
+                  },
+                ]
+              }
             }}
             ToggleModal={() => {
               setIsVisible(true);