Merge branch 'master' into ahmed/DAPI-821/fix--sync-endpoint-configV3

config/v3/kyc_auth_status/receive.json

@@ -168,10 +168,24 @@
                                                 }
                                             },
                                             "available_services": {
-                                                "description": "Services that support this document type.",
+                                                "description": "Services that support this document type and the specific name expected by the service.",
                                                 "type": "array",
                                                 "items": {
-                                                    "type": "string"
+                                                    "type": "object",
+                                                    "required": [
+                                                        "document_type",
+                                                        "service"
+                                                    ],
+                                                    "properties": {
+                                                        "document_type": {
+                                                            "description": "The specific document type name expected by the service.",
+                                                            "type": "string"
+                                                        },
+                                                        "service": {
+                                                            "description": "The name of the service supporting this document type.",
+                                                            "type": "string"
+                                                        }
+                                                    }
                                                 }
                                             },
                                             "display_name": {
@@ -378,10 +392,24 @@
                                                     }
                                                 },
                                                 "available_services": {
-                                                    "description": "Services that support this document type.",
+                                                    "description": "Services that support this document type and the specific name expected by the service.",
                                                     "type": "array",
                                                     "items": {
-                                                        "type": "string"
+                                                        "type": "object",
+                                                        "required": [
+                                                            "document_type",
+                                                            "service"
+                                                        ],
+                                                        "properties": {
+                                                            "document_type": {
+                                                                "description": "The specific document type name expected by the service.",
+                                                                "type": "string"
+                                                            },
+                                                            "service": {
+                                                                "description": "The name of the service supporting this document type.",
+                                                                "type": "string"
+                                                            }
+                                                        }
                                                     }
                                                 },
                                                 "display_name": {

config/v3/p2p_order_create/receive.json

@@ -124,6 +124,18 @@
                                 1
                             ]
                         },
