diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page-row.jsx b/packages/p2p/src/components/advertiser-page/advertiser-page-row.jsx index f7d3906eb680..8956765dcd31 100644 --- a/packages/p2p/src/components/advertiser-page/advertiser-page-row.jsx +++ b/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 }) => {
- {formatMoney(local_currency, display_effective_rate, true)} {local_currency} + {display_effective_rate} {local_currency}
@@ -95,7 +100,7 @@ const AdvertiserPageRow = ({ row: advert, showAdPopup }) => { {`${min_order_amount_limit_display}-${max_order_amount_limit_display} ${currency}`} - {formatMoney(local_currency, display_effective_rate, true)} {local_currency} + {display_effective_rate} {local_currency} diff --git a/packages/p2p/src/components/buy-sell/buy-sell-form-receive-amount.jsx b/packages/p2p/src/components/buy-sell/buy-sell-form-receive-amount.jsx index be849241713d..b3616ce69a0b 100644 --- a/packages/p2p/src/components/buy-sell/buy-sell-form-receive-amount.jsx +++ b/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 = () => { )} - {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} ); diff --git a/packages/p2p/src/components/buy-sell/buy-sell-form.jsx b/packages/p2p/src/components/buy-sell/buy-sell-form.jsx index daf7f55b1e11..9c4c91ddd359 100644 --- a/packages/p2p/src/components/buy-sell/buy-sell-form.jsx +++ b/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 => { /> - {getFormattedText(effective_rate, local_currency)} + {display_effective_rate} {local_currency}
@@ -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 ); } }} diff --git a/packages/p2p/src/components/buy-sell/buy-sell-row.jsx b/packages/p2p/src/components/buy-sell/buy-sell-row.jsx index b288a590e77a..4991d5b085b6 100644 --- a/packages/p2p/src/components/buy-sell/buy-sell-row.jsx +++ b/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 }) => { /> - {formatMoney(local_currency, display_effective_rate, true)} {local_currency} + {display_effective_rate} {local_currency} { - {formatMoney(local_currency, display_effective_rate, true)} {local_currency} + {display_effective_rate} {local_currency} diff --git a/packages/p2p/src/components/floating-rate/floating-rate.jsx b/packages/p2p/src/components/floating-rate/floating-rate.jsx index 84be60c377de..34374ae19654 100644 --- a/packages/p2p/src/components/floating-rate/floating-rate.jsx +++ b/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} @@ -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} )} diff --git a/packages/p2p/src/components/my-ads/buy-ad-payment-methods-list.jsx b/packages/p2p/src/components/my-ads/buy-ad-payment-methods-list.jsx index 6ed1609a86ed..576aa5b73d91 100644 --- a/packages/p2p/src/components/my-ads/buy-ad-payment-methods-list.jsx +++ b/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); } }; diff --git a/packages/p2p/src/components/my-ads/create-ad-summary.jsx b/packages/p2p/src/components/my-ads/create-ad-summary.jsx index a891c1437e44..e0329f3f88de 100644 --- a/packages/p2p/src/components/my-ads/create-ad-summary.jsx +++ b/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) { diff --git a/packages/p2p/src/components/my-ads/edit-ad-form-payment-methods.jsx b/packages/p2p/src/components/my-ads/edit-ad-form-payment-methods.jsx index 0ef1e9518362..7812f4222474 100644 --- a/packages/p2p/src/components/my-ads/edit-ad-form-payment-methods.jsx +++ b/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 ; + return ( + + ); }; export default observer(EditAdFormPaymentMethods); diff --git a/packages/p2p/src/components/my-ads/edit-ad-form.jsx b/packages/p2p/src/components/my-ads/edit-ad-form.jsx index ecc97eba17aa..862d1b70fc48 100644 --- a/packages/p2p/src/components/my-ads/edit-ad-form.jsx +++ b/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 diff --git a/packages/p2p/src/components/my-ads/edit-ad-summary.jsx b/packages/p2p/src/components/my-ads/edit-ad-summary.jsx index 3d2e92c2f3ea..c86dae643c72 100644 --- a/packages/p2p/src/components/my-ads/edit-ad-summary.jsx +++ b/packages/p2p/src/components/my-ads/edit-ad-summary.jsx @@ -5,31 +5,28 @@ 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 EditAdSummary = ({ offer_amount, price_rate, type }) => { - const { floating_rate_store, general_store } = useStores(); + const { floating_rate_store, general_store, my_ads_store } = useStores(); const { currency, local_currency_config } = general_store.client; const display_offer_amount = offer_amount ? formatMoney(currency, offer_amount, true) : ''; - const market_feed = floating_rate_store.rate_type === ad_type.FLOAT ? floating_rate_store.exchange_rate : null; + const market_feed = my_ads_store.required_ad_type === ad_type.FLOAT ? floating_rate_store.exchange_rate : null; let display_price_rate = ''; let display_total = ''; if (price_rate) { display_price_rate = market_feed - ? formatMoney(local_currency_config.currency, parseFloat(market_feed * (1 + price_rate / 100)), true) - : formatMoney(local_currency_config.currency, price_rate, true); + ? roundOffDecimal(parseFloat(market_feed * (1 + price_rate / 100)), 6) + : price_rate; } if (offer_amount && price_rate) { display_total = market_feed - ? formatMoney( - local_currency_config.currency, - offer_amount * parseFloat(market_feed * (1 + price_rate / 100)), - true - ) + ? formatMoney(local_currency_config.currency, offer_amount * display_price_rate, true) : formatMoney(local_currency_config.currency, offer_amount * price_rate, true); } @@ -44,7 +41,9 @@ const EditAdSummary = ({ offer_amount, price_rate, type }) => { Object.assign(values, { local_amount: display_total, local_currency: local_currency_config.currency, - price_rate: display_price_rate, + price_rate: removeTrailingZeros( + formatMoney(local_currency_config.currency, display_price_rate, true, 6) + ), }); if (type === buy_sell.BUY) { diff --git a/packages/p2p/src/components/my-ads/my-ads-row-renderer.jsx b/packages/p2p/src/components/my-ads/my-ads-row-renderer.jsx index 53dfa0d79388..3eb64b1dac12 100644 --- a/packages/p2p/src/components/my-ads/my-ads-row-renderer.jsx +++ b/packages/p2p/src/components/my-ads/my-ads-row-renderer.jsx @@ -9,6 +9,7 @@ import { buy_sell } from 'Constants/buy-sell'; import { ad_type } from 'Constants/floating-rate'; import AdStatus from 'Components/my-ads/ad-status.jsx'; import { useStores } from 'Stores'; +import { generateEffectiveRate } from 'Utils/format-value.js'; import AdType from './ad-type.jsx'; const MyAdsRowRenderer = observer(({ row: advert, setAdvert }) => { @@ -35,14 +36,17 @@ const MyAdsRowRenderer = observer(({ row: advert, setAdvert }) => { // Use separate is_advert_active state to ensure value is updated const [is_advert_active, setIsAdvertActive] = React.useState(is_active); const [is_popover_actions_visible, setIsPopoverActionsVisible] = React.useState(false); - const amount_dealt = amount - remaining_amount; const enable_action_point = floating_rate_store.change_ad_alert && floating_rate_store.rate_type !== rate_type; const is_buy_advert = type === buy_sell.BUY; - const display_effective_rate = - rate_type === ad_type.FIXED - ? price_display - : parseFloat(floating_rate_store.exchange_rate * (1 + rate_display / 100)); + + const { display_effective_rate } = generateEffectiveRate({ + price: price_display, + rate_type, + rate: rate_display, + local_currency, + exchange_rate: floating_rate_store.exchange_rate, + }); const is_activate_ad_disabled = floating_rate_store.reached_target_date && enable_action_point; @@ -155,7 +159,7 @@ const MyAdsRowRenderer = observer(({ row: advert, setAdvert }) => {
- {formatMoney(local_currency, display_effective_rate, true)} {local_currency} + {display_effective_rate} {local_currency} {rate_type === ad_type.FLOAT && }
@@ -210,7 +214,7 @@ const MyAdsRowRenderer = observer(({ row: advert, setAdvert }) => {
- {formatMoney(local_currency, display_effective_rate, true)} {local_currency} + {display_effective_rate} {local_currency} {rate_type === ad_type.FLOAT && }
diff --git a/packages/p2p/src/components/order-details/order-details-confirm-modal.jsx b/packages/p2p/src/components/order-details/order-details-confirm-modal.jsx index a2c15988a89c..4839e923d34b 100644 --- a/packages/p2p/src/components/order-details/order-details-confirm-modal.jsx +++ b/packages/p2p/src/components/order-details/order-details-confirm-modal.jsx @@ -1,11 +1,12 @@ import PropTypes from 'prop-types'; import React from 'react'; import { Button, Checkbox, Loading, Modal, Text } from '@deriv/components'; -import { getRoundedNumber, useIsMounted } from '@deriv/shared'; +import { useIsMounted } from '@deriv/shared'; import { Localize } from 'Components/i18next'; -import { requestWS } from 'Utils/websocket'; import FormError from 'Components/form/error.jsx'; import 'Components/order-details/order-details-confirm-modal.scss'; +import { requestWS } from 'Utils/websocket'; +import { setDecimalPlaces, roundOffDecimal } from 'Utils/format-value.js'; const OrderDetailsConfirmModal = ({ order_information, @@ -45,6 +46,8 @@ const OrderDetailsConfirmModal = ({ .finally(() => setIsProcessRequest(false)); }; + const rounded_rate = roundOffDecimal(rate, setDecimalPlaces(rate, 6)); + const getConfirmButtonText = () => { if (is_buy_order_for_user) { return ; @@ -85,7 +88,7 @@ const OrderDetailsConfirmModal = ({ diff --git a/packages/p2p/src/components/order-details/order-details.jsx b/packages/p2p/src/components/order-details/order-details.jsx index 24cbac2c8b19..37ffedca8050 100644 --- a/packages/p2p/src/components/order-details/order-details.jsx +++ b/packages/p2p/src/components/order-details/order-details.jsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; import { Button, HintBox, Text, ThemedScrollbars } from '@deriv/components'; -import { getFormattedText, isDesktop, getRoundedNumber } from '@deriv/shared'; +import { formatMoney, isDesktop } from '@deriv/shared'; import { observer } from 'mobx-react-lite'; import { Localize, localize } from 'Components/i18next'; import Chat from 'Components/orders/chat/chat.jsx'; @@ -15,6 +15,7 @@ import { useStores } from 'Stores'; import PaymentMethodAccordionHeader from './payment-method-accordion-header.jsx'; import PaymentMethodAccordionContent from './payment-method-accordion-content.jsx'; import MyProfileSeparatorContainer from '../my-profile/my-profile-separator-container'; +import { setDecimalPlaces, removeTrailingZeros, roundOffDecimal } from 'Utils/format-value.js'; import 'Components/order-details/order-details.scss'; const OrderDetails = observer(({ onPageReturn }) => { @@ -72,10 +73,15 @@ const OrderDetails = observer(({ onPageReturn }) => { (is_buy_order && !is_my_ad) || (is_sell_order && is_my_ad) ? localize('Buy {{offered_currency}} order', { offered_currency: account_currency }) : localize('Sell {{offered_currency}} order', { offered_currency: account_currency }); + if (sendbird_store.should_show_chat_on_orders) { return ; } + const display_payment_amount = removeTrailingZeros( + formatMoney(local_currency, amount_display * roundOffDecimal(rate, setDecimalPlaces(rate, 6)), true) + ); + return ( {should_show_lost_funds_banner && ( @@ -113,7 +119,7 @@ const OrderDetails = observer(({ onPageReturn }) => { )} {!has_timer_expired && (is_pending_order || is_buyer_confirmed_order) && (
- {getFormattedText(amount_display * getRoundedNumber(rate), local_currency)} + {display_payment_amount} {local_currency}
)}
@@ -143,11 +149,11 @@ const OrderDetails = observer(({ onPageReturn }) => {
diff --git a/packages/p2p/src/stores/buy-sell-store.js b/packages/p2p/src/stores/buy-sell-store.js index e60af1fd754e..5b5166ccc0c1 100644 --- a/packages/p2p/src/stores/buy-sell-store.js +++ b/packages/p2p/src/stores/buy-sell-store.js @@ -1,10 +1,11 @@ import { action, computed, observable, reaction } from 'mobx'; -import { formatMoney, getDecimalPlaces, getRoundedNumber, isMobile } from '@deriv/shared'; +import { formatMoney, getDecimalPlaces, isMobile } from '@deriv/shared'; import { localize } from 'Components/i18next'; import { buy_sell } from 'Constants/buy-sell'; import { requestWS } from 'Utils/websocket'; import { textValidator, lengthValidator } from 'Utils/validations'; import { countDecimalPlaces } from 'Utils/string'; +import { removeTrailingZeros } from 'Utils/format-value.js'; import BaseStore from 'Stores/base_store'; export default class BuySellStore extends BaseStore { @@ -408,10 +409,7 @@ export default class BuySellStore extends BaseStore { @action.bound setInitialReceiveAmount(initial_price) { - this.receive_amount = getRoundedNumber( - this.advert.min_order_amount_limit * initial_price, - this.advert.local_currency - ); + this.receive_amount = removeTrailingZeros(this.advert.min_order_amount_limit * initial_price); } @action.bound diff --git a/packages/p2p/src/stores/floating-rate-store.js b/packages/p2p/src/stores/floating-rate-store.js index c6dd1a7f07ce..3bff6fe38b51 100644 --- a/packages/p2p/src/stores/floating-rate-store.js +++ b/packages/p2p/src/stores/floating-rate-store.js @@ -2,6 +2,7 @@ import { action, computed, observable } from 'mobx'; import { ad_type } from 'Constants/floating-rate'; import BaseStore from 'Stores/base_store'; import ServerTime from 'Utils/server-time'; +import { roundOffDecimal, removeTrailingZeros } from 'Utils/format-value'; export default class FloatingRateStore extends BaseStore { @observable fixed_rate_adverts_status; @@ -66,7 +67,8 @@ export default class FloatingRateStore extends BaseStore { @action.bound setExchangeRate(rate) { - this.exchange_rate = parseFloat(rate); + const fetched_rate = parseFloat(rate); + this.exchange_rate = removeTrailingZeros(roundOffDecimal(fetched_rate, 6)); if (this.previous_exchange_rate === null) { this.previous_exchange_rate = this.exchange_rate; this.current_exchange_rate = this.exchange_rate; diff --git a/packages/p2p/src/utils/format-value.js b/packages/p2p/src/utils/format-value.js index 282d9332b2d2..5d0bc2d78970 100644 --- a/packages/p2p/src/utils/format-value.js +++ b/packages/p2p/src/utils/format-value.js @@ -1,5 +1,11 @@ +import { ad_type } from 'Constants/floating-rate'; +import { formatMoney } from '@deriv/shared'; + export const roundOffDecimal = (number, decimal_place = 2) => { // Rounds of the digit to the specified decimal place + if (number === null || number === undefined) { + return 0; + } return parseFloat(Math.round(number * Math.pow(10, decimal_place)) / Math.pow(10, decimal_place)); }; @@ -12,13 +18,35 @@ export const setDecimalPlaces = (value, expected_decimal_place) => { return actual_decimal_place > expected_decimal_place ? expected_decimal_place : actual_decimal_place; }; +export const generateEffectiveRate = ({ + price = 0, + rate = 0, + local_currency = {}, + exchange_rate = 0, + rate_type = ad_type.FIXED, +} = {}) => { + let effective_rate = 0; + let display_effective_rate = 0; + if (rate_type === ad_type.FIXED) { + effective_rate = price; + display_effective_rate = formatMoney(local_currency, effective_rate, true); + } else { + effective_rate = parseFloat(exchange_rate * (1 + rate / 100)); + display_effective_rate = removeTrailingZeros( + formatMoney(local_currency, effective_rate, true, setDecimalPlaces(effective_rate, 6)) + ); + } + return { effective_rate, display_effective_rate }; +}; + export const removeTrailingZeros = value => { + // Returns the string after truncating extra zeros if (!value) { return ''; } const [input, unit] = value.toString().trim().split(' '); if (input.indexOf('.') === -1) { - return input; + return formatInput(input, unit); } let trim_from = input.length - 1; do { @@ -29,8 +57,17 @@ export const removeTrailingZeros = value => { if (input[trim_from] === '.') { trim_from--; } - const result = value.substr(0, trim_from + 1); - return parseFloat(result) % 1 !== 0 - ? `${result}.00 ${unit ? unit.trim() : ''}` - : `${result} ${unit ? unit.trim() : ''}`; + const result = value.toString().substr(0, trim_from + 1); + return formatInput(result, unit); +}; + +const formatInput = (input, unit) => { + const plain_input = input.replace(/,/g, ''); + if (parseFloat(plain_input) % 1 === 0) { + return `${input}.00 ${unit ? unit.trim() : ''}`; + } + if (plain_input.split('.')[1].length === 1) { + return `${input}0 ${unit ? unit.trim() : ''}`; + } + return `${input}${unit ? ` ${unit.trim()}` : ''}`; };