likhith/Removed unused functions from Cashier container and added test cases

packages/cashier/src/Components/__tests__/cashier-container.spec.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import CashierContainer from '../cashier-container';
+
+jest.mock('@deriv/components', () => ({
+    ...jest.requireActual('@deriv/components'),
+    Loading: () => <div>Loading</div>,
+}));
+
+describe('<CashierContainer/>', () => {
+    const props = {
+        iframe_url: 'https://www.test_url.com',
+        clearIframe: jest.fn(),
+    };
+
+    it('should render the component with iframe when iframe_url value is passed', () => {
+        const { queryByTestId } = render(<CashierContainer {...props} />);
+        const el_loader = screen.queryByText('Loading');
+
+        expect(el_loader).not.toBeInTheDocument();
+        expect(queryByTestId('doughflow_section')).toBeTruthy();
+    });
+
+    it('should render the loading when is_loading is true', () => {
+        const { queryByTestId } = render(<CashierContainer {...props} iframe_url='' is_loading />);
+        const el_loader = screen.queryByText('Loading');
+
+        expect(el_loader).toBeInTheDocument();
+        expect(queryByTestId('doughflow_section')).toBeNull();
+    });
+
+    it('will display doughflow and loader if all props are provided', () => {
+        const { queryByTestId } = render(<CashierContainer {...props} is_loading />);
+        const el_loader = screen.queryByText('Loading');
+
+        expect(el_loader).toBeInTheDocument();
+        expect(queryByTestId('doughflow_section')).toBeTruthy();
+    });
+});

packages/cashier/src/Components/cashier-container.jsx

@@ -1,14 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { useHistory } from 'react-router-dom';
-import { routes } from '@deriv/shared';
-import { Button, Loading, Text } from '@deriv/components';
-import { Localize, localize } from '@deriv/translations';
+import { Loading } from '@deriv/components';
 import 'Sass/cashier-container.scss';
 
-const CashierContainer = ({ iframe_height, iframe_url, clearIframe, is_crypto, is_loading }) => {
-    const history = useHistory();
-
+const CashierContainer = ({ iframe_height, iframe_url, clearIframe, is_loading }) => {
     React.useEffect(() => {
         return () => {
             clearIframe();
@@ -25,26 +20,9 @@ const CashierContainer = ({ iframe_height, iframe_url, clearIframe, is_crypto, i
                     src={iframe_url}
                     frameBorder='0'
                     scrolling='auto'
+                    data-testid='doughflow_section'
                 />
             )}
-            {is_crypto && (
-                <div className='cashier-container__transfer-onramp'>
-                    <div className='cashier-container__transfer-onramp__header'>
-                        <Text line_height='xxl'>
-                            <Localize i18n_default_text='Looking for a way to buy cryptocurrency?' />
-                        </Text>
-                    </div>
-                    <div>
-                        <Button
-                            className='cashier-container__transfer-onramp__button'
-                            has_effect
-                            text={localize('Try our Fiat onramp')}
-                            onClick={() => history.push(routes.cashier_onramp)}
-                            primary
-                        />
-                    </div>
-                </div>
-            )}
         </div>
     );
 };
@@ -53,7 +31,6 @@ CashierContainer.propTypes = {
     iframe_height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     iframe_url: PropTypes.string,
     clearIframe: PropTypes.func,
-    is_crypto: PropTypes.bool,
     is_loading: PropTypes.bool,
 };
 

packages/cashier/src/Containers/__tests__/deposit.spec.js

@@ -98,7 +98,7 @@ describe('<Deposit />', () => {
     });
 
     it('should render <CryptoDeposit /> component', () => {
-        render(<Deposit {...props} is_eu currency='BTC' />);
+        render(<Deposit {...props} is_eu currency='BTC' is_crypto />);
 
         expect(screen.getByText('CryptoDeposit')).toBeInTheDocument();
     });
@@ -116,7 +116,7 @@ describe('<Deposit />', () => {
     });
 
     it('should trigger "setSideNotes" callback', () => {
-        render(<Deposit {...props} is_deposit crypto_transactions={[{}]} currency='UST' />);
+        render(<Deposit {...props} is_deposit crypto_transactions={[{}]} currency='UST' is_crypto />);
 
         expect(props.setSideNotes).toHaveBeenCalledTimes(2);
     });

packages/cashier/src/Containers/deposit.jsx

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Loading } from '@deriv/components';
-import { isCryptocurrency } from '@deriv/shared';
 import { connect } from 'Stores/connect';
 import CashierContainer from 'Components/cashier-container.jsx';
 import CashierDefault from 'Components/CashierDefault/cashier-default.jsx';
@@ -23,6 +22,7 @@ const Deposit = ({
     error,
     is_cashier_locked,
     is_cashier_default,
+    is_crypto,
     is_crypto_transactions_visible,
     is_deposit,
     is_deposit_locked,
@@ -42,8 +42,6 @@ const Deposit = ({
     setSideNotes,
     tab_index,
 }) => {
-    const is_crypto = !!currency && isCryptocurrency(currency);
-
     React.useEffect(() => {
         if (!is_crypto_transactions_visible) {
             recentTransactionOnMount();
@@ -64,7 +62,7 @@ const Deposit = ({
     React.useEffect(() => {
         if (typeof setSideNotes === 'function') {
             if (is_switching || is_deposit) setSideNotes(null);
-            if (isCryptocurrency(currency) && is_deposit && !is_switching) {
+            if (is_crypto && is_deposit && !is_switching) {
                 const side_notes = [
                     ...(crypto_transactions.length ? [<RecentTransaction key={2} />] : []),
                     ...(/^(UST)$/i.test(currency) ? [<USDTSideNote type='usdt' key={1} />] : []),
@@ -104,7 +102,7 @@ const Deposit = ({
         if (error.message) {
             return <Error error={error} />;
         }
-        if (isCryptocurrency(currency)) {
+        if (is_crypto) {
             return <CryptoDeposit />;
         }
 
@@ -113,7 +111,6 @@ const Deposit = ({
                 iframe_height={iframe_height}
                 iframe_url={iframe_url}
                 is_loading={is_loading}
-                is_crypto={is_crypto}
                 clearIframe={clearIframe}
             />
         );
@@ -129,6 +126,7 @@ Deposit.propTypes = {
     is_cashier_default: PropTypes.bool,
     is_cashier_locked: PropTypes.bool,
     is_deposit: PropTypes.bool,
+    is_crypto: PropTypes.bool,
     is_crypto_transactions_visible: PropTypes.bool,
     is_deposit_locked: PropTypes.bool,
     is_eu: PropTypes.bool,
@@ -155,6 +153,7 @@ export default connect(({ client, modules }) => ({
     error: modules.cashier.deposit.error,
     is_cashier_default: modules.cashier.general_store.is_cashier_default,
     is_cashier_locked: modules.cashier.general_store.is_cashier_locked,
+    is_crypto: modules.cashier.general_store.is_crypto,
     is_crypto_transactions_visible: modules.cashier.transaction_history.is_crypto_transactions_visible,
     is_deposit: modules.cashier.general_store.is_deposit,
     is_deposit_locked: modules.cashier.deposit.is_deposit_locked,