Konstantinos/DERC-2343/Add Fraud Prevention section on Help Centre (ROW & EU)

src/features/components/templates/help-centre/data.ts

@@ -0,0 +1,288 @@
+import WhatsApp from 'images/svg/help/whatsapp-icon.svg'
+import Twitter from 'images/svg/help/twitter-icon.svg'
+import Youtube from 'images/svg/help/youtube-icon.svg'
+import Instagram from 'images/svg/help/instagram-icon.svg'
+import Facebook from 'images/svg/help/facebook-icon.svg'
+import Linkedin from 'images/svg/help/linkedin-icon.svg'
+import { TSmartContent, TString } from 'types/generics'
+import { LinkUrlType } from 'features/types'
+
+export type SocialMediaAccount = {
+    url: ((config: Config) => LinkUrlType) | LinkUrlType
+    icon: string
+    image_alt?: TString
+}
+
+export type Config = {
+    is_eu?: boolean
+    is_ar?: boolean
+    is_es?: boolean
+}
+
+export type SmartSocialAccount = TSmartContent<SocialMediaAccount, Config>
+
+export const SocialMediaAccounts: SmartSocialAccount[] = [
+    {
+        id: 0,
+        data: {
+            url: ({ is_ar, is_es }) => {
+                if (is_es) {
+                    return {
+                        type: 'non-company',
+                        target: '_blank',
+                        href: 'https://www.facebook.com/derivespanol',
+                    }
+                } else if (is_ar) {
+                    return {
+                        type: 'non-company',
+                        target: '_blank',
+                        href: 'https://www.facebook.com/derivarabic',
+                    }
+                }
+                return {
+                    type: 'non-company',
+                    target: '_blank',
+                    href: 'https://www.facebook.com/derivdotcom',
+                }
+            },
+            icon: Facebook,
+            image_alt: '_t_Facebook_t_',
+        },
+        visibility: {
+            is_eu: false,
+        },
+    },
+    {
+        id: 1,
+        data: {
+            url: ({ is_ar, is_es }) => {
+                if (is_es) {
+                    return {
+                        type: 'non-company',
+                        show_eu_modal: true,
+                        target: '_blank',
+                        href: 'https://www.facebook.com/derivespanol',
+                    }
+                } else if (is_ar) {
+                    return {
+                        type: 'non-company',
+                        show_eu_modal: true,
+                        target: '_blank',
+                        href: 'https://www.facebook.com/derivarabic',
+                    }
+                }
+                return {
+                    type: 'non-company',
+                    show_eu_modal: true,
+                    target: '_blank',
+                    href: 'https://www.facebook.com/derivEU/',
+                }
+            },
+            icon: Facebook,
+            image_alt: '_t_Facebook_t_',
+        },
+        visibility: {
+            is_eu: true,
+        },
+    },
+    {
+        id: 2,
+        data: {
+            url: ({ is_ar, is_es }) => {
+                if (is_es) {
+                    return {
+                        type: 'non-company',
+                        target: '_blank',
+                        href: 'https://www.instagram.com/deriv_espanol/',
+                    }
+                } else if (is_ar) {
+                    return {
+                        type: 'non-company',
+                        target: '_blank',
+                        href: 'https://www.instagram.com/deriv_ar/',
+                    }
+                }
+                return {
+                    type: 'non-company',
+                    target: '_blank',
+                    href: 'https://www.instagram.com/deriv_official/',
+                }
+            },
+            icon: Instagram,
+            image_alt: '_t_Instagram_t_',
+        },
+        visibility: {
+            is_eu: false,
+        },
+    },
+    {
+        id: 3,
+        data: {
+            url: ({ is_ar, is_es }) => {
+                if (is_es) {
+                    return {
+                        type: 'non-company',
+                        show_eu_modal: true,
+                        target: '_blank',
+                        href: 'https://www.instagram.com/deriv_espanol/',
+                    }
+                } else if (is_ar) {
+                    return {
+                        type: 'non-company',
+                        show_eu_modal: true,
+                        target: '_blank',
+                        href: 'https://www.instagram.com/deriv_ar/',
+                    }
+                }
+                return {
+                    type: 'non-company',
+                    show_eu_modal: true,
+                    target: '_blank',
+                    href: 'https://www.instagram.com/deriv_eu/',
+                }
+            },
+            icon: Instagram,
+            image_alt: '_t_Instagram_t_',
+        },
+        visibility: {
+            is_eu: true,
+        },
+    },
+    {
+        id: 4,
+        data: {
+            url: ({ is_ar, is_es }) => {
+                if (is_es) {
+                    return {
+                        type: 'non-company',
+                        target: '_blank',
+                        href: 'https://twitter.com/DerivEspanol',
+                    }
+                } else if (is_ar) {
+                    return {
+                        type: 'non-company',
+                        target: '_blank',
+                        href: 'https://twitter.com/DerivArabic',
+                    }
+                }
+                return {
+                    type: 'non-company',
+                    target: '_blank',
+                    href: 'https://twitter.com/derivdotcom/',
+                }
+            },
+            icon: Twitter,
+            image_alt: '_t_Twitter_t_',
+        },
+        visibility: {
+            is_eu: false,
+        },
+    },
+    {
+        id: 5,
+        data: {
+            url: ({ is_ar, is_es }) => {
+                if (is_es) {
+                    return {
+                        type: 'non-company',
+                        show_eu_modal: true,
+                        target: '_blank',
+                        href: 'https://twitter.com/DerivEspanol',
+                    }
+                } else if (is_ar) {
+                    return {
+                        type: 'non-company',
+                        show_eu_modal: true,
+                        target: '_blank',
+                        href: 'https://twitter.com/DerivArabic',
+                    }
+                }
+                return {
+                    type: 'non-company',
+                    show_eu_modal: true,
+                    target: '_blank',
+                    href: 'https://www.twitter.com/deriv_eu/',
+                }
+            },
+            icon: Twitter,
+            image_alt: '_t_Twitter_t_',
+        },
+        visibility: {
+            is_eu: true,
+        },
+    },
+    {
+        id: 6,
+        data: {
+            url: {
+                type: 'non-company',
+                target: '_blank',
+                href: 'https://www.youtube.com/@deriv',
+            },
+            icon: Youtube,
+            image_alt: '_t_Youtube_t_',
+        },
+        visibility: {
+            is_eu: false,
+        },
+    },
+    {
+        id: 7,
+        data: {
+            url: {
+                type: 'non-company',
+                target: '_blank',
+                href: 'https://www.youtube.com/@deriv',
+                show_eu_modal: true,
+            },
+            icon: Youtube,
+            image_alt: '_t_Youtube_t_',
+        },
+        visibility: {
+            is_eu: true,
+        },
+    },
+    {
+        id: 8,
+        data: {
+            url: {
+                type: 'non-company',
+                target: '_blank',
+                href: 'https://www.linkedin.com/company/derivdotcom/',
+            },
+            icon: Linkedin,
+            image_alt: '_t_Linkedin_t_',
+        },
+        visibility: {
+            is_eu: false,
+        },
+    },
+    {
+        id: 9,
+        data: {
+            url: {
+                type: 'non-company',
+                target: '_blank',
+                href: 'https://www.linkedin.com/company/derivdotcom/',
+                show_eu_modal: true,
+            },
+            icon: Linkedin,
+            image_alt: '_t_Linkedin_t_',
+        },
+        visibility: {
+            is_eu: true,
+        },
+    },
+    {
+        id: 10,
+        data: {
+            url: {
+                type: 'non-company',
+                target: '_blank',
+                href: 'https://api.whatsapp.com/send/?phone=35699578341&text&type=phone_number&app_absent=0',
+            },
+            icon: WhatsApp,
+            image_alt: '_t_WhatsApp_t_',
+        },
+    },
+]

