image component and other fixes

app/(main)/(screens)/(onboarding)/onboarding-your-brand.tsx

@@ -1,7 +1,5 @@
 import React, { useState } from "react";
-import {
-  View,
-} from "react-native";
+import { View } from "react-native";
 import { Button } from "react-native-paper";
 import { router, useLocalSearchParams } from "expo-router";
 import { useTheme } from "@react-navigation/native";
@@ -38,18 +36,10 @@ const OnboardingScreen = () => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const theme = useTheme();
   const styles = fnStyles(theme);
-  const {
-    firstBrand,
-  } = useLocalSearchParams();
-  const {
-    uploadImageBytes,
-  } = useFirebaseStorageContext();
-  const {
-    setSelectedBrand,
-  } = useBrandContext();
-  const {
-    manager: user,
-  } = useAuthContext();
+  const { firstBrand } = useLocalSearchParams();
+  const { uploadImageBytes } = useFirebaseStorageContext();
+  const { setSelectedBrand } = useBrandContext();
+  const { manager: user } = useAuthContext();
 
   const handleCreateBrand = async () => {
     setIsSubmitting(true);
@@ -60,15 +50,20 @@ const OnboardingScreen = () => {
     }
 
     if (!brandData.name) {
+
       Toaster.error('Brand name is required');
       setIsSubmitting(false);
+
       return;
     }
 
     let imageUrl = "";
     if (brandData.image) {
       const blob = await fetch(brandData.image).then((res) => res.blob());
-      imageUrl = await uploadImageBytes(blob, `brands/${brandData.name}-${Date.now()}`);
+      imageUrl = await uploadImageBytes(
+        blob,
+        `brands/${brandData.name}-${Date.now()}`
+      );
     }
 
     if (user) {
@@ -91,23 +86,26 @@ const OnboardingScreen = () => {
 
       await setDoc(managerRef, {
         managerId: user.id,
-        role,
-      }).then(() => {
-        router.replace({
-          pathname: "/onboarding-get-started",
-          params: {
-            brandId: docRef.id,
-            firstBrand: firstBrand === "true" ? "true" : "false",
-          },
+        role: "Manager",
+      })
+        .then(() => {
+          router.replace({
+            pathname: "/onboarding-get-started",
+            params: {
+              brandId: docRef.id,
+              firstBrand: firstBrand === "true" ? "true" : "false",
+            },
+          });
+          setSelectedBrand(brandData as Brand);
+        })
+        .catch((error) => {
+          Toaster.error("Error creating brand");
+        })
+        .finally(() => {
+          setIsSubmitting(false);
         });
-        setSelectedBrand(brandData as Brand);
-      }).catch((error) => {
-        Toaster.error("Error creating brand");
-      }).finally(() => {
-        setIsSubmitting(false);
-      });
     }
-  }
+  };
 
   return (
     <AppLayout>
@@ -132,7 +130,7 @@ const OnboardingScreen = () => {
           type="create"
         />
       </View>
-    </AppLayout >
+    </AppLayout>
   );
 };
 

components/InfluencerCard.tsx

@@ -13,7 +13,15 @@ import { useTheme } from "@react-navigation/native";
 import Colors from "@/constants/Colors";
 import { convertToKUnits } from "@/utils/conversion";
 import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
-import { faEllipsis, faPeopleRoof, faChartLine, faFaceSmile, faComment, faCheck, faPlus } from "@fortawesome/free-solid-svg-icons";
+import {
+  faEllipsis,
+  faPeopleRoof,
+  faChartLine,
+  faFaceSmile,
+  faComment,
+  faCheck,
+  faPlus,
+} from "@fortawesome/free-solid-svg-icons";
 import { imageUrl } from "@/utils/url";
 import Tag from "./ui/tag";
 import { User } from "@/types/User";
@@ -23,6 +31,7 @@ import { truncateText } from "@/utils/text";
 import { MediaItem } from "@/shared-uis/components/carousel/render-media-item";
 import Carousel from "@/shared-uis/components/carousel/carousel";
 import AssetPreviewModal from "@/shared-uis/components/carousel/asset-preview-modal";
