From 4569b5f4caea3b308056d5a2afe4dce6603a3e6c Mon Sep 17 00:00:00 2001
From: ekachxaidze98 <ekachxaidze2@gmail.com>
Date: Wed, 25 Dec 2024 13:11:10 +0400
Subject: [PATCH] CORE-4993: add sdg request view

---
 components/upload/assets/sdgLoad.svg |  25 +++
 components/video/video.jsx           |  16 ++
 csp.config.js                        |   2 +
 templates/sdg/index.jsx              | 239 +++++++++++++++------------
 templates/sdg/styles.module.css      |  35 ++++
 texts/sdg/sdg.yml                    |   7 +
 6 files changed, 222 insertions(+), 102 deletions(-)
 create mode 100644 components/upload/assets/sdgLoad.svg
 create mode 100644 components/video/video.jsx

diff --git a/components/upload/assets/sdgLoad.svg b/components/upload/assets/sdgLoad.svg
new file mode 100644
index 00000000..f1064b28
--- /dev/null
+++ b/components/upload/assets/sdgLoad.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="177" height="121" viewBox="0 0 177 121" fill="none">
+  <g clip-path="url(#clip0_892_19026)">
+    <path d="M81.6133 91.9555V72.2169H86.7962V91.9555H81.6133Z" fill="#B75400" stroke="#212121" stroke-width="1.00743"/>
+    <path d="M29.8934 91.955V69.2195H35.0762V91.955H29.8934Z" fill="#B75400" stroke="#212121" stroke-width="1.00743"/>
+    <path d="M42.8178 91.9553V64.2676H48.0007V91.9553H42.8178Z" fill="#B75400" stroke="#212121" stroke-width="1.00743"/>
+    <path d="M55.7532 91.9547V65.8406H60.936V91.9547H55.7532Z" fill="#B75400" stroke="#212121" stroke-width="1.00743"/>
+    <path d="M68.678 91.9551V56.6656H73.8609V91.9551H68.678Z" fill="#B75400" stroke="#212121" stroke-width="1.00743"/>
+    <path d="M94.5378 91.9554V56.8394H99.7206V91.9554H94.5378Z" fill="#B75400" stroke="#212121" stroke-width="1.00743"/>
+    <path d="M107.474 91.9551V68.699H112.657V91.9551H107.474Z" fill="#B75400" stroke="#212121" stroke-width="1.00743"/>
+    <path d="M120.398 91.9554V58.4361H125.581V91.9554H120.398Z" fill="#B75400" stroke="#212121" stroke-width="1.00743"/>
+    <path d="M133.334 91.9548V50.6485H138.517V91.9548H133.334Z" fill="#B75400" stroke="#212121" stroke-width="1.00743"/>
+    <path d="M146.259 91.9554V58.251H151.442V91.9554H146.259Z" fill="#B75400" stroke="#212121" stroke-width="1.00743"/>
+    <path d="M12.5782 117.677H164.892C168.087 117.671 171.149 116.402 173.412 114.146C175.673 111.89 176.951 108.832 176.966 105.638C176.966 105.637 176.966 105.636 176.966 105.636M12.5782 117.677L177.47 105.638L176.966 105.636M12.5782 117.677C9.38339 117.671 6.32064 116.402 4.05846 114.146C1.79655 111.89 0.51868 108.831 0.503717 105.637V14.5777C0.509708 11.3773 1.78371 8.30977 4.04673 6.04675C6.30976 3.78373 9.37736 2.50971 12.5777 2.50372H164.892C168.093 2.50971 171.16 3.78373 173.423 6.04675C175.686 8.30988 176.96 11.3776 176.966 14.5782M12.5782 117.677L176.966 14.5782M176.966 105.636L176.966 14.5782M176.966 105.636L176.966 14.5782M12.5774 2.71122L12.5767 2.71122C9.44 2.71442 6.43263 3.96188 4.21461 6.1799C1.99659 8.39792 0.74911 11.4053 0.745911 14.542V14.5425L0.745911 105.638L0.745911 105.638C0.749103 108.776 1.99615 111.785 4.21372 114.005C6.4313 116.224 9.43852 117.474 12.5762 117.481H12.5773H164.893H164.894C168.031 117.471 171.036 116.22 173.253 114.001C175.47 111.782 176.718 108.776 176.724 105.639V105.638V14.5772V14.5762C176.718 11.4385 175.468 8.4313 173.248 6.21372C171.028 3.99615 168.019 2.74912 164.882 2.74593L164.881 2.74593L12.5774 2.71122Z" fill="#E0E0E0" stroke="#212121" stroke-width="1.00743"/>
+    <mask id="path-12-inside-1_892_19026" fill="white">
+      <path d="M99.2872 32.2451C99.2872 32.4187 81.6652 32.5691 59.9471 32.5691C38.2291 32.5691 20.6071 32.4187 20.6071 32.2451C20.6071 32.0716 38.2291 31.9211 59.9471 31.9211C81.6652 31.9211 99.2872 32.06 99.2872 32.2451Z"/>
+    </mask>
+    <path d="M99.2872 32.2451C99.2872 32.4187 81.6652 32.5691 59.9471 32.5691C38.2291 32.5691 20.6071 32.4187 20.6071 32.2451C20.6071 32.0716 38.2291 31.9211 59.9471 31.9211C81.6652 31.9211 99.2872 32.06 99.2872 32.2451Z" fill="#E0E0E0"/>
+    <path d="M98.2798 32.2451C98.2798 31.685 98.7035 31.4243 98.7465 31.3971C98.8529 31.33 98.9459 31.3005 98.9711 31.2925C99.009 31.2806 99.0381 31.2741 99.0507 31.2715C99.0653 31.2684 99.0753 31.2668 99.0787 31.2662C99.0847 31.2653 99.0656 31.2682 99.0045 31.2731C98.8907 31.2821 98.7069 31.292 98.4478 31.3022C97.934 31.3225 97.169 31.3425 96.1749 31.3617C94.1891 31.4001 91.312 31.4352 87.7531 31.4648C80.6363 31.5241 70.8042 31.5617 59.9471 31.5617V33.5765C70.8081 33.5765 80.646 33.5389 87.7698 33.4796C91.3312 33.4499 94.2169 33.4148 96.2139 33.3762C97.2113 33.3569 97.9927 33.3367 98.5274 33.3155C98.7926 33.305 99.0086 33.2939 99.1635 33.2817C99.2368 33.2759 99.3193 33.2681 99.3933 33.2564C99.4232 33.2517 99.4957 33.2398 99.5776 33.2139C99.6113 33.2033 99.7108 33.1711 99.8215 33.1012C99.8688 33.0714 100.295 32.808 100.295 32.2451H98.2798ZM59.9471 31.5617C49.0901 31.5617 39.258 31.5241 32.1412 31.4648C28.5823 31.4352 25.7052 31.4001 23.7193 31.3617C22.7253 31.3425 21.9603 31.3225 21.4465 31.3022C21.1874 31.292 21.0036 31.2821 20.8898 31.2731C20.8287 31.2682 20.8096 31.2653 20.8155 31.2662C20.8189 31.2668 20.8289 31.2684 20.8435 31.2715C20.8562 31.2741 20.8853 31.2806 20.9232 31.2925C20.9483 31.3005 21.0413 31.33 21.1478 31.3971C21.1908 31.4243 21.6145 31.685 21.6145 32.2451H19.5996C19.5996 32.808 20.0255 33.0714 20.0727 33.1012C20.1835 33.1711 20.2829 33.2033 20.3166 33.2139C20.3985 33.2398 20.4711 33.2517 20.501 33.2564C20.575 33.2681 20.6575 33.2759 20.7308 33.2817C20.8856 33.2939 21.1017 33.305 21.3669 33.3155C21.9016 33.3367 22.683 33.3569 23.6804 33.3762C25.6773 33.4148 28.5631 33.4499 32.1244 33.4796C39.2482 33.5389 49.0862 33.5765 59.9471 33.5765V31.5617ZM21.6145 32.2451C21.6145 32.8053 21.1908 33.066 21.1478 33.0931C21.0413 33.1603 20.9483 33.1898 20.9232 33.1977C20.8853 33.2097 20.8562 33.2161 20.8435 33.2188C20.8289 33.2218 20.8189 33.2235 20.8155 33.224C20.8096 33.2249 20.8287 33.222 20.8898 33.2172C21.0036 33.2082 21.1874 33.1983 21.4465 33.188C21.9603 33.1677 22.7253 33.1477 23.7193 33.1285C25.7052 33.0901 28.5823 33.0551 32.1412 33.0254C39.258 32.9662 49.0901 32.9286 59.9471 32.9286V30.9137C49.0862 30.9137 39.2482 30.9513 32.1244 31.0106C28.5631 31.0403 25.6773 31.0754 23.6804 31.114C22.683 31.1333 21.9016 31.1536 21.3669 31.1747C21.1017 31.1852 20.8856 31.1963 20.7308 31.2086C20.6575 31.2144 20.575 31.2221 20.501 31.2338C20.4711 31.2386 20.3985 31.2504 20.3166 31.2763C20.2829 31.2869 20.1835 31.3191 20.0727 31.389C20.0255 31.4188 19.5996 31.6823 19.5996 32.2451H21.6145ZM59.9471 32.9286C70.8044 32.9286 80.6366 32.9633 87.7533 33.0211C91.3122 33.05 94.1891 33.0847 96.1747 33.1236C97.1686 33.1431 97.9331 33.1636 98.4463 33.1846C98.7052 33.1953 98.8879 33.2056 99.0004 33.2149C99.0611 33.22 99.0782 33.2229 99.0697 33.2215C99.0656 33.2208 99.0545 33.2189 99.0387 33.2154C99.0249 33.2123 98.9939 33.205 98.9539 33.1916C98.9265 33.1824 98.8306 33.1498 98.7222 33.0771C98.6612 33.0361 98.2798 32.7747 98.2798 32.2451H100.295C100.295 31.7127 99.911 31.4484 99.8457 31.4045C99.7331 31.3289 99.6308 31.2934 99.5948 31.2814C99.5091 31.2526 99.4332 31.2395 99.4023 31.2343C99.3258 31.2215 99.2413 31.2131 99.1676 31.207C99.0114 31.194 98.7943 31.1823 98.5289 31.1715C97.9935 31.1495 97.2116 31.1287 96.2142 31.1092C94.2169 31.07 91.3309 31.0352 87.7696 31.0063C80.6458 30.9484 70.8079 30.9137 59.9471 30.9137V32.9286Z" fill="#212121" mask="url(#path-12-inside-1_892_19026)"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_892_19026">
+      <rect width="177" height="120" fill="white" transform="translate(0 0.171875)"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/components/video/video.jsx b/components/video/video.jsx
new file mode 100644
index 00000000..c5394e68
--- /dev/null
+++ b/components/video/video.jsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+const Video = ({ src, title, className = '', tag: Tag = 'div' }) => (
+  <Tag className={`embed-responsive embed-responsive-16by9 ${className}`}>
+    <iframe
+      className="embed-responsive-object"
+      src={src}
+      title={title}
+      referrerPolicy="origin"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
+      allowFullScreen
+    />
+  </Tag>
+)
+
+export default Video
diff --git a/csp.config.js b/csp.config.js
index 458dab69..a915ee65 100644
--- a/csp.config.js
+++ b/csp.config.js
@@ -33,6 +33,8 @@ const config = {
     'raw.githubusercontent.com:*',
     '*.googletagmanager.com',
   ],
