Skip to content

Commit

Permalink
Adrienne / Show online offline status in advertiser page (binary-com#…
Browse files Browse the repository at this point in the history 
…6913)

* remove p2p_advertiser_info call from buy-sell-store

* remove p2p_advertiser_info call from my-profile-store

* remove p2p_advertiser_info call from my-ads-store

* remove available balance hook

* remove p2p_advertiser_info call from order-store

* make p2p_advertiser_info in advertiser_page_store a subscription

* cleanup

* Added online status to advertiser page

* Removed unused css

* remove unnecessary action.bound

* added more padding in rating row

* fix: review comments

* cleanup advertiser page store

* cleanup buy-sell- store

* cleanup my-ads-store

* cleanup my-profile-store

* cleanup order-store

* Fixed styling issues

* fix subtask

* fix subtask

* updated changes

* Refactored code with subs

* Refactored code with subs

* Reverted icons.js

* Refactored icons.js

* Refactored code based on reviews

* Refactored code based on reviews

* Refactored online status label

* Refactored code

* Refactored code

* Fixed CircleCI issue

* Refactored code

* Used advertiser details id to check if its my advert

* used moment shared functions

* Refactored label

* Update online-status-label.jsx

* Update online-status-label.jsx

* docs: add comment

* Added checks for years and months greater than 6

* Fixed typo

Co-authored-by: Carol Sachdeva <carol@binary.com>
Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>
  • Loading branch information
