react-native-tink-sdk/README.md

NPM package for wrapping Tink SDKs

# react-native-tink-sdk

This project contains the RN NPM package for Open Banking with Tink Link SDK and Tink's Money Manager SDK.

Current version of Tink Link SDK used: **2.7.0(Android), 3.0.0(iOS)**

Current version of Tink Money Manager SDK used: **1.1.8(Android), 2.0.4(iOS)**

Tink Link SDK will be used to connect to bank accounts for continous access - [Tink Transactions](https://docs.tink.com/resources/transactions/introduction-to-transactions)

Find the official method documentation here:

[Tink Link - Android](https://tink-ab.github.io/tink-link-android/-tink%20-link%20-android%20-s-d-k/com.tink.link.core.features.transactions/-tink-transactions/index.html)

[Tink Link - iOS](https://tink-ab.github.io/tink-link-ios/documentation/tinklink/tink/transactions/connectaccountsforcontinuousaccess(configuration:market:locale:authorizationcode:refreshableitems:financialservicessegments:financialinstitutionid:sessionid:inputprovider:inputusername:completion:))

[Money manager - Android](https://docs.tink.com/resources/money-manager#money-manager-android)

[Money manager - iOS](https://docs.tink.com/resources/money-manager#money-manager-ios)

## Installation

```sh
npm install react-native-tink-sdk
```

## Usage of Tink Link SDK

Step 1 and 2 are important for the deeplink configuration for the Tink Link SDK to redirect correctly to your application after finishing the account aggregation flow in external browser or bank app.

### Connect bank account

Below steps will help to connect your bank account for continuous access.

### Step 1 - Add ConnectAccountActivity in app's AndroidManifest.xml file.

Add ConnectAccountActivity to your application's AndroidManifest file like this:

```xml
<activity
    android:name="com.reactnativetink.activity.ConnectAccountActivity"
    android:exported="true"
    android:launchMode="singleInstance">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data
            android:host="wallet"
            android:scheme="pxsplus" />
    </intent-filter>
</activity>
```

### Step 2 - Add deeplink for iOS in your App's plist file.

Make sure to add this deeplink `pxsplus://wallet` in your application's plist file like this:

```plist
<array>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLName</key>
		<string>pxsplus</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>pxsplus</string>
		</array>
	</dict>
</array>
```

### Step 2 - Call the function
```js
import { connectAccount } from 'react-native-tink-sdk';

const result = await connectAccount(clientId, redirectUri, authorizationCode, market, locale);

```
where,

 - *clientId* - client ID retrieved from Tink Console.
 - *redirectUri* - configured in Tink Console - the page to which the end-user is redirected, along with the response parameters, when completing the flow.
 - *authorizationCode* - the authorization code generated using API's.
 - *market* - The market code for which providers should be listed.
 - *locale* - Locale to be used for end-user facing text.

 `connectAccount` will return the `credentialsId` in case of success and will return an object of type `TinkLinkError` from `react-native-tink-sdk` in case of error scenario. See [TinkLinkError](./src/models/TinkLink.ts)

### Update consent for a particular bank account

Below function can be used in case of updating consent in case your bank credential is expired or about to expire.

```js
import { updateConsent } from 'react-native-tink-sdk';

const result = await updateConsent(clientId, redirectUri, authorizationCode, credentialID);
 
```
where,

 - *clientId* - client ID retrieved from Tink Console.
 - *redirectUri* - configured in Tink Console - the page to which the end-user is redirected, along with the response parameters, when completing the flow.
 - *authorizationCode* - the authorization code generated using API's.
 - *credentialID* - credentialID is required to uniquely identify the bank and this can be obtained from the updateCredentials/renew consent actionable insight.

 `updateConsent` will return the `credentialsId` in case of success and will return an object of type `TinkLinkError` from `react-native-tink-sdk` in case of error scenario. See [TinkLinkError](./src/models/TinkLink.ts)

## Usage of Money manager SDK

### Step 1 - Initialize the SDK(Only for Android)

```js
import { initTink } from 'react-native-tink-sdk';

const result = await initTink(clientId);

```
where,

 - *clientId* - client ID retrieved from Tink Console.

#### Note:
`initTink` should be called only once. If Tink has already been initialized, it throws an IllegalStateException.


### Step 2 - Add the MoneyManagerFinanceOverview view

Currently this is available for Android and iOS. Due to certain issues found in Android, we recommended to use this only for iOS and for Android please use Step 3.

```js
import { MoneyManagerFinanceOverview } from 'react-native-tink-sdk';

 <MoneyManagerFinanceOverview
    style={{
        height: windowHeightOS,
        width: windowWidthOS,
    }}
    clientId={clientId}
    userAccessToken={userAccessToken}
    clientAccessToken={clientAccessToken}
    userId={userId}
    idHint={idHint}
    userPressedBack={() => {
        Alert.alert('React-Native event popup', 'Event triggered: userPressedBack');
    }}
    />
```
where,

 - *style* - width and height for the component needs to be passed. This will be taken effect in Andriod only.
                In iOS, the entire length and width will be taken.
 - *clientId* - client ID retrieved from Tink Console.
 - *accessToken* - Access token created with the help of authorization-grant, from the endpoint `oauth/token`.
 - *userPressedBack* - This callback method will be invoked when user press the back button. **Only for iOS**.

#### Events

To access event data, you will need to use `e.nativeEvent`. For example, `onPress={e => console.log(e.nativeEvent)}` will log the entire event object to your console.

| Event Name | Returns | Notes
|---|---|---|
| `userPressedBack` |  | Callback that is called when user click on back (arrow) button.

### Step 3 - Open the finance overview in Money manager

```js
import { showMoneyManager } from 'react-native-tink-sdk';

showMoneyManager(clientId, userAccessToken, appAccessToken, userId, idHint, actorClientId, scope, redirectUri).then((message) => {
        console.log(message)
        Alert.alert('Promise resolved', 'userPressedBack');
    }).catch((error) => {
        console.log(error)
    })

```
where,

 - *clientId* - client ID retrieved from Tink Console.
 - *userAccessToken* - User Access token created with the help of authorization-grant, from the endpoint `oauth/token`.
 - *appAccessToken* - App Access token from the endpoint `oauth/token`.
 - *userId* - Corresponding Tink user id.
 - *idHint* - idHint passed for corresponding user.
 - *actorClientId* - Actor client id used to uniquely identify the platform.
 - *scope* - App scope.
 - *redirectUri* - configured in Tink Console - the page to which the end-user is redirected, along with the response parameters, when completing the flow.


 The promise will be resolved when user press on back button on Financial overview.

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## ChangeLog

See the ChangeLog [here](CHANGELOG.md)

## Running tests

```sh
yarn run test
```
Make sure the code coverage is 90+% before committing the code!

## Running code quality check

```sh
yarn run tsc
yarn run lint
yarn run check_code:native
```
Make sure there are no flow errors before committing!

## Running the build

```sh
npm run build
```

## Publishing

```sh
npm publish
```

Make sure to run the build before publishing (the published code is in the lib folder)!

## Example App

To run the app see instructions [here](example/README.md)

## How to update translations for Budget manager SDK

The translations inside budget manager can be customized. If need to change any translations, you can find them in the below files:

### - Android
**EN**: [android/src/main/res/values/strings.xml](android/src/main/res/values/strings.xml)

**FR**: [android/src/main/res/values-fr/strings.xml](android/src/main/res/values-fr/strings.xml)

**NL**: [android/src/main/res/values-nl/strings.xml](android/src/main/res/values-nl/strings.xml)

**DE**: [android/src/main/res/values-de/strings.xml](android/src/main/res/values-de/strings.xml)

### - iOS
**EN**: [ios/Resources/en.lproj/TinkMoneyManagerUI.strings](ios/Resources/en.lproj/TinkMoneyManagerUI.strings)

**FR**: [ios/Resources/fr.lproj/TinkMoneyManagerUI.strings](ios/Resources/fr.lproj/TinkMoneyManagerUI.strings)

**DE**: [ios/Resources/de.lproj/TinkMoneyManagerUI.strings](ios/Resources/de.lproj/TinkMoneyManagerUI.strings)

**NL**: [ios/Resources/nl.lproj/TinkMoneyManagerUI.strings](ios/Resources/nl.lproj/TinkMoneyManagerUI.strings)

### - Tink reference doc for adding translations:

*Android* : https://github.com/tink-ab/tink-money-manager-android/blob/master/string-customization-guide.md

*iOS* : https://github.com/tink-ab/tink-money-manager-ios/blob/master/LOCALIZABLE_STRINGS.md