+                        "is_recommended": {
+                            "description": "Optional field, indicates if the advertiser is recommended.",
+                            "type": [
+                                "integer",
+                                "null"
+                            ],
+                            "enum": [
+                                0,
+                                1,
+                                null
+                            ]
+                        },
                         "last_name": {
                             "description": "The advertiser's last name.",
                             "type": "string",

src/components/UserNavbarItem/item.desktop.tsx

@@ -12,6 +12,8 @@ import useDeviceType from '@site/src/hooks/useDeviceType';
 
 import { IUserNavbarItemProps } from './item.types';
 import styles from './UserNavbarItem.module.scss';
+import Cookies from 'js-cookie';
+import { useHandleLogin } from '@site/src/hooks/useHandleLogin';
 
 interface IActionProps {
   handleClick: () => void;
@@ -62,12 +64,16 @@ const DashboardActions: React.FC<IActionProps> = ({ handleClick, isDesktop }) =>
 const SignedInActions: React.FC<IActionProps> = ({ handleClick, isDesktop }) => {
   const signedInButtonClasses = clsx('navbar__item', styles.UserNavbarItem, styles.SignedInButton);
 
+  const { handleLogin } = useHandleLogin({
+    onClickLogin: handleClick,
+  });
+
   return (
     <nav className='right-navigation'>
       <Button
         variant='secondary'
         color='black'
-        onClick={handleClick}
+        onClick={handleLogin}
         className={signedInButtonClasses}
         data-testid='sa_login'
       >
@@ -88,14 +94,41 @@ const SignedInActions: React.FC<IActionProps> = ({ handleClick, isDesktop }) =>
 };
 
 const UserNavbarDesktopItem = ({ authUrl, is_logged_in }: IUserNavbarItemProps) => {
-  const { logout } = useLogout();
   const { deviceType } = useDeviceType();
   const isDesktop = deviceType === 'desktop';
 
   const handleClick = () => {
     location.assign(authUrl);
   };
 
+  const { handleLogin, isOAuth2Enabled } = useHandleLogin({
+    onClickLogin: handleClick,
+  });
+
+  const { logout } = useLogout();
+
+  const loggedState = Cookies.get('logged_state');
+
+  const loginAccountsSessionStorage = JSON.parse(sessionStorage.getItem('login-accounts'));
+
+  const isLoginAccountsPopulated =
+    loginAccountsSessionStorage && loginAccountsSessionStorage.length > 0;
+
+  React.useEffect(() => {
+    if (
+      loggedState === 'true' &&
+      isOAuth2Enabled &&
+      !isLoginAccountsPopulated &&
+      !window.location.pathname.includes('callback') &&
+      !window.location.pathname.includes('endpoint')
+    ) {
+      handleLogin();
+    }
+    if (loggedState === 'false' && isOAuth2Enabled && isLoginAccountsPopulated) {
+      logout();
+    }
+  }, [isOAuth2Enabled, loggedState, logout, handleLogin, isLoginAccountsPopulated]);
+
   return is_logged_in ? (
     <DashboardActions handleClick={logout} isDesktop={isDesktop} />
   ) : (

src/features/Apiexplorer/LoginDialog/index.tsx

@@ -4,6 +4,7 @@ import useLoginUrl from '@site/src/hooks/useLoginUrl';
 import styles from './LoginDialog.module.scss';
 import Translate, { translate } from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useHandleLogin } from '@site/src/hooks/useHandleLogin';
 
 type TLoginDialog = {
   setToggleModal: React.Dispatch<React.SetStateAction<boolean>>;
@@ -25,6 +26,10 @@ export const LoginDialog = ({ setToggleModal }: TLoginDialog) => {
     location.assign(getUrl(currentLocale));
   };
 
+  const { handleLogin } = useHandleLogin({
+    onClickLogin: handleClick,
+  });
+
   const handleSignUp = () => {
     location.assign('https://deriv.com/signup/');
   };
@@ -57,7 +62,7 @@ export const LoginDialog = ({ setToggleModal }: TLoginDialog) => {
               <Button color='tertiary' onClick={handleSignUp} className={styles.btn}>
                 <Translate>Sign up</Translate>
               </Button>
-              <Button color='primary' onClick={handleClick} className={styles.btn}>
+              <Button color='primary' onClick={handleLogin} className={styles.btn}>
                 <Translate>Log in</Translate>
               </Button>
             </div>

src/features/Apiexplorer/Schema/Schema.module.scss

@@ -1,4 +1,5 @@
 @use 'src/styles/utility' as *;
+@use 'src/styles/mixins' as *;
 
 .schemaHeader {
   padding: rem(2.4);
@@ -227,6 +228,10 @@
     gap: rem(0.8);
     width: 100%;
 
+    @include mobile-sm {
+      flex-wrap: wrap;
+    }
+
     strong {
       font-size: rem(1.6);
     }

src/features/Callback/CallbackPage.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Callback } from '@deriv-com/auth-client';
+import { transformAccountsFromResponseBody } from '@site/src/utils';
+import useAuthContext from '@site/src/hooks/useAuthContext';
+const CallbackPage = () => {
+  const { updateLoginAccounts } = useAuthContext();
+  return (
+    <Callback
+      onSignInSuccess={(tokens) => {
+        const accounts = transformAccountsFromResponseBody(tokens);
+        updateLoginAccounts(accounts);
+        window.location.href = '/';
+      }}
+    />
+  );
+};
+export default CallbackPage;

src/features/Callback/index.ts

@@ -0,0 +1,2 @@
+import CallbackPage from './CallbackPage';
+export default CallbackPage;

src/features/Login/Login.tsx

@@ -5,6 +5,7 @@ import useLoginUrl from '@site/src/hooks/useLoginUrl';
 import Footer from '@site/src/components/Footer';
 import Translate from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useHandleLogin } from '@site/src/hooks/useHandleLogin';
 
 export const Login = () => {
   const { getUrl } = useLoginUrl();
@@ -15,6 +16,11 @@ export const Login = () => {
   const handleClick = () => {
     window.location.assign(getUrl(currentLocale));
   };
+
+  const { handleLogin } = useHandleLogin({
+    onClickLogin: handleClick,
+  });
+
   return (
     <div>
       <div className={styles.login} data-testid='login'>
@@ -26,7 +32,7 @@ export const Login = () => {
             </Translate>
           </Text>
           <div className={styles.action}>
-            <Button color='primary' onClick={handleClick}>
+            <Button color='primary' onClick={handleLogin}>
               <Translate>Log In</Translate>
             </Button>
           </div>

src/features/dashboard/__tests__/dashboard.test.tsx

@@ -48,6 +48,11 @@ mockReactTable.mockImplementation(() => ({
   headerGroups: [],
 }));
 
+jest.mock('@docusaurus/BrowserOnly', () => ({
+  __esModule: true,
+  default: ({ children }: { children: () => JSX.Element }) => children(),
+}));
+
 describe('AppManager', () => {
   it('shows the login screen', () => {
     mockUseAuthContext.mockImplementation(() => ({

src/features/dashboard/dashboard.tsx

@@ -3,6 +3,7 @@ import useAuthContext from '@site/src/hooks/useAuthContext';
 import useAppManager from '@site/src/hooks/useAppManager';
 import ManageDashboard from './manage-dashboard';
 import { Login } from '../Login/Login';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 
 const Dashboard = () => {
   const { is_logged_in } = useAuthContext();
@@ -16,7 +17,7 @@ const Dashboard = () => {
   }, [setIsDashboard]);
 
   if (is_logged_in) return <ManageDashboard />;
-  return <Login />;
+  return <BrowserOnly>{() => <Login />}</BrowserOnly>;
 };
 
 export default Dashboard;

src/hooks/useHandleLogin/index.tsx

@@ -0,0 +1,35 @@
+import useGrowthbookGetFeatureValue from '../useGrowthbookGetFeatureValue/';
+import {
+  requestOidcAuthentication,
+  TOAuth2EnabledAppList,
+  useIsOAuth2Enabled,
+} from '@deriv-com/auth-client';
+/**
+ * Handles the new login flow for the user using OIDC.
+ *
+ * If the user is not logged in and OAuth2 is enabled, it will redirect the user to the
+ * OAuth2 authorization page from the OIDC config endpoint. If OAuth2 is not enabled it will
+ * redirect the user to the legacy oauth url coming from the onClickLogin callback.
+ *
+ * @param {Object} props - The props object.
+ * @param {Function} props.onClickLogin - The callback to be called when the user is logged in.
+ * @returns {Object} - An object with the `handleLogin` function.
+ */
+export const useHandleLogin = ({ onClickLogin }: { onClickLogin?: () => void }) => {
+  const [OAuth2EnabledApps, OAuth2EnabledAppsInitialised] =
+    useGrowthbookGetFeatureValue<TOAuth2EnabledAppList>({
+      featureFlag: 'hydra_be',
+    });
+  const isOAuth2Enabled = useIsOAuth2Enabled(OAuth2EnabledApps, OAuth2EnabledAppsInitialised);
+  const handleLogin = async () => {
+    if (isOAuth2Enabled) {
+      await requestOidcAuthentication({
+        redirectCallbackUri: `${window.location.origin}/callback`,
+      });
+    }
+    if (onClickLogin) {
+      onClickLogin();
+    }
+  };
+  return { handleLogin, isOAuth2Enabled };
+};

src/hooks/useLogout/__tests__/useLogout.test.tsx

@@ -23,6 +23,19 @@ mockUseAuthContext.mockImplementation(() => ({
   updateCurrentLoginAccount: mockUpdateCurrentLoginAccount,
 }));
 
+jest.mock('@deriv-com/auth-client', () => ({
+  OAuth2Logout: jest.fn((WSLogoutAndRedirect) => {
+    const mockIframe = document.createElement('iframe');
+    mockIframe.id = 'logout-iframe';
+    document.body.appendChild(mockIframe);
+    setTimeout(() => {
+      const event = new MessageEvent('message', { data: 'logout_complete' });
+      window.dispatchEvent(event);
+    }, 100);
+    WSLogoutAndRedirect();
+  }),
+}));
+
 const logout_response = {
   logout: 1,
   req_id: 1,