likhith/incorporated market rate calculation with 6 decimals

packages/p2p/src/components/advertiser-page/advertiser-page-row.jsx

@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Button, Table, Text } from '@deriv/components';
-import { formatMoney, isMobile } from '@deriv/shared';
+import { isMobile } from '@deriv/shared';
 import { observer } from 'mobx-react-lite';
 import { useStores } from 'Stores';
 import { buy_sell } from 'Constants/buy-sell';
-import { ad_type } from 'Constants/floating-rate';
 import { localize, Localize } from 'Components/i18next';
+import { generateEffectiveRate } from 'Utils/format-value.js';
 import './advertiser-page.scss';
 
 const AdvertiserPageRow = ({ row: advert, showAdPopup }) => {
@@ -25,8 +25,13 @@ const AdvertiserPageRow = ({ row: advert, showAdPopup }) => {
     const is_buy_advert = advertiser_page_store.counterparty_type === buy_sell.BUY;
     const is_my_advert = advertiser_page_store.advertiser_details_id === general_store.advertiser_id;
 
-    const display_effective_rate =
-        rate_type === ad_type.FIXED ? price_display : parseFloat(floating_rate_store.exchange_rate * (1 + rate / 100));
+    const { display_effective_rate } = generateEffectiveRate({
+        price: price_display,
+        rate_type,
+        rate,
+        local_currency,
+        exchange_rate: floating_rate_store.exchange_rate,
+    });
 
     const showAdForm = () => {
         buy_sell_store.setSelectedAdState(advert);
@@ -48,7 +53,7 @@ const AdvertiserPageRow = ({ row: advert, showAdPopup }) => {
 
                     <div className='advertiser-page__adverts-price'>
                         <Text color='profit-success' size='s' weight='bold' line_height='m'>
-                            {formatMoney(local_currency, display_effective_rate, true)} {local_currency}
+                            {display_effective_rate} {local_currency}
                         </Text>
                     </div>
                     <div className='advertiser-page__cell-limit'>
@@ -95,7 +100,7 @@ const AdvertiserPageRow = ({ row: advert, showAdPopup }) => {
             <Table.Cell>{`${min_order_amount_limit_display}-${max_order_amount_limit_display} ${currency}`}</Table.Cell>
             <Table.Cell className='advertiser-page__adverts-price'>
                 <Text color='profit-success' line-height='m' size='xs' weight='bold'>
-                    {formatMoney(local_currency, display_effective_rate, true)} {local_currency}
+                    {display_effective_rate} {local_currency}
                 </Text>
             </Table.Cell>
             <Table.Cell>

packages/p2p/src/components/buy-sell/buy-sell-form-receive-amount.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Text } from '@deriv/components';
-import { getFormattedText } from '@deriv/shared';
+import { formatMoney } from '@deriv/shared';
 import { Localize } from 'Components/i18next';
+import { roundOffDecimal } from 'Utils/format-value.js';
 import { useStores } from 'Stores';
 
 const BuySellFormReceiveAmount = () => {
@@ -17,7 +18,12 @@ const BuySellFormReceiveAmount = () => {
                 )}
             </Text>
             <Text as='p' color='general' line_height='m' size='xs' weight='bold'>
-                {getFormattedText(buy_sell_store?.receive_amount, buy_sell_store?.advert?.local_currency)}
+                {formatMoney(
+                    buy_sell_store?.advert?.local_currency,
+                    roundOffDecimal(buy_sell_store?.receive_amount),
+                    true
+                )}{' '}
+                {buy_sell_store?.advert?.local_currency}
             </Text>
         </React.Fragment>
     );

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

@@ -1,8 +1,9 @@
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Formik, Field, Form } from 'formik';
 import { HintBox, Icon, Input, Text } from '@deriv/components';
-import { getRoundedNumber, getFormattedText, isDesktop, isMobile, useIsMounted } from '@deriv/shared';
+import { getRoundedNumber, isDesktop, isMobile, useIsMounted } from '@deriv/shared';
 import { reaction } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { localize, Localize } from 'Components/i18next';
@@ -11,7 +12,7 @@ import { useStores } from 'Stores';
 import BuySellFormReceiveAmount from './buy-sell-form-receive-amount.jsx';
 import PaymentMethodCard from '../my-profile/payment-methods/payment-method-card/payment-method-card.jsx';
 import { floatingPointValidator } from 'Utils/validations';
-import classNames from 'classnames';
+import { generateEffectiveRate, setDecimalPlaces, roundOffDecimal, removeTrailingZeros } from 'Utils/format-value.js';
 
 const BuySellForm = props => {
     const isMounted = useIsMounted();
@@ -44,8 +45,15 @@ const BuySellForm = props => {
         cursor: should_disable_field ? 'not-allowed' : 'pointer',
     };
 
-    const effective_rate =
-        rate_type === ad_type.FLOAT ? parseFloat(floating_rate_store.exchange_rate * (1 + rate / 100)) : price;
+    const { effective_rate, display_effective_rate } = generateEffectiveRate({
+        price,
+        rate_type,
+        rate,
+        local_currency,
+        exchange_rate: floating_rate_store.exchange_rate,
+    });
+
+    const calculated_rate = removeTrailingZeros(roundOffDecimal(effective_rate, setDecimalPlaces(effective_rate, 6)));
 
     React.useEffect(
         () => {
@@ -69,7 +77,7 @@ const BuySellForm = props => {
 
             advertiser_page_store.setFormErrorMessage('');
             buy_sell_store.setShowRateChangePopup(rate_type === ad_type.FLOAT);
-            buy_sell_store.setInitialReceiveAmount(getRoundedNumber(effective_rate, buy_sell_store.account_currency));
+            buy_sell_store.setInitialReceiveAmount(calculated_rate);
 
             return () => {
                 buy_sell_store.payment_method_ids = [];
@@ -155,7 +163,7 @@ const BuySellForm = props => {
                                             />
                                         </Text>
                                         <Text as='p' color='general' line_height='m' size='xs'>
-                                            {getFormattedText(effective_rate, local_currency)}
+                                            {display_effective_rate} {local_currency}
                                         </Text>
                                     </div>
                                 </div>
@@ -352,17 +360,10 @@ const BuySellForm = props => {
                                                                 event.target.value,
                                                                 buy_sell_store.account_currency
                                                             );
+                                                            setFieldValue('amount', input_amount);
 
-                                                            setFieldValue('amount', getRoundedNumber(input_amount));
                                                             buy_sell_store.setReceiveAmount(
-                                                                getRoundedNumber(
-                                                                    input_amount *
-                                                                        getRoundedNumber(
-                                                                            effective_rate,
-                                                                            buy_sell_store.account_currency
-                                                                        ),
-                                                                    buy_sell_store.account_currency
-                                                                )
+                                                                input_amount * calculated_rate
                                                             );
                                                         }
                                                     }}

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

@@ -2,13 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Table, Text, Button, Icon } from '@deriv/components';
-import { formatMoney, isMobile } from '@deriv/shared';
+import { 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 { generateEffectiveRate } from 'Utils/format-value.js';
 import './buy-sell-row.scss';
 import TradeBadge from '../trade-badge';
 
@@ -49,8 +49,13 @@ const BuySellRow = ({ row: 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));
+    const { display_effective_rate } = generateEffectiveRate({
+        price: price_display,
+        rate_type,
+        rate,
+        local_currency,
+        exchange_rate: floating_rate_store.exchange_rate,
+    });
 
     if (isMobile()) {
         return (
@@ -97,7 +102,7 @@ const BuySellRow = ({ row: advert }) => {
                             />
                         </Text>
                         <Text as='div' color='profit-success' line_height='m' size='s' weight='bold'>
-                            {formatMoney(local_currency, display_effective_rate, true)} {local_currency}
+                            {display_effective_rate} {local_currency}
                         </Text>
                         <Text as='div' color='less-prominent' line_height='m' size='xxs'>
                             <Localize
@@ -182,7 +187,7 @@ const BuySellRow = ({ row: advert }) => {
             </Table.Cell>
             <Table.Cell>
                 <Text color='profit-success' size='xs' line-height='m' weight='bold'>
-                    {formatMoney(local_currency, display_effective_rate, true)} {local_currency}
+                    {display_effective_rate} {local_currency}
                 </Text>
             </Table.Cell>
             <Table.Cell>

packages/p2p/src/components/floating-rate/floating-rate.jsx

@@ -6,6 +6,7 @@ import { InputField, Text } from '@deriv/components';
 import { formatMoney, isMobile, mobileOSDetect } from '@deriv/shared';
 import { localize } from 'Components/i18next';
 import { useStores } from 'Stores';
+import { setDecimalPlaces, removeTrailingZeros } from 'Utils/format-value.js';
 import './floating-rate.scss';
 
 const FloatingRate = ({
@@ -92,7 +93,8 @@ const FloatingRate = ({
                         line_height='xs'
                         className='floating-rate__mkt-rate--msg'
                     >
-                        1 {fiat_currency} = {formatMoney(local_currency, floating_rate_store.exchange_rate, true)}{' '}
+                        1 {fiat_currency} ={' '}
+                        {removeTrailingZeros(formatMoney(local_currency, floating_rate_store.exchange_rate, true, 6))}{' '}
                         {local_currency}
                     </Text>
                 </div>
@@ -117,7 +119,11 @@ const FloatingRate = ({
                     line_height='xs'
                     className='floating-rate__hint'
                 >
-                    {localize('Your rate is')} = {formatMoney(local_currency, market_feed, true)} {local_currency}
+                    {localize('Your rate is')} ={' '}
+                    {removeTrailingZeros(
+                        formatMoney(local_currency, market_feed, true, setDecimalPlaces(market_feed, 6))
+                    )}{' '}
+                    {local_currency}
                 </Text>
             )}
         </div>

packages/p2p/src/components/my-ads/buy-ad-payment-methods-list.jsx

@@ -7,7 +7,7 @@ import { localize } from 'Components/i18next';
 import PropTypes from 'prop-types';
 import './buy-ad-payment-methods-list.scss';
 
-const BuyAdPaymentMethodsList = ({ selected_methods, setSelectedMethods }) => {
+const BuyAdPaymentMethodsList = ({ selected_methods, setSelectedMethods, touched }) => {
     const { my_ads_store, my_profile_store } = useStores();
     const [selected_edit_method, setSelectedEditMethod] = React.useState();
     const [payment_methods_list, setPaymentMethodsList] = React.useState([]);
@@ -33,6 +33,7 @@ const BuyAdPaymentMethodsList = ({ selected_methods, setSelectedMethods }) => {
                     text: my_profile_store.getPaymentMethodDisplayName(value),
                 },
             ]);
+            touched(true);
         }
     };
 
@@ -46,6 +47,7 @@ const BuyAdPaymentMethodsList = ({ selected_methods, setSelectedMethods }) => {
                 ...payment_methods_list.filter(payment_method => payment_method.value !== value),
                 selected_edit_method,
             ]);
+            touched(true);
         }
     };
 
@@ -56,6 +58,7 @@ const BuyAdPaymentMethodsList = ({ selected_methods, setSelectedMethods }) => {
                 setSelectedMethods([...selected_methods, value]);
                 setPaymentMethodsList(payment_methods_list.filter(payment_method => payment_method.value !== value));
             }
+            touched(true);
         }
     };
 

packages/p2p/src/components/my-ads/create-ad-summary.jsx

@@ -5,8 +5,9 @@ import { observer } from 'mobx-react-lite';
 import { Text } from '@deriv/components';
 import { buy_sell } from 'Constants/buy-sell';
 import { Localize } from 'Components/i18next';
-import { useStores } from 'Stores';
 import { ad_type } from 'Constants/floating-rate';
+import { useStores } from 'Stores';
+import { removeTrailingZeros, roundOffDecimal } from 'Utils/format-value.js';
 
 const CreateAdSummary = ({ offer_amount, price_rate, type }) => {
     const { floating_rate_store, general_store } = useStores();
@@ -17,20 +18,16 @@ const CreateAdSummary = ({ offer_amount, price_rate, type }) => {
     let display_price_rate = '';
     let display_total = '';
 
-    if (market_feed && price_rate) {
-        display_price_rate = parseFloat(market_feed * (1 + price_rate / 100));
-    } else if (price_rate) {
-        display_price_rate = price_rate;
+    if (price_rate) {
+        display_price_rate = market_feed
+            ? roundOffDecimal(parseFloat(market_feed * (1 + price_rate / 100)), 6)
+            : price_rate;
     }
 
-    if (market_feed && offer_amount && price_rate) {
-        display_total = formatMoney(
-            local_currency_config.currency,
-            offer_amount * parseFloat(market_feed * (1 + price_rate / 100)),
-            true
-        );
-    } else if (offer_amount && price_rate) {
-        display_total = formatMoney(local_currency_config.currency, offer_amount * price_rate, true);
+    if (offer_amount && price_rate) {
+        display_total = market_feed
+            ? formatMoney(local_currency_config.currency, offer_amount * display_price_rate, true)
+            : formatMoney(local_currency_config.currency, offer_amount * price_rate, true);
     }
 
     if (offer_amount) {
@@ -43,7 +40,9 @@ const CreateAdSummary = ({ offer_amount, price_rate, type }) => {
             Object.assign(values, {
                 local_amount: display_total,
                 local_currency: local_currency_config.currency,
-                price_rate: formatMoney(local_currency_config.currency, display_price_rate, true),
+                price_rate: removeTrailingZeros(
+                    formatMoney(local_currency_config.currency, display_price_rate, true, 6)
+                ),
             });
 
             if (type === buy_sell.BUY) {

packages/p2p/src/components/my-ads/edit-ad-form-payment-methods.jsx

@@ -71,7 +71,13 @@ const EditAdFormPaymentMethods = ({ is_sell_advert, selected_methods, setSelecte
         );
     }
 
-    return <BuyAdPaymentMethodsList selected_methods={selected_methods} setSelectedMethods={setSelectedMethods} />;
+    return (
+        <BuyAdPaymentMethodsList
+            selected_methods={selected_methods}
+            setSelectedMethods={setSelectedMethods}
+            touched={touched}
+        />
+    );
 };
 
 export default observer(EditAdFormPaymentMethods);

packages/p2p/src/components/my-ads/edit-ad-form.jsx

@@ -50,7 +50,7 @@ const EditAdForm = () => {
     const [is_cancel_edit_modal_open, setIsCancelEditModalOpen] = React.useState(false);
     const [is_payment_method_touched, setIsPaymentMethodTouched] = React.useState(false);
 
-    const set_initial_ad_rate = () => {
+    const setInitialAdRate = () => {
         if (my_ads_store.required_ad_type !== my_ads_store.selected_ad_type) {
             if (my_ads_store.required_ad_type === ad_type.FLOAT) {
                 return is_buy_advert ? '-0.01' : '+0.01';
@@ -110,6 +110,12 @@ const EditAdForm = () => {
                 my_ads_store.payment_method_ids.push(pm[0]);
             });
         }
+        if (my_ads_store.required_ad_type !== rate_type) {
+            const is_payment_method_available =
+                !!Object.keys({ ...payment_method_details }).length ||
+                !!Object.values({ ...payment_method_names }).length;
+            setIsPaymentMethodTouched(is_payment_method_available);
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -130,7 +136,7 @@ const EditAdForm = () => {
                             max_transaction: max_order_amount_display,
                             min_transaction: min_order_amount_display,
                             offer_amount: amount_display,
-                            rate_type: set_initial_ad_rate(),
+                            rate_type: setInitialAdRate(),
                             type,
                             is_active:
                                 rate_type !== floating_rate_store.rate_type && floating_rate_store.reached_target_date