driven-projects · venyustech · May 28, 2022 · May 28, 2022 · May 28, 2022 · May 28, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,9 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
     <title>Driven.t</title>
   </head>
   <body>

diff --git a/src/assets/images/CreditCardMockUp.png b/src/assets/images/CreditCardMockUp.png
diff --git a/src/components/Dashboard/NavigationBar/index.js b/src/components/Dashboard/NavigationBar/index.js
@@ -29,28 +29,28 @@ export default function NavigationBar() {
       </Link>
 
       <Link to="/dashboard/payment">
-        <NavigationButton active={isActive('/dashboard/paymen')}>
+        <NavigationButton active={isActive('/dashboard/payment')}>
           <FaMoneyBill />
           <span>Pagamento</span>
         </NavigationButton>
       </Link>
 
       <Link to="/dashboard/hotel">
-        <NavigationButton active={isActive('/dashboard/hote')}>
+        <NavigationButton active={isActive('/dashboard/hotel')}>
           <FaBed />
           <span>Hotel</span>
         </NavigationButton>
       </Link>
 
       <Link to="/dashboard/activities">
-        <NavigationButton active={isActive('/dashboard/activitie')}>
+        <NavigationButton active={isActive('/dashboard/activities')}>
           <FaCalendarWeek />
           <span>Atividades</span>
         </NavigationButton>
       </Link>
 
       <Link to="/dashboard/certificate">
-        <NavigationButton active={isActive('/dashboard/certificat')}>
+        <NavigationButton active={isActive('/dashboard/certificate')}>
           <FaCertificate />
           <span>Certificado</span>
         </NavigationButton>

diff --git a/src/components/Hotels/FormHotel.js b/src/components/Hotels/FormHotel.js
@@ -0,0 +1,127 @@
+import styled from 'styled-components';
+import useHotel from '../../hooks/api/useHotel';
+import HotelInfo from './HotelInfo';
+import { toast } from 'react-toastify';
+import { useState } from 'react';
+import RoomInfo from './RoomInfo';
+import Button from '../Form/Button';
+import useBookHotelRoom from '../../hooks/api/useBookHotelRoom';
+import useEnrollment from '../../hooks/api/useEnrollment';
+import useToken from '../../hooks/useToken';
+import useDeleteBedRental from '../../hooks/api/useDeleteBedRental';
+
+export default function FormHotel({ setRoomSelected, changeHotelButton, setChangeHotelButton }) {
+  const token = useToken();
+  const { hotels } = useHotel();
+  const { selectRoom } = useBookHotelRoom();
+  const { deleteRental } = useDeleteBedRental();
+  const { enrollment } = useEnrollment();
+  const [hotel, setHotel] = useState({
+    id: null,
+    name: null
+  });
+  const [rooms, setRooms] = useState([]);
+  const [selectedRoom, setSelectedRoom] = useState({
+    id: null
+  });
+
+  async function submit() {
+    if (changeHotelButton.selected === false) {
+      try {
+        await selectRoom({
+          id: selectedRoom.id,
+          enrollmentId: enrollment.id
+        }, token);
+        setRoomSelected(true);
+        toast('Hotel reservado com sucesso!');
+      } catch {
+        toast('Falha ao reservar o hotel!');
+      }
+    }
+    else {
+      const lastHotel = {
+        roomId: changeHotelButton.lastHotel.roomId,
+        enrollmentId: changeHotelButton.lastHotel.enrollmentId
+      };
+      let changeHotel = {
+        selected: false,
+        lastHotel: {
+          id: null,
+          enrollmentId: null,
+          roomId: null,
+        }
+      };
+
+      try {
+        await deleteRental(lastHotel, token);
+        await selectRoom({
+          id: selectedRoom.id,
+          enrollmentId: enrollment.id
+        }, token);
+        setRoomSelected(true);
+        setChangeHotelButton(changeHotel);
+        toast('Troca realizada com sucesso!');
+      } catch {
+        toast('Falha ao trocar seu quarto!');
+      }
+    }
+  }
+
+  return (
+    <>
+      <StyleLabel>Primeiro, escolha seu hotel</StyleLabel>
+      <List>
+        {hotels?.map((el) => (
+          <HotelInfo key={el.id} data={el} hotel={hotel} setHotel={setHotel} setRooms={setRooms} />
+        ))}
+      </List>
+      {(hotel.id) ?
+        <>
+          <StyleLabel>Ótima pedida! Agora escolha seu quarto</StyleLabel>
+          <RoomList>
+            {rooms.map((el) => (
+              <RoomInfo key={el.id} data={el} selectedRoom={selectedRoom} setSelectedRoom={setSelectedRoom} />
+            ))}
+          </RoomList>
+        </>
+        : ''}
+      {(selectedRoom.id) ?
+        <Button onClick={submit}>
+
+          {(changeHotelButton.selected) ? 'CONFIRMAR TROCA DE QUARTO'
+            :'RESERVAR QUARTO'}
+        </Button>
+        : ''
+      }
+    </>
+  );
+}
+
+const List = styled.div`
+  width: 100%;
+
+  margin-bottom: 15px;
+
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+  gap: 37px;
+`;
+
+const RoomList = styled.div`
+  width: 100%;
+
+  margin-bottom: 15px;
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: start;
+  gap: 17px;
+`;
+
+const StyleLabel = styled.p`
+  font-family: 'Roboto', sans-serif;
+  font-size: 20px;
+  font-weight: 400;
+  color: #8e8e8e;
+`;
diff --git a/src/components/Hotels/HotelInfo.js b/src/components/Hotels/HotelInfo.js
@@ -0,0 +1,104 @@
+import styled from 'styled-components';
+
+export default function HotelInfo({ data, hotel, setHotel, setRooms }) {
+  const { id, name, imageUrl, room, accomodationsHotel } = data;
+
+  const accomodations = accomodationsHotel.map((el) => capitalizeFirstLetter(el.accomodationsType.type)).join(', ');
+
+  function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+  }
+
+  const beds = room.map((el) => el.bed);
+
+  const vacancyBeds = beds.map((el) =>
+    el.reduce((prev, curr) => {
+      if (!curr.enrollmentId) {
+        return prev + 1;
+      } else {
+        return prev + 0;
+      }
+    }, 0)
+  );
+  const vacancyNumber = vacancyBeds.reduce((prev, curr) => curr + prev, 0);
+
+  return (
+    <Hotel hotelSelected={hotel.id} id={id} onClick={() => {
+      hotel.id = id;
+      hotel.name = name;
+
+      setHotel( { ...hotel } );
+      setRooms(room);
+    } }>
+      <HotelPicture src={imageUrl} />
+      <HotelName>{name}</HotelName>
+      <div>
+        <InfoTitle>Tipos de acomodação</InfoTitle>
+        <InfoText>{accomodations}</InfoText>
+      </div>
+      <div>
+        <InfoTitle>Vagas disponíveis:</InfoTitle>
+        <InfoText>{vacancyNumber}</InfoText>
+      </div>
+    </Hotel>
+  );
+}
+
+const Hotel = styled.div`
+  width: 196px;
+  height: 264px;
+
+  padding: 16px 14px;
+  border-radius: 10px;
+  background: ${( { id, hotelSelected } ) => (id === hotelSelected)? '#FFEED2': '#f1f1f1'};
+  border: #cecece;
+  display: flex;
+  justify-content: space-between;
+  align-items: left;
+  flex-direction: column;
+  gap: 3px;
+
+  font-family: 'Roboto', sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  color: #8e8e8e;
+  &:hover{
+    cursor:pointer;
+  }
+`;
+
+const HotelName = styled.h1`
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 23px;
+
+  color: #343434;
+`;
+
+const InfoTitle = styled.h2`
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 14px;
+  color: #3c3c3c;
+`;
+
+const InfoText = styled.p`
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+
+  color: #3c3c3c;
+`;
+
+const HotelPicture = styled.img`
+  width: 168px;
+  height: 109px;
+  object-fit: cover;
+  border-radius: 10px;
+`;
diff --git a/src/components/Hotels/ResumeHotelSelected.js b/src/components/Hotels/ResumeHotelSelected.js
@@ -0,0 +1,123 @@
+import styled from 'styled-components';
+import { useEffect, useState } from 'react';
+import Button from '../Form/Button';
+import useRoom from '../../hooks/api/useRoom';
+
+export default function ResumeHotelSelected({ setChangeHotelClick }) {
+  const { bed } = useRoom();
+  const [room, setRoom] = useState({});
+  const [hotel, setHotel] = useState({});
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    if (bed) {
+      setRoom(bed.room);
+      setHotel(bed.room.hotel);
+      let countPeople = 0;
+      bed.room.bed.forEach((data) => {
+        if (data.enrollmentId) countPeople += 1;
+      });
+      setCount(countPeople - 1);
+    }
+  }, [bed]);
+
+  const handleChangeHotelClick = () => {
+    let changeHotel = {
+      selected: true,
+      lastHotel: {
+        id: hotel.id,
+        enrollmentId: bed.enrollmentId,
+        roomId: bed.roomId,
+      }
+    };
+    setChangeHotelClick(changeHotel);
+  };
+  return (
+    <>
+      <StyleLabel>Você já escolheu seu quarto:</StyleLabel>
+      <Box>
+        <HotelPicture src={hotel.imageUrl} />
+        <HotelName>{hotel.name}</HotelName>
+        <div>
+          <InfoTitle>Quarto reservado</InfoTitle>
+          <InfoText>
+            {room.id} ({room.accomodationsType?.type})
+          </InfoText>
+        </div>
+        <div>
+          <InfoTitle>Pessoas no seu quarto</InfoTitle>
+          <InfoText>{
+            (count === 0) ? 'Somente você'
+              : (count === 1) ? `Você e mais ${count} pessoa`
+                : `Você e mais ${count} pessoas`}
+          </InfoText>
+        </div>
+      </Box>
+      <Button onClick={() => handleChangeHotelClick()}>TROCAR DE QUARTO</Button>
+    </>
+  );
+}
+const HotelName = styled.h1`
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 23px;
+
+  color: #343434;
+`;
+
+const Box = styled.div`
+  width: 196px;
+  height: 264px;
+
+  padding: 16px 14px;
+  border-radius: 10px;
+  background: #ffeed2;
+  border: #cecece;
+  display: flex;
+  justify-content: space-between;
+  align-items: left;
+  flex-direction: column;
+  gap: 3px;
+
+  font-family: 'Roboto', sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  color: #8e8e8e;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+const InfoTitle = styled.h2`
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 14px;
+  color: #3c3c3c;
+`;
+
+const InfoText = styled.p`
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+
+  color: #3c3c3c;
+`;
+
+const HotelPicture = styled.img`
+  width: 168px;
+  height: 109px;
+  object-fit: cover;
+  border-radius: 10px;
+`;
+
+const StyleLabel = styled.p`
+  font-family: 'Roboto', sans-serif;
+  font-size: 20px;
+  font-weight: 400;
+  color: #8e8e8e;
+`;