src/features/components/templates/help-centre/index.tsx

@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { SocialMediaAccounts } from './data'
+import Flex from 'features/components/atoms/flex-box'
+import { getLocationPathname } from 'common/utility'
+import Image from 'features/components/atoms/image'
+import Link from 'features/components/atoms/link'
+import useVisibleContent from 'components/hooks/use-visible-content'
+import useRegion from 'components/hooks/use-region'
+
+const HelpCentreSocialIcons = () => {
+    const [is_career, setIsCareer] = useState(false)
+    const { is_eu } = useRegion()
+    const { i18n } = useTranslation()
+    const { language } = i18n
+
+    useEffect(() => {
+        const current_path = getLocationPathname()
+        const splitted_path = current_path.split('/')
+        const is_career_page = splitted_path.includes('careers')
+        setIsCareer(is_career_page)
+    }, [])
+
+    const config = {
+        is_career_page: is_career,
+        is_eu,
+        is_ar: language === 'ar',
+        is_es: language === 'es',
+    }
+
+    const icons = useVisibleContent({
+        content: SocialMediaAccounts,
+        config,
+    })
+
+    return (
+        <Flex.Box justify="center" align="center" gap="8x">
+            {icons.map(({ data, id }) => {
+                const iconUrl = typeof data.url === 'function' ? data.url(config) : data.url
+                return (
+                    <Link key={id} url={iconUrl}>
+                        <Image src={data.icon} alt={data.image_alt} width={32} height={32} />
+                    </Link>
+                )
+            })}
+        </Flex.Box>
+    )
+}
+
+export default HelpCentreSocialIcons