From f1ad4d9fbbff2a9bc29249f06040f9d46d2bcc13 Mon Sep 17 00:00:00 2001
From: "Dusan Mijatovic (PC2020)" <d.mijatovic@dv4all.nl>
Date: Tue, 15 Aug 2023 19:42:03 +0200
Subject: [PATCH] feat: add verified organisation badge and claim organisation
 button

---
 .../home/rsd/OrganisationSignUp.tsx           | 163 ++---------------
 .../home/rsd/OrganisationSignUpButton.tsx     |  34 ++++
 .../home/rsd/OrganisationSignUpDialog.tsx     | 164 ++++++++++++++++++
 .../overview/card/OrganisationCard.tsx        |  89 ++++++----
 .../overview/card/TenantBadge.tsx             |  71 ++++++++
 .../overview/card/TenantStatus.tsx            |  32 ----
 .../overview/cards/ProjectDuration.tsx        |   4 +-
 7 files changed, 340 insertions(+), 217 deletions(-)
 create mode 100644 frontend/components/home/rsd/OrganisationSignUpButton.tsx
 create mode 100644 frontend/components/home/rsd/OrganisationSignUpDialog.tsx
 create mode 100644 frontend/components/organisation/overview/card/TenantBadge.tsx
 delete mode 100644 frontend/components/organisation/overview/card/TenantStatus.tsx

diff --git a/frontend/components/home/rsd/OrganisationSignUp.tsx b/frontend/components/home/rsd/OrganisationSignUp.tsx
index 4ea8a972d..7adb6b2e5 100644
--- a/frontend/components/home/rsd/OrganisationSignUp.tsx
+++ b/frontend/components/home/rsd/OrganisationSignUp.tsx
@@ -6,161 +6,28 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import {useState} from 'react'
-import useTheme from '@mui/material/styles/useTheme'
-import useMediaQuery from '@mui/material/useMediaQuery'
-import Dialog from '@mui/material/Dialog'
-import MailOutlineOutlined from '@mui/icons-material/MailOutlineOutlined'
 
