Merge pull request #704 from dotkom/feat/confirmation-before-attendin…

…g-events-after-unattend-expiry

Add confirmation before attending events you cannot unnattend

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;
+  cannotUnattend?: boolean;
 }
 
 const AttendButton: FC<IAttendButtonProps> = (props: IAttendButtonProps) => {
   const dispatch = useDispatch();
   const { eventId, isEventFull } = props;
   const [showModal, setShowModal] = useState<boolean>(false);
+  const [showConfirmModal, setShowConfirmModal] = useState<boolean>(false);
   const [addToast] = useToast({ type: 'success', duration: 5000 });
 
   const signUp = async (token: string | null) => {
@@ -31,10 +34,33 @@ const AttendButton: FC<IAttendButtonProps> = (props: IAttendButtonProps) => {
   };
   const toggleModal = () => setShowModal(!showModal);
   const modal = <CaptchaModal showModal={showModal} toggleModal={toggleModal} setRecaptcha={signUp} />;
+  const onConfirmModalClose = (retValue: boolean) => {
+    setShowConfirmModal(false);
+
+    if (retValue) {
+      toggleModal();
+    }
+  };
 
   return (
     <>
-      <Button color={isEventFull ? 'secondary' : 'success'} onClick={toggleModal} className={style.button}>
+      <ConfirmModal
+        message="Avmeldingsfristen er utløpt så du vil ikke kunne melde deg av igjen."
+        title="Bekreft påmelding"
+        open={showConfirmModal}
+        onClose={onConfirmModalClose}
+      ></ConfirmModal>
+      <Button
+        color={isEventFull ? 'secondary' : 'success'}
+        onClick={() => {
+          if (props.cannotUnattend) {
+            setShowConfirmModal(true);
+          } else {
+            toggleModal();
+          }
+        }}
+        className={style.button}
+      >
         Meld meg på {isEventFull ? 'venteliste' : null}
       </Button>
       {modal}

src/events/components/Attendance/index.tsx

@@ -38,7 +38,13 @@ const Attendance: FC<IAttendButtonProps> = (props: IAttendButtonProps) => {
   if (!canAttend.status) return <p>{canAttend.message}</p>;
 
   // Base-case: The user is logged in and can attend!
-  return <AttendButton eventId={id} isEventFull={max_capacity <= number_of_seats_taken} />;
+  return (
+    <AttendButton
+      eventId={id}
+      isEventFull={max_capacity <= number_of_seats_taken}
+      cannotUnattend={unattendDeadline < currentTime}
+    />
+  );
 };
 
 export default Attendance;