Blest calendar link for user events

src/events/components/Attendance/AttendButton.tsx

@@ -6,6 +6,7 @@ import { Button } from '@dotkomonline/design-system';
 import { useToast } from 'core/utils/toast/useToast';
 import { unwrapResult } from '@reduxjs/toolkit';
 import style from './attendance.less';
+import { useCalendarNotification } from '../DetailView/NewFunctionalityNotification';
 
 interface IAttendButtonProps {
   eventId: number;
@@ -17,13 +18,15 @@ const AttendButton: FC<IAttendButtonProps> = (props: IAttendButtonProps) => {
   const { eventId, isEventFull } = props;
   const [showModal, setShowModal] = useState<boolean>(false);
   const [addToast] = useToast({ type: 'success', duration: 5000 });
+  const { openNotification } = useCalendarNotification();
 
   const signUp = async (token: string | null) => {
     if (token) {
       const action = await dispatch(setAttendeeByEventId({ eventId, captcha: token }));
       try {
         unwrapResult(action);
         addToast('Du har blitt meldt på arrangementet');
+        openNotification({ oncePersistant: true });
       } catch (err) {
         addToast(`Noe gikk galt under påmeldelse av arrangement, ERROR: ${err.message}`, { type: 'error' });
       }

src/events/components/DetailView/NewFunctionalityNotification.tsx

@@ -0,0 +1,60 @@
+import React, { createContext, useContext, useState, FC, ReactNode } from 'react';
+
+import { Modal } from '@dotkomonline/design-system';
+
+import { md } from 'common/components/Markdown';
+
+const NEW_FUNCTION_ALERT = md`
+# Hei! 👋 Har du noen gang glemt et arrangement du har meldt deg på?
+
+Nå er løsningen her! Du kan nå automatisk få arrangementene du er meldt på rett inn i din kalender.
+
+Hvis dette er noe du kunne tenkt deg - gå til din profil og trykk på "Kalender"-fanen helt nederst. Her kan du lese mer.
+
+Hvis det fortsatt er noe du lurer på, ta kontakt med oss på slack eller send en mail til \`[email protected]\`
+`;
+
+// 1. Create the context
+interface CalendarNotificationContextValue {
+  showCalendarNotification: boolean;
+  closeNotification: () => void;
+  openNotification: (options?: { oncePersistant?: boolean }) => void;
+}
+
+const CalendarNotificationContext = createContext<CalendarNotificationContextValue | undefined>(undefined);
+
+// 2. Create the provider
+export const CalendarNotificationProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  const [showCalendarNotification, setShowCalendarNotification] = useState<boolean>(false);
+
+  const closeNotification = () => {
+    localStorage.setItem('calendarNotificationSeen', 'true');
+    setShowCalendarNotification(false);
+  };
+
+  const openNotification = ({ oncePersistant }: { oncePersistant?: boolean } = {}) => {
+    const userHasOpened = localStorage.getItem('calendarNotificationSeen') == 'true';
+    if (oncePersistant && userHasOpened) return;
+    setShowCalendarNotification(true);
+  };
+
+  return (
+    <CalendarNotificationContext.Provider value={{ showCalendarNotification, closeNotification, openNotification }}>
+      {children}
+      {showCalendarNotification && (
+        <Modal open={showCalendarNotification} onClose={closeNotification}>
+          {NEW_FUNCTION_ALERT}
+        </Modal>
+      )}
+    </CalendarNotificationContext.Provider>
+  );
+};
+
+// 3. Create the hook to use the context
+export const useCalendarNotification = (): CalendarNotificationContextValue => {
+  const context = useContext(CalendarNotificationContext);
+  if (!context) {
+    throw new Error('useCalendarNotification must be used within a CalendarNotificationProvider');
+  }
+  return context;
+};

src/events/components/DetailView/index.tsx

@@ -14,6 +14,7 @@ import InfoBox from './InfoBox';
 import PictureCard from './PictureCard';
 import Registration from './Registation';
 import { selectIsLoggedIn } from 'authentication/selectors/authentication';
+import { CalendarNotificationProvider } from './NewFunctionalityNotification';
 
 interface IProps {
   eventId: number;
@@ -50,14 +51,16 @@ export const DetailView = ({ eventId }: IProps) => {
         <meta property="og:article:tag" content={event.event_type_display} />
         <meta property="og:article:tag" content={event.location} />
       </Head>
-      <div>
-        <PictureCard event={event} />
-        <InfoBox event={event} />
-      </div>
-      <div>
-        <Registration event={event} />
-        <Contact event={event} />
-      </div>
+      <CalendarNotificationProvider>
+        <div>
+          <PictureCard event={event} />
+          <InfoBox event={event} />
+        </div>
+        <div>
+          <Registration event={event} />
+          <Contact event={event} />
+        </div>
+      </CalendarNotificationProvider>
     </div>
   );
 };