From 8232af7b1828d9d801716501b6a36f42a4023889 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CkonstantinosG-deriv=E2=80=9D?=
 <konstantinos.gkagiannis@regentmarkets.com>
Date: Tue, 6 Feb 2024 09:36:50 +0100
Subject: [PATCH] fix: use array map for items

---
 src/pages/regulatory/_eu-grid.tsx        | 270 ++++++-----------------
 src/pages/regulatory/eu_grid.module.scss |   2 +-
 src/pages/regulatory/index.tsx           |  66 +++---
 3 files changed, 106 insertions(+), 232 deletions(-)

diff --git a/src/pages/regulatory/_eu-grid.tsx b/src/pages/regulatory/_eu-grid.tsx
index b0f130f0edc..5a446ab3ea0 100644
--- a/src/pages/regulatory/_eu-grid.tsx
+++ b/src/pages/regulatory/_eu-grid.tsx
@@ -31,209 +31,79 @@ import { CustomLink } from '@deriv-com/components'
 import * as styles from './eu_grid.module.scss'
 import { WithIntl, Localize } from 'components/localization'
 
+const countries = [
+    { href: '/regulatory/countries/Austria.pdf', icon: <FlagAustriaIcon />, text: '_t_Austria_t_' },
+    {
+        href: '/regulatory/countries/Bulgaria.pdf',
+        icon: <FlagBulgariaIcon />,
+        text: '_t_Bulgaria_t_',
+    },
+    { href: '/regulatory/countries/Croatia.pdf', icon: <FlagCroatiaIcon />, text: '_t_Croatia_t_' },
+    { href: '/regulatory/countries/Cyprus.pdf', icon: <FlagCyprusIcon />, text: '_t_Cyprus_t_' },
+    {
+        href: '/regulatory/countries/CzechRepublic.pdf',
+        icon: <FlagCzechRepublicIcon />,
+        text: '_t_Czech Republic_t_',
+    },
+    { href: '/regulatory/countries/Denmark.pdf', icon: <FlagDenmarkIcon />, text: '_t_Denmark_t_' },
+    { href: '/regulatory/countries/Estonia.pdf', icon: <FlagEstoniaIcon />, text: '_t_Estonia_t_' },
+    { href: '/regulatory/countries/Finland.pdf', icon: <FlagFinlandIcon />, text: '_t_Finland_t_' },
+    { href: '/regulatory/countries/France.pdf', icon: <FlagFranceIcon />, text: '_t_France_t_' },
+    { href: '/regulatory/countries/Germany.pdf', icon: <FlagGermanyIcon />, text: '_t_Germany_t_' },
+    { href: '/regulatory/countries/Greece.pdf', icon: <FlagGreeceIcon />, text: '_t_Greece_t_' },
+    { href: '/regulatory/countries/Hungary.pdf', icon: <FlagHungaryIcon />, text: '_t_Hungary_t_' },
+    { href: '/regulatory/countries/Italy.pdf', icon: <FlagItalyIcon />, text: '_t_Italy_t_' },
+    { href: '/regulatory/countries/Ireland.pdf', icon: <FlagIrelandIcon />, text: '_t_Ireland_t_' },
+    { href: '/regulatory/countries/Latvia.pdf', icon: <FlagLatviaIcon />, text: '_t_Latvia_t_' },
+    {
+        href: '/regulatory/countries/Lithuania.pdf',
+        icon: <FlagLithuaniaIcon />,
+        text: '_t_Lithuania_t_',
+    },
+    {
+        href: '/regulatory/countries/Luxembourg.pdf',
+        icon: <FlagLuxembourgIcon />,
+        text: '_t_Luxembourg_t_',
+    },
+    {
+        href: '/regulatory/countries/Netherlands.pdf',
+        icon: <FlagNetherlandIcon />,
+        text: '_t_Netherlands_t_',
+    },
+    { href: '/regulatory/countries/Poland.pdf', icon: <FlagPolandIcon />, text: '_t_Poland_t_' },
+    {
+        href: '/regulatory/countries/Portugal.pdf',
+        icon: <FlagPortugalIcon />,
+        text: '_t_Portugal_t_',
+    },
+    { href: '/regulatory/countries/Romania.pdf', icon: <FlagRomaniaIcon />, text: '_t_Romania_t_' },
+    {
+        href: '/regulatory/countries/Slovakia.pdf',
+        icon: <FlagSlovakiaIcon />,
+        text: '_t_Slovakia_t_',
+    },
+    {
+        href: '/regulatory/countries/Slovenia.pdf',
+        icon: <FlagSloveniaIcon />,
+        text: '_t_Slovenia_t_',
+    },
+    { href: '/regulatory/countries/Spain.pdf', icon: <FlagSpainIcon />, text: '_t_Spain_t_' },
+    { href: '/regulatory/countries/Sweden.pdf', icon: <FlagSwedenIcon />, text: '_t_Sweden_t_' },
+]
+
 const EUgrid = () => {
     return (
         <div className={styles.eu_grid}>
-            <CustomLink href="/regulatory/countries/Austria.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagAustriaIcon className={styles.icon} fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Austria_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/Bulgaria.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagBulgariaIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Bulgaria_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/Croatia.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagCroatiaIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Croatia_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/Cyprus.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagCyprusIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Cyprus_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/CzechRepublic.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagCzechRepublicIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Czech Republic_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/Denmark.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagDenmarkIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Denmark_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/Estonia.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagEstoniaIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Estonia_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/Finland.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagFinlandIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Finland_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/France.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagFranceIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_France_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/Germany.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagGermanyIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Germany_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/Greece.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagGreeceIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Greece_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/Hungary.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagHungaryIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Hungary_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/Italy.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagItalyIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Italy_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/Ireland.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagIrelandIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Ireland_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/Latvia.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagLatviaIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Latvia_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/Lithuania.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagLithuaniaIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Lithuania_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/Luxembourg.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagLuxembourgIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Luxembourg_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/Netherlands.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagNetherlandIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Netherlands_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/Poland.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagPolandIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Poland_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/Portugal.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagPortugalIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Portugal_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/Romania.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagRomaniaIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Romania_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/Slovakia.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagSlovakiaIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Slovakia_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/Slovenia.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagSloveniaIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Slovenia_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/Spain.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagSpainIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Spain_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
-            <CustomLink href="/regulatory/countries/Sweden.pdf" className=" inline">
-                <div className={styles.country_container}>
-                    <FlagSwedenIcon className={styles.icon} iconSize="md" fill="#000000b8" />
-                    <Text className="text-base">
-                        <Localize translate_text="_t_Sweden_t_" />
-                    </Text>
-                </div>
-            </CustomLink>
+            {countries.map((country, index) => (
+                <CustomLink key={index} href={country.href} className="inline">
+                    <div className={styles.country_container}>
+                        {country.icon && <div className={styles.icon}>{country.icon}</div>}
+                        <Text className="text-base">
+                            <Localize translate_text={country.text} />
+                        </Text>
+                    </div>
+                </CustomLink>
+            ))}
         </div>
     )
 }
