From 907327b028af002a5a1b2bfb55e274e3574056f7 Mon Sep 17 00:00:00 2001 From: Gardenia Georgia <73204999+venyustech@users.noreply.github.com> Date: Sat, 28 May 2022 19:28:48 -0300 Subject: [PATCH 1/3] .env.test* --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 7b786be..54d751a 100644 --- a/.gitignore +++ b/.gitignore @@ -23,4 +23,5 @@ yarn-debug.log* yarn-error.log* .env* + !.env.example From 1ecaf182ac86a1f103932f4495d1f14c433cf047 Mon Sep 17 00:00:00 2001 From: Leslye Ferreira <93736928+LeslyeSF@users.noreply.github.com> Date: Sat, 28 May 2022 19:47:41 -0300 Subject: [PATCH 2/3] Update .gitignore --- .gitignore | 1 - 1 file changed, 1 deletion(-) diff --git a/.gitignore b/.gitignore index 54d751a..7b786be 100644 --- a/.gitignore +++ b/.gitignore @@ -23,5 +23,4 @@ yarn-debug.log* yarn-error.log* .env* - !.env.example From 088d551f950c180b43a55a266c2428c32307fe44 Mon Sep 17 00:00:00 2001 From: Leslye Soares Ferreira Date: Sat, 28 May 2022 19:53:14 -0300 Subject: [PATCH 3/3] feat: update --- public/index.html | 3 + .../Dashboard/NavigationBar/index.js | 8 +- src/components/Message.js | 27 ++++++ .../PersonalInformationForm/index.js | 5 +- .../TicketAndPaymentForm/ButtonOption.js | 47 ++++++++++ src/components/TicketAndPaymentForm/index.js | 88 +++++++++++++++++++ src/hooks/useForm.js | 1 + src/pages/Dashboard/Payment/index.js | 7 +- src/pages/Dashboard/index.js | 3 +- 9 files changed, 181 insertions(+), 8 deletions(-) create mode 100644 src/components/Message.js create mode 100644 src/components/TicketAndPaymentForm/ButtonOption.js create mode 100644 src/components/TicketAndPaymentForm/index.js 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 ( -