refactor: folder structure (binary-com#23)

packages/cashier/src/pages/payment-agent/payment-agent-container/payment-agent-container.jsx

@@ -11,7 +11,7 @@ import PaymentAgentReceipt from '../payment-agent-receipt';
 import PaymentAgentSearchBox from '../payment-agent-search-box';
 import PaymentAgentUnlistedWithdrawForm from '../payment-agent-unlisted-withdraw-form';
 import PaymentAgentWithdrawConfirm from '../payment-agent-withdraw-confirm';
-import { SignupSideNote as PaymentAgentSignupSideNote } from '../payment-agent-signup';
+import { PaymentAgentSignupSideNote } from '../payment-agent-signup/components/signup-side-note';
 
 const PaymentAgentSearchWarning = () => {
     return (

packages/cashier/src/pages/payment-agent/payment-agent-list/payment-agent-list.jsx

@@ -9,7 +9,7 @@ import VerificationEmail from 'Components/verification-email';
 import PaymentAgentContainer from '../payment-agent-container';
 import PaymentAgentWithdrawalLocked from '../payment-agent-withdrawal-locked';
 import PaymentAgentDisclaimer from '../payment-agent-disclaimer';
-import { SignupSideNote as PaymentAgentSignupSideNote } from '../payment-agent-signup';
+import { PaymentAgentSignupSideNote } from '../payment-agent-signup/components/signup-side-note';
 import SideNote from 'Components/side-note';
 import './payment-agent-list.scss';
 

packages/cashier/src/pages/payment-agent/payment-agent-signup/components/signup-side-note/index.ts

@@ -0,0 +1,3 @@
+import SignupSideNote from './signup-side-note';
+
+export { SignupSideNote as PaymentAgentSignupSideNote };

packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-side-note/signup-side-note.tsx → packages/cashier/src/pages/payment-agent/payment-agent-signup/components/signup-side-note/signup-side-note.tsx

@@ -3,8 +3,8 @@ import { observer } from 'mobx-react-lite';
 import { Button, Icon, Text } from '@deriv/components';
 import getNote from './signup-side-note-provider';
 import { useHistory } from 'react-router';
-import { useStore } from '../../../../hooks';
-import SignupWizard from '../signup-wizard';
+import { useStore } from '../../../../../hooks';
+import SignupWizard from '../../signup-wizard';
 import './signup-side-note.scss';
 
 export type TNote = {

packages/cashier/src/pages/payment-agent/payment-agent-signup/index.ts

@@ -1,3 +1,3 @@
-import SignupSideNote from './signup-side-note';
+import SignupWizard from './signup-wizard';
 
-export { SignupSideNote };
+export { SignupWizard };

packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard/signup-wizard.tsx → packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard.tsx

@@ -4,10 +4,10 @@ import { createPortal } from 'react-dom';
 import { Text } from '@deriv/components';
 import { Localize, localize } from '@deriv/translations';
 import { Wizard } from '@deriv/ui';
-import CancelWizardDialog from '../cancel-wizard-dialog';
-import SelectCountryStep from '../signup-wizard-steps/select-country-step';
-import SelfieStep from '../signup-wizard-steps/selfie-step/selfie-step';
-import { usePaymentAgentSignupReducer } from './steps-reducer';
+import CancelWizardDialog from './components/cancel-wizard-dialog';
+import CountryOfIssue from './steps/country-of-issue';
+import Selfie from './steps/selfie';
+import { usePaymentAgentSignupReducer } from './steps/steps-reducer';
 import './signup-wizard.scss';
 
 type TSignupWizardProps = {
@@ -33,10 +33,6 @@ const SignupWizard = ({ closeWizard }: TSignupWizardProps) => {
         closeWizard();
     };
 
-    const onSelfieSelect: React.ComponentProps<typeof SelfieStep>['onSelect'] = selfie => {
-        setSelfie({ selfie_with_id: selfie });
-    };
-
     const onChangeStep = (_current_step: number, _current_step_key?: string) => {
         setCurrentStepKey(_current_step_key);
     };
@@ -69,7 +65,7 @@ const SignupWizard = ({ closeWizard }: TSignupWizardProps) => {
                             is_submit_disabled={!steps_state.selected_country?.value}
                             is_fullwidth
                         >
-                            <SelectCountryStep
+                            <CountryOfIssue
                                 selected_country={steps_state.selected_country}
                                 onSelect={setSelectedCountry}
                             />
@@ -79,7 +75,7 @@ const SignupWizard = ({ closeWizard }: TSignupWizardProps) => {
                             is_submit_disabled={!steps_state.selfie?.selfie_with_id}
                             is_fullwidth
                         >
-                            <SelfieStep selfie={steps_state.selfie} onSelect={onSelfieSelect} />
+                            <Selfie selfie={steps_state.selfie} onSelect={setSelfie} />
                         </Wizard.Step>
                         <Wizard.Step step_key='complete_step' title='Step 3' is_fullwidth>
                             <>

packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/select-country-step/select-country-step.tsx → packages/cashier/src/pages/payment-agent/payment-agent-signup/steps/country-of-issue/country-of-issue.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import { Text, DesktopWrapper } from '@deriv/components';
 import { ResidenceList } from '@deriv/api-types';
 import { Localize } from '@deriv/translations';
-import CountrySelector from '../../country-selector';
+import CountrySelector from './country-selector';
 
 type TCountrySelectorProps = {
     onSelect: React.ComponentProps<typeof CountrySelector>['onSelect'];
     selected_country?: ResidenceList[number];
 };
 
-const SelectCountryStep = ({ onSelect, selected_country }: TCountrySelectorProps) => {
+const CountryOfIssue = ({ onSelect, selected_country }: TCountrySelectorProps) => {
     return (
         <>
             <DesktopWrapper>
@@ -32,4 +32,4 @@ const SelectCountryStep = ({ onSelect, selected_country }: TCountrySelectorProps
     );
 };
 
-export default React.memo(SelectCountryStep);
+export default React.memo(CountryOfIssue);

packages/cashier/src/pages/payment-agent/payment-agent-signup/country-selector/country-selector.tsx → packages/cashier/src/pages/payment-agent/payment-agent-signup/steps/country-of-issue/country-selector/country-selector.tsx

@@ -3,7 +3,7 @@ import { ResidenceList } from '@deriv/api-types';
 import { Formik, Field, FieldProps } from 'formik';
 import { Autocomplete, DesktopWrapper, MobileWrapper, SelectNative } from '@deriv/components';
 import { localize } from '@deriv/translations';
-import { useStore } from '../../../../hooks';
+import { useStore } from '../../../../../../hooks';
 import { TReactChangeEvent } from 'Types';
 import { observer } from 'mobx-react';
 

packages/cashier/src/pages/payment-agent/payment-agent-signup/steps/country-of-issue/index.ts

@@ -0,0 +1,3 @@
+import CountryOfIssue from './country-of-issue';
+
+export default CountryOfIssue;

packages/cashier/src/pages/payment-agent/payment-agent-signup/steps/selfie/index.ts

@@ -0,0 +1,3 @@
+import Selfie from './selfie';
+
+export default Selfie;

packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard-steps/selfie-step/selfie-step.tsx → packages/cashier/src/pages/payment-agent/payment-agent-signup/steps/selfie/selfie.tsx

@@ -32,9 +32,9 @@ type TSelfieStep = {
     onSelect: (value: TSelfie) => void;
 };
 
-const SelfieStep = ({ selfie, onSelect }: TSelfieStep) => {
+const Selfie = ({ selfie, onSelect }: TSelfieStep) => {
     //TODO: change the description for the selfie depending on the step number
     return <SelfieUpload initial_values={selfie} is_pa_signup onFileDrop={onSelect} />;
 };
 
-export default React.memo(SelfieStep);
+export default React.memo(Selfie);

packages/cashier/src/pages/payment-agent/payment-agent-signup/signup-wizard/steps-reducer.ts → packages/cashier/src/pages/payment-agent/payment-agent-signup/steps/steps-reducer.ts

@@ -1,6 +1,6 @@
 import { useCallback, useReducer } from 'react';
 import { ResidenceList } from '@deriv/api-types';
-import { TSelfie } from '../signup-wizard-steps/selfie-step/selfie-step';
+import { TSelfie } from './selfie/selfie';
 
 type TStepsState = {
     selfie: {
@@ -15,7 +15,7 @@ const ACTION_TYPES = {
 } as const;
 
 // Action creators
-const setSelfieAC = (value: { selfie_with_id: TSelfie }) => {
+const setSelfieAC = (value: TSelfie) => {
     return {
         type: ACTION_TYPES.SET_SELFIE,
         value,
@@ -30,13 +30,13 @@ const setSelectedCountryAC = (value?: ResidenceList[number]) => {
 };
 
 // Initial state
-const initial_state = { selfie: null, is_selfie_step_enabled: false, selected_country: {} };
+const initial_state = { selected_country: {}, selfie: null };
 
 // Reducer
-const stepReducer = (state: TStepsState, action: TActionsTypes): TStepsState => {
+const stepsReducer = (state: TStepsState, action: TActionsTypes): TStepsState => {
     switch (action.type) {
         case ACTION_TYPES.SET_SELFIE:
-            return { ...state, selfie: action.value };
+            return { ...state, selfie: { selfie_with_id: action.value } };
         case ACTION_TYPES.SET_SELECTED_COUNTRY:
             return { ...state, selected_country: action.value };
         default:
@@ -45,9 +45,9 @@ const stepReducer = (state: TStepsState, action: TActionsTypes): TStepsState =>
 };
 
 export const usePaymentAgentSignupReducer = () => {
-    const [steps_state, dispatch] = useReducer(stepReducer, initial_state);
+    const [steps_state, dispatch] = useReducer(stepsReducer, initial_state);
 
-    const setSelfie = useCallback((value: { selfie_with_id: TSelfie }) => dispatch(setSelfieAC(value)), []);
+    const setSelfie = useCallback((value: TSelfie) => dispatch(setSelfieAC(value)), []);
     const setSelectedCountry = useCallback(
         (value?: ResidenceList[number]) => dispatch(setSelectedCountryAC(value)),
         []