Activity

The 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.

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"
></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'.

Events:

Coming soon

React Native SDK

UNActivityComponent props:

Name	Type	Required	Description
customerToken	string	YES	A Unit Customer token.
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: infiniteScroll (default), 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
onLoad	(response: UNOnLoadResponse<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}
      customerToken={/*Customer token here*/}
      accountId={'1105561'}
      onLoad={(response: UNOnLoadResponse<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:

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.LinearLayout
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.UNActivityView

class ActivityFragment : Fragment(){
    override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {

        private var unActivityComponent: UNActivityComponent? = null

        unActivityComponent = UnitComponentsSdk.manager.ui.views.getActivityComponent(
            accountId = YOUR_ACCOUNT_ID,
            theme = YOUR_THEME_URL,
            language = YOUR_LANGUAGE_URL
        ) { callback ->
            when(callback) {
                is UNActivityComponentCallback.OnLoad -> handleOnLoad(callback.onLoadResponse)
            }
        }

        val fragmentLayout = inflater.inflate(R.layout.FILE_NAME, container, false)
        childFragmentManager.beginTransaction()
            .replace(R.id.CONTAINER_NAME, unActivityComponent as Fragment)
            .commitNow()
        return fragmentLayout
    }
    ...
    // Events handlers
    ...
}

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.

// .......

unActivityComponent?.refresh()

The additionalSettings parameter for UNCardComponent has this attribute:

UNBookPaymentViewSettingsInterface

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.
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(...)
    .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<Void, UNError>)
}

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

Example:

class ActivityScreen: UIViewController {
    let unViews = UnitSDK.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

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 = UnitSDK.manager.ui.views
let cardComponent = unViews.getActivityComponent(accountId: accountId, additionalSettings: additionalSettings)