Adrienne / Show online-offline status in buy-sell page (binary-com#6914)

* Added online status to advertiser page

* Removed unused css

* added more padding in rating row

* Fixed styling issues

* Added avatar component for online status and refactored my profile page

* Fixed issue where the avatar is not visible on Firefox

* reverted icons.js

* Removed orders-chat implementation

* Restored icons.js

* Refactoring

* Refactored code

* Refactored online status label

* Update online-status.scss

* Update online-status-label.jsx

* Update online-status-label.jsx

packages/p2p/src/components/buy-sell/buy-sell-row.jsx

@@ -6,7 +6,7 @@ import { isMobile } from '@deriv/shared';
 import { observer } from 'mobx-react-lite';
 import { buy_sell } from 'Constants/buy-sell';
 import { Localize, localize } from 'Components/i18next';
-import UserAvatar from 'Components/user/user-avatar';
+import { OnlineStatusAvatar } from 'Components/online-status';
 import { useStores } from 'Stores';
 import StarRating from 'Components/star-rating';
 import TradeBadge from 'Components/trade-badge';
@@ -72,7 +72,12 @@ const BuySellRow = ({ row: advert }) => {
                             : buy_sell_store.showAdvertiserPage(advert)
                     }
                 >
-                    <UserAvatar nickname={advertiser_name} size={32} text_size='s' />
+                    <OnlineStatusAvatar
+                        is_online={advertiser_details.is_online}
+                        nickname={advertiser_name}
+                        size={32}
+                        text_size='s'
+                    />
                     <div className='buy-sell-row__advertiser-name'>
                         <div className='buy-sell__cell--container__row'>
                             <Text
@@ -174,7 +179,12 @@ const BuySellRow = ({ row: advert }) => {
                             : buy_sell_store.showAdvertiserPage(advert)
                     }
                 >
-                    <UserAvatar nickname={advertiser_name} size={24} text_size='xxs' />
+                    <OnlineStatusAvatar
+                        is_online={advertiser_details.is_online}
+                        nickname={advertiser_name}
+                        size={24}
+                        text_size='xxs'
+                    />
                     <div className='buy-sell__cell--container'>
                         <div className='buy-sell__cell--container__row'>
                             <div

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

@@ -0,0 +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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Text } from '@deriv/components';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react-lite';
+import { generateHexColourFromNickname, getShortNickname } from 'Utils/string';
+import OnlineStatusIcon from './online-status-icon';
+import './online-status.scss';
+
+const OnlineStatusAvatar = ({ is_online, nickname, size, text_size }) => {
+    return (
+        <div className='online-status__avatar'>
+            <Text className='online-status__avatar-text' color='colored-background' line_height='m' size={text_size}>
+                {getShortNickname(nickname)}
+            </Text>
+
+            <OnlineStatusIcon is_online={is_online} size='26%' />
+            <svg viewBox={`0 0 ${size * 2} ${size * 2}`} width={size} height={size}>
+                <mask id='circle'>
+                    <circle fill='white' cx={size} cy={size} r={size} />
+                    <circle fill='black' cx='86%' cy='86%' r={size * 0.37} />
+                </mask>
+                <rect
+                    fill={generateHexColourFromNickname(nickname)}
+                    style={{
+                        width: '100%',
+                        height: '100%',
+                    }}
+                    mask='url(#circle)'
+                 />
+            </svg>
+        </div>
+    );
+};
+
+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.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react-lite';
+
+const OnlineStatusIcon = ({ is_online, size = '1em' }) => {
+    return (
+        <div
+            className={classNames('online-status__icon', {
+                'online-status__icon--offline': !is_online,
+                'online-status__icon--online': !!is_online,
+            })}
+            style={{
+                width: size,
+                height: size,
+            }}
+        />
+    );
+};
+
+OnlineStatusIcon.propTypes = {
+    is_online: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]).isRequired,
+    size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};
+
+export default observer(OnlineStatusIcon);

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

@@ -0,0 +1,58 @@
+import React from 'react';
+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' }) => {
+    const last_online_label = () => {
+        if (!is_online) {
+            if (last_online_time) {
+                const start_time = epochToMoment(last_online_time).unix();
+                const end_time = toMoment().unix();
+
+                const diff = getDiffDuration(start_time, end_time);
+                const addPrural = duration => (duration !== 1 ? 's' : '');
+
+                if (diff.months())
+                    return localize('Seen {{ duration }} month{{ prural }} ago', {
+                        duration: diff.months(),
+                        prural: addPrural(diff.months()),
+                    });
+                if (diff.days())
+                    return localize('Seen {{ duration }} day{{ prural }} ago', {
+                        duration: diff.days(),
+                        prural: addPrural(diff.days()),
+                    });
+                if (diff.hours())
+                    return localize('Seen {{ duration }} hour{{ prural }} ago', {
+                        duration: diff.hours(),
+                        prural: addPrural(diff.hours()),
+                    });
+                if (diff.minutes())
+                    return localize('Seen {{ duration }} minute{{ prural }} ago', {
+                        duration: diff.minutes(),
+                        prural: addPrural(diff.minutes()),
+                    });
+            } else {
+                return localize('Seen more than 6 months ago');
+            }
+        }
+        return localize('Online');
+    };
+
+    return (
+        <Text color='less-prominent' size={size}>
+            {last_online_label()}
+        </Text>
+    );
+};
+
+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,42 @@
+.online-status {
+    &__icon {
+        width: 1rem;
+        height: 1rem;
+        margin: auto 0.5rem auto 0rem;
+        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);
+        }
+    }
+}