Merge pull request #286 from deriv-com/mayuran/diel-country-block

fix: diel country block

Author: mayuran-deriv

i18n/en/code.json

@@ -1175,7 +1175,6 @@
   "Demo account": {
     "message": "Demo account"
   },
-
   "Deriv.com": {
     "message": "Deriv.com"
   },
@@ -1193,5 +1192,14 @@
   },
   "Get real account": {
     "message": "Get real account"
+  },
+  "Not available in your region": {
+    "message": "Not available in your region"
+  },
+  "You can still use our other products and services.": {
+    "message": "You can still use our other products and services."
+  },
+  "Go to home": {
+    "message": "Go to home"
   }
 }

i18n/fr/code.json

@@ -12,7 +12,7 @@
     "message": "Tableau de bord"
   },
   "API explorer": {
-    "message": "Explorateur d'API"
+    "message": "API explorer"
   },
   "Deriv Tech": {
     "message": "Deriv Tech"
@@ -1192,5 +1192,14 @@
   },
   "Get real account": {
     "message": "Obtenir un compte réel"
+  },
+  "Not available in your region": {
+    "message": "N'est pas disponible dans votre région"
+  },
+  "You can still use our other products and services.": {
+    "message": "Vous pouvez toujours utiliser nos autres produits et services."
+  },
+  "Go to home": {
+    "message": "Rentrez à la page d'accueil"
   }
 }

src/contexts/app-manager/app-manager.context.tsx

@@ -20,6 +20,7 @@ export type TAppManagerContext = {
   setIsDashboard: Dispatch<SetStateAction<boolean>>;
   app_register_modal_open: boolean;
   setAppRegisterModalOpen: Dispatch<SetStateAction<boolean>>;
+  is_dashboard_blocked: boolean;
 };
 
 export const AppManagerContext = createContext<TAppManagerContext | null>(null);

src/contexts/app-manager/app-manager.provider.tsx

