From ce7533f66e36dc46babbd960afd11240f49de8fa Mon Sep 17 00:00:00 2001
From: nada-deriv <nada.ajinas@deriv.com>
Date: Thu, 13 Jul 2023 09:13:45 +0400
Subject: [PATCH] refactor: currency selector modal refactor

---
 .../currency-selector-modal.spec.tsx          | 60 +++++++++++++++++++
 ...-modal.jsx => currency-selector-modal.tsx} |  7 ++-
 .../{index.js => index.ts}                    |  0
 3 files changed, 64 insertions(+), 3 deletions(-)
 create mode 100644 packages/p2p/src/components/modal-manager/modals/currency-selector-modal/__tests__/currency-selector-modal.spec.tsx
 rename packages/p2p/src/components/modal-manager/modals/currency-selector-modal/{currency-selector-modal.jsx => currency-selector-modal.tsx} (93%)
 rename packages/p2p/src/components/modal-manager/modals/currency-selector-modal/{index.js => index.ts} (100%)

diff --git a/packages/p2p/src/components/modal-manager/modals/currency-selector-modal/__tests__/currency-selector-modal.spec.tsx b/packages/p2p/src/components/modal-manager/modals/currency-selector-modal/__tests__/currency-selector-modal.spec.tsx
new file mode 100644
index 000000000000..2614676ccff1
--- /dev/null
+++ b/packages/p2p/src/components/modal-manager/modals/currency-selector-modal/__tests__/currency-selector-modal.spec.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import { useStores } from 'Stores';
+import CurrenySelectorModal from '../currency-selector-modal';
+
+const mock_store: DeepPartial<ReturnType<typeof useStores>> = {
+    buy_sell_store: {
+        onLocalCurrencySelect: jest.fn(),
+        selected_local_currency: 'IDR',
+        local_currencies: [
+            { display_name: 'Indonesian Rupiah', text: 'IDR', value: 'IDR', is_default: true },
+            { display_name: 'New Zealand Dollar', text: 'NZD', value: 'NZD', has_adverts: true },
+        ],
+    },
+};
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: () => mock_store,
+}));
+
+const mock_modal_manager = {
+    hideModal: jest.fn(),
+    is_modal_open: true,
+};
+
+jest.mock('Components/modal-manager/modal-manager-context');
+const mocked_useModalManagerContext = useModalManagerContext as jest.MockedFunction<
+    () => Partial<ReturnType<typeof useModalManagerContext>>
+>;
+
+mocked_useModalManagerContext.mockImplementation(() => mock_modal_manager);
+
+describe('<CurrenySelectorModal/>', () => {
+    let modal_root_el: HTMLElement;
+    beforeAll(() => {
+        modal_root_el = document.createElement('div');
+        modal_root_el.setAttribute('id', 'modal_root');
+        document.body.appendChild(modal_root_el);
+    });
+
+    afterAll(() => {
+        document.body.removeChild(modal_root_el);
+    });
+    it('should render the CurrenySelectorModal', () => {
+        render(<CurrenySelectorModal />);
+
+        expect(screen.getByText('Preferred currency')).toBeInTheDocument();
+    });
+    it('should handle currency selection', () => {
+        render(<CurrenySelectorModal />);
+
+        userEvent.click(screen.getByText('NZD'));
+
+        expect(mock_store.buy_sell_store.onLocalCurrencySelect).toBeCalledWith('NZD');
+        expect(mock_modal_manager.hideModal).toBeCalled();
+    });
+});
diff --git a/packages/p2p/src/components/modal-manager/modals/currency-selector-modal/currency-selector-modal.jsx b/packages/p2p/src/components/modal-manager/modals/currency-selector-modal/currency-selector-modal.tsx
similarity index 93%
rename from packages/p2p/src/components/modal-manager/modals/currency-selector-modal/currency-selector-modal.jsx
rename to packages/p2p/src/components/modal-manager/modals/currency-selector-modal/currency-selector-modal.tsx
index 4753cc6494dd..5b3842bfff37 100644
--- a/packages/p2p/src/components/modal-manager/modals/currency-selector-modal/currency-selector-modal.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/currency-selector-modal/currency-selector-modal.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { MobileFullPageModal } from '@deriv/components';
-import { useStores } from 'Stores';
-import { observer } from 'mobx-react-lite';
+import { observer } from '@deriv/stores';
 import { localize } from 'Components/i18next';
-import CurrencySelector from 'Pages/buy-sell/currency-selector/currency-selector';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import CurrencySelector from 'Pages/buy-sell/currency-selector/currency-selector';
+import { useStores } from 'Stores';
 
 const CurrencySelectorModal = () => {
     const { buy_sell_store } = useStores();
@@ -15,6 +15,7 @@ const CurrencySelectorModal = () => {
         <MobileFullPageModal
             is_flex
             is_modal_open={is_modal_open}
+            onClickClose={hideModal}
             page_header_text={localize('Preferred currency')}
             pageHeaderReturnFn={hideModal}
         >
diff --git a/packages/p2p/src/components/modal-manager/modals/currency-selector-modal/index.js b/packages/p2p/src/components/modal-manager/modals/currency-selector-modal/index.ts
similarity index 100%
rename from packages/p2p/src/components/modal-manager/modals/currency-selector-modal/index.js
rename to packages/p2p/src/components/modal-manager/modals/currency-selector-modal/index.ts