feat(debit): adding right action for more items on transactions

blockchain · Oct 19, 2022 · ea5135d · ea5135d
1 parent 35647a0
commit ea5135d
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 35 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/debitCard/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/debitCard/sagas.ts
@@ -67,11 +67,16 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas: any; ne
     }
   }
 
-  const getCardTransactions = function* () {
+  const getCardTransactions = function* (action: ReturnType<typeof A.getCardTransactions>) {
     const selectedCard = yield select(selectors.components.debitCard.getCurrentCardSelected)
+
     yield put(A.getCardTransactionsLoading())
+
     try {
-      const data = yield call(api.getDCTransactions, selectedCard.id)
+      const data = yield call(api.getDCTransactions, {
+        cardId: selectedCard.id,
+        limit: action.payload.limit
+      })
       yield put(A.getCardTransactionsSuccess(data))
     } catch (e) {
       yield put(A.getCardTransactionsFailure(e))
@@ -99,7 +104,7 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas: any; ne
 
         yield call(getCurrentCardAccount)
 
-        yield call(getCardTransactions)
+        yield put(A.getCardTransactions({ limit: 4 }))
       }
     } catch (e) {
       console.error('Failed to get account cards', errorHandler(e))

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/debitCard/slice.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/debitCard/slice.ts
@@ -59,7 +59,7 @@ const debitCardSlice = createSlice({
     createCardSuccess: (state, action: PayloadAction<DebitCardType>) => {
       state.cardCreationData = Remote.Success(action.payload)
     },
-    getCardTransactions: (state) => {},
+    getCardTransactions: (state, action: PayloadAction<{ limit: number }>) => {},
     getCardTransactionsFailure: (state, action: PayloadAction<string>) => {
       state.transactions = Remote.Failure(action.payload)
     },

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/refresh/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/refresh/sagas.ts
@@ -100,7 +100,7 @@ export default () => {
           break
         case contains('/debit-card', pathname):
           yield put(actions.components.debitCard.getCurrentCardAccount())
-          yield put(actions.components.debitCard.getCardTransactions())
+          yield put(actions.components.debitCard.getCardTransactions({ limit: 4 }))
           break
         case contains('/settings/general', pathname):
           yield put(actions.components.buySell.fetchCards(true))

diff --git a/...hain-wallet-v4-frontend/src/modals/DebitCard/TransactionList/TransactionList.template.tsx b/...hain-wallet-v4-frontend/src/modals/DebitCard/TransactionList/TransactionList.template.tsx
@@ -1,32 +1,20 @@
 import React, { useState } from 'react'
 import { FormattedMessage } from 'react-intl'
-import styled from 'styled-components'
 
-import { Text } from 'blockchain-info-components'
-import FiatDisplay from 'components/Display/FiatDisplay'
 import Flyout from 'components/Flyout'
 import FlyoutContainer from 'components/Flyout/Container'
 import FlyoutHeader from 'components/Flyout/Header'
 import { FlyoutContent } from 'components/Flyout/Layout'
+import { selectors } from 'data'
+import { useRemote } from 'hooks'
 
-import { DAY_MONTH, TIME_HS12, useDateTimeFormatter } from '../../../hooks/useDateTimeFormatter'
-import {
-  BoxRowItemSubTitle,
-  BoxRowItemTitle,
-  BoxRowWithBorder
-} from '../../../scenes/DebitCard/CardDashboard/CardDashboard.model'
 import { Props } from './TransactionList'
 
-const BoxRowItemTitleRight = styled(BoxRowItemTitle)`
-  flex: none;
-  align-items: end;
-`
-
 const TransactionList = (props: Props) => {
-  const { close, detail } = props
-  const { fee, merchantName, originalAmount, userTransactionTime } = detail
-  const date = useDateTimeFormatter(userTransactionTime, DAY_MONTH)
-  const time = useDateTimeFormatter(userTransactionTime, TIME_HS12)
+  const { close } = props
+  const { data, isLoading, isNotAsked } = useRemote(
+    selectors.components.debitCard.getCardTransactions
+  )
 
   const [show, setShow] = useState(true)
 
@@ -40,11 +28,15 @@ const TransactionList = (props: Props) => {
   return (
     <Flyout {...props} isOpen={show} onClose={handleClose}>
       <FlyoutContainer>
-        <FlyoutHeader data-e2e='transactionDetailFlyout' mode='back' onClick={handleClose}>
+        <FlyoutHeader data-e2e='transactionDetailFlyout' mode='close' onClick={handleClose}>
           <FormattedMessage id='modals.transaction_list.title' defaultMessage='All Activity' />
         </FlyoutHeader>
         <FlyoutContent mode='top'>
-          <>Activity here</>
+          <>
+            {data?.map((d) => (
+              <div key={d.id}>{d.id}</div>
+            ))}
+          </>
         </FlyoutContent>
       </FlyoutContainer>
     </Flyout>

diff --git a/...es/blockchain-wallet-v4-frontend/src/modals/DebitCard/TransactionList/TransactionList.tsx b/...es/blockchain-wallet-v4-frontend/src/modals/DebitCard/TransactionList/TransactionList.tsx
@@ -2,7 +2,6 @@ import React from 'react'
 import { compose } from 'redux'
 
 import { duration } from 'components/Flyout'
-import { CardTransaction } from 'data/components/debitCard/types'
 import { ModalName } from 'data/modals/types'
 import modalEnhancer from 'providers/ModalEnhancer'
 
@@ -12,11 +11,8 @@ import TransactionList from './TransactionList.template'
 const TransactionListContainer = (props: Props) => {
   return <TransactionList {...props} />
 }
-type OwnProps = {
-  detail: CardTransaction
-}
 
-export type Props = OwnProps & ModalPropsType
+export type Props = ModalPropsType
 
 const enhance = compose<React.ComponentType>(
   modalEnhancer(ModalName.TRANSACTION_LIST_MODAL, { transition: duration })

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/index.tsx
@@ -32,6 +32,7 @@ const TerminateCard = React.lazy(() => import('./DebitCard/TerminateCard'))
 const TransactionDetail = React.lazy(() => import('./DebitCard/TransactionDetail'))
 const FundsList = React.lazy(() => import('./DebitCard/FundsList'))
 const CustomizableConfirm = React.lazy(() => import('./CustomizableConfirm'))
+const TransactionList = React.lazy(() => import('./DebitCard/TransactionList'))
 
 // DEX
 const DexSwapSettings = React.lazy(() => import('./Dex/SwapSettings'))
@@ -295,7 +296,7 @@ const Modals = (props: Props) => {
           <TransactionDetail />
         ) : null}
         {props.modals.find((modal) => modal.type === ModalName.TRANSACTION_LIST_MODAL) ? (
-          <TransactionDetail />
+          <TransactionList />
         ) : null}
         {props.modals.find((modal) => modal.type === ModalName.TERMS_AND_CONDITIONS_MODAL) ? (
           <TermsAndConditions disableOutsideClose />

diff --git a/...-frontend/src/scenes/DebitCard/CardDashboard/TransactionsBox/TransactionsBox.template.tsx b/...-frontend/src/scenes/DebitCard/CardDashboard/TransactionsBox/TransactionsBox.template.tsx
@@ -85,7 +85,7 @@ const EmptyList = () => (
   </BoxRow>
 )
 
-const TransactionsBox = ({ modalActions }) => {
+const TransactionsBox = ({ debitCardActions, modalActions }) => {
   const { data, isLoading, isNotAsked } = useRemote(
     selectors.components.debitCard.getCardTransactions
   )
@@ -150,13 +150,21 @@ const TransactionsBox = ({ modalActions }) => {
     })
   }
 
+  const handleOpenListTransactions = () => {
+    debitCardActions.getCardTransactions({ limit: 20 })
+
+    modalActions.showModal(ModalName.TRANSACTION_LIST_MODAL, {
+      origin: 'SettingsPage'
+    })
+  }
+
   const ListComponent = () => (
     <>
       {!data || isEmpty(data) ? (
         <EmptyList />
       ) : (
         <TransactionsWrapper>
-          {data.map((detail) => {
+          {data.slice(0, MAX_TRANSACTIONS).map((detail) => {
             const { id, merchantName, originalAmount, state, type, userTransactionTime } = detail
 
             const formattedDateTime = new Date(userTransactionTime).toLocaleString(
@@ -204,6 +212,7 @@ const TransactionsBox = ({ modalActions }) => {
               defaultMessage='See All'
             />
           }
+          onClick={handleOpenListTransactions}
         >
           See all
         </Button>

diff --git a/...wallet-v4-frontend/src/scenes/DebitCard/CardDashboard/TransactionsBox/TransactionsBox.tsx b/...wallet-v4-frontend/src/scenes/DebitCard/CardDashboard/TransactionsBox/TransactionsBox.tsx
@@ -9,6 +9,7 @@ import TransactionsBox from './TransactionsBox.template'
 const TransactionsBoxContainer = (props) => <TransactionsBox {...props} />
 
 const mapDispatchToProps = (dispatch) => ({
+  debitCardActions: bindActionCreators(actions.components.debitCard, dispatch),
   modalActions: bindActionCreators(actions.modals, dispatch)
 })
 

diff --git a/packages/blockchain-wallet-v4/src/network/api/debitCard/index.ts b/packages/blockchain-wallet-v4/src/network/api/debitCard/index.ts
@@ -77,10 +77,10 @@ export default ({ authorizedDelete, authorizedGet, authorizedPost, authorizedPut
       url: nabuUrl
     })
 
-  const getDCTransactions = (cardId) =>
+  const getDCTransactions = ({ cardId, limit }: { cardId: string; limit: number }) =>
     authorizedGet({
       contentType: 'application/json',
-      endPoint: `/card-issuing/transactions${cardId ? `?cardId=${cardId}&` : ''}`,
+      endPoint: `/card-issuing/transactions?cardId=${cardId}&limit=${limit}&`,
       url: nabuUrl
     })