P2P / Feature - Blocked advertiser (#6006)

* create feature branch

* Ameerul /Task 65488 Reusable modal to block advertiser (#5589)

* changed the margin-top for mobile view for buy-sell

* merging upstream master

* merge with local

* added new component (modal) for blocking/unblocking users and added a new observable in advertiser-page-store to view modal

* ammended observable bool value to false and made props required for the modal

* changed the ternary for each localized text to accomadate translations

* added minor changes

* changed the localize tags in button

* fixed isRequired

* removed observable is_block_user_modal_open, pass as prop to BlockUserModal instead

* Update branch (#5680)

* fixed translation for amount field in account transfer form cashier (#5605)

Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>

* farrah/updated deposit store test coverage (#5430)

* updated deposit store test coverage

* added a check for updateAccountStatus

Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>

* likhith/Fix validation message for payment methods (#5187)

* Added appropriate error message

* Fixed error messages in Edit form

* Added validation for SWIFT

* Added a hook to validate methods

* Removed commented code

* Refactored the code by moving the custom hook to hooks folder

* Minor bug fixes

* refactor: Renamed a variable

* fix: added regex to allow more characters as valid

* fix: implemented button disabled

* fix: changed the edit payment method

* fix: added payment error message overlapping issue

Co-authored-by: Likhith Kolayari <likhith@deriv.com>
Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>

* Amina/poi_limited_test_case (#5642)

* poi_limited_test_case

* poi_limited_test_case

Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>

* yauheni / IdvRejected test coverage (#5637)

Co-authored-by: “yauheni-kryzhyk-deriv” <“yauheni@deriv.me”>
Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>

* yauheni / IdvNoSubmisssions test coverage (#5636)

* yauheni / IdvNoSubmisssions test coverage

* imports fix

* naming typo fix

* Delete poi-idv-rejected.spec.js

Co-authored-by: “yauheni-kryzhyk-deriv” <“yauheni@deriv.me”>
Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>

* feat: add check if has restricted parent (#5635)

Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>

* Adrienne / P2P responsive add PM full screen modal button footers are now fixed by design (#5561)

* Mobile add PM full screen modal button footers are now fixed by design specs

* Incorporated code review changes

Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>

* Bala/Add bootstrap dev script (#5659)

* chore: add bootstrap dev script

* Update package.json

Co-authored-by: Yashim Wong <75345074+yashim-deriv@users.noreply.github.com>

* chore: remove build from bootstrap

Co-authored-by: Yashim Wong <75345074+yashim-deriv@users.noreply.github.com>
Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>

* translations: 📚 sync translations with crowdin (#5679)

Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com>

* update branch

Co-authored-by: vinu-deriv <100689171+vinu-deriv@users.noreply.github.com>
Co-authored-by: Farrah Mae Ochoa <82315152+farrah-deriv@users.noreply.github.com>
Co-authored-by: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com>
Co-authored-by: Likhith Kolayari <likhith@deriv.com>
Co-authored-by: amina-deriv <84661147+amina-deriv@users.noreply.github.com>
Co-authored-by: yauheni-kryzhyk-deriv <103182683+yauheni-kryzhyk-deriv@users.noreply.github.com>
Co-authored-by: “yauheni-kryzhyk-deriv” <“yauheni@deriv.me”>
Co-authored-by: maryiafrantsava-binary <103181650+maryiafrantsava-binary@users.noreply.github.com>
Co-authored-by: adrienne-deriv <103016120+adrienne-deriv@users.noreply.github.com>
Co-authored-by: balakrishna-binary <56330681+balakrishna-binary@users.noreply.github.com>
Co-authored-by: Yashim Wong <75345074+yashim-deriv@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com>

* Adrienne / Create blocked advertisers tab (#5590)

* Added new blocked advertisers tab for desktop and mobile

* Refactored code

* Added blocked advertisers svg icon

* Resolved failed build, added blocked-advertisers.svg icon

* Incorporated code review suggestions

* Incorporated code review suggestions

* Show loading screen when icon is still loading

* Removed loading

* Removed manual font size

* fix: block user folder and stuff (#5848)

* Block unblock function draft (#5857)

* Added block/unblock function to general-store

* Added new observable

* Refactored

* Adrienne / Blocked user count icon with tooltip (#5684)

* Created component for blocked user count

* Added blocked user count component

* Added blocked user icon

* Linked blocked_by_count returned by BE

* Incorporated code reviews

* Added block user count modal for mobile when user taps on the block user count

* Ensure blocked user icon count has correct fill in dark mode

* Adrienne / Blocked advertiser overlay (#5859)

* Added block user overlay component for desktop/responsive

* Refacted sass file to use BEM convention and removed default

* Refactored code review changes

* Refactored code review changes

* Refactored overlay component as a wrapper

* Show unblock user modal and added unblock user action

* changed icon name

* Added checks for response

* Incorporated code review changes

* Fixed typo

* Change overlay height for mobile to ensure it fills remaining space

* Removed tabs in advertiser's page as per design

* Fixed test issues

* Made advertiser page non-scrollable when overlay is shown

* Removed close icon from block user modal as discussed

* Removed block me button

* Removed setIsBlockedUserModalOpen from advertiser page store

* Renamed props in block user overlay to onClickUnblock

* Renamed overlay props

* Added TODO regarding design changes on tabs in advertiser page

* updated observables

* added boolean checks

* Ameerul /Task 65494 list of blocked users feature (#5858)

* added 2 new components for row and table, added new scss file, added new functions and observables in my_profile and advertiser-page store

* fixed loading issue, mobile full page modal view and the css issue for viewing the table

* refactored code in advertiser store and block user modal

* removed promise for getBlockedAdvertisersList function

* merged blocked advertiser tab with list of users

* added removed code

* empty commit

* refactored code

* refactored blockUnblockUser function

* separated the block user table to my-profile and refactored code

* added blockUnblockUser function to general store

* added new functions to general store

* merged with master, added new functions in general store to block user table and to my profile store

* changed page header for blocked advertisers list

* Adrienne / Added search functionality for list of blocked advertisers (#6005)

* Added search functionality

* Refactored code changes

* Refactored code changes

* Renamed BlockedAdvertisersList to BlockUserList

* Fixed issues with block advertiser list table height

* Fixed issue with search box not loading

* Fixed an issue where the profile header is not fully width

* Reduced margin bottom height for tabs and stats height due to flex

* Ameerul /Task #65487 Dropdown Block User Feature (#5682)

* added dropdown, menu dots icon, added function for users to block advertisers with block user modal

* refactored code, and renamed dropdown component to advertiser-page-dropdown-menu

* renamed variables and functions according to comments

* refactored block user function in advertiser-page-store and block-user-modal

* minor changes to the imports

* merged with master and added changes

* removed old blockUser and showModal functions from advertiser store

* removed is_blocked from dropdown

* refactored code with comments

* moved showBlockUserModal function to the store

* removed curly brackets in name

* fixed gap in modal

* fixed tooltip message and user cannot block themselves

* fixed dropdown darkmode design and hid menu dots icon when user is blocked

* changed dropdown hover colour

* added useOnClickOutisde Hook to hide dropdown when clicked outside

* Refactored blocked user overlay css and advertiser page css (#6097)

* Blocked user feature sanity check (#6434)

* added dropdown, menu dots icon, added function for users to block advertisers with block user modal

* refactored code, and renamed dropdown component to advertiser-page-dropdown-menu

* renamed variables and functions according to comments

* refactored block user function in advertiser-page-store and block-user-modal

* minor changes to the imports

* merged with master and added changes

* removed old blockUser and showModal functions from advertiser store

* removed is_blocked from dropdown

* refactored code with comments

* moved showBlockUserModal function to the store

* removed curly brackets in name

* fixed gap in modal

* fixed tooltip message and user cannot block themselves

* fixed dropdown darkmode design and hid menu dots icon when user is blocked

* changed dropdown hover colour

* added useOnClickOutisde Hook to hide dropdown when clicked outside

* fixed bug fixes for advertiser page and my profile name

* Adrienne / Blocked user feature search box bug (Merge after sanity check PR is merged!) (#6436)

* added dropdown, menu dots icon, added function for users to block advertisers with block user modal

* refactored code, and renamed dropdown component to advertiser-page-dropdown-menu

* renamed variables and functions according to comments

* refactored block user function in advertiser-page-store and block-user-modal

* minor changes to the imports

* merged with master and added changes

* removed old blockUser and showModal functions from advertiser store

* removed is_blocked from dropdown

* refactored code with comments

* moved showBlockUserModal function to the store

* removed curly brackets in name

* fixed gap in modal

* fixed tooltip message and user cannot block themselves

* fixed dropdown darkmode design and hid menu dots icon when user is blocked

* changed dropdown hover colour

* added useOnClickOutisde Hook to hide dropdown when clicked outside

* fixed bug fixes for advertiser page and my profile name

* Fixed an issue where the block user table does not display No blocked advertisers after unblocking the last user during search

Co-authored-by: ameerul <ameerul@deriv.com>

* Blocked user count not appearing in my profile (#6446)

* fixed bugs for blocked user count in my profile

* reverted changes from my profile and change my profile name

* Aligned avatar to flex start in advertiser page as per design requirements (#6553)

* Adrienne / Hide block user dropdown when user views their own advertiser page (#6529)

* Hide block user dropdown when user views their own advertiser page

* Removed dropdown when user views their own ad and also removes disabled dropdown prop functionality

* Adrienne / Fixed alignment issues with block user count in responsive and bug where Blocked Advertisers responsive tab is not fully visible (#6527)

* Fixed alignment issues with block user count in responsive and bug where Blocked Advertisers responsive tab is not fully visible

* Integrated code review

* Adrienne / Made block user count to be subscribed to updates (#6561)

* Moved blocked user count observable to general store's subscription to subscribe to block user count updates

* Destructure response

* Refactored code

* Ameerul /Bug 76978 Blocked advertiser list is not loading after barred one user and showing console error (#6565)

* added error handling if user is barred and wants to get blocked advertisers list

* updated ui for error message and added new component to handle errors in table

* changed mobile margin for error message

* added new icon for blocked advertisers barred

* removed commented code

* Adrienne / Removed hover styling for responsive in blocked advertisers list (#6567)

* test

* test

* test agane

* Added styling for unfocusing

* Added styling for unfocusing

* Removed hover styling for responsive

* Ameerul /Bug 77176 The Block modal keep on looping for Disable P2P user  (#6580)

* added error-modal in advertiser page to handle if advertiser is banned and user wants to block

* updated error modal has_close_icon and implemented comments

* added has_close_icon in props

* Ameerul /Bug 77339 When userA trying to block an advertiser is barred, once userA is unbarred on trying to block advertiser temporary barred error model is displayed (#6591)

* fixed issue when user is banneed and tries to block advertiser, and changed width for error modal

* fixed checking if user is barred and changed error modal styling

* Adrienne / Scrollable advertiser page when no ads in responsive (#6622)

* draft pr

* removed top margin in advertiser page ads table

Co-authored-by: Carol Sachdeva <carol@binary.com>
Co-authored-by: ameerul-deriv <103412909+ameerul-deriv@users.noreply.github.com>
Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>
Co-authored-by: vinu-deriv <100689171+vinu-deriv@users.noreply.github.com>
Co-authored-by: Farrah Mae Ochoa <82315152+farrah-deriv@users.noreply.github.com>
Co-authored-by: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com>
Co-authored-by: Likhith Kolayari <likhith@deriv.com>
Co-authored-by: amina-deriv <84661147+amina-deriv@users.noreply.github.com>
Co-authored-by: yauheni-kryzhyk-deriv <103182683+yauheni-kryzhyk-deriv@users.noreply.github.com>
Co-authored-by: “yauheni-kryzhyk-deriv” <“yauheni@deriv.me”>
Co-authored-by: maryiafrantsava-binary <103181650+maryiafrantsava-binary@users.noreply.github.com>
Co-authored-by: adrienne-deriv <103016120+adrienne-deriv@users.noreply.github.com>
Co-authored-by: balakrishna-binary <56330681+balakrishna-binary@users.noreply.github.com>
Co-authored-by: Yashim Wong <75345074+yashim-deriv@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com>
Co-authored-by: Adrienne Rio <adrienne@deriv.com>
Co-authored-by: Ameerul Hady <ameerul@deriv.com>

packages/components/src/components/icon/icons.js

@@ -180,6 +180,7 @@ import './common/ic-bank-dashboard.svg';
 import './common/ic-bank.svg';
 import './common/ic-bell.svg';
 import './common/ic-black-warning.svg';
+import './common/ic-block.svg';
 import './common/ic-box.svg';
 import './common/ic-button-back.svg';
 import './common/ic-calendar-datefrom.svg';
@@ -251,6 +252,7 @@ import './common/ic-email-verification-link-invalid.svg';
 import './common/ic-email-verification-link-valid.svg';
 import './common/ic-email-verified.svg';
 import './common/ic-email.svg';
+import './common/ic-empty-blocked-advertisers.svg';
 import './common/ic-empty-folder.svg';
 import './common/ic-empty-star.svg';
 import './common/ic-eye.svg';
@@ -296,6 +298,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';
@@ -402,6 +405,7 @@ import './common/ic-unsaved-changes-dashboard.svg';
 import './common/ic-unsaved-changes.svg';
 import './common/ic-up-down-solid.svg';
 import './common/ic-ups-downs.svg';
+import './common/ic-user-blocked-outline.svg';
 import './common/ic-user-outline.svg';
 import './common/ic-user.svg';
 import './common/ic-utility.svg';

packages/components/stories/icon/icons.js

@@ -187,6 +187,8 @@ export const icons =
         'IcBank',
         'IcBell',
         'IcBlackWarning',
+        'IcBlock',
+        'IcBlockedAdvertisersBarred',
         'IcBox',
         'IcButtonBack',
         'IcCalendarDatefrom',
@@ -258,6 +260,7 @@ export const icons =
         'IcEmailVerificationLinkValid',
         'IcEmailVerified',
         'IcEmail',
+        'IcEmptyBlockedAdvertisers',
         'IcEmptyFolder',
         'IcEmptyStar',
         'IcEye',
@@ -303,6 +306,7 @@ export const icons =
         'IcLoss',
         'IcMacosLogo',
         'IcMacos',
+        'IcMenuDots',
         'IcMessageDelivered',
         'IcMessageErrored',
         'IcMessagePending',
@@ -409,6 +413,7 @@ export const icons =
         'IcUnsavedChanges',
         'IcUpDownSolid',
         'IcUpsDowns',
+        'IcUserBlockedOutline',
         'IcUserOutline',
         'IcUser',
         'IcUtility',

packages/p2p/src/components/advertiser-page/advertiser-page-dropdown-menu.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+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 = () => {
+    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 && (
+            <div className='advertiser-page__menu-dots-toggle'>
+                <Icon
+                    className='advertiser-page__menu-dots-icon'
+                    icon='IcMenuDots'
+                    onClick={() =>
+                        advertiser_page_store.setIsDropdownMenuVisible(!advertiser_page_store.is_dropdown_menu_visible)
+                    }
+                    size={16}
+                />
+                {advertiser_page_store.is_dropdown_menu_visible && (
+                    <div
+                        ref={dropdown_menu_ref}
+                        className='advertiser-page__dropdown'
+                        onClick={advertiser_page_store.showBlockUserModal}
+                    >
+                        <Dropdown
+                            className='advertiser-page__dropdown-container'
+                            is_align_text_right
+                            list={['Block']}
+                            name='block_user_dropdown'
+                            placeholder={
+                                <Text
+                                    color={
+                                        advertiser_page_store.is_counterparty_advertiser_blocked
+                                            ? 'less-prominent'
+                                            : 'prominent'
+                                    }
+                                    size='xs'
+                                >
+                                    <Localize i18n_default_text='Block' />
+                                </Text>
+                            }
+                        />
+                    </div>
+                )}
+            </div>
+        )
+    );
+};
+
+export default observer(AdvertiserPageDropdownMenu);

packages/p2p/src/components/advertiser-page/advertiser-page-stats.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Money, Table, Text } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 import { observer } from 'mobx-react-lite';
@@ -293,8 +292,4 @@ const AdvertiserPageStats = () => {
     );
 };
 
-AdvertiserPageStats.propTypes = {
-    is_visible: PropTypes.bool,
-};
-
 export default observer(AdvertiserPageStats);