diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page-stats.jsx b/packages/p2p/src/components/advertiser-page/advertiser-page-stats.jsx index 6c1a1279d049..d85ae4962eb2 100644 --- a/packages/p2p/src/components/advertiser-page/advertiser-page-stats.jsx +++ b/packages/p2p/src/components/advertiser-page/advertiser-page-stats.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Table, Text } from '@deriv/components'; +import { Money, Table, Text } from '@deriv/components'; import { isMobile } from '@deriv/shared'; import { observer } from 'mobx-react-lite'; import { localize, Localize } from 'Components/i18next'; @@ -8,17 +8,17 @@ import { useStores } from 'Stores'; import './advertiser-page.scss'; const AdvertiserPageStats = () => { - const { advertiser_page_store } = useStores(); + const { advertiser_page_store, general_store } = useStores(); const { buy_completion_rate, buy_orders_count, buy_time_avg, - completed_orders_count, partner_count, release_time_avg, sell_completion_rate, sell_orders_count, + total_turnover, } = advertiser_page_store.advertiser_info; const avg_buy_time_in_minutes = buy_time_avg > 60 ? Math.round(buy_time_avg / 60) : '< 1'; @@ -44,7 +44,7 @@ const AdvertiserPageStats = () => { /> - {buy_completion_rate ? `${buy_completion_rate} (${buy_orders_count})` : '-'} + {buy_completion_rate ? `${buy_completion_rate}% (${buy_orders_count})` : '-'}
@@ -63,7 +63,7 @@ const AdvertiserPageStats = () => { /> - {sell_completion_rate ? `${sell_completion_rate} (${sell_orders_count})` : '-'} + {sell_completion_rate ? `${sell_completion_rate}% (${sell_orders_count})` : '-'} @@ -85,7 +85,15 @@ const AdvertiserPageStats = () => { /> - {completed_orders_count || '0'} + {total_turnover ? ( + + ) : ( + '-' + )}
@@ -170,8 +178,8 @@ const AdvertiserPageStats = () => { ]} /> - - {buy_completion_rate ? `${buy_completion_rate} (${buy_orders_count})` : '-'} + + {buy_completion_rate ? `${buy_completion_rate}% (${buy_orders_count})` : '-'}
@@ -189,8 +197,8 @@ const AdvertiserPageStats = () => { ]} /> - - {sell_completion_rate ? `${sell_completion_rate} (${sell_orders_count})` : '-'} + + {sell_completion_rate ? `${sell_completion_rate}% (${sell_orders_count})` : '-'}
@@ -208,13 +216,17 @@ const AdvertiserPageStats = () => { ]} /> - - {completed_orders_count || '0'} + + {total_turnover ? ( + + ) : ( + '-' + )} - +
@@ -230,7 +242,7 @@ const AdvertiserPageStats = () => { ]} /> - + {release_time_avg ? localize('{{- avg_buy_time_in_minutes}} min', { avg_buy_time_in_minutes, @@ -253,7 +265,7 @@ const AdvertiserPageStats = () => { ]} /> - + {release_time_avg ? localize('{{- avg_release_time_in_minutes}} min', { avg_release_time_in_minutes, @@ -266,7 +278,7 @@ const AdvertiserPageStats = () => { - + {partner_count || '0'} diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page.jsx b/packages/p2p/src/components/advertiser-page/advertiser-page.jsx index 67eeede73c02..3c30ed0aa6bf 100644 --- a/packages/p2p/src/components/advertiser-page/advertiser-page.jsx +++ b/packages/p2p/src/components/advertiser-page/advertiser-page.jsx @@ -47,35 +47,39 @@ const AdvertiserPage = () => { setShouldShowPopup={advertiser_page_store.setShowAdPopup} table_type={advertiser_page_store.counterparty_type === buy_sell.BUY ? buy_sell.BUY : buy_sell.SELL} /> -
- -
-
- - {advertiser_page_store.advertiser_details_name} - - {first_name && last_name && ( -
- - {`(${first_name} ${last_name})`} - -
- )} -
- +
+ +
+
+ + {advertiser_page_store.advertiser_details_name} + + {first_name && last_name && ( +
+ + {`(${first_name} ${last_name})`} + +
+ )} +
+
+ +
+
-
- + +
); diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page.scss b/packages/p2p/src/components/advertiser-page/advertiser-page.scss index 782a42db8798..2614b01e09fd 100644 --- a/packages/p2p/src/components/advertiser-page/advertiser-page.scss +++ b/packages/p2p/src/components/advertiser-page/advertiser-page.scss @@ -27,14 +27,12 @@ } &-name { - align-self: center; display: flex; flex-direction: row; height: fit-content; width: fit-content; &--column { - align-self: center; display: flex; flex-direction: column; padding-left: 0.8rem; @@ -94,7 +92,7 @@ grid-template-columns: repeat(3, 1fr); height: 5rem; justify-content: space-between; - margin: 2rem; + margin: 2rem 0; width: 100%; @include mobile { @@ -105,8 +103,9 @@ &-cell { display: grid; - min-width: 65px; + min-width: 20rem; text-align: center; + margin-right: 10rem; @include mobile { min-width: 12rem; @@ -133,6 +132,7 @@ &-separator { border-right: 1px solid #ededed; + margin-right: 2rem; } } @@ -276,6 +276,14 @@ } } + &-details { + &-container { + padding: 2.4rem; + border: 1px solid var(--general-hover); + border-radius: 0.8rem; + } + } + &-empty { height: 100%; margin-top: 4rem;