Konstantinos / Unavailable services for EU, should be unavailable in …

…help center as well (#5708)

* fix: help centre eu rendering

* fix: use ProtectedRoute component

* fix: dbot

---------

Co-authored-by: Konstantinos-Gk <[email protected]>

src/pages/help-centre/deriv-bot.tsx

@@ -4,9 +4,20 @@ import dbot from './data/_dbot'
 import { WithIntl } from 'components/localization'
 import { SEO } from 'components/containers'
 import { TGatsbyHead } from 'features/types'
+import useRegion from 'components/hooks/use-region'
+import ProtectedRoute from 'features/components/molecules/protected-route'
 
-const DBot = () => <QuestionsTemplate data={dbot} />
+const DBot = () => {
+    const { is_eu, is_region_loading } = useRegion()
 
+    return (
+        <ProtectedRoute
+            is_page_visible={!is_eu}
+            component={<QuestionsTemplate data={dbot} />}
+            is_loading={is_region_loading}
+        />
+    )
+}
 export default WithIntl()(DBot)
 
 export const Head = ({ pageContext }: TGatsbyHead) => (

src/pages/help-centre/deriv-ez.tsx

@@ -4,9 +4,20 @@ import deriv_ez from './data/_deriv-ez'
 import { WithIntl } from 'components/localization'
 import { SEO } from 'components/containers'
 import { TGatsbyHead } from 'features/types'
+import useRegion from 'components/hooks/use-region'
+import ProtectedRoute from 'features/components/molecules/protected-route'
 
-const DerivEZ = () => <QuestionsTemplate data={deriv_ez} />
+const DerivEZ = () => {
+    const { is_eu, is_region_loading } = useRegion()
 
+    return (
+        <ProtectedRoute
+            is_page_visible={!is_eu}
+            component={<QuestionsTemplate data={deriv_ez} />}
+            is_loading={is_region_loading}
+        />
+    )
+}
 export default WithIntl()(DerivEZ)
 
 export const Head = ({ pageContext }: TGatsbyHead) => (

src/pages/help-centre/deriv-p2p.tsx

@@ -4,8 +4,20 @@ import deriv_p2p from './data/_deriv-p2p'
 import { WithIntl } from 'components/localization'
 import { SEO } from 'components/containers'
 import { TGatsbyHead } from 'features/types'
+import ProtectedRoute from 'features/components/molecules/protected-route'
+import useRegion from 'components/hooks/use-region'
 
-const DerivP2P = () => <QuestionsTemplate data={deriv_p2p} />
+const DerivP2P = () => {
+    const { is_eu, is_region_loading } = useRegion()
+
+    return (
+        <ProtectedRoute
+            is_page_visible={!is_eu}
+            component={<QuestionsTemplate data={deriv_p2p} />}
+            is_loading={is_region_loading}
+        />
+    )
+}
 
 export default WithIntl()(DerivP2P)
 

src/pages/help-centre/deriv-x.tsx

@@ -4,9 +4,20 @@ import derivx from './data/_deriv-x'
 import { WithIntl } from 'components/localization'
 import { SEO } from 'components/containers'
 import { TGatsbyHead } from 'features/types'
+import useRegion from 'components/hooks/use-region'
+import ProtectedRoute from 'features/components/molecules/protected-route'
 
-const DerivX = () => <QuestionsTemplate data={derivx} />
+const DerivX = () => {
+    const { is_eu, is_region_loading } = useRegion()
 
+    return (
+        <ProtectedRoute
+            is_page_visible={!is_eu}
+            component={<QuestionsTemplate data={derivx} />}
+            is_loading={is_region_loading}
+        />
+    )
+}
 export default WithIntl()(DerivX)
 
 export const Head = ({ pageContext }: TGatsbyHead) => (