Bugfix/make-brands-perfect

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Trendly Brands",
     "slug": "trendly-brands",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "orientation": "portrait",
     "icon": "./assets/images/icon2.png",
     "scheme": "trendly-brands",

app/(auth)/lets-start.tsx

@@ -0,0 +1,103 @@
+import Button from "@/components/ui/button";
+import AppLayout from "@/layouts/app-layout";
+import { CREATORS_FE_URL } from "@/shared-constants/app";
+import Colors from "@/shared-uis/constants/Colors";
+import { imageUrl } from "@/utils/url";
+import { useTheme } from "@react-navigation/native";
+import { router } from "expo-router";
+import React from "react";
+import { Image, Platform, StyleSheet, View } from "react-native";
+import { Text } from "react-native-paper";
+
+const TrendlyScreen = () => {
+  // const { socials } = useSocialContext();
+  const theme = useTheme();
+
+  return (
+    <AppLayout withWebPadding={true}>
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: Colors(theme).background,
+          padding: 16,
+          justifyContent: "space-between",
+        }}
+      >
+        <View style={{ flex: 1, justifyContent: "center" }}>
+          {/* Illustration */}
+          <View>
+            <View style={styles.imageContainer}>
+              <Image
+                source={imageUrl(require("@/assets/images/design1.png"))} // Replace with your local image
+                style={styles.image}
+                resizeMode="contain"
+              />
+            </View>
+
+            {/* No Account Text */}
+            <Text style={styles.noAccountText}>Welcome to Trendly - for Brands</Text>
+            <Text
+              style={{
+                textAlign: "center",
+                color: Colors(theme).gray100,
+                marginBottom: 30,
+              }}
+            >
+              Welcome to the Trendly community! To get started, let us know which audience you belong to — are you a brand or an agency looking to collaborate with creators?
+            </Text>
+            <View style={[styles.buttonContainer, { display: "flex", alignContent: "stretch", gap: 16, alignItems: "stretch", width: 300, alignSelf: "center" }]}>
+              <Button onPress={() => router.push("/pre-signin")}>Join as Brand / Agency</Button>
+              <Button mode={"outlined"} onPress={() => {
+                if (Platform.OS === "web")
+                  window.open(CREATORS_FE_URL, "_blank");
+                else
+                  router.push("/wrong-app")
+              }}>Join as Influencer</Button>
+              {/* <InstagramLoginButton />
+              <FacebookLoginButton /> */}
+            </View>
+          </View>
+        </View>
+
+        {/* Buttons */}
+
+      </View>
+    </AppLayout>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "bold",
+  },
+  imageContainer: {
+    alignItems: "center",
+    // marginVertical: 0,
+  },
+  image: {
+    height: 300,
+    width: 300,
+  },
+  noAccountText: {
+    textAlign: "center",
+    fontSize: 18,
+    fontWeight: "bold",
+    marginVertical: 10,
+  },
+  buttonContainer: {
+    alignItems: "center",
+    marginTop: 20,
+  },
+  button: {
+    marginVertical: 10,
+    paddingVertical: 5,
+  },
+});
+
+export default TrendlyScreen;

app/(auth)/wrong-app.tsx

@@ -0,0 +1,100 @@
+import Button from "@/components/ui/button";
+import AppLayout from "@/layouts/app-layout";
+import { CREATORS_APPSTORE_URL, CREATORS_FE_URL } from "@/shared-constants/app";
+import Colors from "@/shared-uis/constants/Colors";
+import { imageUrl } from "@/utils/url";
+import { useTheme } from "@react-navigation/native";
+import React from "react";
+import { Image, Linking, StyleSheet, View } from "react-native";
+import { Text } from "react-native-paper";
+
+const TrendlyScreen = () => {
+  // const { socials } = useSocialContext();
+  const theme = useTheme();
+
+  return (
+    <AppLayout withWebPadding={true}>
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: Colors(theme).background,
+          padding: 16,
+          justifyContent: "space-between",
+        }}
+      >
+
+        <View style={{ flex: 1, justifyContent: "center" }}>
+          {/* Illustration */}
+          <View>
+            <View style={styles.imageContainer}>
+              <Image
+                source={imageUrl(require("@/assets/images/design1.png"))} // Replace with your local image
+                style={styles.image}
+                resizeMode="contain"
+              />
+            </View>
+
+            {/* No Account Text */}
+            <Text style={styles.noAccountText}>You're currently on the wrong app!</Text>
+            <Text
+              style={{
+                textAlign: "center",
+                color: Colors(theme).gray100,
+                marginBottom: 30,
+              }}
+            >
+              If you're a creator, please download the Trendly app from the App Store or continue using the web version.
+            </Text>
+            <View style={[styles.buttonContainer, { display: "flex", alignContent: "stretch", gap: 16, alignItems: "stretch", width: 300, alignSelf: "center" }]}>
+              <Button onPress={() => {
+                Linking.openURL(CREATORS_APPSTORE_URL)
+              }}> Download on AppStore</Button>
+              <Button mode={"outlined"} onPress={() => Linking.openURL(CREATORS_FE_URL)}>Open on Web</Button>
+              {/* <InstagramLoginButton />
+              <FacebookLoginButton /> */}
+            </View>
+          </View>
+        </View>
+
+        {/* Buttons */}
+
+      </View>
+    </AppLayout >
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "bold",
+  },
+  imageContainer: {
+    alignItems: "center",
+    // marginVertical: 0,
+  },
+  image: {
+    height: 300,
+    width: 300,
+  },
+  noAccountText: {
+    textAlign: "center",
+    fontSize: 18,
+    fontWeight: "bold",
+    marginVertical: 10,
+  },
+  buttonContainer: {
+    alignItems: "center",
+    marginTop: 20,
+  },
+  button: {
+    marginVertical: 10,
+    paddingVertical: 5,
+  },
+});
+
+export default TrendlyScreen;

