Implement Open Data page (#1608)

* Implement Open Data page

* Add styles

* Update text

* Add translations - initial changes

* Finalize translations

* Update tranlation

---------

Co-authored-by: ani-kalpachka <[email protected]>

public/locales/bg/open-data.json

@@ -0,0 +1,16 @@
+{
+  "swagger-text": "За да осигури пълна прозрачност на дейноста си, освен отворен код, Подкрепи.бг предоставя също и отворени данни. Целта е всеки при интерес да може да достъпи анонимизирани данни, показващи движенията на даренията и сумите по сметките, свързани с кампаниите. За да достъпите тези данни, можете да използвате UI като потребител или директно през публичните методи на API. Описанието на API поддържаме чрез Swagger на този адрес:",
+  "ethical-use": "За етичното използване на отворените данни сме избрали да използваме лиценз",
+  "rights": ", според който имате право да:",
+  "share": "Споделяте - да копирате и повторно да разпространявате материала на всякакъв носител или във всякакъв формат.",
+  "adapt": "Адаптирате - да преработвате, преобразувате и доразвивате материала.",
+  "note": "Забележка: Ако спазвате условията на лиценза, лицензодателят не може да отмени тези свободи.",
+  "terms": "При следните условия:",
+  "acknowledgment": "Признание - Вие сте длъжни да посочите като автор на данните Подкрепи.бг, да дадете електронна препратка към лиценза и да укажете дали сте внесли промени. Можете да направите това по всеки разумен начин, но не по начин, който предполага, че лицензодателят одобрява Вас или използването от Ваша страна на материала.",
+  "non-commercial-use": "Некомерсиално ползване - Вие нямате право да използвате данните за",
+  "commercial-purposes": "търговски цели",
+  "money-gathering": "в смисъла на събирането на пари за данните във вид на файл или за достъп до тях.",
+  "additional-restrictions": "Без допълнителни ограничения - Вие нямате право да прилагате правни условия или",
+  "technological-measures": "технологични мерки",
+  "legal-restrictions": ", които създават правни ограничения за други лица да извършват разрешеното от лиценза."
+}

public/locales/en/open-data.json

@@ -0,0 +1,16 @@
+{
+  "swagger-text": "To ensure full transparency of operations, in addition to the open source code, Podkrepi.bg provides also open data. The motivation is for everyone who is interested to be able to access anonymized data for the transactions of donations and amounts between the accounts related to the campaigns. To access the data you can use the UI as regular user or directly through the public methods of the API. The API description is supported using Swagger on the following url:",
+  "ethical-use": "For the ethical use of our open data we chose to use",
+  "rights": " according to which you are free to:",
+  "share": "Share - copy and redistribute the material in any medium or format.",
+  "adapt": "Adapt - rework, transform and further develop the material.",
+  "note": "Note: The licensor cannot revoke these freedoms as long as you follow the license terms.",
+  "terms": "Under the following conditions:",
+  "acknowledgment": "Acknowledgment - You must give appropriate credit and mention Podkrepi.bg as data owner, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.",
+  "non-commercial-use": "Non-commercial use - You have no right to use the data for",
+  "commercial-purposes": "commercial purposes",
+  "money-gathering": "in the sense of charging money for the data in file form or for access to it.",
+  "additional-restrictions": "No additional restrictions - You have no right to apply legal terms or",
+  "technological-measures": "technological measures",
+  "legal-restrictions": "which create legal restrictions on others doing what the license allows."
+}

src/common/routes.ts

@@ -15,6 +15,11 @@ export const staticUrls = {
   github:
     'https://github.com/podkrepi-bg/frontend#--%D0%B4%D0%B0%D1%80%D0%B8%D1%82%D0%B5%D0%BB%D1%81%D0%BA%D0%B0-%D0%BF%D0%BB%D0%B0%D1%82%D1%84%D0%BE%D1%80%D0%BC%D0%B0-%D0%BF%D0%BE%D0%B4%D0%BA%D1%80%D0%B5%D0%BF%D0%B8%D0%B1%D0%B3',
   figma: 'https://www.figma.com/file/MmvFKzUv6yE5U2wrOpWtwS/Podkrepi.bg?node-id=3904%3A13406',
+  swagger: 'https://podkrepi.bg/swagger',
+  licenses: 'https://creativecommons.org/licenses/by-nc/4.0/',
+  commercialPurposes: 'https://creativecommons.org/licenses/by-nc/4.0/#commercial_purposes',
+  technologicalMeasures:
+    'https://creativecommons.org/licenses/by-nc-sa/4.0/#technological_measures',
   projectDocs: 'https://docs.podkrepi.bg/',
   howToContribute:
     'https://docs.podkrepi.bg/general/communication/faq#kak-da-se-vkliucha-v-organizaciata',

src/components/client/layout/nav/DevelopmentMenu.tsx

@@ -55,11 +55,6 @@ const allNavItems: NavItem[] = [
     label: 'nav.dev.open-source',
     target: '_blank',
   },
-  // {
-  //   href: routes.dev.openData,
-  //   label: 'nav.dev.open-data',
-  //   target: '_blank',
-  // },
 ]
 
 export const navItems = allNavItems.filter((el) => typeof el.enabled === 'undefined' ?? el.enabled)

src/components/client/layout/nav/ProjectMenu.tsx

@@ -66,6 +66,10 @@ const allNavItems: NavItem[] = [
     href: routes.reports,
     label: 'nav.about.reports',
   },
+  {
+    href: routes.dev.openData,
+    label: 'nav.dev.open-data',
+  },
   {
     href: routes.contact,
     label: 'nav.about.contacts',

src/components/client/open-data/OpenDataPage.styled.tsx

@@ -0,0 +1,17 @@
+import { Typography } from '@mui/material'
+import { styled } from '@mui/material/styles'
+
+import theme from 'common/theme'
+
+export const Text = styled(Typography)(() => ({
+  margin: theme.spacing(3, 0),
+}))
+
+export const UnorderedList = styled('ul')(() => ({
+  listStyleType: 'disc',
+  margin: theme.spacing(0, 5),
+}))
+
+export const ListItem = styled('li')(() => ({
+  margin: theme.spacing(1, 0),
+}))

src/components/client/open-data/OpenDataPage.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+
+import { useTranslation } from 'next-i18next'
+
+import Layout from 'components/client/layout/Layout'
+import ExternalLink from 'components/common/ExternalLink'
+import { staticUrls } from 'common/routes'
+
+import { ListItem, Text, UnorderedList } from './OpenDataPage.styled'
+
+export default function OpenDataPage() {
+  const { t } = useTranslation()
+
+  return (
+    <Layout title={t('nav.dev.open-data')}>
+      <Text>
+        {t('open-data:swagger-text')}
+        <ExternalLink href={staticUrls.swagger}> https://podkrepi.bg/swagger</ExternalLink>
+      </Text>
+      <Text>
+        {t('open-data:ethical-use')}
+        <ExternalLink href={staticUrls.licenses}> Creative Commons CC BY-NC 4.0</ExternalLink>
+        {t('open-data:rights')}
+      </Text>
+      <UnorderedList>
+        <ListItem>{t('open-data:share')}</ListItem>
+        <ListItem>{t('open-data:adapt')}</ListItem>
+        <Text>{t('open-data:note')}</Text>
+        <Text>{t('open-data:terms')}</Text>
+        <ListItem>{t('open-data:acknowledgment')}</ListItem>
+        <ListItem>
+          {t('open-data:non-commercial-use')}
+          <ExternalLink href={staticUrls.commercialPurposes}>
+            {' '}
+            {t('open-data:commercial-purposes')}
+          </ExternalLink>{' '}
+          {t('open-data:money-gathering')}
+        </ListItem>
+        <ListItem>
+          {t('open-data:additional-restrictions')}{' '}
+          <ExternalLink href={staticUrls.technologicalMeasures}>
+            {t('open-data:technological-measures')}
+          </ExternalLink>{' '}
+          {t('open-data:legal-restrictions')}
+        </ListItem>
+      </UnorderedList>
+    </Layout>
+  )
+}

src/pages/open-data/index.tsx

@@ -0,0 +1,12 @@
+import { GetStaticProps } from 'next'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+
+import OpenDataPage from '../../components/client/open-data/OpenDataPage'
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale ?? 'bg', ['common', 'open-data'])),
+  },
+})
+
+export default OpenDataPage