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/package.json b/package.json
@@ -17,7 +17,7 @@
     "qs": "^6.10.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-icons": "^4.2.0",
+    "react-icons": "^4.4.0",
     "react-input-mask": "^2.0.4",
     "react-loader-spinner": "^4.0.0",
     "react-router-dom": "^6.3.0",

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/ActivitiesTracks.js b/src/components/Activities/ActivitiesTracks.js
@@ -0,0 +1,217 @@
+import styled from 'styled-components';
+import dayjs from 'dayjs';
+import 'dayjs/locale/pt';
+import { toast } from 'react-toastify';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import { useState } from 'react';
+import { getSeats } from '../../services/activityApi';
+import { TiDeleteOutline } from 'react-icons/ti'; 
+import { CgEnter } from 'react-icons/cg'; 
+
+export default function ActivitiesTracks({ showLabel, selectedDayActivities }) {  
+  dayjs.extend(advancedFormat);
+  dayjs.extend(localizedFormat);
+  dayjs.locale('pt');
+
+  const handleNewUserActivity = (activity) => {
+    console.log('adicionar essa atividade: ', activity);
+  };
+
+  return (
+    <Container showLabel={showLabel}>
+      <Track>
+        <StyleLabel>Auditório Principal</StyleLabel>
+        <Timeline>
+          {selectedDayActivities?.map((el) =>
+            el.locationId === 1 ? (
+              <ActivityBox duration={dayjs(el.endTime).format('HH') - dayjs(el.startTime).format('HH')}>
+                <div style={{ width: '180px' }}>
+                  <ActivityTitle>{el.name}</ActivityTitle>
+                  <ActivityTimeSlot>
+                    {dayjs(el.startTime).format('HH:00')} - {dayjs(el.endTime).format('HH:00')}
+                  </ActivityTimeSlot>
+                </div>
+                <Divider />
+                <StatusWrapper>
+                  <HandleSeats>{el}</HandleSeats>
+                </StatusWrapper>
+              </ActivityBox>
+            ) : null
+          )}
+        </Timeline>
+      </Track>
+      <Track>
+        <StyleLabel>Auditório Lateral</StyleLabel>
+        <Timeline>
+          {selectedDayActivities?.map((el) =>
+            el.locationId === 2 ? (
+              <ActivityBox duration={dayjs(el.endTime).format('HH') - dayjs(el.startTime).format('HH')}>
+                <div style={{ width: '180px' }}>
+                  <ActivityTitle>{el.name}</ActivityTitle>
+                  <ActivityTimeSlot>
+                    {dayjs(el.startTime).format('HH:00')} - {dayjs(el.endTime).format('HH:00')}
+                  </ActivityTimeSlot>
+                </div>
+                <Divider />
+                <StatusWrapper>
+                  <HandleSeats>{el}</HandleSeats>
+                </StatusWrapper>
+              </ActivityBox>
+            ) : null
+          )}
+        </Timeline>
+      </Track>
+      <Track>
+        <StyleLabel>Sala de Workshop</StyleLabel>
+        <Timeline>
+          {selectedDayActivities?.map((el) =>
+            el.locationId === 3 ? (
+              <ActivityBox duration={dayjs(el.endTime).format('HH') - dayjs(el.startTime).format('HH')}>
+                <div style={{ width: '180px' }}>
+                  <ActivityTitle>{el.name}</ActivityTitle>
+                  <ActivityTimeSlot>
+                    {dayjs(el.startTime).format('HH:00')} - {dayjs(el.endTime).format('HH:00')}
+                  </ActivityTimeSlot>
+                </div>
+                <Divider />
+                <StatusWrapper>
+                  <HandleSeats>{el}</HandleSeats>
+                </StatusWrapper>
+              </ActivityBox>
+            ) : null
+          )}
+        </Timeline>
+      </Track>
+    </Container>
+  );
+
+  function HandleSeats({ children }) {
+    let body = {
+      activityId: children.id,
+      locationId: children.locationId
+    };
+    const [available, setAvailable] = useState(null);
+
+    const resposta = getSeats(body);
+    resposta.then((response) => {
+      setAvailable(response.data.length);
+    });
+    resposta.catch(error => toast('Falha ao carregar vagas disponiveis!'));
+
+    if (available === null) {
+      return <div>...</div>;
+    }
+    if (available === 0) {
+      return (
+        <span style={{ color: 'red' }}>
+          <div><TiDeleteOutline/></div>
+          <div><p>esgotado</p></div>
+        </span>
+      );
+    };
+    if (available === 1) {
+      return (
+        <span style={{ color: 'green' }} onClick={() => handleNewUserActivity(body)}>
+          <div><CgEnter/></div>
+          <div>{available} vaga</div>
+        </span>
+      );
+    };
+    if (available > 1) {
+      return (
+        <span style={{ color: 'green' }} onClick={() => handleNewUserActivity(body)}>
+          <div> <CgEnter /> </div>
+          <div><p>{available} vagas </p></div>
+        </span>
+      );
+    };
+  };
+}
+
+const Container = styled.div`
+  display: ${({ showLabel }) => (showLabel ? 'none' : 'flex')};
+  flex-direction: row;
+`;
+
+const Track = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 288px;
+`;
+
+const Timeline = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 288px;
+  height: 389.96px;
+  padding: 9.96px;
+  border: 1px solid #d7d7d7;
+  gap: 10px;
+`;
+
+const StyleLabel = styled.p`
+  font-family: 'Roboto', normal;
+  font-size: 17px;
+  font-weight: 400;
+  color: #8e8e8e;
+  text-align: center;
+  margin-bottom: 13px;
+`;
+
+const ActivityBox = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  width: 265px;
+  height: ${({ duration }) => `${duration * 80 + (duration - 1) * 0.5}px`};
+  background: #f1f1f1;
+  border-radius: 5px;
+  padding: 12px 10px 12px 10px;
+`;
+
+const ActivityTitle = styled.p`
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 14px;
+  color: #343434;
+  text-align: left;
+`;
+
+const ActivityTimeSlot = styled.p`
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  color: #343434;
+  text-align: left;
+`;
+
+const Divider = styled.div`
+  width: 0px;
+  height: 100%;
+  border: 1px solid #cfcfcf;
+  margin-left: 10px;
+  margin-right: 10px;
+`;
+const StatusWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  div{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    p{
+      font-size:8px 
+    }
+    svg{
+      font-size:24px ;
+    }
+  }
+`;
diff --git a/src/components/Activities/FormActivity.js b/src/components/Activities/FormActivity.js
@@ -0,0 +1,86 @@
+import styled from 'styled-components';
+import useActivity from '../../hooks/api/useActivity';
+import dayjs from 'dayjs';
+import 'dayjs/locale/pt';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import { useState } from 'react';
+import ActivitiesTracks from './ActivitiesTracks';
+
+export default function FormActivity() {
+  dayjs.extend(advancedFormat);
+  dayjs.extend(localizedFormat);
+  const { activities } = useActivity();
+  dayjs.locale('pt');
+  const activitiesDaysArray = activities?.map((el) => dayjs(el.date).format('dddd, DD/MM'));
+  const activitiesDays = [...new Set(activitiesDaysArray)];
+
+  const [dayOption, setDayOption] = useState('');
+  const [selectedDayActivities, setSelectedDayActivities] = useState([]);
+  const [showLabel, setShowLabel] = useState(true);
+
+  function handleDayOption(id, el) {
+    setDayOption(id);
+    setShowLabel(false);
+    setSelectedDayActivities(activities?.filter((element) => dayjs(element.date).format('dddd, DD/MM') === el));
+  }
+
+  return (
+    <Container>
+      <StyleLabel showLabel={showLabel}>Primeiro, filtre pelo dia do evento</StyleLabel>
+      <List>
+        {activitiesDays.map((el, id) => (
+          <DayButton onClick={() => handleDayOption(`button_${id}`, el)} id={`button_${id}`} state={dayOption}>
+            {el}
+          </DayButton>
+        ))}
+      </List>
+      <ActivitiesTracks showLabel={showLabel} selectedDayActivities={selectedDayActivities} />
+    </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 DayButton = styled.button`
+  all: unset;
+  width: 131px;
+  height: 37px;
+
+  background: ${({ id, state }) => (id === state ? '#FFD37D' : '#E0E0E0')};
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.25);
+  border-radius: 4px;
+
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  text-align: center;
+
+  color: #000000;
+`;
+
+const StyleLabel = styled.p`
+  font-family: 'Roboto', sans-serif;
+  font-size: 20px;
+  font-weight: 400;
+  color: #8e8e8e;
+  display: ${({ showLabel }) => (showLabel ? 'block' : 'none')};
+`;
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';
+import FormActivity from './FormActivity';
+
+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." />
+        ) : (
+          <FormActivity />
+        )
+      ) : (
+        <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: -10px !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>