Merge branch 'master' of github.com:binary-com/deriv-app into aum/WAL…

…L-3952/fix-error-creating-mt5-financial-labuan-account

packages/account-v2/package.json

@@ -12,8 +12,8 @@
         "start": "rimraf dist && npm run test && npm run serve"
     },
     "dependencies": {
-        "@deriv-com/ui": "^1.14.1",
-        "@deriv-com/utils": "^0.0.14",
+        "@deriv-com/ui": "^1.14.5",
+        "@deriv-com/utils": "^0.0.20",
         "@deriv/api-types": "^1.0.172",
         "@deriv/api-v2": "^1.0.0",
         "@deriv/quill-icons": "^1.22.4",

packages/account-v2/src/components/LinkText/LinkText.tsx

@@ -0,0 +1,8 @@
+import React, { ComponentProps } from 'react';
+import { Text } from '@deriv-com/ui';
+
+export const LinkText = ({ children, ...rest }: ComponentProps<typeof Text>) => (
+    <Text as='a' color='red' rel='noreferrer' size='sm' target='_blank' {...rest}>
+        {children}
+    </Text>
+);

packages/account-v2/src/components/LinkText/__tests__/LinkText.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { LinkText } from '../LinkText';
+
+describe('LinkText', () => {
+    it('should render a link text', () => {
+        render(<LinkText href='link_text'>Link Text</LinkText>);
+        const linkText = screen.getByRole('link', { name: /Link Text/i });
+        expect(linkText).toBeInTheDocument();
+    });
+});

packages/account-v2/src/components/Timeline/Timeline.tsx

@@ -2,10 +2,10 @@ import React, { ComponentProps, HTMLAttributes, PropsWithChildren, ReactElement
 import { twMerge } from 'tailwind-merge';
 import { Text } from '@deriv-com/ui';
 
-type TTimelineItemProps = HTMLAttributes<HTMLDivElement> & { itemTitle: React.ReactNode };
+type TTimelineItemProps = HTMLAttributes<HTMLDivElement> & { itemTitle?: React.ReactNode };
 
 type TTimelineProps = HTMLAttributes<HTMLOListElement> & {
-    children: ReactElement<TTimelineItemProps>[];
+    children: ReactElement<TTimelineItemProps> | ReactElement<TTimelineItemProps>[];
     lineHeight?: ComponentProps<typeof Text>['lineHeight'];
 };
 
@@ -22,6 +22,7 @@ const Marker = ({ label }: { label: number }) => {
         </div>
     );
 };
+
 /**
  * @deprecated TODO: Replace this component with the one from @deriv-com/ui is implemented.
  */
@@ -37,10 +38,18 @@ export const Timeline = ({ children, className, lineHeight }: TTimelineProps) =>
                     >
                         <Marker label={idx + 1} />
                         <div className='ml-20 w-full'>
-                            <Text as='h2' className='max-w-[500px]' color='prominent' lineHeight={lineHeight} size='xs'>
-                                {child.props.itemTitle}
-                            </Text>
-                            <div className='my-16 mx-0 text-system-light-prominent-text last-of-type:mb-0'>{child}</div>
+                            {child.props.itemTitle && (
+                                <Text
+                                    as='h2'
+                                    className='max-w-[500px]'
+                                    color='prominent'
+                                    lineHeight={lineHeight}
+                                    size='xs'
+                                >
+                                    {child.props.itemTitle}
+                                </Text>
+                            )}
+                            <div className='mx-0 text-system-light-prominent-text'>{child}</div>
                         </div>
                     </li>
                 );

packages/account-v2/src/constants/manualFormConstants.tsx

@@ -20,6 +20,22 @@ export const MANUAL_DOCUMENT_TYPES = Object.freeze({
     selfieWithID: 'selfie_with_id',
 });
 