+import ImageComponent from "@/shared-uis/components/image-component";
 
 interface InfluencerCardPropsType {
   alreadyInvited?: (influencerId: string) => Promise<boolean>;
@@ -48,7 +57,7 @@ const InfluencerCard = (props: InfluencerCardPropsType) => {
   const onImagePress = (data: MediaItem) => {
     setPreviewImageUrl(data.url);
     setPreviewImage(true);
-  }
+  };
 
   useEffect(() => {
     if (props?.alreadyInvited) {
@@ -60,26 +69,21 @@ const InfluencerCard = (props: InfluencerCardPropsType) => {
 
   return (
     <>
-      <Card
-        style={styles.card}
-        mode="contained"
-      >
-        <View
-          style={[
-            styles.header,
-          ]}
-        >
+      <Card style={styles.card} mode="contained">
+        <View style={[styles.header]}>
           <Pressable
             onPress={() => {
               if (props.openProfile) {
                 props.openProfile(influencer);
               }
             }}
           >
-            <Avatar.Image
-              size={50}
-              source={imageUrl(influencer.profileImage)}
-
+            <ImageComponent
+              size="small"
+              url={influencer.profileImage || ""}
+              initials={influencer.name}
+              altText="Image"
+              shape="circle"
             />
           </Pressable>
           <Pressable
@@ -91,7 +95,9 @@ const InfluencerCard = (props: InfluencerCardPropsType) => {
             }}
           >
             <Text style={styles.name}>{influencer.name}</Text>
-            <Text style={styles.handle}>{influencer.socials?.[0] || 'influencer-handle'}</Text>
+            <Text style={styles.handle}>
+              {influencer.socials?.[0] || "influencer-handle"}
+            </Text>
           </Pressable>
           {props.type === "invitation" &&
             (isInvited ? (
@@ -141,14 +147,16 @@ const InfluencerCard = (props: InfluencerCardPropsType) => {
         </View>
 
         <Carousel
-          data={influencer.profile?.attachments?.map((attachment) => processRawAttachment(attachment)) || []}
+          data={
+            influencer.profile?.attachments?.map((attachment) =>
+              processRawAttachment(attachment)
+            ) || []
+          }
           onImagePress={onImagePress}
           theme={theme}
         />
 
-        <View
-          style={styles.content}
-        >
+        <View style={styles.content}>
           <View style={styles.stats}>
             <View style={styles.statsContainer}>
               <View style={styles.statItem}>
@@ -203,8 +211,10 @@ const InfluencerCard = (props: InfluencerCardPropsType) => {
                 contentWidth={screenWidth}
                 source={{
                   html:
-                    truncateText(influencer?.profile?.content?.about as string, 160) ||
-                    "<p>No content available.</p>",
+                    truncateText(
+                      influencer?.profile?.content?.about as string,
+                      160
+                    ) || "<p>No content available.</p>",
                 }}
                 defaultTextProps={{
                   style: {

components/brand-profile/members-card/index.tsx

@@ -2,6 +2,7 @@ import { ManagerCard } from "@/components/preferences";
 import { View, Text } from "@/components/theme/Themed";
 import Colors from "@/constants/Colors";
 import { IManagers } from "@/shared-libs/firestore/trendly-pro/models/managers";
+import ImageComponent from "@/shared-uis/components/image-component";
 import { imageUrl } from "@/utils/url";
 import { faEllipsisH } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
@@ -46,7 +47,13 @@ const MembersCard: FC<MembersCardProps> = ({ manager, cardType, action }) => {
           gap: 10,
         }}
       >
-        <Avatar.Image size={40} source={imageUrl(manager.profileImage)} />
+        <ImageComponent
+          size="small"
+          shape="circle"
+          initials={manager.name}
+          url={manager.profileImage || ""}
+          altText="Image"
+        />
         <View>
           <Text style={{ fontSize: 16 }}>{manager.name}</Text>
           <Text style={{ fontSize: 16 }}>{manager.email}</Text>

components/collaboration-card/card-components/CollaborationHeader.tsx

@@ -7,6 +7,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
 import Colors from "@/constants/Colors";
 import { faEllipsisH } from "@fortawesome/free-solid-svg-icons";
 import { useTheme } from "@react-navigation/native";
+import ImageComponent from "@/shared-uis/components/image-component";
 
 interface CollaborationHeaderProps {
   collabName: string;
@@ -47,8 +48,11 @@ const CollaborationHeader: FC<CollaborationHeaderProps> = ({
           gap: 8,
         }}
       >
-        <Image
-          source={{ uri: brandImage }}
+        <ImageComponent
+          url={brandImage}
+          altText="Image"
+          shape="circle"
+          size="small"
           style={{
             width: 40,
             height: 40,

components/collaboration/collaboration-details/OverviewTabContent.tsx

@@ -32,6 +32,7 @@ import BrandModal from "./modal/BrandModal";
 import ManagerModal from "./modal/ManagerModal";
 import { PromotionType } from "@/shared-libs/firestore/trendly-pro/constants/promotion-type";
 import ViewCollaborationMap from "@/components/view-collaboration/ViewCollaborationMap";
+import ImageComponent from "@/shared-uis/components/image-component";
 
 interface CollaborationDetailsContentProps {
   collaboration: CollaborationDetail;
@@ -186,8 +187,11 @@ const OverviewTabContent = (props: CollaborationDetailsContentProps) => {
                     flexGrow: 1,
                   }}
                 >
-                  <Image
-                    source={{ uri: props.collaboration.logo }}
+                  <ImageComponent
+                    url={props.collaboration.logo}
+                    altText="Brand Logo"
+                    shape="square"
+                    size="small"
                     style={{ width: 40, height: 40, borderRadius: 5 }}
                   />
                   <View style={{ flex: 1 }}>
@@ -442,12 +446,12 @@ const OverviewTabContent = (props: CollaborationDetailsContentProps) => {
                   gap: 10,
                 }}
               >
-                <Image
-                  source={
-                    !managerDetails?.profileImage
-                      ? { uri: PLACEHOLDER_IMAGE }
-                      : { uri: managerDetails?.profileImage }
-                  }
+                <ImageComponent
+                  url={managerDetails?.profileImage}
+                  size="small"
+                  altText="Manager Profile Image"
+                  initials={managerDetails?.name}
+                  initialsSize={16}
                   style={{
                     width: 40,
                     height: 40,

components/collaboration/collaboration-details/modal/BrandModal.tsx

@@ -7,6 +7,7 @@ import { Chip, Modal } from "react-native-paper";
 import Colors from "@/constants/Colors";
 import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
 import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
+import ImageComponent from "@/shared-uis/components/image-component";
 
 interface BrandModalProps {
   brand: {
@@ -42,8 +43,11 @@ const BrandModal: React.FC<BrandModalProps> = ({
     >
       <View style={{ alignItems: "center", gap: 20 }}>
         {/* Brand Image */}
-        <Image
-          source={{ uri: brand.image }}
+        <ImageComponent
+          url={brand.image}
+          altText="Brand Image"
+          shape="square"
+          size="medium"
           style={{
             width: 120,
             height: 120,

components/collaboration/collaboration-details/modal/ManagerModal.tsx

@@ -5,6 +5,7 @@ import { Text, View } from "@/components/theme/Themed";
 import stylesFn from "@/styles/modal/UploadModal.styles";
 import { Chip, Modal } from "react-native-paper";
 import Colors from "@/constants/Colors";
+import ImageComponent from "@/shared-uis/components/image-component";
 
 interface ManagerModalProps {
   managerName: string;
@@ -39,13 +40,18 @@ const ManagerModal: React.FC<ManagerModalProps> = ({
     >
       <View style={{ alignItems: "center", gap: 20 }}>
         {/* Brand Image */}
-        <Image
-          source={{ uri: managerImage }}
+        <ImageComponent
+          url={managerImage}
+          altText={managerName}
+          shape="circle"
+          size="medium"
           style={{
             width: 120,
             height: 120,
             borderRadius: 240,
           }}
+          initials={managerName}
+          initialsSize={40}
         />
 
         {/* Brand Name */}

components/contract-card/ContractHeader.tsx

@@ -8,6 +8,7 @@ import Colors from "@/constants/Colors";
 import { faEllipsisH } from "@fortawesome/free-solid-svg-icons";
 import { useTheme } from "@react-navigation/native";
 import { imageUrl } from "@/utils/url";
+import ImageComponent from "@/shared-uis/components/image-component";
 
 interface ContractHeaderProps {
   username: string;
@@ -46,8 +47,12 @@ const ContractHeader: FC<ContractHeaderProps> = ({
           gap: 8,
         }}
       >
-        <Image
-          source={imageUrl(userImage)}
+        <ImageComponent
+          url={userImage}
+          altText="Image"
+          shape="circle"
+          initials={username}
+          size="small"
           style={{
             width: 40,
             height: 40,