update branch

packages/cashier/package.json

@@ -44,6 +44,7 @@
         "classnames": "^2.2.6",
         "formik": "^2.1.4",
         "loadjs": "^4.2.0",
+        "lodash.debounce": "^4.0.8",
         "mobx": "^5.15.7",
         "mobx-react": "6.3.1",
         "moment": "^2.29.2",

packages/cashier/src/components/cashier-search-box/__tests__/cashier-search-box.spec.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { fireEvent, screen, render, waitFor } from '@testing-library/react';
+import CashierSearchBox from '../cashier-search-box';
+
+describe('<CashierSearchBox />', () => {
+    const props = {
+        onClear: jest.fn(),
+        onSearch: jest.fn(),
+        placeholder: 'Search placeholder',
+        setIsSearchLoading: jest.fn(),
+    };
+
+    it('should have close icon if there is a text in input field', () => {
+        render(<CashierSearchBox {...props} />);
+
+        const el_search_input = screen.getByPlaceholderText('Search placeholder');
+        fireEvent.change(el_search_input, { target: { value: 'hello' } });
+
+        expect(screen.getByTestId('dt_close_icon')).toBeInTheDocument();
+    });
+
+    it('should trigger onClear callback when the user clicks on close icon', () => {
+        render(<CashierSearchBox {...props} />);
+
+        const el_search_input = screen.getByPlaceholderText('Search placeholder');
+        fireEvent.change(el_search_input, { target: { value: 'hello' } });
+        const el_close_icon = screen.getByTestId('dt_close_icon');
+        fireEvent.click(el_close_icon);
+
+        expect(props.onClear).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not trigger setTimeout callback (formSubmit) when the user presses backspace button on empty search input', () => {
+        jest.useFakeTimers();
+        jest.spyOn(global, 'setTimeout');
+        render(<CashierSearchBox {...props} />);
+
+        const el_search_input = screen.getByPlaceholderText('Search placeholder');
+        fireEvent.keyDown(el_search_input);
+
+        expect(props.setIsSearchLoading).not.toHaveBeenCalled();
+        expect(setTimeout).not.toHaveBeenCalled();
+        jest.useRealTimers();
+    });
+
+    it('should trigger setIsSearchLoading, onSearch and setTimeout callbacks when the user enters the search term', async () => {
+        jest.useFakeTimers();
+        jest.spyOn(global, 'setTimeout');
+
+        render(<CashierSearchBox {...props} />);
+
+        const el_search_input = screen.getByPlaceholderText('Search placeholder');
+        await waitFor(() => {
+            fireEvent.change(el_search_input, { target: { value: 'hello' } });
+            fireEvent.keyUp(el_search_input);
+
+            expect(props.setIsSearchLoading).toHaveBeenCalled();
+            expect(setTimeout).toHaveBeenCalled();
+            expect(props.onSearch).toHaveBeenCalled();
+        });
+        jest.useRealTimers();
+    });
+});

packages/cashier/src/components/cashier-search-box/cashier-search-box.jsx

