Ameerul /Task 77336 Error model content required when user tries to block an advertiser who is banned from P2P

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

@@ -6,6 +6,7 @@ import { observer } from 'mobx-react-lite';
 import { useStores } from 'Stores';
 import { Localize, localize } from 'Components/i18next';
 import { my_profile_tabs } from 'Constants/my-profile-tabs';
+import { api_error_codes } from 'Constants/api-error-codes';
 import PageReturn from 'Components/page-return/page-return.jsx';
 import RecommendedBy from 'Components/recommended-by';
 import UserAvatar from 'Components/user/user-avatar/user-avatar.jsx';
@@ -21,7 +22,7 @@ import { useModalManagerContext } from 'Components/modal-manager/modal-manager-c
 import './advertiser-page.scss';
 
 const AdvertiserPage = () => {
-    const { general_store, advertiser_page_store, buy_sell_store, my_profile_store } = useStores();
+    const { advertiser_page_store, buy_sell_store, general_store, my_profile_store } = useStores();
     const { hideModal, showModal, useRegisterModalProps } = useModalManagerContext();
 
     const is_my_advert = advertiser_page_store.advertiser_details_id === general_store.advertiser_id;
@@ -48,6 +49,15 @@ const AdvertiserPage = () => {
     // rating_average_decimal converts rating_average to 1 d.p number
     const rating_average_decimal = rating_average ? Number(rating_average).toFixed(1) : null;
     const joined_since = daysSince(created_time);
+    const error_message = () => {
+        return !!advertiser_page_store.is_counterparty_advertiser_blocked && !is_my_advert
+            ? localize("Unblocking wasn't possible as {{name}} is not using Deriv P2P anymore.", {
+                  name: advertiser_page_store.advertiser_details_name,
+              })
+            : localize("Blocking wasn't possible as {{name}} is not using Deriv P2P anymore.", {
+                  name: advertiser_page_store.advertiser_details_name,
+              });
+    };
 
     React.useEffect(() => {
         advertiser_page_store.onMount();
@@ -57,12 +67,21 @@ const AdvertiserPage = () => {
             () => [advertiser_page_store.active_index, general_store.block_unblock_user_error],
             () => {
                 advertiser_page_store.onTabChange();
-                if (general_store.block_unblock_user_error) {
+                if (general_store.block_unblock_user_error && buy_sell_store.show_advertiser_page) {
                     showModal({
                         key: 'ErrorModal',
                         props: {
-                            error_message: general_store.block_unblock_user_error,
-                            error_modal_title: 'Unable to block advertiser',
+                            error_message:
+                                general_store.error_code === api_error_codes.INVALID_ADVERTISER_ID
+                                    ? error_message()
+                                    : general_store.block_unblock_user_error,
+                            error_modal_button_text: localize('Got it'),
+                            error_modal_title:
+                                general_store.error_code === api_error_codes.INVALID_ADVERTISER_ID
+                                    ? localize('{{name}} is no longer on Deriv P2P', {
+                                          name: advertiser_page_store.advertiser_details_name,
+                                      })
+                                    : localize('Unable to block advertiser'),
                             has_close_icon: false,
                             onClose: () => {
                                 buy_sell_store.hideAdvertiserPage();

packages/p2p/src/components/modal-manager/modals/error-modal/error-modal.jsx

@@ -5,7 +5,14 @@ import { Button, Modal } from '@deriv/components';
 import { Localize } from 'Components/i18next';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 
-const ErrorModal = ({ error_message, error_modal_title, has_close_icon, onClose, width }) => {
+const ErrorModal = ({
+    error_message,
+    error_modal_button_text = 'Ok',
+    error_modal_title,
+    has_close_icon,
+    onClose,
+    width,
+}) => {
     const { hideModal, is_modal_open } = useModalManagerContext();
 
     return (
@@ -19,7 +26,7 @@ const ErrorModal = ({ error_message, error_modal_title, has_close_icon, onClose,
             <Modal.Body className='error-modal__body'>{error_message}</Modal.Body>
             <Modal.Footer>
                 <Button large primary onClick={onClose ?? hideModal}>
-                    <Localize i18n_default_text='Ok' />
+                    <Localize i18n_default_text={error_modal_button_text} />
                 </Button>
             </Modal.Footer>
         </Modal>
@@ -28,6 +35,7 @@ const ErrorModal = ({ error_message, error_modal_title, has_close_icon, onClose,
 
 ErrorModal.propTypes = {
     error_message: PropTypes.string,
+    error_modal_button_text: PropTypes.string,
     error_modal_title: PropTypes.string,
     has_close_icon: PropTypes.bool,
     onClose: PropTypes.func,

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

@@ -8,6 +8,7 @@ import BlockUserTable from '../block-user-table';
 import BlockUserTableError from '../block-user-table/block-user-table-error';
 import debounce from 'lodash.debounce';
 import { localize } from 'Components/i18next';
+import { api_error_codes } from 'Constants/api-error-codes';
 import './block-user-list.scss';
 
 const BlockUserList = observer(() => {
@@ -26,7 +27,11 @@ const BlockUserList = observer(() => {
         }
     };
 
-    if (general_store.is_barred && general_store.block_unblock_user_error) {
+    if (
+        (general_store?.error_code === api_error_codes.TEMPORARY_BAR ||
+            general_store?.error_code === api_error_codes.PERMISSION_DENIED) &&
+        general_store.block_unblock_user_error
+    ) {
         return <BlockUserTableError error_message={general_store.block_unblock_user_error} />;
     }
 

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

@@ -1,7 +1,10 @@
 import React from 'react';
+import { reaction } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useStores } from 'Stores';
 import { DesktopWrapper, MobileFullPageModal, MobileWrapper } from '@deriv/components';
+import { isMobile } from '@deriv/shared';
+import { api_error_codes } from 'Constants/api-error-codes';
 import { my_profile_tabs } from 'Constants/my-profile-tabs';
 import { localize } from 'Components/i18next';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
@@ -10,8 +13,56 @@ import BlockUserFilterModal from './block-user-filter-modal';
 import './block-user.scss';
 
 const BlockUser = () => {
-    const { my_profile_store } = useStores();
-    const { hideModal, useRegisterModalProps } = useModalManagerContext();
+    const { general_store, buy_sell_store, my_profile_store } = useStores();
+    const { hideModal, showModal, useRegisterModalProps } = useModalManagerContext();
+    const error_message = () => {
+        return my_profile_store.selected_trade_partner.is_blocked
+            ? localize("Unblocking wasn't possible as {{name}} is not using Deriv P2P anymore.", {
+                  name: my_profile_store.selected_trade_partner.name,
+              })
+            : localize("Blocking wasn't possible as {{name}} is not using Deriv P2P anymore.", {
+                  name: my_profile_store.selected_trade_partner.name,
+              });
+    };
+
+    reaction(
+        () => general_store.block_unblock_user_error,
+        () => {
+            if (
+                general_store.block_unblock_user_error &&
+                general_store.active_index === 3 &&
+                !buy_sell_store.show_advertiser_page &&
+                general_store?.error_code !== api_error_codes.TEMPORARY_BAR &&
+                general_store?.error_code !== api_error_codes.PERMISSION_DENIED
+            ) {
+                showModal({
+                    key: 'ErrorModal',
+                    props: {
+                        error_message:
+                            general_store.error_code === api_error_codes.INVALID_ADVERTISER_ID
+                                ? error_message()
+                                : general_store.block_unblock_user_error,
+                        error_modal_button_text: localize('Got it'),
+                        error_modal_title:
+                            general_store.error_code === api_error_codes.INVALID_ADVERTISER_ID
+                                ? localize('{{name}} is no longer on Deriv P2P', {
+                                      name: my_profile_store.selected_trade_partner.name,
+                                  })
+                                : localize('Unable to block advertiser'),
+
+                        has_close_icon: false,
+                        onClose: () => {
+                            general_store.setBlockUnblockUserError('');
+                            hideModal();
+                        },
+                        width: isMobile() ? '90rem' : '40rem',
+                    },
+                });
+                general_store.setBlockUnblockUserError(null);
+            }
+        },
+        { fireImmediately: true }
+    );
 
     useRegisterModalProps({
         key: 'BlockUserModal',

packages/p2p/src/constants/api-error-codes.js

@@ -4,12 +4,14 @@ export const api_error_codes = Object.freeze({
     DUPLICATE_ADVERT: 'DuplicateAdvert',
     EXCESSIVE_VERIFICATION_FAILURES: 'ExcessiveVerificationFailures',
     EXCESSIVE_VERIFICATION_REQUESTS: 'ExcessiveVerificationRequests',
+    INVALID_ADVERTISER_ID: 'InvalidAdvertiserID',
     INVALID_VERIFICATION_TOKEN: 'InvalidVerificationToken',
     ORDER_EMAIL_VERIFICATION_REQUIRED: 'OrderEmailVerificationRequired',
     ORDER_CREATE_FAIL_CLIENT_BALANCE: 'OrderCreateFailClientBalance',
     ORDER_CREATE_FAIL_RATE_CHANGED: 'OrderCreateFailRateChanged',
     PERMISSION_DENIED: 'PermissionDenied',
     RESTRICTED_COUNTRY: 'RestrictedCountry',
+    TEMPORARY_BAR: 'TemporaryBar',
     AD_EXCEEDS_DAILY_LIMIT: 'advertiser_daily_limit',
     AD_EXCEEDS_BALANCE: 'advertiser_balance',
 });

packages/p2p/src/stores/general-store.js

@@ -23,6 +23,7 @@ export default class GeneralStore extends BaseStore {
     balance;
     cancels_remaining = null;
     contact_info = '';
+    error_code = '';
     external_stores = {};
     feature_level = null;
     formik_ref = null;
@@ -86,6 +87,7 @@ export default class GeneralStore extends BaseStore {
             external_stores: observable,
             feature_level: observable,
             formik_ref: observable,
+            error_code: observable,
             inactive_notification_count: observable,
             is_advertiser: observable,
             is_advertiser_blocked: observable,
@@ -134,6 +136,9 @@ export default class GeneralStore extends BaseStore {
             setAdvertiserId: action.bound,
             setAdvertiserBuyLimit: action.bound,
             setAdvertiserSellLimit: action.bound,
+            setAppProps: action.bound,
+            setAdvertiserRelationsResponse: action.bound, //TODO: Remove this when backend has fixed is_blocked flag issue
+            setErrorCode: action.bound,
             setExternalStores: action.bound,
             setFeatureLevel: action.bound,
             setFormikRef: action.bound,
@@ -196,15 +201,15 @@ export default class GeneralStore extends BaseStore {
     }
 
     blockUnblockUser(should_block, advertiser_id, should_set_is_counterparty_blocked = true) {
-        const { advertiser_page_store, general_store } = this.root_store;
+        const { advertiser_page_store } = this.root_store;
         this.setIsBlockUnblockUserLoading(true);
         requestWS({
             p2p_advertiser_relations: 1,
             [should_block ? 'add_blocked' : 'remove_blocked']: [advertiser_id],
         }).then(response => {
             if (response) {
                 if (!response.error) {
-                    general_store.hideModal();
+                    this.hideModal();
                     if (should_set_is_counterparty_blocked) {
                         const { p2p_advertiser_relations } = response;
 
@@ -216,18 +221,9 @@ export default class GeneralStore extends BaseStore {
                         );
                     }
                 } else {
-                    this.setBlockUnblockUserError(response.error.message);
-                    if (!general_store.is_barred && !general_store.isCurrentModal('ErrorModal')) {
-                        general_store.showModal({
-                            key: 'ErrorModal',
-                            props: {
-                                error_message: response.error.message,
-                                error_modal_title: 'Unable to block advertiser',
-                                has_close_icon: false,
-                                width: isMobile() ? '90rem' : '40rem',
-                            },
-                        });
-                    }
+                    const { code, message } = response.error;
+                    this.setErrorCode(code);
+                    this.setBlockUnblockUserError(message);
                 }
             }
             this.setIsBlockUnblockUserLoading(false);
@@ -632,6 +628,10 @@ export default class GeneralStore extends BaseStore {
         this.default_advert_description = default_advert_description;
     }
 
+    setErrorCode(error_code) {
+        this.error_code = error_code;
+    }
+
     setExternalStores(external_stores) {
         this.external_stores = external_stores;
     }
@@ -865,10 +865,13 @@ export default class GeneralStore extends BaseStore {
             requestWS({ get_account_status: 1 }).then(account_response => {
                 if (!account_response.error) {
                     const { get_account_status } = account_response;
-                    const { authentication } = get_account_status;
+                    const { authentication, status } = get_account_status;
                     const { identity } = authentication;
 
-                    this.setPoiStatus(identity.status);
+                    if (status.includes('cashier_locked')) {
+                        this.setIsBlocked(true);
+                        this.hideModal();
+                    } else this.setPoiStatus(identity.status);
                 }
             });
         }

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

@@ -519,7 +519,10 @@ export default class MyProfileStore extends BaseStore {
                         this.setTradePartnersList(partners_list);
                     }
                 } else {
-                    general_store.setBlockUnblockUserError(response.error.message);
+                    const { code, message } = response.error;
+
+                    general_store.setErrorCode(code);
+                    general_store.setBlockUnblockUserError(message);
                 }
             }
             this.setIsBlockUserTableLoading(false);