likhith/create floating-rate ad (#4964)

* Floating-rate Ui created

* Added validations to floating-rate component

* Implemented Floating rate component

* Added default values for floating rates based on ad type

* fixed lint issues

* Minor bug fixes

* Added store subscriptions

* Enhanced InputField component and added floating rate store

* Resolved lint errors

* Added changes for My Ad screen

* Added floate-rate

* Added exisiting user update

* Added reaction to my-ad store

* Edit form

* Added edit ad section

* Added switch rate modal

* Added switch ad dialog

* Added banner condition

* Added banner condition

* Empty commit

* Minor bug fixes

* Minor bug fixes

* removed console logs

* Incorporated API changes

* Incorporated review comments

* Removed duplication

* Integrated API with create floting rate ad

* Incorporated review comments

* Added floating rate error messages

* Resolved lint error

* Added styling as per UX

* Minor bug fix in create ad form

* Changes CSS as per BEM

* Resolved lint error

* Added current_focus to input field

* Minor bug fixes for Create ad

* Incorporated review comments

* Minor bug fix

* Removed empty structure

* Removed additional switch state

* Fixed issue with date banner

* Added test cases for Floating rate component

* Removed the empty element and replaced with null

* Incorporated the changes

* fixed incorrect file name

* Trigger Build

* Added as per naming

* Removed localize of 1

* Added review comments

* Incorporated changes

* Replaced string with constant

* Incorporated review comments

* Removed un-necessary div

* Removed css

* Renamed function

* Minor bug fixes and incorporated comments

* Added fallback

* alphabetize observables

* Replaced CSS for Ad status

* Resoled CSS and functionality bugs

* Fixed lint errors

* Resolved lint erros

* Incorporated review comments

* Reduced spacing between the banner

* Formatted user input

* Fixed failing test case

* Added comments to explain functionality

* Fetching date and time from server

* Renamed function

* Refactored code

* Added review comments

* Resolved decimal round off issue

* Fixed Rounding off of decimal digits

* Regex change in psoitive integer check

* Resolved issue with round off to decimal point

* Re-arranged imports

* Fixed the testcase

* Fixed floating_rate input check

* Removed Math.sign

* Reverted decimal change

* Implemented round of logic for decimal places

* refactor: Renamed variables

* fix: Round off issue in Create Ad summary

* fix: resolved decimal point to 2 digits

* Resolved lint errors

* fix: Renamed the function

* chore: Ad display table rate will be calculated from

* fix: test color in dark theme

* fix: label changes b/w fixed and floating

* fix: invoking api call to fetch the changes

* fix: rate synced b/w myads and buy/sell

* fix: range offset validation

* fix: modified rate property in edit ads

* fix: Float rate input suffix

* fix: code formatted

* fix: setting floating rate to 2 decimals on blur

* fix: spacing issue with floating rate input

* Trigger build

* Trigger build

* fix: removed unwanted padding

* fix: added ellipse to fix over lapping

* fix: removed disabling of floating rate field buttons

* fix: resolved issue with error message

* fix: Overlapping CSS issues in Mobile

* fix: added missing background color for dark theme

* fix: removed button highlight in mobile

* fix: button higlight issue

* fix: display of cursor pointer on scroll

* fix: resolved issue with message

* fix: Ad change warning message

* fix: color for dark mode

Co-authored-by: Likhith Kolayari <likhith@deriv.com>

packages/components/src/components/input-field/input-field.jsx

@@ -11,9 +11,11 @@ const InputField = ({
     ariaLabel,
     checked,
     className,
+    classNameDynamicSuffix,
     classNameInlinePrefix,
     classNameInput,
     classNamePrefix,
+    classNameWrapper,
     currency,
     current_focus,
     data_tip,
@@ -45,6 +47,7 @@ const InputField = ({
     min_value,
     name,
     format,
+    onBlur,
     onChange,
     onClick,
     onClickInputWrapper,
@@ -184,10 +187,13 @@ const InputField = ({
     };
 
     const updateValue = (new_value, is_long_press) => {
-        const formatted_value = format ? format(new_value) : new_value;
+        let formatted_value = format ? format(new_value) : new_value;
         if (is_long_press) {
             setLocalValue(formatted_value);
         } else {
+            if (is_signed && /^\d+/.test(formatted_value) && formatted_value > 0) {
+                formatted_value = `+${formatted_value}`;
+            }
             onChange({ target: { value: formatted_value, name } });
         }
     };
@@ -226,6 +232,7 @@ const InputField = ({
                 { 'input--error': has_error },
                 classNameInput
             )}
+            classNameDynamicSuffix={classNameDynamicSuffix}
             classNameInlinePrefix={classNameInlinePrefix}
             data_tip={data_tip}
             data_value={data_value}
@@ -241,6 +248,7 @@ const InputField = ({
             is_read_only={is_read_only}
             max_length={max_length}
             name={name}
+            onBlur={onBlur}
             onClick={onClick}
             onKeyPressed={onKeyPressed}
             placeholder={placeholder}
@@ -285,9 +293,13 @@ const InputField = ({
             )}
             {is_increment_input ? (
                 <div
-                    className={classNames('dc-input-wrapper', {
-                        'dc-input-wrapper--disabled': !!is_disabled,
-                    })}
+                    className={classNames(
+                        'dc-input-wrapper',
+                        {
+                            'dc-input-wrapper--disabled': !!is_disabled,
+                        },
+                        classNameWrapper
+                    )}
                 >
                     {increment_buttons}
                     {input}
@@ -324,7 +336,9 @@ InputField.propTypes = {
     className: PropTypes.string,
     classNameInlinePrefix: PropTypes.string,
     classNameInput: PropTypes.string,
+    classNameDynamicSuffix: PropTypes.string,
     classNamePrefix: PropTypes.string,
+    classNameWrapper: PropTypes.string, // CSS class for the component wrapper
     currency: PropTypes.string,
     current_focus: PropTypes.string,
     decimal_point_change: PropTypes.number, // Specify which decimal point must be updated when the increment/decrement button is pressed
@@ -349,6 +363,7 @@ InputField.propTypes = {
     label: PropTypes.string,
     max_length: PropTypes.number,
     name: PropTypes.string,
+    onBlur: PropTypes.func,
     onChange: PropTypes.func,
     onClick: PropTypes.func,
     onClickInputWrapper: PropTypes.func,

packages/components/src/components/input-field/input.jsx

@@ -9,6 +9,7 @@ const Input = ({
     checked,
     className,
     classNameInlinePrefix,
+    classNameDynamicSuffix,
     current_focus,
     data_value,
     data_tip,
@@ -24,6 +25,7 @@ const Input = ({
     is_read_only,
     max_length,
     name,
+    onBlur,
     onClick,
     onKeyPressed,
     placeholder,
@@ -38,7 +40,12 @@ const Input = ({
         }
     }, [current_focus, name]);
 
-    const onBlur = () => setCurrentFocus(null);
+    const onBlurHandler = e => {
+        setCurrentFocus(null);
+        if (onBlur) {
+            onBlur(e);
+        }
+    };
     const onFocus = () => setCurrentFocus(name);
 
     const onChange = e => {
@@ -59,7 +66,7 @@ const Input = ({
     };
 
     return (
-        <React.Fragment>
+        <div className={classNameDynamicSuffix}>
             {!!inline_prefix && (
                 <div className={classNameInlinePrefix}>
                     <span
@@ -83,7 +90,7 @@ const Input = ({
                 id={id}
                 maxLength={fractional_digits ? max_length + fractional_digits + 1 : max_length}
                 name={name}
-                onBlur={onBlur}
+                onBlur={onBlurHandler}
                 onChange={onChange}
                 onClick={onClick}
                 onFocus={onFocus}
@@ -96,8 +103,9 @@ const Input = ({
                 type={type === 'number' ? 'text' : type}
                 value={display_value || ''}
                 aria-label={ariaLabel}
+                data-lpignore={type !== 'password'}
             />
-        </React.Fragment>
+        </div>
     );
 };
 
@@ -107,6 +115,7 @@ Input.propTypes = {
     checked: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     className: PropTypes.string,
     classNameInlinePrefix: PropTypes.string,
+    classNameDynamicSuffix: PropTypes.string,
     current_focus: PropTypes.string,
     data_tip: PropTypes.string,
     data_value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -121,6 +130,7 @@ Input.propTypes = {
     is_read_only: PropTypes.bool,
     max_length: PropTypes.number,
     name: PropTypes.string,
+    onBlur: PropTypes.func,
     onClick: PropTypes.func,
     onKeyPressed: PropTypes.func,
     placeholder: PropTypes.string,

packages/p2p/src/components/app.jsx

@@ -11,7 +11,7 @@ import { setLanguage } from './i18next';
 import './app.scss';
 
 const App = props => {
-    const { general_store, order_store } = useStores();
+    const { floating_rate_store, general_store, order_store } = useStores();
     const { className, history, lang, order_id, server_time, websocket_api } = props;
 
     React.useEffect(() => {
@@ -43,6 +43,8 @@ const App = props => {
             }
         });
         general_store.setP2PConfig();
+        const { currency, local_currency_config } = general_store.client;
+        floating_rate_store.setExchangeRate(currency, local_currency_config.currency);
         return () => general_store.onUnmount();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);

packages/p2p/src/components/buy-sell/buy-sell-row.jsx

@@ -2,17 +2,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Table, Text, Button, Icon } from '@deriv/components';
-import { isMobile } from '@deriv/shared';
+import { formatMoney, isMobile } from '@deriv/shared';
 import { observer } from 'mobx-react-lite';
 import { buy_sell } from 'Constants/buy-sell';
 import { Localize, localize } from 'Components/i18next';
 import UserAvatar from 'Components/user/user-avatar';
+import { ad_type } from 'Constants/floating-rate';
 import { useStores } from 'Stores';
 import './buy-sell-row.scss';
 import TradeBadge from '../trade-badge';
 
 const BuySellRow = ({ row: advert }) => {
-    const { buy_sell_store, general_store } = useStores();
+    const { buy_sell_store, floating_rate_store, general_store } = useStores();
 
     if (advert.id === 'WATCH_THIS_SPACE') {
         // This allows for the sliding animation on the Buy/Sell toggle as it pushes
@@ -41,11 +42,15 @@ const BuySellRow = ({ row: advert }) => {
         min_order_amount_limit_display,
         payment_method_names,
         price_display,
+        rate_type,
+        rate,
     } = advert;
 
     const is_my_advert = advert.advertiser_details.id === general_store.advertiser_id;
     const is_buy_advert = counterparty_type === buy_sell.BUY;
     const { name: advertiser_name } = advert.advertiser_details;
+    const display_effective_rate =
+        rate_type === ad_type.FIXED ? price_display : parseFloat(floating_rate_store.exchange_rate * (1 + rate / 100));
 
     if (isMobile()) {
         return (
@@ -88,7 +93,7 @@ const BuySellRow = ({ row: advert }) => {
                             />
                         </Text>
                         <Text as='div' color='profit-success' line_height='m' size='s' weight='bold'>
-                            {price_display} {local_currency}
+                            {formatMoney(local_currency, display_effective_rate, true)} {local_currency}
                         </Text>
                         <Text as='div' color='less-prominent' line_height='m' size='xxs'>
                             <Localize
@@ -169,7 +174,7 @@ const BuySellRow = ({ row: advert }) => {
             </Table.Cell>
             <Table.Cell>
                 <Text color='profit-success' size='xs' line-height='m' weight='bold'>
-                    {price_display} {local_currency}
+                    {formatMoney(local_currency, display_effective_rate, true)} {local_currency}
                 </Text>
             </Table.Cell>
             <Table.Cell>

packages/p2p/src/components/floating-rate/__test__/floating-rate.spec.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import FloatingRate from '../floating-rate.jsx';
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: jest.fn().mockReturnValue({
+        general_store: {
+            current_focus: '',
+            client: { local_currency_config: { decimal_places: 2 } },
+            setCurrentFocus: jest.fn(),
+        },
+    }),
+}));
+
+describe('<FloatingRate/>', () => {
+    it('should render default state of the component with hint message and increment, decrement buttons', () => {
+        render(<FloatingRate />);
+
+        expect(screen.getByText('of the market rate')).toBeInTheDocument();
+        expect(screen.getAllByRole('button').length).toBe(2);
+    });
+
+    it('should display error messages when error is passed as props', () => {
+        render(<FloatingRate error_messages='Floating rate error' />);
+
+        expect(screen.getByText('Floating rate error')).toBeInTheDocument();
+    });
+
+    it('should render market rate feed based on the floating rate value passed', () => {
+        render(<FloatingRate value='+2' exchange_rate='100' />);
+
+        expect(screen.getByText('Your rate is = 102.00')).toBeInTheDocument();
+    });
+
+    it('should render the exchange rate in hint', () => {
+        render(<FloatingRate exchange_rate='20' fiat_currency='AED' local_currency='INR' />);
+
+        expect(screen.getByText('1 AED = 20.00 INR')).toBeInTheDocument();
+    });
+});