dhruv/coj 685/create the mobile view of login history accountsv2 (der…

…iv-com#14480) * feat: Created a hook for fetching login history data * feat: Created static for Login History Section in accounts-v2 * feat: added content to table * fix: index * fix: added neccesary changes in code in new branch * fix: resolve comments * fix: resolve imports * feat: Created a hook for fetching login history data * feat: Created static for Login History Section in accounts-v2 * feat: added content to table * fix: index * fix: resolve imports and rearranged imports * fix: resolved imports and added TODO * feat: Created a hook for fetching login history data * feat: Created static for Login History Section in accounts-v2 * feat: added content to table * fix: index * fix: resolved importsof dayjs and added TODO * fix:added TODO * fix: removed files * fix: removed files * feat: Created a hook for fetching login history data * feat: Created static for Login History Section in accounts-v2 * feat: added content to table * fix: index * fix: removed extra file * fix: removed extra file * feat: Created a hook for fetching login history data * feat: Created static for Login History Section in accounts-v2 * feat: added content to table * fix: index * feat: Created a hook for fetching login history data * feat: Created static for Login History Section in accounts-v2 * feat: added content to table * fix: index * feat: Created the mobile view for Login History Section in accounts-v2 and test cases for the Hook * fix: removed extra file * fix: removed extra file * fix: fixed color to general * feat: Created a hook for fetching login history data * feat: Created static for Login History Section in accounts-v2 * feat: added content to table * fix: index * feat: Created a hook for fetching login history data * feat: Created static for Login History Section in accounts-v2 * feat: added content to table * fix: index * fix: fixed allignmnet of cards and removed empty spaces * fix: fixed allignmnet of cards and removed empty spaces and key attribute * fix: added map function and removed index * fix: added map function and removed index used in file * fix: fixed icon.js file in LoginHistory * fix: removed unwanted values --------- Co-authored-by: Dhruv-deriv <[email protected]>
niloofar-deriv · Apr 22, 2024 · d9c483d · d9c483d
1 parent a46d04a
commit d9c483d
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 4 deletions.
diff --git a/packages/account-v2/src/containers/LoginHistoryTable/LoginHistoryTableCard.tsx b/packages/account-v2/src/containers/LoginHistoryTable/LoginHistoryTableCard.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { LoginHistory } from '@deriv/api-types';
+import { Text } from '@deriv-com/ui';
+import { formattedLoginHistoryData } from '../../utils';
+
+type TLoginHistoryProps = { loginHistory: LoginHistory };
+
+export const LoginHistoryTableCard = ({ loginHistory }: TLoginHistoryProps) => {
+    const formattedLoginHistory = formattedLoginHistoryData(loginHistory);
+
+    return (
+        <div className='inline-flex flex-col items-start gap-16 w-full'>
+            {formattedLoginHistory.map(item => (
+                <div
+                    className='shadow-md p-16 rounded-lg bg-[var(system-light-primary-background,#FFF)] w-full'
+                    key={item.ip}
+                >
+                    <div className='flex gap-40'>
+                        <div className='justify-left flex flex-col items-start gap-8 row-span-3'>
+                            {[
+                                { label: 'Date and time', value: item.date },
+                                { label: 'Browser', value: item.browser },
+                                { label: 'IP Address', value: item.ip },
+                            ].map((gridItem, gridIndex) => (
+                                <div className='grid grid-row-2 gap-4' key={gridIndex}>
+                                    <Text size='lg' weight='bold'>
+                                        {gridItem.label}
+                                    </Text>
+                                    <Text size='lg' weight='normal'>
+                                        {gridItem.value}
+                                    </Text>
+                                </div>
+                            ))}
+                        </div>
+                        <div className='justify-center items-right col-span-1 flex flex-col gap-4'>
+                            <Text size='lg' weight='bold'>
+                                Action
+                            </Text>
+                            <Text size='lg' weight='normal'>
+                                {item.action}
+                            </Text>
+                        </div>
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+};
diff --git a/packages/account-v2/src/containers/index.ts b/packages/account-v2/src/containers/index.ts
@@ -1,6 +1,7 @@
 export { AccountClosureForm } from './AccountClosureForm/AccountClosureForm';
 export { AccountClosureSteps } from './AccountClosureSteps/AccountClosureSteps';
 export { LoginHistoryTable } from './LoginHistoryTable/LoginHistoryTable';
+export { LoginHistoryTableCard } from './LoginHistoryTable/LoginHistoryTableCard';
 export { OnfidoView } from './Onfido/OnfidoView';
 export { PersonalDetailsFormWithExample } from './PersonalDetailsFormWithExample/PersonalDetailsFormWithExample';
 export { POICountrySelector } from './POICountrySelector/POICountrySelector';

diff --git a/packages/account-v2/src/pages/LoginHistory/LoginHistory.tsx b/packages/account-v2/src/pages/LoginHistory/LoginHistory.tsx
@@ -1,11 +1,16 @@
 import React from 'react';
 import { useLoginHistory } from '@deriv/api-v2';
-import { Loader } from '@deriv-com/ui';
-import { LoginHistoryTable } from '../../containers';
+import { Loader, useDevice } from '@deriv-com/ui';
+import { LoginHistoryTable, LoginHistoryTableCard } from '../../containers';
 
 export const LoginHistory = () => {
     const { isLoading, loginHistory } = useLoginHistory(50);
+    const { isMobile } = useDevice();
     if (isLoading) return <Loader />;
-    if (loginHistory?.length) return <LoginHistoryTable loginHistory={loginHistory} />;
+
+    if (loginHistory?.length) {
+        if (!isMobile) return <LoginHistoryTable loginHistory={loginHistory} />;
+        return <LoginHistoryTableCard loginHistory={loginHistory} />;
+    }
     return null;
 };
diff --git a/packages/account-v2/src/router/components/RouteLinks/RouteLinks.tsx b/packages/account-v2/src/router/components/RouteLinks/RouteLinks.tsx
@@ -4,7 +4,9 @@ import { defaultRoute, routes } from '../../routesConfig';
 
 export const RouteLinks = () => (
     <BrowserRouter>
-        <div className='px-4 py-16 md:gap-24 grid grid-cols-[1fr_4fr] sm:grid-cols-none max-w-[600px] md:max-w-[1200px] mx-auto md:py-50 md:px-24'>
+
+        <div className='px-4 py-16 md:gap-24 grid lg:grid-cols-[1fr_4fr] max-w-[600px] md:max-w-[1200px] mx-auto md:py-50 md:px-24'>
+
             <div className='p-8 d-none lg:flex lg:flex-col bg-solid-slate-1 rounded-default'>
                 {routes.map(route => (
                     <NavLink

diff --git a/packages/api-v2/src/hooks/__tests__/useLoginHistory.spec.tsx b/packages/api-v2/src/hooks/__tests__/useLoginHistory.spec.tsx
@@ -0,0 +1,43 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useLoginHistory from '../useLoginHistory';
+import useQuery from '../../useQuery';
+import useAuthorize from '../useAuthorize';
+
+jest.mock('../../useQuery');
+jest.mock('../useAuthorize');
+describe('useLoginHistory', () => {
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+    const mockResponse = {
+        data: {
+            login_history: [
+                {
+                    action: 'logedewin',
+                    environment:
+                        '2-Apr-24 05:18:38GMT IP=94.201.147.222 IP_COUNTRY=AE User_AGENT=Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36 LANG=EN',
+                    status: 1,
+                    time: 712035118,
+                },
+            ],
+        },
+    };
+    const limitValue = 25;
+
+    it('should return login history data when authorized', () => {
+        (useAuthorize as jest.Mock).mockReturnValue({ isSuccess: true });
+        (useQuery as jest.Mock).mockReturnValueOnce(mockResponse);
+        const { result } = renderHook(() => useLoginHistory(limitValue));
+        expect(result.current.loginHistory).toEqual(mockResponse.data.login_history);
+    });
+
+    it('should call the hook with proper config', () => {
+        (useAuthorize as jest.Mock).mockReturnValue({ isSuccess: false });
+        renderHook(() => useLoginHistory(limitValue));
+
+        expect(useQuery).toBeCalledWith('login_history', {
+            options: { enabled: false },
+            payload: { limit: 25 },
+        });
+    });
+});