+  // Add frame-src to allow YouTube
+  'frame-src': [SELF, 'https://www.youtube.com', 'https://*.youtube.com'],
 }
 
 if (process.env.NODE_ENV !== 'production') {
diff --git a/templates/sdg/index.jsx b/templates/sdg/index.jsx
index 6d45a20d..5956a51b 100644
--- a/templates/sdg/index.jsx
+++ b/templates/sdg/index.jsx
@@ -2,6 +2,7 @@ import React, { useContext, useEffect, useState } from 'react'
 import { observer } from 'mobx-react-lite'
 import { classNames } from '@oacore/design/lib/utils'
 import { Popover } from '@oacore/design'
+import { Button } from '@oacore/design/lib/elements'
 
 import DashboardHeader from '../../components/dashboard-header'
 import texts from '../../texts/sdg/sdg.yml'
@@ -40,12 +41,15 @@ import underWaterH from '../../components/upload/assets/belowWaterH.svg'
 import landH from '../../components/upload/assets/landH.svg'
 import peaceH from '../../components/upload/assets/peaceH.svg'
 import goalH from '../../components/upload/assets/goalH.svg'
+import sdgLoad from '../../components/upload/assets/sdgLoad.svg'
 import styles from './styles.module.css'
 import SdgTable from './table/sdgTable'
 import { GlobalContext } from '../../store'
 import ChartToggler from './charts/chartToggler'
 import { formatNumber } from '../../utils/helpers'
 import DateRangePicker from '../../components/datePicker/datePicker'
+import Markdown from '../../components/markdown'
+import Video from '../../components/video/video'
 
 const sdgTypes = [
   {
@@ -285,116 +289,147 @@ const SdgPageTemplate = observer(
         className={classNames.use(styles.container).join(className)}
         {...restProps}
       >
-        <DashboardHeader title={texts.title} description={texts.description} />
-        <div className={styles.pickerWrapper}>
-          <span className={styles.dateTitle}>Include records from</span>
-          <DateRangePicker onDateChange={handleDateChange} />
-        </div>
-        <ChartToggler
-          handleToggle={handleToggle}
-          toggle={toggle}
-          sdgTypes={sdgTypes}
-          updatedSdgTypes={updatedSdgTypes}
-          data={data}
-          sdgYearDataLoading={sdgYearDataLoading}
-          visibleColumns={visibleColumns}
-          activeTab={activeTab}
-          setActiveTab={setActiveTab}
-          checkBillingType={checkBillingType}
-        />
-        {activeTab === 'yearly' && (
-          <div className={styles.sdgIcons}>
-            {updatedSdgTypes.map((sdg, index) => (
-              <div key={sdg.id} className={styles.sdgIcon}>
-                {/* eslint-disable-next-line react/button-has-type */}
-                <button
-                  onClick={() => toggleColumn(sdg.id, index)}
-                  disabled={checkBillingType && index > 2}
-                >
-                  <img
-                    className={classNames.use(styles.sdgImg, {
-                      [styles.sdgImgMain]: sdg.id === 'all',
-                    })}
-                    src={sdg.icon}
-                    alt={sdg.id}
-                  />
-                  {checkBillingType && index > 2 ? (
-                    <Popover
-                      className={styles.popover}
-                      placement="top"
-                      content="Become Supporting or Sustaining member to see all information."
+        {sdgYearData.data ? (
+          <>
+            <DashboardHeader
+              title={texts.title}
+              description={texts.description}
+            />
+            <div className={styles.pickerWrapper}>
+              <span className={styles.dateTitle}>Include records from</span>
+              <DateRangePicker onDateChange={handleDateChange} />
+            </div>
+            <ChartToggler
+              handleToggle={handleToggle}
+              toggle={toggle}
+              sdgTypes={sdgTypes}
+              updatedSdgTypes={updatedSdgTypes}
+              data={data}
+              sdgYearDataLoading={sdgYearDataLoading}
+              visibleColumns={visibleColumns}
+              activeTab={activeTab}
+              setActiveTab={setActiveTab}
+              checkBillingType={checkBillingType}
+            />
+            {activeTab === 'yearly' && (
+              <div className={styles.sdgIcons}>
+                {updatedSdgTypes.map((sdg, index) => (
+                  <div key={sdg.id} className={styles.sdgIcon}>
+                    {/* eslint-disable-next-line react/button-has-type */}
+                    <button
+                      onClick={() => toggleColumn(sdg.id, index)}
+                      disabled={checkBillingType && index > 2}
                     >
-                      <div
-                        className={classNames.use(styles.sdgBody, {
-                          [styles.activeSdgBody]: visibleColumns.includes(
-                            sdg.id
-                          ),
-                          [styles.blurEffect]: checkBillingType && index > 2,
+                      <img
+                        className={classNames.use(styles.sdgImg, {
+                          [styles.sdgImgMain]: sdg.id === 'all',
                         })}
-                      >
-                        <span
-                          className={classNames.use(styles.sdgCount, {
-                            [styles.activeSdgCount]: visibleColumns.includes(
+                        src={sdg.icon}
+                        alt={sdg.id}
+                      />
+                      {checkBillingType && index > 2 ? (
+                        <Popover
+                          className={styles.popover}
+                          placement="top"
+                          content="Become Supporting or Sustaining member to see all information."
+                        >
+                          <div
+                            className={classNames.use(styles.sdgBody, {
+                              [styles.activeSdgBody]: visibleColumns.includes(
+                                sdg.id
+                              ),
+                              [styles.blurEffect]:
+                                checkBillingType && index > 2,
+                            })}
+                          >
+                            <span
+                              className={classNames.use(styles.sdgCount, {
+                                [styles.activeSdgCount]:
+                                  visibleColumns.includes(sdg.id),
+                              })}
+                            >
+                              {formatNumber(sdg.outputCount)}
+                            </span>
+                            <p
+                              className={classNames.use(styles.sdgDescription, {
+                                [styles.activeSdgDescription]:
+                                  visibleColumns.includes(sdg.id),
+                              })}
+                            >
+                              outputs
+                            </p>
+                          </div>
+                        </Popover>
+                      ) : (
+                        <div
+                          className={classNames.use(styles.sdgBody, {
+                            [styles.activeSdgBody]: visibleColumns.includes(
                               sdg.id
                             ),
                           })}
                         >
-                          {formatNumber(sdg.outputCount)}
-                        </span>
-                        <p
-                          className={classNames.use(styles.sdgDescription, {
-                            [styles.activeSdgDescription]:
-                              visibleColumns.includes(sdg.id),
-                          })}
-                        >
-                          outputs
-                        </p>
-                      </div>
-                    </Popover>
-                  ) : (
-                    <div
-                      className={classNames.use(styles.sdgBody, {
-                        [styles.activeSdgBody]: visibleColumns.includes(sdg.id),
-                      })}
-                    >
-                      <span
-                        className={classNames.use(styles.sdgCount, {
-                          [styles.activeSdgCount]: visibleColumns.includes(
-                            sdg.id
-                          ),
-                        })}
-                      >
-                        {formatNumber(sdg.outputCount)}
-                      </span>
-                      <p
-                        className={classNames.use(styles.sdgDescription, {
-                          [styles.activeSdgDescription]:
-                            visibleColumns.includes(sdg.id),
-                        })}
-                      >
-                        outputs
-                      </p>
-                    </div>
-                  )}
-                </button>
+                          <span
+                            className={classNames.use(styles.sdgCount, {
+                              [styles.activeSdgCount]: visibleColumns.includes(
+                                sdg.id
+                              ),
+                            })}
+                          >
+                            {formatNumber(sdg.outputCount)}
+                          </span>
+                          <p
+                            className={classNames.use(styles.sdgDescription, {
+                              [styles.activeSdgDescription]:
+                                visibleColumns.includes(sdg.id),
+                            })}
+                          >
+                            outputs
+                          </p>
+                        </div>
+                      )}
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+            <SdgTable
+              visibleColumns={visibleColumns}
+              sdgUrl={sdgUrl}
+              getSdgTableData={getSdgTableData}
+              sdgTableList={sdgTableList}
+              sdgTableDataLoading={sdgTableDataLoading}
+              sdgTypes={sdgTypes}
+              articleAdditionalData={articleAdditionalData}
+              articleAdditionalDataLoading={articleAdditionalDataLoading}
+              outputCount={outputCount}
+              startDate={dateRange.startDate}
+              endDate={dateRange.endDate}
+              checkBillingType={checkBillingType}
+            />
+          </>
+        ) : (
+          <>
+            <DashboardHeader
+              title={texts.noSdg.title}
+              description={texts.noSdg.description}
+            />
+            <div className={styles.sdgSuggestionWrapper}>
+              <div className={styles.sdgInnerSuggestionWrapper}>
+                <img src={sdgLoad} alt="sdgLoad" />
+                <Markdown className={styles.sdgSuggestionDescription}>
+                  {texts.sdgSuggestion.description}
+                </Markdown>
+                <Button variant="contained">Generate SDG report</Button>
               </div>
-            ))}
-          </div>
+              <Video
+                src="https://www.youtube.com/embed/_r16dXOGdWA"
+                title="sdg labels"
+                tag="p"
+                className={styles.videoWrapper}
+              />
+            </div>
+          </>
         )}
-        <SdgTable
-          visibleColumns={visibleColumns}
-          sdgUrl={sdgUrl}
-          getSdgTableData={getSdgTableData}
-          sdgTableList={sdgTableList}
-          sdgTableDataLoading={sdgTableDataLoading}
-          sdgTypes={sdgTypes}
-          articleAdditionalData={articleAdditionalData}
-          articleAdditionalDataLoading={articleAdditionalDataLoading}
-          outputCount={outputCount}
-          startDate={dateRange.startDate}
-          endDate={dateRange.endDate}
-          checkBillingType={checkBillingType}
-        />
       </Tag>
     )
   }
diff --git a/templates/sdg/styles.module.css b/templates/sdg/styles.module.css
index 8fc94956..a962eaae 100644
--- a/templates/sdg/styles.module.css
+++ b/templates/sdg/styles.module.css
@@ -411,3 +411,38 @@
   font-size: 14px;
   color: #424242;
 }
+
+.sdg-suggestion-wrapper {
+  background: #fff;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 20px 0;
+}
+
+.sdg-inner-suggestion-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 44px 0;
+}
+
+.sdg-suggestion-description {
+  max-width: 493px;
+  text-align: center;
+  margin: 30px 0 24px;
+}
+
+.video-wrapper {
+  width: 968px;
+  height: 541px;
+}
+
+.video-wrapper iframe {
+  width: 100%;
+  height: 100%;
+}
diff --git a/texts/sdg/sdg.yml b/texts/sdg/sdg.yml
index eac791cf..5f4fe69d 100644
--- a/texts/sdg/sdg.yml
+++ b/texts/sdg/sdg.yml
@@ -14,3 +14,10 @@ table:
 tab:
   yearly: SDG yearly trends
   overall: SDG overall distribution
+
+noSdg:
+  title: Classification of Research Papers in your Repository According to United Nations Sustainable Development Goals
+  description: The Sustainable Development Goals or Global Goals are a [collection](https://sdgs.un.org/goals) of 17 interlinked global goals designed to be a "blueprint to achieve a better and more sustainable future for all". The SDGs were set up in 2015 by the United Nations General Assembly and are intended to be achieved by 2030.
+
+sdgSuggestion:
+  description: Please note that SDG Insights module is currently in beta stage. To get a detailed report on your repository, click the "Generate SDG Report" button below. The report generation process may take several days. Read more on the [SDG Insights documentation](https://core.ac.uk/documentation/membership-documentation#sdg-insights) or visit our [SDG demo webpage](https://core.ac.uk/labs/sdg).