feat: added new step and proper typing

blockchain · Jul 15, 2020 · 26384af · 26384af
1 parent 14afbbf
commit 26384af
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 88 deletions.
diff --git a/package.json b/package.json
@@ -127,7 +127,7 @@
     "@types/react-redux": "7.1.7",
     "@types/redux": "3.6.0",
     "@types/redux-form": "8.2.3",
-    "@types/styled-components": "4.0.3",
+    "@types/styled-components": "5.1.0",
     "@typescript-eslint/eslint-plugin": "2.28.0",
     "@typescript-eslint/parser": "2.28.0",
     "babel-eslint": "10.1.0",

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
@@ -17,9 +17,9 @@ import {
   SBSuggestedAmountType
 } from 'core/types'
 import {
-  SBFormPaymentMethod,
   SBShowModalOriginType,
-  SimpleBuyActionTypes
+  SimpleBuyActionTypes,
+  StepActionsPayload
 } from './types'
 
 export const activateSBCard = (card: SBCardType) => ({
@@ -402,58 +402,46 @@ export const pollSBOrder = (orderId: string) => ({
   }
 })
 
-export const setStep = (
-  payload:
-    | {
-        order: SBOrderType
-        step:
-          | 'CHECKOUT_CONFIRM'
-          | 'TRANSFER_DETAILS'
-          | 'ORDER_SUMMARY'
-          | 'CANCEL_ORDER'
+export const setStep = (payload: StepActionsPayload): SimpleBuyActionTypes => ({
+  type: AT.SET_STEP,
+  payload: getPayloadObjectForStep(payload)
+})
+
+const getPayloadObjectForStep = (payload: StepActionsPayload) => {
+  switch (payload.step) {
+    case 'PAYMENT_METHODS':
+      return {
+        step: payload.step,
+        cryptoCurrency: payload.cryptoCurrency,
+        defaultMethod: payload.defaultMethod,
+        fiatCurrency: payload.fiatCurrency,
+        pair: payload.pair
       }
-    | {
-        cryptoCurrency?: CoinType
-        defaultMethod?: SBFormPaymentMethod
-        fiatCurrency: FiatType
-        pair: SBPairType
-        step: 'ENTER_AMOUNT'
+    case 'ENTER_AMOUNT':
+      return {
+        step: payload.step,
+        cryptoCurrency: payload.cryptoCurrency,
+        defaultMethod: payload.defaultMethod,
+        fiatCurrency: payload.fiatCurrency,
+        pair: payload.pair
       }
-    | {
-        cryptoCurrency?: CoinType
-        fiatCurrency: FiatType
-        step: 'CRYPTO_SELECTION'
+    case 'CRYPTO_SELECTION':
+      return {
+        step: payload.step,
+        cryptoCurrency: payload.cryptoCurrency,
+        fiatCurrency: payload.fiatCurrency
       }
-    | { order?: SBOrderType; step: '3DS_HANDLER' }
-    | { step: 'ADD_CARD' | 'CURRENCY_SELECTION' | 'CC_BILLING_ADDRESS' }
-): SimpleBuyActionTypes => ({
-  type: AT.SET_STEP,
-  payload:
-    payload.step === 'ENTER_AMOUNT'
-      ? {
-          step: payload.step,
-          cryptoCurrency: payload.cryptoCurrency,
-          defaultMethod: payload.defaultMethod,
-          fiatCurrency: payload.fiatCurrency,
-          pair: payload.pair
-        }
-      : payload.step === 'CRYPTO_SELECTION'
-      ? {
-          step: payload.step,
-          cryptoCurrency: payload.cryptoCurrency,
-          fiatCurrency: payload.fiatCurrency
-        }
-      : payload.step === 'CHECKOUT_CONFIRM' ||
-        payload.step === 'TRANSFER_DETAILS' ||
-        payload.step === 'ORDER_SUMMARY' ||
-        payload.step === 'CANCEL_ORDER'
-      ? { step: payload.step, order: payload.order }
-      : payload.step === '3DS_HANDLER'
-      ? { step: payload.step, order: payload.order }
-      : {
-          step: payload.step
-        }
-})
+    case 'CHECKOUT_CONFIRM':
+    case 'TRANSFER_DETAILS':
+    case 'ORDER_SUMMARY':
+    case 'CANCEL_ORDER':
+      return { step: payload.step, order: payload.order }
+    case '3DS_HANDLER':
+      return { step: payload.step, order: payload.order }
+    default:
+      return { step: payload.step }
+  }
+}
 
 export const showModal = (
   origin: SBShowModalOriginType,

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
@@ -246,6 +246,14 @@ export function simpleBuyReducer (
             order: undefined
           }
         case 'CRYPTO_SELECTION':
+          return {
+            ...state,
+            cryptoCurrency: action.payload.cryptoCurrency,
+            fiatCurrency: action.payload.fiatCurrency,
+            step: action.payload.step,
+            order: undefined
+          }
+        case 'PAYMENT_METHODS':
           return {
             ...state,
             cryptoCurrency: action.payload.cryptoCurrency,

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
@@ -50,6 +50,7 @@ export enum SimpleBuyStepType {
   'CURRENCY_SELECTION',
   'CRYPTO_SELECTION',
   'ENTER_AMOUNT',
+  'PAYMENT_METHODS',
   'ORDER_SUMMARY',
   'CHECKOUT_CONFIRM',
   'ADD_CARD',
@@ -287,38 +288,43 @@ interface FetchSBSuggestedAmountsSuccess {
   }
   type: typeof AT.FETCH_SB_SUGGESTED_AMOUNTS_SUCCESS
 }
+
+export type StepActionsPayload =
+  | {
+      order: SBOrderType
+      step:
+        | 'CHECKOUT_CONFIRM'
+        | 'TRANSFER_DETAILS'
+        | 'ORDER_SUMMARY'
+        | 'CANCEL_ORDER'
+    }
+  | {
+      cryptoCurrency?: CoinType
+      defaultMethod?: SBFormPaymentMethod
+      fiatCurrency: FiatType
+      pair: SBPairType
+      step: 'ENTER_AMOUNT'
+    }
+  | {
+      cryptoCurrency?: CoinType
+      fiatCurrency: FiatType
+      step: 'CRYPTO_SELECTION'
+    }
+  | {
+      cryptoCurrency: CoinType
+      defaultMethod: SBFormPaymentMethod
+      fiatCurrency: FiatType
+      pair: SBPairType
+      step: 'PAYMENT_METHODS'
+    }
+  | { order?: SBOrderType; step: '3DS_HANDLER' }
+  | { step: 'ADD_CARD' | 'CURRENCY_SELECTION' | 'CC_BILLING_ADDRESS' }
+
 interface SetStepAction {
-  payload:
-    | {
-        cryptoCurrency?: CoinType
-        defaultMethod?: SBFormPaymentMethod
-        fiatCurrency: FiatType
-        pair: SBPairType
-        step: 'ENTER_AMOUNT'
-      }
-    | {
-        cryptoCurrency?: CoinType
-        defaultMethod?: SBFormPaymentMethod
-        fiatCurrency: FiatType
-        step: 'CRYPTO_SELECTION'
-      }
-    | {
-        order: SBOrderType
-        step:
-          | 'CHECKOUT_CONFIRM'
-          | 'ORDER_SUMMARY'
-          | 'TRANSFER_DETAILS'
-          | 'CANCEL_ORDER'
-      }
-    | {
-        order?: SBOrderType
-        step: '3DS_HANDLER'
-      }
-    | {
-        step: 'ADD_CARD' | 'CURRENCY_SELECTION' | 'CC_BILLING_ADDRESS'
-      }
+  payload: StepActionsPayload
   type: typeof AT.SET_STEP
 }
+
 interface ShowModalAction {
   payload: {
     cryptoCurrency?: CoinType

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/index.tsx
@@ -42,6 +42,8 @@ class Checkout extends PureComponent<Props> {
     } as SuccessStateType)
 
     if (userData.tiers.current < 2) {
+      // eslint-disable-next-line
+      console.log('inside first if')
       this.props.identityVerificationActions.verifyIdentity(
         2,
         false,
@@ -52,6 +54,8 @@ class Checkout extends PureComponent<Props> {
         formValues?.method?.type as SBPaymentMethodType['type']
       )
     } else if (formValues && formValues.method) {
+      // eslint-disable-next-line
+      console.log('here we gooo', formValues.method.type)
       switch (formValues.method.type) {
         case 'PAYMENT_CARD':
           this.props.simpleBuyActions.setStep({

diff --git a/...ckchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/template.success.tsx b/...ckchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/template.success.tsx
@@ -232,6 +232,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
                       )
                     }
                     role='button'
+                    key={`sbBuy${amount}Chip`}
                   >
                     {fiatToString({
                       unit: fiatCurrency,

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index.tsx
@@ -79,6 +79,11 @@ class SimpleBuy extends PureComponent<Props, State> {
             <CryptoSelection {...this.props} handleClose={this.handleClose} />
           </FlyoutChild>
         )}
+        {this.props.step === 'PAYMENT_METHODS' && (
+          <FlyoutChild>
+            <CryptoSelection {...this.props} handleClose={this.handleClose} />
+          </FlyoutChild>
+        )}
         {this.props.step === 'ADD_CARD' && (
           <FlyoutChild>
             <AddCard {...this.props} handleClose={this.handleClose} />
@@ -158,6 +163,7 @@ type LinkStatePropsType =
         | 'TRANSFER_DETAILS'
         | 'ORDER_SUMMARY'
         | 'CANCEL_ORDER'
+        | 'PAYMENT_METHODS'
     }
   | {
       cardId?: string

diff --git a/yarn.lock b/yarn.lock
@@ -2967,7 +2967,7 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
-"@types/hoist-non-react-statics@3.3.1", "@types/hoist-non-react-statics@^3.3.0":
+"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@3.3.1", "@types/hoist-non-react-statics@^3.3.0":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
   integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
@@ -3076,6 +3076,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/react-native@*":
+  version "0.63.1"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.1.tgz#81da30aeaaa034039efd23ccb1c54786b1630966"
+  integrity sha512-mo2DAgliCqdNyivBa0/JL8JIkebt9TU0ATmsvtUvypIP5qN+YJekbVPpHt6WLXEZyBm7LtmIqxbjIHqeoaojsg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-redux@7.1.7":
   version "7.1.7"
   resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.7.tgz#12a0c529aba660696947384a059c5c6e08185c7a"
@@ -3119,13 +3126,15 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
-"@types/styled-components@4.0.3":
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.0.3.tgz#8287e54e446302369eecc521243a2f32cf9122ee"
-  integrity sha512-LzntHlOKEOxUxMkVmQPNG88TsldeHO2NlwNkzHnw4wL8qhHQgd7u+u3yw84hZgoFh4ugsLCbFtjYcbP7v5WC5Q==
+"@types/styled-components@5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.0.tgz#24d3412ba5395aa06e14fbc93c52f9454cebd0d6"
+  integrity sha512-ZFlLCuwF5r+4Vb7JUmd+Yr2S0UBdBGmI7ctFTgJMypIp3xOHI4LCFVn2dKMvpk6xDB2hLRykrEWMBwJEpUAUIQ==
   dependencies:
-    "@types/node" "*"
+    "@types/hoist-non-react-statics" "*"
     "@types/react" "*"
+    "@types/react-native" "*"
+    csstype "^2.2.0"
 
 "@types/tapable@*", "@types/tapable@^1.0.5":
   version "1.0.5"
@@ -13690,11 +13699,16 @@ mock-socket@8.0.5:
   dependencies:
     url-parse "^1.2.0"
 
-moment@*, moment@2.24.0:
+moment@*:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
   integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
 
+moment@2.27.0:
+  version "2.27.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.27.0.tgz#8bff4e3e26a236220dfe3e36de756b6ebaa0105d"
+  integrity sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ==
+
 moo@^0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.1.tgz#7aae7f384b9b09f620b6abf6f74ebbcd1b65dbc4"