Merge pull request #702 from dotkom/feature/confirm-modal-on-unattend…

…-event

Add confirm modal on unattend event

src/common/components/Modal/ConfirmModal.tsx

@@ -0,0 +1,30 @@
+import { Modal, Button } from '@dotkomonline/design-system';
+import { FC } from 'react';
+import style from './modal.less';
+
+interface ConfirmModalProps {
+  title?: string;
+  message?: string;
+  open: boolean;
+  onClose: (retValue: boolean) => void;
+}
+
+export const ConfirmModal: FC<ConfirmModalProps> = ({
+  title = 'Er du sikker?',
+  message = 'Er du sikker på at du ønsker å gjøre dette?',
+  onClose,
+  open,
+}) => {
+  return (
+    <Modal open={open} onClose={() => onClose(false)}>
+      <h1 className={style.title}>{title}</h1>
+      <p className={style.message}>{message}</p>
+      <div className={style.buttonContainer}>
+        <Button onClick={() => onClose(true)}>Ja</Button>
+        <Button variant="outline" onClick={() => onClose(false)}>
+          Nei
+        </Button>
+      </div>
+    </Modal>
+  );
+};

src/common/components/Modal/index.ts

@@ -0,0 +1 @@
+export { ConfirmModal } from './ConfirmModal';

src/common/components/Modal/modal.less

@@ -0,0 +1,25 @@
+.title {
+    font-size: 1.2rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+
+}
+
+.message {
+    font-size: 1.1rem;
+}
+
+.buttonContainer {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: flex-end;
+    width: 100%;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+
+    & > button {
+        padding: 0.5rem 1.4rem;
+        min-width: 5rem;
+    }
+}

src/events/components/Attendance/UnattendButton.tsx

@@ -1,10 +1,11 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import { useDispatch } from 'core/redux/hooks';
 import { removeAttendeeByEventId } from 'events/slices/attendees';
 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;
@@ -15,6 +16,8 @@ interface IAttendButtonProps {
 const UnattendButton: FC<IAttendButtonProps> = ({ eventId, isOnWaitList, waitListNumber }) => {
   const dispatch = useDispatch();
   const [addToast] = useToast({ type: 'success', duration: 5000 });
+  const [showModal, setShowModal] = useState(false);
+
   const signOff = async () => {
     const action = await dispatch(removeAttendeeByEventId(eventId));
     try {
@@ -25,10 +28,27 @@ const UnattendButton: FC<IAttendButtonProps> = ({ eventId, isOnWaitList, waitLis
     }
   };
 
+  const onButtonClick = () => {
+    setShowModal(true);
+  };
+
+  const onModalClose = (retValue: boolean) => {
+    setShowModal(false);
+
+    if (retValue) {
+      signOff();
+    }
+  };
+
   return (
     <>
+      <ConfirmModal
+        message="Er du sikker på at du ønsker å melde deg av dette arrangementet?"
+        open={showModal}
+        onClose={onModalClose}
+      ></ConfirmModal>
       {isOnWaitList ? <p>{`Du er nummer ${waitListNumber} på venteliste.`}</p> : null}
-      <Button color="danger" onClick={signOff} className={style.button}>
+      <Button color="danger" onClick={onButtonClick} className={style.button}>
         Meld meg av
       </Button>
     </>