farrah/ modal refactoring (binary-com#6769)

* added modal manager component (binary-com#6768)

* farrah/81373/lazy loading in p2p (binary-com#6907)

* perf: configured webpack for lazy loading

* added css lazy loading

* fix: fixed missing css

* refactor: myAdsFloatingRateSwitchModal (binary-com#7173)

* refactor: emailLinkVerifiedModal (binary-com#7118)

* refactor: myAdsDeleteModal (binary-com#7024)

* refactor: adExceedsDailyLimitModal (binary-com#7027)

* farrah/78909/refactor FilterModal (binary-com#6906)

* refactor filter modal

* perf: added lazy loading

* fix: added publicPath

* farrah/78919/refactor OrderDetailsCancelModal (binary-com#7018)

* refactor: order details cancel modal

* fix: tests

* Adrienne / BuySellModal and CancelAddPaymentMethodModal component with saved form state component (binary-com#7077)

* saved draft

* Refactored out cleanupFn argument in hideModal

* fix: added modal form and saving state

* fixed issues with mobile stacking modal

* refactored out comments

* refactor: remove cancel add payment method modal from my profile

* removed add payment method modal in my profile

* removed icons.js

* removed icons.js

* refactor: fix import path for modal form

* refactor: fix import path for modal form

* refactor: fix import path for modal form

* chore: reverted change on cancel add payment method modal in my profile folder

* chore: refactored code

* chore: revert

* Fix merge conflicts

* Adrienne / Refactored Create Ad Add Payment Method Modal and Add Payment Method Error Modal (binary-com#7210)

* chore: fixed issues with dropdown detecting as clicking outside modal

* chore: updated branch with drafted branch

* chore: added sycned branch changes

* farrah/78918/refactor EmailVerificationModal (binary-com#7056)

* refactor: emailVerificationModal

* Refactored out EmailLinkVerifiedModal since that related modal card is merged to p2p-modal-manager

* Refactored out EmailLinkVerifiedModal observables

Co-authored-by: adrienne-deriv <103016120+adrienne-deriv@users.noreply.github.com>

* farrah/78920/refactor OrderDetailsConfirmModal (binary-com#7038)

* refactor: orderDetailsConfirmModal

* refactor: onClick handler

* chore: fix issues with build after merge conflicts

Co-authored-by: adrienne-deriv <103016120+adrienne-deriv@users.noreply.github.com>

* farrah/78927/refactor EditAdCancelModal (binary-com#7122)

* refactor: editAdCancelModal

* Refactored out CreateAdAddPaymentMethodModal since its already merged to p2p-modal-manager

Co-authored-by: adrienne-deriv <103016120+adrienne-deriv@users.noreply.github.com>

* farrah/78925/refactor CreateAdErrorModal (binary-com#7052)

* refactor: createAdErrorModal

* chore: fixed merge conflict issues

Co-authored-by: adrienne-deriv <103016120+adrienne-deriv@users.noreply.github.com>

* Adrienne / Rating modal and Recommended modal (binary-com#7132)

* saved draft

* refactor: added rating modal

* added recommended modal

* refactored code

* refactored code

* refactor: fixed issues with test

* fix: added mock function for useModalManagerContext in app content test

* refactored out comment for should_show_rating_modal

* refactor: refactored out props for rating modal

* chore: removed modal props on cleanup

* chore: fixed issues with test

* chore: refactor based on reviews

* chore: refactor

* Adrienne / Refactored Delete Payment Method Error modal and Cancel Edit Payment method modal (binary-com#7222)

* saved draft

* refactor: added delete payment method error modal

* chore: fixed an issue where payment methods are not listed for sell ads

* chore: fixed issue where back button does not trigger cancel edit pm modal

* farrah/78916/refactor InvalidVerificationLinkModal (binary-com#7017)

* refactor: invalid verification link modal

* refactor: error message

* chore: fixed merge conflicts

Co-authored-by: adrienne-deriv <103016120+adrienne-deriv@users.noreply.github.com>

* Adrienne / Error modal (binary-com#7283)

* saved draft

* refactor: added error modal

* chore: reverted old changes modals folder

* Adrienne / Currency Selector modal (binary-com#7279)

* saved draft

* refactor: added currency selector modal

* chore: revert old changes modals folder

* Adrienne / Block User Modal (binary-com#7276)

* saved draft

* refactor: added block user modal

* chore: fix issues with test build

* chore: removed comments

* chore: updated comment

* chore: fixed issues with running build

* chore: fixed issues with running test

* refactor: loading modal (binary-com#7006)

Co-authored-by: adrienne-deriv <103016120+adrienne-deriv@users.noreply.github.com>

* Adrienne / Rate Change Modal (binary-com#7266)

* saved draft

* refactor: added rate change modal

* chore: changed isRateChanged function

* chore: refactored hideModal with options

* chore: reverted comments

* chore: refactored naming options for hidemodal

* Adrienne / Quick Add Modal and integrating new payment method dropdown component for buy ads in the modal (binary-com#7308)

* saved draft

* refactor: added quick add modal and new dropdown component

* chore: refactored out unusesd files

* chore: reverted merge conflict issues

* chore: removed old merge conflicts

* chore: fixed merge conflicts and added 2 new modals

* chore: reverted refactor and used error modal instead

* farrah/78906/refactor MarketRateChangeErrorModal (binary-com#7357)

* refactor: market rate change error modal

* refactor: code

* refactor: unnecessary code

* refactor: fixed issues with buy ad payment methods list

Co-authored-by: adrienne-rio <adrienne@deriv.com>

* fix: conflicts

* fix: conflicts

* Adrienne / Wrong popup message counterparty block user modal (binary-com#7459)

* saved draft

* fix: fixed an issue where incorrect block user modal message is shown in block user list

* chore: removed old commits

* Adrienne / Fix issue verification link modal showing twice (binary-com#7545)

* saved draft

* fix: verification modal now shows once

* Adrienne / Add payment method not dismissed create ad (binary-com#7505)

* saved draft

* fix: create ad add payment method modal now closes when user adds a pm

* chore: removed old commits

* chore: added multiple arguments for iscurrentmodal

* Adrienne / Market rate change popup not displayed (binary-com#7478)

* saved draft

* fix: fixed an issue where rate change modal is not shown when user changes to different currency

* chore: removed old commits

* Adrienne / Fixed issue with block user error modal (binary-com#7539)

* saved draft

* fix: reset error status

* chore: removed old commits

* fix: fixed an issue where the error modal is displayed twice

* Adrienne / Fix bug in buy sell header and refactored code (binary-com#7624)

* saved draft

* refactor: refactored buy sell modal header

* chore: removed comments

* chore: applied code review refactors

---------

Co-authored-by: adrienne-deriv <103016120+adrienne-deriv@users.noreply.github.com>
Co-authored-by: adrienne-rio <adrienne@deriv.com>

packages/core/build/config.js

@@ -39,6 +39,15 @@ const copyConfig = base => {
             from: path.resolve(__dirname, '../node_modules/@deriv/cashier/dist/cashier/css/'),
             to: 'cashier/css',
         },
+        {
+            from: path.resolve(__dirname, '../node_modules/@deriv/p2p/dist/p2p/js/'),
+            to: 'p2p/js',
+        },
+        {
+            from: path.resolve(__dirname, '../node_modules/@deriv/p2p/dist/p2p/css/'),
+            to: 'p2p/css',
+            noErrorOnMissing: true,
+        },
         {
             from: path.resolve(__dirname, '../node_modules/@deriv/cashier/dist/cashier/public'),
             to: 'cashier/public',

packages/p2p/index.js

@@ -1 +1 @@
-module.exports = require('./lib/index');
+module.exports = require('./dist/p2p/js/index');

packages/p2p/package.json

@@ -2,7 +2,7 @@
     "name": "@deriv/p2p",
     "version": "0.7.3",
     "description": "p2p cashier",
-    "main": "lib/index.js",
+    "main": "dist/p2p/js/index.js",
     "private": false,
     "publishConfig": {
         "access": "public"

packages/p2p/src/components/__tests__/app-content.spec.js

@@ -1,13 +1,19 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { useStores } from 'Stores';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 import AppContent from '../app-content.jsx';
 
 jest.mock('Stores', () => ({
     ...jest.requireActual('Stores'),
     useStores: jest.fn(),
 }));
 
+jest.mock('Components/modal-manager/modal-manager-context', () => ({
+    ...jest.requireActual('Components/modal-manager/modal-manager-context'),
+    useModalManagerContext: jest.fn(),
+}));
+
 jest.mock('@deriv/components', () => ({
     ...jest.requireActual('@deriv/components'),
     Tabs: jest.fn(({ children }) => (
@@ -39,6 +45,10 @@ describe('<AppContent/>', () => {
         useStores.mockImplementation(() => ({
             general_store: mocked_store_values,
         }));
+        useModalManagerContext.mockImplementation(() => ({
+            showModal: () => {},
+            hideModal: () => {},
+        }));
         render(<AppContent />);
 
         expect(screen.getByText('Tabs')).toBeInTheDocument();

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

@@ -7,9 +7,10 @@ import { useStores } from 'Stores';
 import { buy_sell } from 'Constants/buy-sell';
 import { localize, Localize } from 'Components/i18next';
 import { generateEffectiveRate } from 'Utils/format-value';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 import './advertiser-page.scss';
 
-const AdvertiserPageRow = ({ row: advert, showAdPopup }) => {
+const AdvertiserPageRow = ({ row: advert }) => {
     const { advertiser_page_store, buy_sell_store, floating_rate_store, general_store } = useStores();
     const { currency } = general_store.client;
     const {
@@ -22,6 +23,7 @@ const AdvertiserPageRow = ({ row: advert, showAdPopup }) => {
         rate_type,
         rate,
     } = advert;
+    const { showModal } = useModalManagerContext();
 
     const is_buy_advert = advertiser_page_store.counterparty_type === buy_sell.BUY;
     const is_my_advert = advertiser_page_store.advertiser_details_id === general_store.advertiser_id;
@@ -37,7 +39,9 @@ const AdvertiserPageRow = ({ row: advert, showAdPopup }) => {
 
     const showAdForm = () => {
         buy_sell_store.setSelectedAdState(advert);
-        showAdPopup(advert);
+        showModal({
+            key: 'BuySellModal',
+        });
     };
 
     if (isMobile()) {
@@ -138,7 +142,6 @@ AdvertiserPageRow.displayName = 'AdvertiserPageRow';
 AdvertiserPageRow.propTypes = {
     advert: PropTypes.object,
     row: PropTypes.object,
-    showAdPopup: PropTypes.func,
 };
 
 export default observer(AdvertiserPageRow);

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

@@ -5,10 +5,7 @@ import { reaction } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useStores } from 'Stores';
 import { Localize, localize } from 'Components/i18next';
-import { buy_sell } from 'Constants/buy-sell';
 import { my_profile_tabs } from 'Constants/my-profile-tabs';
-import RateChangeModal from 'Components/buy-sell/rate-change-modal.jsx';
-import BuySellModal from 'Components/buy-sell/buy-sell-modal.jsx';
 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';
@@ -18,14 +15,14 @@ import StarRating from 'Components/star-rating';
 import AdvertiserPageDropdownMenu from './advertiser-page-dropdown-menu.jsx';
 import TradeBadge from '../trade-badge/trade-badge.jsx';
 import BlockUserOverlay from './block-user/block-user-overlay';
-import BlockUserModal from 'Components/block-user/block-user-modal';
-import ErrorModal from 'Components/error-modal/error-modal';
 import classNames from 'classnames';
 import { OnlineStatusIcon, OnlineStatusLabel } from 'Components/online-status';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 import './advertiser-page.scss';
 
 const AdvertiserPage = () => {
     const { general_store, advertiser_page_store, buy_sell_store, my_profile_store } = useStores();
+    const { hideModal, showModal, useRegisterModalProps } = useModalManagerContext();
 
     const is_my_advert = advertiser_page_store.advertiser_details_id === general_store.advertiser_id;
     // Use general_store.advertiser_info since resubscribing to the same id from advertiser page returns error
@@ -51,7 +48,6 @@ 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 [is_error_modal_open, setIsErrorModalOpen] = React.useState(false);
 
     React.useEffect(() => {
         advertiser_page_store.onMount();
@@ -61,7 +57,26 @@ const AdvertiserPage = () => {
             () => [advertiser_page_store.active_index, general_store.block_unblock_user_error],
             () => {
                 advertiser_page_store.onTabChange();
-                if (general_store.block_unblock_user_error) setIsErrorModalOpen(true);
+                if (general_store.block_unblock_user_error) {
+                    showModal({
+                        key: 'ErrorModal',
+                        props: {
+                            error_message: general_store.block_unblock_user_error,
+                            error_modal_title: 'Unable to block advertiser',
+                            has_close_icon: false,
+                            onClose: () => {
+                                buy_sell_store.hideAdvertiserPage();
+                                if (general_store.active_index !== 0)
+                                    my_profile_store.setActiveTab(my_profile_tabs.MY_COUNTERPARTIES);
+                                advertiser_page_store.onCancel();
+                                general_store.setBlockUnblockUserError('');
+                                hideModal();
+                            },
+                            width: isMobile() ? '90rem' : '40rem',
+                        },
+                    });
+                    general_store.setBlockUnblockUserError(null);
+                }
             },
             { fireImmediately: true }
         );
@@ -73,6 +88,16 @@ const AdvertiserPage = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    useRegisterModalProps({
+        key: 'BlockUserModal',
+        props: {
+            advertiser_name: name,
+            is_advertiser_blocked: !!advertiser_page_store.is_counterparty_advertiser_blocked && !is_my_advert,
+            onCancel: advertiser_page_store.onCancel,
+            onSubmit: advertiser_page_store.onSubmit,
+        },
+    });
+
     if (advertiser_page_store.is_loading || general_store.is_block_unblock_user_loading) {
         return <Loading is_fullscreen={false} />;
     }
@@ -88,36 +113,6 @@ const AdvertiserPage = () => {
                     !!advertiser_page_store.is_counterparty_advertiser_blocked && !is_my_advert,
             })}
         >
-            <RateChangeModal onMount={advertiser_page_store.setShowAdPopup} />
-            <ErrorModal
-                error_message={general_store.block_unblock_user_error}
-                error_modal_title='Unable to block advertiser'
-                has_close_icon={false}
-                is_error_modal_open={is_error_modal_open}
-                setIsErrorModalOpen={is_open => {
-                    if (!is_open) buy_sell_store.hideAdvertiserPage();
-                    if (general_store.active_index !== 0)
-                        my_profile_store.setActiveTab(my_profile_tabs.MY_COUNTERPARTIES);
-                    advertiser_page_store.onCancel();
-                    general_store.setBlockUnblockUserError('');
-                }}
-                width={isMobile() ? '90rem' : '40rem'}
-            />
-            <BlockUserModal
-                advertiser_name={name}
-                is_advertiser_blocked={!!advertiser_page_store.is_counterparty_advertiser_blocked && !is_my_advert}
-                is_block_user_modal_open={
-                    general_store.is_block_user_modal_open && !general_store.block_unblock_user_error
-                }
-                onCancel={advertiser_page_store.onCancel}
-                onSubmit={advertiser_page_store.onSubmit}
-            />
-            <BuySellModal
-                selected_ad={advertiser_page_store.advert}
-                should_show_popup={advertiser_page_store.show_ad_popup}
-                setShouldShowPopup={advertiser_page_store.setShowAdPopup}
-                table_type={advertiser_page_store.counterparty_type === buy_sell.BUY ? buy_sell.BUY : buy_sell.SELL}
-            />
             <div className='advertiser-page__page-return-header'>
                 <PageReturn
                     className='buy-sell__advertiser-page-return'
@@ -136,7 +131,11 @@ const AdvertiserPage = () => {
             </div>
             <BlockUserOverlay
                 is_visible={!!advertiser_page_store.is_counterparty_advertiser_blocked && !is_my_advert}
-                onClickUnblock={() => general_store.setIsBlockUserModalOpen(true)}
+                onClickUnblock={() =>
+                    showModal({
+                        key: 'BlockUserModal',
+                    })
+                }
             >
                 <div className='advertiser-page-details-container'>
                     <div className='advertiser-page__header-details'>

packages/p2p/src/components/app-content.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { isMobile } from '@deriv/shared';
 import { Loading, Tabs } from '@deriv/components';
+import { isAction, reaction } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useStores } from 'Stores';
 import AdvertiserPage from 'Components/advertiser-page/advertiser-page.jsx';
@@ -13,9 +14,32 @@ import NicknameForm from './nickname-form';
 import Orders from './orders/orders.jsx';
 import TemporarilyBarredHint from './temporarily-barred-hint';
 import Verification from './verification/verification.jsx';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 
-const AppContent = () => {
+const AppContent = ({ order_id }) => {
     const { buy_sell_store, general_store } = useStores();
+    const { showModal, hideModal } = useModalManagerContext();
+
+    React.useEffect(() => {
+        return reaction(
+            () => general_store.props.setP2POrderProps,
+            () => {
+                if (isAction(general_store.props.setP2POrderProps)) {
+                    general_store.props.setP2POrderProps({
+                        order_id,
+                        redirectToOrderDetails: general_store.redirectToOrderDetails,
+                        setIsRatingModalOpen: is_open => {
+                            if (is_open) {
+                                showModal({ key: 'RatingModal' });
+                            } else {
+                                hideModal();
+                            }
+                        },
+                    });
+                }
+            }
+        );
+    }, []);
 
     if (general_store.is_loading) {
         return <Loading is_fullscreen={false} />;

packages/p2p/src/components/app.jsx

@@ -8,6 +8,7 @@ import { waitWS } from 'Utils/websocket';
 import { useStores } from 'Stores';
 import AppContent from './app-content.jsx';
 import { setLanguage } from './i18next';
+import { ModalManager, ModalManagerContextProvider } from './modal-manager';
 import './app.scss';
 
 const App = props => {
@@ -67,11 +68,7 @@ const App = props => {
             general_store.redirectTo('orders');
             order_store.setOrderId(order_id);
         }
-        general_store.props.setP2POrderProps({
-            order_id,
-            redirectToOrderDetails: general_store.redirectToOrderDetails,
-            setIsRatingModalOpen: order_store.setIsRatingModalOpen,
-        });
+
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [order_id]);
 
@@ -91,7 +88,7 @@ const App = props => {
             order_store.setVerificationCode(verification_code);
         }
         if (verification_action && verification_code) {
-            order_store.setIsLoadingModalOpen(true);
+            general_store.showModal({ key: 'LoadingModal', props: {} });
             order_store.verifyEmailVerificationCode(verification_action, verification_code);
         }
 
@@ -101,7 +98,10 @@ const App = props => {
     return (
         <main className={classNames('p2p-cashier', className)}>
             <Notifications />
-            <AppContent />
+            <ModalManagerContextProvider>
+                <ModalManager />
+                <AppContent order_id={order_id} />
+            </ModalManagerContextProvider>
         </main>
     );
 };

packages/p2p/src/components/buy-sell/buy-sell-form.jsx

@@ -14,12 +14,14 @@ import PaymentMethodCard from '../my-profile/payment-methods/payment-method-card
 import { floatingPointValidator } from 'Utils/validations';
 import { countDecimalPlaces } from 'Utils/string';
 import { generateEffectiveRate, setDecimalPlaces, roundOffDecimal, removeTrailingZeros } from 'Utils/format-value';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 
 const BuySellForm = props => {
     const isMounted = useIsMounted();
     const { advertiser_page_store, buy_sell_store, floating_rate_store, general_store, my_profile_store } = useStores();
     const [selected_methods, setSelectedMethods] = React.useState([]);
     buy_sell_store.setFormProps(props);
+    const { showModal } = useModalManagerContext();
 
     const { setPageFooterParent } = props;
     const {
@@ -80,12 +82,25 @@ const BuySellForm = props => {
             }
 
             advertiser_page_store.setFormErrorMessage('');
-            buy_sell_store.setShowRateChangePopup(rate_type === ad_type.FLOAT);
+            const disposeRateChangeModal = reaction(
+                () => floating_rate_store.is_market_rate_changed,
+                is_market_rate_changed => {
+                    if (is_market_rate_changed && rate_type === ad_type.FLOAT) {
+                        showModal({
+                            key: 'RateChangeModal',
+                            props: {
+                                currency: buy_sell_store.local_currency,
+                            },
+                        });
+                    }
+                }
+            );
             buy_sell_store.setInitialReceiveAmount(calculated_rate);
 
             return () => {
                 buy_sell_store.payment_method_ids = [];
                 disposeReceiveAmountReaction();
+                disposeRateChangeModal();
             };
         },
         [] // eslint-disable-line react-hooks/exhaustive-deps

packages/p2p/src/components/buy-sell/buy-sell-header.jsx

@@ -102,7 +102,7 @@ const BuySellHeader = ({ table_type }) => {
                     <Icon
                         className='buy-sell__header-row--filter'
                         icon='IcFilter'
-                        onClick={() => buy_sell_store.setIsFilterModalOpen(true)}
+                        onClick={() => general_store.showModal({ key: 'FilterModal', props: {} })}
                         size={40}
                     />
                 </div>

packages/p2p/src/components/buy-sell/buy-sell-table.jsx

@@ -8,7 +8,6 @@ import { Localize } from 'Components/i18next';
 import { TableError } from 'Components/table/table-error.jsx';
 import { useStores } from 'Stores';
 import BuySellRow from './buy-sell-row.jsx';
-import CancelAddPaymentMethodModal from '../my-profile/payment-methods/add-payment-method/cancel-add-payment-method-modal.jsx';
 import NoAds from './no-ads/no-ads.jsx';
 
 const BuySellRowRendererComponent = row_props => {
@@ -31,7 +30,7 @@ const BuySellTable = ({ onScroll }) => {
 
     React.useEffect(
         () => {
-            my_profile_store.setIsCancelAddPaymentMethodModalOpen(false);
+            my_profile_store.getPaymentMethodsList();
             reaction(
                 () => buy_sell_store.is_buy,
                 () => buy_sell_store.fetchAdvertiserAdverts(),
@@ -53,7 +52,6 @@ const BuySellTable = ({ onScroll }) => {
     if (buy_sell_store.items.length) {
         return (
             <>
-                <CancelAddPaymentMethodModal is_floating />
                 <Table className='buy-sell__table'>
                     <Modal
                         name='sort'