-import {config,organisationSignUp} from './config'
-import useRsdSettings from '~/config/useRsdSettings'
-import {useForm} from 'react-hook-form'
-
-type SignUpOrganisation = {
-  name: string,
-  organisation: string,
-  role: string,
-  description: string
-}
-
-const inputClasses='mb-4 placeholder:text-base-500 outline-0 p-2 w-full text-sm bg-transparent text-base-100 border border-base-600 rounded-sm'
+import {config} from './config'
+import OrganisationSignUpButton from './OrganisationSignUpButton'
+import OrganisationSignUpDialog from './OrganisationSignUpDialog'
 
 export default function OrganisationSignUp({minWidth = '9rem'}:{minWidth:string}) {
-  const theme = useTheme()
-  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'))
-  const {host} = useRsdSettings()
   const [open, setOpen] = useState(false)
 
-  const {register, watch, reset} = useForm<SignUpOrganisation>({
-    mode: 'onChange',
-    defaultValues: {
-      name:'',
-      organisation: '',
-      role:'',
-      description: ''
-    }
-  })
-
-  const [name,organisation,role,description] = watch(['name','organisation','role','description'])
-
-  // console.group('Organisation Sing Up')
-  // console.log('name...', name)
-  // console.log('organisation...', organisation)
-  // console.log('description...', description)
-  // console.groupEnd()
-
-  function mailBody(): string | undefined {
-    return encodeURIComponent(`Hi RSD team,
-
-    I would like to add my organisation to RSD!
-
-    -------------------------
-    Name: ${name}
-    Organisation: ${organisation}
-    Professional role: ${role}
-    -------------------------
-
-    ${description}
-  `)
-  }
-
-  function closeAndReset() {
-    setOpen(false)
-    // reset form after all processes settled
-    // we need to wait for mailBody function
-    setTimeout(() => {
-      reset()
-    },0)
-  }
-
   return (
     <>
-      <button
-        aria-describedby="Sign up button"
-        onClick={()=>setOpen(true)}
-      >
-        <div className="relative group">
-          <div
-            className="absolute -inset-1 bg-gradient-to-r from-glow-start to-glow-end rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-1000 group-hover:duration-300"/>
-          <div
-            className="flex gap-3 text-base-900 relative px-8 py-3 bg-base-100 ring-1 ring-base-800 rounded leading-none items-center justify-center space-x-2"
-            style={{
-              minWidth
-            }}
-          >
-            <span className="space-y-2 text-xl font-medium whitespace-nowrap">
-              {config.button.register.label}
-            </span>
-          </div>
-        </div>
-      </button>
-      <Dialog
-        fullScreen={fullScreen}
-        open={open}
-        onClose={()=>setOpen(false)}
-        aria-labelledby="responsive-dialog-title"
-      >
-        <div className="h-full w-full bg-[#232323] p-6">
-          <div className="mx-auto">
-            <div className="text-base-100 text-xl mb-4">
-              {config.button.register.label}
-            </div>
-            <div className="text-sm text-[#B7B7B7] pb-4">
-              You can find more information about registering your organisation in our <u><a href="https://research-software-directory.github.io/documentation/register-organization.html" target="_blank" rel="noreferrer">documentation</a></u>.
-            </div>
-            {/* INPUTS */}
-            <input type="text"
-              autoFocus={true}
-              autoComplete="off"
-              className={inputClasses}
-              placeholder={organisationSignUp.name.label}
-              {...register('name')}
-            />
-            <input type="text"
-              autoComplete="off"
-              className={inputClasses}
-              placeholder={organisationSignUp.organisation.label}
-              {...register('organisation')}
-            />
-            <input type="text"
-              autoComplete="off"
-              className={inputClasses}
-              placeholder={organisationSignUp.role.label}
-              {...register('role')}
-            />
-            <textarea
-              rows={5}
-              className={inputClasses}
-              placeholder={organisationSignUp.description.label}
-              {...register('description')}
-            >
-            </textarea>
-            {/* NOTIFICATIONS */}
-            <div className="text-sm text-[#B7B7B7] pb-4">
-              {organisationSignUp.notification[0]} <br/>
-              {organisationSignUp.notification[1]}
-            </div>
-            {/* NAVIGATION */}
-            <div className="flex justify-end items-center gap-4 my-2">
-              <button
-                className="text-sm text-base-100 border border-base-500 text-opacity-60 rounded px-4 py-1 hover:opacity-90 active:opacity-95"
-                onClick={closeAndReset}>
-                Cancel
-              </button>
-              <a
-                role="button"
-                type="submit"
-                onClick={closeAndReset}
-                className="text-sm text-base-100 hover:text-base-100 bg-primary px-4 py-1 rounded hover:opacity-90 active:opacity-95"
-                target="_blank"
-                rel="noreferrer"
-                href={`mailto:${host.email}?subject=${encodeURIComponent(config.button.register.label)}&body=${mailBody()}`}
-              >
-                <MailOutlineOutlined/> Create email *
-              </a>
-            </div>
-          </div>
-        </div>
-      </Dialog>
+      <OrganisationSignUpButton
+        onClick={setOpen}
+        minWidth={minWidth}
+        label={config.button.register.label}
+      />
+      {open &&
+        <OrganisationSignUpDialog
+          title={config.button.register.label}
+          onClose={() => setOpen(false)}
+          open={open}
+        />
+      }
     </>
   )
 }
