diff --git a/packages/p2p/src/stores/advertiser-page-store.js b/packages/p2p/src/stores/advertiser-page-store.js index f44693826db0..5156814057bb 100644 --- a/packages/p2p/src/stores/advertiser-page-store.js +++ b/packages/p2p/src/stores/advertiser-page-store.js @@ -1,57 +1,101 @@ -import { action, computed, observable } from 'mobx'; +import { action, computed, observable, makeObservable } from 'mobx'; import { buy_sell } from 'Constants/buy-sell'; import { getShortNickname } from 'Utils/string'; import { requestWS } from 'Utils/websocket'; import BaseStore from 'Stores/base_store'; export default class AdvertiserPageStore extends BaseStore { - @observable active_index = 0; - @observable ad = null; - @observable advertiser_first_name = ''; - @observable advertiser_last_name = ''; - @observable advertiser_info = {}; - @observable adverts = []; - @observable counterparty_type = buy_sell.BUY; - @observable api_error_message = ''; - @observable form_error_message = ''; - @observable has_more_adverts_to_load = false; - @observable is_loading = true; - @observable is_loading_adverts = true; - @observable is_submit_disabled = true; - @observable show_ad_popup = false; - @observable submitForm = () => {}; - - @computed + active_index = 0; + ad = null; + advertiser_first_name = ''; + advertiser_last_name = ''; + advertiser_info = {}; + adverts = []; + counterparty_type = buy_sell.BUY; + api_error_message = ''; + form_error_message = ''; + has_more_adverts_to_load = false; + is_loading = true; + is_loading_adverts = true; + is_submit_disabled = true; + show_ad_popup = false; + submitForm = () => {}; + + constructor() { + // TODO: [mobx-undecorate] verify the constructor arguments and the arguments of this automatically generated super call + super(); + + makeObservable(this, { + active_index: observable, + ad: observable, + advertiser_first_name: observable, + advertiser_last_name: observable, + advertiser_info: observable, + adverts: observable, + counterparty_type: observable, + api_error_message: observable, + form_error_message: observable, + has_more_adverts_to_load: observable, + is_loading: observable, + is_loading_adverts: observable, + is_submit_disabled: observable, + show_ad_popup: observable, + submitForm: observable, + account_currency: computed, + advert: computed, + advertiser_details: computed, + advertiser_details_id: computed, + advertiser_details_name: computed, + advertiser_full_name: computed, + short_name: computed, + getAdvertiserInfo: action.bound, + handleTabItemClick: action.bound, + onCancelClick: action.bound, + onConfirmClick: action.bound, + onMount: action.bound, + setActiveIndex: action.bound, + setAd: action.bound, + setAdvertiserFirstName: action.bound, + setAdvertiserLastName: action.bound, + setAdvertiserInfo: action.bound, + setAdverts: action.bound, + setCounterpartyType: action.bound, + setErrorMessage: action.bound, + setFormErrorMessage: action.bound, + setHasMoreAdvertsToLoad: action.bound, + setIsLoading: action.bound, + setIsLoadingAdverts: action.bound, + setIsSubmitDisabled: action.bound, + setShowAdPopup: action.bound, + setSubmitForm: action.bound, + showAdPopup: action.bound, + }); + } + get account_currency() { return this.advert?.account_currency; } - @computed get advert() { return this.root_store.buy_sell_store.selected_ad_state; } - @computed get advertiser_details() { return this.advert?.advertiser_details || {}; } - @computed get advertiser_details_id() { return this.advert?.advertiser_details?.id; } - @computed get advertiser_details_name() { return this.advert?.advertiser_details?.name; } - @computed get advertiser_full_name() { return `${this.advertiser_first_name} ${this.advertiser_last_name}`; } - @computed get short_name() { return getShortNickname(this.advertiser_details_name); } @@ -82,7 +126,6 @@ export default class AdvertiserPageStore extends BaseStore { }); } - @action.bound getAdvertiserInfo() { this.setIsLoading(true); @@ -103,7 +146,6 @@ export default class AdvertiserPageStore extends BaseStore { }); } - @action.bound handleTabItemClick(idx) { this.setActiveIndex(idx); if (idx === 0) { @@ -113,18 +155,15 @@ export default class AdvertiserPageStore extends BaseStore { } } - @action.bound onCancelClick() { this.setShowAdPopup(false); } - @action.bound onConfirmClick(order_info) { const nav = { location: 'buy_sell' }; this.root_store.general_store.redirectTo('orders', { order_info, nav }); } - @action.bound onMount() { this.getAdvertiserInfo(); } @@ -134,82 +173,66 @@ export default class AdvertiserPageStore extends BaseStore { this.loadMoreAdvertiserAdverts({ startIndex: 0 }); } - @action.bound setActiveIndex(active_index) { this.active_index = active_index; } - @action.bound setAd(ad) { this.ad = ad; } - @action.bound setAdvertiserFirstName(advertiser_first_name) { this.advertiser_first_name = advertiser_first_name; } - @action.bound setAdvertiserLastName(advertiser_last_name) { this.advertiser_last_name = advertiser_last_name; } - @action.bound setAdvertiserInfo(advertiser_info) { this.advertiser_info = advertiser_info; } - @action.bound setAdverts(adverts) { this.adverts = adverts; } - @action.bound setCounterpartyType(counterparty_type) { this.counterparty_type = counterparty_type; } - @action.bound setErrorMessage(api_error_message) { this.api_error_message = api_error_message; } - @action.bound setFormErrorMessage(form_error_message) { this.form_error_message = form_error_message; } - @action.bound setHasMoreAdvertsToLoad(has_more_adverts_to_load) { this.has_more_adverts_to_load = has_more_adverts_to_load; } - @action.bound setIsLoading(is_loading) { this.is_loading = is_loading; } - @action.bound setIsLoadingAdverts(is_loading_adverts) { this.is_loading_adverts = is_loading_adverts; } - @action.bound setIsSubmitDisabled(is_submit_disabled) { this.is_submit_disabled = is_submit_disabled; } - @action.bound setShowAdPopup(show_ad_popup) { this.show_ad_popup = show_ad_popup; } - @action.bound setSubmitForm(submitFormFn) { this.submitForm = submitFormFn; } - @action.bound showAdPopup() { if (!this.root_store.general_store.is_advertiser) { this.root_store.buy_sell_store.showVerification(); diff --git a/packages/p2p/src/stores/buy-sell-store.js b/packages/p2p/src/stores/buy-sell-store.js index aac019721495..079c50a288a2 100644 --- a/packages/p2p/src/stores/buy-sell-store.js +++ b/packages/p2p/src/stores/buy-sell-store.js @@ -1,4 +1,4 @@ -import { action, computed, observable, reaction } from 'mobx'; +import { action, computed, observable, reaction, makeObservable } from 'mobx'; import { formatMoney, getDecimalPlaces, getRoundedNumber, isMobile } from '@deriv/shared'; import { localize } from 'Components/i18next'; import { buy_sell } from 'Constants/buy-sell'; @@ -8,35 +8,35 @@ import { countDecimalPlaces } from 'Utils/string'; import BaseStore from 'Stores/base_store'; export default class BuySellStore extends BaseStore { - @observable api_error_message = ''; - @observable contact_info = ''; - @observable error_message = ''; - @observable form_error_code = ''; - @observable has_more_items_to_load = false; - @observable has_payment_methods = false; - @observable is_filter_modal_loading = false; - @observable is_filter_modal_open = false; - @observable is_loading = true; - @observable is_sort_dropdown_open = false; - @observable is_submit_disabled = true; - @observable items = []; - @observable payment_info = ''; - @observable receive_amount = 0; - @observable search_results = []; - @observable search_term = ''; - @observable selected_ad_state = {}; - @observable selected_payment_method_value = []; - @observable selected_payment_method_text = []; - @observable selected_value = 'rate'; - @observable should_show_popup = false; - @observable should_show_verification = false; - @observable should_use_client_limits = false; - @observable show_advertiser_page = false; - @observable show_filter_payment_methods = false; - @observable sort_by = 'rate'; - @observable submitForm = () => {}; - @observable table_type = buy_sell.BUY; - @observable form_props = {}; + api_error_message = ''; + contact_info = ''; + error_message = ''; + form_error_code = ''; + has_more_items_to_load = false; + has_payment_methods = false; + is_filter_modal_loading = false; + is_filter_modal_open = false; + is_loading = true; + is_sort_dropdown_open = false; + is_submit_disabled = true; + items = []; + payment_info = ''; + receive_amount = 0; + search_results = []; + search_term = ''; + selected_ad_state = {}; + selected_payment_method_value = []; + selected_payment_method_text = []; + selected_value = 'rate'; + should_show_popup = false; + should_show_verification = false; + should_use_client_limits = false; + show_advertiser_page = false; + show_filter_payment_methods = false; + sort_by = 'rate'; + submitForm = () => {}; + table_type = buy_sell.BUY; + form_props = {}; initial_values = { amount: this.advert?.min_order_amount_limit, @@ -50,37 +50,121 @@ export default class BuySellStore extends BaseStore { { text: localize('Completion rate'), value: 'completion' }, ]; - @computed + constructor({ general_store, root_store }) { + // TODO: [mobx-undecorate] verify the constructor arguments and the arguments of this automatically generated super call + super({ general_store, root_store }); + + makeObservable(this, { + api_error_message: observable, + contact_info: observable, + error_message: observable, + form_error_code: observable, + has_more_items_to_load: observable, + has_payment_methods: observable, + is_filter_modal_loading: observable, + is_filter_modal_open: observable, + is_loading: observable, + is_sort_dropdown_open: observable, + is_submit_disabled: observable, + items: observable, + payment_info: observable, + receive_amount: observable, + search_results: observable, + search_term: observable, + selected_ad_state: observable, + selected_payment_method_value: observable, + selected_payment_method_text: observable, + selected_value: observable, + should_show_popup: observable, + should_show_verification: observable, + should_use_client_limits: observable, + show_advertiser_page: observable, + show_filter_payment_methods: observable, + sort_by: observable, + submitForm: observable, + table_type: observable, + form_props: observable, + account_currency: computed, + advert: computed, + has_payment_info: computed, + is_buy: computed, + is_buy_advert: computed, + is_sell_advert: computed, + modal_title: computed, + rendered_items: computed, + should_filter_by_payment_method: computed, + getAdvertiserInfo: action.bound, + handleChange: action.bound, + handleSubmit: action.bound, + hideAdvertiserPage: action.bound, + hideVerification: action.bound, + loadMoreItems: action.bound, + onCancelClick: action.bound, + onChangeTableType: action.bound, + onClickApply: action.bound, + onClickReset: action.bound, + onConfirmClick: action.bound, + setApiErrorMessage: action.bound, + setContactInfo: action.bound, + setErrorMessage: action.bound, + setFormErrorCode: action.bound, + setFormProps: action.bound, + setHasMoreItemsToLoad: action.bound, + setHasPaymentMethods: action.bound, + setIsFilterModalLoading: action.bound, + setIsFilterModalOpen: action.bound, + setIsLoading: action.bound, + setIsSortDropdownOpen: action.bound, + setIsSubmitDisabled: action.bound, + setItems: action.bound, + setPaymentInfo: action.bound, + setInitialReceiveAmount: action.bound, + setReceiveAmount: action.bound, + setSearchResults: action.bound, + setSearchTerm: action.bound, + setSelectedAdState: action.bound, + setSelectedPaymentMethodValue: action.bound, + setSelectedPaymentMethodText: action.bound, + setSelectedValue: action.bound, + setShouldShowPopup: action.bound, + setShouldShowVerification: action.bound, + setShouldUseClientLimits: action.bound, + setShowAdvertiserPage: action.bound, + setShowFilterPaymentMethods: action.bound, + setSortBy: action.bound, + setTableType: action.bound, + setSelectedAdvert: action.bound, + setSubmitFormFn: action.bound, + showAdvertiserPage: action.bound, + showVerification: action.bound, + validatePopup: action.bound, + }); + } + get account_currency() { return this.advert?.account_currency; } - @computed get advert() { return this.form_props?.advert; } - @computed get has_payment_info() { return this.contact_info.length; } - @computed get is_buy() { return this.table_type === buy_sell.BUY; } - @computed get is_buy_advert() { return this.advert?.counterparty_type === buy_sell.BUY; } - @computed get is_sell_advert() { return this.advert?.counterparty_type === buy_sell.SELL; } - @computed get modal_title() { if (this.is_buy_advert) { return localize('Buy {{ account_currency }}', { account_currency: this.account_currency }); @@ -89,7 +173,6 @@ export default class BuySellStore extends BaseStore { return localize('Sell {{ account_currency }}', { account_currency: this.account_currency }); } - @computed get rendered_items() { if (isMobile()) { if (this.search_term) { @@ -113,13 +196,11 @@ export default class BuySellStore extends BaseStore { return this.items; } - @computed get should_filter_by_payment_method() { const { my_profile_store } = this.root_store; return my_profile_store.payment_methods_list_values !== this.selected_payment_method_value; } - @action.bound getAdvertiserInfo() { requestWS({ p2p_advertiser_info: 1, @@ -138,7 +219,6 @@ export default class BuySellStore extends BaseStore { }); } - @action.bound handleChange(e) { this.setIsLoading(true); this.setSelectedValue(e.target.value); @@ -148,7 +228,6 @@ export default class BuySellStore extends BaseStore { this.setIsSortDropdownOpen(false); } - @action.bound handleSubmit = async (isMountedFn, values, { setSubmitting }) => { if (isMountedFn()) { setSubmitting(true); @@ -185,17 +264,14 @@ export default class BuySellStore extends BaseStore { } }; - @action.bound hideAdvertiserPage() { this.setShowAdvertiserPage(false); } - @action.bound hideVerification() { this.setShouldShowVerification(false); } - @action.bound loadMoreItems({ startIndex }) { const { general_store } = this.root_store; const counterparty_type = this.is_buy ? buy_sell.BUY : buy_sell.SELL; @@ -269,17 +345,14 @@ export default class BuySellStore extends BaseStore { }); } - @action.bound onCancelClick() { this.setShouldShowPopup(false); } - @action.bound onChangeTableType(event) { this.setTableType(event.target.value); } - @action.bound onClickApply(payment_method_value, payment_method_text) { this.setSelectedPaymentMethodValue(payment_method_value); this.setSelectedPaymentMethodText(payment_method_text); @@ -289,12 +362,10 @@ export default class BuySellStore extends BaseStore { this.setIsFilterModalOpen(false); } - @action.bound onClickReset() { this.setShouldUseClientLimits(false); } - @action.bound onConfirmClick(order_info) { const { general_store, order_store } = this.root_store; @@ -317,77 +388,62 @@ export default class BuySellStore extends BaseStore { }; } - @action.bound setApiErrorMessage(api_error_message) { this.api_error_message = api_error_message; } - @action.bound setContactInfo(contact_info) { this.contact_info = contact_info; } - @action.bound setErrorMessage(error_message) { this.error_message = error_message; } - @action.bound setFormErrorCode(form_error_code) { this.form_error_code = form_error_code; } - @action.bound setFormProps(props) { this.form_props = props; } - @action.bound setHasMoreItemsToLoad(has_more_items_to_load) { this.has_more_items_to_load = has_more_items_to_load; } - @action.bound setHasPaymentMethods(has_payment_methods) { this.has_payment_methods = has_payment_methods; } - @action.bound setIsFilterModalLoading(is_filter_modal_loading) { this.is_filter_modal_loading = is_filter_modal_loading; } - @action.bound setIsFilterModalOpen(is_filter_modal_open) { this.is_filter_modal_open = is_filter_modal_open; } - @action.bound setIsLoading(is_loading) { this.is_loading = is_loading; } - @action.bound setIsSortDropdownOpen(is_sort_dropdown_open) { this.is_sort_dropdown_open = is_sort_dropdown_open; } - @action.bound setIsSubmitDisabled(is_submit_disabled) { this.is_submit_disabled = is_submit_disabled; } - @action.bound setItems(items) { this.items = items; } - @action.bound setPaymentInfo(payment_info) { this.payment_info = payment_info; } - @action.bound setInitialReceiveAmount() { this.receive_amount = getRoundedNumber( this.advert.min_order_amount_limit * this.advert.price, @@ -395,77 +451,62 @@ export default class BuySellStore extends BaseStore { ); } - @action.bound setReceiveAmount(receive_amount) { this.receive_amount = receive_amount; } - @action.bound setSearchResults(search_results) { this.search_results = search_results; } - @action.bound setSearchTerm(search_term) { this.search_term = search_term; } - @action.bound setSelectedAdState(selected_ad_state) { this.selected_ad_state = selected_ad_state; } - @action.bound setSelectedPaymentMethodValue(payment_method_value) { this.selected_payment_method_value = [...payment_method_value]; } - @action.bound setSelectedPaymentMethodText(payment_method_text) { this.selected_payment_method_text = [...payment_method_text]; } - @action.bound setSelectedValue(selected_value) { this.selected_value = selected_value; } - @action.bound setShouldShowPopup(should_show_popup) { this.should_show_popup = should_show_popup; } - @action.bound setShouldShowVerification(should_show_verification) { this.should_show_verification = should_show_verification; } - @action.bound setShouldUseClientLimits(should_use_client_limits) { this.should_use_client_limits = should_use_client_limits; } - @action.bound setShowAdvertiserPage(show_advertiser_page) { this.show_advertiser_page = show_advertiser_page; } - @action.bound setShowFilterPaymentMethods(show_filter_payment_methods) { this.show_filter_payment_methods = show_filter_payment_methods; } - @action.bound setSortBy(sort_by) { this.sort_by = sort_by; } - @action.bound setTableType(table_type) { this.table_type = table_type; } - @action.bound setSelectedAdvert(selected_advert) { if (!this.root_store.general_store.is_advertiser) { this.setShouldShowVerification(true); @@ -479,23 +520,19 @@ export default class BuySellStore extends BaseStore { } } - @action.bound setSubmitFormFn(submitFormFn) { this.submitForm = submitFormFn; } - @action.bound showAdvertiserPage(selected_advert) { this.setSelectedAdState(selected_advert); this.setShowAdvertiserPage(true); } - @action.bound showVerification() { this.setShouldShowVerification(true); } - @action.bound validatePopup(values) { const validations = { amount: [ diff --git a/packages/p2p/src/stores/general-store.js b/packages/p2p/src/stores/general-store.js index b05f48b53330..7daffcb4839a 100644 --- a/packages/p2p/src/stores/general-store.js +++ b/packages/p2p/src/stores/general-store.js @@ -1,5 +1,5 @@ import React from 'react'; -import { action, computed, observable, reaction } from 'mobx'; +import { action, computed, observable, reaction, makeObservable } from 'mobx'; import { isEmptyObject, isMobile, toMoment } from '@deriv/shared'; import BaseStore from 'Stores/base_store'; import { localize, Localize } from 'Components/i18next'; @@ -9,29 +9,29 @@ import { init as WebsocketInit, requestWS, subscribeWS } from 'Utils/websocket'; import { order_list } from '../constants/order-list'; export default class GeneralStore extends BaseStore { - @observable active_index = 0; - @observable active_notification_count = 0; - @observable advertiser_id = null; - @observable inactive_notification_count = 0; - @observable is_advertiser = false; - @observable is_blocked = false; - @observable is_listed = false; - @observable is_loading = false; - @observable is_p2p_blocked_for_pa = false; - @observable is_restricted = false; - @observable nickname = null; - @observable nickname_error = ''; - @observable notification_count = 0; - @observable order_table_type = order_list.ACTIVE; - @observable orders = []; - @observable order_timeout = 0; - @observable parameters = null; - @observable poi_status = null; - @observable.ref props = {}; - @observable should_show_real_name = false; - @observable should_show_popup = false; - @observable user_blocked_until = null; - @observable is_high_risk_fully_authed_without_fa = false; + active_index = 0; + active_notification_count = 0; + advertiser_id = null; + inactive_notification_count = 0; + is_advertiser = false; + is_blocked = false; + is_listed = false; + is_loading = false; + is_p2p_blocked_for_pa = false; + is_restricted = false; + nickname = null; + nickname_error = ''; + notification_count = 0; + order_table_type = order_list.ACTIVE; + orders = []; + order_timeout = 0; + parameters = null; + poi_status = null; + props = {}; + should_show_real_name = false; + should_show_popup = false; + user_blocked_until = null; + is_high_risk_fully_authed_without_fa = false; list_item_limit = isMobile() ? 10 : 50; path = { @@ -43,37 +43,102 @@ export default class GeneralStore extends BaseStore { ws_subscriptions = {}; service_token_timeout; - @computed + constructor({ general_store }) { + // TODO: [mobx-undecorate] verify the constructor arguments and the arguments of this automatically generated super call + super({ general_store }); + + makeObservable(this, { + active_index: observable, + active_notification_count: observable, + advertiser_id: observable, + inactive_notification_count: observable, + is_advertiser: observable, + is_blocked: observable, + is_listed: observable, + is_loading: observable, + is_p2p_blocked_for_pa: observable, + is_restricted: observable, + nickname: observable, + nickname_error: observable, + notification_count: observable, + order_table_type: observable, + orders: observable, + order_timeout: observable, + parameters: observable, + poi_status: observable, + props: observable.ref, + should_show_real_name: observable, + should_show_popup: observable, + user_blocked_until: observable, + is_high_risk_fully_authed_without_fa: observable, + client: computed, + blocked_until_date_time: computed, + is_active_tab: computed, + is_barred: computed, + is_my_profile_tab_visible: computed, + should_show_dp2p_blocked: computed, + createAdvertiser: action.bound, + handleNotifications: action.bound, + handleTabClick: action.bound, + onMount: action.bound, + onUnmount: action.bound, + onNicknamePopupClose: action.bound, + redirectTo: action.bound, + setActiveIndex: action.bound, + setActiveNotificationCount: action.bound, + setAdvertiserId: action.bound, + setAppProps: action.bound, + setInactiveNotificationCount: action.bound, + setIsAdvertiser: action.bound, + setIsBlocked: action.bound, + setIsHighRiskFullyAuthedWithoutFa: action.bound, + setIsListed: action.bound, + setIsLoading: action.bound, + setIsP2pBlockedForPa: action.bound, + setIsRestricted: action.bound, + setNickname: action.bound, + setNicknameError: action.bound, + setNotificationCount: action.bound, + setOrderTableType: action.bound, + setOrderTimeOut: action.bound, + setP2PConfig: action.bound, + setP2pOrderList: action.bound, + setParameters: action.bound, + setPoiStatus: action.bound, + setShouldShowRealName: action.bound, + setShouldShowPopup: action.bound, + setUserBlockedUntil: action.bound, + setWebsocketInit: action.bound, + toggleNicknamePopup: action.bound, + updateAdvertiserInfo: action.bound, + updateP2pNotifications: action.bound, + }); + } + get client() { return this.props?.client || {}; } - @computed get blocked_until_date_time() { return getFormattedDateString(new Date(convertToMillis(this.user_blocked_until)), false, true); } - @computed get is_active_tab() { return this.order_table_type === order_list.ACTIVE; } - @computed get is_barred() { return !!this.user_blocked_until; } - @computed get is_my_profile_tab_visible() { return this.is_advertiser && !this.root_store.my_profile_store.should_hide_my_profile_tab; } - @computed get should_show_dp2p_blocked() { return this.is_blocked || this.is_high_risk_fully_authed_without_fa; } - @action.bound createAdvertiser(name) { requestWS({ p2p_advertiser_create: 1, @@ -89,7 +154,7 @@ export default class GeneralStore extends BaseStore { this.setIsAdvertiser(!!p2p_advertiser_create.is_approved); this.setNickname(p2p_advertiser_create.name); this.setNicknameError(undefined); - sendbird_store.handleP2pAdvertiserInfo(response); + sendbird_store?.handleP2pAdvertiserInfo(response); this.toggleNicknamePopup(); buy_sell_store.hideVerification(); } @@ -110,7 +175,6 @@ export default class GeneralStore extends BaseStore { return local_storage_settings; } - @action.bound handleNotifications(old_orders, new_orders) { const { order_store } = this.root_store; const { client, props } = this; @@ -160,13 +224,11 @@ export default class GeneralStore extends BaseStore { this.updateP2pNotifications(notifications); } - @action.bound handleTabClick(idx) { this.setActiveIndex(idx); this.setParameters(null); } - @action.bound onMount() { this.setIsLoading(true); this.setIsBlocked(false); @@ -236,7 +298,7 @@ export default class GeneralStore extends BaseStore { p2p_advertiser_info: 1, subscribe: 1, }, - [this.updateAdvertiserInfo, response => sendbird_store.handleP2pAdvertiserInfo(response)] + [this.updateAdvertiserInfo, response => sendbird_store?.handleP2pAdvertiserInfo(response)] ), order_list_subscription: subscribeWS( { @@ -255,7 +317,6 @@ export default class GeneralStore extends BaseStore { }); } - @action.bound onUnmount() { clearTimeout(this.service_token_timeout); clearTimeout(this.user_blocked_timeout); @@ -267,7 +328,6 @@ export default class GeneralStore extends BaseStore { } } - @action.bound onNicknamePopupClose() { this.setShouldShowPopup(false); } @@ -287,101 +347,82 @@ export default class GeneralStore extends BaseStore { } }; - @action.bound redirectTo(path_name, params = null) { this.setActiveIndex(this.path[path_name]); this.setParameters(params); } - @action.bound setActiveIndex(active_index) { this.active_index = active_index; } - @action.bound setActiveNotificationCount(active_notification_count) { this.active_notification_count = active_notification_count; } - @action.bound setAdvertiserId(advertiser_id) { this.advertiser_id = advertiser_id; } - @action.bound setAppProps(props) { this.props = props; } - @action.bound setInactiveNotificationCount(inactive_notification_count) { this.inactive_notification_count = inactive_notification_count; } - @action.bound setIsAdvertiser(is_advertiser) { this.is_advertiser = is_advertiser; } - @action.bound setIsBlocked(is_blocked) { this.is_blocked = is_blocked; } - @action.bound setIsHighRiskFullyAuthedWithoutFa(is_high_risk_fully_authed_without_fa) { this.is_high_risk_fully_authed_without_fa = is_high_risk_fully_authed_without_fa; } - @action.bound setIsListed(is_listed) { this.is_listed = is_listed; } - @action.bound setIsLoading(is_loading) { this.is_loading = is_loading; } - @action.bound setIsP2pBlockedForPa(is_p2p_blocked_for_pa) { this.is_p2p_blocked_for_pa = is_p2p_blocked_for_pa; } - @action.bound setIsRestricted(is_restricted) { this.is_restricted = is_restricted; } - @action.bound setNickname(nickname) { this.nickname = nickname; } - @action.bound setNicknameError(nickname_error) { this.nickname_error = nickname_error; } - @action.bound setNotificationCount(notification_count) { this.notification_count = notification_count; } - @action.bound setOrderTableType(order_table_type) { const { order_store } = this.root_store; - order_store.setIsLoading(true); + order_store?.setIsLoading(true); this.order_table_type = order_table_type; } - @action.bound setOrderTimeOut(time) { this.order_timeout = time; } - @action.bound setP2PConfig() { requestWS({ website_status: 1 }).then(response => { if (response && !response.error) { @@ -391,7 +432,6 @@ export default class GeneralStore extends BaseStore { }); } - @action.bound setP2pOrderList(order_response) { if (order_response.error) { this.ws_subscriptions.order_list_subscription.unsubscribe(); @@ -404,12 +444,12 @@ export default class GeneralStore extends BaseStore { if (p2p_order_list) { const { list } = p2p_order_list; // it's an array of orders from p2p_order_list - this.handleNotifications(order_store.orders, list); + this.handleNotifications(order_store?.orders, list); list.forEach(order => order_store.syncOrder(order)); } else if (p2p_order_info) { // it's a single order from p2p_order_info - const idx_order_to_update = order_store.orders.findIndex(order => order.id === p2p_order_info.id); - const updated_orders = [...order_store.orders]; + const idx_order_to_update = order_store?.orders.findIndex(order => order.id === p2p_order_info.id); + const updated_orders = [...order_store?.orders]; // if it's a new order, add it to the top of the list if (idx_order_to_update < 0) { updated_orders.unshift(p2p_order_info); @@ -418,48 +458,40 @@ export default class GeneralStore extends BaseStore { updated_orders[idx_order_to_update] = p2p_order_info; } - this.handleNotifications(order_store.orders, updated_orders); + this.handleNotifications(order_store?.orders, updated_orders); order_store.syncOrder(p2p_order_info); } } - @action.bound setParameters(parameters) { this.parameters = parameters; } - @action.bound setPoiStatus(poi_status) { this.poi_status = poi_status; } - @action.bound setShouldShowRealName(should_show_real_name) { this.should_show_real_name = should_show_real_name; } - @action.bound setShouldShowPopup(should_show_popup) { this.should_show_popup = should_show_popup; } - @action.bound setUserBlockedUntil(user_blocked_until) { this.user_blocked_until = user_blocked_until; } - @action.bound setWebsocketInit = (websocket, local_currency_decimal_places) => { WebsocketInit(websocket, local_currency_decimal_places); }; - @action.bound toggleNicknamePopup() { this.setShouldShowPopup(!this.should_show_popup); this.setNicknameError(undefined); } - @action.bound updateAdvertiserInfo(response) { const { p2p_advertiser_info } = response; if (!response.error) { @@ -496,7 +528,6 @@ export default class GeneralStore extends BaseStore { this.setIsLoading(false); } - @action.bound updateP2pNotifications(notifications) { const unseen_notifications = notifications.filter(notification => notification.is_seen === false); const notification_count = unseen_notifications.length; diff --git a/packages/p2p/src/stores/my-ads-store.js b/packages/p2p/src/stores/my-ads-store.js index 0cb904e21848..7479ba5ddc55 100644 --- a/packages/p2p/src/stores/my-ads-store.js +++ b/packages/p2p/src/stores/my-ads-store.js @@ -1,4 +1,4 @@ -import { action, observable } from 'mobx'; +import { action, observable, makeObservable } from 'mobx'; import { getDecimalPlaces } from '@deriv/shared'; import { localize } from 'Components/i18next'; import { buy_sell } from 'Constants/buy-sell'; @@ -8,45 +8,140 @@ import { decimalValidator, lengthValidator, textValidator } from 'Utils/validati import { requestWS } from 'Utils/websocket'; export default class MyAdsStore extends BaseStore { - @observable activate_deactivate_error_message = ''; - @observable advert_details = null; - @observable adverts = []; - @observable adverts_archive_period = null; - @observable api_error = ''; - @observable api_error_message = ''; - @observable api_table_error_message = ''; - @observable available_balance = null; - @observable contact_info = ''; - @observable default_advert_description = ''; - @observable delete_error_message = ''; - @observable edit_ad_form_error = ''; - @observable error_message = ''; - @observable has_more_items_to_load = false; - @observable has_missing_payment_methods = false; - @observable is_ad_created_modal_visible = false; - @observable is_ad_exceeds_daily_limit_modal_open = false; - @observable is_api_error_modal_visible = false; - @observable is_delete_modal_open = false; - @observable is_edit_ad_error_modal_visible = false; - @observable is_form_loading = false; - @observable is_quick_add_error_modal_open = false; - @observable is_quick_add_modal_open = false; - @observable is_table_loading = false; - @observable is_loading = false; - @observable item_offset = 0; - @observable p2p_advert_information = {}; - @observable selected_ad_id = ''; - @observable selected_advert = null; - @observable should_show_add_payment_method = false; - @observable should_show_add_payment_method_modal = false; - @observable show_ad_form = false; - @observable show_edit_ad_form = false; - @observable update_payment_methods_error_message = ''; + activate_deactivate_error_message = ''; + advert_details = null; + adverts = []; + adverts_archive_period = null; + api_error = ''; + api_error_message = ''; + api_table_error_message = ''; + available_balance = null; + contact_info = ''; + default_advert_description = ''; + delete_error_message = ''; + edit_ad_form_error = ''; + error_message = ''; + has_more_items_to_load = false; + has_missing_payment_methods = false; + is_ad_created_modal_visible = false; + is_ad_exceeds_daily_limit_modal_open = false; + is_api_error_modal_visible = false; + is_delete_modal_open = false; + is_edit_ad_error_modal_visible = false; + is_form_loading = false; + is_quick_add_error_modal_open = false; + is_quick_add_modal_open = false; + is_table_loading = false; + is_loading = false; + item_offset = 0; + p2p_advert_information = {}; + selected_ad_id = ''; + selected_advert = null; + should_show_add_payment_method = false; + should_show_add_payment_method_modal = false; + show_ad_form = false; + show_edit_ad_form = false; + update_payment_methods_error_message = ''; payment_method_ids = []; payment_method_names = []; - @action.bound + constructor({ general_store }) { + // TODO: [mobx-undecorate] verify the constructor arguments and the arguments of this automatically generated super call + super({ general_store }); + + makeObservable(this, { + activate_deactivate_error_message: observable, + advert_details: observable, + adverts: observable, + adverts_archive_period: observable, + api_error: observable, + api_error_message: observable, + api_table_error_message: observable, + available_balance: observable, + contact_info: observable, + default_advert_description: observable, + delete_error_message: observable, + edit_ad_form_error: observable, + error_message: observable, + has_more_items_to_load: observable, + has_missing_payment_methods: observable, + is_ad_created_modal_visible: observable, + is_ad_exceeds_daily_limit_modal_open: observable, + is_api_error_modal_visible: observable, + is_delete_modal_open: observable, + is_edit_ad_error_modal_visible: observable, + is_form_loading: observable, + is_quick_add_error_modal_open: observable, + is_quick_add_modal_open: observable, + is_table_loading: observable, + is_loading: observable, + item_offset: observable, + p2p_advert_information: observable, + selected_ad_id: observable, + selected_advert: observable, + should_show_add_payment_method: observable, + should_show_add_payment_method_modal: observable, + show_ad_form: observable, + show_edit_ad_form: observable, + update_payment_methods_error_message: observable, + getAccountStatus: action.bound, + getAdvertInfo: action.bound, + getAdvertiserInfo: action.bound, + getWebsiteStatus: action.bound, + handleSubmit: action.bound, + hideQuickAddModal: action.bound, + onClickActivateDeactivate: action.bound, + onClickCancel: action.bound, + onClickConfirm: action.bound, + onClickCreate: action.bound, + onClickDelete: action.bound, + onClickEdit: action.bound, + onClickSaveEditAd: action.bound, + onClickUpdatePaymentMethods: action.bound, + loadMoreAds: action.bound, + restrictLength: action.bound, + showQuickAddModal: action.bound, + setActivateDeactivateErrorMessage: action.bound, + setAdvertDetails: action.bound, + setAdverts: action.bound, + setAdvertsArchivePeriod: action.bound, + setApiError: action.bound, + setApiErrorMessage: action.bound, + setApiTableErrorMessage: action.bound, + setAvailableBalance: action.bound, + setContactInfo: action.bound, + setCreateAdErrorCode: action.bound, + setDefaultAdvertDescription: action.bound, + setDeleteErrorMessage: action.bound, + setEditAdFormError: action.bound, + setErrorMessage: action.bound, + setHasMoreItemsToLoad: action.bound, + setMissingPaymentMethods: action.bound, + setIsAdCreatedModalVisible: action.bound, + setIsAdExceedsDailyLimitModalOpen: action.bound, + setIsApiErrorModalVisible: action.bound, + setIsDeleteModalOpen: action.bound, + setIsEditAdErrorModalVisible: action.bound, + setIsFormLoading: action.bound, + setIsLoading: action.bound, + setIsQuickAddErrorModalOpen: action.bound, + setIsQuickAddModalOpen: action.bound, + setIsTableLoading: action.bound, + setItemOffset: action.bound, + setP2pAdvertInformation: action.bound, + setSelectedAdId: action.bound, + setSelectedAdvert: action.bound, + setShouldShowAddPaymentMethod: action.bound, + setShouldShowAddPaymentMethodModal: action.bound, + setShowAdForm: action.bound, + setShowEditAdForm: action.bound, + setUpdatePaymentMethodsErrorMessage: action.bound, + validateCreateAdForm: action.bound, + validateEditAdForm: action.bound, + }); + } + getAccountStatus() { this.setIsLoading(true); @@ -66,7 +161,6 @@ export default class MyAdsStore extends BaseStore { } } - @action.bound getAdvertInfo() { this.setIsFormLoading(true); @@ -86,7 +180,6 @@ export default class MyAdsStore extends BaseStore { }); } - @action.bound getAdvertiserInfo() { this.setIsFormLoading(true); @@ -106,7 +199,6 @@ export default class MyAdsStore extends BaseStore { }); } - @action.bound getWebsiteStatus(createAd = () => {}, setSubmitting) { requestWS({ website_status: 1 }).then(response => { if (response.error) { @@ -120,7 +212,6 @@ export default class MyAdsStore extends BaseStore { }); } - @action.bound handleSubmit(values, { setSubmitting }) { this.setApiErrorMessage(''); @@ -181,13 +272,11 @@ export default class MyAdsStore extends BaseStore { } } - @action.bound hideQuickAddModal() { this.setIsQuickAddModalOpen(false); this.setSelectedAdId(undefined); } - @action.bound onClickActivateDeactivate(id, is_ad_active, setIsAdvertActive) { if (!this.root_store.general_store.is_barred) { requestWS({ p2p_advert_update: 1, id, is_active: is_ad_active ? 0 : 1 }).then(response => { @@ -201,13 +290,11 @@ export default class MyAdsStore extends BaseStore { } } - @action.bound onClickCancel() { this.setSelectedAdId(''); this.setShouldShowPopup(false); } - @action.bound onClickConfirm(showError) { requestWS({ p2p_advert_update: 1, id: this.selected_ad_id, delete: 1 }).then(response => { if (response.error) { @@ -221,12 +308,10 @@ export default class MyAdsStore extends BaseStore { }); } - @action.bound onClickCreate() { this.setShowAdForm(true); } - @action.bound onClickDelete(id) { if (!this.root_store.general_store.is_barred) { this.setSelectedAdId(id); @@ -234,7 +319,6 @@ export default class MyAdsStore extends BaseStore { } } - @action.bound onClickEdit(id) { if (!this.root_store.general_store.is_barred) { this.setSelectedAdId(id); @@ -243,7 +327,6 @@ export default class MyAdsStore extends BaseStore { } } - @action.bound onClickSaveEditAd(values, { setSubmitting }) { const is_sell_ad = values.type === buy_sell.SELL; @@ -281,7 +364,6 @@ export default class MyAdsStore extends BaseStore { }); } - @action.bound onClickUpdatePaymentMethods(id, is_buy_advert) { requestWS({ p2p_advert_update: 1, @@ -305,7 +387,6 @@ export default class MyAdsStore extends BaseStore { }); } - @action.bound loadMoreAds({ startIndex }, is_initial_load = false) { if (is_initial_load) { this.setIsTableLoading(true); @@ -337,7 +418,6 @@ export default class MyAdsStore extends BaseStore { }); } - @action.bound restrictLength = (e, handleChange) => { // typing more than 15 characters will break the layout // max doesn't disable typing, so we will use this to restrict length @@ -349,188 +429,151 @@ export default class MyAdsStore extends BaseStore { handleChange(e); }; - @action.bound showQuickAddModal(advert) { this.setSelectedAdId(advert); this.setIsQuickAddModalOpen(true); } - @action.bound setActivateDeactivateErrorMessage(activate_deactivate_error_message) { this.activate_deactivate_error_message = activate_deactivate_error_message; } - @action.bound setAdvertDetails(advert_details) { this.advert_details = advert_details; } - @action.bound setAdverts(adverts) { this.adverts = adverts; } - @action.bound setAdvertsArchivePeriod(adverts_archive_period) { this.adverts_archive_period = adverts_archive_period; } - @action.bound setApiError(api_error) { this.api_error = api_error; } - @action.bound setApiErrorMessage(api_error_message) { this.api_error_message = api_error_message; } - @action.bound setApiTableErrorMessage(api_table_error_message) { this.api_table_error_message = api_table_error_message; } - @action.bound setAvailableBalance(available_balance) { this.available_balance = available_balance; } - @action.bound setContactInfo(contact_info) { this.contact_info = contact_info; } - @action.bound setCreateAdErrorCode(create_ad_error_code) { this.create_ad_error_code = create_ad_error_code; } - @action.bound setDefaultAdvertDescription(default_advert_description) { this.default_advert_description = default_advert_description; } - @action.bound setDeleteErrorMessage(delete_error_message) { this.delete_error_message = delete_error_message; } - @action.bound setEditAdFormError(edit_ad_form_error) { this.edit_ad_form_error = edit_ad_form_error; } - @action.bound setErrorMessage(error_message) { this.error_message = error_message; } - @action.bound setHasMoreItemsToLoad(has_more_items_to_load) { this.has_more_items_to_load = has_more_items_to_load; } - @action.bound setMissingPaymentMethods(has_missing_payment_methods) { this.has_missing_payment_methods = has_missing_payment_methods; } - @action.bound setIsAdCreatedModalVisible(is_ad_created_modal_visible) { this.is_ad_created_modal_visible = is_ad_created_modal_visible; } - @action.bound setIsAdExceedsDailyLimitModalOpen(is_ad_exceeds_daily_limit_modal_open) { this.is_ad_exceeds_daily_limit_modal_open = is_ad_exceeds_daily_limit_modal_open; } - @action.bound setIsApiErrorModalVisible(is_api_error_modal_visible) { this.is_api_error_modal_visible = is_api_error_modal_visible; } - @action.bound setIsDeleteModalOpen(is_delete_modal_open) { this.is_delete_modal_open = is_delete_modal_open; } - @action.bound setIsEditAdErrorModalVisible(is_edit_ad_error_modal_visible) { this.is_edit_ad_error_modal_visible = is_edit_ad_error_modal_visible; } - @action.bound setIsFormLoading(is_form_loading) { this.is_form_loading = is_form_loading; } - @action.bound setIsLoading(is_loading) { this.is_loading = is_loading; } - @action.bound setIsQuickAddErrorModalOpen(is_quick_add_error_modal_open) { this.is_quick_add_error_modal_open = is_quick_add_error_modal_open; } - @action.bound setIsQuickAddModalOpen(is_quick_add_modal_open) { this.is_quick_add_modal_open = is_quick_add_modal_open; } - @action.bound setIsTableLoading(is_table_loading) { this.is_table_loading = is_table_loading; } - @action.bound setItemOffset(item_offset) { this.item_offset = item_offset; } - @action.bound setP2pAdvertInformation(p2p_advert_information) { this.p2p_advert_information = p2p_advert_information; } - @action.bound setSelectedAdId(selected_ad_id) { this.selected_ad_id = selected_ad_id; } - @action.bound setSelectedAdvert(selected_advert) { this.selected_advert = selected_advert; } - @action.bound setShouldShowAddPaymentMethod(should_show_add_payment_method) { this.should_show_add_payment_method = should_show_add_payment_method; } - @action.bound setShouldShowAddPaymentMethodModal(should_show_add_payment_method_modal) { this.should_show_add_payment_method_modal = should_show_add_payment_method_modal; } - @action.bound setShowAdForm(show_ad_form) { this.show_ad_form = show_ad_form; } - @action.bound setShowEditAdForm(show_edit_ad_form) { this.show_edit_ad_form = show_edit_ad_form; } - @action.bound setUpdatePaymentMethodsErrorMessage(update_payment_methods_error_message) { this.update_payment_methods_error_message = update_payment_methods_error_message; } - @action.bound validateCreateAdForm(values) { const validations = { default_advert_description: [v => !v || lengthValidator(v), v => !v || textValidator(v)], @@ -677,7 +720,6 @@ export default class MyAdsStore extends BaseStore { return errors; } - @action.bound validateEditAdForm(values) { const validations = { description: [v => !v || lengthValidator(v), v => !v || textValidator(v)], diff --git a/packages/p2p/src/stores/my-profile-store.js b/packages/p2p/src/stores/my-profile-store.js index 82b41e625516..d9900576657e 100644 --- a/packages/p2p/src/stores/my-profile-store.js +++ b/packages/p2p/src/stores/my-profile-store.js @@ -1,4 +1,4 @@ -import { observable, action, computed } from 'mobx'; +import { observable, action, computed, makeObservable } from 'mobx'; import { requestWS } from 'Utils/websocket'; import { localize } from 'Components/i18next'; import { textValidator } from 'Utils/validations'; @@ -6,48 +6,142 @@ import BaseStore from 'Stores/base_store'; import { my_profile_tabs } from 'Constants/my-profile-tabs'; export default class MyProfileStore extends BaseStore { - @observable active_tab = my_profile_tabs.MY_STATS; - @observable add_payment_method_error_message = ''; - @observable advertiser_info = {}; - @observable advertiser_payment_methods = {}; - @observable advertiser_payment_methods_error = ''; - @observable available_payment_methods = {}; - @observable balance_available = null; - @observable contact_info = ''; - @observable default_advert_description = ''; - @observable delete_error_message = ''; - @observable error_message = ''; - @observable form_error = ''; - @observable full_name = ''; - @observable is_button_loading = false; - @observable is_cancel_add_payment_method_modal_open = false; - @observable is_cancel_edit_payment_method_modal_open = false; - @observable is_confirm_delete_modal_open = false; - @observable is_delete_error_modal_open = false; - @observable is_loading = true; - @observable is_submit_success = false; - @observable payment_info = ''; - @observable payment_method_value = undefined; - @observable payment_methods_list = []; - @observable payment_method_to_delete = {}; - @observable payment_method_to_edit = {}; - @observable search_results = []; - @observable search_term = ''; - @observable selected_payment_method = ''; - @observable selected_payment_method_display_name = ''; - @observable selected_payment_method_fields = []; - @observable selected_payment_method_type = ''; - @observable should_hide_my_profile_tab = false; - @observable should_show_add_payment_method_error_modal = false; - @observable should_show_add_payment_method_form = false; - @observable should_show_edit_payment_method_form = false; - - @computed + active_tab = my_profile_tabs.MY_STATS; + add_payment_method_error_message = ''; + advertiser_info = {}; + advertiser_payment_methods = {}; + advertiser_payment_methods_error = ''; + available_payment_methods = {}; + balance_available = null; + contact_info = ''; + default_advert_description = ''; + delete_error_message = ''; + error_message = ''; + form_error = ''; + full_name = ''; + is_button_loading = false; + is_cancel_add_payment_method_modal_open = false; + is_cancel_edit_payment_method_modal_open = false; + is_confirm_delete_modal_open = false; + is_delete_error_modal_open = false; + is_loading = true; + is_submit_success = false; + payment_info = ''; + payment_method_value = undefined; + payment_methods_list = []; + payment_method_to_delete = {}; + payment_method_to_edit = {}; + search_results = []; + search_term = ''; + selected_payment_method = ''; + selected_payment_method_display_name = ''; + selected_payment_method_fields = []; + selected_payment_method_type = ''; + should_hide_my_profile_tab = false; + should_show_add_payment_method_error_modal = false; + should_show_add_payment_method_form = false; + should_show_edit_payment_method_form = false; + + constructor() { + // TODO: [mobx-undecorate] verify the constructor arguments and the arguments of this automatically generated super call + super(); + + makeObservable(this, { + active_tab: observable, + add_payment_method_error_message: observable, + advertiser_info: observable, + advertiser_payment_methods: observable, + advertiser_payment_methods_error: observable, + available_payment_methods: observable, + balance_available: observable, + contact_info: observable, + default_advert_description: observable, + delete_error_message: observable, + error_message: observable, + form_error: observable, + full_name: observable, + is_button_loading: observable, + is_cancel_add_payment_method_modal_open: observable, + is_cancel_edit_payment_method_modal_open: observable, + is_confirm_delete_modal_open: observable, + is_delete_error_modal_open: observable, + is_loading: observable, + is_submit_success: observable, + payment_info: observable, + payment_method_value: observable, + payment_methods_list: observable, + payment_method_to_delete: observable, + payment_method_to_edit: observable, + search_results: observable, + search_term: observable, + selected_payment_method: observable, + selected_payment_method_display_name: observable, + selected_payment_method_fields: observable, + selected_payment_method_type: observable, + should_hide_my_profile_tab: observable, + should_show_add_payment_method_error_modal: observable, + should_show_add_payment_method_form: observable, + should_show_edit_payment_method_form: observable, + advertiser_has_payment_methods: computed, + advertiser_payment_methods_list: computed, + initial_values: computed, + payment_method_info: computed, + payment_methods_list_items: computed, + payment_methods_list_methods: computed, + payment_methods_list_values: computed, + createPaymentMethod: action.bound, + getAdvertiserInfo: action.bound, + getAdvertiserPaymentMethods: action.bound, + getPaymentMethodsList: action.bound, + getPaymentMethodDisplayName: action.bound, + getPaymentMethodValue: action.bound, + getSelectedPaymentMethodDetails: action.bound, + handleSubmit: action.bound, + handleToggle: action.bound, + hideAddPaymentMethodForm: action.bound, + onClickDelete: action.bound, + showAddPaymentMethodForm: action.bound, + updatePaymentMethod: action.bound, + setActiveTab: action.bound, + setAddPaymentMethodErrorMessage: action.bound, + setAdvertiserInfo: action.bound, + setAdvertiserPaymentMethods: action.bound, + setAdvertiserPaymentMethodsError: action.bound, + setAvailablePaymentMethods: action.bound, + setBalanceAvailable: action.bound, + setContactInfo: action.bound, + setDefaultAdvertDescription: action.bound, + setDeleteErrorMessage: action.bound, + setErrorMessage: action.bound, + setFormError: action.bound, + setFullName: action.bound, + setIsCancelAddPaymentMethodModalOpen: action.bound, + setIsCancelEditPaymentMethodModalOpen: action.bound, + setIsConfirmDeleteModalOpen: action.bound, + setIsDeleteErrorModalOpen: action.bound, + setIsLoading: action.bound, + setIsSubmitSuccess: action.bound, + setPaymentMethodValue: action.bound, + setPaymentMethodsList: action.bound, + setPaymentMethodToDelete: action.bound, + setPaymentMethodToEdit: action.bound, + setSearchResults: action.bound, + setSearchTerm: action.bound, + setSelectedPaymentMethod: action.bound, + setSelectedPaymentMethodDisplayName: action.bound, + setSelectedPaymentMethodFields: action.bound, + setSelectedPaymentMethodType: action.bound, + setShouldHideMyProfileTab: action.bound, + setShouldShowAddPaymentMethodErrorModal: action.bound, + setShouldShowAddPaymentMethodForm: action.bound, + setShouldShowEditPaymentMethodForm: action.bound, + }); + } + get advertiser_has_payment_methods() { return !!Object.keys(this.advertiser_payment_methods).length; } - @computed get advertiser_payment_methods_list() { const list = []; @@ -64,7 +158,6 @@ export default class MyProfileStore extends BaseStore { return list; } - @computed get initial_values() { const object = {}; @@ -83,12 +176,10 @@ export default class MyProfileStore extends BaseStore { return object; } - @computed get payment_method_info() { return this.advertiser_payment_methods_list.filter(method => method.ID === this.payment_method_to_edit.ID)[0]; } - @computed get payment_methods_list_items() { const list_items = []; @@ -99,7 +190,6 @@ export default class MyProfileStore extends BaseStore { return list_items; } - @computed get payment_methods_list_methods() { const methods = []; @@ -116,7 +206,6 @@ export default class MyProfileStore extends BaseStore { return methods; } - @computed get payment_methods_list_values() { const list = []; @@ -125,7 +214,6 @@ export default class MyProfileStore extends BaseStore { return list; } - @action.bound createPaymentMethod(values, { setSubmitting }) { setSubmitting(true); requestWS({ @@ -166,7 +254,6 @@ export default class MyProfileStore extends BaseStore { }); } - @action.bound getAdvertiserInfo() { this.setIsLoading(true); this.setErrorMessage(''); @@ -189,7 +276,6 @@ export default class MyProfileStore extends BaseStore { }); } - @action.bound getAdvertiserPaymentMethods() { this.setIsLoading(true); requestWS({ @@ -204,7 +290,6 @@ export default class MyProfileStore extends BaseStore { }); } - @action.bound getPaymentMethodsList() { requestWS({ p2p_payment_methods: 1, @@ -238,13 +323,11 @@ export default class MyProfileStore extends BaseStore { }); } - @action.bound getPaymentMethodDisplayName(payment_method) { this.setSelectedPaymentMethodDisplayName(this.available_payment_methods[payment_method].display_name); return this.selected_payment_method_display_name; } - @action.bound getPaymentMethodValue(payment_method) { const method = Object.entries(this.available_payment_methods).filter( pm => pm[1].display_name === payment_method @@ -254,7 +337,6 @@ export default class MyProfileStore extends BaseStore { return this.payment_method_value; } - @action.bound getSelectedPaymentMethodDetails() { this.setPaymentMethodValue(undefined); @@ -289,7 +371,6 @@ export default class MyProfileStore extends BaseStore { } }); } - @action.bound handleSubmit(values) { requestWS({ p2p_advertiser_update: 1, @@ -311,7 +392,6 @@ export default class MyProfileStore extends BaseStore { }, 3000); }); } - @action.bound handleToggle() { this.root_store.general_store.setShouldShowRealName(!this.root_store?.general_store?.should_show_real_name); requestWS({ @@ -327,12 +407,10 @@ export default class MyProfileStore extends BaseStore { }); } - @action.bound hideAddPaymentMethodForm() { this.setShouldShowAddPaymentMethodForm(false); } - @action.bound onClickDelete() { requestWS({ p2p_advertiser_payment_methods: 1, @@ -348,12 +426,10 @@ export default class MyProfileStore extends BaseStore { }); } - @action.bound showAddPaymentMethodForm() { this.setShouldShowAddPaymentMethodForm(true); } - @action.bound updatePaymentMethod(values, { setSubmitting }) { requestWS({ p2p_advertiser_payment_methods: 1, @@ -419,167 +495,134 @@ export default class MyProfileStore extends BaseStore { return errors; }; - @action.bound setActiveTab(active_tab) { this.active_tab = active_tab; } - @action.bound setAddPaymentMethodErrorMessage(add_payment_method_error_message) { this.add_payment_method_error_message = add_payment_method_error_message; } - @action.bound setAdvertiserInfo(advertiser_info) { this.advertiser_info = advertiser_info; } - @action.bound setAdvertiserPaymentMethods(advertiser_payment_methods) { this.advertiser_payment_methods = advertiser_payment_methods; } - @action.bound setAdvertiserPaymentMethodsError(advertiser_payment_methods_error) { this.advertiser_payment_methods_error = advertiser_payment_methods_error; } - @action.bound setAvailablePaymentMethods(available_payment_methods) { this.available_payment_methods = available_payment_methods; } - @action.bound setBalanceAvailable(balance_available) { this.balance_available = balance_available; } - @action.bound setContactInfo(contact_info) { this.contact_info = contact_info; } - @action.bound setDefaultAdvertDescription(default_advert_description) { this.default_advert_description = default_advert_description; } - @action.bound setDeleteErrorMessage(delete_error_message) { this.delete_error_message = delete_error_message; } - @action.bound setErrorMessage(error_message) { this.error_message = error_message; } - @action.bound setFormError(form_error) { this.form_error = form_error; } - @action.bound setFullName(full_name) { this.full_name = full_name; } - @action.bound setIsCancelAddPaymentMethodModalOpen(is_cancel_add_payment_method_modal_open) { this.is_cancel_add_payment_method_modal_open = is_cancel_add_payment_method_modal_open; } - @action.bound setIsCancelEditPaymentMethodModalOpen(is_cancel_edit_payment_method_modal_open) { this.is_cancel_edit_payment_method_modal_open = is_cancel_edit_payment_method_modal_open; } - @action.bound setIsConfirmDeleteModalOpen(is_confirm_delete_modal_open) { this.is_confirm_delete_modal_open = is_confirm_delete_modal_open; } - @action.bound setIsDeleteErrorModalOpen(is_delete_error_modal_open) { this.is_delete_error_modal_open = is_delete_error_modal_open; } - @action.bound setIsLoading(is_loading) { this.is_loading = is_loading; } - @action.bound setIsSubmitSuccess(is_submit_success) { this.is_submit_success = is_submit_success; } - @action.bound setPaymentMethodValue(payment_method_value) { this.payment_method_value = payment_method_value; } - @action.bound setPaymentMethodsList(payment_methods_list) { this.payment_methods_list = payment_methods_list; } - @action.bound setPaymentMethodToDelete(payment_method_to_delete) { this.payment_method_to_delete = payment_method_to_delete; } - @action.bound setPaymentMethodToEdit(payment_method_to_edit) { this.payment_method_to_edit = payment_method_to_edit; } - @action.bound setSearchResults(search_results) { this.search_results = search_results; } - @action.bound setSearchTerm(search_term) { this.search_term = search_term; } - @action.bound setSelectedPaymentMethod(selected_payment_method) { this.selected_payment_method = selected_payment_method; } - @action.bound setSelectedPaymentMethodDisplayName(selected_payment_method_display_name) { this.selected_payment_method_display_name = selected_payment_method_display_name; } - @action.bound setSelectedPaymentMethodFields(selected_payment_method_fields) { this.selected_payment_method_fields = selected_payment_method_fields; } - @action.bound setSelectedPaymentMethodType(selected_payment_method_type) { this.selected_payment_method_type = selected_payment_method_type; } - @action.bound setShouldHideMyProfileTab(should_hide_my_profile_tab) { this.should_hide_my_profile_tab = should_hide_my_profile_tab; } - @action.bound setShouldShowAddPaymentMethodErrorModal(should_show_add_payment_method_error_modal) { this.should_show_add_payment_method_error_modal = should_show_add_payment_method_error_modal; } - @action.bound setShouldShowAddPaymentMethodForm(should_show_add_payment_method_form) { this.should_show_add_payment_method_form = should_show_add_payment_method_form; } - @action.bound setShouldShowEditPaymentMethodForm(should_show_edit_payment_method_form) { this.should_show_edit_payment_method_form = should_show_edit_payment_method_form; } diff --git a/packages/p2p/src/stores/order-details-store.js b/packages/p2p/src/stores/order-details-store.js index ac8acec9ec37..2950ec0ce920 100644 --- a/packages/p2p/src/stores/order-details-store.js +++ b/packages/p2p/src/stores/order-details-store.js @@ -1,19 +1,32 @@ -import { observable, action } from 'mobx'; +import { observable, action, makeObservable } from 'mobx'; import { secondsToTimer } from 'Utils/date-time'; import ServerTime from 'Utils/server-time'; import { localize } from 'Components/i18next'; export default class OrderDetailsStore { constructor(root_store) { + makeObservable(this, { + interval: observable, + popup_options: observable, + remaining_time: observable, + should_show_popup: observable, + countDownTimer: action.bound, + handleShowPopup: action.bound, + onCancelClick: action.bound, + setIntervalState: action.bound, + setPopupOptions: action.bound, + setRemainingTime: action.bound, + setShouldShowPopup: action.bound, + }); + this.root_store = root_store; } - @observable interval = null; - @observable popup_options = {}; - @observable remaining_time; - @observable should_show_popup = false; + interval = null; + popup_options = {}; + remaining_time; + should_show_popup = false; - @action.bound countDownTimer() { const distance = ServerTime.getDistanceToServerTime( this.root_store.order_store.order_information.order_expiry_milliseconds @@ -28,33 +41,27 @@ export default class OrderDetailsStore { } } - @action.bound handleShowPopup(options) { this.setPopupOptions(options); this.setShouldShowPopup(true); } - @action.bound onCancelClick() { this.setShouldShowPopup(false); } - @action.bound setIntervalState(interval) { this.interval = interval; } - @action.bound setPopupOptions(popup_options) { this.popup_options = popup_options; } - @action.bound setRemainingTime(remaining_time) { this.remaining_time = remaining_time; } - @action.bound setShouldShowPopup(should_show_popup) { this.should_show_popup = should_show_popup; } diff --git a/packages/p2p/src/stores/order-store.js b/packages/p2p/src/stores/order-store.js index 855ab9d5a67d..c58e7c17ea60 100644 --- a/packages/p2p/src/stores/order-store.js +++ b/packages/p2p/src/stores/order-store.js @@ -1,10 +1,53 @@ import { cloneObject } from '@deriv/shared'; -import { action, computed, observable, reaction } from 'mobx'; +import { action, computed, observable, reaction, makeObservable } from 'mobx'; import { createExtendedOrderDetails } from 'Utils/orders'; import { requestWS, subscribeWS } from 'Utils/websocket'; export default class OrderStore { constructor(root_store) { + makeObservable(this, { + api_error_message: observable, + cancellation_block_duration: observable, + cancellation_count_period: observable, + cancellation_limit: observable, + cancels_remaining: observable, + error_message: observable, + has_more_items_to_load: observable, + is_loading: observable, + orders: observable, + order_id: observable, + order_payment_method_details: observable, + order_rerender_timeout: observable, + has_order_payment_method_details: computed, + order_information: computed, + nav: computed, + getAdvertiserInfo: action.bound, + getWebsiteStatus: action.bound, + hideDetails: action.bound, + loadMoreOrders: action.bound, + onOrderIdUpdate: action.bound, + onOrdersUpdate: action.bound, + onUnmount: action.bound, + setApiErrorMessage: action.bound, + setCancellationBlockDuration: action.bound, + setCancellationCountPeriod: action.bound, + setCancellationLimit: action.bound, + setCancelsRemaining: action.bound, + setErrorMessage: action.bound, + setHasMoreItemsToLoad: action.bound, + setIsLoading: action.bound, + setOrderPaymentMethodDetails: action.bound, + setOrderDetails: action.bound, + setOrderId: action.bound, + setOrders: action.bound, + setOrderRendererTimeout: action.bound, + setQueryDetails: action.bound, + setData: action.bound, + subscribeToCurrentOrder: action.bound, + syncOrder: action.bound, + unsubscribeFromCurrentOrder: action.bound, + }); + this.root_store = root_store; reaction( @@ -15,29 +58,27 @@ export default class OrderStore { ); } - @observable api_error_message = ''; - @observable cancellation_block_duration = 0; - @observable cancellation_count_period = 0; - @observable cancellation_limit = 0; - @observable cancels_remaining = null; - @observable error_message = ''; - @observable has_more_items_to_load = false; - @observable is_loading = false; - @observable orders = []; - @observable order_id = null; - @observable order_payment_method_details = null; - @observable order_rerender_timeout = null; + api_error_message = ''; + cancellation_block_duration = 0; + cancellation_count_period = 0; + cancellation_limit = 0; + cancels_remaining = null; + error_message = ''; + has_more_items_to_load = false; + is_loading = false; + orders = []; + order_id = null; + order_payment_method_details = null; + order_rerender_timeout = null; interval; order_info_subscription = {}; previous_orders = []; - @computed get has_order_payment_method_details() { return !!this.order_payment_method_details; } - @computed get order_information() { const { general_store } = this.root_store; const order = this.orders.find(o => o.id === this.order_id); @@ -47,12 +88,10 @@ export default class OrderStore { : null; } - @computed get nav() { return this.root_store.general_store.parameters?.nav; } - @action.bound getAdvertiserInfo(setShouldShowCancelModal) { requestWS({ p2p_advertiser_info: 1 }).then(response => { if (response.error) { @@ -65,7 +104,6 @@ export default class OrderStore { this.getWebsiteStatus(setShouldShowCancelModal); } - @action.bound getWebsiteStatus(setShouldShowCancelModal) { requestWS({ website_status: 1 }).then(response => { if (response.error) { @@ -83,7 +121,6 @@ export default class OrderStore { }); } - @action.bound hideDetails(should_navigate) { if (should_navigate && this.nav) { this.root_store.general_store.redirectTo(this.nav.location); @@ -92,7 +129,6 @@ export default class OrderStore { this.setOrderId(null); } - @action.bound loadMoreOrders({ startIndex }) { this.setApiErrorMessage(''); @@ -140,7 +176,6 @@ export default class OrderStore { }); } - @action.bound onOrderIdUpdate() { this.unsubscribeFromCurrentOrder(); @@ -149,7 +184,6 @@ export default class OrderStore { } } - @action.bound onOrdersUpdate() { if (this.order_id) { // If orders was updated, find current viewed order (if any) @@ -164,59 +198,48 @@ export default class OrderStore { } } - @action.bound onUnmount() { clearTimeout(this.order_rerender_timeout); this.unsubscribeFromCurrentOrder(); this.hideDetails(false); } - @action.bound setApiErrorMessage(api_error_message) { this.api_error_message = api_error_message; } - @action.bound setCancellationBlockDuration(cancellation_block_duration) { this.cancellation_block_duration = cancellation_block_duration; } - @action.bound setCancellationCountPeriod(cancellation_count_period) { this.cancellation_count_period = cancellation_count_period; } - @action.bound setCancellationLimit(cancellation_limit) { this.cancellation_limit = cancellation_limit; } - @action.bound setCancelsRemaining(cancels_remaining) { this.cancels_remaining = cancels_remaining; } - @action.bound setErrorMessage(error_message) { this.error_message = error_message; } - @action.bound setHasMoreItemsToLoad(has_more_items_to_load) { this.has_more_items_to_load = has_more_items_to_load; } - @action.bound setIsLoading(is_loading) { this.is_loading = is_loading; } - @action.bound setOrderPaymentMethodDetails(order_payment_method_details) { this.order_payment_method_details = order_payment_method_details; } - @action.bound setOrderDetails(response) { if (!response.error) { const { p2p_order_info } = response; @@ -227,7 +250,6 @@ export default class OrderStore { } } - @action.bound setOrderId(order_id) { this.order_id = order_id; @@ -238,18 +260,15 @@ export default class OrderStore { } } - @action.bound setOrders(orders) { this.previous_orders = cloneObject(this.orders); this.orders = orders; } - @action.bound setOrderRendererTimeout(order_rerender_timeout) { this.order_rerender_timeout = order_rerender_timeout; } - @action.bound setQueryDetails(input_order) { const { general_store } = this.root_store; const order_information = createExtendedOrderDetails( @@ -291,12 +310,10 @@ export default class OrderStore { } } - @action.bound setData(data) { this.data = data; } - @action.bound subscribeToCurrentOrder() { this.order_info_subscription = subscribeWS( { @@ -308,7 +325,6 @@ export default class OrderStore { ); } - @action.bound syncOrder(p2p_order_info) { const { general_store } = this.root_store; @@ -336,7 +352,6 @@ export default class OrderStore { } } - @action.bound unsubscribeFromCurrentOrder() { clearTimeout(this.order_rerender_timeout); diff --git a/packages/p2p/src/stores/sendbird-store.js b/packages/p2p/src/stores/sendbird-store.js index 6d8175146d0b..19c409dff1bb 100644 --- a/packages/p2p/src/stores/sendbird-store.js +++ b/packages/p2p/src/stores/sendbird-store.js @@ -1,36 +1,63 @@ import SendBird from 'sendbird'; import { epochToMoment } from '@deriv/shared'; -import { action, computed, observable, reaction } from 'mobx'; +import { action, computed, observable, reaction, makeObservable } from 'mobx'; import BaseStore from 'Stores/base_store'; import ChatMessage, { convertFromChannelMessage } from 'Utils/chat-message'; import { requestWS } from 'Utils/websocket'; export default class SendbirdStore extends BaseStore { - @observable active_chat_channel = null; - @observable.ref chat_channel_url = null; - @observable.ref chat_info = { app_id: null, user_id: null, token: null }; - @observable.shallow chat_messages = []; - @observable has_chat_error = null; - @observable is_chat_loading = true; - @observable should_show_chat_modal = false; - @observable should_show_chat_on_orders = false; + active_chat_channel = null; + chat_channel_url = null; + chat_info = { app_id: null, user_id: null, token: null }; + chat_messages = []; + has_chat_error = null; + is_chat_loading = true; + should_show_chat_modal = false; + should_show_chat_on_orders = false; messages_ref = null; sendbird_api = null; service_token_timeout = null; scroll_debounce = null; - @computed + constructor() { + // TODO: [mobx-undecorate] verify the constructor arguments and the arguments of this automatically generated super call + super(); + + makeObservable(this, { + active_chat_channel: observable, + chat_channel_url: observable.ref, + chat_info: observable.ref, + chat_messages: observable.shallow, + has_chat_error: observable, + is_chat_loading: observable, + should_show_chat_modal: observable, + should_show_chat_on_orders: observable, + has_chat_info: computed, + is_chat_frozen: computed, + last_other_user_activity: computed, + addChannelMessage: action.bound, + createChatForNewOrder: action.bound, + replaceChannelMessage: action.bound, + setActiveChatChannel: action.bound, + setChatChannelUrl: action.bound, + setChatInfo: action.bound, + setHasChatError: action.bound, + setIsChatLoading: action.bound, + setChannelMessages: action.bound, + setShouldShowChatModal: action.bound, + setShouldShowChatOnOrders: action.bound, + }); + } + get has_chat_info() { return this.chat_info.app_id && this.chat_info.user_id && this.chat_info.token; } - @computed get is_chat_frozen() { return this.active_chat_channel?.isFrozen; } - @computed get last_other_user_activity() { const message = this.chat_messages .slice() @@ -40,12 +67,10 @@ export default class SendbirdStore extends BaseStore { return message ? epochToMoment(Math.floor(message.created_at / 1000)).fromNow() : null; } - @action.bound addChannelMessage(chat_message) { this.chat_messages.push(chat_message); } - @action.bound createChatForNewOrder(id) { if (!this.chat_channel_url) { // If order_information doesn't have chat_channel_url this is a new order @@ -61,47 +86,38 @@ export default class SendbirdStore extends BaseStore { } } - @action.bound replaceChannelMessage(idx_to_replace, num_items_to_delete, chat_message) { this.chat_messages.splice(idx_to_replace, num_items_to_delete, chat_message); } - @action.bound setActiveChatChannel(active_chat_channel) { this.active_chat_channel = active_chat_channel; } - @action.bound setChatChannelUrl(chat_channel_url) { this.chat_channel_url = chat_channel_url; } - @action.bound setChatInfo(chat_info) { this.chat_info = chat_info; } - @action.bound setHasChatError(has_chat_error) { this.has_chat_error = has_chat_error; } - @action.bound setIsChatLoading(is_chat_loading) { this.is_chat_loading = is_chat_loading; } - @action.bound setChannelMessages(chat_messages) { this.chat_messages = chat_messages; } - @action.bound setShouldShowChatModal(should_show_chat_modal) { this.should_show_chat_modal = should_show_chat_modal; } - @action.bound setShouldShowChatOnOrders(should_show_chat_on_orders) { this.should_show_chat_on_orders = should_show_chat_on_orders; }