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;