feat(simple buy): implement cancel order

blockchain · Mar 25, 2020 · b8d0f0e · b8d0f0e
1 parent f3a0484
commit b8d0f0e
Show file tree

Hide file tree

Showing 15 changed files with 224 additions and 8 deletions.
diff --git a/packages/blockchain-info-components/index.d.ts b/packages/blockchain-info-components/index.d.ts
@@ -78,6 +78,7 @@ export const Icon: StatelessComponent<{
   color?: keyof DefaultTheme
   style?: CSSProperties
   onClick?: () => void
+  role?: 'button'
 }>
 export const IconButton: StatelessComponent<
   {

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/actionTypes.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/actionTypes.ts
@@ -1,3 +1,4 @@
+export const CANCEL_ORDER = '@EVENT.CANCEL_SB_ORDER'
 export const CREATE_ORDER = '@EVENT.CREATE_SB_ORDER'
 
 export const DESTROY_CHECKOUT = '@EVENT.DESTROY_SB_CHECKOUT'

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/actions.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/actions.ts
@@ -12,6 +12,11 @@ import {
 } from 'core/types'
 import { SimpleBuyActionTypes } from './types'
 
+export const cancelSBOrder = (order: SBOrderType) => ({
+  type: AT.CANCEL_ORDER,
+  order
+})
+
 export const createSBOrder = () => ({
   type: AT.CREATE_ORDER
 })
@@ -191,7 +196,10 @@ export const initializeCheckout = (pairs: Array<SBPairType>) => ({
 export const setStep = (
   payload:
     | { step: 'CURRENCY_SELECTION' }
-    | { order: SBOrderType; step: 'TRANSFER_DETAILS' | 'ORDER_SUMMARY' }
+    | {
+        order: SBOrderType
+        step: 'TRANSFER_DETAILS' | 'ORDER_SUMMARY' | 'CANCEL_ORDER'
+      }
     | { fiatCurrency: FiatType; step: 'ENTER_AMOUNT' }
 ): SimpleBuyActionTypes => ({
   type: AT.SET_STEP,
@@ -201,7 +209,9 @@ export const setStep = (
           step: payload.step,
           fiatCurrency: payload.fiatCurrency
         }
-      : payload.step === 'TRANSFER_DETAILS' || payload.step === 'ORDER_SUMMARY'
+      : payload.step === 'TRANSFER_DETAILS' ||
+        payload.step === 'ORDER_SUMMARY' ||
+        payload.step === 'CANCEL_ORDER'
       ? { step: payload.step, order: payload.order }
       : {
           step: payload.step

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/reducers.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/reducers.ts
@@ -139,6 +139,7 @@ export function simpleBuyReducer (
           }
         case 'ORDER_SUMMARY':
         case 'TRANSFER_DETAILS':
+        case 'CANCEL_ORDER':
           return {
             ...state,
             order: action.payload.order,

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagaRegister.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagaRegister.ts
@@ -7,6 +7,7 @@ export default ({ api, coreSagas, networks }) => {
   const simpleBuySagas = sagas({ api, coreSagas, networks })
 
   return function * simpleBuySaga () {
+    yield takeLatest(AT.CANCEL_ORDER, simpleBuySagas.cancelSBOrder)
     yield takeLatest(AT.CREATE_ORDER, simpleBuySagas.createSBOrder)
     yield takeLatest(
       AT.FETCH_SB_FIAT_ELIGIBLE,

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagas.ts
@@ -2,7 +2,7 @@ import * as A from './actions'
 import * as S from './selectors'
 import { actions, selectors } from 'data'
 import { APIType } from 'core/network/api'
-import { call, put, select } from 'redux-saga/effects'
+import { call, delay, put, select } from 'redux-saga/effects'
 import {
   convertBaseToStandard,
   convertStandardToBase
@@ -35,6 +35,21 @@ export default ({
     return userData.tiers && userData.tiers.current >= 2
   }
 
+  const cancelSBOrder = function * ({
+    order
+  }: ReturnType<typeof A.cancelSBOrder>) {
+    try {
+      yield put(actions.form.startSubmit('cancelSBOrderForm'))
+      yield call(api.cancelSBOrder, order)
+      yield put(actions.form.stopSubmit('cancelSBOrderForm'))
+      yield put(A.fetchSBOrders())
+      yield put(actions.modals.closeAllModals())
+    } catch (e) {
+      const error = errorHandler(e)
+      yield put(actions.form.stopSubmit('cancelSBOrderForm', { _error: error }))
+    }
+  }
+
   const createSBOrder = function * () {
     try {
       const values: SBCheckoutFormValuesType = yield select(
@@ -55,6 +70,7 @@ export default ({
       )
       yield put(actions.form.stopSubmit('simpleBuyCheckout'))
       yield put(A.setStep({ step: 'TRANSFER_DETAILS', order }))
+      yield put(A.fetchSBOrders())
     } catch (e) {
       const error = errorHandler(e)
       yield put(actions.form.stopSubmit('simpleBuyCheckout', { _error: error }))
@@ -178,6 +194,7 @@ export default ({
   }
 
   return {
+    cancelSBOrder,
     createSBOrder,
     fetchSBBalances,
     fetchSBOrders,

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/types.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/types.ts
@@ -22,7 +22,8 @@ export enum SimpleBuyStepType {
   'CURRENCY_SELECTION',
   'ENTER_AMOUNT',
   'ORDER_SUMMARY',
-  'TRANSFER_DETAILS'
+  'TRANSFER_DETAILS',
+  'CANCEL_ORDER'
 }
 
 // State
@@ -149,7 +150,7 @@ interface SetStepAction {
       }
     | {
         order: SBOrderType
-        step: 'ORDER_SUMMARY' | 'TRANSFER_DETAILS'
+        step: 'ORDER_SUMMARY' | 'TRANSFER_DETAILS' | 'CANCEL_ORDER'
       }
   type: typeof AT.SET_STEP
 }

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CancelOrder/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CancelOrder/index.tsx
@@ -0,0 +1,45 @@
+import { actions } from 'data'
+import { bindActionCreators, compose, Dispatch } from 'redux'
+import { connect } from 'react-redux'
+import { RootState } from 'data/rootReducer'
+import { SBOrderType } from 'core/types'
+import React, { PureComponent } from 'react'
+import Template from './template'
+
+export type OwnProps = {
+  handleClose: () => void
+  order: SBOrderType
+}
+export type LinkDispatchPropsType = {
+  simpleBuyActions: typeof actions.components.simpleBuy
+}
+type LinkStatePropsType = {}
+type Props = OwnProps & LinkDispatchPropsType & LinkStatePropsType
+type State = {}
+
+class CancelOrder extends PureComponent<Props, State> {
+  state = {}
+
+  handleSubmit = () => {
+    this.props.simpleBuyActions.cancelSBOrder(this.props.order)
+  }
+
+  render () {
+    return <Template {...this.props} onSubmit={this.handleSubmit} />
+  }
+}
+
+const mapStateToProps = (state: RootState): LinkStatePropsType => ({})
+
+const mapDispatchToProps = (dispatch: Dispatch): LinkDispatchPropsType => ({
+  simpleBuyActions: bindActionCreators(actions.components.simpleBuy, dispatch)
+})
+
+const enhance = compose(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )
+)
+
+export default enhance(CancelOrder)
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CancelOrder/template.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CancelOrder/template.tsx
@@ -0,0 +1,111 @@
+import { Button, HeartbeatLoader, Icon, Text } from 'blockchain-info-components'
+import { ErrorCartridge } from 'components/Cartridge'
+import { FlyoutWrapper } from 'components/Flyout'
+import { Form } from 'components/Form'
+import { FormattedMessage } from 'react-intl'
+import { InjectedFormProps, reduxForm } from 'redux-form'
+import { LinkDispatchPropsType, OwnProps } from '.'
+import React from 'react'
+import styled from 'styled-components'
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+const CustomForm = styled(Form)`
+  text-align: center;
+`
+
+type Props = OwnProps & LinkDispatchPropsType
+
+const Template: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
+  return (
+    <Wrapper>
+      <FlyoutWrapper>
+        <CustomForm onSubmit={props.handleSubmit}>
+          <Icon
+            name='alert-filled'
+            color='orange400'
+            size='52px'
+            style={{ display: 'block' }}
+          />
+          <Text
+            color='grey800'
+            size='24px'
+            weight={600}
+            style={{ marginTop: '32px' }}
+          >
+            <FormattedMessage
+              id='modals.simplebuy.cancelorder.areyousure'
+              defaultMessage='Are you sure?'
+            />
+          </Text>
+          <Text
+            color='grey600'
+            weight={500}
+            size='16px'
+            lineHeight='150%'
+            style={{ marginTop: '8px', marginBottom: '48px' }}
+          >
+            <FormattedMessage
+              id='modals.simplebuy.cancelorder.outcome'
+              defaultMessage='Cancelling this {pair} Buy will remove your order. You can always create a new order from the menu if you cancel now.'
+              values={{
+                pair: props.order.pair
+              }}
+            />
+          </Text>
+          {props.error && (
+            <div style={{ marginBottom: '16px' }}>
+              <ErrorCartridge>Error: {props.error}</ErrorCartridge>
+            </div>
+          )}
+          <Button
+            fullwidth
+            size='16px'
+            height='48px'
+            nature='light'
+            data-e2e='cancelSBOrder'
+            disabled={props.submitting}
+            type='submit'
+          >
+            {props.submitting ? (
+              <HeartbeatLoader color='blue100' height='20px' width='20px' />
+            ) : (
+              <FormattedMessage
+                id='modals.simplebuy.cancelorder.cancel'
+                defaultMessage='Yes. Cancel Order'
+              />
+            )}
+          </Button>
+          <Button
+            fullwidth
+            size='16px'
+            height='48px'
+            nature='primary'
+            data-e2e='cancelSBOrder'
+            disabled={props.submitting}
+            onClick={() =>
+              props.simpleBuyActions.setStep({
+                step: 'ORDER_SUMMARY',
+                order: props.order
+              })
+            }
+            style={{ marginTop: '16px' }}
+            type='button'
+          >
+            <FormattedMessage
+              id='modals.simplebuy.cancelorder.goback'
+              defaultMessage='No. Go Back'
+            />
+          </Button>
+        </CustomForm>
+      </FlyoutWrapper>
+    </Wrapper>
+  )
+}
+
+export default reduxForm<{}, Props>({ form: 'cancelSBOrderForm' })(Template)
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/OrderSummary/template.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/OrderSummary/template.tsx
@@ -163,7 +163,12 @@ const Success: React.FC<Props> = props => {
             size='16px'
             height='48px'
             nature='light-red'
-            onClick={() => {}}
+            onClick={() =>
+              props.simpleBuyActions.setStep({
+                step: 'CANCEL_ORDER',
+                order: props.order
+              })
+            }
           >
             {/* TODO: Simple Buy - order types */}
             <FormattedMessage

diff --git a/...s/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/TransferDetails/template.success.tsx b/...s/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/TransferDetails/template.success.tsx
@@ -61,6 +61,7 @@ const Success: React.FC<Props> = props => {
               size='20px'
               color='grey600'
               style={{ marginRight: '24px' }}
+              role='button'
               onClick={() =>
                 props.simpleBuyActions.setStep({
                   step: 'ORDER_SUMMARY',

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index.tsx
@@ -5,6 +5,7 @@ import { ModalPropsType } from '../types'
 import { RootState } from 'data/rootReducer'
 import { SBOrderType } from 'core/types'
 import { SimpleBuyStepType } from 'data/types'
+import CancelOrder from './CancelOrder'
 import CurrencySelection from './CurrencySelection'
 import EnterAmount from './EnterAmount'
 import Flyout, { duration, FlyoutChild } from 'components/Flyout'
@@ -25,7 +26,10 @@ type LinkStatePropsType =
   | {
       step: 'ENTER_AMOUNT'
     }
-  | { order: SBOrderType; step: 'TRANSFER_DETAILS' | 'ORDER_SUMMARY' }
+  | {
+      order: SBOrderType
+      step: 'TRANSFER_DETAILS' | 'ORDER_SUMMARY' | 'CANCEL_ORDER'
+    }
 
 type Props = OwnProps & LinkDispatchPropsType & LinkStatePropsType
 type State = { direction: 'left' | 'right'; show: boolean }
@@ -92,6 +96,11 @@ class SimpleBuy extends PureComponent<Props, State> {
             <TransferDetails {...this.props} handleClose={this.handleClose} />
           </FlyoutChild>
         )}
+        {this.props.step === 'CANCEL_ORDER' && (
+          <FlyoutChild>
+            <CancelOrder {...this.props} handleClose={this.handleClose} />
+          </FlyoutChild>
+        )}
       </Flyout>
     )
   }

diff --git a/packages/blockchain-wallet-v4/src/network/api/http.ts b/packages/blockchain-wallet-v4/src/network/api/http.ts
@@ -20,6 +20,7 @@ type Header = {
 }
 
 export type HTTPService = {
+  deleteRequest: <T>(options: Partial<RequestConfig>) => Promise<T>
   get: <T>(options: Partial<RequestConfig>) => Promise<T>
   patch: <T>(options: Partial<RequestConfig>) => Promise<T>
   post: <T>(options: Partial<RequestConfig>) => Promise<T>
@@ -95,6 +96,8 @@ export default ({ apiKey }: { apiKey: string }): HTTPService => {
         ? endPoint
         : `${endPoint}?${encodeData(data, 'application/x-www-form-urlencoded')}`
     })
+  const deleteRequest = <T>(options: Partial<RequestConfig>) =>
+    request<T>({ method: 'DELETE', ...options })
   const post = <T>(options: Partial<RequestConfig>) =>
     request<T>({ method: 'POST', ...options })
   const put = <T>(options: Partial<RequestConfig>) =>
@@ -103,6 +106,7 @@ export default ({ apiKey }: { apiKey: string }): HTTPService => {
     request<T>({ method: 'PATCH', ...options })
 
   return {
+    deleteRequest,
     get,
     post,
     put,

diff --git a/packages/blockchain-wallet-v4/src/network/api/index.ts b/packages/blockchain-wallet-v4/src/network/api/index.ts
@@ -78,6 +78,7 @@ const api = ({
       authorizedGet: authorizedHttp.get,
       authorizedPost: authorizedHttp.post,
       authorizedPut: authorizedHttp.put,
+      authorizedDelete: authorizedHttp.deleteRequest,
       ...http
     }),
     ...rates({ nabuUrl, ...authorizedHttp }),

diff --git a/packages/blockchain-wallet-v4/src/network/api/simpleBuy/index.ts b/packages/blockchain-wallet-v4/src/network/api/simpleBuy/index.ts
@@ -14,8 +14,15 @@ export default ({
   get,
   authorizedGet,
   authorizedPost,
-  authorizedPut
+  authorizedPut,
+  authorizedDelete
 }) => {
+  const cancelSBOrder = (order: SBOrderType) =>
+    authorizedDelete({
+      url: nabuUrl,
+      endPoint: `/simple-buy/trades/${order.id}`
+    })
+
   const createSBOrder = (
     pair: SBPairsType,
     action: 'BUY' | 'SELL',
@@ -106,6 +113,7 @@ export default ({
     })
 
   return {
+    cancelSBOrder,
     createSBOrder,
     getSBBalances,
     getSBOrders,