Skip to content
This repository has been archived by the owner on Sep 26, 2024. It is now read-only.

Commit

Permalink
feat: regulatory page revamp
Browse files Browse the repository at this point in the history
  • Loading branch information
@konstantinosG-deriv
konstantinosG-deriv committed Feb 5, 2024
1 parent aeb1ee2 commit d96ef5e
Show file tree
Hide file tree
Showing 4 changed files with 599 additions and 758 deletions.
15 changes: 9 additions & 6 deletions src/images/svg/regulatory/pdf-icon-black.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
249 changes: 56 additions & 193 deletions src/pages/regulatory/_document_accordion.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,207 +1,70 @@
import React from 'react'
import styled from 'styled-components'
import { Text } from '@deriv/quill-design'
import { CustomLink } from '@deriv-com/components'
import { kid_data, kid_data_multiplier } from './data/_kid_data'
import { Text, Accordion, AccordionItem, LinkText, Divider } from 'components/elements'
import { Flex } from 'components/containers'
import { Localize, localize } from 'components/localization'
import device from 'themes/device'
import { getLanguage } from 'common/utility'
import { Divider } from 'components/elements'
import { Localize } from 'components/localization'
import PDFIcon from 'images/svg/regulatory/pdf-icon-black.svg'

type DocumentAccordionProps = { locale: { language: string } }

const FlexText = styled(LinkText)`
width: 26%;
display: flex;
align-items: center;
justify-content: flex-start;
& > img {
margin-right: 0.8rem;
}
@media ${device.laptopM} {
width: 40%;
}
@media (max-width: 685px) {
width: 80%;
justify-content: flex-start;
padding-left: 0;
margin-inline: 0;
}
`

const FlexText_Pillar = styled(LinkText)`
display: flex;
align-items: center;
justify-content: center;
& > img {
margin-right: 0.8rem;
}
`
const EdgeFlex = styled(Flex)`
flex-wrap: wrap;
justify-content: flex-start;
/* Edge does not support space-evenly */
@supports (-ms-ime-align: auto) {
justify-content: space-around;
}
@media ${device.tabletS} {
flex-direction: column;
}
`

const RTS27_28 = () => (
<EdgeFlex>
<FlexText
color="red"
target="_blank"
rel="noopener noreferrer"
href="/regulatory/RTS28-2022.pdf"
m="1.6rem 2.4rem"
>
<img src={PDFIcon} alt={localize('_t_pdf icon black_t_')} />
<span>
<Localize translate_text="_t_RTS28 2022_t_" />
</span>
</FlexText>
<FlexText
color="red"
target="_blank"
rel="noopener noreferrer"
href="/regulatory/RTS28-2021.pdf"
m="1.6rem 2.4rem"
>
<img src={PDFIcon} alt={localize('_t_pdf icon black_t_')} />
<span>
<Localize translate_text="_t_RTS28 2021_t_" />
</span>
</FlexText>
</EdgeFlex>
)

