Disable unregistration button after unregistration deadline

I've lost count of all the times someone has mailed Webkom because they can't unregister users after the deadline has ran out
webkom · Oct 27, 2024 · 943d639 · 943d639
1 parent d3dc9fc
commit 943d639
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 33 deletions.
diff --git a/app/routes/events/components/EventAdministrate/AttendeeElements.tsx b/app/routes/events/components/EventAdministrate/AttendeeElements.tsx
@@ -13,6 +13,7 @@ import {
   updatePresence,
 } from 'app/actions/EventActions';
 import Tooltip from 'app/components/Tooltip';
+import { unregistrationIsClosed } from 'app/routes/events/utils';
 import { useAppDispatch } from 'app/store/hooks';
 import { Presence } from 'app/store/models/Registration';
 import styles from './Administrate.module.css';
@@ -36,6 +37,7 @@ type PresenceProps = {
 type UnregisterProps = {
   fetching: boolean;
   registration: SelectedAdminRegistration;
+  isUnregistrationClosed: boolean;
 };
 type StripeStatusProps = {
   registrationId: EntityId;
@@ -179,9 +181,13 @@ export const StripeStatus = ({
   );
 };
 
-export const Unregister = ({ fetching, registration }: UnregisterProps) => {
-  const { eventId } = useParams<{ eventId: string }>();
+export const Unregister = ({
+  fetching,
+  registration,
+  isUnregistrationClosed,
+}: UnregisterProps) => {
   const dispatch = useAppDispatch();
+  const { eventId } = useParams<{ eventId: string }>();
 
   return (
     <>
@@ -192,21 +198,28 @@ export const Unregister = ({ fetching, registration }: UnregisterProps) => {
           title="Bekreft avregistrering"
           message={`Er du sikker på at du vil melde av "${registration.user.fullName}"?`}
           onConfirm={() => {
-            eventId &&
-              dispatch(
-                unregister({
-                  eventId,
-                  registrationId: registration.id,
-                  admin: true,
-                }),
-              );
+            if (!eventId) return;
+            dispatch(
+              unregister({
+                eventId,
+                registrationId: registration.id,
+                admin: true,
+              }),
+            );
           }}
           closeOnConfirm
         >
           {({ openConfirmModal }) => (
             <Flex justifyContent="center">
-              <Tooltip content="Meld av bruker">
+              <Tooltip
+                content={
+                  isUnregistrationClosed
+                    ? 'Avregistreringsfrist har gått ut'
+                    : 'Meld av bruker'
+                }
+              >
                 <Icon
+                  disabled={isUnregistrationClosed}
                   onPress={openConfirmModal}
                   name="person-remove-outline"
                   size={18}

diff --git a/app/routes/events/components/EventAdministrate/RegistrationTables.tsx b/app/routes/events/components/EventAdministrate/RegistrationTables.tsx
@@ -9,6 +9,7 @@ import {
   getEventSemesterFromStartTime,
   allConsentsAnswered,
   getConsent,
+  unregistrationIsClosed,
 } from 'app/routes/events/utils';
 import { isNotNullish } from 'app/utils';
 import { WEBKOM_GROUP_ID } from 'app/utils/constants';
@@ -215,6 +216,8 @@ export const RegisteredTable = ({
     (event.feedbackDescription && event.feedbackDescription !== '') ||
     hasNonEmptyFeedback;
 
+  const isUnregistrationClosed = unregistrationIsClosed(event);
+
   const columns: ColumnProps<Registration>[] = [
     {
       title: '#',
@@ -355,7 +358,13 @@ export const RegisteredTable = ({
       render: (
         fetching: Registration['unregistering'],
         registration: Registration,
-      ) => <Unregister fetching={!!fetching} registration={registration} />,
+      ) => (
+        <Unregister
+          fetching={!!fetching}
+          registration={registration}
+          isUnregistrationClosed={isUnregistrationClosed}
+        />
+      ),
     },
   ].filter(isNotNullish);
 

diff --git a/app/routes/events/utils.ts b/app/routes/events/utils.ts
@@ -11,7 +11,7 @@ import type {
   Dateish,
   EventStatusType,
 } from 'app/models';
-import type { CompleteEvent } from 'app/store/models/Event';
+import type { AdministrateEvent, CompleteEvent } from 'app/store/models/Event';
 import type Penalty from 'app/store/models/Penalty';
 import type { PublicUser } from 'app/store/models/User';
 
@@ -283,9 +283,9 @@ export const registrationIsClosed = (
   return moment().isAfter(registrationCloseTime(event));
 };
 
-export const unregistrationCloseTime = (event: Event) =>
+const unregistrationCloseTime = (event: AdministrateEvent) =>
   moment(event.startTime).subtract(event.unregistrationDeadlineHours, 'hours');
-export const unregistrationIsClosed = (event: Event) => {
+export const unregistrationIsClosed = (event: AdministrateEvent) => {
   return moment().isAfter(unregistrationCloseTime(event));
 };
 

diff --git a/packages/lego-bricks/src/components/Icon/Icon.module.css b/packages/lego-bricks/src/components/Icon/Icon.module.css
@@ -29,12 +29,12 @@
   color: var(--lego-font-color);
   transition: background-color var(--easing-fast);
 
-  &:hover,
-  &:focus-visible {
+  &:hover:not(:disabled),
+  &:focus-visible:not(:disabled) {
     background-color: var(--additive-background);
   }
 
-  &:active {
+  &:active:not(:disabled) {
     background-color: var(--color-gray-2);
   }
 }
@@ -43,12 +43,12 @@
   composes: clickable;
   color: var(--danger-color);
 
-  &:hover,
-  &:focus-visible {
+  &:hover:not(:disabled),
+  &:focus-visible:not(:disabled) {
     background-color: var(--color-red-1);
   }
 
-  &:active {
+  &:active:not(:disabled) {
     background-color: var(--color-red-2);
   }
 }
@@ -57,12 +57,12 @@
   composes: clickable;
   color: var(--success-color);
 
-  &:hover,
-  &:focus-visible {
+  &:hover:not(:disabled),
+  &:focus-visible:not(:disabled) {
     background-color: var(--color-green-2);
   }
 
-  &:active {
+  &:active:not(:disabled) {
     background-color: var(--color-green-3);
   }
 }
@@ -71,21 +71,17 @@
   composes: clickable;
   color: var(--color-orange-6);
 
-  &:hover,
-  &:focus-visible {
+  &:hover:not(:disabled),
+  &:focus-visible:not(:disabled) {
     background-color: var(--color-orange-2);
   }
 
-  &:active {
+  &:active:not(:disabled) {
     background-color: var(--color-orange-3);
   }
 }
 
 .disabled {
   opacity: 0.5;
   cursor: not-allowed;
-
-  &:hover {
-    color: var(--color-orange-6);
-  }
 }
diff --git a/packages/lego-bricks/src/components/Icon/index.tsx b/packages/lego-bricks/src/components/Icon/index.tsx
@@ -64,11 +64,11 @@ export const Icon = ({
       {...props}
     >
       {to ? (
-        <Link href={to} className={classNames}>
+        <Link href={to} isDisabled={disabled} className={classNames}>
           {iconElement}
         </Link>
       ) : onPress ? (
-        <Button onPress={onPress} className={classNames}>
+        <Button onPress={onPress} isDisabled={disabled} className={classNames}>
           {iconElement}
         </Button>
       ) : (