Vinu/converted percentage-selector component into typescript (#5785)

* converted percentage-selector component into typescript

* changed the name of test_ids in percentage-selector spec file as per new guidlines

* updated with latest upstream branch

* added reactMouse event in props.types.ts

packages/cashier/src/components/percentage-selector/__tests__/percentage-selector.spec.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import PercentageSelector from '../percentage-selector';
+
+describe('<PercentageSelector />', () => {
+    const getCalculatedAmount = jest.fn();
+    const percentage_selector_props = {
+        amount: 100,
+        currency: 'USD',
+        from_account: '',
+        getCalculatedAmount,
+        percentage: 0,
+        should_percentage_reset: false,
+        to_account: '',
+    };
+
+    it('should render the component', () => {
+        render(<PercentageSelector {...percentage_selector_props} />);
+
+        expect(screen.getByTestId('dt_percentage_selector_id')).toBeInTheDocument();
+    });
+
+    it('should calculate the percentage amount on click of percentage block', () => {
+        render(<PercentageSelector {...percentage_selector_props} />);
+
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_1'));
+        expect(screen.getByText(`25% of available balance (100.00 USD)`)).toBeInTheDocument();
+
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_2'));
+        expect(screen.getByText(`50% of available balance (100.00 USD)`)).toBeInTheDocument();
+
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_3'));
+        expect(screen.getByText(`75% of available balance (100.00 USD)`)).toBeInTheDocument();
+
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_4'));
+        expect(screen.getByText(`100% of available balance (100.00 USD)`)).toBeInTheDocument();
+    });
+
+    it('should reset the percentage block upon clicking twice', () => {
+        render(<PercentageSelector {...percentage_selector_props} />);
+
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_1'));
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_1'));
+
+        expect(screen.getByText(`0% of available balance (100.00 USD)`)).toBeInTheDocument();
+
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_2'));
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_2'));
+
+        expect(screen.getByText(`25% of available balance (100.00 USD)`)).toBeInTheDocument();
+
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_3'));
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_3'));
+
+        expect(screen.getByText(`50% of available balance (100.00 USD)`)).toBeInTheDocument();
+
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_4'));
+        fireEvent.click(screen.getByTestId('dt_percentage_selector_block_id_4'));
+
+        expect(screen.getByText(`75% of available balance (100.00 USD)`)).toBeInTheDocument();
+    });
+
+    it('should reset the percentage', () => {
+        render(<PercentageSelector {...percentage_selector_props} should_percentage_reset />);
+
+        expect(screen.getByText('0% of available balance (100.00 USD)')).toBeInTheDocument();
+    });
+});

packages/cashier/src/components/percentage-selector/index.js → packages/cashier/src/components/percentage-selector/index.ts

@@ -1,4 +1,4 @@
-import PercentageSelector from './percentage-selector.jsx';
+import PercentageSelector from './percentage-selector';
 import './percentage-selector.scss';
 
 export default PercentageSelector;

packages/cashier/src/components/percentage-selector/percentage-selector.jsx → packages/cashier/src/components/percentage-selector/percentage-selector.tsx

@@ -1,8 +1,20 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Text } from '@deriv/components';
 import { formatMoney, getCurrencyDisplayCode, getDecimalPlaces } from '@deriv/shared';
 import { Localize } from '@deriv/translations';
