fix close dialog box editor notification #1228

apps/site-projects/src/components/modules/Projects/Project/EditorNotification/EditorNotification.js

@@ -25,17 +25,21 @@ function hasEditingAccess(user, project) {
 }
 
 const EditorNotification = ({ project }) => {
-
+	const [isClosed, setIsClosed] = React.useState(false)
   const user = useUserDataContext().userData;
 
-	if (!hasEditingAccess(user, project)) {
+	if (!hasEditingAccess(user, project) || isClosed) {
 		return (<></>);
 	}
 
+	function closeEditor() {
+		setIsClosed(true)
+	}
+
 	return (
 		<div style={{paddingTop: "1rem"}}>
 			<ThemeProvider theme={theme}>
-      	<Alert signal="notify">
+      	<Alert handleClose={closeEditor} signal="notify">
         	<h3>It looks like you have editing permissions for this page!</h3>
         	<p>
           	Head to the dashboard in Strapi to make changes to the content of this page.

apps/site-projects/src/components/modules/Projects/Project/Project.js

@@ -2,6 +2,7 @@
 import React, { useRef } from "react";
 // import Link from "next/link";
 // import Image from "next/image";
+import { DateTime } from "luxon";
 import { withTheme } from "styled-components";
 import { useRouter } from "next/router";
 import Button from "../../../common/Button";
@@ -30,6 +31,15 @@ function isOnTeam(id, team) {
   return leadersIds.includes(id) || membersIds.includes(id);
 }
 
+function hasPassedOneMonth(dateString) {
+  const currentDate = DateTime.local();
+  const completionDate = DateTime.fromISO(dateString);
+
+  const oneMonthLater = completionDate.plus({ months: 1 });
+
+  return currentDate >= oneMonthLater;
+}
+
 const Project = ({ project, theme }) => {
   const router = useRouter();
   const roleRef = useRef();
@@ -46,6 +56,7 @@ const Project = ({ project, theme }) => {
 
   const checkIfIsOnTeam = isOnTeam(userData.userData.id, project.team);
   const isLogged = userData.userData.id === 0 ? false : true
+  const milestoneIsOutdated = hasPassedOneMonth(project.board.ProjectMilestone[0].task[0].completionDate)
 
   return (
     <Wrapper>
@@ -69,7 +80,7 @@ const Project = ({ project, theme }) => {
         images={project?.Images}
       />
 			{/*}<Role ref={roleRef} data={project?.opportunities} projectSlug={project.slug} />{*/}
-      {isLogged && checkIfIsOnTeam ? <Milestones data={project?.board?.ProjectMilestone} /> : null}
+      {isLogged && checkIfIsOnTeam && !milestoneIsOutdated ? <Milestones data={project?.board?.ProjectMilestone} /> : null}
       {<Sessions calendarId={project.calendarId} />}
       <Team data={project.team} />
       <JoinSupport

apps/site-projects/src/components/modules/Projects/Project/Team/StyledTeam.js

@@ -22,7 +22,4 @@ export const MemberImage = styled.img`
   width: 8.75rem;
   height: 8.75rem;
   flex-shrink: 0;
-  &:hover {
-    opacity: 0.5;
-  }
 `;

apps/site-projects/src/components/modules/Projects/Project/Team/Team.js

@@ -25,13 +25,11 @@ const Team = ({ data }) => (
                 key={leader.id}
               >
                 <span>
-                  <a href="#">
-                    <MemberImage
-                        src={leader.profile?.profilePictureUrl}
-                        // src="https://pbs.twimg.com/profile_images/1157313327867092993/a09TxL_1_400x400.jpg"
-                        alt="Image of Team member"
-                      ></MemberImage>
-                  </a>
+                  <MemberImage
+                      src={leader.profile?.profilePictureUrl}
+                      // src="https://pbs.twimg.com/profile_images/1157313327867092993/a09TxL_1_400x400.jpg"
+                      alt="Image of Team member"
+                    ></MemberImage>
                 </span>
                 <div
                   style={{
@@ -63,13 +61,11 @@ const Team = ({ data }) => (
                 key={member.id}
               >
                 <span>
-                  <a href="#">
-                    <MemberImage
-                        src={member.profile?.profilePictureUrl}
-                        // src="https://pbs.twimg.com/profile_images/1157313327867092993/a09TxL_1_400x400.jpg"
-                        alt="Image of Team member"
-                      ></MemberImage>
-                  </a>
+                  <MemberImage
+                      src={member.profile?.profilePictureUrl}
+                      // src="https://pbs.twimg.com/profile_images/1157313327867092993/a09TxL_1_400x400.jpg"
+                      alt="Image of Team member"
+                    ></MemberImage>
                 </span>
                 <div
                   style={{

packages/UI/src/components/molecules/Alert/Alert.tsx

@@ -6,6 +6,7 @@ import type { AlertProps } from '.';
 
 const Alert: React.FC<React.PropsWithChildren<AlertProps>> = ({
   signal = 'notify',
+  handleClose,
   children,
   ...rest
 }) => {
@@ -21,7 +22,9 @@ const Alert: React.FC<React.PropsWithChildren<AlertProps>> = ({
         <></>
       )}
       <Typography css={{ flex: 1 }}>{children}</Typography>
-      <Icons.Close />
+      <button>
+        <Icons.Close onClick={handleClose} />
+      </button>
     </Container>
   );
 };

packages/UI/src/components/molecules/Alert/StyledAlert.ts

@@ -28,4 +28,10 @@ export const Container = styled.div<Styles>`
       `;
     }}
   }
+
+  > button {
+    border: none;
+    background: none;
+    cursor: pointer;
+  }
 `;

packages/UI/src/components/molecules/Alert/index.ts

@@ -1,4 +1,5 @@
 export interface AlertProps {
   signal?: 'notify' | 'success' | 'error';
+  handleClose?: () => void;
 }
 export { default } from './Alert';