Modal Excluir

package.json

@@ -44,6 +44,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.73.4",
+    "react-native-modal": "^13.0.1",
     "react-native-pager-view": "^6.2.3",
     "react-native-reanimated": "~3.6.2",
     "react-native-safe-area-context": "4.8.2",

src/screens/SalesInspector/index.tsx

@@ -5,12 +5,14 @@ import useAuth from '@hooks/useAuth';
 import SellerServices from '@services/SellerServices';
 import ISeller from '@interfaces/Seller';
 import { View } from 'react-native';
+import Modal from 'react-native-modal';
 
 const SalesInpector = ({ route }) => {
   const navigation = useNavigation();
   const { idVendedor } = route.params;
   const { user } = useAuth();
   const [seller, setSeller] = useState<ISeller | null>(null);
+  const [isModalVisible, setIsModalVisible] = useState(false);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -28,6 +30,18 @@ const SalesInpector = ({ route }) => {
     navigation.goBack();
   };
 
+  const toggleModal = () => {
+    setIsModalVisible(!isModalVisible);
+  };
+
+  const handleDelete = async () => {
+    try {
+      console.log('DELETADO');
+    } catch (error) {
+      console.error('Erro ao excluir vendedor:', error);
+    }
+  };
+
   return (
     <S.Wrapper>
       <S.DivButtonBack>
@@ -47,11 +61,29 @@ const SalesInpector = ({ route }) => {
               <S.Funcao>{seller?.email || '[email protected]'}</S.Funcao>
             </S.InfoUser>
 
-            <S.BtnLixeira>
+            <S.BtnLixeira onPress={toggleModal}>
               <S.ImageVectorLixeira
                 source={require('@assets/img/lixeira.png')}
               />
             </S.BtnLixeira>
+            <Modal isVisible={isModalVisible} onBackdropPress={toggleModal}>
+              <S.ContentModal>
+                <S.WrapperConteudo>
+                  <S.ImageWarning
+                    source={require('@assets/img/warnnign.png')}
+                  />
+                  <S.TextModal>
+                    Tem certeza que deseja excluir esse vendedor?
+                  </S.TextModal>
+                </S.WrapperConteudo>
+                <S.BtnYes onPress={handleDelete}>
+                  <S.TitleBtnYes>Sim</S.TitleBtnYes>
+                </S.BtnYes>
+                <S.BtnBack onPress={toggleModal}>
+                  <S.TitleBtnBack>Voltar</S.TitleBtnBack>
+                </S.BtnBack>
+              </S.ContentModal>
+            </Modal>
           </S.ViewInfoUser>
         </S.Container>
       </View>

src/screens/SalesInspector/styles.ts

@@ -84,3 +84,61 @@ export const ImageVectorLixeira = styled(Image)`
   width: 24px;
   height: 24px;
 `;
+
+export const ContentModal = styled(View)`
+  background-color: white;
+  padding: 32px 24px;
+  gap: 8px;
+  border-radius: 8px;
+`;
+
+export const WrapperConteudo = styled(View)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const ImageWarning = styled(Image)`
+  width: 48px;
+  height: 48px;
+`;
+
+export const TextModal = styled(Text)`
+  font-family: Poppins;
+  font-size: 14px;
+  margin: 16px auto;
+  text-align: center;
+  letter-spacing: 0.5px;
+`;
+
+export const BtnYes = styled(TouchableOpacity)`
+  background-color: #e5484d;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const TitleBtnYes = styled(Text)`
+  font-family: PoppinsBold;
+  color: #f8faff;
+  letter-spacing: 1.25px;
+  text-transform: uppercase;
+`;
+
+export const BtnBack = styled(TouchableOpacity)`
+  border: 2px solid ${theme.colors.secundary.main};
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const TitleBtnBack = styled(Text)`
+  color: ${theme.colors.secundary.main};
+  font-family: PoppinsBold;
+  font-size: 14px;
+  text-transform: uppercase;
+`;

yarn.lock

@@ -8811,7 +8811,7 @@ prompts@^2.3.2, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.8.1:
+prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -8953,6 +8953,21 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+[email protected]:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.3.3.tgz#a13a4af8258e3bb14d0a9d839917e9bb9274ec8a"
+  integrity sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w==
+  dependencies:
+    prop-types "^15.7.2"
+
+react-native-modal@^13.0.1:
+  version "13.0.1"
+  resolved "https://registry.yarnpkg.com/react-native-modal/-/react-native-modal-13.0.1.tgz#691f1e646abb96fa82c1788bf18a16d585da37cd"
+  integrity sha512-UB+mjmUtf+miaG/sDhOikRfBOv0gJdBU2ZE1HtFWp6UixW9jCk/bhGdHUgmZljbPpp0RaO/6YiMmQSSK3kkMaw==
+  dependencies:
+    prop-types "^15.6.2"
+    react-native-animatable "1.3.3"
+
 react-native-pager-view@^6.2.3:
   version "6.2.3"
   resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-6.2.3.tgz#698f6387fdf06cecc3d8d4792604419cb89cb775"