Bugfix/make-brands-perfect

app/(auth)/lets-start.tsx

@@ -28,7 +28,7 @@ const TrendlyScreen = () => {
           <View>
             <View style={styles.imageContainer}>
               <Image
-                source={imageUrl(require("@/assets/images/design1.png"))} // Replace with your local image
+                source={imageUrl(require("@/assets/images/icon2.png"))} // Replace with your local image
                 style={styles.image}
                 resizeMode="contain"
               />
@@ -81,8 +81,10 @@ const styles = StyleSheet.create({
     // marginVertical: 0,
   },
   image: {
-    height: 300,
-    width: 300,
+    height: 200,
+    width: 200,
+    borderRadius: 40,
+    marginBottom: 40,
   },
   noAccountText: {
     textAlign: "center",

app/(auth)/wrong-app.tsx

@@ -28,14 +28,14 @@ const TrendlyScreen = () => {
           <View>
             <View style={styles.imageContainer}>
               <Image
-                source={imageUrl(require("@/assets/images/design1.png"))} // Replace with your local image
+                source={imageUrl(require("@/assets/images/wrong-app.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={styles.noAccountText}>Oops! you are on wrong app!</Text>
             <Text
               style={{
                 textAlign: "center",
@@ -78,8 +78,9 @@ const styles = StyleSheet.create({
     // marginVertical: 0,
   },
   image: {
-    height: 300,
-    width: 300,
+    height: 250,
+    width: 250,
+    marginBottom: 40
   },
   noAccountText: {
     textAlign: "center",

app/(main)/(drawer)/(secondary)/applications.tsx

@@ -2,36 +2,13 @@ import ApplicationsTabContent from "@/components/collaboration/collaboration-det
 import { View } from "@/components/theme/Themed";
 import ScreenHeader from "@/components/ui/screen-header";
 import Colors from "@/constants/Colors";
-import {
-    useAuthContext,
-    useNotificationContext
-} from "@/contexts";
 import AppLayout from "@/layouts/app-layout";
 import { useTheme } from "@react-navigation/native";
 import React from "react";
 
 const ApplicationsScreen = () => {
     const theme = useTheme();
 
-    const {
-        manager,
-    } = useAuthContext();
-    const {
-        markAllNotificationsAsRead,
-        managerNotifications,
-        updateManagerNotification,
-    } = useNotificationContext();
-
-    const onMarkAsRead = (notificationId: string) => {
-        updateManagerNotification(
-            manager?.id as string,
-            notificationId,
-            {
-                isRead: true,
-            },
-        );
-    };
-
     return (
         <AppLayout withWebPadding={false}>
             <ScreenHeader

app/_layout.tsx

@@ -19,6 +19,7 @@ import { useEffect } from "react";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import "react-native-reanimated";
 
+import DownloadApp from "@/components/download";
 import { useColorScheme } from "@/components/theme/useColorScheme";
 import CustomPaperTheme from "@/constants/Themes/Theme";
 import {
@@ -109,8 +110,8 @@ const RootLayoutStack = () => {
       && (inMainGroup || pathname === "/")
     ) {
       // On boot up, session doesn't exist and user is in main group or /, redirect to pre-signin
-      resetAndNavigate("/pre-signin");
-      // resetAndNavigate("/lets-start");
+      // resetAndNavigate("/pre-signin");
+      resetAndNavigate("/lets-start");
     }
     // Redirect to respective screen
   }, [session, isLoading]);
@@ -119,6 +120,7 @@ const RootLayoutStack = () => {
     <ThemeProvider value={appTheme === "dark" ? DarkTheme : DefaultTheme}>
       <AWSContextProvider>
         <Provider theme={CustomPaperTheme(theme)}>
+          <DownloadApp />
           <Stack
             screenOptions={{
               animation: "ios",

components/NotificationCard.tsx

@@ -1,13 +1,13 @@
-import React from "react";
-import { View } from "react-native";
-import { Text, Card, Avatar } from "react-native-paper";
-import { stylesFn } from "@/styles/NotificationCard.styles";
-import { useTheme } from "@react-navigation/native";
-import { useRouter } from "expo-router";
-import Button from "./ui/button";
+import Colors from "@/constants/Colors";
+import { NotficationTypesToHandle } from "@/contexts/notification-context.provider";
+import { Theme, useTheme } from "@react-navigation/native";
+import { Href, useRouter } from "expo-router";
+import React, { useState } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import { ActivityIndicator, Card, Text } from "react-native-paper";
 
 interface NotificationCardProps {
-  avatar: string;
+  // avatar: string;
   data: {
     collaborationId?: string;
     groupId?: string;
@@ -18,33 +18,56 @@ interface NotificationCardProps {
   onMarkAsRead: () => void;
   time: number;
   title: string;
+  type: string
 }
 
 export const NotificationCard: React.FC<NotificationCardProps> = ({
-  avatar,
+  // avatar,
   data,
   description,
   isRead,
   onMarkAsRead,
   time,
   title,
+  type
 }) => {
   const theme = useTheme();
   const styles = stylesFn(theme);
   const router = useRouter();
+  const [loading, setLoading] = useState(false)
 
-  let action: string | undefined;
+  const action = async () => {
+    try {
+      setLoading(true);
+      if (NotficationTypesToHandle.includes(type)) {
+        let redirectUrl: Href;
 
-  if (data.collaborationId) {
-    action = `/collaboration-details/${data.collaborationId}`;
-  } else if (data.groupId) {
-    action = `/channel/${data.groupId}`; // TODO: Save the groupId or cid in the database
+        // "application", "new-quotation", "contract-start-request", "contract-end-request", "feedback-given"
+        if (type === "application") {
+          redirectUrl = `/collaboration-details/${data.collaborationId}`;
+        } else if (type === "new-quotation") {
+          redirectUrl = `/contract-details/${data.groupId}`; // TODO: Save the groupId or cid in the database
+        } else if (type === "contract-start-request") {
+          redirectUrl = `/contract-details/${data.groupId}`;
+        } else if (type === "contract-end-request") {
+          redirectUrl = `/contract-details/${data.groupId}`;
+        } else if (type === "feedback-given") {
+          redirectUrl = `/contract-details/${data.collaborationId}`;
+        } else
+          return;
+        router.push(redirectUrl);
+      }
+    } finally {
+      setLoading(false);
+    }
   }
-
   return (
-    <Card style={styles.card}>
-      <View style={styles.row}>
-        <Avatar.Image size={50} source={{ uri: avatar }} />
+    <Card style={[styles.card, isRead && styles.cardRead]}>
+      <Pressable style={styles.row} onPress={() => {
+        onMarkAsRead();
+        action();
+      }}>
+        {/* <Avatar.Image size={50} source={{ uri: avatar }} /> */}
         <View style={styles.content}>
           <Text style={styles.title}>
             {title}
@@ -75,28 +98,58 @@ export const NotificationCard: React.FC<NotificationCardProps> = ({
             }
           </Text>
         </View>
-      </View>
-      <View style={styles.actions}>
-        {action && (
-          <Button
-            mode="contained"
-            onPress={action ? () => {
-              onMarkAsRead();
-              router.push(action as string);
-            } : undefined}
-          >
-            Open
-          </Button>
-        )}
-        {!isRead && (
-          <Button
-            mode="outlined"
-            onPress={onMarkAsRead}
-          >
-            Mark as Read
-          </Button>
-        )}
-      </View>
+        {loading && <ActivityIndicator size="small" color={Colors(theme).primary} style={{ paddingHorizontal: 8 }} />}
+      </Pressable>
     </Card>
   );
 };
+
+export const stylesFn = (theme: Theme) => StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+    backgroundColor: Colors(theme).background,
+  },
+  contentContainer: {
+    gap: 16,
+    paddingBottom: 24,
+  },
+  card: {
+    padding: 16,
+    borderRadius: 10,
+    backgroundColor: Colors(theme).card,
+    shadowColor: Colors(theme).transparent,
+  },
+  cardRead: {
+    backgroundColor: Colors(theme).background,
+    borderWidth: 0,
+    borderColor: Colors(theme).border,
+    opacity: 0.6,
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  content: {
+    marginLeft: 16,
+    flex: 1,
+    color: Colors(theme).text,
+  },
+  title: {
+    fontWeight: "bold",
+    color: Colors(theme).text,
+  },
+  time: {
+    color: Colors(theme).text,
+    marginTop: 5,
+  },
+  actions: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    flexWrap: "wrap",
+    rowGap: 10,
+    columnGap: 10,
+    marginTop: 10,
+  },
+});
+