Feature/bot validation fiat payment flow

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) {

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];

src/components/Order/Order.js

@@ -5,55 +5,34 @@ 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 {
       this.state = {};
     }
   }
 
-  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 (
-      <div className={`${styles.container} ${this.state.order && (isFiatOrder(this.state.order) ? 'order-fiat' : 'order-crypto')}`}>
+      <div className={`${styles.container} ${this.state.order && this.state.order.isFiat ? 'order-fiat' : 'order-crypto'}`}>
         <div className="container">
           <div className="row">
             {(this.state.order == null && <OrderLoading />) ||
@@ -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));

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 <OrderInitialFiat time={`${minutes}:${seconds}`} {...props} />;
   } else {
     return <OrderInitialCrypto time={`${minutes}:${seconds}`} {...props} />;

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();

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 (
+      <div className={`${styles.container} ${isFiat ? 'order-fiat' : 'order-crypto'}`}>
+        <OrderLoading />
+      </div>
+    );
+  }
+
+  if (isFiat && botValidationContext.isVerifiedHuman) {
+    return children;
+  } else if (!isFiat) {
+    return children;
+  }
+
+  return (
+    <div className={`${styles.container} ${isFiat ? 'order-fiat' : 'order-crypto'}`}>
+      <OrderFailed title="error.notfound1" />
+    </div>
+  );
+};
+
+const withOrderDataProvider = OrderComponent => props => {
+  const isFiat = useMemo(() => props.order?.isFiat, [props.order?.isFiat]);
+
+  const Order = () => (
+    <OrderDataProvider {...props} isFiat={isFiat}>
+      <OrderComponent {...props} />
+    </OrderDataProvider>
+  );
+
+  return isFiat ? (
+    <BotValidationProvider>
+      <Order />
+    </BotValidationProvider>
+  ) : (
+    <Order />
+  );
+};
+
+export default withOrderDataProvider;

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);