Ameerul /Bug 76978 Blocked advertiser list is not loading after barre…

…d 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

packages/components/stories/icon/icons.js

@@ -184,6 +184,7 @@ export const icons =
         'IcBell',
         'IcBlackWarning',
         'IcBlock',
+        'IcBlockedAdvertisersBarred',
         'IcBox',
         'IcButtonBack',
         'IcCalendarDatefrom',

packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table-error.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import PropTypes from 'prop-types';
+import { DesktopWrapper, Icon, MobileFullPageModal, MobileWrapper, Text } from '@deriv/components';
+import { my_profile_tabs } from 'Constants/my-profile-tabs';
+import { Localize, localize } from 'Components/i18next';
+import { useStores } from 'Stores';
+
+const BlockUserTableError = ({ error_message }) => {
+    const { my_profile_store } = useStores();
+
+    return (
+        <React.Fragment>
+            <DesktopWrapper>
+                <div className='block-user__table--error'>
+                    <Icon
+                        className='block-user__table--error-icon'
+                        icon='IcBlockedAdvertisersBarred'
+                        height={128}
+                        width={128}
+                    />
+                    <Text
+                        align='center'
+                        className='block-user__table--error-text'
+                        line_height='m'
+                        size='s'
+                        weight='bold'
+                    >
+                        <Localize i18n_default_text={error_message} />
+                    </Text>
+                </div>
+            </DesktopWrapper>
+            <MobileWrapper>
+                <MobileFullPageModal
+                    body_className='block-user__table--error'
+                    height_offset='80px'
+                    is_modal_open
+                    page_header_text={localize('Blocked advertisers')}
+                    pageHeaderReturnFn={() => my_profile_store.setActiveTab(my_profile_tabs.MY_STATS)}
+                >
+                    <Icon
+                        icon='IcBlockedAdvertisersBarred'
+                        className='block-user__table--error-icon'
+                        height={128}
+                        width={128}
+                    />
+                    <Text
+                        align='center'
+                        className='block-user__table--error-text'
+                        line_height='m'
+                        size='s'
+                        weight='bold'
+                    >
+                        <Localize i18n_default_text={error_message} />
+                    </Text>
+                </MobileFullPageModal>
+            </MobileWrapper>
+        </React.Fragment>
+    );
+};
+
+BlockUserTableError.propTypes = {
+    error_message: PropTypes.string,
+};
+
+export default observer(BlockUserTableError);

packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx

@@ -5,8 +5,8 @@ import { localize } from 'Components/i18next';
 import { isMobile } from '@deriv/shared';
 import { useStores } from 'Stores';
 import BlockUserRow from './block-user-row.jsx';
-import { TableError } from 'Components/table/table-error.jsx';
 import BlockUserEmpty from 'Components/block-user/block-user-empty';
+import BlockUserTableError from './block-user-table-error.jsx';
 
 const BlockUserTable = () => {
     const { general_store, my_profile_store } = useStores();
@@ -24,7 +24,7 @@ const BlockUserTable = () => {
     }
 
     if (general_store.block_unblock_user_error) {
-        return <TableError message={general_store.block_unblock_user_error} />;
+        return <BlockUserTableError error_message={general_store.block_unblock_user_error} />;
     }
 
     if (my_profile_store.search_term && my_profile_store.search_results.length === 0) {

packages/p2p/src/components/my-profile/block-user/block-user.scss

@@ -53,6 +53,24 @@
             flex-direction: column;
         }
 
+        &--error {
+            align-items: center;
+            display: flex;
+            flex-direction: column;
+
+            &-icon {
+                margin-top: 2.2rem;
+            }
+
+            &-text {
+                margin: 3rem 11rem;
+
+                @include mobile {
+                    margin: 3rem 2rem;
+                }
+            }
+        }
+
         &-header {
             display: grid;
             grid-template-columns: 1fr;

packages/p2p/src/stores/my-profile-store.js

@@ -224,8 +224,14 @@ export default class MyProfileStore extends BaseStore {
         requestWS({
             p2p_advertiser_relations: 1,
         }).then(response => {
-            this.setBlockedAdvertisersList(response.p2p_advertiser_relations.blocked_advertisers);
-            this.loadMoreBlockedAdvertisers();
+            if (response) {
+                if (!response.error) {
+                    this.setBlockedAdvertisersList(response.p2p_advertiser_relations?.blocked_advertisers);
+                    this.loadMoreBlockedAdvertisers();
+                } else {
+                    this.root_store.general_store.setBlockUnblockUserError(response.error.message);
+                }
+            }
             this.setIsLoading(false);
         });
     }