diff --git a/frontend/components/home/rsd/OrganisationSignUpButton.tsx b/frontend/components/home/rsd/OrganisationSignUpButton.tsx
new file mode 100644
index 000000000..b57689dba
--- /dev/null
+++ b/frontend/components/home/rsd/OrganisationSignUpButton.tsx
@@ -0,0 +1,34 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
+//
+// SPDX-License-Identifier: Apache-2.0
+
+type OrganisationSignUpButtonProps = {
+  onClick: (open: boolean) => void
+  minWidth: string
+  label: string
+}
+
+export default function OrganisationSignUpButton({onClick,minWidth,label}:OrganisationSignUpButtonProps) {
+  return (
+    <button
+      aria-describedby="Sign up button"
+      onClick={()=>onClick(true)}
+    >
+      <div className="relative group">
+        <div
+          className="absolute -inset-1 bg-gradient-to-r from-glow-start to-glow-end rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-1000 group-hover:duration-300"/>
+        <div
+          className="flex gap-3 text-base-900 relative px-8 py-3 bg-base-100 ring-1 ring-base-800 rounded leading-none items-center justify-center space-x-2"
+          style={{
+            minWidth
+          }}
+        >
+          <span className="space-y-2 text-xl font-medium whitespace-nowrap">
+            {label}
+          </span>
+        </div>
+      </div>
+    </button>
+  )
+}
diff --git a/frontend/components/home/rsd/OrganisationSignUpDialog.tsx b/frontend/components/home/rsd/OrganisationSignUpDialog.tsx
new file mode 100644
index 000000000..32adcfd66
--- /dev/null
+++ b/frontend/components/home/rsd/OrganisationSignUpDialog.tsx
@@ -0,0 +1,164 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import Dialog from '@mui/material/Dialog'
+import useTheme from '@mui/material/styles/useTheme'
+import useMediaQuery from '@mui/material/useMediaQuery'
+
+import {useForm} from 'react-hook-form'
+
+import {config,organisationSignUp} from './config'
+import useRsdSettings from '~/config/useRsdSettings'
+import MailOutlineOutlined from '@mui/icons-material/MailOutlineOutlined'
+
+type OrganisationSignUpDialogProps = {
+  title: string
+  reason?: string
+  open: boolean
+  onClose: () => void
+  initOrg?: string
+}
+
+type SignUpOrganisation = {
+  name: string,
+  organisation: string,
+  role: string,
+  description: string
+}
+
+const inputClasses='mb-4 placeholder:text-base-500 outline-0 p-2 w-full text-sm bg-transparent text-base-100 border border-base-600 rounded-sm'
+
+export default function OrganisationSignUpDialog({
+  title, open, onClose, initOrg,
+  reason='I would like to add my organisation to RSD!'
+}: OrganisationSignUpDialogProps) {
+  const theme = useTheme()
+  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'))
+  const {host} = useRsdSettings()
+
+  const {register, watch, reset} = useForm<SignUpOrganisation>({
+    mode: 'onChange',
+    defaultValues: {
+      name:'',
+      organisation: initOrg ?? '',
+      role:'',
+      description: ''
+    }
+  })
+
+  const [name,organisation,role,description] = watch(['name','organisation','role','description'])
+
+  function mailBody(): string | undefined {
+    return encodeURIComponent(`Hi RSD team,
+
+    ${reason}
+
+    -------------------------
+    Name: ${name}
+    Organisation: ${organisation}
+    Professional role: ${role}
+    -------------------------
+
+    ${description}
+  `)
+  }
+
+
+  function closeAndReset() {
+    onClose()
+    // reset form after all processes settled
+    // we need to wait for mailBody function
+    setTimeout(() => {
+      reset()
+    },0)
+  }
+
+
+  return (
+    <Dialog
+      fullScreen={fullScreen}
+      open={open}
+      onClose={(e, reason) => {
+        if (reason === 'backdropClick' || reason === 'escapeKeyDown') {
+          // console.log('do nothing')
+        } else {
+          closeAndReset()
+        }
+      }}
+      disableEscapeKeyDown
+      aria-labelledby="responsive-dialog-title"
+    >
+      <div className="h-full w-full bg-[#232323] p-6">
+        <div className="mx-auto">
+          <div className="text-base-100 text-xl mb-4">
+            {title}
+          </div>
+          <div className="text-sm text-[#B7B7B7] pb-4">
+            You can find more information about registering your organisation in our <u><a href="https://research-software-directory.github.io/documentation/register-organization.html" target="_blank" rel="noreferrer">documentation</a></u>.
+          </div>
+          {/* INPUTS */}
+          <input type="text"
+            autoFocus={true}
+            autoComplete="off"
+            className={inputClasses}
+            placeholder={organisationSignUp.name.label}
+            {...register('name')}
+          />
+          <input type="text"
+            autoComplete="off"
+            className={inputClasses}
+            placeholder={organisationSignUp.organisation.label}
+            {...register('organisation')}
+          />
+          <input type="text"
+            autoComplete="off"
+            className={inputClasses}
+            placeholder={organisationSignUp.role.label}
+            {...register('role')}
+          />
+          <textarea
+            rows={5}
+            className={inputClasses}
+            placeholder={organisationSignUp.description.label}
+            {...register('description')}
+          >
+          </textarea>
+          {/* NOTIFICATIONS */}
+          <div className="text-sm text-[#B7B7B7] pb-4">
+            {organisationSignUp.notification[0]} <br/>
+            {organisationSignUp.notification[1]}
+          </div>
+          {/* NAVIGATION */}
+          <div className="flex justify-end items-center gap-4 my-2">
+            <button
+              className="text-sm text-base-100 border border-base-500 text-opacity-60 rounded px-4 py-1 hover:opacity-90 active:opacity-95"
+              onClick={(e) => {
+                // stop click propagation
+                e.preventDefault()
+                // call close and reset fn
+                closeAndReset()
+              }}>
+              Cancel
+            </button>
+            <a
+              role="button"
+              type="submit"
+              onClick={(e) => {
+                // e.preventDefault()
+                closeAndReset()
+              }}
+              className="text-sm text-base-100 hover:text-base-100 bg-primary px-4 py-1 rounded hover:opacity-90 active:opacity-95"
+              target="_blank"
+              rel="noreferrer"
+              href={`mailto:${host.email}?subject=${encodeURIComponent(config.button.register.label)}&body=${mailBody()}`}
+            >
+              <MailOutlineOutlined/> Create email *
+            </a>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  )
+}
diff --git a/frontend/components/organisation/overview/card/OrganisationCard.tsx b/frontend/components/organisation/overview/card/OrganisationCard.tsx
index b26296cf9..e32246de6 100644
--- a/frontend/components/organisation/overview/card/OrganisationCard.tsx
+++ b/frontend/components/organisation/overview/card/OrganisationCard.tsx
@@ -14,7 +14,7 @@ import ImageWithPlaceholder from '~/components/layout/ImageWithPlaceholder'
 import CardImageFrame from '~/components/cards/CardImageFrame'
 import CardContentFrame from '~/components/cards/CardContentFrame'
 import CountryLabel from './CountryLabel'