+export const UPLOAD_FILE_TYPE = Object.freeze({
+    amlglobalcheck: 'amlglobalcheck',
+    bankstatement: 'bankstatement',
+    docverification: 'docverification',
+    driverslicense: 'driverslicense',
+    driving_licence: 'driving_licence',
+    national_identity_card: 'national_identity_card',
+    other: 'other',
+    passport: 'passport',
+    powerOfAttorney: 'power_of_attorney',
+    proofaddress: 'proofaddress',
+    proofid: 'proofid',
+    proofOfOwnership: 'proof_of_ownership',
+    utilityBill: 'utility_bill',
+});
+
 export const MANUAL_FORM_PAGE_TYPES = Object.freeze({
     back: 'back',
     front: 'front',

packages/account-v2/src/constants/paymentMethodsConfig.ts

@@ -99,7 +99,7 @@ export const getPaymentMethodsConfig = () => ({
 
 type TPaymentMethodIcon = Record<TPaymentMethod, { dark: IconTypes; light: IconTypes }>;
 
-export const getPaymentMethodIcon: TPaymentMethodIcon = {
+export const getPaymentMethodIcon = (): TPaymentMethodIcon => ({
     advcash: {
         dark: PaymentMethodAdvcashBrandDarkIcon,
         light: PaymentMethodAdvcashBrandIcon,
@@ -164,4 +164,11 @@ export const getPaymentMethodIcon: TPaymentMethodIcon = {
         dark: DerivLightWalletIcon,
         light: DerivLightWalletIcon,
     },
+});
+
+export const CARD_NUMBER = {
+    maxLength: 19,
+    minLength: 16,
 };
+
+export const MAX_FILE_SIZE = 8000; // 8MB

packages/account-v2/src/containers/AccountLimitsContainer/AccountLimitsTable.tsx

@@ -16,7 +16,11 @@ const HintInfo = ({ description }: TPopoverProps) => (
 
 const PopoverMessage = ({ description }: TPopoverProps) => (
     <Tooltip message={<HintInfo description={description} />} position='right'>
-        <StandaloneCircleInfoRegularIcon className='fill-solid-grey-1' iconSize='sm' />
+        <StandaloneCircleInfoRegularIcon
+            className='fill-solid-grey-1'
+            data-testid='dt_account_limits_table_info_icon'
+            iconSize='sm'
+        />
     </Tooltip>
 );
 

packages/account-v2/src/containers/AccountLimitsContainer/__tests__/AccountLimitsSideNote.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { AccountLimitsSideNote } from '../AccountLimitsSideNote';
+
+describe('AccountLimitsSideNote', () => {
+    it('should render the side note component with the correct title and text', () => {
+        render(<AccountLimitsSideNote />);
+        expect(screen.getByText('Account limits')).toBeInTheDocument();
+        expect(screen.getByText('These are default limits that we apply to your accounts')).toBeInTheDocument();
+    });
+});

packages/account-v2/src/containers/AccountLimitsContainer/__tests__/AccountLimitsTable.spec.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useDevice } from '@deriv-com/ui';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { mockFormattedAccountsLimits } from '../../../mocks/accountLimitsResponse.mock';
+import { AccountLimitsTable } from '../AccountLimitsTable';
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({ isMobile: false })),
+}));
+
+describe('AccountLimitsTable', () => {
+    it('should render the table with correct data', () => {
+        render(<AccountLimitsTable accountLimitValues={mockFormattedAccountsLimits} />);
+        expect(screen.getByText('Trading limits')).toBeInTheDocument();
+        expect(screen.getByText('*Maximum number of open positions')).toBeInTheDocument();
+        expect(screen.getByText('100')).toBeInTheDocument();
+        expect(screen.getByText('*Maximum account cash balance')).toBeInTheDocument();
+    });
+
+    it('should render the hintInfo with Popover icon in desktop', () => {
+        render(<AccountLimitsTable accountLimitValues={mockFormattedAccountsLimits} />);
+        expect(screen.getAllByTestId('dt_account_limits_table_info_icon')).toHaveLength(4);
+    });
+
+    it('should render the Popover message when icon is hovered in desktop', () => {
+        render(<AccountLimitsTable accountLimitValues={mockFormattedAccountsLimits} />);
+        const infoIcon = screen.queryAllByTestId('dt_account_limits_table_info_icon')[0];
+        expect(infoIcon).toBeInTheDocument();
+        userEvent.hover(infoIcon);
+        expect(
+            screen.getByText(
+                'Represents the maximum number of outstanding contracts in your portfolio. Each line in your portfolio counts for one open position. Once the maximum is reached, you will not be able to open new positions without closing an existing position first.'
+            )
+        ).toBeInTheDocument();
+    });
+
+    it('should render the hintInfo as description in mobile', () => {
+        (useDevice as jest.Mock).mockReturnValue({ isMobile: true });
+        render(<AccountLimitsTable accountLimitValues={mockFormattedAccountsLimits} />);
+        expect(screen.queryByTestId('dt_account_limits_table_info_icon')).not.toBeInTheDocument();
+        expect(
+            screen.getByText(
+                'Represents the maximum number of outstanding contracts in your portfolio. Each line in your portfolio counts for one open position. Once the maximum is reached, you will not be able to open new positions without closing an existing position first.'
+            )
+        ).toBeInTheDocument();
+    });
+});

packages/account-v2/src/containers/MaskCardModal/MaskCardModal.tsx

@@ -9,7 +9,7 @@ type TMaskCardModal = {
 
 export const MaskCardModal = ({ isOpen, onClose }: TMaskCardModal) => {
     return (
-        <Modal className='w-[440px]' isOpen={isOpen}>
+        <Modal className='w-[536px]' isOpen={isOpen}>
             <Modal.Header onRequestClose={onClose}>
                 <Text as='h3' size='md' weight='bold'>
                     How to mask your card?
@@ -19,7 +19,7 @@ export const MaskCardModal = ({ isOpen, onClose }: TMaskCardModal) => {
                 <Text as='p' className='pt-20 pb-24 px-24' size='sm'>
                     Black out digits 7 to 12 of the card number that’s shown on the front of your debit/credit card.⁤
                 </Text>
-                <DerivLightCreditCardSampleIcon height={120} width={120} />
+                <DerivLightCreditCardSampleIcon className='px-12' />
             </Modal.Body>
         </Modal>
     );