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 ? (