diff --git a/src/pages/regulatory/eu_grid.module.scss b/src/pages/regulatory/eu_grid.module.scss
index dd3c992cad2..8af98cb3cf8 100644
--- a/src/pages/regulatory/eu_grid.module.scss
+++ b/src/pages/regulatory/eu_grid.module.scss
@@ -14,7 +14,7 @@ display: grid;
 
 .icon {
     width: 36px;
-    height: 24px;
+    height: 31px;
     margin-right: 8px;
 }
 
diff --git a/src/pages/regulatory/index.tsx b/src/pages/regulatory/index.tsx
index 88a87642aa8..35ca69c2635 100644
--- a/src/pages/regulatory/index.tsx
+++ b/src/pages/regulatory/index.tsx
@@ -114,38 +114,42 @@ const Regulatory = () => {
                                                 {
                                                     className: `${styles.accordion_border}`,
                                                     content: function noRefCheck() {
+                                                        const regulatoryDocuments = [
+                                                            {
+                                                                href: '/regulatory/RTS28-2022.pdf',
+                                                                text: '_t_RTS28 2022_t_',
+                                                            },
+                                                            {
+                                                                href: '/regulatory/RTS28-2021.pdf',
+                                                                text: '_t_RTS28 2021_t_',
+                                                            },
+                                                        ]
                                                         return (
-                                                            <div className="flex lg:flex-row items-start justify-start flex-col ">
-                                                                <CustomLink
-                                                                    href="/regulatory/RTS28-2022.pdf"
-                                                                    className="underline inline text-base mb-800 mr-800"
-                                                                >
-                                                                    <div className="flex items-center">
-                                                                        <img
-                                                                            src={PDFIcon}
-                                                                            alt="pdf icon black"
-                                                                            className="pr-400"
-                                                                        />
-                                                                        <Text>
-                                                                            <Localize translate_text="_t_RTS28 2022_t_" />
-                                                                        </Text>
-                                                                    </div>
-                                                                </CustomLink>
-                                                                <CustomLink
-                                                                    href="/regulatory/RTS28-2021.pdf"
-                                                                    className="underline inline text-base mb-800 mr-800"
-                                                                >
-                                                                    <div className="flex items-center">
-                                                                        <img
-                                                                            src={PDFIcon}
-                                                                            alt="pdf icon black"
-                                                                            className="pr-400"
-                                                                        />
-                                                                        <Text>
-                                                                            <Localize translate_text="_t_RTS28 2021_t_" />
-                                                                        </Text>
-                                                                    </div>
-                                                                </CustomLink>
+                                                            <div className="flex lg:flex-row items-start justify-start flex-col">
+                                                                {regulatoryDocuments.map(
+                                                                    (document, index) => (
+                                                                        <CustomLink
+                                                                            key={index}
+                                                                            href={document.href}
+                                                                            className="underline inline text-base mb-800 mr-800"
+                                                                        >
+                                                                            <div className="flex items-center">
+                                                                                <img
+                                                                                    src={PDFIcon}
+                                                                                    alt="pdf icon black"
+                                                                                    className="pr-400"
+                                                                                />
+                                                                                <Text>
+                                                                                    <Localize
+                                                                                        translate_text={
+                                                                                            document.text
+                                                                                        }
+                                                                                    />
+                                                                                </Text>
+                                                                            </div>
+                                                                        </CustomLink>
+                                                                    ),
+                                                                )}
                                                             </div>
                                                         )
                                                     },