-import TenantStatus from './TenantStatus'
+import TenantBadge from './TenantBadge'
 
 export type OrganisationCardProps = {
   id: string,
@@ -31,40 +31,59 @@ export type OrganisationCardProps = {
 export default function OrganisationCard({organisation}: { organisation: OrganisationCardProps }) {
 
   return (
-    <Link
-      data-testid="organisation-card-link"
-      href={`/organisations/${organisation.rsd_path}?tab=software&order=mention_cnt`}
-      className="flex h-full hover:text-inherit"
-      passHref
-    >
-      {/* Organization card content */}
-      <div className="flex flex-col transition overflow-hidden bg-base-100 shadow-md hover:shadow-lg rounded-lg hover:cursor-pointer select-none w-full relative">
-        <CardImageFrame>
-          <ImageWithPlaceholder
-            src={`${getImageUrl(organisation.logo_id) ?? ''}`}
-            alt={`Logo for ${organisation.name}`}
-            type="gradient"
-            className={`w-full text-base-content-disabled ${organisation.logo_id ? 'p-4':''}`}
-            bgSize={'contain'}
-          />
-        </CardImageFrame>
-        <TenantStatus is_tenant={organisation.is_tenant} />
-        <CardContentFrame>
-          <div className="flex-1">
-            <CountryLabel country={organisation.country} />
-            <CardTitleSubtitle
-              title={organisation.name}
-              subtitle={organisation.short_description ?? ''}
-            />
-          </div>
-          <div className="flex gap-8 justify-evenly text-center">
-            <OrganisationCardMetrics
-              software_cnt={organisation.software_cnt}
-              project_cnt={organisation.project_cnt}
+    <div className="relative">
+      <Link
+        data-testid="organisation-card-link"
+        href={`/organisations/${organisation.rsd_path}?tab=software&order=mention_cnt`}
+        className="flex h-full hover:text-inherit"
+        passHref
+      >
+        <div className = "flex flex-col transition overflow-hidden bg-base-100 shadow-md hover:shadow-lg rounded-lg hover:cursor-pointer select-none w-full relative" >
+          <CardImageFrame>
+            <ImageWithPlaceholder
+              src={`${getImageUrl(organisation.logo_id) ?? ''}`}
+              alt={`Logo for ${organisation.name}`}
+              type="gradient"
+              className={`w-full text-base-content-disabled ${organisation.logo_id ? 'p-4':''}`}
+              bgSize={'contain'}
             />
-          </div>
-        </CardContentFrame>
-      </div>
-    </Link>
+          </CardImageFrame>
+          <CardContentFrame>
+            <div className="flex-1">
+              <CountryLabel country={organisation.country} />
+              <CardTitleSubtitle
+                title={organisation.name}
+                subtitle={organisation.short_description ?? ''}
+              />
+            </div>
+            <div className="flex gap-8 justify-evenly text-center">
+              <OrganisationCardMetrics
+                software_cnt={organisation.software_cnt}
+                project_cnt={organisation.project_cnt}
+              />
+              {/* if is not tenant we render the placeholder here and TenantBadge outside the Link */}
+              {organisation.is_tenant === false ?
+                <div className="min-w-[3rem]" />
+                :
+                <TenantBadge
+                  is_tenant={organisation.is_tenant}
+                  organisation={organisation.name}
+                />
+              }
+            </div>
+          </CardContentFrame>
+        </div>
+      </Link>
+      {/* if is not the tenant TenantBadge needs to be outside organisation link for email link to work */}
+      {organisation.is_tenant === false ?
+        <div style={{position: 'absolute',right:'2.5rem', bottom: '1rem'}}>
+          <TenantBadge
+            is_tenant={organisation.is_tenant}
+            organisation={organisation.name}
+          />
+        </div>
+        : null
+      }
+    </div>
   )
 }
diff --git a/frontend/components/organisation/overview/card/TenantBadge.tsx b/frontend/components/organisation/overview/card/TenantBadge.tsx
new file mode 100644
index 000000000..71c710df5
--- /dev/null
+++ b/frontend/components/organisation/overview/card/TenantBadge.tsx
@@ -0,0 +1,71 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {useState} from 'react'
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
+import IconButton from '@mui/material/IconButton'
+import Tooltip from '@mui/material/Tooltip'
+import UnpublishedIcon from '@mui/icons-material/Unpublished'
+
+import OrganisationSignUpDialog from '~/components/home/rsd/OrganisationSignUpDialog'
+
+type TenantBadgeProps = {
+  is_tenant: boolean
+  organisation: string
+}
+
+export default function TenantBadge({is_tenant,organisation}: TenantBadgeProps) {
+  const [modal,setModal]=useState(false)
+
+  // console.group('TenantBadge')
+  // console.log('is_tenant...', is_tenant)
+  // console.log('modal...', modal)
+  // console.log('organisation...', organisation)
+  // console.groupEnd()
+
+  if (is_tenant === true) {
+    return (
+      <div className="flex items-end text-base-600">
+        <Tooltip
+          title="Verified organisation"
+          placement='top'
+          sx={{
+            cursor:'default'
+          }}
+        >
+          <CheckCircleOutlineIcon sx={{width:'1.5rem', height:'1.5rem',margin:'0.75rem'}} />
+        </Tooltip>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex items-end">
+      <Tooltip describeChild
+        title="Click here to contact us and claim this organisation."
+        placement='top'
+        // arrow
+      >
+        <IconButton
+          size='large'
+          onClick={(e) => {
+            setModal(true)
+            e.preventDefault()
+          }}>
+          <UnpublishedIcon sx={{width:'1.5rem', height:'1.5rem'}} />
+        </IconButton>
+      </Tooltip>
+      {modal &&
+        <OrganisationSignUpDialog
+          title="Claim an organisation"
+          reason={`I would like to become an administrator of ${organisation}.`}
+          onClose={() => setModal(false)}
+          open={modal}
+          initOrg={organisation }
+        />
+      }
+    </div>
+  )
+}
diff --git a/frontend/components/organisation/overview/card/TenantStatus.tsx b/frontend/components/organisation/overview/card/TenantStatus.tsx
deleted file mode 100644
index f82d6e761..000000000
--- a/frontend/components/organisation/overview/card/TenantStatus.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
-// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
-//
-// SPDX-License-Identifier: Apache-2.0
-
-type TenantStatusProps = {
-  is_tenant: boolean
-  width?: string
-  borderRadius?: string
-  letterSpacing?: string
-}
-
-export default function TenantStatus({
-  is_tenant,
-  width = '6rem',
-  borderRadius = '0 0rem 3rem 0',
-  letterSpacing = '0.125rem'
-}: TenantStatusProps) {
-
-  if (is_tenant===true) {
-    return (
-      <div
-        className="absolute left-0 top-4 bg-primary text-base-100 px-2 py-1 text-xs uppercase font-medium opacity-60"
-        style={{width, borderRadius, letterSpacing}}
-      >
-        Verified
-      </div>
-    )
-  }
-
-  return null
-}
diff --git a/frontend/components/projects/overview/cards/ProjectDuration.tsx b/frontend/components/projects/overview/cards/ProjectDuration.tsx
index 2f1a28ab1..1e85a2b8e 100644
--- a/frontend/components/projects/overview/cards/ProjectDuration.tsx
+++ b/frontend/components/projects/overview/cards/ProjectDuration.tsx
@@ -15,9 +15,9 @@ type ProjectDurationProps = {
 export default function ProjectDuration({date_start,date_end}:ProjectDurationProps) {
   return (
     <div className="text-sm text-base-content-secondary">
-      <span>{date_start ? getMonthYearDate(date_start) : 'N/S'}</span>
+      <span>{date_start ? getMonthYearDate(date_start) : 'N/A'}</span>
       &nbsp;-&nbsp;
-      <span>{date_end ? getMonthYearDate(date_end) : 'N/S'}</span>
+      <span>{date_end ? getMonthYearDate(date_end) : 'N/A'}</span>
     </div>
   )
 }