driven-projects · LeslyeSF · May 28, 2022 · May 28, 2022 · May 28, 2022
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/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/Message.js b/src/components/Message.js
@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+export default function Message({ text }) {
+  return (
+    <Container>
+      <Text>{text}</Text>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  height: 85%;
+  width: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Text = styled.p`
+  font-family: 'Roboto', sans-serif;
+  max-width: 388px;
+  text-align: center;
+  font-size: 20px;
+  font-weight: 400;
+  color: #8E8E8E;
+`;
diff --git a/src/components/PersonalInformationForm/index.js b/src/components/PersonalInformationForm/index.js
@@ -22,6 +22,7 @@ import { InputWrapper } from './InputWrapper';
 import { ErrorMsg } from './ErrorMsg';
 import { ufList } from './ufList';
 import FormValidations from './FormValidations';
+import { useNavigate } from 'react-router';
 
 dayjs.extend(CustomParseFormat);
 
@@ -30,6 +31,7 @@ export default function PersonalInformationForm() {
   const { getCep } = useCep();
   const { enrollment } = useEnrollment();
   const { saveEnrollmentLoading, saveEnrollment } = useSaveEnrollment();
+  const navigate = useNavigate();
 
   const {
     handleSubmit,
@@ -45,7 +47,7 @@ export default function PersonalInformationForm() {
       const newData = {
         name: data.name,
         cpf: data.cpf.replaceAll('.', '').replaceAll('-', ''),
-        birthday: dayjs(data.birthday).toISOString(),
+        birthday: await dayjs(data.birthday).toISOString(),
         address: {
           cep: data.cep,
           street: data.street,
@@ -60,6 +62,7 @@ export default function PersonalInformationForm() {
 
       try {
         await saveEnrollment(newData);
+        navigate('/dashboard/payment');
         toast('Informações salvas com sucesso!');
       } catch (err) {
         toast('Não foi possível salvar suas informações!');

diff --git a/src/components/TicketAndPaymentForm/ButtonOption.js b/src/components/TicketAndPaymentForm/ButtonOption.js
@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+
+export default function ButtonOption({ size, height, text, value, selected, setSelected, type }) {
+  return (
+    <ClickButton size={size} height={height} text={text} selected={selected} type={type} 
+      onClick={() => {
+        selected[type] = text;
+        setSelected({ ...selected });
+      }
+      }
+    >
+      <span>{text}</span>
+      <p>{value}</p>
+    </ClickButton>
+  );
+}
+
+const ClickButton = styled.div`
+  width: ${({ size }) => size}px;
+  height: ${({ size, height }) => (height)? height : size}px;
+
+  border-radius: 20px;
+  ${({ text, selected, type }) => (selected[type] === text)?
+    'background-color: #FFEED2;':
+    'border: 1px solid #CECECE;'
+}
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 3px;
+
+  font-family: 'Roboto', sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  color: #8E8E8E;
+
+  span {
+    font-size: 16px;
+    color: #454545;
+  }
+
+  &:hover{
+    cursor: pointer;
+  }
+`;
+
diff --git a/src/components/TicketAndPaymentForm/index.js b/src/components/TicketAndPaymentForm/index.js
@@ -0,0 +1,88 @@
+import styled from 'styled-components';
+import Typography from '@material-ui/core/Typography';
+import Message from '../Message';
+import useEnrollment from '../../hooks/api/useEnrollment';
+import ButtonOption from './ButtonOption';
+import { useState } from 'react';
+
+export default function TicketAndPaymentForm() {
+  const { enrollment } = useEnrollment();
+
+  const [selected, setSelected] = useState({
+    modality: '',
+    hotel: ''
+  });
+
+  return (
+    <Container>
+      <StyledTypography variant="h4">Ingresso e pagamento</StyledTypography>
+      {(enrollment)?
+        <TicketForm>
+          <StyleLabel>Primeiro, escolha sua modalidade de ingresso</StyleLabel>
+          <Options>
+            <ButtonOption 
+              size={145} 
+              text='Presencial' 
+              value='R$ 250' 
+              selected={selected}
+              setSelected={setSelected}
+              type={'modality'}
+            />
+            <ButtonOption 
+              size={145} 
+              text='Online' 
+              value='R$ 100' 
+              selected={selected}
+              setSelected={setSelected}
+              type={'modality'}
+            />
+          </Options>
+          <StyleLabel>Ótimo! Agora escolha sua modalidade de hospedagem</StyleLabel>
+        </TicketForm>
+        :<Message 
+          text='Você precisa completar sua inscrição antes de prosseguir pra escolha de ingresso'
+        />
+      }
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 37px;
+`;
+
+const TicketForm = styled.div`
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap:17px;
+`;
+
+const Options = styled.div`
+  width: 100%;
+
+  display: flex;
+  justify-content: flex-start;
+  gap: 24px;
+
+  margin-bottom: 45px;
+`;
+
+const StyledTypography = styled(Typography)`
+  margin-bottom: 20px!important;
+`;
+
+const StyleLabel = styled.p`
+  font-family: 'Roboto', sans-serif;
+  font-size: 20px;
+  font-weight: 400;
+  color: #8E8E8E;
+`;
diff --git a/src/hooks/useForm.js b/src/hooks/useForm.js
@@ -15,6 +15,7 @@ export const useForm = (options) => {
 
   const customHandleChange = (key, sanitizeFn) => (inputValue) => {
     const value = sanitizeFn ? sanitizeFn(inputValue) : inputValue;
+
     setData({
       ...data,
       [key]: value,

diff --git a/src/pages/Dashboard/Payment/index.js b/src/pages/Dashboard/Payment/index.js
@@ -1,3 +1,8 @@
+import TicketAndPaymentForm from '../../../components/TicketAndPaymentForm';
+
 export default function Payment() {
-  return 'Pagamento: Em breve!';
+  return (
+    <TicketAndPaymentForm/>
+  );
 }
+
diff --git a/src/pages/Dashboard/index.js b/src/pages/Dashboard/index.js
@@ -10,11 +10,10 @@ import DashboardLayout from '../../layouts/Dashboard';
 
 export default function Dashboard() {
   const { eventInfo } = useContext(EventInfoContext);
-
+  
   return (
     <DashboardLayout background={eventInfo.backgroundImageUrl}>
       <NavigationBar />
-
       <Container>
         <Outlet />
       </Container>