Starting ActivateInstitution screens

src/app/navigation/AccountNavigator.js

@@ -7,6 +7,8 @@ import Abbout from "../screens/Abbout";
 import ActivateInstitution from "../screens/ActivateInstitution";
 import UpdatePassword from "../screens/UpdatePassword";
 import EditUserData from "../screens/EditUserData";
+import ActivateInstitutionCode from "../screens/ActivateInstitutionCode";
+import ActivateInstitutionShowCode from "../screens/ActivateInstitutionShowCode";
 
 const Stack = createStackNavigator();
 
@@ -53,6 +55,28 @@ const AccountNavigator = () => (
         },
       }}
     />
+    <Stack.Screen
+      name="ActivateInstitutionCode"
+      component={ActivateInstitutionCode}
+      initialParams={{ instRole : "" }}
+      options={{
+        title: "",
+        headerStyle: {
+          backgroundColor: "white",
+        },
+      }}
+    />
+    <Stack.Screen
+      name="ActivateInstitutionShowCode"
+      component={ActivateInstitutionShowCode}
+      initialParams={{ code: "" }}
+      options={{
+        title: "",
+        headerStyle: {
+          backgroundColor: "white",
+        },
+      }}
+    />
     <Stack.Screen
       name="UpdatePassword"
       component={UpdatePassword}
@@ -84,6 +108,8 @@ const AccountNavigator = () => (
         },
       }}
     /> 
+
+
   </Stack.Navigator>
 );
 

src/app/screens/ActivateInstitution.js

@@ -1,10 +1,106 @@
-import React from "react";
-import {View, Text} from "react-native";
+import React, { useState } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { dimensions } from "../config/dimensions";
+import colors from "../config/colors";
+import SearchablePicker from "../components/SearchablePicker";
+import Button from "../components/Button";
 
