thisyahlen/chore: separate folder structure for Cashier (deriv-com#10617

)

* chore: separate folder structure

* chore: restructure v2

* chore: restructure v3

* chore: update index.ts

* fix: ci

packages/wallets/src/components/InlineMessage/InlineMessage.tsx → packages/wallets/src/components/Base/InlineMessage/InlineMessage.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
-import useDevice from '../../hooks/useDevice';
-import AlertAnnounce from '../../public/images/alert-annouce.svg';
-import AlertDanger from '../../public/images/alert-danger.svg';
-import AlertInfo from '../../public/images/alert-info.svg';
-import Warning from '../../public/images/warning.svg';
+import useDevice from '../../../hooks/useDevice';
+import AlertAnnounce from '../../../public/images/alert-annouce.svg';
+import AlertDanger from '../../../public/images/alert-danger.svg';
+import AlertInfo from '../../../public/images/alert-info.svg';
+import Warning from '../../../public/images/warning.svg';
 import './InlineMessage.scss';
 
 const typeIconMapper = {

packages/wallets/src/components/Base/index.ts

@@ -0,0 +1 @@
+export * from './InlineMessage';

packages/wallets/src/components/index.ts

@@ -1,10 +1,10 @@
 export * from './AccountsList';
+export * from './Base';
 export * from './CreatePassword';
 export * from './DesktopWalletsList';
 export * from './DxtradeEnterPasswordModal';
 export * from './EnterPassword';
 export * from './ExternalTradingPlatforms';
-export * from './InlineMessage';
 export * from './Loader';
 export * from './MT5AccountTypeModal';
 export * from './MT5PasswordModal';
@@ -15,15 +15,7 @@ export * from './SecondaryActionButton';
 export * from './TradingAccountCard';
 export * from './WalletCard';
 export * from './WalletCardIcon';
-export * from './WalletCashier';
-export * from './WalletCashierContent';
-export * from './WalletCashierHeader';
 export * from './WalletClipboard';
-export * from './WalletDepositCrypto';
-export * from './WalletDepositCryptoAddress';
-export * from './WalletDepositCryptoCurrencyDetails';
-export * from './WalletDepositCryptoDisclaimers';
-export * from './WalletDepositFiat';
 export * from './WalletListCard';
 export * from './WalletListCardActions';
 export * from './WalletListCardBadge';
@@ -34,8 +26,3 @@ export * from './WalletsAccordion';
 export * from './WalletsAddMoreCarousel';
 export * from './WalletsCarousel';
 export * from './WalletsCarouselContent';
-export * from './WalletTransfer';
-export * from './WalletTransferFormAccountCard';
-export * from './WalletTransferFormAccountSelection';
-export * from './WalletTransferFormDropdown';
-export * from './WalletTransferFormInputField';

packages/wallets/src/components/WalletCashier/WalletCashier.tsx → packages/wallets/src/features/cashier/WalletCashier.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useActiveWalletAccount } from '@deriv/api';
-import WalletCashierContent from '../WalletCashierContent/WalletCashierContent';
-import WalletCashierHeader from '../WalletCashierHeader/WalletCashierHeader';
+import { WalletCashierContent, WalletCashierHeader } from './components';
 import './WalletCashier.scss';
 
 const WalletCashier = () => {

packages/wallets/src/components/WalletCashierContent/WalletCashierContent.tsx → packages/wallets/src/features/cashier/components/WalletCashierContent/WalletCashierContent.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import { useHistory, useRouteMatch } from 'react-router-dom';
-import { WalletDeposit } from '../WalletDeposit';
-import { WalletTransactions } from '../WalletTransactions';
-import { WalletTransfer } from '../WalletTransfer';
+import { WalletDeposit } from '../../flows/WalletDeposit';
+import { WalletTransactions } from '../../flows/WalletTransactions';
+import { WalletTransfer } from '../../flows/WalletTransfer';
 
 const WalletCashierContent = () => {
     const history = useHistory();

packages/wallets/src/components/WalletCashierHeader/WalletCashierHeader.tsx → packages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { useActiveWalletAccount } from '@deriv/api';
-import useDevice from '../../hooks/useDevice';
-import CloseIcon from '../../public/images/close-icon.svg';
-import { WalletCardIcon } from '../WalletCardIcon';
-import { WalletGradientBackground } from '../WalletGradientBackground';
-import { WalletListCardBadge } from '../WalletListCardBadge';
+import { WalletCardIcon } from '../../../../components/WalletCardIcon';
+import { WalletGradientBackground } from '../../../../components/WalletGradientBackground';
+import { WalletListCardBadge } from '../../../../components/WalletListCardBadge';
+import useDevice from '../../../../hooks/useDevice';
+import CloseIcon from '../../../../public/images/close-icon.svg';
 import './WalletCashierHeader.scss';
 
 const tabs = ['deposit', 'withdraw', 'transfer', 'transactions'] as const;

packages/wallets/src/features/cashier/components/index.ts

@@ -0,0 +1,2 @@
+export * from './WalletCashierContent';
+export * from './WalletCashierHeader';

packages/wallets/src/components/WalletDeposit/WalletDeposit.tsx → packages/wallets/src/features/cashier/flows/WalletDeposit/WalletDeposit.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useActiveWalletAccount } from '@deriv/api';
-import { WalletDepositCrypto } from '../WalletDepositCrypto';
-import { WalletDepositFiat } from '../WalletDepositFiat';
+import { WalletDepositCrypto, WalletDepositFiat } from '../../screens';
 
 const WalletDeposit = () => {
     const { data } = useActiveWalletAccount();

packages/wallets/src/components/WalletTransactions/WalletTransactions.tsx → packages/wallets/src/features/cashier/flows/WalletTransactions/WalletTransactions.tsx

@@ -1,6 +1,5 @@
 import React, { ComponentProps, useState } from 'react';
-import { WalletTransactionsCrypto } from '../WalletTransactionsCrypto';
-import { WalletTransactionsFilter } from '../WalletTransactionsFilter';
+import { WalletTransactionsCrypto, WalletTransactionsFilter } from '../../screens/WalletTransactionsScreens';
 import './WalletTransactions.scss';
 
 const WalletTransactions = () => {

packages/wallets/src/components/WalletTransfer/WalletTransfer.tsx → packages/wallets/src/features/cashier/flows/WalletTransfer/WalletTransfer.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Formik } from 'formik';
 import { useActiveWalletAccount, useTransferBetweenAccounts } from '@deriv/api';
-import WalletTransferFormDropdown from '../WalletTransferFormDropdown/WalletTransferFormDropdown';
-import WalletTransferFormInputField from '../WalletTransferFormInputField/WalletTransferFormInputField';
+import { WalletTransferFormDropdown, WalletTransferFormInputField } from '../../screens/WalletTransferScreens';
 import './WalletTransfer.scss';
 
 type TInitialValues = {

packages/wallets/src/features/cashier/flows/index.ts

@@ -0,0 +1,3 @@
+export * from './WalletDeposit';
+export * from './WalletTransactions';
+export * from './WalletTransfer';

packages/wallets/src/features/cashier/index.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './flows';
+export * from './screens';

packages/wallets/src/components/WalletDepositCryptoAddress/WalletDepositCryptoAddress.tsx → packages/wallets/src/features/cashier/screens/WalletDepositScreens/WalletDepositCryptoAddress/WalletDepositCryptoAddress.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
 import QRCode from 'qrcode.react';
 import { useAuthorize, useDepositCryptoAddress } from '@deriv/api';
-import useDevice from '../../hooks/useDevice';
-import { Loader } from '../Loader';
-import WalletClipboard from '../WalletClipboard/WalletClipboard';
+import { Loader } from '../../../../../components/Loader';
+import { WalletClipboard } from '../../../../../components/WalletClipboard';
+import useDevice from '../../../../../hooks/useDevice';
 import './WalletDepositCryptoAddress.scss';
 
 const WalletDepositCryptoAddress = () => {

packages/wallets/src/components/WalletDepositCryptoDisclaimers/WalletDepositCryptoDisclaimers.tsx → packages/wallets/src/features/cashier/screens/WalletDepositScreens/WalletDepositCryptoDisclaimers/WalletDepositCryptoDisclaimers.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useActiveWalletAccount } from '@deriv/api';
-import useDevice from '../../hooks/useDevice';
-import { InlineMessage } from '../InlineMessage';
+import { InlineMessage } from '../../../../../components/Base';
+import useDevice from '../../../../../hooks/useDevice';
 import './WalletDepositCryptoDisclaimers.scss';
 
 // Check with BE to see if we can get the network name from the API.

packages/wallets/src/features/cashier/screens/WalletDepositScreens/index.ts

@@ -0,0 +1,5 @@
+export * from './WalletDepositCrypto';
+export * from './WalletDepositCryptoAddress';
+export * from './WalletDepositCryptoCurrencyDetails';
+export * from './WalletDepositCryptoDisclaimers';
+export * from './WalletDepositFiat';

packages/wallets/src/components/WalletTransactionsCrypto/WalletTransactionsCrypto.tsx → packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCrypto/WalletTransactionsCrypto.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import moment from 'moment';
 import { useCryptoTransactions } from '@deriv/api';
-import { Loader } from '../Loader';
+import { Loader } from '../../../../../components/Loader';
 import { WalletTransactionsCryptoRow } from '../WalletTransactionsCryptoRow';
 import { WalletTransactionsNoDataState } from '../WalletTransactionsNoDataState';
 import { WalletTransactionsTable } from '../WalletTransactionsTable';

packages/wallets/src/components/WalletTransactionsCryptoRow/WalletTransactionsCryptoRow.tsx → packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsCryptoRow/WalletTransactionsCryptoRow.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { useActiveWalletAccount, useCryptoTransactions } from '@deriv/api';
-import { WalletCurrencyCard } from '../WalletCurrencyCard';
+import { WalletCurrencyCard } from '../../../../../components/WalletCurrencyCard';
 import './WalletTransactionsCryptoRow.scss';
 
 const statusCodeMapper = {

packages/wallets/src/components/WalletTransactionsNoDataState/WalletTransactionsNoDataState.tsx → packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/WalletTransactionsNoDataState/WalletTransactionsNoDataState.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import NoRecentTransactions from '../../public/images/no-recent-transactions.svg';
+import NoRecentTransactions from '../../../../../public/images/no-recent-transactions.svg';
 import './WalletTransactionsNoDataState.scss';
 
 const WalletTransactionsNoDataState = () => {

packages/wallets/src/features/cashier/screens/WalletTransactionsScreens/index.ts

@@ -0,0 +1,5 @@
+export * from './WalletTransactionsCrypto';
+export * from './WalletTransactionsCryptoRow';
+export * from './WalletTransactionsFilter';
+export * from './WalletTransactionsNoDataState';
+export * from './WalletTransactionsTable';

packages/wallets/src/components/WalletTransferFormAccountCard/WalletTransferFormAccountCard.tsx → packages/wallets/src/features/cashier/screens/WalletTransferScreens/WalletTransferFormAccountCard/WalletTransferFormAccountCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useAccountsList } from '@deriv/api';
-import { WalletCurrencyCard } from '../WalletCurrencyCard';
-import { WalletListCardBadge } from '../WalletListCardBadge';
+import { WalletCurrencyCard } from '../../../../../components/WalletCurrencyCard';
+import { WalletListCardBadge } from '../../../../../components/WalletListCardBadge';
 import './WalletTransferFormAccountCard.scss';
 
 type TProps = {

packages/wallets/src/components/WalletTransferFormAccountSelection/WalletTransferFormAccountSelection.tsx → packages/wallets/src/features/cashier/screens/WalletTransferScreens/WalletTransferFormAccountSelection/WalletTransferFormAccountSelection.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useAccountsList } from '@deriv/api';
-import CloseIcon from '../../public/images/close-icon.svg';
-import { Loader } from '../Loader';
-import { useModal } from '../ModalProvider';
+import { Loader } from '../../../../../components/Loader';
+import { useModal } from '../../../../../components/ModalProvider';
+import CloseIcon from '../../../../../public/images/close-icon.svg';
 import WalletTransferFromAccountCard from '../WalletTransferFormAccountCard/WalletTransferFormAccountCard';
 import './WalletTransferFormAccountSelection.scss';
 

packages/wallets/src/components/WalletTransferFormDropdown/WalletTransferFormDropdown.tsx → packages/wallets/src/features/cashier/screens/WalletTransferScreens/WalletTransferFormDropdown/WalletTransferFormDropdown.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { useFormikContext } from 'formik';
 import { useAccountsList } from '@deriv/api';
-import IcDropdown from '../../public/images/ic-dropdown.svg';
-import { useModal } from '../ModalProvider';
-import { WalletListCardBadge } from '../WalletListCardBadge';
+import { useModal } from '../../../../../components/ModalProvider';
+import { WalletListCardBadge } from '../../../../../components/WalletListCardBadge';
+import IcDropdown from '../../../../../public/images/ic-dropdown.svg';
 import WalletTransferFromAccountCard from '../WalletTransferFormAccountCard/WalletTransferFormAccountCard';
 import WalletTransferFormAccountSelection from '../WalletTransferFormAccountSelection/WalletTransferFormAccountSelection';
 import './WalletTransferFormDropdown.scss';

packages/wallets/src/components/WalletTransferFormInputField/WalletTransferFormInputField.tsx → packages/wallets/src/features/cashier/screens/WalletTransferScreens/WalletTransferFormInputField/WalletTransferFormInputField.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useFormikContext } from 'formik';
-import useInputATMFormatter from '../../hooks/useInputATMFormatter';
+import useInputATMFormatter from '../../../../../hooks/useInputATMFormatter';
 import './WalletTransferFormInputField.scss';
 
 type TProps = {

packages/wallets/src/features/cashier/screens/WalletTransferScreens/index.ts

@@ -0,0 +1,4 @@
+export * from './WalletTransferFormAccountCard';
+export * from './WalletTransferFormAccountSelection';
+export * from './WalletTransferFormDropdown';
+export * from './WalletTransferFormInputField';

packages/wallets/src/features/cashier/screens/index.ts

@@ -0,0 +1,3 @@
+export * from './WalletDepositScreens';
+export * from './WalletTransactionsScreens';
+export * from './WalletTransferScreens';

packages/wallets/src/features/index.ts

@@ -0,0 +1 @@
+export { default as WalletCashier } from './cashier/WalletCashier';

packages/wallets/src/routes/CashierModalRoute/CashierModalRoute.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { WalletCashier } from '../../components';
+import { WalletCashier } from '../../features';
 import './CashierModalRoute.scss';
 
 const CashierModalRoute: React.FC = () => (