Feedbacks Resolved 1

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}
               />
             )
           }

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}
         >

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);
   }
 

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> = ({
@@ -38,16 +39,24 @@ const CollaborationHeader: React.FC<ColloborationHeaderProps> = ({
       </View>
 
       <View style={styles.tagsContainer}>
-        <Tag
-          icon="checkbox-marked-circle"
-        >
-          {collaboration.appliedCount} Applied
-        </Tag>
-        <Tag
-          icon="eye"
-        >
-          {collaboration.brandViewed} Reviewed
-        </Tag>
+        {
+          collaboration.promotionType && (
+            <Tag
+              icon="checkbox-marked-circle"
+            >
+              {collaboration.promotionType}
+            </Tag>
+          )
+        }
+        {
+          collaboration.collaborationType && (
+            <Tag
+              icon="eye"
+            >
+              {collaboration.collaborationType}
+            </Tag>
+          )
+        }
         <Tag
           icon="map-marker"
         >

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,

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,

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}

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}
         />
       ),
     },

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(() => {