@adrienne-deriv @carolsachdeva @vinu-deriv
3 people authored and vinu-deriv committed Nov 24, 2022
1 parent 74b431f commit d01e599
Show file tree
Hide file tree
Showing 5 changed files with 120 additions and 76 deletions.
5 changes: 4 additions & 1 deletion packages/p2p/src/components/advertiser-page/advertiser-page-stats.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ import './advertiser-page.scss';
const AdvertiserPageStats = () => {
const { advertiser_page_store, general_store } = useStores();

const is_my_advert = advertiser_page_store.advertiser_details_id === general_store.advertiser_id;
// Use general_store.advertiser_info since resubscribing to the same id from advertiser page returns error
const info = is_my_advert ? general_store.advertiser_info : advertiser_page_store.counterparty_advertiser_info;
const {
buy_completion_rate,
buy_orders_amount,
Expand All @@ -19,7 +22,7 @@ const AdvertiserPageStats = () => {
sell_completion_rate,
sell_orders_amount,
sell_orders_count,
} = advertiser_page_store.counterparty_advertiser_info;
} = info;

const avg_buy_time_in_minutes = buy_time_avg > 60 ? Math.round(buy_time_avg / 60) : '< 1';
const avg_release_time_in_minutes = release_time_avg > 60 ? Math.round(release_time_avg / 60) : '< 1';
Expand Down
100 changes: 64 additions & 36 deletions packages/p2p/src/components/advertiser-page/advertiser-page.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,31 +20,35 @@ import BlockUserOverlay from './block-user/block-user-overlay';
import BlockUserModal from 'Components/block-user/block-user-modal';
import ErrorModal from 'Components/error-modal/error-modal';
import classNames from 'classnames';
import { OnlineStatusIcon, OnlineStatusLabel } from 'Components/online-status';
import './advertiser-page.scss';

const AdvertiserPage = () => {
const { general_store, advertiser_page_store, buy_sell_store } = useStores();

const is_my_advert = advertiser_page_store.advertiser_details_id === general_store.advertiser_id;
// Use general_store.advertiser_info since resubscribing to the same id from advertiser page returns error
const info = is_my_advert ? general_store.advertiser_info : advertiser_page_store.counterparty_advertiser_info;
const {
basic_verification,
buy_orders_count,
created_time,
first_name,
full_verification,
id,
is_online,
last_online_time,
last_name,
name,
rating_average,
rating_count,
recommended_average,
recommended_count,
sell_orders_count,
} = advertiser_page_store.counterparty_advertiser_info;
} = info;

// rating_average_decimal converts rating_average to 1 d.p number
const rating_average_decimal = rating_average ? Number(rating_average).toFixed(1) : null;
const joined_since = daysSince(created_time);
const is_my_advert = id === general_store.advertiser_id;
const [is_error_modal_open, setIsErrorModalOpen] = React.useState(false);

React.useEffect(() => {
Expand Down Expand Up @@ -78,7 +82,8 @@ const AdvertiserPage = () => {
return (
<div
className={classNames('advertiser-page', {
'advertiser-page--no-scroll': !!advertiser_page_store.is_counterparty_advertiser_blocked,
'advertiser-page--no-scroll':
!!advertiser_page_store.is_counterparty_advertiser_blocked && !is_my_advert,
})}
>
<RateChangeModal onMount={advertiser_page_store.setShowAdPopup} />
Expand All @@ -96,7 +101,7 @@ const AdvertiserPage = () => {
/>
<BlockUserModal
advertiser_name={name}
is_advertiser_blocked={!!advertiser_page_store.is_counterparty_advertiser_blocked}
is_advertiser_blocked={!!advertiser_page_store.is_counterparty_advertiser_blocked && !is_my_advert}
is_block_user_modal_open={
general_store.is_block_user_modal_open && !general_store.block_unblock_user_error
}
Expand All @@ -122,7 +127,7 @@ const AdvertiserPage = () => {
)}
</div>
<BlockUserOverlay
is_visible={!!advertiser_page_store.is_counterparty_advertiser_blocked}
is_visible={!!advertiser_page_store.is_counterparty_advertiser_blocked && !is_my_advert}
onClickUnblock={() => general_store.setIsBlockUserModalOpen(true)}
>
<div className='advertiser-page-details-container'>
Expand All @@ -145,7 +150,60 @@ const AdvertiserPage = () => {
</div>
)}
</div>

<MobileWrapper>
<div className='advertiser-page__row'>
<div className='advertiser-page__rating--row'>
<OnlineStatusIcon is_online={is_online} />
<OnlineStatusLabel is_online={is_online} last_online_time={last_online_time} />
</div>
<div className='advertiser-page__rating--row'>
<Text
className='advertiser-page__joined-since'
color='less-prominent'
size='xxxs'
>
{joined_since ? (
<Localize
i18n_default_text='Joined {{days_since_joined}}d'
values={{ days_since_joined: joined_since }}
/>
) : (
<Localize i18n_default_text='Joined today' />
)}
</Text>
</div>
</div>
</MobileWrapper>

<div className='advertiser-page__rating'>
<DesktopWrapper>
<React.Fragment>
<div className='advertiser-page__rating--row'>
<OnlineStatusIcon is_online={is_online} />
<OnlineStatusLabel
is_online={is_online}
last_online_time={last_online_time}
/>
</div>
<div className='advertiser-page__rating--row'>
<Text
className='advertiser-page__joined-since'
color='less-prominent'
size='xs'
>
{joined_since ? (
<Localize
i18n_default_text='Joined {{days_since_joined}}d'
values={{ days_since_joined: joined_since }}
/>
) : (
<Localize i18n_default_text='Joined today' />
)}
</Text>
</div>
</React.Fragment>
</DesktopWrapper>
{rating_average ? (
<React.Fragment>
<div className='advertiser-page__rating--row'>
Expand Down Expand Up @@ -193,37 +251,7 @@ const AdvertiserPage = () => {
</Text>
</div>
)}
{!isMobile() && (
<div className='advertiser-page__rating--row'>
<Text color='less-prominent' size={isMobile() ? 'xxxs' : 'xs'}>
{joined_since > 0 ? (
<Localize
i18n_default_text='Joined {{days_since_joined}}d'
values={{ days_since_joined: joined_since }}
/>
) : (
<Localize i18n_default_text='Joined today' />
)}
</Text>
</div>
)}
</div>
{isMobile() && (
<Text
className='advertiser-page__joined-since'
color='less-prominent'
size={isMobile() ? 'xxxs' : 'xs'}
>
{joined_since > 0 ? (
<Localize
i18n_default_text='Joined {{days_since_joined}}d'
values={{ days_since_joined: joined_since }}
/>
) : (
<Localize i18n_default_text='Joined today' />
)}
</Text>
)}
<div className='advertiser-page__row'>
<TradeBadge
is_poa_verified={!!full_verification}
Expand Down
5 changes: 3 additions & 2 deletions packages/p2p/src/components/advertiser-page/advertiser-page.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@
}

&-real-name {
margin-top: 0.4rem;
margin: 0.4rem 0;
max-width: 500px;
}
&-verification {
Expand Down Expand Up @@ -205,7 +205,8 @@
}

&__joined-since {
margin-bottom: 0.7rem;
margin-bottom: 0.35rem;
margin-top: 0.35rem;
}

&__stats {
Expand Down
63 changes: 35 additions & 28 deletions packages/p2p/src/components/my-profile/my-profile-stats/my-profile-name/my-profile-name.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,41 @@ const MyProfileName = () => {
<Text color='prominent' weight='bold' size='s' line_height='m'>
{general_store.nickname}
</Text>
<MobileWrapper>
<div className='my-profile-name__row'>
<Text
className='my-profile-name--rating__row'
color='less-prominent'
size={isMobile() ? 'xxxs' : 'xs'}
>
{joined_since ? (
<Localize
i18n_default_text='Joined {{days_since_joined}}d'
values={{ days_since_joined: joined_since }}
/>
) : (
<Localize i18n_default_text='Joined today' />
)}
</Text>
</div>
</MobileWrapper>
<div className='my-profile-name--rating'>
<DesktopWrapper>
<Text
className='my-profile-name--rating__row'
color='less-prominent'
size={isMobile() ? 'xxxs' : 'xs'}
>
{joined_since ? (
<Localize
i18n_default_text='Joined {{days_since_joined}}d'
values={{ days_since_joined: joined_since }}
/>
) : (
<Localize i18n_default_text='Joined today' />
)}
</Text>
</DesktopWrapper>
{rating_average ? (
<React.Fragment>
<div className='my-profile-name--rating__row'>
Expand Down Expand Up @@ -94,41 +128,14 @@ const MyProfileName = () => {
<div className='my-profile-name--rating__row'>
<BlockUserCount />
</div>
<Text
className='my-profile-name--rating__row'
color='less-prominent'
size={isMobile() ? 'xxxs' : 'xs'}
>
{joined_since > 0 ? (
<Localize
i18n_default_text='Joined {{days_since_joined}}d'
values={{ days_since_joined: joined_since }}
/>
) : (
<Localize i18n_default_text='Joined today' />
)}
</Text>
</DesktopWrapper>
</div>

<MobileWrapper>
<div className='my-profile-name__row'>
<div className='my-profile-name--rating__row'>
<BlockUserCount />
</div>
<Text
className='my-profile-name--rating__row'
color='less-prominent'
size={isMobile() ? 'xxxs' : 'xs'}
>
{joined_since > 0 ? (
<Localize
i18n_default_text='Joined {{days_since_joined}}d'
values={{ days_since_joined: joined_since }}
/>
) : (
<Localize i18n_default_text='Joined today' />
)}
</Text>
</div>
</MobileWrapper>
<div className='my-profile-name__row'>
Expand Down
23 changes: 14 additions & 9 deletions packages/p2p/src/components/online-status/online-status-label.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,27 +13,32 @@ const OnlineStatusLabel = ({ is_online, last_online_time, size = isMobile() ? 'x
const end_time = toMoment().unix();

const diff = getDiffDuration(start_time, end_time);
const addPrural = duration => (duration !== 1 ? 's' : '');
const addPlural = duration => (duration !== 1 ? 's' : '');

if (diff.months())
if (diff.years()) return localize('Seen more than 6 months ago');
if (diff.months()) {
if (diff.months() > 6) {
return localize('Seen more than 6 months ago');
}
return localize('Seen {{ duration }} month{{ prural }} ago', {
duration: diff.months(),
prural: addPrural(diff.months()),
prural: addPlural(diff.months()),
});
}
if (diff.days())
return localize('Seen {{ duration }} day{{ prural }} ago', {
return localize('Seen {{ duration }} day{{ plural }} ago', {
duration: diff.days(),
prural: addPrural(diff.days()),
plural: addPlural(diff.days()),
});
if (diff.hours())
return localize('Seen {{ duration }} hour{{ prural }} ago', {
return localize('Seen {{ duration }} hour{{ plural }} ago', {
duration: diff.hours(),
prural: addPrural(diff.hours()),
plural: addPlural(diff.hours()),
});
if (diff.minutes())
return localize('Seen {{ duration }} minute{{ prural }} ago', {
return localize('Seen {{ duration }} minute{{ plural }} ago', {
duration: diff.minutes(),
prural: addPrural(diff.minutes()),
plural: addPlural(diff.minutes()),
});
} else {
return localize('Seen more than 6 months ago');
Expand Down

0 comments on commit d01e599

Please sign in to comment.