CORE-5013: FAIR base structure

components/application/activities.js

@@ -78,11 +78,11 @@ const config = new RouteConfig([
     path: 'usrn',
     icon: 'file-check',
   },
-  // {
-  //   test: /\/fair/,
-  //   path: 'fair',
-  //   icon: 'metadata-validator',
-  // },
+  {
+    test: /\/fair/,
+    path: 'fair',
+    icon: 'metadata-validator',
+  },
   {
     test: /\/plugins/,
     path: 'plugins',

components/usrn-stat/index.jsx

@@ -20,6 +20,7 @@ const StatUSRN = ({ className, content, usrnParams }) => {
   const STATUS_NO = 0
   const STATUS_YES = 1
   const STATUS_DEVELOP = 2
+  const STATUS_OPEN_QUESTION = 3
   const {
     dataProviderId,
     doiCount,
@@ -73,6 +74,18 @@ const StatUSRN = ({ className, content, usrnParams }) => {
   let statTextCreated = ''
   let statusClass = STATUS_NO
   switch (content.id) {
+    case 'recordsProvideAccessibility':
+      statusClass = STATUS_OPEN_QUESTION
+      break
+    case 'isManageDeposits':
+      statusClass = STATUS_OPEN_QUESTION
+      break
+    case 'takeDownNotices':
+      statusClass = STATUS_OPEN_QUESTION
+      break
+    case 'preservationContentRepository':
+      statusClass = STATUS_OPEN_QUESTION
+      break
     case 'accessibilityStatements':
       statusClass = STATUS_DEVELOP
       break
@@ -226,28 +239,32 @@ const StatUSRN = ({ className, content, usrnParams }) => {
         <div
           className={classNames.use(
             styles.status,
-            // eslint-disable-next-line no-nested-ternary
-            statusClass === STATUS_NO
-              ? styles.status0
-              : statusClass === STATUS_YES
-              ? styles.status1
-              : styles.status2
+            statusClass === STATUS_NO ? styles.status0 : '',
+            statusClass === STATUS_YES ? styles.status1 : '',
+            statusClass === STATUS_DEVELOP ? styles.status2 : '',
+            statusClass === STATUS_OPEN_QUESTION ? styles.status3 : ''
           )}
         >
-          {
-            // eslint-disable-next-line no-nested-ternary
-            statusClass === STATUS_NO ? (
-              'No'
-            ) : statusClass === STATUS_YES ? (
-              'Yes'
-            ) : (
-              <Actions
-                description="This is in development right now"
-                hoverIcon={false}
-                hoverText="WIP"
-              />
-            )
-          }
+          {statusClass === STATUS_NO ? 'No' : ''}
+          {statusClass === STATUS_YES ? 'Yes' : ''}
+          {statusClass === STATUS_DEVELOP ? (
+            <Actions
+              description="This is in development right now"
+              hoverIcon={false}
+              hoverText="WIP"
+            />
+          ) : (
+            ''
+          )}
+          {statusClass === STATUS_OPEN_QUESTION ? (
+            <Actions
+              description="It needs extra info"
+              hoverIcon={false}
+              hoverText="Open question"
+            />
+          ) : (
+            ''
+          )}
         </div>
       </div>
       <div className={styles.statusRow}>

components/usrn-stat/styles.module.css

@@ -91,6 +91,20 @@
   text-align: left;
 }
 
+.status {
+  padding: 15px 5px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.status-3 {
+  background: rgba(42, 81, 170, 0.1);
+  color: rgba(42, 81, 170, 1);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 12px;
+}
+
 .status-2 {
   color: #939393;
   background-color: #f5f5f5;
@@ -106,12 +120,6 @@
   background-color: #fcc;
 }
 
-.status {
-  padding: 15px 5px;
-  font-size: 14px;
-  font-weight: 500;
-}
-
 /*  ==== */
 .chart-percent {
   padding: 0 25px;

components/usrn-text/linkDoc.jsx

@@ -14,7 +14,7 @@ const LinkDoc = ({ content }) => {
           alt="docs"
         />
         <a href={content.linkDocumentation} target="_blank" rel="noreferrer">
-          Link to documentation
+          {content.textLinkDoc ?? 'Link to documentation'}
         </a>
       </div>
     ) : (

pages/data-providers/[data-provider-id]/fair.jsx

@@ -1,16 +1,9 @@
 import React from 'react'
 
 import { withGlobalStore } from 'store'
-import { USRNTemplateActivated, USRNTemplateDeactivated } from 'templates/usrn'
-import * as texts from 'texts/usrn'
-
-const USRNPage = ({ store: { dataProvider, organisation }, ...props }) => {
-  const isUSRNActivated =
-    Object.values(texts.status.usrnListDataProvider).indexOf(dataProvider?.id) >
-    -1
-
-  if (!isUSRNActivated) return <USRNTemplateDeactivated {...props} />
+import { USRNTemplateActivated } from 'templates/usrn'
 
+const FAIRPage = ({ store: { dataProvider, organisation }, ...props }) => {
   const formattedDateReport = dataProvider?.usrn?.dateReportUpdate
     ? new Intl.DateTimeFormat('en-US', {
         year: 'numeric',
@@ -46,4 +39,4 @@ const USRNPage = ({ store: { dataProvider, organisation }, ...props }) => {
   return <USRNTemplateActivated usrnParams={usrnParams} {...props} />
 }
 
-export default withGlobalStore(USRNPage)
+export default withGlobalStore(FAIRPage)

pages/data-providers/[data-provider-id]/usrn.jsx

@@ -9,7 +9,12 @@ const USRNPage = ({ store: { dataProvider, organisation }, ...props }) => {
     Object.values(texts.status.usrnListDataProvider).indexOf(dataProvider?.id) >
     -1
 
-  if (!isUSRNActivated) return <USRNTemplateDeactivated {...props} />
+  let usrnParams = {
+    template: 'usrn',
+  }
+
+  if (!isUSRNActivated)
+    return <USRNTemplateDeactivated usrnParams={usrnParams} {...props} />
 
   const formattedDateReport = dataProvider?.usrn?.dateReportUpdate
     ? new Intl.DateTimeFormat('en-US', {
@@ -23,7 +28,7 @@ const USRNPage = ({ store: { dataProvider, organisation }, ...props }) => {
   const issueRestrictedAttachment =
     issueAggregation?.countByType?.RESTRICTED_ATTACHMENT ?? null
 
-  const usrnParams = {
+  usrnParams = {
     template: 'usrn',
     dataProviderId: dataProvider.id,
     dataProviderName: dataProvider.name,

templates/usrn/cards/certificates-card.jsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import { classNames } from '@oacore/design/lib/utils'
+
+import styles from './certificates.module.css'
+import silver from '../../../components/upload/assets/certificate-silver.png'
+import gold from '../../../components/upload/assets/certificate-gold.png'
+import bronze from '../../../components/upload/assets/certificate-bronze.png'
+
+import { Card } from 'design'
+import * as textsFAIR from 'texts/fair'
+
+const CertificatesCard = () => (
+  <Card tag="section">
+    <div className={styles.cardsWrapper}>
+      {Object.keys(textsFAIR.certificates.typeCertificates).map((key) => {
+        if (textsFAIR.certificates.typeCertificates[key].isEnable === 'yes') {
+          const isActiveCertificate =
+            textsFAIR.certificates.typeCertificates[key].id === 'bronze'
+          const dateCertified = '16.08.2024'
+          return (
+            <div
+              className={classNames.use(styles.card, {
+                [styles.certificateActive]: isActiveCertificate,
+                [styles.certificateNotActive]: !isActiveCertificate,
+              })}
+            >
+              <div className={styles.title}>
+                {textsFAIR.certificates.typeCertificates[key].title}
+                {isActiveCertificate && dateCertified && (
+                  <div className={styles.certified}>
+                    Certified {dateCertified}
+                  </div>
+                )}
+              </div>
+              <div className={styles.descriptionWrapper}>
+                <img
+                  className={styles.img}
+                  src={
+                    (textsFAIR.certificates.typeCertificates[key].id ===
+                      'silver' &&
+                      silver) ||
+                    (textsFAIR.certificates.typeCertificates[key].id ===
+                      'gold' &&
+                      gold) ||
+                    (textsFAIR.certificates.typeCertificates[key].id ===
+                      'bronze' &&
+                      bronze)
+                  }
+                  width="116"
+                  alt={textsFAIR.certificates.typeCertificates[key].title}
+                />
+                <div className={styles.description}>
+                  {textsFAIR.certificates.typeCertificates[key].description}
+                </div>
+
+                {isActiveCertificate && (
+                  <div className={styles.accessText}>
+                    {textsFAIR.certificates.typeCertificates[key].accessText}
+                  </div>
+                )}
+                {!isActiveCertificate && (
+                  <a href="/" className={styles.getCertificate}>
+                    Get certification
+                  </a>
+                )}
+              </div>
+            </div>
+          )
+        }
+        return ''
+      })}
+    </div>
+  </Card>
+)
+
+export default CertificatesCard