Rostislav / WALL-361 / Cashier Fiat Transfer amount input field

packages/components/src/components/transfer-amount-input/__tests__/transfer-amount-input.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import TransferAmountInput from '../transfer-amount-input';
+
+describe('<TransferAmountInput/>', () => {
+    it('should render with the initial value of "0.00"', () => {
+        render(<TransferAmountInput currency={'USD'} />);
+        const input = screen.getByRole('textbox');
+        expect(input).toHaveDisplayValue('0.00');
+    });
+
+    it('should not change the value on non-numeric and non-"." inputs', () => {
+        render(<TransferAmountInput currency={'USD'} />);
+        const input = screen.getByRole('textbox');
+        fireEvent.change(input, { target: { value: 'abcdef!@#$%^&*()_+-={}[];\'"|\\/,.<>' } });
+        expect(input).toHaveDisplayValue('0.00');
+    });
+
+    it('should change the value like an ATM, i.e. from right to left, when entering digits', () => {
+        render(<TransferAmountInput currency={'USD'} />);
+        const input = screen.getByRole('textbox');
+        fireEvent.change(input, { target: { value: '1' } });
+        expect(input).toHaveDisplayValue('0.01');
+        fireEvent.change(input, { target: { value: '12' } });
+        expect(input).toHaveDisplayValue('0.12');
+        fireEvent.change(input, { target: { value: '123' } });
+        expect(input).toHaveDisplayValue('1.23');
+    });
+
+    it('should add commas for big values', () => {
+        render(<TransferAmountInput currency={'USD'} />);
+        const input = screen.getByRole('textbox');
+        fireEvent.change(input, { target: { value: '1234567890' } });
+        expect(input).toHaveDisplayValue('12,345,678.90');
+    });
+
+    it('should not remove "0.00" when backspacing', () => {
+        render(<TransferAmountInput currency={'USD'} />);
+        const input = screen.getByRole('textbox');
+        fireEvent.change(input, { target: { value: '0' } });
+        expect(input).toHaveDisplayValue('0.00');
+    });
+});

packages/components/src/components/transfer-amount-input/index.ts

@@ -0,0 +1,4 @@
+import TransferAmountInput from './transfer-amount-input';
+import './transfer-amount-input.scss';
+
+export default TransferAmountInput;

packages/components/src/components/transfer-amount-input/transfer-amount-input.scss

@@ -0,0 +1,20 @@
+.transfer-amount-input-wrapper {
+    display: flex;
+    flex-direction: column;
+
+    span {
+        font-size: 14px;
+        line-height: 20px;
+    }
+}
+
+.transfer-amount-input {
+    border: none;
+    line-height: 30px;
+
+    input {
+        font-size: 20px;
+        font-weight: 700;
+        padding: 0;
+    }
+}

packages/components/src/components/transfer-amount-input/transfer-amount-input.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import Input from '../input';
+
+type TTransferAmountInput = {
+    className?: string;
+    currency: string;
+    disabled?: boolean;
+    initialValue?: number;
+    label?: React.ReactNode;
+};
+
+const TransferAmountInput = ({ className, currency, disabled = false, initialValue, label }: TTransferAmountInput) => {
+    const [value, setValue] = useState(0);
+
+    return (
+        <div className='transfer-amount-input-wrapper'>
+            <span>{label}</span>
+            <Input
+                className='transfer-amount-input'
+                disabled={disabled}
+                onChange={e => {
+                    let input_value = e.target.value;
+                    input_value = input_value.replace(/\D/g, '');
+                    setValue(Number(input_value) / 100);
+                }}
+                type={'text'}
+                placeholder={`${value.toLocaleString('en-US', { minimumFractionDigits: 2 })} USD`}
+                value={value.toLocaleString('en-US', { minimumFractionDigits: 2 })}
+            />
+        </div>
+    );
+};
+
+Input.displayName = 'TransferAmountInput';
+
+export default TransferAmountInput;