diff --git a/src/actions/index.js b/src/actions/index.js index 3b8c69a0c..c3fdfa1d7 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -7,6 +7,7 @@ import serialize from 'Utils/serialize'; import preparePairs from 'Utils/preparePairs'; import i18n from 'Src/i18n'; import generateDepth from '../utils/generateDepth'; +import isFiatOrder from '../utils/isFiatOrder'; export const errorAlert = payload => ({ type: types.ERROR_ALERT, @@ -407,7 +408,8 @@ export const fetchOrder = orderId => async dispatch => { return request .then(res => { const order = res.data; - dispatch(setOrder(order)); + const isFiat = isFiatOrder(order); + dispatch(setOrder({ ...order, isFiat })); }) .catch(error => { if (error.response && error.response.status === 429) { diff --git a/src/components/Home/Hero/ExchangeWidget/ExchangeWidget.js b/src/components/Home/Hero/ExchangeWidget/ExchangeWidget.js index 0016b1d65..623f70e5d 100644 --- a/src/components/Home/Hero/ExchangeWidget/ExchangeWidget.js +++ b/src/components/Home/Hero/ExchangeWidget/ExchangeWidget.js @@ -14,6 +14,7 @@ import CoinInput from './CoinInput/CoinInput'; import CoinSwitch from './CoinSwitch/CoinSwitch'; import styles from './ExchangeWidget.scss'; +import isFiatOrder from '../../../../utils/isFiatOrder'; class ExchangeWidget extends Component { constructor(props) { @@ -48,7 +49,10 @@ class ExchangeWidget extends Component { axios .post(`${config.API_BASE_URL}/orders/`, data) .then(response => { - this.props.setOrder(response.data); + const orderData = response.data; + const isFiat = isFiatOrder(orderData); + this.props.setOrder({ ...orderData, isFiat }); + this.setState({ orderRef: response.data.unique_reference, orderPlaced: true, @@ -73,6 +77,7 @@ class ExchangeWidget extends Component { amount_quote: parseFloat(this.props.price.receive), created_at: new Date(), }; + let orderHistory = localStorage['orderHistory']; if (!orderHistory) { orderHistory = [newOrder]; diff --git a/src/components/Order/Order.js b/src/components/Order/Order.js index 6d5ee95be..d7c93caca 100644 --- a/src/components/Order/Order.js +++ b/src/components/Order/Order.js @@ -5,22 +5,20 @@ import { Redirect } from 'react-router-dom'; import { bindActionCreators } from 'redux'; import { fetchOrder, fetchPrice, setOrder, fetchCoinDetails, resetWallet } from 'Actions'; -import isFiatOrder from 'Utils/isFiatOrder'; -import config from 'Config'; - import OrderMain from './OrderMain/OrderMain'; import OrderTop from './OrderTop/OrderTop'; import OrderLoading from './OrderLoading/OrderLoading'; import OrderCoinsProcessed from './OrderCoinsProcessed/OrderCoinsProcessed'; import OrderCta from './OrderCta/OrderCta'; +import withOrderDataProvider from './withOrderDataProvider'; import styles from './Order.scss'; class Order extends Component { constructor(props) { super(props); - + if (this.props.order && this.props.match.params.orderRef === this.props.order.unique_reference) { this.state = { order: this.props.order }; } else { @@ -28,32 +26,13 @@ class Order extends Component { } } - componentDidMount() { - this.props.fetchOrder(this.props.match.params.orderRef); - this.props.fetchCoinDetails(); - } - - componentDidUpdate(prevProps) { - if (this.props.location !== prevProps.location) { - clearTimeout(this.timeout); - clearInterval(this.interval); - this.props.fetchOrder(this.props.match.params.orderRef); - } - } - componentWillUnmount() { - clearInterval(this.interval); - clearTimeout(this.timeout); this.props.resetWallet(); } UNSAFE_componentWillReceiveProps(nextProps) { this.setState({ order: nextProps.order }); - - this.timeout = setTimeout(() => { - this.props.fetchOrder(this.props.match.params.orderRef); - }, config.ORDER_DETAILS_FETCH_INTERVAL); - + if (nextProps.order !== 429) { this.setState({ order: nextProps.order }); @@ -70,7 +49,7 @@ class Order extends Component { render() { return ( -
+
{(this.state.order == null && ) || @@ -94,4 +73,4 @@ class Order extends Component { const mapStateToProps = ({ order, price }) => ({ order, price }); const mapDispatchToProps = dispatch => bindActionCreators({ fetchOrder, fetchPrice, setOrder, fetchCoinDetails, resetWallet }, dispatch); -export default connect(mapStateToProps, mapDispatchToProps)(Order); +export default connect(mapStateToProps, mapDispatchToProps)(withOrderDataProvider(Order)); diff --git a/src/components/Order/OrderMain/OrderState/OrderInitial/OrderInitial.js b/src/components/Order/OrderMain/OrderState/OrderInitial/OrderInitial.js index 9f1929bcb..c30627f80 100644 --- a/src/components/Order/OrderMain/OrderState/OrderInitial/OrderInitial.js +++ b/src/components/Order/OrderMain/OrderState/OrderInitial/OrderInitial.js @@ -1,6 +1,5 @@ import React from 'react'; -import isFiatOrder from 'Utils/isFiatOrder'; import OrderInitialFiat from './OrderInitialFiat/OrderInitialFiat'; import OrderInitialCrypto from './OrderInitialCrypto/OrderInitialCrypto'; @@ -9,7 +8,7 @@ import useCountdown from 'Utils/useCountdown' const OrderInitial = (props) => { const { minutes, seconds } = useCountdown(() => props.order.payment_deadline); - if (isFiatOrder(props.order)) { + if (props.order.isFiat) { return ; } else { return ; diff --git a/src/components/Order/OrderMain/OrderState/OrderInitial/OrderInitialFiat/OrderInitialFiat.js b/src/components/Order/OrderMain/OrderState/OrderInitial/OrderInitialFiat/OrderInitialFiat.js index 1dbb42ac8..f8fdf8aa9 100644 --- a/src/components/Order/OrderMain/OrderState/OrderInitial/OrderInitialFiat/OrderInitialFiat.js +++ b/src/components/Order/OrderMain/OrderState/OrderInitial/OrderInitialFiat/OrderInitialFiat.js @@ -6,6 +6,7 @@ import { Helmet } from 'react-helmet'; import styled from '@emotion/styled'; import OrderPreReleased from '../../OrderPreReleased/OrderPreReleased'; import OrderFailed from '../../OrderFailure/OrderFailure'; +import { BotValidationContext } from '../../../../BotValidation/BotValidationProvider'; const PaymentNewTabText = styled.h4` text-align: center; @@ -27,6 +28,8 @@ const Spinner = styled.div` `; class OrderInitial extends Component { + static contextType = BotValidationContext; + constructor(props) { super(props); @@ -75,6 +78,8 @@ class OrderInitial extends Component { if (data === 'error') { document.querySelector('#safecharge_payment_iframe').src = this.props.order.payment_url; + const { verifyIfHuman } = this.context; + verifyIfHuman(); } if (data === 'canceledByUser') window.location.reload(); diff --git a/src/components/Order/withOrderDataProvider.js b/src/components/Order/withOrderDataProvider.js new file mode 100644 index 000000000..e27b40b9a --- /dev/null +++ b/src/components/Order/withOrderDataProvider.js @@ -0,0 +1,71 @@ +import React, { useContext, useEffect, useMemo } from 'react'; +import { useState } from 'react'; + +import OrderLoading from './OrderLoading/OrderLoading'; +import OrderFailed from './OrderMain/OrderState/OrderFailure/OrderFailure'; +import BotValidationProvider, { BotValidationContext } from './BotValidation/BotValidationProvider'; + +import styles from './Order.scss'; + +const OrderDataProvider = ({ children, isFiat, ...props }) => { + const botValidationContext = useContext(BotValidationContext); + const [isLoading, setIsLoading] = useState(false); + + useEffect(() => { + setIsLoading(true); + props.fetchCoinDetails(); + if (!isFiat && !props.order) { + props.fetchOrder(props.match.params.orderRef); + } + setIsLoading(false); + }, []); + + useEffect(() => { + // Fetching URL only after success bot validations + if (isFiat) { + setIsLoading(true); + props.fetchOrder(props.match.params.orderRef); + setIsLoading(false); + } + }, [botValidationContext.hookTriggerOnSuccess]); + + if (isLoading || !props.order) { + return ( +
+ +
+ ); + } + + if (isFiat && botValidationContext.isVerifiedHuman) { + return children; + } else if (!isFiat) { + return children; + } + + return ( +
+ +
+ ); +}; + +const withOrderDataProvider = OrderComponent => props => { + const isFiat = useMemo(() => props.order?.isFiat, [props.order?.isFiat]); + + const Order = () => ( + + + + ); + + return isFiat ? ( + + + + ) : ( + + ); +}; + +export default withOrderDataProvider; diff --git a/src/utils/isFiatOrder.js b/src/utils/isFiatOrder.js index 7beb3c766..6a1b1399a 100644 --- a/src/utils/isFiatOrder.js +++ b/src/utils/isFiatOrder.js @@ -1,3 +1 @@ -export default order => { - return order && order.pair && order.pair.quote && !order.pair.quote.is_crypto; -}; +export default isFiatOrder = order => Boolean(order && order.pair && order.pair.quote && !order.pair.quote.is_crypto);