const DocumentAccordion = (locale: DocumentAccordionProps) => {
const content_style = {
background: 'var(--color-white)',
boxShadow: '-2px 6px 15px 0 rgba(195, 195, 195, 0.31)',
}
const header_style = {
borderRadius: '6px',
}
const item_style = {
padding: '1.6rem',
position: 'relative',
background: 'var(--color-white)',
}
const parent_style = {
marginBottom: '2.4rem',
width: '100%',
}

const selected_language = locale.locale.language || 'en'
const DocumentAccordion = () => {
const selected_language = getLanguage() || 'en'
const supported_languages = ['es', 'it', 'pl', 'pt']

const is_supported_language = (language: string) => supported_languages.includes(language)

return (
<Accordion has_single_state id="kid">
<AccordionItem
header="_t_Financial disclosure report_t_"
content_style={content_style}
header_style={header_style}
style={item_style}
parent_style={parent_style}
class_name="disclosure-report"
>
<Text>
<Localize translate_text="_t_Deriv Investments (Europe) Limited has prepared the Financial disclosure report in accordance with the Investment Firms Regulation and Directive. Read our report to understand how we comply with market discipline as a market participant._t_" />
</Text>
<Flex mt="1.8rem">
<FlexText_Pillar
target="_blank"
rel="noopener noreferrer"
href="/regulatory/Financial_Disclosures_Annual_Report_2022.pdf"
color="red"
>
<img src={PDFIcon} alt="pdf icon black" />
<span>
<Localize translate_text="_t_Financial Disclosures Annual Report 2022_t_" />
</span>
</FlexText_Pillar>
</Flex>
</AccordionItem>
<AccordionItem
header="_t_Key information documents_t_"
content_style={content_style}
header_style={header_style}
style={item_style}
parent_style={parent_style}
class_name="key-information"
>
<Text>
<Localize translate_text="_t_These documents provide you with key information about our investment products. This information is required by law to help you understand the nature, risks, costs, potential gains, and losses of these products and to help you compare them with other products._t_" />
</Text>
<Flex>
<EdgeFlex mt="1.8rem">
{kid_data.map((data, idx) => (
<FlexText
key={idx}
color="red"
target="_blank"
rel="noopener noreferrer"
href={`/regulatory/kid/${
is_supported_language(selected_language) && !data.is_only_en
? selected_language + '/'
: ''
}${data.ref}`}
m="1.6rem 1.4rem"
>
<img src={PDFIcon} alt="pdf icon black" />
<span>
<>
<div className="grid grid-cols-1 md:grid-cols-4">
{kid_data.map((data, idx) => (
<div key={idx} className="flex flex-row mb-800 mr-800">
<CustomLink
target="_blank"
className="underline inline text-base"
rel="noopener noreferrer"
href={`/regulatory/kid/${
is_supported_language(selected_language) && !data.is_only_en
? selected_language + '/'
: ''
}${data.ref}`}
>
<div className="flex items-center">
<img src={PDFIcon} alt="pdf icon black" className="pr-400" />
<Text>
<Localize translate_text={data.title} />
</span>
</FlexText>
))}
</EdgeFlex>
</Flex>
<Divider />
<Flex>
<EdgeFlex>
{kid_data_multiplier.map((data, idx) => (
<FlexText
key={idx}
color="red"
target="_blank"
rel="noopener noreferrer"
href={`/regulatory/kid/${
is_supported_language(selected_language) && !data.is_only_en
? selected_language + '/'
: ''
}${data.ref}`}
m="1.6rem 2.4rem"
>
<img src={PDFIcon} alt="pdf icon black" />
<span>
</Text>
</div>
</CustomLink>
</div>
))}
</div>
<Divider />
<div className="grid grid-cols-1 md:grid-cols-4 mt-800">
{kid_data_multiplier.map((data, idx) => (
<div key={idx} className="flex flex-row mb-800 mr-800">
<CustomLink
key={idx}
target="_blank"
className="underline inline text-base"
rel="noopener noreferrer"
href={`/regulatory/kid/${
is_supported_language(selected_language) && !data.is_only_en
? selected_language + '/'
: ''
}${data.ref}`}
m="1.6rem 2.4rem"
>
<div className="flex items-center">
<img src={PDFIcon} alt="pdf icon black" className="pr-400" />
<Text>
<Localize translate_text={data.title} />
</span>
</FlexText>
))}
</EdgeFlex>
</Flex>
</AccordionItem>
<AccordionItem
header="_t_RTS_t_"
content_style={content_style}
header_style={header_style}
style={item_style}
parent_style={parent_style}
class_name="rts"
>
<Flex>
<RTS27_28 />
</Flex>
</AccordionItem>
</Accordion>
</Text>
</div>
</CustomLink>
</div>
))}
</div>
</>
)
}

Expand Down
Loading

0 comments on commit d96ef5e

Please sign in to comment.