CORE-4889: add status column (#1153) (#1154)

oacore · Apr 26, 2024 · a5c1412 · a5c1412
1 parent 556b015
commit a5c1412
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 16 deletions.
diff --git a/templates/governance/supporters/index.jsx b/templates/governance/supporters/index.jsx
@@ -40,18 +40,38 @@ const GovernanceSupportersPageTemplate = ({ members, page }) => {
     setSearchValue(value)
   }
 
-  const filteredMembers = members.filter(
-    (member) =>
-      member.organisation_name
-        .toLowerCase()
-        .includes(searchValue.toLowerCase()) &&
-      !excludedIds.includes(member.repo_id)
+  const filteredMembers = members.filter((member) =>
+    member.organisation_name.toLowerCase().includes(searchValue.toLowerCase())
   )
 
   const sortedMembers = [...filteredMembers].sort((a, b) =>
     a.organisation_name.localeCompare(b.organisation_name)
   )
 
+  const renderBillingType = (member) => {
+    if (
+      excludedIds.includes(member.repo_id) ||
+      (Array.isArray(member.repo_id) &&
+        member.repo_id.some((id) => excludedIds.includes(id)))
+    ) {
+      return (
+        <a
+          target="_blank"
+          href="https://sparcopen.org/our-work/us-repository-network/discovery-pilot-project/"
+          rel="noreferrer"
+        >
+          USRN Partner
+        </a>
+      )
+    }
+
+    return (
+      <a target="_blank" href="https://core.ac.uk/membership" rel="noreferrer">
+        {member.billing_type} Member
+      </a>
+    )
+  }
+
   const handleRedirect = (providerId) => {
     const repoId = Array.isArray(providerId) ? providerId[0] : providerId
     if (typeof window !== 'undefined')
@@ -145,6 +165,7 @@ const GovernanceSupportersPageTemplate = ({ members, page }) => {
               <Table.Row>
                 <Table.HeadCell>Organisation name</Table.HeadCell>
                 <Table.HeadCell>Country</Table.HeadCell>
+                <Table.HeadCell>Membership status</Table.HeadCell>
               </Table.Row>
             </Table.Head>
             <Table.Body>
@@ -162,6 +183,9 @@ const GovernanceSupportersPageTemplate = ({ members, page }) => {
                     </Table.Cell>
                   </div>
                   <Table.Cell>{member.country}</Table.Cell>
+                  <Table.Cell className={styles.memberColumn}>
+                    {renderBillingType(member)}
+                  </Table.Cell>
                 </Table.Row>
               ))}
               {filteredMembers.length === 0 && (
@@ -174,7 +198,7 @@ const GovernanceSupportersPageTemplate = ({ members, page }) => {
             </Table.Body>
             <Table.Footer>
               <Table.Row className={styles.paginationRow}>
-                <Table.Cell colSpan={2}>
+                <Table.Cell colSpan={3}>
                   <p className={styles.paginationText}>
                     Showing 1 -{' '}
                     {Math.min(displayedItems, filteredMembers.length)}

diff --git a/templates/governance/supporters/supporters.module.scss b/templates/governance/supporters/supporters.module.scss
@@ -137,6 +137,10 @@ $grid-responsive-for-items: repeat(auto-fit, minmax(500px, 1fr));
         }
       }
     }
+    .member-column {
+      color: var(--primary);
+      text-transform: capitalize;
+    }
     td {
       @media (max-width: $breakpoint-sm) {
         padding: 8px;

diff --git a/templates/membership/index.jsx b/templates/membership/index.jsx
@@ -9,7 +9,6 @@ import DetailsTable from './details-table'
 import listIcon from '../../public/images/membership/listIcon.svg'
 import carouselArrowRight from '../../public/images/membership/carouselArrowRight.svg'
 import carouselArrowLeft from '../../public/images/membership/carouselArrowLeft.svg'
-import { excludedIds } from '../governance/supporters'
 import ExperiencesCard from '../../components/experiences-card/experiencesCard'
 
 import { Markdown } from 'components'
@@ -138,10 +137,6 @@ const MembershipPageTemplate = ({ data, members }) => {
     if (condition) setVisibleVideo(condition)
   }, [])
 
-  const filteredMembers = members.filter(
-    (member) => !excludedIds.includes(member.repo_id)
-  )
-
   return (
     <div>
       <div className={styles.layoutWrapper}>
@@ -229,7 +224,7 @@ const MembershipPageTemplate = ({ data, members }) => {
           </Carousel>
           <div className={styles.linkWrapper}>
             <a href={data.carousel.action.url}>
-              See all {filteredMembers.length} CORE members
+              See all {members.length} CORE members
             </a>
           </div>
         </section>
@@ -256,9 +251,7 @@ const MembershipPageTemplate = ({ data, members }) => {
                     className={styles.cardImage}
                   />
                 ) : (
-                  <div className={styles.cardCount}>
-                    {filteredMembers.length}
-                  </div>
+                  <div className={styles.cardCount}>{members.length}</div>
                 )}
                 <h5 className={styles.cardTitle}>{card.title}</h5>
                 <p className={styles.cardCaption}>{card.caption}</p>