+import { TReactMouseEvent } from 'Types';
+
+type TPercentageSelectorProps = {
+    amount: number;
+    currency: string;
+    from_account: string;
+    getCalculatedAmount: (amount: string) => void;
+    percentage: number;
+    should_percentage_reset: boolean;
+    to_account: string;
+};
+
+type TCalculateAmountInputEvent = { target: { id: number } };
 
 const PercentageSelector = ({
     amount,
@@ -12,13 +24,15 @@ const PercentageSelector = ({
     percentage,
     should_percentage_reset,
     to_account,
-}) => {
-    const [selected_percentage, setSelectedPercentage] = React.useState('0');
+}: TPercentageSelectorProps) => {
+    const [selected_percentage, setSelectedPercentage] = React.useState<number | string>('0');
 
     React.useEffect(() => {
         if (should_percentage_reset) {
             for (let i = 1; i <= 4; i++) {
-                document.getElementById(i).style.backgroundColor = 'var(--general-section-1)';
+                const percentage_selector_block = document.getElementById(String(i));
+                if (percentage_selector_block)
+                    percentage_selector_block.style.backgroundColor = 'var(--general-section-1)';
             }
         }
     }, [should_percentage_reset]);
@@ -32,7 +46,7 @@ const PercentageSelector = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [from_account, to_account]);
 
-    const calculateAmount = (e, percent) => {
+    const calculateAmount = (e: TCalculateAmountInputEvent | TReactMouseEvent, percent: number) => {
         let new_percentage = percent;
         const is_percentage_selected = percent > 0 && percent <= selected_percentage;
         if (is_percentage_selected) new_percentage -= 25;
@@ -41,41 +55,67 @@ const PercentageSelector = ({
         getCalculatedAmount((amount * (new_percentage / 100)).toFixed(getDecimalPlaces(currency)));
 
         for (let i = 1; i <= 4; i++) {
-            if (i < e.target.id || (i === +e.target.id && !is_percentage_selected)) {
-                document.getElementById(i).style.backgroundColor = 'var(--status-success)';
-            } else {
-                document.getElementById(i).style.backgroundColor = 'var(--general-section-1)';
+            const percentage_selector_block = document.getElementById(String(i));
+            if (percentage_selector_block) {
+                if (
+                    i < (e as TCalculateAmountInputEvent).target.id ||
+                    (i === +(e as TCalculateAmountInputEvent).target.id && !is_percentage_selected)
+                ) {
+                    percentage_selector_block.style.backgroundColor = 'var(--status-success)';
+                } else {
+                    percentage_selector_block.style.backgroundColor = 'var(--general-section-1)';
+                }
             }
         }
     };
     const format_amount = formatMoney(currency, amount, true);
     const currency__display_code = getCurrencyDisplayCode(currency);
     return (
         <React.Fragment>
-            <div className='percentage-selector'>
+            <div className='percentage-selector' data-testid='dt_percentage_selector_id'>
                 <div className='percentage-selector__block-container'>
                     <Text color='prominent' size='xs' className='percentage-selector__text'>
                         {'25%'}
                     </Text>
-                    <div id='1' className='percentage-selector-block' onClick={e => calculateAmount(e, 25)} />
+                    <div
+                        id='1'
+                        className='percentage-selector-block'
+                        onClick={e => calculateAmount(e, 25)}
+                        data-testid='dt_percentage_selector_block_id_1'
+                    />
                 </div>
                 <div className='percentage-selector__block-container'>
                     <Text color='prominent' size='xs' className='percentage-selector__text'>
                         {'50%'}
                     </Text>
-                    <div id='2' className='percentage-selector-block' onClick={e => calculateAmount(e, 50)} />
+                    <div
+                        id='2'
+                        className='percentage-selector-block'
+                        onClick={e => calculateAmount(e, 50)}
+                        data-testid='dt_percentage_selector_block_id_2'
+                    />
                 </div>
                 <div className='percentage-selector__block-container'>
                     <Text color='prominent' size='xs' className='percentage-selector__text'>
                         {'75%'}
                     </Text>
-                    <div id='3' className='percentage-selector-block' onClick={e => calculateAmount(e, 75)} />
+                    <div
+                        id='3'
+                        className='percentage-selector-block'
+                        onClick={e => calculateAmount(e, 75)}
+                        data-testid='dt_percentage_selector_block_id_3'
+                    />
                 </div>
                 <div className='percentage-selector__block-container'>
                     <Text color='prominent' size='xs' className='percentage-selector__text'>
                         <Localize i18n_default_text='All' />
                     </Text>
-                    <div id='4' className='percentage-selector-block' onClick={e => calculateAmount(e, 100)} />
+                    <div
+                        id='4'
+                        className='percentage-selector-block'
+                        onClick={e => calculateAmount(e, 100)}
+                        data-testid='dt_percentage_selector_block_id_4'
+                    />
                 </div>
             </div>
             <Text color='less-prominent' size='xxs' line_height='l' className='percentage-selector__text'>
@@ -88,12 +128,4 @@ const PercentageSelector = ({
     );
 };
 
-PercentageSelector.propTypes = {
-    amount: PropTypes.number,
-    currency: PropTypes.string,
-    getCalculatedAmount: PropTypes.func,
-    percentage: PropTypes.number,
-    should_percentage_reset: PropTypes.bool,
-};
-
 export default PercentageSelector;

packages/cashier/src/types/props.types.ts

@@ -1,3 +1,5 @@
 export type TReactChangeEvent = React.ChangeEvent<HTMLInputElement>;
 
 export type TReactChildren = React.ReactNode;
+
+export type TReactMouseEvent = React.MouseEvent<HTMLElement>;