feat(simple buy): better link cards in preferences

blockchain · Apr 28, 2020 · b6db73f · b6db73f
1 parent 0e8f149
commit b6db73f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedCards/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedCards/index.tsx
@@ -8,6 +8,7 @@ import {
   SBPaymentMethodsType
 } from 'core/types'
 import { getData } from './selectors'
+import { Remote } from 'core'
 import { RootState } from 'data/rootReducer'
 import React, { PureComponent } from 'react'
 import Success from './template.success'
@@ -20,6 +21,10 @@ class LinkedCards extends PureComponent<Props> {
     )
   }
 
+  shouldComponentUpdate (nextProps: Props) {
+    return Remote.Success.is(nextProps.data)
+  }
+
   handleCreditCardClick = (/* id: string */) => {
     this.props.simpleBuyActions.showModal('settingsGeneral')
     this.props.simpleBuyActions.setStep({
@@ -30,7 +35,13 @@ class LinkedCards extends PureComponent<Props> {
 
   render () {
     return this.props.data.cata({
-      Success: val => <Success {...val} {...this.props} />,
+      Success: val => (
+        <Success
+          {...val}
+          {...this.props}
+          handleCreditCardClick={this.handleCreditCardClick}
+        />
+      ),
       Loading: () => null,
       Failure: () => null,
       NotAsked: () => null

diff --git a/...lockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedCards/template.success.tsx b/...lockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedCards/template.success.tsx
@@ -142,14 +142,18 @@ const Success: React.FC<Props & { fiatCurrency?: FiatType }> = props => {
         })}
       </SettingSummary>
       <CustomSettingComponent>
-        <Button nature='primary' data-e2e='addCardFromSettings'>
+        <Button
+          nature='primary'
+          data-e2e='addCardFromSettings'
+          onClick={props.handleCreditCardClick}
+        >
           <FormattedMessage id='buttons.add_card' defaultMessage='Add Card' />
         </Button>
       </CustomSettingComponent>
     </CustomSettingContainer>
   )
 }
 
-type Props = OwnProps & SuccessStateType
+type Props = OwnProps & SuccessStateType & { handleCreditCardClick: () => void }
 
 export default Success