From 72ab6e817f71886c8447fd8756b81383d324df53 Mon Sep 17 00:00:00 2001
From: dev-rathore <rathoredvd3001@gmail.com>
Date: Mon, 25 Nov 2024 17:52:09 +0530
Subject: [PATCH 1/3] initial implementation

---
 app/(modal)/create-collaboration.tsx          | 26 ++++++++---
 components/brand/CreateBrand.tsx              |  9 ----
 .../collaboration/CollaborationHeader.tsx     |  7 +--
 .../OverviewTabContent.tsx                    |  7 ++-
 .../collaboration-details/index.tsx           | 12 +++---
 .../CreateCollaborationMap.tsx                | 43 ++++++++++++++++++-
 6 files changed, 73 insertions(+), 31 deletions(-)
 delete mode 100644 components/brand/CreateBrand.tsx

diff --git a/app/(modal)/create-collaboration.tsx b/app/(modal)/create-collaboration.tsx
index dacf68ad..e3ca13d3 100644
--- a/app/(modal)/create-collaboration.tsx
+++ b/app/(modal)/create-collaboration.tsx
@@ -43,6 +43,7 @@ const CreateCollaborationScreen = () => {
     },
   ]);
   const [location, setLocation] = useState("Remote");
+  const [formattedAddress, setFormattedAddress] = useState("");
   const [links, setLinks] = useState<any[]>([]);
   const [screen, setScreen] = useState(1);
   const theme = useTheme();
@@ -89,6 +90,10 @@ const CreateCollaborationScreen = () => {
     setIsModalVisible(false);
   };
 
