bahar/Account transfer modal diel (#70)

* feat: account-transfer-modal-diel * feat: add-modal-and-cashier-changes * feat: add-appstore-modal-and-cashier-changes-continued * fix: pretifiying
hirad-deriv · Jan 3, 2023 · 79440d7 · 79440d7
1 parent ba5d895
commit 79440d7
Show file tree

Hide file tree

Showing 47 changed files with 780 additions and 546 deletions.
diff --git a/packages/appstore/package.json b/packages/appstore/package.json
@@ -26,9 +26,11 @@
     "dependencies": {
         "@deriv/account": "^1.0.0",
         "@deriv/api-types": "^1.0.54",
+        "@deriv/cashier": "^1.0.0",
         "@deriv/components": "^1.0.0",
         "@deriv/cfd": "^1.0.0",
         "@deriv/shared": "^1.0.0",
+        "@deriv/stores": "^1.0.0",
         "@deriv/trader": "^3.8.0",
         "@deriv/translations": "^1.0.0",
         "@deriv/ui": "^0.0.15",

diff --git a/packages/appstore/src/components/account-transfer-modal/account-transfer-modal.scss b/packages/appstore/src/components/account-transfer-modal/account-transfer-modal.scss
@@ -0,0 +1,11 @@
+.dc-modal__container_account-transfer-modal {
+    display: none;
+}
+
+.dc-modal-header--account-transfer-modal-header {
+    border-bottom: 1px solid var(--general-section-1);
+}
+
+.cashier__no-balance {
+    text-align: center;
+}
diff --git a/packages/appstore/src/components/account-transfer-modal/account-transfer-modal.tsx b/packages/appstore/src/components/account-transfer-modal/account-transfer-modal.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { Modal } from '@deriv/components';
+import { routes } from '@deriv/shared';
+import { useStore, observer } from '@deriv/stores';
+import { Localize } from '@deriv/translations';
+import AccountTransfer from '@deriv/cashier/src/pages/account-transfer';
+
+type TAccountTransferModal = {
+    is_modal_open: boolean;
+    toggleModal: (e?: boolean) => void;
+};
+
+const AccountTransferModal = ({ is_modal_open, toggleModal }: TAccountTransferModal) => {
+    const [is_open, setIsOpen] = React.useState<boolean>(is_modal_open);
+
+    const {
+        modules: {
+            cashier: {
+                account_transfer: { is_transfer_confirm, should_switch_account },
+            },
+        },
+    } = useStore();
+
+    const history = useHistory();
+
+    const modal_title = !is_transfer_confirm && <Localize i18n_default_text={'Transfer funds to your account'} />;
+
+    const onClickDeposit = () => {
+        setIsOpen(false);
+        history.push(routes.cashier_deposit);
+    };
+
+    const onClickNotes = () => {
+        setIsOpen(false);
+        history.push(routes.cashier_acc_transfer);
+    };
+
+    return (
+        <Modal
+            className={should_switch_account ? 'account-transfer-modal' : ''}
+            has_close_icon={!is_transfer_confirm}
+            is_open={is_open && is_modal_open}
+            is_title_centered={is_transfer_confirm}
+            small
+            title={modal_title}
+            toggleModal={toggleModal}
+            should_header_stick_body={false}
+        >
+            <Modal.Body>
+                <AccountTransfer
+                    onClickDeposit={onClickDeposit}
+                    onClickNotes={onClickNotes}
+                    onClose={() => setIsOpen(false)}
+                />
+            </Modal.Body>
+        </Modal>
+    );
+};
+
+export default observer(AccountTransferModal);
diff --git a/packages/appstore/src/components/account-transfer-modal/index.ts b/packages/appstore/src/components/account-transfer-modal/index.ts
@@ -0,0 +1,4 @@
+import AccountTransferModal from './account-transfer-modal';
+import './account-transfer-modal.scss';
+
+export default AccountTransferModal;
diff --git a/packages/appstore/src/components/app.tsx b/packages/appstore/src/components/app.tsx
@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import * as React from 'react';
-import { observer } from 'mobx-react-lite';
 import { setWebsocket, routes } from '@deriv/shared';
 import Routes from 'Components/routes/routes';
+import { StoreProvider, observer } from '@deriv/stores';
 import { useStores, initContext } from 'Stores';
 import { TRootStore } from 'Types';
 import './app.scss';
@@ -21,17 +21,19 @@ const App: React.FC<TAppProps> = ({ passthrough }: TAppProps) => {
     const { ui }: TRootStore = useStores();
 
     return (
-        <main
-            className={classNames('dashboard', {
-                'theme--light': !ui.is_dark_mode_on,
-                'theme--dark': ui.is_dark_mode_on,
-                'dashboard-onboarding': window.location.pathname === routes.onboarding,
-            })}
-        >
-            <div className='dw-dashboard'>
-                <Routes />
-            </div>
-        </main>
+        <StoreProvider store={root_store as any}>
+            <main
+                className={classNames('dashboard', {
+                    'theme--light': !ui.is_dark_mode_on,
+                    'theme--dark': ui.is_dark_mode_on,
+                    'dashboard-onboarding': window.location.pathname === routes.onboarding,
+                })}
+            >
+                <div className='dw-dashboard'>
+                    <Routes />
+                </div>
+            </main>
+        </StoreProvider>
     );
 };
 

diff --git a/packages/appstore/src/components/main-title-bar/asset-summary.tsx b/packages/appstore/src/components/main-title-bar/asset-summary.tsx
@@ -37,7 +37,7 @@ const AssetSummary = () => {
         mt5_login_list?.find((mt5_account: DetailsOfEachMT5Loginid) => isDemo(mt5_account))?.currency ||
         dxtrade_accounts_list.find((mt5_account: DetailsOfEachMT5Loginid) => isDemo(mt5_account))?.currency;
 
-    const vrtc_loginid = account_list.find((account: { is_virtual: boolean }) => account.is_virtual).loginid;
+    const vrtc_loginid = account_list.find((account: { is_virtual: boolean }) => account.is_virtual)?.loginid;
     const vrtc_currency = accounts[vrtc_loginid] ? accounts[vrtc_loginid].currency : 'USD';
     const account_total_balance_currency =
         selected_account_type === 'demo' ? vrtc_currency : obj_total_balance.currency;

diff --git a/packages/appstore/webpack.config.js b/packages/appstore/webpack.config.js
@@ -1,9 +1,10 @@
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+// const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const path = require('path');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+//TODO: Uncomment this line when type script migrations on all packages done
+//const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 const is_release = process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'staging';
 
@@ -75,15 +76,15 @@ module.exports = function (env) {
                     test: /\.(js|jsx|ts|tsx)$/,
                     exclude: /node_modules/,
                     use: [
-                        {
-                            loader: '@deriv/shared/src/loaders/react-import-loader.js',
-                        },
                         {
                             loader: '@deriv/shared/src/loaders/deriv-trader-loader.js',
                         },
                         {
                             loader: '@deriv/shared/src/loaders/deriv-account-loader.js',
                         },
+                        {
+                            loader: '@deriv/shared/src/loaders/deriv-cashier-loader.js',
+                        },
                         {
                             loader: '@deriv/shared/src/loaders/deriv-cfd-loader.js',
                         },
@@ -168,9 +169,11 @@ module.exports = function (env) {
                 '@deriv/components': true,
                 '@deriv/translations': true,
                 '@deriv/account': true,
+                '@deriv/cashier': true,
                 '@deriv/cfd': true,
             },
         ],
-        plugins: [new CleanWebpackPlugin(), new ForkTsCheckerWebpackPlugin()],
+        //TODO: Uncomment this line when type script migrations on all packages done
+        // plugins: [new CleanWebpackPlugin(), new ForkTsCheckerWebpackPlugin()],
     };
 };
diff --git a/packages/cashier/src/components/cashier-locked/cashier-locked-provider.tsx b/packages/cashier/src/components/cashier-locked/cashier-locked-provider.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Localize, localize } from '@deriv/translations';
 import { formatDate } from '@deriv/shared';
-import { TEmptyStateProps } from 'Components/empty-state/empty-state';
+import { TEmptyStateProps } from '../empty-state/empty-state';
 
 type TProps = {
     cashier_validation: string[] | undefined;

diff --git a/packages/cashier/src/components/cashier-locked/cashier-locked.tsx b/packages/cashier/src/components/cashier-locked/cashier-locked.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useStore, observer } from '@deriv/stores';
-import EmptyState from 'Components/empty-state';
+import EmptyState from '../empty-state';
 import getMessage from './cashier-locked-provider';
 
 const CashierLocked = observer(() => {

diff --git a/packages/cashier/src/components/crypto-fiat-converter/crypto-fiat-converter.tsx b/packages/cashier/src/components/crypto-fiat-converter/crypto-fiat-converter.tsx
@@ -4,7 +4,7 @@ import { DesktopWrapper, Input, Icon, MobileWrapper, Text, useInterval } from '@
 import { getCurrencyDisplayCode } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { useStore, observer } from '@deriv/stores';
-import { TReactChangeEvent, TReactChildren } from 'Types';
+import { TReactChangeEvent, TReactChildren } from '../../types';
 import './crypto-fiat-converter.scss';
 
 type TTimerProps = {

diff --git a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.tsx b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.tsx
@@ -3,11 +3,15 @@ import { DataList, Icon, Loading, MobileWrapper, Table, Text } from '@deriv/comp
 import { isDesktop, isMobile, routes } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { useStore, observer } from '@deriv/stores';
-import { TCryptoTransactionDetails } from 'Types';
+import { TCryptoTransactionDetails } from '../../types';
 import CryptoTransactionsCancelModal from './crypto-transactions-cancel-modal';
 import CryptoTransactionsStatusModal from './crypto-transactions-status-modal';
 import CryptoTransactionsRenderer from './crypto-transactions-renderer';
 
+type TCryptoTransactionDetailsRow = {
+    row: TCryptoTransactionDetails;
+};
+
 const getHeaders = () => [
     { text: localize('Transaction') },
     { text: localize('Amount') },
@@ -77,7 +81,7 @@ const CryptoTransactionsHistory = observer(() => {
                                 <DataList
                                     data_list_className='crypto-transactions-history__data-list'
                                     data_source={crypto_transactions}
-                                    rowRenderer={(row_props: TCryptoTransactionDetails) => (
+                                    rowRenderer={(row_props: TCryptoTransactionDetailsRow) => (
                                         <CryptoTransactionsRenderer {...row_props} />
                                     )}
                                     keyMapper={(row: TCryptoTransactionDetails) => row.id}

diff --git a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx
@@ -3,9 +3,9 @@ import classNames from 'classnames';
 import { Button, Icon, Money, Popover, Table, Text } from '@deriv/components';
 import { epochToMoment, formatMoney, isMobile } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
+import { getStatus } from '../../constants/transaction-status';
+import { TCryptoTransactionDetails } from '../../types';
 import { useStore, observer } from '@deriv/stores';
-import { getStatus } from 'Constants/transaction-status';
-import { TCryptoTransactionDetails } from 'Types';
 
 type TCryptoTransactionsRendererProps = {
     row: TCryptoTransactionDetails;

diff --git a/packages/cashier/src/components/error-dialog/error-dialog.tsx b/packages/cashier/src/components/error-dialog/error-dialog.tsx
@@ -4,11 +4,11 @@ import { Dialog } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
 import { routes } from '@deriv/shared';
 import { useStore, observer } from '@deriv/stores';
-import { TError, TReactElement } from 'Types';
+import { TError, TReactElement } from '../../types';
 
 type TErrorDialogProps = {
-    className: string;
-    error: TError | Record<string, never>;
+    className?: string;
+    error?: TError | Record<string, never>;
 };
 
 type TSetDetails = {

diff --git a/packages/cashier/src/components/error/error.tsx b/packages/cashier/src/components/error/error.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Icon, ButtonLink, StaticUrl, Text } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
-import ErrorStore from 'Stores/error-store';
+import ErrorStore from '../../stores/error-store';
 import './error.scss';
 
 type TErrorComponentProps = {

diff --git a/packages/cashier/src/components/percentage-selector/percentage-selector.tsx b/packages/cashier/src/components/percentage-selector/percentage-selector.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Text } from '@deriv/components';
 import { formatMoney, getCurrencyDisplayCode, getDecimalPlaces } from '@deriv/shared';
 import { Localize } from '@deriv/translations';
-import { TReactMouseEvent } from 'Types';
+import { TReactMouseEvent } from '../../types';
 
 type TPercentageSelectorProps = {
     amount: number;

diff --git a/packages/cashier/src/components/recent-transaction/recent-transaction.tsx b/packages/cashier/src/components/recent-transaction/recent-transaction.tsx
@@ -4,7 +4,7 @@ import { ButtonLink, Text, Icon } from '@deriv/components';
 import { Localize } from '@deriv/translations';
 import { epochToMoment } from '@deriv/shared';
 import { useStore, observer } from '@deriv/stores';
-import { getStatus } from 'Constants/transaction-status';
+import { getStatus } from '../../constants/transaction-status';
 import './recent-transaction.scss';
 
 const RecentTransaction = observer(() => {

diff --git a/packages/cashier/src/components/side-note/side-note.tsx b/packages/cashier/src/components/side-note/side-note.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { DesktopWrapper, MobileWrapper, Text } from '@deriv/components';
 import { Localize } from '@deriv/translations';
 import { isMobile } from '@deriv/shared';
-import { TReactChildren, TSideNotesProps } from 'Types';
+import { TReactChildren, TSideNotesProps } from '../../types';
 import './side-note.scss';
 
 type TSideNoteTitle = {

diff --git a/packages/cashier/src/constants/routes-config.ts b/packages/cashier/src/constants/routes-config.ts
@@ -6,7 +6,7 @@ import { AccountTransfer, Deposit, OnRamp, P2PCashier, PaymentAgent, PaymentAgen
 import { TRouteConfig, TRoute } from 'Types';
 
 // Error Routes
-const Page404 = React.lazy(() => moduleLoader(() => import(/* webpackChunkName: "404" */ 'Components/page-404')));
+const Page404 = React.lazy(() => moduleLoader(() => import(/* webpackChunkName: "404" */ '../components/page-404')));
 export type TPage404 = typeof Page404;
 
 // Order matters

diff --git a/packages/cashier/src/containers/cashier/cashier.tsx b/packages/cashier/src/containers/cashier/cashier.tsx
@@ -13,10 +13,10 @@ import {
 } from '@deriv/components';
 import { getSelectedRoute, getStaticUrl, isMobile, routes, WS } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import AccountPromptDialog from 'Components/account-prompt-dialog';
-import ErrorDialog from 'Components/error-dialog';
-import { connect } from 'Stores/connect';
-import { TClientStore, TCommonStore, TError, TRootStore, TRoute, TUiStore } from 'Types';
+import AccountPromptDialog from '../../components/account-prompt-dialog';
+import ErrorDialog from '../../components/error-dialog';
+import { connect } from '../../stores/connect';
+import { TClientStore, TCommonStore, TError, TRootStore, TRoute, TUiStore } from '../../types';
 import './cashier.scss';
 
 type TCashierProps = RouteComponentProps & {
@@ -90,6 +90,7 @@ const Cashier = ({
             toggleCashier();
             resetLastLocation();
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [toggleCashier]);
 
     React.useEffect(() => {

diff --git a/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.scss b/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.scss
@@ -13,6 +13,29 @@
             margin: 2.4rem 0;
         }
     }
+    &__deposit-button {
+        @include desktop {
+            margin: 3.4rem 0.8rem 2.4rem 0;
+        }
+        @include mobile {
+            margin: 2.4rem 0.8rem 2.4rem 0;
+        }
+    }
+
+    &__button-link {
+        cursor: pointer;
+        margin: 3.4rem 0.8rem 2.4rem 6.4rem;
+        position: absolute;
+        left: 0;
+
+        &:hover {
+            text-decoration: underline var(--brand-red-coral);
+        }
+
+        .dc-text {
+            margin-right: 0.4rem;
+        }
+    }
     &__crypto {
         &--disabled {
             pointer-events: none;
@@ -95,8 +118,10 @@
     }
     &__wrapper .account-transfer-form__input {
         margin-bottom: -0.8rem !important;
-        width: fit-content;
         min-width: 36rem;
+        &-fit-content {
+            width: fit-content;
+        }
         @include mobile {
             width: 100%;
             min-width: auto;
@@ -140,6 +165,18 @@
             }
         }
     }
+
+    &__form-buttons {
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+        align-items: center;
+
+        > * {
+            width: auto;
+        }
+    }
+
     &__loader {
         &-wrapper {
             display: flex;