Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: modal styling + optional email #171

Merged
merged 2 commits into from
Apr 19, 2024
+29 −26
Merged

fix: modal styling + optional email #171

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c2f4e4a
fix: modal styling + optional email
KatyH820 Apr 18, 2024
13fa95c
style: remove hyper link
KatyH820 Apr 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 29 additions & 26 deletions src/components/RegisterGuestModal/RegisterGuestModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,12 @@ import {
Checkbox,
Grid,
GridItem,
Link,
useDisclosure,
Text,
InputGroup,
InputLeftElement,
} from '@chakra-ui/react';
import { IoMdPeople } from 'react-icons/io';

const RegisterGuestModal = ({ isOpen, onClose, eventId }) => {
const [waiverText, setWaiverText] = useState('');
Expand All @@ -37,7 +39,7 @@ const RegisterGuestModal = ({ isOpen, onClose, eventId }) => {
const volunteerObject = yup.object().shape({
first_name: yup.string().required('First name is required'),
last_name: yup.string().required('Last name is required'),
email: yup.string().email('Invalid email format').nullable(),
email: yup.string().email('Invalid email format').nullable().notRequired(),
waiver: yup
.boolean()
.oneOf([true], 'You must accept the terms and conditions')
Expand All @@ -57,7 +59,7 @@ const RegisterGuestModal = ({ isOpen, onClose, eventId }) => {

const {
isOpen: isAgreementOpen,
onOpen: onAgreementOpen,
// onOpen: onAgreementOpen,
onClose: onAgreementClose,
} = useDisclosure();

Expand All @@ -67,12 +69,11 @@ const RegisterGuestModal = ({ isOpen, onClose, eventId }) => {
formState: { errors },
} = useForm({ defaultValues: volunteerData, resolver: yupResolver(volunteerObject) });

const isFormFilled = () => {
const isFormIncomplete = () => {
return (
volunteerData.first_name == '' ||
volunteerData.last_name == '' ||
volunteerData.waiver == false ||
volunteerData.email === null // Considering email can be null
volunteerData.first_name === '' ||
volunteerData.last_name === '' ||
volunteerData.waiver === false
);
};

Expand Down Expand Up @@ -190,19 +191,24 @@ const RegisterGuestModal = ({ isOpen, onClose, eventId }) => {
<Text fontWeight={'medium'} fontSize={'14px'} color={'#717171'}>
Party size
</Text>
<Input
marginTop={1}
placeholder="1"
alignItems={'center'}
{...register('party_number')}
type="string"
onChange={e =>
setVolunteerData(prevState => ({
...prevState,
party_number: e.target.value,
}))
}
/>
<InputGroup>
<InputLeftElement paddingTop="0.5em">
<IoMdPeople size={'1.7em'} color="gray" />
</InputLeftElement>
<Input
marginTop={1}
placeholder="1"
alignItems={'center'}
{...register('party_number')}
type="string"
onChange={e =>
setVolunteerData(prevState => ({
...prevState,
party_number: e.target.value,
}))
}
/>
</InputGroup>
</GridItem>
<GridItem colSpan={1}>
<Text fontWeight={'medium'} fontSize={'14px'} color={'#717171'}>
Expand Down Expand Up @@ -307,10 +313,7 @@ const RegisterGuestModal = ({ isOpen, onClose, eventId }) => {
}))
}
>
I agree to the{' '}
<Link color="#003FE3" onClick={onAgreementOpen}>
terms and conditions
</Link>
I agree to the terms and conditions
</Checkbox>
{errors.waiver && <Text color="red">{errors.waiver.message}</Text>}
</GridItem>
Expand All @@ -337,7 +340,7 @@ const RegisterGuestModal = ({ isOpen, onClose, eventId }) => {
h="50px"
style={{ borderRadius: '12px' }}
_hover={{ bg: '#002B99' }}
isDisabled={isFormFilled()}
isDisabled={isFormIncomplete()}
>
Add Volunteer
</Button>
Expand Down
Loading