Account Activity

The account activity component allows you to show the customer the transactional activity on either a customer, an account or a card level. The component shows final transactions, as well as pending card payments. Transaction Enrichment is supported, if enabled.

Account Activity Component TEST MODE

Mobile

Desktop

Implementation

Web Components

Add the activity element to your app where you'd like it to be presented.

<unit-elements-activity
	account-id="1105561"
	customer-token=""
	theme=""
	query-filter="filter[since]=2023-01-01T00:00:00.000Z&filter[until]=2023-04-26T00:00:00.000Z&sort=-createdAt"
	hide-title="false"
	hide-filter-button="false"
	hide-back-to-top="false"
	show-declined-activity="true"
	show-csv-download="true"
></unit-elements-activity>

Inputs:

Name	Type	Required	Description
account-id	string	No	Unit account id. The account for which the activity will be shown. If not specified: the activity of the customer (all accounts) will be shown
customer-token	string	Yes	A Unit Customer token. Required Scopes: customers transactions authorizations accounts payments check-deposits
theme	string	No	A URL that specifies the UI configuration.
language	string	No	A URL that specifies the language configuration.
query-filter	string	No	Query for filtering transactions and authorizations: Transactions, Authorizations
hide-title	string	No	Hide the component title in case value is 'true'.
hide-filter-button	string	No	Hide filter button in case value is 'true'.
columns	string	No	Comma separated keys to display as table headers. The default is: "summary,type,amount"
pagination-type	string	No	Defines the method by which additional content is loaded. Possible values: "infiniteScroll" (default), "pagination"
transactions-per-page	string	No	Number of transactions to fetch on each page or scroll to bottom. Also acts as initial number of transactions to fetch. The default is "8" for pagination and "15" for infinite scroll
hide-back-to-top	string	No	Hide back to top button in case value is 'true'.
show-declined-activity	string	No	Show declined activity in case value is 'true'.
show-csv-download	string	No	Show CSV download button in case value is 'true'.

Events:

Coming soon

React Native SDK

UNActivityComponent props:

Name	Type	Required	Description
accountId	string	NO	Unit account id. The account for which the activity will be shown. If not specified: the activity of the customer (all accounts) will be shown
theme	string	NO	A URL that specifies the UI configuration.
language	string	NO	A URL that specifies the language configuration.
hideFilterButton	boolean	NO	Hide filter button in case value is true
hideTitle	boolean	NO	Hide title in case value is true
hideBackToTop	boolean	NO	Hide back to top button in case value is true
queryFilter	string	NO	Query for filtering transactions and authorizations: Transactions, Authorizations
paginationType	UNActivityComponentPaginationType	NO	Defines the method by which additional content is loaded. Possible values: UNActivityComponentPaginationType.infiniteScroll (default), UNActivityComponentPaginationType.pagination
transactionsPerPage	number	NO	Number of transactions to fetch on each page or scroll to bottom. Also acts as initial number of transactions to fetch. The default is 8 for pagination and 15 for infinite scroll
showDeclinedActivity	boolean	NO	Show declined activity in case value is true.
showCsvDownload	boolean	NO	Show a CSV download button in case value is true.
onLoad	(response: UNComponentsOnLoadResponse<UNActivityOnLoadData>) => void	NO	Callback for handling onload event, also usable for error handling.

Incoming Events:

• By using the refresh() method, it's possible to to refresh the component data from a custom button. Important Note: one can use the refresh() only after UNActivityComponent is loaded. (can be verified by onLoad callback)

Example:

import React from 'react';
import { UNActivityComponent, UNActivityOnLoadData, UNActivityRef } from 'react-native-unit-components';

...
 const activityRef = useRef<UNActivityRef>(null);
...

const refresh = () => {
    activityRef.current?.refresh();
  };
...
export default function YourComponent() {
  return (
    <UNActivityComponent
      ref={activityRef}
      accountId={'1105561'}
      onLoad={(response: UNComponentsOnLoadResponse<UNActivityOnLoadData>) => { console.log(response) }}
      queryFilter={'filter[since]=2023-01-01T00:00:00.000Z&filter[until]=2023-04-26T00:00:00.000Z&sort=-createdAt'}
    />
  );
}

Android SDK

Component name: UNActivityComponent

getActivityComponent parameters:

Name	Type	Required	Description
accountId	String	NO	Unit account id.
additionalSettings	UNActivityViewSettingsInterface	NO	Additional settings unique for this component
theme	String	NO	A URL that specifies the UI configuration.
language	String	NO	A URL that specifies the language configuration.
callbacks	UNActivityComponentCallbacks	NO	Component's Callbacks sealed class

UNActivityComponentCallbacks

The callbacks parameter for UNActivityComponent is of the following type:

typealias UNActivityComponentCallbacks = (callback: UNActivityComponentCallback) -> Unit

The UNActivityComponentCallback is sealed class that has the following callbacks that you can receive from an Activity component:

sealed class UNActivityComponentCallback {
    data class OnLoad(val onLoadResponse: Result<UNActivityOnLoadResponse>): UNActivityComponentCallback()
}

To get the Activity Component fragment, call the getActivityComponent method of UnitComponentsSdk.manager.ui.views.

Example:

Fragment

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import co.unit.un_components.api.UnitComponentsSdk
import co.unit.un_components.common.builders.UNActivityViewSettingsBuilder
import co.unit.un_components.common.enums.UNActivityComponentCallback
import co.unit.un_components.components.UNActivityComponent

class ActivityFragment : Fragment() {
    private var unActivityComponent: UNActivityComponent? = null

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val fragmentLayout = inflater.inflate(R.layout.FILE_NAME, container, false)

        // Define your callbacks
        val callbacks: (UNActivityComponentCallback) -> Unit = { callback ->
            when (callback) {
                is UNActivityComponentCallback.OnLoad -> handleOnLoad(callback.onLoadResponse)
            }
        }

        // Check if this is a fresh creation or restoration after process death
        unActivityComponent = if (savedInstanceState == null) {
            // Fresh creation - create new component and add to fragment manager
            UnitComponentsSdk.manager.ui.views.getActivityComponent(
                accountId = YOUR_ACCOUNT_ID,
                theme = YOUR_THEME_URL,
                language = YOUR_LANGUAGE_URL
            ).also {
                childFragmentManager.beginTransaction()
                    .replace(R.id.CONTAINER_NAME, it as Fragment, FRAGMENT_TAG)
                    .commitNow()
            }
        } else {
            // Restoration after process death - find existing fragment by tag
            childFragmentManager.findFragmentByTag(FRAGMENT_TAG) as? UNActivityComponent
        }

        // Set callbacks after obtaining the component (required for both fresh and restored)
        unActivityComponent?.callbacks = callbacks

        return fragmentLayout
    }

    // ...
    // Event handlers
    // ...

    companion object {
        private const val FRAGMENT_TAG = "activity_component"
    }
}

Compose

import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.foundation.layout.fillMaxSize
import co.unit.un_components.common.enums.UNActivityComponentCallback
import co.unit.un_components.compose.UNActivityComponent

@Composable
fun ActivityScreen() {
    UNActivityComponent(
        modifier = Modifier.fillMaxSize(),
        accountId = YOUR_ACCOUNT_ID,
        callbacks = { callback ->
            when (callback) {
                is UNActivityComponentCallback.OnLoad -> handleOnLoad(callback.onLoadResponse)
            }
        }
    )
}

Incoming Events:

By using the refresh() method, it's possible to to refresh the component data from a custom button. Important Note: one can use the refresh() only after unActivityComponent is loaded.

Fragment

// .......

unActivityComponent?.refresh()

Compose

import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.node.Ref
import androidx.compose.material.Button
import androidx.compose.material.Text
import co.unit.un_components.components.UNActivityComponent
import co.unit.un_components.compose.UNActivityComponent as UNActivityComposable

val activityRef = remember { Ref<UNActivityComponent>() }

UNActivityComposable(
    modifier = Modifier.fillMaxSize(),
    activityViewRef = activityRef,
    accountId = YOUR_ACCOUNT_ID,
    callbacks = { /* ... */ }
)

Button(onClick = { activityRef.value?.refresh() }) {
    Text("Refresh")
}

The additionalSettings parameter for UNActivityComponent has this attribute:

UNActivityViewSettingsInterface

Name	Type	Default Value	Description
hideFilterButton	Boolean	false	Hide the filter button.
hideTitle	Boolean	false	Hide the component title in case value is true.
hideBackToTop	Boolean	false	Hide back to top button in case value is true.
showDeclinedActivity	Boolean	false	Show declined activity in case value is true.
showCsvDownload	Boolean	false	Show a CSV download button in case value is true.
queryFilter	String	null	Query for filtering transactions and authorizations: Transactions, Authorizations.
paginationType	UNActivityComponentPaginationType	.InfiniteScroll	Defines how more content is loaded. Possible values: .infiniteScroll, .pagination
transactionsPerPage	Int	8 for pagination and 15 for infinite scroll.	Number of transactions to fetch on each page or scroll to bottom. Also acts as initial number of transactions to fetch

