feat(SFOX): add empty order state

blockchain · May 30, 2018 · b49cc80 · b49cc80
1 parent 5575b53
commit b49cc80
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 18 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/index.js
@@ -18,10 +18,11 @@ class SfoxCheckout extends React.PureComponent {
   }
 
   render () {
-    const { data, modalActions, sfoxActions, sfoxDataActions, payment, orderState } = this.props
+    const { data, modalActions, sfoxActions, sfoxDataActions, payment, orderState, formActions } = this.props
     const { handleTrade, fetchQuote, refreshQuote, refreshSellQuote, fetchSellQuote } = sfoxDataActions
     const { sfoxNotAsked } = sfoxActions
     const { showModal } = modalActions
+    const { change } = formActions
 
     const busy = orderState.cata({
       Success: () => false,
@@ -44,6 +45,7 @@ class SfoxCheckout extends React.PureComponent {
         busy={busy}
         payment={payment}
         clearTradeError={() => sfoxNotAsked()}
+        changeTab={tab => change('buySellTabStatus', 'status', tab)}
       />,
       Failure: (error) => <div>Failure: {error && error.message}</div>,
       Loading: () => <Loading />,
@@ -67,7 +69,8 @@ const mapDispatchToProps = dispatch => ({
   modalActions: bindActionCreators(actions.modals, dispatch),
   sfoxActions: bindActionCreators(actions.modules.sfox, dispatch),
   sfoxDataActions: bindActionCreators(actions.core.data.sfox, dispatch),
-  sendBtcActions: bindActionCreators(actions.components.sendBtc, dispatch)
+  sendBtcActions: bindActionCreators(actions.components.sendBtc, dispatch),
+  formActions: bindActionCreators(actions.form, dispatch)
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(SfoxCheckout)
diff --git a/...blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/template.success.js b/...blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/template.success.js
@@ -11,6 +11,7 @@ import Stepper, { StepView } from 'components/Utilities/Stepper'
 import OrderCheckout from './OrderCheckout'
 import { OrderDetails, OrderSubmit } from './OrderReview'
 import Helper from 'components/BuySell/FAQ'
+import EmptyOrderHistoryContainer from 'components/BuySell/EmptyOrderHistory'
 
 const CheckoutWrapper = styled.div`
   width: 50%;
@@ -70,6 +71,7 @@ const Success = props => {
     showModal,
     handleTradeDetailsClick,
     clearTradeError,
+    changeTab,
     ...rest } = props
 
   const accounts = Remote.of(props.value.accounts).getOrElse([])
@@ -180,22 +182,27 @@ const Success = props => {
       buy: 1e8,
       sell: 1e8
     }
-    return (
-      <OrderHistoryWrapper>
-        <OrderHistoryContent>
-          <Text size='15px' weight={400}>
-            <FormattedMessage id='scenes.buysell.sfoxcheckout.trades.pending' defaultMessage='Pending Orders' />
-          </Text>
-          <OrderHistoryTable trades={filter(isPending, trades)} conversion={conversion} handleDetailsClick={trade => showModal('SfoxTradeDetails', { trade })} />
-        </OrderHistoryContent>
-        <OrderHistoryContent>
-          <Text size='15px' weight={400}>
-            <FormattedMessage id='scenes.buysell.sfoxcheckout.trades.completed' defaultMessage='Completed Orders' />
-          </Text>
-          <OrderHistoryTable trades={filter(isCompleted, trades)} conversion={conversion} handleDetailsClick={trade => showModal('SfoxTradeDetails', { trade })} />
-        </OrderHistoryContent>
-      </OrderHistoryWrapper>
-    )
+
+    if (!trades.length) {
+      return <EmptyOrderHistoryContainer changeTab={changeTab} />
+    } else {
+      return (
+        <OrderHistoryWrapper>
+          <OrderHistoryContent>
+            <Text size='15px' weight={400}>
+              <FormattedMessage id='scenes.buysell.sfoxcheckout.trades.pending' defaultMessage='Pending Orders' />
+            </Text>
+            <OrderHistoryTable trades={filter(isPending, trades)} conversion={conversion} handleDetailsClick={trade => showModal('SfoxTradeDetails', { trade })} />
+          </OrderHistoryContent>
+          <OrderHistoryContent>
+            <Text size='15px' weight={400}>
+              <FormattedMessage id='scenes.buysell.sfoxcheckout.trades.completed' defaultMessage='Completed Orders' />
+            </Text>
+            <OrderHistoryTable trades={filter(isCompleted, trades)} conversion={conversion} handleDetailsClick={trade => showModal('SfoxTradeDetails', { trade })} />
+          </OrderHistoryContent>
+        </OrderHistoryWrapper>
+      )
+    }
   } else {
     return null
   }