feat: add business ecosystem screen

src/components/carousel/VerticalEcosystemCarousel.tsx

@@ -52,6 +52,7 @@ const styles = StyleSheet.create({
     width: 210,
     justifyContent: "center",
     alignItems: "center",
+    marginRight: 16,
   },
 });
 

src/navigation/RootNavigator.tsx

@@ -10,7 +10,6 @@ import { getUser } from "../redux/user/actions";
 import LandingScreen from "../screens/auth/LandingScreen";
 import firebase from "firebase";
 import { Alert } from "react-native";
-import CreateBusinessEcosystemScreen from "../screens/CreateBusinessEcosystemScreen";
 
 /**
  * A root stack navigator is often used for displaying modals on top of all other content.
@@ -74,11 +73,11 @@ const RootNavigator = () => {
         component={SuccessChangePasswordScreen}
         options={{ headerShown: false }}
       />
-      <RootStack.Screen
+      {/* <RootStack.Screen
         name="CreateBusinessEcosystem"
         component={CreateBusinessEcosystemScreen}
         options={{ title: "" }}
-      />
+      /> */}
     </RootStack.Navigator>
   ) : (
     <RootStack.Navigator>

src/screens/auth/LandingScreen.tsx

@@ -13,6 +13,7 @@ export default function LandingScreen({
     <View style={styles.container}>
       <Image
         style={styles.logo}
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         source={require("../../../assets/images/ClickLogo.png")}
       />
     </View>

src/screens/ecosystem/BusinessEcosystemScreen.tsx

 import { useNavigation } from "@react-navigation/core";
 import * as React from "react";
-import { StyleSheet } from "react-native";
+import { ScrollView, StyleSheet } from "react-native";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import SmallButton from "../../components/button/SmallButton";
+import VerticalEcosystemCarousel from "../../components/carousel/VerticalEcosystemCarousel";
 import Spacer from "../../components/Spacer/Spacer";
 import { Text, View } from "../../components/Themed";
 import Colors from "../../constants/Colors";
-
+import { useAppSelector } from "../../hooks/reduxHooks";
+import { IUser } from "../../types/firestore/User";
+import CategoryHorizontalCarousel from "../../components/carousel/CategoryHorizontalCarousel";
 const BusinessEcosystemScreen = () => {
-  const nav = useNavigation();
+  const listData = [
+    {
+      id: "5",
+      pic: "https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
+      name: "Pengolahan Kerupuk",
+      rate: 4,
+    },
+    {
+      id: "6",
+      pic: "https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
+      name: "Pengolahan Kerupuk",
+      rate: 5,
+    },
+  ];
 
+  const lists = [
+    {
+      id: "5",
+      name: "Pengolahan Kerupuk",
+    },
+    {
+      id: "6",
+      name: "Pengolahan Kerupuk",
+    },
+  ];
+  const nav = useNavigation();
+  const user: IUser = useAppSelector((state) => state.user);
   return (
-    <View style={styles.container}>
+    <ScrollView style={styles.container}>
       <View>
-        <Text>Ekosistem Bisnis</Text>
+        <Text style={styles.textLink}>Selamat Datang, {user.firstName}</Text>
       </View>
       <Spacer variant="xl" />
-      <SmallButton
-        colors="primary"
-        text="Buat Ekosistem Bisnis"
-        onPress={() => {
-          nav.navigate("CreateBusinessEcosystem");
-        }}
-      />
-      <Spacer variant="xl" />
       <View>
-        <TouchableOpacity
-          onPress={() => {
-            nav.navigate("Ecosystem", { screen: "MyEcosystem" });
-          }}
-        >
-          <Text style={styles.link}>Ekosistem Saya</Text>
-        </TouchableOpacity>
+        <Text style={styles.text}>Ekosistem Bisnis</Text>
       </View>
       <Spacer variant="xl" />
       <View>
-        <TouchableOpacity
-          onPress={() => {
-            nav.navigate("Ecosystem", { screen: "EcosystemDetails" });
-          }}
-        >
-          <Text style={styles.link}>Sudah Bergabung</Text>
-        </TouchableOpacity>
+        <SmallButton
+          text={"Buat Ekosistem Bisnis"}
+          onPress={() => nav.navigate("CreateBusinessEcosystem")}
+          colors={"primary"}
+        />
       </View>
       <Spacer variant="xl" />
-      <View>
-        <TouchableOpacity
-          onPress={() => {
-            nav.navigate("Ecosystem", {
-              screen: "BusinessCategory",
-            });
-          }}
-        >
-          <Text style={styles.link}>Kategori Bisnis</Text>
-        </TouchableOpacity>
+      <View style={styles.headContainer}>
+        <View style={styles.textContainer}>
+          <Text style={styles.subTitle}>Ekosistem Saya</Text>
+        </View>
+        <View>
+          <TouchableOpacity
+            onPress={() => nav.navigate("Ecosystem", { screen: "MyEcosystem" })}
+          >
+            <Text style={{ fontSize: 16, color: Colors.text.link }}>
+              Lihat Semua
+            </Text>
+          </TouchableOpacity>
+        </View>
       </View>
+      <Spacer variant="l" />
+      <VerticalEcosystemCarousel list={listData} />
       <Spacer variant="xl" />
-      <View>
-        <TouchableOpacity
-          onPress={() => {
-            nav.navigate("Ecosystem", { screen: "Popular" });
-          }}
-        >
-          <Text style={styles.link}>Paling Populer</Text>
-        </TouchableOpacity>
+      <View style={styles.headContainer}>
+        <View style={styles.textContainer}>
+          <Text style={styles.subTitle}>Sudah bergabung</Text>
+        </View>
+        <View>
+          <TouchableOpacity
+            onPress={() =>
+              nav.navigate("Ecosystem", { screen: "EcosystemDetails" })
+            }
+          >
+            <Text style={{ fontSize: 16, color: Colors.text.link }}>
+              Lihat Semua
+            </Text>
+          </TouchableOpacity>
+        </View>
       </View>
+      <Spacer variant="l" />
+      <VerticalEcosystemCarousel list={listData} />
       <Spacer variant="xl" />
-      <View>
-        <TouchableOpacity
-          onPress={() => {
-            nav.navigate("Ecosystem", { screen: "Latest" });
-          }}
-        >
-          <Text style={styles.link}>Terbaru Minggu Ini</Text>
-        </TouchableOpacity>
+      <View style={styles.headContainer}>
+        <View style={styles.textContainer}>
+          <Text style={styles.subTitle}>Kategori Bisnis</Text>
+        </View>
+        <View>
+          <TouchableOpacity
+            onPress={() =>
+              nav.navigate("Ecosystem", {
+                screen: "BusinessCategory",
+              })
+            }
+          >
+            <Text style={{ fontSize: 16, color: Colors.text.link }}>
+              Lihat Semua
+            </Text>
+          </TouchableOpacity>
+        </View>
       </View>
+      <Spacer variant="l" />
+      <VerticalEcosystemCarousel list={listData} />
       <Spacer variant="xl" />
-      <View>
-        <TouchableOpacity
-          onPress={() => {
-            nav.navigate("Ecosystem", { screen: "EcosystemMap" });
-          }}
-        >
-          <Text style={styles.link}>Peta Ekosistem</Text>
-        </TouchableOpacity>
+      <View style={styles.headContainer}>
+        <View style={styles.textContainer}>
+          <Text style={styles.subTitle}>Paling Populer</Text>
+        </View>
+        <View>
+          <TouchableOpacity
+            onPress={() => nav.navigate("Ecosystem", { screen: "Popular" })}
+          >
+            <Text style={{ fontSize: 16, color: Colors.text.link }}>
+              Lihat Semua
+            </Text>
+          </TouchableOpacity>
+        </View>
       </View>
-    </View>
+      <Spacer variant="l" />
+      <CategoryHorizontalCarousel list={lists} />
+      <Spacer variant="xl" />
+      <View style={styles.headContainer}>
+        <View style={styles.textContainer}>
+          <Text style={styles.subTitle}>Terbaru Minggu Ini</Text>
+        </View>
+        <View>
+          <TouchableOpacity
+            onPress={() => nav.navigate("Ecosystem", { screen: "Latest" })}
+          >
+            <Text style={{ fontSize: 16, color: Colors.text.link }}>
+              Lihat Semua
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+      <Spacer variant="l" />
+      <VerticalEcosystemCarousel list={listData} />
+      <Spacer variant="xl" />
+    </ScrollView>
   );
 };
 
@@ -93,14 +155,29 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: Colors.background,
-    paddingHorizontal: 24,
-    justifyContent: "center",
+    padding: 24,
   },
-  link: {
+  textLink: {
+    fontSize: 24,
     color: Colors.text.link,
-    fontStyle: "normal",
-    fontSize: 14,
-    fontWeight: "400",
+  },
+  text: {
+    fontSize: 24,
+    color: Colors.text.title,
+  },
+  textContainer: {
+    flex: 1,
+    paddingRight: 118,
+  },
+  headContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    paddingBottom: 16,
+    alignItems: "center",
+  },
+  subTitle: {
+    fontSize: 20,
+    color: Colors.text.subtitle,
   },
 });
 

src/screens/profile/AccountSettingsScreen.tsx

@@ -50,6 +50,7 @@ export default function AccountSettingsScreen({
           <Image
             style={styles.image}
             source={
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
               user.pic !== ""
                 ? { uri: user.pic }
                 : require("../../../assets/images/defaultProfilePic.png")