Activate Institution screens implemented. API hooks are still missing

src/app/screens/ActivateInstitution.js

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { View, Text, StyleSheet } from "react-native";
+import { showMessage } from "react-native-flash-message";
 import { dimensions } from "../config/dimensions";
 import colors from "../config/colors";
 import SearchablePicker from "../components/SearchablePicker";

src/app/screens/ActivateInstitutionCode.js

@@ -11,7 +11,8 @@ import {
   FormField,
   ErrorMessage,
 } from "../components/forms";
-import {KeyboardAwareScrollView} from "react-native-keyboard-aware-scroll-view";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+import ConfirmationModal from "../components/ConfirmationModal";
 
 function Header() {
   return (
@@ -94,15 +95,40 @@ function ValidateCode({ institutionRole, user }) {
         />
       </View>
 
-      <SubmitButton title="Confirmar"/>
+      <SubmitButton title="Confirmar" />
     </View>
   );
 }
 
+function verifyCode(code) {
+  return true;
+}
+
+function processOnSubmit(navigation, form, instRole, setShowLog) {
+  if (instRole == "Não responsável") {
+    if (verifyCode(form.code)) {
+      setShowLog({show: true, message: true});
+    } else {
+      setShowLog({show: true, message: false});
+    }
+
+  } else if (verifyCode(form.code)) {
+      navigation.navigate("ActivateInstitutionShowCode", { code: form.code });
+    } else {
+      setShowLog({show: true, message: false});
+    }
+
+    // navigation.navigate("ActivateInstitutionShowCode", { code: form.code });
+  
+}
+
 export default function ActivateInstitutionCode({ route, navigation }) {
   const { instRole } = route.params;
   const { user, _ } = useContext(AuthContext);
 
+  const initialState = {show: false, message: true}
+  const [showLog, setShowLog] = useState(initialState);
+
   return (
     <Form
       initialValues={{
@@ -110,14 +136,19 @@ export default function ActivateInstitutionCode({ route, navigation }) {
       }}
       onSubmit={(form) => {
         console.log("Forms values: \n" + JSON.stringify(form));
-        navigation.navigate("ActivateInstitutionShowCode", { code: form.code });
+        processOnSubmit(navigation, form, instRole, setShowLog);
       }}
     >
-      <KeyboardAwareScrollView>
-      <ValidateCode
-        user={user}
-        institutionRole={instRole}
+      <ConfirmationModal
+        show={showLog.show}
+        description={showLog.message ? "O código de ativação foi validado com sucesso." : "O código de ativação informado não coincide com o código do responsável pela instituição no Cemaden Educação."}
+        confirmationLabel="OK"
+        onConfirm={() => setShowLog(initialState)}
+        onDecline={() => setShowLog(initialState)}
       />
+
+      <KeyboardAwareScrollView>
+        <ValidateCode user={user} institutionRole={instRole} />
       </KeyboardAwareScrollView>
     </Form>
   );
@@ -154,7 +185,7 @@ const styles = StyleSheet.create({
   },
   iconField: {
     justifyContent: "center",
-    alignItems:"center",
+    alignItems: "center",
     flexDirection: "row",
     marginBottom: 24,
   },

src/app/screens/ActivateInstitutionShowCode.js

@@ -1,13 +1,60 @@
 import React, { useState, useContext } from "react";
-import {View, Text} from "react-native";
+import { View, Text } from "react-native";
+import { dimensions } from "../config/dimensions";
+import colors from "../config/colors";
 
+function Header() {
+  return (
+    <View
+      style={{
+        paddingVertical: 24,
+        width: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Text
+        style={{
+          fontSize: dimensions.text.secondary,
+          color: colors.primary,
+          fontWeight: "bold",
+        }}
+      >
+        Código de ativação
+      </Text>
+    </View>
+  );
+}
 
-export default function ActivateInstitutionShowCode({route}) {
-  const {code} = route.params
+
+export default function ActivateInstitutionShowCode({ route }) {
+  const { code } = route.params;
+  const [actCode, setActCode] = useState("123456789012");
 
   return (
     <View>
-      <Text>{code}</Text>
+      <Header />
+      <Text
+        style={{
+          padding: 15,
+          marginTop: 24,
+          fontWeight: "bold",
+          textAlign: "center",
+        }}
+      >
+        Você é responsável pela institução. Compartilhe o código de ativação com
+        as demais pessoas vinculadas à instituição que utilizam o aplicativo
+      </Text>
+
+      <Text
+        style={{
+          padding: 15,
+          marginTop: 24,
+          fontWeight: "bold",
+          textAlign: "center",
+          fontSize: dimensions.text.header
+        }}
+      >{actCode}</Text>
     </View>
-  )
+  );
 }