@@ -0,0 +1,76 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Field as FormField, Formik, Form } from 'formik';
+import { Icon, Input } from '@deriv/components';
+import './cashier-search-box.scss';
+
+const CashierSearchBox = ({ className, onClear, onSearch, placeholder, search_term, setIsSearchLoading }) => {
+    React.useEffect(() => {
+        return onClear;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const onSearchClear = setFieldValue => {
+        setFieldValue('search', '');
+        onClear();
+    };
+
+    const onSearchKeyUpDown = (submitForm, search) => {
+        if (!search.trim() && search_term) {
+            onClear();
+        } else if (!search.trim()) return;
+
+        setIsSearchLoading(true);
+        submitForm();
+    };
+
+    const onSearchSubmit = ({ search }) => {
+        onSearch(search);
+    };
+
+    return (
+        <div className={classNames('cashier-search-box', className)}>
+            <Formik initialValues={{ search: '' }} onSubmit={onSearchSubmit}>
+                {({ submitForm, values: { search }, setFieldValue }) => (
+                    <Form>
+                        <FormField name='search'>
+                            {({ field }) => (
+                                <Input
+                                    {...field}
+                                    type='text'
+                                    name='search'
+                                    placeholder={placeholder}
+                                    onKeyUp={() => onSearchKeyUpDown(submitForm, search)}
+                                    onKeyDown={() => onSearchKeyUpDown(submitForm, search)}
+                                    leading_icon={<Icon icon='IcSearch' data_testid='dt_search_icon' />}
+                                    trailing_icon={
+                                        search && (
+                                            <Icon
+                                                color='general'
+                                                data_testid='dt_close_icon'
+                                                icon='IcCloseCircle'
+                                                onClick={() => onSearchClear(setFieldValue)}
+                                            />
+                                        )
+                                    }
+                                />
+                            )}
+                        </FormField>
+                    </Form>
+                )}
+            </Formik>
+        </div>
+    );
+};
+
+CashierSearchBox.propTypes = {
+    className: PropTypes.string,
+    onClear: PropTypes.func,
+    onSearch: PropTypes.func,
+    placeholder: PropTypes.string,
+    search_term: PropTypes.string,
+    setIsSearchLoading: PropTypes.func,
+};
+
+export default CashierSearchBox;

packages/cashier/src/components/cashier-search-box/cashier-search-box.scss

@@ -0,0 +1,20 @@
+.cashier-search-box {
+    width: 100%;
+    margin-right: 1.6rem;
+    .dc-input {
+        margin-bottom: 0;
+        height: 3.2rem;
+        overflow: hidden;
+        &__field {
+            padding: 0.6rem 3.2rem;
+            height: 3.2rem;
+        }
+        &__leading-icon {
+            margin-left: 0.8rem;
+            top: 0.8rem;
+        }
+        &__trailing-icon {
+            cursor: pointer;
+        }
+    }
+}

packages/cashier/src/components/cashier-search-box/index.js

@@ -0,0 +1,3 @@
+import CashierSearchBox from './cashier-search-box.jsx';
+
+export default CashierSearchBox;

packages/cashier/src/components/error-dialog/error-dialog.tsx

@@ -7,6 +7,7 @@ import { connect } from 'Stores/connect';
 import { TRootStore, TError, TReactElement } from 'Types';
 
 type TErrorDialogProps = {
+    className: string;
     disableApp: () => void;
     enableApp: () => void;
     error: TError | Record<string, never>;
@@ -21,7 +22,7 @@ type TSetDetails = {
     has_close_icon?: boolean;
 };
 
-const ErrorDialog = ({ disableApp, enableApp, error = {} }: TErrorDialogProps) => {
+const ErrorDialog = ({ className, disableApp, enableApp, error = {} }: TErrorDialogProps) => {
     const history = useHistory();
     const [is_visible, setIsVisible] = React.useState(false);
     const [details, setDetails] = React.useState<TSetDetails>({
@@ -126,6 +127,7 @@ const ErrorDialog = ({ disableApp, enableApp, error = {} }: TErrorDialogProps) =
             title={details.title}
             confirm_button_text={details.confirm_button_text}
             cancel_button_text={details.cancel_button_text}
+            className={className}
             onConfirm={() => {
                 if (typeof details.onConfirm === 'function') {
                     details.onConfirm();

packages/cashier/src/components/transfer-confirm/__tests__/transfer-confirm.spec.tsx

@@ -1,6 +1,4 @@
 import React from 'react';
-import { Money } from '@deriv/components';
-import { Localize } from '@deriv/translations';
 import { fireEvent, render, screen } from '@testing-library/react';
 import TransferConfirm from '../transfer-confirm';
 
@@ -10,9 +8,8 @@ jest.mock('Stores/connect', () => ({
     connect: () => Component => Component,
 }));
 
-let modal_root_el;
-
 describe('<TransferConfirm />', () => {
+    let modal_root_el;
     beforeAll(() => {
         modal_root_el = document.createElement('div');
         modal_root_el.setAttribute('id', 'modal_root');
@@ -22,90 +19,97 @@ describe('<TransferConfirm />', () => {
     afterAll(() => {
         document.body.removeChild(modal_root_el);
     });
+
     const props = {
         data: [
-            { key: 'pa', label: 'Payment agent', value: 'Payment Agent of CR90000561 (Created from Script)' },
-            { key: 'amount', label: 'Amount', value: <Money amount='100' currency='USD' show_currency /> },
-            { key: 'test', label: 'test', value: ['test1', 'test2'] },
+            { key: '1', label: 'label 1', value: 'value 1' },
+            { key: '2', label: 'label 2', value: ['value 2', 'value 3'] },
         ],
-        header: 'Please confirm the transaction details in order to complete the withdrawal:',
+        error: {},
         onClickBack: jest.fn(),
         onClickConfirm: jest.fn(),
-        warning_messages: [
-            <Localize
-                i18n_default_text='Remember, it’s solely your responsibility to ensure the transfer is made to the correct account.'
-                key={0}
-            />,
-            <Localize i18n_default_text='We do not guarantee a refund if you make a wrong transfer.' key={1} />,
-        ],
     };
 
-    it('should show proper icon, header, messages and buttons', () => {
+    it('should show proper icon, messages and buttons', () => {
         render(<TransferConfirm {...props} />);
 
-        expect(screen.getByTestId('dti_confirm_details_icon')).toBeInTheDocument();
-        expect(
-            screen.getByText('Please confirm the transaction details in order to complete the withdrawal:')
-        ).toBeInTheDocument();
-        expect(screen.getByText('Payment agent')).toBeInTheDocument();
-        expect(screen.getByText('Payment Agent of CR90000561 (Created from Script)')).toBeInTheDocument();
-        expect(screen.getByText('Amount')).toBeInTheDocument();
-        expect(screen.getByText('100.00 USD')).toBeInTheDocument();
-        expect(screen.getByText('test')).toBeInTheDocument();
-        expect(screen.getByText('test1')).toBeInTheDocument();
-        expect(screen.getByText('test2')).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Back' })).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Confirm' })).toBeInTheDocument();
+        const [back_btn, transfer_now_btn] = screen.getAllByRole('button');
+
+        expect(screen.getByTestId('dt_red_warning_icon')).toBeInTheDocument();
+        expect(screen.getByText('label 1')).toBeInTheDocument();
+        expect(screen.getByText('value 1')).toBeInTheDocument();
+        expect(screen.getByText('label 2')).toBeInTheDocument();
+        expect(screen.getByText('value 2')).toBeInTheDocument();
+        expect(screen.getByText('value 3')).toBeInTheDocument();
+        expect(screen.getByRole('checkbox')).toBeInTheDocument();
+        expect(screen.getByText(/please ensure/i)).toBeInTheDocument();
+        expect(screen.getByText(/all details/i)).toBeInTheDocument();
+        expect(screen.getByText(/are/i)).toBeInTheDocument();
+        expect(screen.getByText(/correct/i)).toBeInTheDocument();
+        expect(screen.getByText(/before making your transfer/i)).toBeInTheDocument();
+        expect(screen.getByText(/we/i)).toBeInTheDocument();
+        expect(screen.getByText(/do not/i)).toBeInTheDocument();
+        expect(screen.getByText(/guarantee a refund if you make a wrong transfer/i)).toBeInTheDocument();
+        expect(back_btn).toBeInTheDocument();
+        expect(transfer_now_btn).toBeInTheDocument();
+    });
+
+    it('should show error messages and button', () => {
+        render(
+            <TransferConfirm
+                {...props}
+                error={{
+                    code: 'code',
+                    message: 'error_message',
+                }}
+            />
+        );
+
+        expect(screen.getByText('Cashier Error')).toBeInTheDocument();
+        expect(screen.getByText('error_message')).toBeInTheDocument();
+        expect(screen.getAllByRole('button')[2]).toBeInTheDocument();
     });
 
-    it('should trigger onClick callback when the client clicks on Back button', () => {
+    it('should trigger onClickBack method when the client clicks on Back button', () => {
         render(<TransferConfirm {...props} />);
 
-        const el_back_btn = screen.getByRole('button', { name: 'Back' });
-        fireEvent.click(el_back_btn);
+        const [back_btn, _] = screen.getAllByRole('button');
+        fireEvent.click(back_btn);
+
         expect(props.onClickBack).toHaveBeenCalledTimes(1);
     });
 
-    it('should trigger onClick callback when the client clicks on Confirm button', () => {
+    it('should enable Transfer now button when checkbox is checked', () => {
         render(<TransferConfirm {...props} />);
 
-        const el_confirm_btn = screen.getByRole('button', { name: 'Confirm' });
-        fireEvent.click(el_confirm_btn);
-        expect(props.onClickConfirm).toHaveBeenCalledTimes(1);
-    });
+        const el_checkbox = screen.getByRole('checkbox');
+        const [_, transfer_now_btn] = screen.getAllByRole('button');
+        fireEvent.click(el_checkbox);
 
-    it('should show error message', () => {
-        render(<TransferConfirm {...props} error={{ message: 'Error message' }} />);
-
-        expect(screen.getByText('Error message')).toBeInTheDocument();
+        expect(transfer_now_btn).toBeEnabled();
     });
-
-    it('should show warning messages', () => {
-        render(<TransferConfirm {...props} />);
+    it('should show proer checkbox label text when is_payment_agent_withdraw property is equal to true/false', () => {
+        const { rerender } = render(<TransferConfirm {...props} is_payment_agent_withdraw />);
 
         expect(
-            screen.getByText(
-                'Remember, it’s solely your responsibility to ensure the transfer is made to the correct account.'
-            )
+            screen.getByLabelText('I confirm that I have verified the payment agent’s transfer information.')
         ).toBeInTheDocument();
-        expect(screen.getByText('We do not guarantee a refund if you make a wrong transfer.')).toBeInTheDocument();
-    });
 
-    it('should show checkbox when is_payment_agent_transfer property is equal to true', () => {
-        render(<TransferConfirm {...props} is_payment_agent_transfer />);
+        rerender(<TransferConfirm {...props} />);
 
         expect(
             screen.getByLabelText('I confirm that I have verified the client’s transfer information.')
         ).toBeInTheDocument();
     });
 
-    it('should enable "Transfer now" button when checkbox is checked', () => {
-        render(<TransferConfirm {...props} is_payment_agent_transfer />);
+    it('should trigger onClickConfirm method when the client clicks on Transfer now button', () => {
+        render(<TransferConfirm {...props} />);
 
-        const el_checkbox_transfer_consent = screen.getByRole('checkbox');
-        fireEvent.click(el_checkbox_transfer_consent);
-        const el_btn_transfer_now = screen.getByRole('button', { name: 'Transfer now' });
+        const el_checkbox = screen.getByRole('checkbox');
+        const [_, transfer_now_btn] = screen.getAllByRole('button');
+        fireEvent.click(el_checkbox);
+        fireEvent.click(transfer_now_btn);
 
-        expect(el_btn_transfer_now).toBeEnabled();
+        expect(props.onClickConfirm).toHaveBeenCalledTimes(1);
     });
 });