Core 4846 links ref (#1105) (#1106)

* CORE-4846: update link redirect * CORE-4847: join form open
oacore · Feb 29, 2024 · 75ee700 · 75ee700
1 parent 1c0f00d
commit 75ee700
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 14 deletions.
diff --git a/data/benefits.yml b/data/benefits.yml
@@ -17,10 +17,10 @@ banner:
   description: Facilitate access of your scientific research outputs to everyone in the world
   actions:
     links:
-      -
+      form:
        url: join-core
        text: Join NOW
-      -
+      Link:
        url: /data-providers
        text: LIST  OF DATA PROVIDERS
        link: true

diff --git a/design-v2/benefits/index.jsx b/design-v2/benefits/index.jsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Button } from '@oacore/design/lib/elements'
-import { classNames } from '@oacore/design/lib/utils'
+import { useRouter } from 'next/router'
 
 import styles from './styles.module.scss'
 // eslint-disable-next-line import/order
@@ -59,6 +59,7 @@ const BenefitsPageTemplate = ({ data }) => {
   const [showModal, setShowModal] = useState(false)
   const [showGratitudeModal, setGratitudeModal] = useState(false)
   const [modalActive, setModalActive] = useState(false)
+  const router = useRouter()
 
   const toggleShowAll = () => {
     setShowAll((prev) => !prev)
@@ -68,6 +69,10 @@ const BenefitsPageTemplate = ({ data }) => {
     setModalActive(true)
   }
 
+  useEffect(() => {
+    if (router.asPath.includes('#join-core')) toggleModal()
+  }, [router.asPath])
+
   const itemsToShow = showAll
     ? data.faqs.sections[0].items
     : data.faqs.sections[0].items.slice(0, 3)
@@ -87,18 +92,25 @@ const BenefitsPageTemplate = ({ data }) => {
           <div className={styles.description}>
             {benefitsData.banner.description}
           </div>
-          {benefitsData.banner.actions.links.map(({ url, text, link }) => (
+          <>
             <Button
-              variant={link ? 'text' : 'contained'}
-              href={link ? url : `#${url}`}
-              key={text}
-              className={classNames.use(styles.button, {
-                [styles.buttonLink]: link,
-              })}
+              variant="contained"
+              onClick={toggleModal}
+              href={`#${benefitsData.banner.actions.links.form.url}`}
+              key={benefitsData.banner.actions.links.form.text}
+              className={styles.button}
             >
-              {text}
+              {benefitsData.banner.actions.links.form.text}
             </Button>
-          ))}
+            <Button
+              variant="text"
+              href={benefitsData.banner.actions.links.Link.url}
+              key={benefitsData.banner.actions.links.Link.text}
+              className={styles.buttonLink}
+            >
+              {benefitsData.banner.actions.links.Link.text}
+            </Button>
+          </>
         </div>
         <div className={styles.sectionService}>
           <div className={styles.sectionItem}>

diff --git a/design-v2/components/list-box/index.jsx b/design-v2/components/list-box/index.jsx
@@ -7,7 +7,12 @@ const ListBox = ({ list, className }) => (
   <ul className={classNames.use(styles.list).join(className)}>
     {list.map((item) => (
       <li className={styles.item} key={item.name}>
-        <a href={item.action} className={styles.link}>
+        <a
+          target="_blank"
+          href={item.action}
+          className={styles.link}
+          rel="noreferrer"
+        >
           {item.name}
         </a>
       </li>