diff --git a/packages/components/src/components/icon/common/ic-menu-dots.svg b/packages/components/src/components/icon/common/ic-menu-dots.svg
new file mode 100644
index 000000000000..36f7407a70fc
--- /dev/null
+++ b/packages/components/src/components/icon/common/ic-menu-dots.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js
index 3077ecd22fb1..1e2c1b70eb89 100644
--- a/packages/components/src/components/icon/icons.js
+++ b/packages/components/src/components/icon/icons.js
@@ -283,6 +283,7 @@ import './common/ic-lookbacks.svg';
import './common/ic-loss.svg';
import './common/ic-macos-logo.svg';
import './common/ic-macos.svg';
+import './common/ic-menu-dots.svg';
import './common/ic-message-delivered.svg';
import './common/ic-message-errored.svg';
import './common/ic-message-pending.svg';
diff --git a/packages/components/stories/icon/icons.js b/packages/components/stories/icon/icons.js
index 13efaa9f02f2..9596b32341e1 100644
--- a/packages/components/stories/icon/icons.js
+++ b/packages/components/stories/icon/icons.js
@@ -13,7 +13,7 @@ export const icons =
'IcBrandDmt5',
'IcBrandDtrader',
'IcBrandDxtrade',
- 'IcBrandSmarttrader',
+ 'IcBrandSmarttrader'
],
'cashier': [
'IcCashierAdd',
@@ -141,7 +141,7 @@ export const icons =
'IcCashierXanpoolLight',
'IcCashierXanpoolSmallDark',
'IcCashierXanpoolSmallLight',
- 'IcCashier',
+ 'IcCashier'
],
'common': [
'IcAccountError',
@@ -290,6 +290,7 @@ export const icons =
'IcLoss',
'IcMacosLogo',
'IcMacos',
+ 'IcMenuDots',
'IcMessageDelivered',
'IcMessageErrored',
'IcMessagePending',
@@ -394,7 +395,7 @@ export const icons =
'IcWindows',
'IcWip',
'IcZoomIn',
- 'IcZoomOut',
+ 'IcZoomOut'
],
'contract': [
'IcContractBarrier',
@@ -410,7 +411,7 @@ export const icons =
'IcContractSafeguard',
'IcContractStartTimeCircle',
'IcContractStartTime',
- 'IcContractTarget',
+ 'IcContractTarget'
],
'currency': [
'IcCurrencyAud',
@@ -432,7 +433,7 @@ export const icons =
'IcCurrencyUsdc',
'IcCurrencyUsdk',
'IcCurrencyUst',
- 'IcCurrencyVirtual',
+ 'IcCurrencyVirtual'
],
'dxtrade': [
'IcDxtradeDeviceDesktopLight',
@@ -447,7 +448,7 @@ export const icons =
'IcDxtradeFinancial',
'IcDxtradeOnePassword',
'IcDxtradeSyntheticPlatform',
- 'IcDxtradeSynthetic',
+ 'IcDxtradeSynthetic'
],
'flag': [
'IcFlagDe',
@@ -463,7 +464,7 @@ export const icons =
'IcFlagUk',
'IcFlagVi',
'IcFlagZhCn',
- 'IcFlagZhTw',
+ 'IcFlagZhTw'
],
'mt5': [
'IcMt5CfdPlatform',
@@ -490,7 +491,7 @@ export const icons =
'IcMt5SyntheticIndices',
'IcMt5SyntheticPlatform',
'IcMt5Synthetic',
- 'IcMt5TradeTypes',
+ 'IcMt5TradeTypes'
],
'option': [
'IcOptionCallPutReset',
@@ -508,7 +509,7 @@ export const icons =
'IcOptionRaiseFall',
'IcOptionStayinGoesout',
'IcOptionTouchNotouch',
- 'IcOptionUpDownAsian',
+ 'IcOptionUpDownAsian'
],
'stock': [
'IcStockAdidasSalomon',
@@ -558,7 +559,7 @@ export const icons =
'IcStockVisa',
'IcStockWallMart',
'IcStockWaltDisney',
- 'IcStockZoom',
+ 'IcStockZoom'
],
'tradetype': [
'IcTradetypeAsiand',
@@ -593,7 +594,7 @@ export const icons =
'IcTradetypeRunlow',
'IcTradetypeTickhigh',
'IcTradetypeTicklow',
- 'IcTradetypeUpordown',
+ 'IcTradetypeUpordown'
],
'underlying': [
'IcUnderlying1HZ100V',
@@ -750,7 +751,7 @@ export const icons =
'IcUnderlyingWLDEUR',
'IcUnderlyingWLDGBP',
'IcUnderlyingWLDUSD',
- 'IcUnderlyingWLDXAU',
+ 'IcUnderlyingWLDXAU'
],
'wallet': [
'IcWalletClearFunds',
@@ -786,6 +787,6 @@ export const icons =
'IcWalletWebmoneyLight',
'IcWalletWebmoney',
'IcWalletZingpayDark',
- 'IcWalletZingpayLight',
- ],
-}
+ 'IcWalletZingpayLight'
+ ]
+}
\ No newline at end of file
diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page-dropdown-menu.jsx b/packages/p2p/src/components/advertiser-page/advertiser-page-dropdown-menu.jsx
new file mode 100644
index 000000000000..e978b95ca58a
--- /dev/null
+++ b/packages/p2p/src/components/advertiser-page/advertiser-page-dropdown-menu.jsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import PropTypes from 'prop-types';
+import { Dropdown, Icon, Text } from '@deriv/components';
+import { Localize } from 'Components/i18next';
+import { useStores } from 'Stores';
+import { useOnClickOutside } from '../../../../components/src/hooks';
+import './advertiser-page.scss';
+
+const AdvertiserPageDropdownMenu = ({ is_my_advert }) => {
+ const dropdown_menu_ref = React.useRef();
+ const { advertiser_page_store } = useStores();
+
+ const onClickOutside = () => {
+ advertiser_page_store.setIsDropdownMenuVisible(false);
+ };
+
+ useOnClickOutside(dropdown_menu_ref, onClickOutside, () => advertiser_page_store.is_dropdown_menu_visible);
+
+ return (
+ !advertiser_page_store.is_counterparty_advertiser_blocked && (
+
+
+ advertiser_page_store.setIsDropdownMenuVisible(!advertiser_page_store.is_dropdown_menu_visible)
+ }
+ size={16}
+ />
+ {advertiser_page_store.is_dropdown_menu_visible && (
+
+
+
+
+ }
+ />
+
+ )}
+
+ )
+ );
+};
+
+export default observer(AdvertiserPageDropdownMenu);
+
+AdvertiserPageDropdownMenu.propTypes = {
+ is_my_advert: PropTypes.bool,
+};
diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page.jsx b/packages/p2p/src/components/advertiser-page/advertiser-page.jsx
index fcf2244f707b..7934fd81468c 100644
--- a/packages/p2p/src/components/advertiser-page/advertiser-page.jsx
+++ b/packages/p2p/src/components/advertiser-page/advertiser-page.jsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Loading, Text } from '@deriv/components';
+import { DesktopWrapper, Loading, MobileWrapper, Text } from '@deriv/components';
import { daysSince, isMobile } from '@deriv/shared';
import { reaction } from 'mobx';
import { observer } from 'mobx-react-lite';
@@ -13,6 +13,7 @@ import UserAvatar from 'Components/user/user-avatar/user-avatar.jsx';
import { useStores } from 'Stores';
import AdvertiserPageStats from './advertiser-page-stats.jsx';
import AdvertiserPageAdverts from './advertiser-page-adverts.jsx';
+import AdvertiserPageDropdownMenu from './advertiser-page-dropdown-menu.jsx';
import TradeBadge from '../trade-badge/trade-badge.jsx';
import BlockUserOverlay from './block-user/block-user-overlay';
import BlockUserModal from 'Components/block-user/block-user-modal';
@@ -28,13 +29,17 @@ const AdvertiserPage = () => {
created_time,
first_name,
full_verification,
+ id,
last_name,
+ name,
sell_orders_count,
} = advertiser_page_store.advertiser_info;
const joined_since = daysSince(created_time);
+ const is_my_advert = id === general_store.advertiser_id;
React.useEffect(() => {
advertiser_page_store.onMount();
+ advertiser_page_store.setIsDropdownMenuVisible(false);
return reaction(
() => advertiser_page_store.active_index,
@@ -61,15 +66,11 @@ const AdvertiserPage = () => {
>
general_store.setIsBlockUserModalOpen(false)}
- onSubmit={() =>
- general_store.blockUnblockUser(
- !advertiser_page_store.is_counterparty_advertiser_blocked,
- advertiser_page_store.advertiser_details_id
- )
- }
+ onCancel={advertiser_page_store.onCancel}
+ onSubmit={advertiser_page_store.onSubmit}
/>
{
setShouldShowPopup={advertiser_page_store.setShowAdPopup}
table_type={advertiser_page_store.counterparty_type === buy_sell.BUY ? buy_sell.BUY : buy_sell.SELL}
/>
-
+
general_store.setIsBlockUserModalOpen(true)}
@@ -125,6 +131,9 @@ const AdvertiserPage = () => {
/>
+
+
+
diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page.scss b/packages/p2p/src/components/advertiser-page/advertiser-page.scss
index 3f991c5372f2..a61dd334b6c3 100644
--- a/packages/p2p/src/components/advertiser-page/advertiser-page.scss
+++ b/packages/p2p/src/components/advertiser-page/advertiser-page.scss
@@ -3,6 +3,71 @@
display: flex;
flex-direction: column;
+ &__dropdown {
+ box-shadow: 0 1rem 2rem var(--shadow-menu);
+ border-radius: $BORDER_RADIUS;
+ cursor: pointer;
+ position: absolute;
+ right: 0;
+ z-index: 2;
+
+ .dc-dropdown__display {
+ background-color: var(--general-main-2);
+ border: 1px solid var(--general-active);
+
+ span {
+ background-color: var(--general-main-2);
+ }
+
+ &-placeholder {
+ top: auto;
+ }
+ }
+
+ &-container {
+ margin-top: 0;
+
+ &--disabled {
+ margin-top: 0;
+
+ span {
+ color: var(--text-disabled) !important;
+ }
+ }
+ }
+
+ &:hover {
+ .dc-dropdown__display {
+ background-color: var(--border-normal);
+ border: 1px solid var(--border-normal);
+
+ span {
+ background-color: var(--border-normal);
+ }
+ }
+ }
+ }
+
+ &__menu-dots-icon {
+ cursor: pointer;
+ margin-bottom: 0.8rem;
+ }
+
+ &__menu-dots-toggle {
+ position: absolute;
+ right: 2.4rem;
+
+ @include mobile {
+ bottom: 0.8rem;
+ right: 1.2rem;
+ }
+ }
+
+ &__page-return-header {
+ display: flex;
+ position: relative;
+ }
+
&--no-scroll {
overflow: hidden;
}
diff --git a/packages/p2p/src/components/advertiser-page/block-user/block-user-count.jsx b/packages/p2p/src/components/advertiser-page/block-user/block-user-count.jsx
index 3727d5e45326..0600303ec29b 100644
--- a/packages/p2p/src/components/advertiser-page/block-user/block-user-count.jsx
+++ b/packages/p2p/src/components/advertiser-page/block-user/block-user-count.jsx
@@ -12,10 +12,14 @@ const BlockUserCount = () => {
const [is_block_user_count_modal_open, setIsBlockUserCountModalOpen] = React.useState(false);
- const message =
- blocked_by_count === 0
- ? localize('Nobody has blocked you. Yay!')
- : localize('{{blocked_by_count}} people have blocked you.', { blocked_by_count });
+ const getMessage = () => {
+ if (blocked_by_count === 0) {
+ return localize('Nobody has blocked you. Yay!');
+ } else if (blocked_by_count === 1) {
+ return localize('{{blocked_by_count}} person has blocked you', { blocked_by_count });
+ }
+ return localize('{{blocked_by_count}} people have blocked you', { blocked_by_count });
+ };
React.useEffect(() => {
my_profile_store.getAdvertiserInfo();
@@ -29,7 +33,7 @@ const BlockUserCount = () => {
- {message}
+ {getMessage()}
@@ -50,7 +54,7 @@ const BlockUserCount = () => {
alignment='top'
className='block-user-count'
classNameTarget='block-user-count__container'
- message={message}
+ message={getMessage()}
>
diff --git a/packages/p2p/src/components/advertiser-page/block-user/block-user-overlay/block-user-overlay.scss b/packages/p2p/src/components/advertiser-page/block-user/block-user-overlay/block-user-overlay.scss
index 90694358b213..c10035ac605d 100644
--- a/packages/p2p/src/components/advertiser-page/block-user/block-user-overlay/block-user-overlay.scss
+++ b/packages/p2p/src/components/advertiser-page/block-user/block-user-overlay/block-user-overlay.scss
@@ -16,7 +16,7 @@
top: 0;
left: 0;
width: 94rem;
- z-index: 9999;
+ z-index: 1;
@include mobile {
border: none;
diff --git a/packages/p2p/src/components/block-user/block-user-modal/block-user-modal.jsx b/packages/p2p/src/components/block-user/block-user-modal/block-user-modal.jsx
index ecf525f9b989..bb6949e6def7 100644
--- a/packages/p2p/src/components/block-user/block-user-modal/block-user-modal.jsx
+++ b/packages/p2p/src/components/block-user/block-user-modal/block-user-modal.jsx
@@ -7,6 +7,7 @@ import { Localize } from 'Components/i18next';
const BlockUserModal = ({ advertiser_name, is_advertiser_blocked, is_block_user_modal_open, onCancel, onSubmit }) => {
return (
}
>
-
+
{is_advertiser_blocked ? (