refactor: reorder imports

packages/p2p/src/components/modal-manager/modals/ad-created-modal/ad-created-modal.tsx

@@ -5,11 +5,11 @@ import { observer } from '@deriv/stores';
 import { localize, Localize } from 'Components/i18next';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 import { api_error_codes } from 'Constants/api-error-codes';
-import { useStores } from 'Stores/index';
+import { useStores } from 'Stores';
 
 const AdCreatedModal = () => {
     const { my_ads_store } = useStores();
-    const { setIsAdCreatedModalVisible, setShowAdForm, advert_details } = my_ads_store;
+    const { adverts_archive_period, advert_details, setIsAdCreatedModalVisible, setShowAdForm } = my_ads_store;
     const { hideModal, is_modal_open, showModal } = useModalManagerContext();
     const should_not_show_auto_archive_message_again = React.useRef(false);
     const { AD_EXCEEDS_BALANCE, AD_EXCEEDS_DAILY_LIMIT } = api_error_codes;
@@ -25,7 +25,7 @@ const AdCreatedModal = () => {
         setIsAdCreatedModalVisible(false);
         hideModal();
 
-        //TODO: use advert_details directly from AdVisibilityErrorModal once it's refactored
+        //TODO: refactor below section - use advert_details directly from AdVisibilityErrorModal once it's refactored
         if (advert_details?.visibility_status?.includes(AD_EXCEEDS_BALANCE)) {
             showModal(
                 {
@@ -52,7 +52,7 @@ const AdCreatedModal = () => {
                 <Text as='p' size='xs' color='prominent'>
                     <Localize
                         i18n_default_text="If the ad doesn't receive an order for {{adverts_archive_period}} days, it will be deactivated."
-                        values={{ adverts_archive_period: my_ads_store.adverts_archive_period }}
+                        values={{ adverts_archive_period }}
                     />
                 </Text>
                 <br />

packages/p2p/src/components/modal-manager/modals/ad-edit-error-modal/ad-edit-error-modal.tsx

@@ -4,7 +4,7 @@ import { observer } from '@deriv/stores';
 import { Localize, localize } from 'Components/i18next';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 import { api_error_codes } from 'Constants/api-error-codes';
-import { useStores } from 'Stores/index';
+import { useStores } from 'Stores';
 import { generateErrorDialogBody, generateErrorDialogTitle } from 'Utils/adverts';
 
 const AdEditErrorModal = () => {

packages/p2p/src/components/order-details/__tests__/order-details-wrapper.spec.js

@@ -53,7 +53,7 @@ describe('<OrderDetailsWrapper />', () => {
         render(<OrderDetailsWrapper {...desktop_props} />);
 
         await waitFor(() => {
-            expect(screen.getByTestId('dt_page_return')).toBeInTheDocument();
+            expect(screen.getByTestId('dt_page_return_icon')).toBeInTheDocument();
             expect(screen.getByText('desktop test')).toBeInTheDocument();
         });
     });

packages/p2p/src/components/page-return/page-return.tsx

@@ -11,7 +11,7 @@ type TPageReturnProps = {
 const PageReturn = ({ className = '', onClick, page_title }: TPageReturnProps) => {
     return (
         <div className={classNames('page-return', className)}>
-            <div onClick={onClick} className='page-return__button' data-testid='dt_page_return'>
+            <div onClick={onClick} className='page-return__button' data-testid='dt_page_return_icon'>
                 <Icon icon='IcArrowLeftBold' />
             </div>
             <Text line_height='l' weight='bold'>

packages/p2p/src/pages/my-ads/ad-form-wrapper/index.ts

@@ -1,3 +1,3 @@
-import FormWrapper from './ad-form-wrapper';
+import AdFormWrapper from './ad-form-wrapper';
 
-export default FormWrapper;
+export default AdFormWrapper;

packages/p2p/src/pages/my-ads/ad-summary/__tests__/ad-summary.spec.tsx

@@ -36,15 +36,15 @@ const mock_props = {
 };
 
 describe('<AdSummary/>', () => {
-    it('should render the default create ad summary line with buy ad for create', () => {
+    it('should render the default ad summary line with buy ad for create', () => {
         render(
             <StoreProvider store={mock_use_store_values}>
                 <AdSummary {...mock_props} />
             </StoreProvider>
         );
         expect(screen.getByText("You're creating an ad to buy...")).toBeInTheDocument();
     });
-    it('should render the default create ad summary line with sell ad for create', () => {
+    it('should render the default ad summary line with sell ad for create', () => {
         const new_mock_props = { ...mock_props, type: 'sell' };
         render(
             <StoreProvider store={mock_use_store_values}>
@@ -53,7 +53,7 @@ describe('<AdSummary/>', () => {
         );
         expect(screen.getByText("You're creating an ad to sell...")).toBeInTheDocument();
     });
-    it('should render the create ad summary line with offer amount for buy ad for create', () => {
+    it('should render the ad summary line with offer amount for buy ad for create', () => {
         const new_mock_props = { ...mock_props, offer_amount: '100' };
         render(
             <StoreProvider store={mock_use_store_values}>
@@ -63,7 +63,7 @@ describe('<AdSummary/>', () => {
         expect(screen.getByText(/You're creating an ad to buy/)).toBeInTheDocument();
         expect(screen.getByText('100.00 USD')).toBeInTheDocument();
     });
-    it('should render the create ad summary line with offer amount for sell ad for create', () => {
+    it('should render the ad summary line with offer amount for sell ad for create', () => {
         const new_mock_props = { ...mock_props, offer_amount: '100', type: 'sell' };
         render(
             <StoreProvider store={mock_use_store_values}>
@@ -73,7 +73,7 @@ describe('<AdSummary/>', () => {
         expect(screen.getByText(/You're creating an ad to sell/)).toBeInTheDocument();
         expect(screen.getByText('100.00 USD')).toBeInTheDocument();
     });
-    it('should render the create ad summary line with offer amount and price rate for buy ad for create', () => {
+    it('should render the ad summary line with offer amount and price rate for buy ad for create', () => {
         const new_mock_props = { ...mock_props, offer_amount: '100', price_rate: '2' };
         render(
             <StoreProvider store={mock_use_store_values}>
@@ -84,7 +84,7 @@ describe('<AdSummary/>', () => {
         expect(screen.getByText('100.00 USD')).toBeInTheDocument();
         expect(screen.getByText('0.01 USD')).toBeInTheDocument();
     });
-    it('should render the create ad summary line with offer amount and price rate for sell ad for create', () => {
+    it('should render the ad summary line with offer amount and price rate for sell ad for create', () => {
         const new_mock_props = { ...mock_props, offer_amount: '100', price_rate: '2', type: 'sell' };
         render(
             <StoreProvider store={mock_use_store_values}>
@@ -95,7 +95,7 @@ describe('<AdSummary/>', () => {
         expect(screen.getByText('100.00 USD')).toBeInTheDocument();
         expect(screen.getByText('0.01 USD')).toBeInTheDocument();
     });
-    it('should render the create ad summary line with offer amount and price rate for buy ad with fixed rate for create', () => {
+    it('should render the ad summary line with offer amount and price rate for buy ad with fixed rate for create', () => {
         (useStores as jest.Mock).mockReturnValue({
             ...mocked_store_values,
             floating_rate_store: {
@@ -113,7 +113,7 @@ describe('<AdSummary/>', () => {
         expect(screen.getByText('100.00 USD')).toBeInTheDocument();
         expect(screen.getByText('200.00 USD')).toBeInTheDocument();
     });
-    it('should render the create ad summary line with offer amount and price rate for buy ad with fixed rate for edit', () => {
+    it('should render the ad summary line with offer amount and price rate for buy ad with fixed rate for edit', () => {
         (useStores as jest.Mock).mockReturnValue({
             ...mocked_store_values,
             floating_rate_store: {

packages/p2p/src/pages/my-ads/buy-ad-payment-methods-list/__tests__/buy-ad-payment-methods-list.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { useStores } from 'Stores/index';
+import { useStores } from 'Stores';
 import BuyAdPaymentMethodsList, { TBuyAdPaymentMethodsListProps } from '../buy-ad-payment-methods-list';
 import { available_payment_methods } from '../../__mocks__/mock-data';
 

packages/p2p/src/pages/my-ads/create-ad/__tests__/create-ad-form-payment-methods.spec.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 import { useStores } from 'Stores';
 import CreateAdFormPaymentMethods from '../create-ad-form-payment-methods';
-import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 
 const mocked_store_values: DeepPartial<ReturnType<typeof useStores>> = {
     my_ads_store: {

packages/p2p/src/pages/my-ads/create-ad/__tests__/create-ad-form.spec.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { StoreProvider, mockStore } from '@deriv/stores';
-import { useStores } from 'Stores';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import { useStores } from 'Stores';
 import CreateAdForm from '../create-ad-form';
 
 const mocked_store_values: DeepPartial<ReturnType<typeof useStores>> = {

packages/p2p/src/pages/my-ads/create-ad/__tests__/create-ad.spec.tsx

@@ -30,7 +30,7 @@ describe('<CreateAd/>', () => {
     it('should close the create ad page on clicking back button', () => {
         render(<CreateAd />);
 
-        const back_button = screen.getByTestId('dt_page_return');
+        const back_button = screen.getByTestId('dt_page_return_icon');
         userEvent.click(back_button);
         expect(mocked_store_values.my_ads_store.setApiErrorMessage).toBeCalledTimes(1);
         expect(mocked_store_values.my_ads_store.setShowAdForm).toHaveBeenLastCalledWith(false);

packages/p2p/src/pages/my-ads/edit-ad/__tests__/edit-ad-form-payment-methods.spec.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { useStores } from 'Stores';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import { useStores } from 'Stores';
 import EditAdFormPaymentMethods from '../edit-ad-form-payment-methods';
 
 const mocked_store_values: DeepPartial<ReturnType<typeof useStores>> = {

packages/p2p/src/pages/my-ads/edit-ad/__tests__/edit-ad-form.spec.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { StoreProvider, mockStore } from '@deriv/stores';
-import { useStores } from 'Stores';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import { useStores } from 'Stores';
 import EditAdForm from '../edit-ad-form';
 
 const mocked_store_values: DeepPartial<ReturnType<typeof useStores>> = {
@@ -194,7 +194,7 @@ describe('<EditAdForm/>', () => {
             </StoreProvider>
         );
 
-        const back_button = screen.getByTestId('dt_page_return');
+        const back_button = screen.getByTestId('dt_page_return_icon');
         userEvent.click(back_button);
         expect(mocked_store_values.my_ads_store.setShowEditAdForm).toHaveBeenCalledWith(false);
     });

packages/p2p/src/pages/my-ads/edit-ad/edit-ad-form-payment-methods.tsx

@@ -4,9 +4,9 @@ import { localize } from 'Components/i18next';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 import PaymentMethodCard from 'Pages/my-profile/payment-methods/payment-method-card';
 import { useStores } from 'Stores';
+import { TPaymentMethod } from 'Types';
 import BuyAdPaymentMethodsList from '../buy-ad-payment-methods-list';
 import SellAdPaymentMethodsList from '../sell-ad-payment-methods-list';
-import { TPaymentMethod } from 'Types';
 
 type TEditAdFormPaymentMethodsProps = {
     is_sell_advert: boolean;

packages/p2p/src/pages/my-ads/my-ads-content/__tests__/my-ads-content.spec.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { isMobile } from '@deriv/shared';
 import { mockStore, StoreProvider } from '@deriv/stores';
-import { useStores } from 'Stores/index';
+import { useStores } from 'Stores';
 import MyAdsContent from '../my-ads-content';
 import { adverts } from '../../__mocks__/mock-data';
 

packages/p2p/src/pages/my-ads/my-ads-content/my-ads-content.tsx

@@ -37,15 +37,25 @@ const AdSwitchHintBox = () => {
     );
 };
 
+const AdCreateButton = ({ class_name = '' }: { class_name?: string }) => {
+    const { general_store, my_ads_store } = useStores();
+    const { is_barred } = general_store;
+    const { onClickCreate } = my_ads_store;
+    return (
+        <Button className={class_name} is_disabled={is_barred} large onClick={onClickCreate} primary>
+            <Localize i18n_default_text='Create new ad' />
+        </Button>
+    );
+};
+
 const MyAdsTable = () => {
     const { floating_rate_store, general_store, my_ads_store } = useStores();
-    const { is_barred, setP2PConfig } = general_store;
+    const { setP2PConfig } = general_store;
     const {
         adverts = [],
         api_error_message,
         is_table_loading,
         loadMoreAds,
-        onClickCreate,
         setAdverts,
         setApiErrorCode,
         setSelectedAdId,
@@ -90,24 +100,14 @@ const MyAdsTable = () => {
                 )}
                 <div className='my-ads-content__header'>
                     <DesktopWrapper>
-                        <Button is_disabled={is_barred} large onClick={onClickCreate} primary>
-                            <Localize i18n_default_text='Create new ad' />
-                        </Button>
+                        <AdCreateButton class_name='p2p-empty__button' />
                     </DesktopWrapper>
                     <ToggleAds />
                 </div>
                 <AdsTable />
                 <MobileWrapper>
                     <div className='my-ads-content__create-container'>
-                        <Button
-                            className='my-ads-content__create'
-                            is_disabled={is_barred}
-                            large
-                            onClick={onClickCreate}
-                            primary
-                        >
-                            <Localize i18n_default_text='Create new ad' />
-                        </Button>
+                        <AdCreateButton class_name='my-ads-content__create' />
                     </div>
                 </MobileWrapper>
             </React.Fragment>
@@ -116,9 +116,7 @@ const MyAdsTable = () => {
 
     return (
         <P2pEmpty icon='IcCashierNoAds' title={localize('You have no ads.')}>
-            <Button className='p2p-empty__button' is_disabled={is_barred} onClick={() => onClickCreate()} large primary>
-                <Localize i18n_default_text='Create new ad' />
-            </Button>
+            <AdCreateButton class_name='p2p-empty__button' />
         </P2pEmpty>
     );
 };

packages/p2p/src/pages/my-ads/sell-ad-payment-methods-list/__tests__/sell-ad-payment-methods-list.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { useStores } from 'Stores/index';
+import { useStores } from 'Stores';
 import SellAdPaymentMethodsList from '../sell-ad-payment-methods-list';
 import { advertiser_payment_methods_list } from '../../__mocks__/mock-data';