Confirmation modal for username/nickname in register screen

src/app/components/ConfirmationModal.js

@@ -2,7 +2,7 @@ import React from "react";
 import { Modal, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import colors from "../config/colors";
 import { dimensions } from "../config/dimensions";
-import { Ionicons } from "@expo/vector-icons";
+import { Ionicons, FontAwesome5 } from "@expo/vector-icons";
 
 function Btn({ label, onPress, bgColor, txtColor, style={} }) {
   return (
@@ -30,6 +30,7 @@ export default function ConfirmationModal({
   title = null,
   description = "",
   icon = null,
+  isNicknameConfirmation= false,
 }) {
   return (
     <Modal
@@ -56,12 +57,17 @@ export default function ConfirmationModal({
                 </Text>
               </View>
             )}
-            <View style={{ flexDirection: "row", alignItems: "center" }}>
-              {icon && (
+            <View style={{ flexDirection: "row", alignItems: "center", width: "95%" }}>
+              {icon && !isNicknameConfirmation && (
                 <View style={{ marginRight: 12 }}>
                   <Ionicons name={icon} size={30} color={colors.primary} />
                 </View>
               )}
+              {icon && isNicknameConfirmation && (
+                <View style={{ marginRight: 12, justifyContent: "flex-start", alignSelf: "flex-start" }}>
+                  <FontAwesome5 name={icon} size={20} color={colors.primary} />
+                </View>
+              )}
               <Text style={styles.text}>{description}</Text>
             </View>
             <View

src/app/screens/RegisterScreen.js

@@ -2,7 +2,6 @@ import {
   Form,
   SubmitButton,
   FormField,
-  ErrorMessage,
 } from "../components/forms";
 import React, { useState, useEffect, useContext } from "react";
 import {
@@ -16,11 +15,9 @@ import Screen from "../components/Screen";
 import { dimensions } from "../config/dimensions";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import colors from "../config/colors";
-import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import * as Yup from "yup";
 import FormDatePicker from "../components/forms/FormDatePicker";
 import moment from "moment";
-import { Shadow } from "react-native-shadow-2";
 import SearchablePicker from "../components/SearchablePicker";
 import { states, statesToCities } from "../assets/cities_states";
 import institutions from "../assets/institutions";
@@ -40,6 +37,7 @@ import constants from "../config/constants";
 import CheckBox from "../components/forms/CheckBox";
 import defaultStyles from "../config/styles";
 import PhoneNumberFormField from "../components/forms/PhoneNumberFormField";
+import { unMask, mask } from "react-native-mask-text";
 
 const phoneRegex = RegExp(
   /^\(?[\(]?([0-9]{2})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/
@@ -300,6 +298,11 @@ export default function RegisterScreen(props) {
   const [date, setDate] = useState(_moment);
   const [scroll, setScroll] = useState();
   const [showLog, setShowLog] = useState({ show: false, message: "" });
+  const [showModal, setShowModal] = useState({
+    show: false,
+    message: "",
+    form: null,
+  });
 
   const comparePassword = (password, confirmPassword) => {
     return password !== confirmPassword;
@@ -321,7 +324,6 @@ export default function RegisterScreen(props) {
       date.format("DD/MM/yyyy") === moment().format("DD/MM/yyyy") ? "" : date;
 
     const result = await signup({ ...form, dateofborn: formDate });
-    // console.log(JSON.stringify(result))
 
     switch (result.status) {
       case 200:
@@ -371,6 +373,35 @@ export default function RegisterScreen(props) {
     return !inUse;
   };
 
+  const copnfirmations = (form, actions) => {
+    console.log(form);
+    var current_mask =
+      form.number.length >= 11 ? "(99) 99999-9999" : "(99) 9999-9999";
+
+    const psw_match = comparePassword(form.password, form.confirmPassword);
+    if (psw_match) {
+      actions.setFieldError("confirmPassword", "As senhas não correspondem");
+      scroll.scrollTo({ x: 0, y: 0, animated: true });
+    } else {
+      fieldsAreNotInUse(form, actions).then((isNotUsed) => {
+        if (isNotUsed) {
+          setShowModal({
+            show: true,
+            form: form,
+            message:
+              'Você está cadastrando o apelido "' +
+              form.name +
+              '" e o número ' + mask(form.number, current_mask) +
+              '. Deseja continuar o cadastro?',
+          });
+        } else {
+          console.log("scrolll");
+          scroll.scrollTo({ x: 0, y: 0, animated: true });
+        }
+      });
+    }
+  };
+
   return (
     <Screen style={styles.containter}>
       <ConfirmationModal
@@ -379,6 +410,21 @@ export default function RegisterScreen(props) {
         confirmationLabel="OK"
         onConfirm={() => setShowLog({ ...showLog, show: false })}
       />
+      <ConfirmationModal
+        show={showModal.show}
+        description={showModal.message}
+        isNicknameConfirmation={true}
+        icon="user-check"
+        confirmationLabel="SIM"
+        declineLabel="NÃO"
+        onConfirm={() => {
+          handleSubmit(showModal.form);
+        }}
+        onDecline={() => {
+          setShowModal({ ...showModal, show: false, message: "" });
+        }}
+      />
+
       <Form
         initialValues={{
           name: "",
@@ -396,28 +442,7 @@ export default function RegisterScreen(props) {
           consent: false,
         }}
         onSubmit={(form, actions) => {
-          console.log(form);
-          const psw_match = comparePassword(
-            form.password,
-            form.confirmPassword
-          );
-
-          if (psw_match) {
-            actions.setFieldError(
-              "confirmPassword",
-              "As senhas não correspondem"
-            );
-            scroll.scrollTo({ x: 0, y: 0, animated: true });
-          } else {
-            fieldsAreNotInUse(form, actions).then((isNotUsed) => {
-              if (isNotUsed) {
-                handleSubmit(form);
-              } else {
-                console.log("scrolll");
-                scroll.scrollTo({ x: 0, y: 0, animated: true });
-              }
-            });
-          }
+          copnfirmations(form, actions);
         }}
         validationSchema={validationSchema}
       >
@@ -527,11 +552,13 @@ export default function RegisterScreen(props) {
             </View>
             <Text style={styles.labelStyle}>Nome da instituição</Text>
             <View style={{ flexDirection: "column", flex: 1 }}>
-              <View style={{...styles.iconField, marginBottom:12}}>
+              <View style={{ ...styles.iconField, marginBottom: 12 }}>
                 <MaterialCommunityIconsCustom name="bank" />
                 <InstitutionNamePicker name="institutionName" />
               </View>
-              <Text style={styles.warningText}>O nome da instituição é fornecido pelo Cemaden Educação</Text>
+              <Text style={styles.warningText}>
+                O nome da instituição é fornecido pelo Cemaden Educação
+              </Text>
             </View>
             <Text style={styles.labelStyle}>Vínculo institucional:</Text>
             <View style={[styles.iconField]}>
@@ -633,4 +660,4 @@ const styles = StyleSheet.create({
     textAlign: "left",
     marginBottom: 24,
   },
-});
+});