Merge pull request deriv-com#17 from nada-deriv/nada/P2PS-820/online-…

…status-refactor

refactor: online status component refactoring

packages/p2p/src/components/online-status/__tests__/online-status-avatar.spec.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import OnlineStatusAvatar from '../online-status-avatar';
+
+const props = {
+    is_online: 0,
+    nickname: 'test',
+    size: 40,
+    text_size: 'xs',
+};
+describe('<OnlineStatusAvatar/>', () => {
+    it('should render shortened nickname as the avatar', () => {
+        render(<OnlineStatusAvatar {...props} />);
+
+        expect(screen.getByText('TE')).toBeInTheDocument();
+    });
+});

packages/p2p/src/components/online-status/__tests__/online-status-icon.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import OnlineStatusIcon from '../online-status-icon';
+
+describe('<OnlineStatusIcon/>', () => {
+    it('should render the default state as offline', () => {
+        render(<OnlineStatusIcon is_online={0} />);
+
+        const icon = screen.getByTestId('dt_online_status_icon');
+        expect(icon).toHaveClass('online-status__icon--offline');
+    });
+
+    it('should render online state when user is online', () => {
+        render(<OnlineStatusIcon is_online={1} />);
+
+        const icon = screen.getByTestId('dt_online_status_icon');
+        expect(icon).toHaveClass('online-status__icon--online');
+    });
+});

