driven-projects · LeslyeSF · 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/assets/images/checkVector.png b/src/assets/images/checkVector.png
diff --git a/src/components/Activities/index.js b/src/components/Activities/index.js
@@ -0,0 +1,40 @@
+import Message from '../Message';
+import styled from 'styled-components';
+import Typography from '@material-ui/core/Typography';
+import useEnrollment from '../../hooks/api/useEnrollment';
+
+export default function ActivitiesPage() {
+  const { enrollment } = useEnrollment();
+
+  return (
+    <Container>
+      <StyledTypography variant='h4'>Escolha de atividades</StyledTypography>
+      {(enrollment?.payment)? 
+        (enrollment.payment.ticketModality !== 'PRESENTIAL')? 
+          <Message 
+            text='Sua modalidade de ingresso não necessita escolher atividade. Você terá acesso a todas as atividades.'
+          />:
+          'colocar o formulario aqui': 
+        <Message 
+          text='Você precisa ter confirmado pagamento antes de fazer a escolha de atividades'
+        />
+      }
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+
+  padding: 0 0 50px 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 37px;
+`;
+
+const StyledTypography = styled(Typography)`
+  margin-bottom: 20px !important;
+`;
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,134 @@
+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 (
+    <Container>
+      <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>
+        : ''
+      }
+    </Container>
+  );
+}
+const Container = styled.div`
+  padding: 0 0 30px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 37px;
+`;
+
+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;
+`;