feat(checkoutdotcom): adding checkoutdotcom card creation flow

blockchain · Jan 6, 2022 · bda0f41 · bda0f41
1 parent f76656b
commit bda0f41
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 13 deletions.
diff --git a/config/mocks/wallet-options-v4.json b/config/mocks/wallet-options-v4.json
@@ -14,7 +14,7 @@
       "sift": {
         "apiKey": "0ecd212038"
       },
-      "hotWalletAddresses":{
+      "hotWalletAddresses": {
         "swap": {
           "eth": "0xC05f893248D843192A989AEE6dC26d21426E78AF"
         },
@@ -32,7 +32,7 @@
         }
       },
       "featureFlags": {
-        "addCheckoutPaymentProvider": false,
+        "addCheckoutPaymentProvider": true,
         "addStripePaymentProvider": false,
         "cEURRewards": true,
         "completeYourProfile": true,

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/buySell/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/buySell/sagas.ts
@@ -207,7 +207,7 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas: any; ne
       const error = errorHandler(e)
       yield put(
         A.setStep({
-          step: 'DETERMINE_CARD_PROVIDER'
+          step: 'ADD_CARD_EVERYPAY'
         })
       )
       yield put(actions.form.startSubmit(FORM_BS_ADD_EVERYPAY_CARD))
@@ -1320,7 +1320,7 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas: any; ne
       const cardAcquirers: CardAcquirer[] = yield call(api.getCardAcquirers)
 
       const checkoutAcquirers: CardAcquirer[] = cardAcquirers.filter(
-        (cardAcquirer: CardAcquirer) => cardAcquirer.cardAcquirerName === 'checkout'
+        (cardAcquirer: CardAcquirer) => cardAcquirer.cardAcquirerName === 'CHECKOUTDOTCOM'
       )
 
       if (checkoutAcquirers.length === 0) {

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/BuySell/AddCardCheckoutDotCom/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/BuySell/AddCardCheckoutDotCom/index.tsx
@@ -1,16 +1,74 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { connect, ConnectedProps } from 'react-redux'
+import styled from 'styled-components'
 
+import { WalletOptionsType } from '@core/types'
+import { FlyoutWrapper } from 'components/Flyout'
 import { selectors } from 'data'
 import { RootState } from 'data/rootReducer'
 
-const AddCardCheckoutDotCom = (props: Props) => {
-  return <></>
+const CustomFlyoutWrapper = styled(FlyoutWrapper)`
+  height: 100%;
+`
+
+const Iframe = styled.iframe`
+  border: 0;
+  width: 100%;
+  height: 100%;
+  margin-top: 16px;
+`
+
+const AddCardCheckoutDotCom = ({
+  checkoutDotComAccountCodes = [],
+  checkoutDotComApiKey,
+  domains
+}: Props) => {
+  const handlePostMessage = async ({
+    data
+  }: {
+    data: { provider: 'checkoutdotcom'; status: 'error' | 'success'; token?: string }
+  }) => {
+    if (data.provider !== 'checkoutdotcom') return
+
+    if (data.status === 'error') {
+      // eslint-disable-next-line no-console
+      console.error('ERROR')
+    }
+
+    if (data.status === 'success' && data.token) {
+      const paymentMethodTokens = checkoutDotComAccountCodes.reduce((prev, curr) => {
+        return {
+          ...prev,
+          [curr]: data.token
+        }
+      }, {})
+
+      // eslint-disable-next-line no-console
+      console.log(paymentMethodTokens)
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('message', handlePostMessage, false)
+
+    return () => window.removeEventListener('message', handlePostMessage, false)
+  })
+
+  return (
+    <CustomFlyoutWrapper>
+      <Iframe
+        src={`${domains.walletHelper}/wallet-helper/checkoutdotcom/#/add-card/${checkoutDotComApiKey}`}
+      />
+    </CustomFlyoutWrapper>
+  )
 }
 
 const mapStateToProps = (state: RootState) => ({
   checkoutDotComAccountCodes: selectors.components.buySell.getCheckoutAccountCodes(state),
-  checkoutDotComApiKey: selectors.components.buySell.getCheckoutApiKey(state)
+  checkoutDotComApiKey: selectors.components.buySell.getCheckoutApiKey(state),
+  domains: selectors.core.walletOptions.getDomains(state).getOrElse({
+    walletHelper: 'https://wallet-helper.blockchain.com'
+  } as WalletOptionsType['domains'])
 })
 
 const connector = connect(mapStateToProps)

diff --git a/...s/blockchain-wallet-v4-frontend/src/modals/BuySell/ThreeDSHandlerCheckoutDotCom/index.tsx b/...s/blockchain-wallet-v4-frontend/src/modals/BuySell/ThreeDSHandlerCheckoutDotCom/index.tsx
@@ -24,8 +24,8 @@ const ThreeDSHandlerCheckoutDotCom = ({ buySellActions, domains, order }: Props)
     throw new Error('Order is not defined')
   }
 
-  const handlePostMessage = async ({ data }: { data: { payment: 'successful' } }) => {
-    if (data.payment !== 'successful') return
+  const handlePostMessage = async ({ data }: { data: { payment: 'success' } }) => {
+    if (data.payment !== 'success') return
 
     buySellActions.pollOrder(order.id)
   }

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/BuySell/ThreeDSHandlerEverypay/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/BuySell/ThreeDSHandlerEverypay/index.tsx
@@ -40,8 +40,8 @@ class ThreeDSHandlerEverypay extends PureComponent<Props, State> {
     window.removeEventListener('message', this.handlePostMessage, false)
   }
 
-  handlePostMessage = ({ data }: { data: { payment: 'successful' } }) => {
-    if (data.payment !== 'successful') return
+  handlePostMessage = ({ data }: { data: { payment: 'success' } }) => {
+    if (data.payment !== 'success') return
 
     this.setState({ threeDSCallbackReceived: true })
     // @ts-ignore

diff --git a/packages/blockchain-wallet-v4/src/network/api/buySell/types.ts b/packages/blockchain-wallet-v4/src/network/api/buySell/types.ts
@@ -341,7 +341,7 @@ export type Limits = {
   min: string
 }
 
-type CardAcquirerName = 'stripe' | 'checkout'
+type CardAcquirerName = 'STRIPE' | 'CHECKOUTDOTCOM' | 'EVERYPAY'
 
 export type CardAcquirer = {
   apiKey: string