[cashier-v2] Aum / FEQ-1929 / cashier-v2-transfer-receipt-and-transfe…

…r-no-account (deriv-com#14194)

* feat: added TransferReceipt along with required utils and components

* perf: added unit tests

* feat: added TransferNoAccount screen

* perf: added unit tests for utils

* chore: fix CI

* refactor: changed logic for MT5 mapper and removed unused PlatformDetails mapper

* chore: removed business logic related mappers/helpers/utils

* chore: fix CI by removing unwanted function call

packages/cashier-v2/src/flows/AccountTransfer/screens/TransferNoAccount/TransferNoAccount.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ActionScreen, Button } from '@deriv-com/ui';
+import NoAccountIcon from '../../../../assets/images/ic-cashier-no-balance.svg';
+
+const TransferNoAccount = () => {
+    return (
+        <ActionScreen
+            actionButtons={<Button size='lg'>Create Account</Button>}
+            description='Please create another Deriv, Deriv MT5, or Deriv X account.'
+            icon={<NoAccountIcon />}
+            title='You need at least two accounts'
+        />
+    );
+};
+
+export default TransferNoAccount;

packages/cashier-v2/src/flows/AccountTransfer/screens/TransferNoAccount/index.ts

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

packages/cashier-v2/src/hooks/types.ts

@@ -35,4 +35,5 @@ export namespace TMarketTypes {
     export type SortedMT5Accounts = Exclude<THooks.SortedMT5Accounts['market_type'], undefined>;
 }
 
-export type TMT5LandingCompanyName = THooks.MT5AccountsList['landing_company_short'];
+export type TMT5LandingCompanyName = THooks.MT5AccountsList['landing_company'];
+export type TMT5MarketType = THooks.MT5AccountsList['market_type'];

packages/cashier-v2/src/lib/Transfer/components/TransferAccountIcon/TransferAccountIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { CurrencyIcon, TradingAppIcon } from '../../../../components';
+import { TTransferableAccounts } from '../../types';
+
+type TProps = {
+    account: TTransferableAccounts[number];
+    size?: React.ComponentProps<typeof CurrencyIcon>['size'] | React.ComponentProps<typeof TradingAppIcon>['size'];
+};
+
+const TransferAccountIcon: React.FC<React.PropsWithChildren<TProps>> = ({ account, size = 'md' }) => {
+    if (account.account_type === 'binary' && account.currency)
+        return <CurrencyIcon currency={account.currency} size={size} />;
+
+    if (account.account_type === 'dxtrade') return <TradingAppIcon name='DERIVX' size={size} />;
+
+    if (account.account_type === 'mt5') return <div>MT5</div>;
+
+    return null;
+};
+
+export default TransferAccountIcon;

packages/cashier-v2/src/lib/Transfer/components/TransferAccountIcon/__tests__/TransferAccountIcon.spec.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import TransferAccountIcon from '../TransferAccountIcon';
+
+jest.mock('../../../../../components', () => ({
+    ...jest.requireActual('../../../../../components'),
+    CurrencyIcon: jest.fn(({ currency, size }) => (
+        <div>
+            CurrencyIcon-{currency}-{size}
+        </div>
+    )),
+    TradingAppIcon: jest.fn(({ name, size }) => (
+        <div>
+            TradingAppIcon-{name}-{size}
+        </div>
+    )),
+}));
+
+describe('<TransferAccountIcon />', () => {
+    it('should display the correct currency icon for deriv accounts', () => {
+        render(<TransferAccountIcon account={{ account_type: 'binary', currency: 'BTC' }} />);
+
+        expect(screen.getByText('CurrencyIcon-BTC-md')).toBeInTheDocument();
+    });
+
+    it('should display the correct MT5 icon for MT5 app', () => {
+        render(
+            <TransferAccountIcon
+                account={{
+                    account_type: 'mt5',
+                    currency: 'USD',
+                    mt5_group: 'real\\p01_ts01\\financial\\svg_std-hr_usd',
+                }}
+            />
+        );
+
+        expect(screen.getByText('MT5')).toBeInTheDocument();
+    });
+
+    it('should display the correct Deriv X icon for Deriv X app', () => {
+        render(
+            <TransferAccountIcon
+                account={{
+                    account_type: 'dxtrade',
+                    currency: 'USD',
+                }}
+            />
+        );
+
+        expect(screen.getByText('TradingAppIcon-DERIVX-md')).toBeInTheDocument();
+    });
+});

packages/cashier-v2/src/lib/Transfer/components/TransferAccountIcon/index.ts

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

packages/cashier-v2/src/lib/Transfer/components/TransferReceipt/TransferReceipt.module.scss

@@ -0,0 +1,27 @@
+.actions {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.8rem;
+
+    @include mobile-cashier-v2 {
+        flex-direction: column;
+    }
+}
+
+.account-info {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.8rem;
+}
+
+.account-id {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.4rem;
+}