From a06ea158629a9ce50f2e990beeaa427a48a3a268 Mon Sep 17 00:00:00 2001 From: "Rafael G. de Paulo" Date: Fri, 3 Feb 2023 12:00:31 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=91=20=20Add=20back=20disability-relat?= =?UTF-8?q?ed=20inputs=20on=20signup=20form?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Components/SignUp/Mobile/Step11.tsx | 6 +- .../src/Components/SignUp/Mobile/Step12.tsx | 30 ++++++ .../src/Components/SignUp/Mobile/index.tsx | 6 +- .../Components/SignUp/Web/Step04.style.tsx | 96 +++++++++++++++++++ .../src/Components/SignUp/Web/Step04.tsx | 92 ++++++++++++++++++ .../src/Components/SignUp/Web/index.tsx | 12 +-- 6 files changed, 230 insertions(+), 12 deletions(-) create mode 100644 apps/client/src/Components/SignUp/Web/Step04.style.tsx create mode 100644 apps/client/src/Components/SignUp/Web/Step04.tsx diff --git a/apps/client/src/Components/SignUp/Mobile/Step11.tsx b/apps/client/src/Components/SignUp/Mobile/Step11.tsx index 83c05cbe..f2ecd8d9 100644 --- a/apps/client/src/Components/SignUp/Mobile/Step11.tsx +++ b/apps/client/src/Components/SignUp/Mobile/Step11.tsx @@ -4,7 +4,7 @@ import * as yup from 'yup'; import { useRef } from 'react'; import { useState } from 'react'; // import { IoMdArrowDropdownCircle } from 'react-icons/io'; -// import { RadioInput } from 'Components/Inputs/RadioInput'; +import { RadioInput } from 'Components/Inputs/RadioInput'; import { formationOptions, idiomOptions } from 'Utils/selectOptionsData'; @@ -102,13 +102,13 @@ export const Step11: FC = () => { )} */} - {/* Você é uma pessoa com deficiência? + Você é uma pessoa com deficiência? - */} + diff --git a/apps/client/src/Components/SignUp/Mobile/Step12.tsx b/apps/client/src/Components/SignUp/Mobile/Step12.tsx index 2c4c1810..30443d01 100644 --- a/apps/client/src/Components/SignUp/Mobile/Step12.tsx +++ b/apps/client/src/Components/SignUp/Mobile/Step12.tsx @@ -53,6 +53,36 @@ export const Step12: FC = () => { setIsDeficiencyOptionsOpen(false); } }; + + + console.log("MOBIEL") + console.log("MOBIEL") + + console.log("MOBIEL") + console.log("MOBIEL") + + console.log("MOBIEL") + console.log("MOBIEL") + + + console.log("MOBIEL") + console.log("MOBIEL") + + console.log("MOBIEL") + console.log("MOBIEL") + + console.log("MOBIEL") + console.log("MOBIEL") + + + console.log("MOBIEL") + console.log("MOBIEL") + + console.log("MOBIEL") + console.log("MOBIEL") + + console.log("MOBIEL") + console.log("MOBIEL") return ( diff --git a/apps/client/src/Components/SignUp/Mobile/index.tsx b/apps/client/src/Components/SignUp/Mobile/index.tsx index 82ce67b2..3c994f91 100644 --- a/apps/client/src/Components/SignUp/Mobile/index.tsx +++ b/apps/client/src/Components/SignUp/Mobile/index.tsx @@ -23,7 +23,7 @@ import { Step07, schemaStep07 } from './Step07'; import { Step09, schemaStep09 } from './Step09'; // import { Step10, schemaStep10 } from './Step10'; import { Step11, schemaStep11 } from './Step11'; -// import { Step12, schemaStep12 } from './Step12'; +import { Step12, schemaStep12 } from './Step12'; import { Step13, schemaStep13 } from './Step13'; import { Step14, schemaStep14 } from './Step14'; import { Step15, schemaStep15 } from './Step15'; @@ -157,9 +157,9 @@ export const Mobile: FC = ({ buttonType }) => { - {/* + - */} + diff --git a/apps/client/src/Components/SignUp/Web/Step04.style.tsx b/apps/client/src/Components/SignUp/Web/Step04.style.tsx new file mode 100644 index 00000000..f77a325f --- /dev/null +++ b/apps/client/src/Components/SignUp/Web/Step04.style.tsx @@ -0,0 +1,96 @@ +import styled, { css } from 'styled-components'; +import { Field } from 'formik'; + +import { Text } from 'Components/Typography/Text'; +import { DesktopSmall } from 'Utils/breakpoints'; + +export const Container = styled.div` + display: flex; + + background-color: #111010; + width: 71rem; + font-size: var(--font-size-default); + + ${DesktopSmall(css` + width: 47.6rem; + font-size: var(--font-size-short); + `)} +`; + +export const LabelText = styled(Text)` + margin-bottom: 1.5rem; + font-weight: 600; + + color: #fafafa; + + position: relative; + + ${DesktopSmall(css` + font-size: var(--font-size-short); + `)} +`; + +export const InputCheckBox = styled(Field)` + margin-right: 1.6rem; + + &:hover { + cursor: pointer; + } +`; + +export const InputCheckBoxContainer = styled.div` + font-weight: 600; + margin: auto 0; + display: flex; +`; + +export const TextInputContainer = styled.div` + height: min-content; + margin-bottom: 0; + label { + height: min-content; + color: #ffffff; + display: block; + margin-bottom: 0.5rem; + + ${DesktopSmall(css` + font-size: var(--font-size-short); + `)} + } +`; + +export const InputRadioContainer = styled.div` + display: flex; + align-items: center; + font-weight: 600; + margin-bottom: 1.8rem; + + ${DesktopSmall(css` + margin-bottom: 1rem; + `)} +`; + +export const FileContainer = styled.div` + margin-top: 2rem; + + .fileLabel { + font-weight: 600; + display: inline-block; + margin-bottom: 1rem; + font-size: var(--font-size-large); + + position: relative; + + color: #fafafa; + + ${DesktopSmall(css` + font-size: var(--font-size-short); + display: inline-block; + margin-bottom: 0.5rem; + `)} + } + + ${DesktopSmall(css` + margin-top: 0.5rem; + `)} +`; diff --git a/apps/client/src/Components/SignUp/Web/Step04.tsx b/apps/client/src/Components/SignUp/Web/Step04.tsx new file mode 100644 index 00000000..00cf638f --- /dev/null +++ b/apps/client/src/Components/SignUp/Web/Step04.tsx @@ -0,0 +1,92 @@ +import React, { FC } from 'react'; +import { useFormikContext } from 'formik'; +import * as yup from 'yup'; +import { RadioInput } from 'Components/Inputs/RadioInput'; + +import { CheckboxInput } from 'Components/Inputs/CheckboxInput'; +import { TextInput } from 'Components/Inputs/TextInput'; +import { FileInput } from 'Components/Inputs/FileInput'; +import { deficiencyOptions } from 'Utils/selectOptionsData'; + +import { + Container, + LabelText, + InputCheckBoxContainer, + TextInputContainer, + InputRadioContainer, + FileContainer, +} from './Step04.style'; + +import { Box, PCDOptions, BoxContent, DeficiencyContainer } from './all.style'; + +interface ErrorProps { + deficiencies?: string[]; + isPcd?: string; +} + +export const schemaStep04 = yup.object({ + isPcd: yup.boolean(), + deficiencies: yup.array(), + medicalReport: yup.string().nullable(), +}); + +export const Step04: FC = () => { + const { values } = useFormikContext(); + + return ( + + + Você é uma pessoa com deficiência? + + + + + + + + + {values.isPcd === 'true' && ( + + + + + + {deficiencyOptions.map((deficiencyOption, index) => ( + + + + ))} + + + + + + + + + )} + {values.deficiencies?.find((values: any) => values === 'Outro') && ( + + + + + )} + + + ); +}; diff --git a/apps/client/src/Components/SignUp/Web/index.tsx b/apps/client/src/Components/SignUp/Web/index.tsx index bf246132..d12755cf 100644 --- a/apps/client/src/Components/SignUp/Web/index.tsx +++ b/apps/client/src/Components/SignUp/Web/index.tsx @@ -9,8 +9,8 @@ import { useSocialNetworksLabfaz } from 'Api/SocialNetworksLabfaz'; import { Step01, schemaStep01 } from './Step01'; import { Step02, schemaStep02 } from './Step02'; import { Step03, schemaStep03 } from './Step03'; -// import { Step04, schemaStep04 } from './Step04'; -// import { Step05, schemaStep05 } from './Step05'; +import { Step04, schemaStep04 } from './Step04'; +import { Step05, schemaStep05 } from './Step05'; import { Step06, schemaStep06 } from './Step06'; import { Step07, schemaStep07 } from './Step07'; import { Step08, schemaStep08 } from './Step08'; @@ -131,13 +131,13 @@ export const Web: FC = ({ buttonType }) => { - {/* + - */} + - {/* + - */} +