@@ -14,8 +14,9 @@ const AppManagerContextProvider = ({ children }: TAppManagerContextProps) => {
   const [is_dashboard, setIsDashboard] = useState(false);
   const [app_register_modal_open, setAppRegisterModalOpen] = useState(false);
   const [current_updating_item, setCurrentUpdateItem] = useState({});
-  const { getAllApps, apps: updatedApps } = useGetApps();
+  const { getAllApps, apps: updatedApps, error } = useGetApps();
   const { is_authorized } = useAuthContext();
+  const [is_dashboard_blocked, setIsDashboardBlocked] = useState(false);
 
   const getApps = useCallback(() => {
     if (is_authorized) {
@@ -32,6 +33,12 @@ const AppManagerContextProvider = ({ children }: TAppManagerContextProps) => {
     }
   }, []);
 
+  useEffect(() => {
+    if (error?.error?.code === 'AppList') {
+      setIsDashboardBlocked(true);
+    }
+  }, [error]);
+
   const handleCurrentUpdatingItem = useCallback((item: ApplicationObject) => {
     setCurrentUpdateItem(item);
   }, []);
@@ -52,6 +59,7 @@ const AppManagerContextProvider = ({ children }: TAppManagerContextProps) => {
       app_register_modal_open,
       handleCurrentUpdatingItem,
       current_updating_item,
+      is_dashboard_blocked,
     };
   }, [
     apps,
@@ -64,6 +72,7 @@ const AppManagerContextProvider = ({ children }: TAppManagerContextProps) => {
     setAppRegisterModalOpen,
     handleCurrentUpdatingItem,
     current_updating_item,
+    is_dashboard_blocked,
   ]);
 
   return <AppManagerContext.Provider value={context_object}>{children}</AppManagerContext.Provider>;

src/contexts/auth/auth.provider.tsx

@@ -81,16 +81,20 @@ const AuthProvider = ({ children }: TAuthProviderProps) => {
 
   const updateAuthorize = useCallback(async () => {
     if (currentLoginAccount.token) {
-      const { authorize } = await apiManager.authorize(
-        currentLoginAccount.token,
-        setIsConnected,
-        setIsAuthorized,
-      );
-      setIsAuthorized(true);
-      setisSwitchingAccount(false);
-      const { account_list, ...user } = authorize;
-      setUserAccounts(account_list);
-      setUser(user);
+      try {
+        const { authorize } = await apiManager.authorize(
+          currentLoginAccount.token,
+          setIsConnected,
+          setIsAuthorized,
+        );
+        setIsAuthorized(true);
+        setisSwitchingAccount(false);
+        const { account_list, ...user } = authorize;
+        setUserAccounts(account_list);
+        setUser(user);
+      } catch (error) {
+        console.error('Failed to authorize:', error);
+      }
     }
   }, [currentLoginAccount.token, setUser, setUserAccounts]);
 

src/features/dashboard/components/permission-denied-error/permission-denied-error.scss

@@ -0,0 +1,24 @@
+.permission-denied-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  padding: 2rem;
+  text-align: center;
+}
+
+.permission-denied-content {
+  max-width: 600px;
+  margin: 0 auto;
+
+  h1 {
+    margin-bottom: 1rem;
+    color: var(--ifm-color-danger);
+  }
+
+  p {
+    margin-bottom: 2rem;
+    font-size: 1.2rem;
+  }
+}

src/features/dashboard/components/permission-denied-error/permission-denied-error.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { translate } from '@docusaurus/Translate';
+import { Button } from '@deriv-com/quill-ui';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import './permission-denied-error.scss';
+
+const PermissionDeniedError = () => {
+  const {
+    i18n: { currentLocale },
+  } = useDocusaurusContext();
+
+  const is_en = currentLocale === 'en';
+  const homeUrl = `${!is_en ? `/${currentLocale}` : ''}/`;
+
+  const handleGoHome = () => {
+    window.location.href = homeUrl;
+  };
+
+  return (
+    <div className='permission-denied-container'>
+      <div className='permission-denied-content'>
+        <h1>{translate({ message: 'Not available in your region' })}</h1>
+        <p>
+          {translate({
+            message: 'You can still use our other products and services.',
+          })}
+        </p>
+        <Button variant='primary' onClick={handleGoHome} size='lg'>
+          {translate({ message: 'Go to home' })}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default PermissionDeniedError;

src/features/dashboard/dashboard.tsx

@@ -5,10 +5,11 @@ import ManageDashboard from './manage-dashboard';
 import { Login } from '../Login/Login';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import { Fallback } from '../Fallback';
+import PermissionDeniedError from './components/permission-denied-error/permission-denied-error';
 
 const Dashboard = () => {
   const { is_logged_in, siteActive } = useAuthContext();
-  const { setIsDashboard } = useAppManager();
+  const { setIsDashboard, is_dashboard_blocked } = useAppManager();
 
   useEffect(() => {
     setIsDashboard(true);
@@ -18,6 +19,10 @@ const Dashboard = () => {
   }, [setIsDashboard]);
 
   if (!siteActive) return <Fallback />;
+
+  // Show permission denied error if the flag is set
+  if (is_logged_in && is_dashboard_blocked) return <PermissionDeniedError />;
+
   if (is_logged_in) return <ManageDashboard />;
   return <BrowserOnly>{() => <Login />}</BrowserOnly>;
 };

src/features/dashboard/hooks/useGetApp/index.tsx

@@ -2,13 +2,13 @@ import useWS from '@site/src/hooks/useWs';
 import { useCallback } from 'react';
 
 const useGetApps = () => {
-  const { send, data, is_loading } = useWS('app_list');
+  const { send, data, is_loading, error } = useWS('app_list');
 
   const getAllApps = useCallback(() => {
     send();
   }, [send]);
 
-  return { getAllApps, apps: data, is_loading };
+  return { getAllApps, apps: data, is_loading, error };
 };
 
 export default useGetApps;