app/(main)/(drawer)/(tabs)/_layout.tsx

@@ -7,6 +7,7 @@ import NotificationIcon from "@/components/notifications/notification-icon";
 import { View } from "@/components/theme/Themed";
 import { useClientOnlyValue } from "@/components/useClientOnlyValue";
 import Colors from "@/constants/Colors";
+import { useChatContext } from "@/contexts";
 import { useBreakpoints } from "@/hooks";
 import {
   faComment,
@@ -22,10 +23,12 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
 import { useTheme } from "@react-navigation/native";
+import { Badge } from "react-native-paper";
 
 const TabLayout = () => {
   const { xl } = useBreakpoints();
   const theme = useTheme();
+  const { unreadCount } = useChatContext()
 
   return (
     <Tabs
@@ -95,11 +98,29 @@ const TabLayout = () => {
         name="messages"
         options={{
           tabBarIcon: ({ color, focused }) => (
-            <FontAwesomeIcon
-              color={color}
-              icon={focused ? faCommentSolid : faComment}
-              size={22}
-            />
+            <>
+              <FontAwesomeIcon
+                color={color}
+                icon={focused ? faCommentSolid : faComment}
+                size={22}
+              />
+              {(unreadCount > 0) && (
+                <Badge
+                  visible={true}
+                  size={16}
+                  selectionColor={Colors(theme).red}
+                  style={{
+                    backgroundColor: Colors(theme).red,
+                    zIndex: 1,
+                    position: "absolute",
+                    top: 0,
+                    right: 20,
+                  }}
+                >
+                  {unreadCount}
+                </Badge>
+              )}
+            </>
           ),
           title: "Messages",
           headerTitleAlign: "left",

app/_layout.tsx

@@ -110,6 +110,7 @@ const RootLayoutStack = () => {
     ) {
       // On boot up, session doesn't exist and user is in main group or /, redirect to pre-signin
       resetAndNavigate("/pre-signin");
+      // resetAndNavigate("/lets-start");
     }
     // Redirect to respective screen
   }, [session, isLoading]);

components/channel/channel.tsx

@@ -107,47 +107,49 @@ const ChannelNative = () => {
   const title = channelName + influencerName || 'Chat';
 
   return (
-    <Channel
-      AttachButton={AttachButton}
-      audioRecordingEnabled
-      channel={channel}
-      CommandsButton={CommandsButton}
-      MoreOptionsButton={MoreOptionsButton}
-      SendButton={SendButton}
-    >
-      <ScreenHeader
-        title={title}
-        rightAction
-        rightActionButton={
-          <Pressable
-            style={{
-              marginRight: 8,
-            }}
-            onPress={() => {
-              router.push(`/contract-details/${contract.streamChannelId}`);
-            }}
-          >
-            <Avatar.Image
+    <View style={{ flex: 1 }}>
+      <Channel
+        AttachButton={AttachButton}
+        audioRecordingEnabled
+        channel={channel}
+        CommandsButton={CommandsButton}
+        MoreOptionsButton={MoreOptionsButton}
+        SendButton={SendButton}
+      >
+        <ScreenHeader
+          title={title}
+          rightAction
+          rightActionButton={
+            <Pressable
               style={{
-                backgroundColor: Colors(theme).transparent,
+                marginRight: 8,
               }}
-              size={40}
-              source={imageUrl(influencer?.profileImage)}
-            />
-          </Pressable>
-        }
-      />
-      <ChatMessageTopbar
-        contract={{
-          ...contract,
-          id: channel?.data?.contractId as string,
-        }}
-      />
-      <MessageList />
-      <MessageInput
-        AttachmentPickerSelectionBar={AttachmentPickerSelectionBar}
-      />
-    </Channel>
+              onPress={() => {
+                router.push(`/contract-details/${contract.streamChannelId}`);
+              }}
+            >
+              <Avatar.Image
+                style={{
+                  backgroundColor: Colors(theme).transparent,
+                }}
+                size={40}
+                source={imageUrl(influencer?.profileImage)}
+              />
+            </Pressable>
+          }
+        />
+        <ChatMessageTopbar
+          contract={{
+            ...contract,
+            id: channel?.data?.contractId as string,
+          }}
+        />
+        <MessageList />
+        <MessageInput
+          AttachmentPickerSelectionBar={AttachmentPickerSelectionBar}
+        />
+      </Channel>
+    </View>
   );
 }