feat: add error handling for lock card feature

blockchain · Apr 27, 2022 · db32af9 · db32af9
1 parent 8bbbeae
commit db32af9
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 2 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Alerts/messages.tsx b/packages/blockchain-wallet-v4-frontend/src/components/Alerts/messages.tsx
@@ -182,6 +182,20 @@ const getAlertContent = (message, data = undefined) => {
           defaultMessage='Currency has been successfully updated'
         />
       )
+    case C.DEBIT_CARD_DASHBOARD_LOCK_ERROR:
+      return buildMessageTemplate(
+        <FormattedMessage
+          id='components.alerts.debit_card_dashboard_lock_error'
+          defaultMessage='Failed to change Card Lock'
+        />
+      )
+    case C.DEBIT_CARD_DASHBOARD_LOCK_SUCCESS:
+      return buildMessageTemplate(
+        <FormattedMessage
+          id='components.alerts.debit_card_dashboard_lock_success'
+          defaultMessage='Card Lock changed successfully'
+        />
+      )
     case C.DOCUMENT_UPLOAD_ERROR:
       return buildMessageTemplate(
         <FormattedMessage

diff --git a/.../blockchain-wallet-v4-frontend/src/scenes/DebitCard/CardDashboard/ManageCardBox/index.tsx b/.../blockchain-wallet-v4-frontend/src/scenes/DebitCard/CardDashboard/ManageCardBox/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { Switch } from '@blockchain-com/constellation'
 import styled from 'styled-components'
@@ -7,6 +7,7 @@ import { Remote } from '@core'
 import { Button, Icon } from 'blockchain-info-components'
 import { CardStateType } from 'data/components/debitCard/types'
 import { ModalName } from 'data/modals/types'
+import * as C from 'services/alerts'
 
 import {
   BoxContainer,
@@ -24,10 +25,25 @@ const SwitchWrapper = styled.div`
   margin: auto;
 `
 
-const ManageCardBox = ({ cards, debitCardActions, lockHandler, modalActions }) => {
+const ManageCardBox = ({ alertActions, cards, debitCardActions, lockHandler, modalActions }) => {
   const activeCard = cards[0]
   const [isCardLocked, setCardLocked] = useState(activeCard.status === CardStateType.LOCKED)
 
+  useEffect(() => {
+    lockHandler.cata({
+      Failure: () => {
+        // Return lock to previous state
+        setCardLocked(!isCardLocked)
+        alertActions.displayError(C.DEBIT_CARD_DASHBOARD_LOCK_ERROR)
+      },
+      Loading: () => null,
+      NotAsked: () => null,
+      Success: () => {
+        alertActions.displaySuccess(C.DEBIT_CARD_DASHBOARD_LOCK_SUCCESS)
+      }
+    })
+  }, [lockHandler])
+
   const onTerminate = () => {
     modalActions.showModal(ModalName.CUSTOMIZABLE_CONFIRM_MODAL, {
       body: (

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/DebitCard/CardDashboard/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/DebitCard/CardDashboard/index.tsx
@@ -11,6 +11,7 @@ const Iframe = styled.iframe`
 `
 
 const CardDashboard = ({
+  alertActions,
   cardToken,
   cards,
   debitCardActions,
@@ -28,6 +29,7 @@ const CardDashboard = ({
         />
       </BoxContainer>
       <ManageCardBox
+        alertActions={alertActions}
         modalActions={modalActions}
         debitCardActions={debitCardActions}
         cards={cards}

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/DebitCard/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/DebitCard/index.tsx
@@ -21,13 +21,15 @@ const mapStateToProps = (state) => ({
 })
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
+  alertActions: bindActionCreators(actions.alerts, dispatch),
   debitCardActions: bindActionCreators(actions.components.debitCard, dispatch),
   modalActions: bindActionCreators(actions.modals, dispatch)
 })
 
 const connector = connect(mapStateToProps, mapDispatchToProps)
 
 type OwnProps = {
+  alertActions: typeof actions.alerts
   cardToken: string
   cards: Array<DebitCardType>
   debitCardActions: typeof actions.components.debitCard

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/DebitCard/template.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/DebitCard/template.tsx
@@ -17,6 +17,7 @@ import CardOrder from './CardOrder'
 import { Wrapper } from './model'
 
 const DebitCard = ({
+  alertActions,
   cardToken,
   cards,
   debitCardActions,
@@ -56,6 +57,7 @@ const DebitCard = ({
         <CardOrder handleOpenOrderMyCard={handleOpenOrderMyCard} />
       ) : (
         <CardDashboard
+          alertActions={alertActions}
           domains={domains}
           cardToken={cardToken}
           last4={cards[0].last4}

diff --git a/packages/blockchain-wallet-v4-frontend/src/services/alerts/index.ts b/packages/blockchain-wallet-v4-frontend/src/services/alerts/index.ts
@@ -15,6 +15,8 @@ export const COPY_ADDRESS_CLIPBOARD_SUCCESS = 'copy_address_clipboard_success'
 export const COPY_LINK_CLIPBOARD_SUCCESS = 'copy_link_clipboard_success'
 export const CURRENCY_UPDATE_ERROR = 'currency_update_error'
 export const CURRENCY_UPDATE_SUCCESS = 'currency_update_success'
+export const DEBIT_CARD_DASHBOARD_LOCK_ERROR = 'debit_card_dashboard_lock_error'
+export const DEBIT_CARD_DASHBOARD_LOCK_SUCCESS = 'debit_card_dashboard_lock_success'
 export const DOCUMENT_UPLOAD_ERROR = 'document_upload_error'
 export const DEAUTHORIZE_BROWSER_SUCCESS = 'deauthorize_browser_success'
 export const DEAUTHORIZE_BROWSER_ERROR = 'deauthorize_browser_error'