packages/p2p/src/components/online-status/__tests__/online-status-label.spec.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import OnlineStatusLabel from '../online-status-label';
+import moment from 'moment';
+import 'moment/min/locales';
+import { isMobile, toMoment } from '@deriv/shared';
+
+const props = {
+    is_online: 0,
+    last_online_time: 0,
+};
+
+let mock_value: moment.Moment = moment();
+jest.mock('@deriv/shared', () => ({
+    ...jest.requireActual('@deriv/shared'),
+    toMoment: jest.fn(() => mock_value),
+    isMobile: jest.fn(() => false),
+}));
+
+describe('<OnlineStatusLabel/>', () => {
+    it('should render the component with default state', () => {
+        render(<OnlineStatusLabel {...props} />);
+
+        expect(screen.getByText('Seen more than 6 months ago')).toBeInTheDocument();
+    });
+    it('should render component with default state in responsive view', () => {
+        (isMobile as jest.Mock).mockReturnValue(true);
+        render(<OnlineStatusLabel {...props} />);
+
+        expect(screen.getByText('Seen more than 6 months ago')).toBeInTheDocument();
+    });
+    it('should show label "Online" when "last_online_time" is not being passed', () => {
+        const newprops = { ...props, is_online: 1 };
+        render(<OnlineStatusLabel {...newprops} />);
+
+        expect(screen.getByText('Online')).toBeInTheDocument();
+    });
+    it('should show label "Seen 3 hours ago" when last seen is in hours', () => {
+        mock_value = moment('2023-05-30T18:48:38+04:00');
+        (toMoment as jest.Mock).mockReturnValue(mock_value);
+        const newprops = { ...props, last_online_time: 1685446791 };
+        render(<OnlineStatusLabel {...newprops} />);
+
+        expect(screen.getByText('Seen 3 hours ago')).toBeInTheDocument();
+    });
+    it('should show label "Seen 1 hour ago" when user was last online 1 hour ago', () => {
+        mock_value = moment('2023-05-30T16:49:38+04:00');
+        (toMoment as jest.Mock).mockReturnValue(mock_value);
+        const newprops = { ...props, last_online_time: 1685446791 };
+        render(<OnlineStatusLabel {...newprops} />);
+
+        expect(screen.getByText('Seen 1 hour ago')).toBeInTheDocument();
+    });
+    it('should show label "Seen 1 day ago" when user was last online 1 day ago', () => {
+        mock_value = moment('2023-05-31T16:49:38+04:00');
+        (toMoment as jest.Mock).mockReturnValue(mock_value);
+        const newprops = { ...props, last_online_time: 1685446791 };
+        render(<OnlineStatusLabel {...newprops} />);
+
+        expect(screen.getByText('Seen 1 day ago')).toBeInTheDocument();
+    });
+    it('should show label "Seen 3 days ago" when last seen is in days', () => {
+        mock_value = moment('2023-06-02T16:49:38+04:00');
+        (toMoment as jest.Mock).mockReturnValue(mock_value);
+        const newprops = { ...props, last_online_time: 1685446791 };
+        render(<OnlineStatusLabel {...newprops} />);
+
+        expect(screen.getByText('Seen 3 days ago')).toBeInTheDocument();
+    });
+    it('should show label "Seen more than 6 months ago" when last seen is in years', () => {
+        mock_value = moment('2025-06-02T16:49:38+04:00');
+        (toMoment as jest.Mock).mockReturnValue(mock_value);
+        const newprops = { ...props, last_online_time: 1685446791 };
+        render(<OnlineStatusLabel {...newprops} />);
+
+        expect(screen.getByText('Seen more than 6 months ago')).toBeInTheDocument();
+    });
+    it('should show label "Seen 5 months ago" when last seen is in months', () => {
+        mock_value = moment('2023-11-02T16:49:38+04:00');
+        (toMoment as jest.Mock).mockReturnValue(mock_value);
+        const newprops = { ...props, last_online_time: 1685446791 };
+        render(<OnlineStatusLabel {...newprops} />);
+
+        expect(screen.getByText('Seen 5 months ago')).toBeInTheDocument();
+    });
+    it('should show label "Seen more than 6 months ago" when user was last online more than 6 months ago', () => {
+        mock_value = moment('2024-01-02T16:49:38+04:00');
+        (toMoment as jest.Mock).mockReturnValue(mock_value);
+        const newprops = { ...props, last_online_time: 1685446791 };
+        render(<OnlineStatusLabel {...newprops} />);
+
+        expect(screen.getByText('Seen more than 6 months ago')).toBeInTheDocument();
+    });
+    it('should show label "Seen 1 month ago" when user was last online 1 month ago', () => {
+        mock_value = moment('2023-07-02T16:49:38+04:00');
+        (toMoment as jest.Mock).mockReturnValue(mock_value);
+        const newprops = { ...props, last_online_time: 1685446791 };
+        render(<OnlineStatusLabel {...newprops} />);
+
+        expect(screen.getByText('Seen 1 month ago')).toBeInTheDocument();
+    });
+    it('should show label "Seen 1 minute ago" when user was last online 1 minute ago', () => {
+        mock_value = moment('2023-05-30T15:41:38+04:00');
+        (toMoment as jest.Mock).mockReturnValue(mock_value);
+        const newprops = { ...props, last_online_time: 1685446791 };
+        render(<OnlineStatusLabel {...newprops} />);
+
+        expect(screen.getByText('Seen 1 minute ago')).toBeInTheDocument();
+    });
+    it('should show label "Seen 2 minutes ago" when last seen is in minutes', () => {
+        mock_value = moment('2023-05-30T15:42:38+04:00');
+        (toMoment as jest.Mock).mockReturnValue(mock_value);
+        const newprops = { ...props, last_online_time: 1685446791 };
+        render(<OnlineStatusLabel {...newprops} />);
+
+        expect(screen.getByText('Seen 2 minutes ago')).toBeInTheDocument();
+    });
+});

packages/p2p/src/components/online-status/index.js → packages/p2p/src/components/online-status/index.ts

@@ -1,5 +1,6 @@
 import OnlineStatusIcon from './online-status-icon';
 import OnlineStatusLabel from './online-status-label';
 import OnlineStatusAvatar from './online-status-avatar';
+import './online-status.scss';
 
 export { OnlineStatusAvatar, OnlineStatusIcon, OnlineStatusLabel };

packages/p2p/src/components/online-status/online-status-avatar.jsx → packages/p2p/src/components/online-status/online-status-avatar.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
-import { Text } from '@deriv/components';
-import PropTypes from 'prop-types';
 import { observer } from 'mobx-react-lite';
+import { Text } from '@deriv/components';
 import { generateHexColourFromNickname, getShortNickname } from 'Utils/string';
 import OnlineStatusIcon from './online-status-icon';
-import './online-status-avatar.scss';
 
