Skip to content

Commit

Permalink
Ameerul /Task 77336 Error model content required when user tries to b…
Browse files Browse the repository at this point in the history 
…lock an advertiser who is banned from P2P (#7673)

* chore: refactored code based off modal manager and fixed string

* chore: fixed logic to display modals

* chore: fixed cashier locked issue

* chore: refactored error message
  • Loading branch information
@ameerul-deriv
ameerul-deriv committed May 12, 2023
1 parent 96b5578 commit c6c3896
Show file tree
Hide file tree
Showing 7 changed files with 117 additions and 26 deletions.
27 changes: 23 additions & 4 deletions packages/p2p/src/components/advertiser-page/advertiser-page.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand All @@ -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();
Expand All @@ -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();
Expand Down
12 changes: 10 additions & 2 deletions packages/p2p/src/components/modal-manager/modals/error-modal/error-modal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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>
Expand All @@ -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,
Expand Down
7 changes: 6 additions & 1 deletion packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand All @@ -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} />;
}

Expand Down
55 changes: 53 additions & 2 deletions packages/p2p/src/components/my-profile/block-user/block-user.jsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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',
Expand Down
2 changes: 2 additions & 0 deletions packages/p2p/src/constants/api-error-codes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
});
35 changes: 19 additions & 16 deletions packages/p2p/src/stores/general-store.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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;

Expand All @@ -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);
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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);
}
});
}
Expand Down
5 changes: 4 additions & 1 deletion packages/p2p/src/stores/my-profile-store.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down

0 comments on commit c6c3896

Please sign in to comment.