chore: refactored code based off modal manager and fixed string

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;
@@ -57,12 +58,23 @@ 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
+                                    ? localize("Blocking wasn't possible as {{name}} is not using Deriv P2P anymore.", {
+                                          name: advertiser_page_store.advertiser_details_name,
+                                      })
+                                    : 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.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,47 @@ 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();
+
+    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
+            ) {
+                showModal({
+                    key: 'ErrorModal',
+                    props: {
+                        error_message:
+                            general_store.error_code === api_error_codes.INVALID_ADVERTISER_ID
+                                ? localize("Blocking wasn't possible as {{name}} is not using Deriv P2P anymore.", {
+                                      name: my_profile_store.selected_trade_partner.name,
+                                  })
+                                : 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,6 +4,7 @@ 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',

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

@@ -8,7 +8,7 @@ import { createExtendedOrderDetails } from 'Utils/orders';
 import { init as WebsocketInit, requestWS, subscribeWS } from 'Utils/websocket';
 import { order_list } from 'Constants/order-list';
 import { buy_sell } from 'Constants/buy-sell';
-import { api_error_codes } from '../constants/api-error-codes';
+import { api_error_codes } from 'Constants/api-error-codes';
 
 export default class GeneralStore extends BaseStore {
     active_index = 0;
@@ -22,6 +22,7 @@ export default class GeneralStore extends BaseStore {
     balance;
     cancels_remaining = null;
     contact_info = '';
+    error_code = '';
     feature_level = null;
     formik_ref = null;
     inactive_notification_count = 0;
@@ -77,6 +78,7 @@ export default class GeneralStore extends BaseStore {
             balance: observable,
             feature_level: observable,
             formik_ref: observable,
+            error_code: observable,
             inactive_notification_count: observable,
             is_advertiser: observable,
             is_advertiser_blocked: observable,
@@ -133,6 +135,7 @@ export default class GeneralStore extends BaseStore {
             setAdvertiserSellLimit: action.bound,
             setAppProps: action.bound,
             setAdvertiserRelationsResponse: action.bound, //TODO: Remove this when backend has fixed is_blocked flag issue
+            setErrorCode: action.bound,
             setFeatureLevel: action.bound,
             setFormikRef: action.bound,
             setSavedFormState: action.bound,
@@ -230,7 +233,10 @@ export default class GeneralStore extends BaseStore {
                         );
                     }
                 } else {
-                    this.setBlockUnblockUserError(response.error.message);
+                    const { code, message } = response.error;
+                    this.setErrorCode(code);
+                    this.setBlockUnblockUserError(message);
+
                     if (!general_store.is_barred && !general_store.isCurrentModal('ErrorModal')) {
                         general_store.showModal({
                             key: 'ErrorModal',
@@ -635,6 +641,10 @@ export default class GeneralStore extends BaseStore {
         this.default_advert_description = default_advert_description;
     }
 
+    setErrorCode(error_code) {
+        this.error_code = error_code;
+    }
+
     setFeatureLevel(feature_level) {
         this.feature_level = feature_level;
     }

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

@@ -470,7 +470,8 @@ export default class MyProfileStore extends BaseStore {
                         key: 'ErrorModal',
                         props: {
                             error_message: response.error.message,
-                            error_modal_title: 'Unable to block advertiser',
+                            error_modal_button_text: localize('Got it'),
+                            error_modal_title: 'Permission Denied',
                             has_close_icon: false,
                             width: isMobile() ? '90rem' : '40rem',
                         },