-const OnlineStatusAvatar = ({ is_online, nickname, size, text_size }) => {
+type TOnlineStatusAvatarProps = {
+    is_online: number | boolean;
+    nickname: string;
+    size: number;
+    text_size: string;
+};
+
+const OnlineStatusAvatar = ({ is_online, nickname, size, text_size }: TOnlineStatusAvatarProps) => {
     return (
-        <div className='online-status-avatar'>
-            <Text className='online-status-avatar__text' color='colored-background' size={text_size}>
+        <div className='online-status__avatar'>
+            <Text className='online-status__avatar__text' color='colored-background' size={text_size}>
                 {getShortNickname(nickname)}
             </Text>
 
@@ -32,11 +37,4 @@ const OnlineStatusAvatar = ({ is_online, nickname, size, text_size }) => {
     );
 };
 
-OnlineStatusAvatar.propTypes = {
-    is_online: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]).isRequired,
-    nickname: PropTypes.string.isRequired,
-    size: PropTypes.number,
-    text_size: PropTypes.string.isRequired,
-};
-
 export default observer(OnlineStatusAvatar);

packages/p2p/src/components/online-status/online-status-icon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import classNames from 'classnames';
+import { observer } from 'mobx-react-lite';
+
+type TOnlineStatusIconProps = {
+    is_online: number | boolean;
+    size?: string | number;
+};
+
+const OnlineStatusIcon = ({ is_online, size = '1em' }: TOnlineStatusIconProps) => {
+    return (
+        <div
+            data-testid='dt_online_status_icon'
+            className={classNames('online-status__icon', {
+                'online-status__icon--offline': !is_online,
+                'online-status__icon--online': !!is_online,
+            })}
+            style={{
+                width: size,
+                height: size,
+            }}
+        />
+    );
+};
+
+export default observer(OnlineStatusIcon);

packages/p2p/src/components/online-status/online-status-label.jsx → packages/p2p/src/components/online-status/online-status-label.tsx

@@ -1,11 +1,20 @@
 import React from 'react';
+import { observer } from 'mobx-react-lite';
 import { Text } from '@deriv/components';
 import { getDiffDuration, isMobile, toMoment, epochToMoment } from '@deriv/shared';
 import { localize } from 'Components/i18next';
-import { observer } from 'mobx-react-lite';
-import PropTypes from 'prop-types';
 
-const OnlineStatusLabel = ({ is_online, last_online_time, size = isMobile() ? 'xxxs' : 'xs' }) => {
+type TOnlineStatusLabelProps = {
+    is_online: number;
+    last_online_time: number;
+    size?: string;
+};
+
+const OnlineStatusLabel = ({
+    is_online,
+    last_online_time,
+    size = isMobile() ? 'xxxs' : 'xs',
+}: TOnlineStatusLabelProps) => {
     const last_online_label = () => {
         if (!is_online) {
             if (last_online_time) {
@@ -18,7 +27,7 @@ const OnlineStatusLabel = ({ is_online, last_online_time, size = isMobile() ? 'x
                     if (diff.months() > 6) {
                         return localize('Seen more than 6 months ago');
                     }
-                    if (diff.months === 1) {
+                    if (diff.months() === 1) {
                         return localize('Seen {{ duration }} month ago', {
                             duration: diff.months(),
                         });
@@ -71,10 +80,4 @@ const OnlineStatusLabel = ({ is_online, last_online_time, size = isMobile() ? 'x
     );
 };
 
-OnlineStatusLabel.propTypes = {
-    is_online: PropTypes.number.isRequired,
-    last_online_time: PropTypes.number,
-    size: PropTypes.string,
-};
-
 export default observer(OnlineStatusLabel);

packages/p2p/src/components/online-status/online-status.scss

@@ -0,0 +1,43 @@
+.online-status {
+    &__icon {
+        width: 1rem;
+        height: 1rem;
+        margin: auto 0.5rem auto 0;
+        border-radius: 50%;
+
+        @include mobile {
+            width: 0.8rem;
+            height: 0.8rem;
+        }
+
+        &--online {
+            background: var(--text-profit-success);
+        }
+
+        &--offline {
+            background: var(--checkbox-disabled-grey);
+        }
+    }
+
+    &__avatar {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: fit-content;
+        height: fit-content;
+
+        &__text {
+            position: absolute;
+        }
+
+        & .online-status__icon {
+            position: absolute;
+            bottom: -0.1px;
+            right: -0.1px;
+            margin: 0;
+            border-radius: 50%;
+            transform: scale(1.1);
+        }
+    }
+}