You can use UNActivityViewSettingsBuilder() to create an instance of the interface and define your additional settings.

val additionalSettings = UNActivityViewSettingsBuilder()
    .hideBackToTop(...)
    .hideFilterButton(...)
    .hideTitle(...)
    .showDeclinedActivity(...)
    .showCsvDownload(...)
    .queryFilter(...)
    .paginationType(...)
    .transactionsPerPage(...)

unActivityComponent = UnitComponentsSdk.manager.ui.views.getActivityComponent(
    accountId = YOUR_ACCOUNT_ID,
    additionalSettings = additionalSettings,
    theme = YOUR_THEME_URL,
    language = YOUR_LANGUAGE_URL
)

IOS SDK

Component name: UNActivityComponent

Configuration parameters:

Name	Type	Required	Description
accountId	String	YES	Unit account id. The account to show.
additionalSettings	UNActivityViewSettingsProtocol	NO	Advanced optional settings.
callbacks	UNActivityComponentCallbacks	NO	Callbacks to interact with the Activity component.
theme	String	NO	A URL that specifies the UI configuration.
language	String	NO	A URL that specifies the language configuration.

The callbacks parameter for UNActivityComponent is of the following type:

public typealias UNActivityComponentCallbacks = (_ callback: UNActivityComponentCallback) -> Void

The UNActivityComponentCallback is an enum that has the following callbacks that you can receive from an Activity component:

public enum UNActivityComponentCallbacks {
    case unitOnLoad(result: Result<UNActivityOnLoadResponse, UNComponentsError>)
}

To get the Activity Component view call the getActivityComponent method of UnitComponentsSDK.manager.ui.views.

Example:

class ActivityScreen: UIViewController {
    let unViews = UnitComponentsSDK.manager.ui.views

    fileprivate lazy var activityComponent: UNActivityView = {
        let activityComponent = unViews.getActivityComponent(accountId: accountId){ callback in
            switch callback {
                case .unitOnLoad(let result):
                    switch result {
                    case .success():
                        print("Successfully load Activity Component.")
                    case .failure(let error):
                        print("Failed to load ACHCredit component. Error details: \(error)")
                    }
                }
        }
    return activityComponent
}()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        view.addSubview(activityComponent)
        activityComponent.snp.makeConstraints { make in
            make.top.equalTo(view.safeAreaLayoutGuide.snp.top)
            make.bottom.equalTo(view.safeAreaLayoutGuide.snp.bottom)
            make.leading.trailing.equalToSuperview()
        }
    }
}

Incoming Events:

By using the refresh() method, it's possible to to refresh the component data from a custom button. Important Note: one can use the refresh() only after activityComponent is loaded.

Example:

activityComponent.refresh()

The additionalSettings parameter for UNActivityComponent is of the following type:

UNActivityViewSettingsProtocol:

Name	Type	Default Value	Description
hideFilterButton	Bool	false	Hide the filter button.
hideTitle	Bool	false	Hide the component title in case value is true.
hideBackToTop	Bool	false	Hide back to top button in case value is true.
queryFilter	String		Query for filtering transactions and authorizations: Transactions, Authorizations.
paginationType	UNActivityComponentPaginationType	.infiniteScroll	Defines how more content is loaded. Possible values: .infiniteScroll, .pagination
transactionsPerPage	Int	8 for pagination and 15 for infinite scroll	Number of transactions to fetch on each page or scroll to bottom. Also acts as initial number of transactions to fetch
showDeclinedActivity	Bool	false	Show declined activity tab including declined authorizations, rejected payments, and check deposits.
showCsvDownload	Bool	false	Show CSV download button for exporting transactions and authorizations.

You can use UNActivityViewSettingsBuilder to create an instance of the protocol and define your additional settings.

Example:

let additionalSettings = UNActivityViewSettingsBuilder()
    .hideFilterButton(true)
    .paginationType(.pagination)
    .transactionsPerPage(4)

let unViews = UnitComponentsSDK.manager.ui.views
let cardComponent = unViews.getActivityComponent(accountId: accountId, additionalSettings: additionalSettings)