diff --git a/public/index.html b/public/index.html index 5f090e4..a582741 100644 --- a/public/index.html +++ b/public/index.html @@ -3,6 +3,9 @@ + + + Driven.t diff --git a/src/components/Dashboard/NavigationBar/index.js b/src/components/Dashboard/NavigationBar/index.js index 86a6da9..a7e75f7 100644 --- a/src/components/Dashboard/NavigationBar/index.js +++ b/src/components/Dashboard/NavigationBar/index.js @@ -29,28 +29,28 @@ export default function NavigationBar() { - + Pagamento - + Hotel - + Atividades - + Certificado diff --git a/src/components/Message.js b/src/components/Message.js new file mode 100644 index 0000000..22c693c --- /dev/null +++ b/src/components/Message.js @@ -0,0 +1,27 @@ +import styled from 'styled-components'; + +export default function Message({ text }) { + return ( + + {text} + + ); +} + +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 index 97eb837..c6b3a83 100644 --- 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 new file mode 100644 index 0000000..88cbeef --- /dev/null +++ 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 ( + { + selected[type] = text; + setSelected({ ...selected }); + } + } + > + {text} +

{value}

+ + ); +} + +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 new file mode 100644 index 0000000..b17bbfa --- /dev/null +++ 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 ( + + Ingresso e pagamento + {(enrollment)? + + Primeiro, escolha sua modalidade de ingresso + + + + + Ótimo! Agora escolha sua modalidade de hospedagem + + : + } + + ); +} + +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 index da47dd2..e76029c 100644 --- 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 index 1046e22..70aa332 100644 --- 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 ( + + ); } + diff --git a/src/pages/Dashboard/index.js b/src/pages/Dashboard/index.js index 7e9dff6..9ff26b1 100644 --- 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 ( -