-export default function ActivateInstitution(props) {
+function Header() {
+  return (
+    <View
+      style={{
+        paddingVertical: 24,
+        width: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Text
+        style={{
+          fontSize: dimensions.text.secondary,
+          color: colors.primary,
+          fontWeight: "bold",
+        }}
+      >
+        Ativar instituição
+      </Text>
+    </View>
+  );
+}
+
+function RolePicker({ setSelected }) {
+  const [items, setItems] = useState([
+    { value: "Responsável", label: "Responsável" },
+    { value: "Não responsável", label: "Não responsável" },
+  ]);
+
+  return (
+    <SearchablePicker
+      items={items}
+      setItems={setItems}
+      setSelected={setSelected}
+      formPlaceholder={"Selecione o vínculo institucional"}
+      searchPlaceholder={"Busca..."}
+      marginLeft={0}
+    />
+  );
+}
+
+function SelectInstitutionalRole({ setInstRole, onPress }) {
   return (
-    <View>
-      <Text>Ativar instituição</Text>
+    <View flex={1} padding={16} width="100%">
+      <Header />
+      <Text
+        style={{
+          padding: 15,
+          marginTop: 24,
+          fontWeight: "bold",
+          textAlign: "center",
+        }}
+      >
+        A instituição da qual você faz parte está cadastrada no projeto Cemaden
+        Educação. Se no projeto você é responsável pela instituição, selecione a
+        opção “Responsável” no campo “Vínculo”.
+      </Text>
+
+      <Text style={styles.labelStyle}>Vínculo institucional:</Text>
+
+      <View flexDirection="row">
+        <RolePicker setSelected={setInstRole} />
+      </View>
+
+      <Button
+        style={{ marginTop: 24 }}
+        title="Próximo"
+        onPress={() => onPress()}
+      />
     </View>
-  )
+  );
 }
+
+export default function ActivateInstitution(props) {
+  const [instRole, setInstRole] = useState(null);
+
+  return (
+    <SelectInstitutionalRole
+      setInstRole={setInstRole}
+      onPress={() => {
+        props.navigation.navigate("ActivateInstitutionCode", {instRole: instRole});
+      }}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  labelStyle: {
+    fontSize: dimensions.text.secondary,
+    fontWeight: "bold",
+    textAlign: "left",
+    color: colors.secondary,
+    marginBottom: 12,
+    marginTop: 48,
+  },
+  iconField: {
+    flexDirection: "row",
+  },
+});

src/app/screens/ActivateInstitutionCode.js

@@ -0,0 +1,161 @@
+import React, { useState, useContext } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { dimensions } from "../config/dimensions";
+import colors from "../config/colors";
+import Button from "../components/Button";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { AuthContext } from "../auth/context";
+import {
+  Form,
+  SubmitButton,
+  FormField,
+  ErrorMessage,
+} from "../components/forms";
+import {KeyboardAwareScrollView} from "react-native-keyboard-aware-scroll-view";
+
+function Header() {
+  return (
+    <View
+      style={{
+        paddingVertical: 24,
+        width: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Text
+        style={{
+          fontSize: dimensions.text.secondary,
+          color: colors.primary,
+          fontWeight: "bold",
+        }}
+      >
+        Ativar instituição
+      </Text>
+    </View>
+  );
+}
+
+function Institution({ user, institutionRole }) {
+  return (
+    <View style={{ marginTop: 24, marginBottom: 24 }}>
+      <Text style={styles.label}>Tippo de instituição: </Text>
+      <View style={{ flexDirection: "row" }}>
+        <MaterialCommunityIcons name="bank" size={30} color={colors.primary} />
+        <Text style={styles.subText}>{user.institutionType}</Text>
+      </View>
+
+      <Text style={[styles.label, { marginTop: 24 }]}>
+        Nome da instituição:
+      </Text>
+      <View style={{ flexDirection: "row" }}>
+        <MaterialCommunityIcons name="bank" size={30} color={colors.primary} />
+        <Text style={styles.subText}>{user.institutionName}</Text>
+      </View>
+
+      <Text style={[styles.label, { marginTop: 24 }]}>
+        Vínculo institucional:
+      </Text>
+      <View style={{ flexDirection: "row" }}>
+        <MaterialCommunityIcons
+          name="account"
+          size={30}
+          color={colors.primary}
+        />
+        <Text style={styles.subText}>{institutionRole}</Text>
+      </View>
+    </View>
+  );
+}
+
+function ValidateCode({ institutionRole, user }) {
+  return (
+    <View flex={1} padding={16} width="100%">
+      <Header />
+
+      <Institution user={user} institutionRole={institutionRole} />
+
+      <View style={styles.iconField}>
+        <MaterialCommunityIcons
+          name="key"
+          size={30}
+          color={colors.primary}
+          style={{
+            transform: [{ rotate: "-90deg" }],
+          }}
+        />
+        <FormField
+          paddingRight={2}
+          flex={1}
+          maxLength={12}
+          name="code"
+          numberOfLines={2}
+          placeholder="Digite o código de ativação"
+        />
+      </View>
+
+      <SubmitButton title="Confirmar"/>
+    </View>
+  );
+}
+
+export default function ActivateInstitutionCode({ route, navigation }) {
+  const { instRole } = route.params;
+  const { user, _ } = useContext(AuthContext);
+
+  return (
+    <Form
+      initialValues={{
+        code: "",
+      }}
+      onSubmit={(form) => {
+        console.log("Forms values: \n" + JSON.stringify(form));
+        navigation.navigate("ActivateInstitutionShowCode", { code: form.code });
+      }}
+    >
+      <KeyboardAwareScrollView>
+      <ValidateCode
+        user={user}
+        institutionRole={instRole}
+      />
+        </KeyboardAwareScrollView>
+    </Form>
+  );
+}
+
+const styles = StyleSheet.create({
+  label: {
+    fontSize: dimensions.text.secondary,
+    marginBottom: 12,
+    fontWeight: "bold",
+    textAlign: "left",
+    color: colors.secondary,
+  },
+  subText: {
+    color: colors.subText,
+    fontSize: 16,
+    alignSelf: "center",
+    fontWeight: "500",
+    paddingLeft: 16,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "bold",
+    textAlign: "center",
+    color: colors.primary,
+  },
+  labelStyle: {
+    fontSize: dimensions.text.secondary,
+    fontWeight: "bold",
+    textAlign: "left",
+    color: colors.secondary,
+    marginBottom: 12,
+    marginTop: 48,
+  },
+  iconField: {
+    justifyContent: "center",
+    alignItems:"center",
+    flexDirection: "row",
+    marginBottom: 24,
+  },
+});

src/app/screens/ActivateInstitutionShowCode.js

@@ -0,0 +1,13 @@
+import React, { useState, useContext } from "react";
+import {View, Text} from "react-native";
+
+
+export default function ActivateInstitutionShowCode({route}) {
+  const {code} = route.params
+
+  return (
+    <View>
+      <Text>{code}</Text>
+      </View>
+  )
+}