+  const onFormattedAddressChange = (address: string) => {
+    setFormattedAddress(address);
+  }
+
   const submitCollaboration = async () => {
     try {
       if (!AuthApp.currentUser) {
@@ -111,6 +116,18 @@ const CreateCollaborationScreen = () => {
       }
 
       const collabRef = collection(FirestoreDB, "collaborations");
+
+      let locationAddress = {};
+      if (location === "Physical" && mapRegion.latitude && mapRegion.longitude) {
+        locationAddress = {
+          name: formattedAddress,
+          latlong: {
+            lat: mapRegion.latitude,
+            long: mapRegion.longitude,
+          },
+        };
+      }
+
       await addDoc(collabRef, {
         name: collaborationName,
         brandId: selectedBrand ? selectedBrand.id : "",
@@ -127,13 +144,7 @@ const CreateCollaborationScreen = () => {
         platform: platform[0].value,
         location: {
           type: location,
-          ...(location === "Physical" && {
-            name: "locationName", // TODO: Add location name using geocoding API
-            latlong: {
-              lat: mapRegion.latitude,
-              long: mapRegion.longitude,
-            },
-          }),
+          ...locationAddress,
         },
         externalLinks: links,
         status: "active",
@@ -371,6 +382,7 @@ const CreateCollaborationScreen = () => {
               <CreateCollaborationMap
                 mapRegion={mapRegion}
                 onMapRegionChange={(region) => setMapRegion(region)}
+                onFormattedAddressChange={onFormattedAddressChange}
               />
             )
           }
diff --git a/components/brand/CreateBrand.tsx b/components/brand/CreateBrand.tsx
deleted file mode 100644
index 1c504955..00000000
--- a/components/brand/CreateBrand.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { View } from "../theme/Themed"
-
-const CreateBrand = () => {
-  return (
-    <View></View>
-  );
-};
-
-export default CreateBrand;
diff --git a/components/collaboration/CollaborationHeader.tsx b/components/collaboration/CollaborationHeader.tsx
index d35a9dcd..05da1f08 100644
--- a/components/collaboration/CollaborationHeader.tsx
+++ b/components/collaboration/CollaborationHeader.tsx
@@ -5,9 +5,10 @@ import Tag from '../ui/tag';
 import { Text, View } from '../theme/Themed';
 import { useTheme } from '@react-navigation/native';
 import { stylesFn } from '@/styles/collaboration-details/CollaborationHeader.styles';
+import { CollaborationDetail } from './collaboration-details';
 
 interface ColloborationHeaderProps {
-  collaboration: any;
+  collaboration: CollaborationDetail;
 }
 
 const CollaborationHeader: React.FC<ColloborationHeaderProps> = ({
@@ -41,12 +42,12 @@ const CollaborationHeader: React.FC<ColloborationHeaderProps> = ({
         <Tag
           icon="checkbox-marked-circle"
         >
-          {collaboration.appliedCount} Applied
+          {collaboration.promotionType}
         </Tag>
         <Tag
           icon="eye"
         >
-          {collaboration.brandViewed} Reviewed
+          {collaboration.collaborationType}
         </Tag>
         <Tag
           icon="map-marker"
diff --git a/components/collaboration/collaboration-details/OverviewTabContent.tsx b/components/collaboration/collaboration-details/OverviewTabContent.tsx
index cd01dde4..3ed035e2 100644
--- a/components/collaboration/collaboration-details/OverviewTabContent.tsx
+++ b/components/collaboration/collaboration-details/OverviewTabContent.tsx
@@ -7,15 +7,14 @@ import {
 } from "react-native-paper";
 import { useTheme } from "@react-navigation/native";
 import { stylesFn } from "@/styles/collaboration-details/CollaborationDetails.styles";
+import { CollaborationDetail } from ".";
 
 interface OverviewTabContentProps {
-  collaboration: any;
-  logo: string;
+  collaboration: CollaborationDetail;
 };
 
 const OverviewTabContent: React.FC<OverviewTabContentProps> = ({
   collaboration,
-  logo,
 }) => {
   const theme = useTheme();
   const styles = stylesFn(theme);
@@ -39,7 +38,7 @@ const OverviewTabContent: React.FC<OverviewTabContentProps> = ({
         <Image
           source={{
             uri:
-              logo ||
+              collaboration?.logo ||
               "https://cdn.pixabay.com/photo/2022/09/21/17/02/blue-background-7470781_640.jpg",
           }}
           style={styles.profileImage}
diff --git a/components/collaboration/collaboration-details/index.tsx b/components/collaboration/collaboration-details/index.tsx
index afee9b3a..8947d1eb 100644
--- a/components/collaboration/collaboration-details/index.tsx
+++ b/components/collaboration/collaboration-details/index.tsx
@@ -11,10 +11,11 @@ import OverviewTabContent from "./OverviewTabContent";
 import SettingsTabContent from "./SettingsTabContent";
 import CollaborationHeader from "../CollaborationHeader";
 
-interface Collaboration extends ICollaboration {
+export interface CollaborationDetail extends ICollaboration {
+  brandDescription: string;
   brandName: string;
+  logo: string;
   paymentVerified: boolean;
-  brandDescription: string;
 }
 
 interface CollaborationDetailsProps {
@@ -24,7 +25,7 @@ interface CollaborationDetailsProps {
 const CollaborationDetails: React.FC<CollaborationDetailsProps> = ({
   pageID
 }) => {
-  const [collaboration, setCollaboration] = useState<Collaboration | undefined>(
+  const [collaboration, setCollaboration] = useState<CollaborationDetail | undefined>(
     undefined
   );
   const [loading, setLoading] = useState(true);
@@ -43,6 +44,7 @@ const CollaborationDetails: React.FC<CollaborationDetailsProps> = ({
 
       setCollaboration({
         ...data,
+        logo: brandData?.image || "",
         brandName: brandData?.name || "Unknown Brand",
         paymentVerified: brandData?.paymentMethodVerified || false,
         brandDescription: brandData?.description || "",
@@ -60,9 +62,7 @@ const CollaborationDetails: React.FC<CollaborationDetailsProps> = ({
       title: "Overview",
       component: (
         <OverviewTabContent
-          collaboration={collaboration as Collaboration}
-          // logo={collaboration?.logo}
-          logo={""}
+          collaboration={collaboration as CollaborationDetail}
         />
       ),
     },
diff --git a/components/collaboration/create-collaboration/CreateCollaborationMap.tsx b/components/collaboration/create-collaboration/CreateCollaborationMap.tsx
index 776a9ef5..38a33dcb 100644
--- a/components/collaboration/create-collaboration/CreateCollaborationMap.tsx
+++ b/components/collaboration/create-collaboration/CreateCollaborationMap.tsx
@@ -11,11 +11,13 @@ import { useTheme } from "@react-navigation/native";
 interface CreateCollaborationMapProps {
   mapRegion: any;
   onMapRegionChange: (region: any) => void;
+  onFormattedAddressChange?: (address: string) => void;
 }
 
 const CreateCollaborationMap: React.FC<CreateCollaborationMapProps> = ({
   mapRegion,
   onMapRegionChange,
+  onFormattedAddressChange,
 }) => {
   const [nativeMapRegion, setNativeMapRegion] = useState(mapRegion);
 
@@ -24,20 +26,57 @@ const CreateCollaborationMap: React.FC<CreateCollaborationMapProps> = ({
   const theme = useTheme();
   const styles = stylesFn(theme);
 
-  const onLocationChange = (
+  const fetchMapRegionAddress = async (
+    lat: number,
+    lng: number
+  ) => {
+    if (!lat || !lng) {
+      return;
+    }
+
+    const response = await fetch(
+      `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${process.env.EXPO_PUBLIC_GOOGLE_MAPS_API_KEY}`
+    );
+
+    const result = await response.json();
+
+    const address = result?.results?.[0]?.formatted_address || result?.plus_code?.compound_code || 'Address';
+
+    return address;
+  };
+
+  const onLocationChange = async (
     location: { latitude: number; longitude: number },
   ) => {
     setWebMapRegion({
       latitude: location.latitude,
       longitude: location.longitude,
     });
+
+    const address = await fetchMapRegionAddress(
+      location.latitude,
+      location.longitude
+    );
+
+    if (onFormattedAddressChange) {
+      onFormattedAddressChange(address as string);
+    }
   };
 
-  const onMapLocationChange = (region: any) => {
+  const onMapLocationChange = async (region: any) => {
     onMapRegionChange({
       latitude: region.latitude,
       longitude: region.longitude,
     });
+
+    const address = await fetchMapRegionAddress(
+      region.latitude,
+      region.longitude
+    );
+
+    if (onFormattedAddressChange) {
+      onFormattedAddressChange(address as string);
+    }
   }
 
   useEffect(() => {

From 1d8e3cbf4377926d595df687b1ebe2426585ba74 Mon Sep 17 00:00:00 2001
From: dev-rathore <rathoredvd3001@gmail.com>
Date: Tue, 26 Nov 2024 21:43:03 +0530
Subject: [PATCH 2/3] updateBytes function added

---
 app/(onboarding)/onboarding-your-brand.tsx    | 19 ++++++++++++-
 .../collaboration/CollaborationHeader.tsx     | 28 ++++++++++++-------
 components/menu/index.tsx                     | 17 ++---------
 .../firebase-storage-context.provider.tsx     | 17 ++++++++++-
 4 files changed, 55 insertions(+), 26 deletions(-)

diff --git a/app/(onboarding)/onboarding-your-brand.tsx b/app/(onboarding)/onboarding-your-brand.tsx
index 014fc355..5c5d364b 100644
--- a/app/(onboarding)/onboarding-your-brand.tsx
+++ b/app/(onboarding)/onboarding-your-brand.tsx
@@ -19,6 +19,7 @@ import { addDoc, collection, doc, setDoc } from "firebase/firestore";
 import { FirestoreDB } from "@/utils/firestore";
 import Toaster from "@/shared-uis/components/toaster/Toaster";
 import Colors from "@/constants/Colors";
+import { useFirebaseStorageContext } from "@/contexts";
 
 const OnboardingScreen = () => {
   const [brandName, setBrandName] = useState("");
@@ -29,11 +30,15 @@ const OnboardingScreen = () => {
   const [filteredRoles, setFilteredRoles] = useState<any[]>([]);
   const [filteredIndustries, setFilteredIndustries] = useState<string[]>([]);
   const [activeDropdown, setActiveDropdown] = useState<any>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const theme = useTheme();
   const styles = fnStyles(theme);
   const {
     firstBrand,
   } = useLocalSearchParams();
+  const {
+    uploadImageBytes,
+  } = useFirebaseStorageContext();
 
   const pickImage = async () => {
     let result = await ImagePicker.launchImageLibraryAsync({
@@ -42,6 +47,7 @@ const OnboardingScreen = () => {
       aspect: [4, 3],
       quality: 1,
     });
+
     if (!result.canceled) {
       setImage(result.assets[0].uri);
     }
@@ -67,17 +73,26 @@ const OnboardingScreen = () => {
 
   const handleSubmit = async () => {
     try {
+      setIsSubmitting(true);
       const user = AuthApp.currentUser;
       if (!brandName || !role || !industry || !website) {
         Toaster.error("Please fill in all fields.");
+        setIsSubmitting(false);
         return;
       }
+
+      let imageUrl = "";
+      if (image) {
+        const blob = await fetch(image).then((res) => res.blob());
+        imageUrl = await uploadImageBytes(blob, `brands/${brandName}-${Date.now()}`);
+      }
+
       if (user) {
         const colRef = collection(FirestoreDB, "brands");
 
         let brandData = {
           name: brandName,
-          image: "",
+          image: imageUrl,
           profile: {
             industry,
             website,
@@ -99,6 +114,7 @@ const OnboardingScreen = () => {
           role,
         });
 
+        setIsSubmitting(false);
         router.navigate({
           pathname: "/(onboarding)/onboarding-brand-preference",
           params: { brandId: docRef.id },
@@ -238,6 +254,7 @@ const OnboardingScreen = () => {
         />
 
         <Button
+          loading={isSubmitting}
           mode="contained"
           onPress={handleSubmit}
         >
diff --git a/components/collaboration/CollaborationHeader.tsx b/components/collaboration/CollaborationHeader.tsx
index 05da1f08..8224cdd6 100644
--- a/components/collaboration/CollaborationHeader.tsx
+++ b/components/collaboration/CollaborationHeader.tsx
@@ -39,16 +39,24 @@ const CollaborationHeader: React.FC<ColloborationHeaderProps> = ({
       </View>
 
       <View style={styles.tagsContainer}>
-        <Tag
-          icon="checkbox-marked-circle"
-        >
-          {collaboration.promotionType}
-        </Tag>
-        <Tag
-          icon="eye"
-        >
-          {collaboration.collaborationType}
-        </Tag>
+        {
+          collaboration.promotionType && (
+            <Tag
+              icon="checkbox-marked-circle"
+            >
+              {collaboration.promotionType}
+            </Tag>
+          )
+        }
+        {
+          collaboration.collaborationType && (
+            <Tag
+              icon="eye"
+            >
+              {collaboration.collaborationType}
+            </Tag>
+          )
+        }
         <Tag
           icon="map-marker"
         >
diff --git a/components/menu/index.tsx b/components/menu/index.tsx
index ca51c639..f3abcccd 100644
--- a/components/menu/index.tsx
+++ b/components/menu/index.tsx
@@ -1,10 +1,6 @@
 import { Avatar, Button } from "react-native-paper";
 import { Text, View } from "../theme/Themed";
 import { useAuthContext } from "@/contexts";
-import {
-  PLACEHOLDER_IMAGE,
-  PLACEHOLDER_PERSON_IMAGE,
-} from "@/constants/Placeholder";
 import stylesFn from "@/styles/menu/MenuItem.styles";
 import { useTheme } from "@react-navigation/native";
 import { useRouter } from "expo-router";
@@ -13,6 +9,7 @@ import { ImageBackground, Pressable } from "react-native";
 import { useBrandContext } from "@/contexts/brand-context.provider";
 import { useState } from "react";
 import ConfirmationModal from "../ui/modal/ConfirmationModal";
+import { imageUrl } from "@/utils/url";
 
 const Menu = () => {
   const theme = useTheme();
@@ -34,20 +31,12 @@ const Menu = () => {
   return (
     <View style={styles.container}>
       <ImageBackground
-        source={
-          selectedBrand?.image ? {
-            uri: selectedBrand.image,
-          } : require("@/assets/images/cover-placeholder-image.png")
-        }
+        source={imageUrl(selectedBrand?.image)}
         resizeMode="cover"
         style={styles.backgroundImage}
       />
       <Avatar.Image
-        source={
-          selectedBrand?.image ? {
-            uri: selectedBrand.image,
-          } : require("@/assets/images/placeholder-image.jpg")
-        }
+        source={imageUrl(selectedBrand?.image)}
         size={72}
         style={styles.brandAvatar}
       />
diff --git a/contexts/firebase-storage-context.provider.tsx b/contexts/firebase-storage-context.provider.tsx
index 0e0135a1..64a17db5 100644
--- a/contexts/firebase-storage-context.provider.tsx
+++ b/contexts/firebase-storage-context.provider.tsx
@@ -8,11 +8,13 @@ import {
   ref,
   uploadString,
   getDownloadURL,
+  uploadBytes,
 } from "firebase/storage";
 import { StorageApp } from "@/utils/firebase-storage";
 
 interface FirebaseStorageContextProps {
   uploadImage: (image: string, path: string) => Promise<string>;
+  uploadImageBytes: (blob: Blob, path: string) => Promise<string>;
 }
 
 const FirebaseStorageContext = createContext<FirebaseStorageContextProps>(null!);
@@ -25,9 +27,21 @@ export const FirebaseStorageContextProvider: React.FC<PropsWithChildren> = ({
   const uploadImage = async (
     image: string,
     path: string,
+    format: "base64" | "base64url" | "data_url" | "raw" = "data_url",
   ): Promise<string> => {
     const storageRef = ref(StorageApp, path);
-    await uploadString(storageRef, image, "data_url");
+    await uploadString(storageRef, image, format);
+
+    const downloadURL = await getDownloadURL(storageRef);
+    return downloadURL;
+  }
+
+  const uploadImageBytes = async (
+    blob: Blob,
+    path: string,
+  ): Promise<string> => {
+    const storageRef = ref(StorageApp, path);
+    await uploadBytes(storageRef, blob);
 
     const downloadURL = await getDownloadURL(storageRef);
     return downloadURL;
@@ -37,6 +51,7 @@ export const FirebaseStorageContextProvider: React.FC<PropsWithChildren> = ({
     <FirebaseStorageContext.Provider
       value={{
         uploadImage,
+        uploadImageBytes,
       }}
     >
       {children}

From d755ad4e4d0ca38aea94b30240392aef3da4eaaf Mon Sep 17 00:00:00 2001
From: dev-rathore <rathoredvd3001@gmail.com>
Date: Tue, 26 Nov 2024 22:53:42 +0530
Subject: [PATCH 3/3] made changes for processed and raw attachments

---
 components/InfluencerCard.tsx                 | 10 +++----
 .../ApplicationsTabContent.tsx                |  3 +-
 .../InvitationsTabContent.tsx                 |  2 +-
 components/explore-influencers/index.tsx      |  9 +++---
 components/ui/carousel/carousel.tsx           | 10 +++----
 components/ui/carousel/carousel.web.tsx       | 14 +++++-----
 components/ui/carousel/render-media-item.tsx  | 19 ++++++++-----
 constants/Influencers.ts                      | 18 ++++++------
 utils/attachments.ts                          | 28 +++++++++++++++++++
 9 files changed, 72 insertions(+), 41 deletions(-)
 create mode 100644 utils/attachments.ts

diff --git a/components/InfluencerCard.tsx b/components/InfluencerCard.tsx
index c8a3b25a..46b3f3e7 100644
--- a/components/InfluencerCard.tsx
+++ b/components/InfluencerCard.tsx
@@ -29,6 +29,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
 import { faBullseye, faStar, faUsers, faMessage, faEllipsis } from "@fortawesome/free-solid-svg-icons";
 import { imageUrl } from "@/utils/url";
 import Tag from "./ui/tag";
+import { MediaItem } from "./ui/carousel/render-media-item";
 
 const { width } = Dimensions.get("window");
 
@@ -38,10 +39,7 @@ interface InfluencerCardPropsType {
     name: string;
     handle: string;
     profilePic: string;
-    media: {
-      type: string;
-      uri: string;
-    }[];
+    media: MediaItem[];
     followers: number | string;
     reach: number | string;
     rating: number | string;
@@ -98,8 +96,8 @@ const InfluencerCard = (props: InfluencerCardPropsType) => {
     };
   });
 
-  const onImagePress = (data: any) => {
-    setSelectedImage(data); // TODO: data -> uri
+  const onImagePress = (data: MediaItem) => {
+    setSelectedImage(data.url);
     setIsZoomed(true);
   }
 
diff --git a/components/collaboration/collaboration-details/ApplicationsTabContent.tsx b/components/collaboration/collaboration-details/ApplicationsTabContent.tsx
index 51039741..e79f146d 100644
--- a/components/collaboration/collaboration-details/ApplicationsTabContent.tsx
+++ b/components/collaboration/collaboration-details/ApplicationsTabContent.tsx
@@ -11,6 +11,7 @@ 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";
 
 const ApplicationsTabContent = (props: any) => {
   const theme = useTheme();
@@ -96,7 +97,7 @@ const ApplicationsTabContent = (props: any) => {
               profilePic: item.profileImage,
               name: item.name,
               handle: item.handle || "@handle",
-              media: item.attachments,
+              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,
diff --git a/components/collaboration/collaboration-details/InvitationsTabContent.tsx b/components/collaboration/collaboration-details/InvitationsTabContent.tsx
index 8a8a34c9..bf3f6ce1 100644
--- a/components/collaboration/collaboration-details/InvitationsTabContent.tsx
+++ b/components/collaboration/collaboration-details/InvitationsTabContent.tsx
@@ -119,7 +119,7 @@ const InvitationsTabContent = (props: any) => {
               media: [
                 {
                   type: "image",
-                  uri: item.profileImage,
+                  url: item.profileImage,
                 },
               ],
               followers: item.backend ? item.backend.followers : 1000,
diff --git a/components/explore-influencers/index.tsx b/components/explore-influencers/index.tsx
index e3a6c0f0..11ecfe39 100644
--- a/components/explore-influencers/index.tsx
+++ b/components/explore-influencers/index.tsx
@@ -1,6 +1,6 @@
 import { FlatList } from "react-native";
 import InfluencerCard from "../InfluencerCard";
-import { Text, View } from "../theme/Themed";
+import { View } from "../theme/Themed";
 import AppLayout from "@/layouts/app-layout";
 import SearchComponent from "../SearchComponent";
 import { useState } from "react";
@@ -31,9 +31,7 @@ const ExploreInfluencers = () => {
     const isCollaborationTypeMatch =
       currentCollaborationType === "All" ||
       influencer.collaborationType === currentCollaborationType;
-    // const isInfluencerTypeMatch =
-    //   currentInfluencerType === "All" ||
-    //   influencer.influencerType === currentInfluencerType;
+
     const isFollowersRangeMatch =
       Number(influencer.followers) >= currentFollowersRange[0] &&
       Number(influencer.followers) <= currentFollowersRange[1];
@@ -43,12 +41,13 @@ const ExploreInfluencers = () => {
     const isEngagementRangeMatch =
       Number(influencer.engagement) >= currentEngagementRange[0] &&
       Number(influencer.engagement) <= currentEngagementRange[1];
+
     const isSearchQueryMatch = influencer.name
       .toLowerCase()
       .includes(searchQuery.toLowerCase());
+
     return (
       isCollaborationTypeMatch &&
-      // isInfluencerTypeMatch &&
       isFollowersRangeMatch &&
       isReachRangeMatch &&
       isEngagementRangeMatch &&
diff --git a/components/ui/carousel/carousel.tsx b/components/ui/carousel/carousel.tsx
index 83114586..e23c8abd 100644
--- a/components/ui/carousel/carousel.tsx
+++ b/components/ui/carousel/carousel.tsx
@@ -7,11 +7,11 @@ import Carousel from "react-native-reanimated-carousel";
 import { View } from "@/components/theme/Themed";
 import { stylesFn } from "@/styles/InfluencerCard.styles";
 import { useTheme } from "@react-navigation/native";
-import RenderMediaItem from "./render-media-item";
+import RenderMediaItem, { MediaItem } from "./render-media-item";
 
 interface CarouselProps {
-  data: any[]; // TODO: Add specific type
-  onImagePress?: (data: any) => void;
+  data: MediaItem[];
+  onImagePress?: (data: MediaItem) => void;
 }
 
 const CarouselNative: React.FC<CarouselProps> = ({
@@ -40,10 +40,10 @@ const CarouselNative: React.FC<CarouselProps> = ({
     });
   };
 
-  const handleImagePress = (uri: string) => {
+  const handleImagePress = (item: MediaItem) => {
     if (!isSwiping) {
       if (onImagePress) {
-        onImagePress(uri);
+        onImagePress(item);
       }
     }
   };
diff --git a/components/ui/carousel/carousel.web.tsx b/components/ui/carousel/carousel.web.tsx
index 04690fb1..fee115a4 100644
--- a/components/ui/carousel/carousel.web.tsx
+++ b/components/ui/carousel/carousel.web.tsx
@@ -3,11 +3,11 @@ import Swiper from "react-native-swiper";
 import stylesFn from "@/styles/tab1.styles";
 import { useTheme } from "@react-navigation/native";
 import Colors from "@/constants/Colors";
-import RenderMediaItem from "./render-media-item";
+import RenderMediaItem, { MediaItem } from "./render-media-item";
 
 interface CarouselWebProps {
-  data: any
-  onImagePress: (data: any) => void;
+  data: MediaItem[];
+  onImagePress: (data: MediaItem) => void;
 };
 
 const CarouselWeb: React.FC<CarouselWebProps> = ({
@@ -19,9 +19,9 @@ const CarouselWeb: React.FC<CarouselWebProps> = ({
   const swiperRef = useRef<Swiper>(null);
   const videoRefs = useRef<{ [key: number]: any }>({});
 
-  const handleImagePress = (uri: string) => {
+  const handleImagePress = (item: MediaItem) => {
     if (onImagePress) {
-      onImagePress(uri);
+      onImagePress(item);
     }
   };
 
@@ -40,7 +40,7 @@ const CarouselWeb: React.FC<CarouselWebProps> = ({
       paginationStyle={styles.pagination}
     >
       {data.map((
-        item: any,
+        item: MediaItem,
         index: number,
       ) => (
         <RenderMediaItem
@@ -48,7 +48,7 @@ const CarouselWeb: React.FC<CarouselWebProps> = ({
           height={560}
           index={index}
           item={item}
-          key={item.id || index}
+          key={item.url || index}
           videoRefs={videoRefs}
         />
       ))}
diff --git a/components/ui/carousel/render-media-item.tsx b/components/ui/carousel/render-media-item.tsx
index 8553d6a0..b4df5d51 100644
--- a/components/ui/carousel/render-media-item.tsx
+++ b/components/ui/carousel/render-media-item.tsx
@@ -13,11 +13,16 @@ import { stylesFn } from "@/styles/InfluencerCard.styles";
 import { useTheme } from "@react-navigation/native";
 import { imageUrl } from "@/utils/url";
 
+export interface MediaItem {
+  type: string;
+  url: string;
+}
+
 interface RenderMediaItemProps {
-  handleImagePress: (uri: string) => void;
+  handleImagePress: (item: MediaItem) => void;
   height?: number;
   index: number;
-  item: any;
+  item: MediaItem;
   videoRefs?: React.MutableRefObject<{ [key: number]: any }>;
   width?: number;
 }
@@ -33,18 +38,18 @@ const RenderMediaItem: React.FC<RenderMediaItemProps> = ({
   const theme = useTheme();
   const styles = stylesFn(theme);
 
-  if (item?.type === "image") {
+  if (item?.type.includes("image")) {
     return (
       <TapGestureHandler
         onHandlerStateChange={({ nativeEvent }) => {
           if (nativeEvent.state === State.ACTIVE) {
-            handleImagePress(item.uri);
+            handleImagePress(item);
           }
         }}
       >
         <Animated.View>
           <Image
-            source={imageUrl(item.url || item.uri)}
+            source={imageUrl(item.url)}
             style={[
               styles.media,
               {
@@ -67,9 +72,9 @@ const RenderMediaItem: React.FC<RenderMediaItemProps> = ({
         }
       }}
       source={
-        item.appleUrl
+        item.url
           ? {
-            uri: Platform.OS === "ios" ? item.appleUrl : item.playUrl,
+            uri: item.url,
           }
           : require("@/assets/videos/ForBiggerJoyrides.mp4")
       }
diff --git a/constants/Influencers.ts b/constants/Influencers.ts
index daabf2e6..502905bb 100644
--- a/constants/Influencers.ts
+++ b/constants/Influencers.ts
@@ -14,16 +14,16 @@ export const influencers = [
     collaborationType: "Paid",
     engagement: 5000,
     media: [
+      { type: "image", url: "https://picsum.photos/200/300" },
+      { type: "image", url: "https://picsum.photos/200/300?random=1" },
       {
         type: "video",
-        uri: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
+        url: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
       },
-      { type: "image", uri: "https://picsum.photos/200/300" },
-      { type: "image", uri: "https://picsum.photos/200/300?random=1" },
-      { type: "image", uri: "https://picsum.photos/200/300?random=2" },
+      { type: "image", url: "https://picsum.photos/200/300?random=2" },
       {
         type: "video",
-        uri: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
+        url: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
       },
     ],
   },
@@ -42,13 +42,13 @@ export const influencers = [
     collaborationType: "Sponsored",
     engagement: 6000,
     media: [
-      { type: "image", uri: "https://picsum.photos/200/300?random=3" },
-      { type: "image", uri: "https://picsum.photos/200/300?random=4" },
+      { type: "image", url: "https://picsum.photos/200/300?random=3" },
+      { type: "image", url: "https://picsum.photos/200/300?random=4" },
       {
         type: "video",
-        uri: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4",
+        url: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4",
       },
-      { type: "image", uri: "https://picsum.photos/200/300?random=5" },
+      { type: "image", url: "https://picsum.photos/200/300?random=5" },
     ],
   },
 ];
diff --git a/utils/attachments.ts b/utils/attachments.ts
new file mode 100644
index 00000000..e6ca061e
--- /dev/null
+++ b/utils/attachments.ts
@@ -0,0 +1,28 @@
+import { MediaItem } from "@/components/ui/carousel/render-media-item";
+import { Platform } from "react-native";
+
+export const processRawAttachment = (attachment: any): MediaItem => {
+  if (attachment.type.includes("video")) {
+    if (Platform.OS === "ios") {
+      return {
+        type: attachment.type,
+        url: attachment.appleUrl,
+      };
+    } else {
+      return {
+        type: attachment.type,
+        url: attachment.playUrl,
+      };
+    }
+  } else if (attachment.type.includes("image")) {
+    return {
+      type: attachment.type,
+      url: attachment.imageUrl,
+    };
+  } else {
+    return {
+      type: "file",
+      url: attachment.url,
+    };
+  }
+};