diff --git a/src/events/components/Attendance/AttendButton.tsx b/src/events/components/Attendance/AttendButton.tsx index 16f66966..b6352c02 100644 --- a/src/events/components/Attendance/AttendButton.tsx +++ b/src/events/components/Attendance/AttendButton.tsx @@ -6,16 +6,19 @@ import { Button } from '@dotkomonline/design-system'; import { useToast } from 'core/utils/toast/useToast'; import { unwrapResult } from '@reduxjs/toolkit'; import style from './attendance.less'; +import { ConfirmModal } from 'common/components/Modal'; interface IAttendButtonProps { eventId: number; isEventFull: boolean; + isAfterUnattendDeadline: boolean; } const AttendButton: FC = (props: IAttendButtonProps) => { const dispatch = useDispatch(); - const { eventId, isEventFull } = props; - const [showModal, setShowModal] = useState(false); + const { eventId, isEventFull, isAfterUnattendDeadline } = props; + const [showCaptchaModal, setShowCaptchaModal] = useState(false); + const [showConfirmModal, setShowConfirmModal] = useState(false); const [addToast] = useToast({ type: 'success', duration: 5000 }); const signUp = async (token: string | null) => { @@ -29,12 +32,34 @@ const AttendButton: FC = (props: IAttendButtonProps) => { } } }; - const toggleModal = () => setShowModal(!showModal); - const modal = ; + const toggleCaptchaModal = () => setShowCaptchaModal((prevState) => !prevState); + const modal = ; + + const onConfirmModalClose = (retValue: boolean) => { + setShowConfirmModal(false); + + if (retValue) { + toggleCaptchaModal(); + } + }; + + const onButtonClick = () => { + if (!isAfterUnattendDeadline) { + toggleCaptchaModal(); + } else { + setShowConfirmModal(true); + } + }; return ( <> - {modal} diff --git a/src/events/components/Attendance/index.tsx b/src/events/components/Attendance/index.tsx index ff4e9f8e..8c9bf74d 100644 --- a/src/events/components/Attendance/index.tsx +++ b/src/events/components/Attendance/index.tsx @@ -38,7 +38,13 @@ const Attendance: FC = (props: IAttendButtonProps) => { if (!canAttend.status) return

{canAttend.message}

; // Base-case: The user is logged in and can attend! - return ; + return ( + unattendDeadline} + /> + ); }; export default Attendance;