# UI Components

UIComponents library provides components such as **ListMenuFragment**, **InfoDialog**, **InputListFragment** and **NumPadDialog** which will be explained below.

#### Building The Project

In order to use UI Components, you have to migrate your Android project to AndroidX. In Android Studio, on top menu, click on Refactor and then **Migrate to AndroidX**, proceed to further steps.

***Download the zip file below and extract it under your project folder; MyApplication\app\libs***

{% file src="<https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FFg4f7o5uswX78FVbPvn7%2Fuicomponents_v1.0.18.aar?alt=media&token=09bc9c79-332d-477c-96e6-6a556b90ffca>" %}

### Changelog

| Detail                                                                                                                                     | Date       |
| ------------------------------------------------------------------------------------------------------------------------------------------ | ---------- |
| Added color and numpad screen for 330TR devices.                                                                                           | 02.05.2024 |
| Validation bug fixed when default value set on customInputFormat.                                                                          | 23.07.2024 |
| <p>Multi-conditional and multi-message added for customInputFormat. </p><p></p><p>Validate control updated  fragment on first call<br></p> | 05.08.2024 |
| Turkish character support added to QR.                                                                                                     | 02.09.2024 |
| Bug fix for 1000TR menu                                                                                                                    | 09.09.2024 |
| QrScreen330 updated.                                                                                                                       | 12.09.2024 |
| Multi Currency amount support added.                                                                                                       | 28.11.2024 |
| 1000TR menu change old type.                                                                                                               | 18.12.2024 |
| JPY Amount input upd.                                                                                                                      | 15.01.2025 |
| Info dialog button texts have been made configurable.                                                                                      | 12.05.2025 |
| `AmountNone` was added to hide the currency symbol in the amount input.                                                                    | 23.06.2025 |
| Adding a menu item without a listener has been fixed.                                                                                      | 28.07.2025 |
| Multiple button clicks have been prevented.                                                                                                | 02.03.2026 |

**Lib Update: 02.03.2026**

Place the **uicomponents-release.aar** library file into your project's "libs" folder and add it as dependency inside your app level build.gradle file like below and build your project in order to create build classes of library.

```java
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.aar'])
    ...
}
```

Minimum SDK version must be 25 or higher in your app level build.gradle file.

```java
defaultConfig {
        minSdkVersion 25
...
    }
```

#### App Theme

For creating all the apps identical, you have to set the colors and themes. Under your application ***res folder, values -> colors.xml*** copy and paste these resources.

```xml
<resources>
    <color name="colorPrimary">#5ea9db</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#5ea9db</color>
    <color name="translucent_black">#90000000</color>
    <color name="white">#FFFFFF</color>
    <color name="green">#00FF00</color>
    <color name="dark_gray">#212121</color>
    <color name="gray_black">#191919</color>
    <color name="black_overlay">#66000000</color>
    <color name="black">#000000</color>
    <color name="transparent_black">#a0000000</color>
    <color name="color_token">#45ABE0</color>
    <color name="blue_theme">#114CEE</color>
</resources>
```

Under your ***res -> values -> themes.xml file*** or ***res -> values -> themes -> themes.xml file*** copy and paste the theme resources.

```xml
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/dark_gray</item>
        <item name="colorPrimaryDark">@color/dark_gray</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="checkboxStyle">@style/AppTheme.DefaultCheckBoxStyle</item>
        <item name="android:textViewStyle">@style/AppTheme.DefaultTextStyle</item>
        <item name="buttonStyle">@style/AppTheme.DefaultButtonStyle</item>
        <item name="android:windowBackground">@color/black</item>
        <item name="android:windowAnimationStyle">@null</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.DefaultTextStyle" parent="android:Widget.TextView">
        <item name="android:fontFamily">@font/montserrat_regular</item>
    </style>
    <style name="AppTheme.DefaultCheckBoxStyle" parent="android:Widget.CompoundButton.CheckBox">
        <item name="android:fontFamily">@font/montserrat_regular</item>
    </style>
    <style name="AppTheme.DefaultButtonStyle" parent="android:Widget.Button">
        <item name="android:fontFamily">@font/montserrat_semibold</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

    <style name="EditTextTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorControlNormal">@android:color/white</item>
        <item name="colorControlActivated">@color/colorPrimary</item>
        <item name="colorControlHighlight">@color/colorPrimary</item>
    </style>

    <style name="HeaderBar">
        <item name="android:background">#303F9F</item>
    </style>

    <style name="FullscreenTheme" parent="AppTheme">
        <item name="android:actionBarStyle">@style/FullscreenActionBarStyle</item>
        <item name="android:windowActionBarOverlay">true</item>
        <item name="android:windowBackground">@null</item>
        <item name="metaButtonBarStyle">?android:attr/buttonBarStyle</item>
        <item name="metaButtonBarButtonStyle">?android:attr/buttonBarButtonStyle</item>
    </style>

    <style name="FullscreenActionBarStyle" parent="Widget.AppCompat.ActionBar">
        <item name="android:background">@color/black_overlay</item>
    </style>
</resources>
```

If your device is 330TR, you can use blue\_theme in colors for update the AppTheme's color. By default, it is dark gray.

Right click to your values folder and click to new value resource file, name it as ***attrs.xml***

***res -> values -> attrs.xml file***

```xml
<resources>
    <declare-styleable name="ButtonBarContainerTheme">
        <attr name="metaButtonBarStyle" format="reference" />
        <attr name="metaButtonBarButtonStyle" format="reference" />
    </declare-styleable>
</resources>
```

Finally you have to change the theme name under your ***AndroidManifest.xml*** file.

```xml
<application
       ...
       android:theme="@style/AppTheme">  <!-- With Actionbar -->
       <!-- OR --> 
       android:theme="@style/AppTheme.NoActionBar"> <!-- Token theme without Actionbar -->
        ...
</application>
```

After setting your theme, your activities have to look like this(empty activity);

#### ListMenuFragment

<div align="center"><figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FyEERmsEROhhm782oL0Hk%2FScreenshot%202024-03-20%20at%205.59.04%E2%80%AFPM.png?alt=media&#x26;token=91376313-1703-41a3-9565-157b916c2a7b" alt="" width="188"><figcaption><p>330TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FMxX5i7rj40jwPiKWbnUl%2FScreenshot%202024-03-21%20at%208.53.43%E2%80%AFAM.png?alt=media&#x26;token=ac46640b-f1ef-4445-a226-6d988cc91e23" alt="" width="216"><figcaption><p>400TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2Fvgawhw2plH2706CHgUXv%2FScreen%20Recording%202024-03-25%20at%2011.56.15.gif?alt=media&#x26;token=6c9fd577-a628-4f57-9503-1db49aa5179f" alt="" width="375"><figcaption><p>1000TR</p></figcaption></figure></div>

A fragment component which allows you to show menu items, listen menu item click events and create an automate menu tree process.

First, create your menu item class **by implementing IListMenuItem** interface or implement this interface from your existing data class which will be listed as menu items. Override implemented methods; **getName()**: Return the string that will be dislayed on menu item. **getSubMenuItemList()**: If a sub menu will be shown on menu item click, return list of your menu items, otherwise return null. **@Nullable MenuItemClickListener getClickListener()**: Each menu item's click listener seperately. **@Nullable IAuthenticator getAuthenticator()**: If a menu item's click event must be authorized, return an IAuthenticator object, then a pinpad screen will be shown when this menu item clicked. Authorize the password and menu item's click event will be executed. If authorization not necessary, return null for this method.

```
Note: Your menu items' click events will be called regardless of a sub menu will be shown or not.
```

**Example:**

```java
public class MenuItem implements IListMenuItem {
    private String mTitle;
    private List<IListMenuItem> subMenuItemList;
    private MenuItemClickListener mListener;
    private IAuthenticator mAuthenticator;
    private Object arg;

    public MenuItem(String title, MenuItemClickListener listener) {
        this(title, listener, null, null);
    }

    public MenuItem(String title, MenuItemClickListener listener, @Nullable IAuthenticator authenticator) {
        this(title, listener, null, authenticator);
    }

    public MenuItem(String title, List<IListMenuItem> subMenuItemList, @Nullable IAuthenticator authenticator) {
        this(title, null, subMenuItemList, authenticator);
    }

    public MenuItem(String title, @Nullable MenuItemClickListener listener, @Nullable List<IListMenuItem> subMenuItemList, @Nullable IAuthenticator authenticator) {
        this.mTitle = title;
        this.mListener = listener;
        this.subMenuItemList = subMenuItemList;
        this.mAuthenticator = authenticator;
    }

    @Override
    public String getName() {
        return mTitle;
    }

    public void setArg(Object arg) {
        this.arg = arg;
    }

    public Object getArg() {
        return arg;
    }

    @Nullable
    @Override
    public List<IListMenuItem> getSubMenuItemList() {
        return subMenuItemList;
    }

    @Nullable
    @Override
    public MenuItemClickListener getClickListener() {
        return mListener;
    }

    @Nullable
    @Override
    public IAuthenticator getAuthenticator() {
        return mAuthenticator;
    }
}
```

You can create a class named BaseActivity and use the ***addFragment***, ***replaceFragment***, ***removeFragment*** and also, you can use ***InfoDialog***'s with calling from the BaseActivity.

```java
public abstract class BaseActivity extends TimeOutActivity {
    /**
     * Returns time out value in seconds for activities which extend
     * @see TimeOutActivity
     * In case of any user interaction, timeout timer will be reset.
     *
     * If any activity will not have time out,
     * override this method from that activity and @return '0'.
     */
    @Override
    protected int getTimeOutSec() {
        return 60;
    }

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
    }

    protected void addFragment(@IdRes Integer resourceId, Fragment fragment, Boolean addToBackStack) {
        FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
        ft.add(resourceId, fragment);
        if (addToBackStack) {
            ft.addToBackStack("");
        }
        ft.commit();
    }

    protected void replaceFragment(@IdRes Integer resourceId, Fragment fragment, Boolean addToBackStack) {
        FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
        ft.replace(resourceId, fragment);
        if (addToBackStack) {
            ft.addToBackStack("");
        }
        ft.commit();
    }

    protected void removeFragment(Fragment fragment) {
        FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
        ft.remove(fragment);
        ft.commit();
    }
}
```

In your MainActivity (or another Activity class) you can list the menu items like this;

```java
public class MainActivity extends BaseActivity implements InfoDialogListener {

    private List<IListMenuItem> menuItems = new ArrayList<>();
    private WeakReference<Context> mContext;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        prepareData(); // Call the menu list item preparing method
        ListMenuFragment fragment = ListMenuFragment.newInstance(menuItems, "", false, null);
        addFragment(R.id.container, fragment, false);
    }

    public void prepareData() {

        menuItems.add(new MenuItem("Menu Item 1", (menuItem) -> {
            Toast.makeText(this, "Menu Item 1", Toast.LENGTH_LONG).show();
        }));

        menuItems.add(new MenuItem("Menu Item 2", (menuItem) -> {
            Toast.makeText(this, "Menu Item 1", Toast.LENGTH_LONG).show();
        }));

        menuItems.add(new MenuItem("Menu Item 3", new MenuItemClickListener<MenuItem>() {
            @Override
            public void onClick(MenuItem menuItem) {
                Toast.makeText(MainActivity.this, "Menu Item 3", Toast.LENGTH_LONG).show();
            }
        }));   
    }
}
```

Before runing your app you have to set the activity layout file, in your ***activity\_main.xml*** or another layout file which you are using.

```xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main"
    android:background="@color/dark_gray"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
```

#### ListMenuFragment - SubList

<div align="center"><figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FRKhIuFCnGQ3ZcfRqSAdT%2FScreenshot%202024-03-20%20at%205.59.56%E2%80%AFPM.png?alt=media&#x26;token=0431d71d-b209-48f5-9fc6-b807c4c19b7e" alt="" width="188"><figcaption><p>330TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2F6l5QUEM5zwFyWnW6lrth%2FScreenshot%202024-03-21%20at%208.53.56%E2%80%AFAM.png?alt=media&#x26;token=159be943-fb8b-4f46-a32f-dc1f670035bd" alt="" width="216"><figcaption><p>400TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FlpAoSnMaBPHlHElvSvbC%2FScreenshot%202024-03-25%20at%2011.51.33.png?alt=media&#x26;token=4177ba2b-6d6a-4063-b2d5-0e0c12746218" alt="" width="375"><figcaption><p>1000TR</p></figcaption></figure></div>

With help of clicking to a menu item you can update the fragment and create a ***sub menu*** with sub menu items. Under the ***prepareData()*** which we created previously, you have to add another list of sub menu items.

```java
 public void prepareData() {

        List<IListMenuItem> subList1 = new ArrayList<>(); // Creating a list for your sub menu items
        /* Your Sub List Items*/
        subList1.add(new MenuItem("MenuItem 1", (menuItem) -> {

            Toast.makeText(this,"Sub Menu 1", Toast.LENGTH_LONG).show();

        }, null));

        subList1.add(new MenuItem("MenuItem 2", (menuItem) -> {

            Toast.makeText(this,"Sub Menu 2", Toast.LENGTH_LONG).show();

        }, null));
        subList1.add(new MenuItem("MenuItem 3", (menuItem) -> {

            Toast.makeText(this,"Sub Menu 3", Toast.LENGTH_LONG).show();

        }, null));

        menuItems.add(new MenuItem("Sub Menu", subList1, null)); // The menu item in to the List Menu Fragment
}
```

#### ConfirmationDialog

<div><figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FrFuLgRmNvTyML5xYdcJU%2FScreenshot%202024-03-20%20at%206.00.39%E2%80%AFPM.png?alt=media&#x26;token=20d4b8c4-3bd5-4f2d-9ead-c22e50f7cadd" alt="" width="171"><figcaption><p>330TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FRlVI70kWrVMcaT8ENpqL%2FScreenshot%202024-03-21%20at%208.54.16%E2%80%AFAM.png?alt=media&#x26;token=d2cc88bc-db2c-4ff9-8382-f40b1d6651fa" alt="" width="216"><figcaption><p>400TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FUkQIxJj1MjzMk9UoOIkl%2FScreenshot%202024-03-25%20at%2011.12.11.png?alt=media&#x26;token=8ab99ceb-1e74-4a04-9c50-b3923de4fef4" alt="" width="375"><figcaption><p>1000TR</p></figcaption></figure></div>

At the previous example; we created a BaseActivity and implemented it from MainActivity, you can add your Confirmation Dialog methods to there.

<mark style="color:red;">NOTE:</mark> Modifications to the buttonOkName and buttonCancelName apply only to X30TR and do not affect models 400 or 1000.

```java
    /**
     * Shows a dialog to the user which asks for a confirmation.
     * Dialog will be dismissed automatically when user taps on to confirm/cancel button.
     * See {@link InfoDialog#newInstance(InfoDialog.InfoType, String, String, InfoDialog.InfoDialogButtons, int, InfoDialogListener)}
     */
    protected InfoDialog showConfirmationDialog(InfoDialog.InfoType type, String title, String info, InfoDialog.InfoDialogButtons buttons, int arg, InfoDialogListener listener) {
        InfoDialog dialog = InfoDialog.newInstance(type, title, info, buttons, arg, listener, "buttonOkName", "buttonCancelName");
        dialog.show(getSupportFragmentManager(), "");
        return dialog;
    }
```

Confirmation Dialog can have various information types. The base code to call a Confirmation Dialog is;

```java
showConfirmationDialog(InfoDialog.InfoType.Warning,"Warning", "Confirmation: Warning", InfoDialog.InfoDialogButtons.Both, 99, MainActivity.this)));
```

<div><figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2Fg65bm5kyn3T1GQxRUjrd%2FScreenshot%202024-03-20%20at%206.02.24%E2%80%AFPM.png?alt=media&#x26;token=3bf91b68-e7c1-4439-afcd-bd5c56b5dcdf" alt="" width="171"><figcaption><p>330TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FQcMJEIhSp9tFPW0N7uVU%2FScreenshot%202024-03-21%20at%208.54.26%E2%80%AFAM.png?alt=media&#x26;token=6383ca9e-e624-4a1d-adb3-2ddb03b84fc0" alt="" width="216"><figcaption><p>400TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FMXClw3XyVHhxIvmuSIGI%2FScreenshot%202024-03-25%20at%2011.14.22.png?alt=media&#x26;token=972d244b-dd29-46b9-b0ae-9899c0d788a5" alt="" width="375"><figcaption><p>1000TR</p></figcaption></figure></div>

For this example we have a warning info type. After the ***InfoType.*** you can add ***Uploading***, ***QR***, ***Progress***, ***Processing***, ***None***, ***Info***, ***Error***, ***Downloading***, ***Declined***, ***Connecting***, ***Confirmed***. Also, you can cahnge the confirmation type.

After the ***InfoDialog.InfoDialogButtons.*** you can add ***Both***, ***Confirm***, ***Cancel*** for restricting the buttons.

Implementing the confirm and cancel actions.

```java
    @Override
    public void confirmed(int arg) {
        if (arg == 99) {
              //  Do something else... 
        }
        //else if (arg == ***) { Do something else... }
    }

    @Override
    public void canceled(int arg) {
        if (arg == 99) {
             //  Do something else... 
        }
        //else if (arg == ***) { Do something else... }
    }
```

#### InfoDialog

InfoDialog component to show the user information about the process.

InfoDialog's have same Dialog types ***Uploading***, ***QR***, ***Progress***, ***Processing***, ***None***, ***Info***, ***Error***, ***Downloading***, ***Declined***, ***Connecting***, ***Confirmed*** and has a ***isCancelable*** selection ***true*** or ***false***.

<div><figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2F0Uu6wdalM0B8fDEAS00K%2FScreenshot%202024-03-20%20at%206.03.52%E2%80%AFPM.png?alt=media&#x26;token=e1353be7-8748-4920-9fe7-3ed33d37de6c" alt="" width="171"><figcaption><p>330TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FkaJCIfxB6UfaGVOAExs3%2FScreenshot%202024-03-21%20at%208.54.45%E2%80%AFAM.png?alt=media&#x26;token=3b54a57d-f3bf-422b-ba80-6563b49d61b5" alt="" width="216"><figcaption><p>400TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FoH82cSOD44K2ZDPcyrsm%2Fconfirmedinfo.png?alt=media&#x26;token=9180f31d-d33c-4e78-b0e5-d330b74e9e48" alt="" width="375"><figcaption><p>1000TR</p></figcaption></figure></div>

Usage is like below(you can place the code in the BaseActivity.java):

```java
    /**
     * Shows a dialog to the user which informs the user about current progress.
     * See {@link InfoDialog#newInstance(InfoDialog.InfoType, String, boolean)}
     * Dialog can dismissed by calling .dismiss() method of the fragment instance returned from this method.
     */
    protected InfoDialog showInfoDialog(InfoDialog.InfoType type, String text, boolean isCancelable) {
        InfoDialog fragment = InfoDialog.newInstance(type, text, isCancelable);
        fragment.show(getSupportFragmentManager(), "");
        return fragment;
    }

    /**
     * Shows a dialog to the user which asks for a confirmation.
     * Dialog will be dismissed automatically when user taps on to confirm/cancel button.
     * See {@link InfoDialog#newInstance(InfoDialog.InfoType, String, String, InfoDialog.InfoDialogButtons, int, InfoDialogListener)}
     */
    protected InfoDialog showConfirmationDialog(InfoDialog.InfoType type, String title, String info, InfoDialog.InfoDialogButtons buttons, int arg, InfoDialogListener listener) {
        InfoDialog dialog = InfoDialog.newInstance(type, title, info, buttons, arg, listener);
        dialog.show(getSupportFragmentManager(), "");
        return dialog;
    }
```

Calling the InfoDialog;

```java
showInfoDialog(InfoDialog.InfoType.Confirmed, "Confirmed", true);
```

***Updating The InfoDialog***; In the InfoDialog library there is an ***update*** method for changing the existing InfoDialog.

Example usage of the update dialog;

```java
private void printSlip() {
        if (response == true) {
            print(CustomerSlip);
            InfoDialog printDialog = UIDialog.showConfirmationDialog((AppCompatActivity) mContext.get(), InfoDialog.InfoType.Info, "Merchant slip:", "Merchant slip will be printed", InfoDialog.InfoDialogButtons.Confirm, 0, new InfoDialogListener() {
                @Override
                public void confirmed(int i) {
                    isConfirmedMerchantSlip = true;
                }
                @Override
                public void canceled(int i) {}
            });
            while (!isConfirmedMerchantSlip) {
                sleep(); // Sleep for 500ms
                TimeCounter++; // Count the sleep
                if(voidTimeCounter > 20){ isConfirmedMerchantSlip = true; } // If merchant waits for 10 seconds print the merchant slip
            }
            printDialog.update(InfoDialog.InfoType.Progress,"Printing The Merchant Slip");
            print(MerchantSlip);
            printDialog.update(InfoDialog.InfoType.Confirmed, "Merchant Slip Printed");
        }
        else {
            print(FailSlip);
        }
    }
```

**QR Code**

<div align="center"><figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2Fo1vJfbslLPb9k5LYXZ0j%2FScreenshot%202024-03-20%20at%206.05.06%E2%80%AFPM.png?alt=media&#x26;token=c5d15ba6-e5a0-4075-afe1-660f0be8815c" alt="" width="188"><figcaption><p>330TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2Fy0XOEYiPDQl4jCZD9DwR%2FScreenshot%202024-03-21%20at%208.54.58%E2%80%AFAM.png?alt=media&#x26;token=9b9558dc-4599-47a5-be43-9bf6feef839d" alt="" width="216"><figcaption><p>400TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2F1dr7eUNHmx7DnlnccjGB%2FScreen%20Recording%202024-03-25%20at%2011.59.10%20(1).gif?alt=media&#x26;token=96a8d002-2869-4957-894c-9d0e1baf8bab" alt="" width="375"><figcaption><p>1000TR</p></figcaption></figure></div>

***Showing a QR Code on the InfoDialog***; In the InfoDialog library there is a ***setQr*** method for showing a QR code on the existing InfoDialog.

For a QR Code payment first of all you have to use the google.zxing library. Implementation of the library;

```java
    implementation 'com.google.zxing:core:3.2.0'
    implementation 'com.journeyapps:zxing-android-embedded:3.2.0@aar'
```

Add the QR Payment object to the ReadCard Method, detailed explanation; [Card Service](https://developer.tokeninc.com/pos-projects/token%20integrations/cardservice)

```java
obj.put("qrPay", 1);
```

***Sample QR Request Method***

```java
protected void QrSale() {
        InfoDialog dialog = showInfoDialog(InfoDialog.InfoType.Progress, "Please Wait", true);
        // Request to Show a QR Code ->
        cardServiceBinding.showQR("PLEASE READ THE QR CODE", StringHelper.getAmount(amount), qrString); // Shows QR on the back screen
        dialog.setQr(qrString, "Waiting For The QR Code To Read"); // Shows the same QR on Info Dialog
        // Request a QR Response ->

            /*
            * Your QR Response
            */

        dialog.setDismissedListener(() -> { // This method listens for the dismiss of the QR Dialog
            // You can call your QR Payment Cancel method here
        });
    } 
```

#### InputListFragment

<div><figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2Fg1nT8gKGq30nyPw27rC8%2FScreenshot%202024-03-20%20at%205.03.36%E2%80%AFPM.png?alt=media&#x26;token=c289be57-ebfb-41ff-bc9d-f5d886b08a23" alt="" width="188"><figcaption><p>330TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FYwkpvgdEvvTRn2HJRvG4%2FScreenshot%202024-03-21%20at%208.55.11%E2%80%AFAM.png?alt=media&#x26;token=30daff99-577c-4015-ab52-fa176dbe57f0" alt="" width="216"><figcaption><p>400TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2F5I9P78SZ2tOedyfNkTpT%2FScreen-Recording-2024-03-25-at-12.09.43.gif?alt=media&#x26;token=1fd4fd86-7dce-44dc-8d15-f995f87aabdb" alt="" width="375"><figcaption><p>1000TR</p></figcaption></figure></div>

You can create an input list by creating a **CustomInputFormat** list and setting it to an InputListFragment.

```java
    /**
     *
     * @param hint: Title to be shown above edittext.
     * @param type: Input format for edittext.
     * @param maxLength: Maximum length for input string. If null, maximum length will not be set.
     * @param invalidMessage: Warning message to be shown under edit text in case input is not valid.
     * @param validator: An object that is a type of InputValidator. Required if related input must be validated.
     *                 If validator is null, input will always be valid no matter if it's empty or not.
     */
    public CustomInputFormat(String hint, EditTextInputType type, @Nullable Integer maxLength,
                             @Nullable String invalidMessage, @Nullable InputValidator validator)
```

Create your CustomInputFormat list like below:

```java
        List<CustomInputFormat> inputList = new ArrayList<>();

        inputList.add(new CustomInputFormat("Card Number", EditTextInputType.CreditCardNumber, null, "Invalid card number!", validator));
        inputList.add(new CustomInputFormat("Expire Date", EditTextInputType.ExpiryDate, null, null, null));
        inputList.add(new CustomInputFormat("CVV", EditTextInputType.CVV, null, null, null));
        inputList.add(new CustomInputFormat("Amount", EditTextInputType.AmountDot, null, null, null)); // For 1000TR Keyboard, amount input will be 1,00 for 1TL. text.replace(",", "") for 100.
```

You can set default text to inputs by setting text to CustomInputFormat

```java
CustomInputFormat input = new CustomInputFormat("IP", EditTextInputType.IpAddress, null, null, null);
input.setText("123.456.789.1");
```

If you want special validator for multi conditional input you can use example code block. \
This code block allows instant multi-conditional and message serving for the validator:

```java
            InputValidator tempValidator = new InputValidator() {
                @Override
                public boolean validate(CustomInputFormat customInputFormat) {
                    if(customInputFormat.getText().length() == 2){
                        customInputFormat.setInvalidMessage("INPUT LEN SHOULD NOT BE 2");
                        return customInputFormat.getText().length() == 6;
                    }else if(customInputFormat.getText().length() == 3){
                        customInputFormat.setInvalidMessage("INPUT LEN SHOULD NOT BE 3");
                        return customInputFormat.getText().length() == 6;
                    }else{
                        customInputFormat.setInvalidMessage(getString(R.string.auth_code_invalid_six_digit));
                        return customInputFormat.getText().length() == 6;
                    }
                }
            };
            inputAuthCode = new CustomInputFormat(getString(R.string.return_auth_code), EditTextInputType.Text, 6, getString(R.string.auth_code_invalid_six_digit),
                    tempValidator);


            inputList.add(inputAuthCode);
```

Pass your CustomInputFormat list to InputListFragment constructor method and add your fragment:

```java
        InputListFragment fragment = InputListFragment.newInstance(inputList);
        addFragment(R.id.container, fragment, true);

        //addFragment method should be like:
        protected void addFragment(@IdRes Integer resourceId, Fragment fragment, Boolean addToBackStack) {
            FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
            ft.add(resourceId, fragment);
            if (addToBackStack) {
                ft.addToBackStack("");
            }
            ft.commit();
        }
```

You can check if all fields are valid or not by calling isValid() method of fragment:

```java
    Boolean inputsValid =  fragment.isValid();
```

If any of the fields has an invalid input, isValid() method will return "false", if all field inputs are valid, it will return "true".

After validating the inputs, you can get the input list by calling getInputList() method which will return list of input strings in order:

```java
    List<String> inputList = fragment.getInputList();
```

If you activate the Input list fragment on another fragment or activity and want to return to the previous activity, you have to set the ***addToBackStack*** ***false***;

```java
addFragment(R.id.container, fragment, false);
```

#### NumPadDialog

Numeric PIN input dialog which is shown automatically if a ListMenu item has authenticator, or you can use it independently like below:

```java
NumPadDialog dialog = NumPadDialog.newInstance(new NumPadListener() {
            @Override
            public void enter(String pin) {
                    //Pin entry callback
            }

            @Override
            public void onCanceled() {
                    //Numpad canceled callback
            }
        }, "Please enter PIN", 8); /* Maximum pin length:8, change the integer 8 for the length you want */
        dialog.show(getSupportFragmentManager(), "numpad");
```

\ <br>

<div><figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FET3uTKvFeb1ThazBKhjf%2FScreenshot%202024-05-02%20at%2012.51.19.png?alt=media&#x26;token=963f5b61-6b3b-4d9b-9c9e-481365258e8d" alt="" width="188"><figcaption><p>400TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2F1mrGh4Fd5K3F7mO1D2TY%2FScreenshot%202024-05-02%20at%2012.47.36.png?alt=media&#x26;token=bd48b9b8-2ad3-4045-9786-2804defb26cb" alt="" width="188"><figcaption><p>330TR</p></figcaption></figure></div>

#### Adding Visual Details to Your App

Your app theme has a harmony but also UIComponents Library gives you permission to customize your app in a limit. You can add your logo and titles to the fragments of your app, you can use backButton's or Android navigation buttons.

Add your my\_logo.png file under the res -> drawable folder and call as R.drawable.my\_logo.png

Under your Activity.java file, inside the onCreate method you have to create a fragment.

```java
ListMenuFragment fragment = ListMenuFragment.newInstance(menuItems, "POS Operations", false, R.drawable.token_logo); //false for no back button
        addFragment(R.id.container, fragment, false); 
```

```java
InputListFragment fragment = InputListFragment.newInstance(inputList);
        addFragment(R.id.container, fragment, false); // If you want to go back to the previous activity; set addToBackStack false
        fragment.setActionLayout("Input List", true, R.drawable.token_logo); // true for hasBackButton
```

\
\
\
\ <br>

#### Info Dialog - Dialog Types

Dialog types: ***Confirmed***, ***Warning***, ***Error***, ***Info***, ***Declined***, ***Connecting***, ***Downloading***, ***Uploading***, ***Processing***, ***Progress***, ***None***

<div><figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2F0Uu6wdalM0B8fDEAS00K%2FScreenshot%202024-03-20%20at%206.03.52%E2%80%AFPM.png?alt=media&#x26;token=e1353be7-8748-4920-9fe7-3ed33d37de6c" alt="" width="341"><figcaption><p>330TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FnCfvlJWrtYBlQWvGg6pM%2FScreenshot%202024-03-20%20at%206.19.22%E2%80%AFPM.png?alt=media&#x26;token=bb88d6e4-f6b5-428d-ac94-bdd9762832c8" alt="" width="341"><figcaption><p>330TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2Fkx3Vlf734bKNmuezCpYd%2FScreenshot%202024-03-20%20at%206.19.29%E2%80%AFPM.png?alt=media&#x26;token=cea5b196-cfad-47fd-87e4-d2ead9da8ea6" alt="" width="341"><figcaption><p>330TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2F0Av9xqwFPTQ1ljudjEAF%2FScreenshot%202024-03-20%20at%206.19.35%E2%80%AFPM.png?alt=media&#x26;token=81a02d7c-1895-4a09-9924-1b9f51d4a723" alt="" width="341"><figcaption><p>330TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FpwpphWls2D2e1umnvrVE%2FScreenshot%202024-03-20%20at%206.19.47%E2%80%AFPM.png?alt=media&#x26;token=94c79ef5-58a0-4a14-b62b-7476d3c97feb" alt="" width="341"><figcaption><p>330TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FFqt36FKtaaKb0F2ZPWxk%2FScreenshot%202024-03-20%20at%206.20.28%E2%80%AFPM.png?alt=media&#x26;token=599cec11-0fc2-44e9-b8d5-66e570d7804b" alt="" width="362"><figcaption><p>330TR</p></figcaption></figure></div>

####

<div><figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2Fg2FYZ7Ebp78RFHlMfcDO%2FScreenshot%202024-03-21%20at%208.55.34%E2%80%AFAM.png?alt=media&#x26;token=cab92307-ea28-4b5f-a8b0-cab1441bf483" alt="" width="108"><figcaption><p>400TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2Fw4KpT4JrRCALc2ejZZeQ%2FScreenshot%202024-03-21%20at%208.55.48%E2%80%AFAM.png?alt=media&#x26;token=26dadc25-f1fe-41aa-a715-03f2d3779b93" alt="" width="108"><figcaption><p>400TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FQkAnBYF9Fbd2kAgdCKHR%2FScreenshot%202024-03-21%20at%208.55.59%E2%80%AFAM.png?alt=media&#x26;token=d48b508d-c96e-40f8-ad1f-bff06346f023" alt="" width="108"><figcaption><p>400TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FtiSqIsx4Mx1CjXTWG6KF%2FScreenshot%202024-03-21%20at%208.56.10%E2%80%AFAM.png?alt=media&#x26;token=44edfa6b-d548-4967-a0d3-3a516b6b744e" alt="" width="108"><figcaption><p>400TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FLO1YxnpQfnJ0SsjJzJmK%2FScreenshot%202024-03-21%20at%208.56.17%E2%80%AFAM.png?alt=media&#x26;token=44ee78ea-c0c0-4c9e-89bf-8e7e32512c8d" alt="" width="108"><figcaption><p>400TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FkR2xGuxB9GIPhUaYzKAP%2FScreenshot%202024-03-21%20at%208.56.24%E2%80%AFAM.png?alt=media&#x26;token=5fa123ab-cdfe-446f-9095-e21863a0f6d8" alt="" width="108"><figcaption><p>400TR</p></figcaption></figure></div>

<div><figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FoH82cSOD44K2ZDPcyrsm%2Fconfirmedinfo.png?alt=media&#x26;token=9180f31d-d33c-4e78-b0e5-d330b74e9e48" alt="" width="188"><figcaption><p>1000TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2Fx6VioPvtGD5g70Uq8o0W%2Ferrorinfo.png?alt=media&#x26;token=dceb3093-4480-4888-b669-6c23fe16d459" alt="" width="188"><figcaption><p>1000TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FisHeCb7tQv2EP5wQXGp5%2Finfoinfo.png?alt=media&#x26;token=cc33cc2b-3115-410f-a424-986a9a13dbea" alt="" width="188"><figcaption><p>1000TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2F2ocHOQFKbXq06jC8vAE8%2Fdeclinedinfo.png?alt=media&#x26;token=c9681216-94ac-4568-889d-b42e1823c2ab" alt="" width="188"><figcaption><p>1000TR</p></figcaption></figure></div>

<div><figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FC7rXWQiNY7j5kThN1GUu%2Fconnecting.gif?alt=media&#x26;token=b37c4430-fad5-4a1f-8e2d-5727c3aec1b2" alt="" width="375"><figcaption><p>1000TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FfAg1EVDl9I7IEf1k6lNF%2Fdownloading.gif?alt=media&#x26;token=ba046111-8f0c-415e-8d75-47ab3b822c75" alt="" width="375"><figcaption><p>1000TR</p></figcaption></figure></div>

#### Confirmation Dialog - Dialog Types

Dialog types: ***Confirmed***, ***Warning***, ***Error***, ***Info***, ***Declined***, ***Connecting***, ***Downloading***, ***Uploading***, ***Processing***, ***Progress***, ***None***

<div><figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FHrxzPO08nyECATZuSHOv%2FScreenshot%202024-03-20%20at%207.01.41%E2%80%AFPM.png?alt=media&#x26;token=91ae3540-a0ab-4004-aec2-5ad3228e9b07" alt="" width="524"><figcaption><p>330TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FKr9qNsu1iKVoXEDgQpLh%2FScreenshot%202024-03-20%20at%207.01.49%E2%80%AFPM.png?alt=media&#x26;token=d4317fd4-f9b7-4cbb-9ab7-42fe2e214c70" alt="" width="524"><figcaption><p>330TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2F0eylWi40WYBl03n0Vv8f%2FScreenshot%202024-03-20%20at%207.01.58%E2%80%AFPM.png?alt=media&#x26;token=e4185854-fed8-4233-b2c6-379ff1b84999" alt="" width="524"><figcaption><p>330TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2Fgy27i6B4Mp2ryGTVxQKp%2FScreenshot%202024-03-20%20at%207.02.15%E2%80%AFPM.png?alt=media&#x26;token=a10a49de-4398-47f7-8216-a5d393dfe702" alt="" width="524"><figcaption><p>330TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FGq6C3jbVQILUceTtEnAu%2FScreenshot%202024-03-20%20at%207.02.25%E2%80%AFPM.png?alt=media&#x26;token=68fd3054-3250-4b99-99ac-43c0eb69ae34" alt="" width="524"><figcaption><p>330TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2Fuj96nmNavnzZPOsnwr22%2FScreenshot%202024-03-20%20at%207.02.47%E2%80%AFPM.png?alt=media&#x26;token=a02ef3dd-4568-4a02-88da-08592675dd10" alt="" width="524"><figcaption><p>330TR</p></figcaption></figure></div>

<div><figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FLQmZgOj9vpUSX9IbwcDE%2FScreenshot%202024-03-21%20at%208.56.38%E2%80%AFAM.png?alt=media&#x26;token=89e7943a-9763-468b-b3bc-1ce3023e14cb" alt=""><figcaption><p>400TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2Fa5cIGygj6uUN5U6a8xw9%2FScreenshot%202024-03-21%20at%208.56.46%E2%80%AFAM.png?alt=media&#x26;token=450c7be7-98db-4f70-9c05-516b2cca84e3" alt=""><figcaption><p>400TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FGKuvZ0XYfIIPu4WkXxYo%2FScreenshot%202024-03-21%20at%208.56.53%E2%80%AFAM.png?alt=media&#x26;token=69eafddf-5da6-4c85-b95d-0fb04e1e121c" alt=""><figcaption><p>400TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FVwX65rBct0NXeV1M2rPc%2FScreenshot%202024-03-21%20at%209.09.06%E2%80%AFAM.png?alt=media&#x26;token=42791309-c4f6-49f8-9c1f-a297db20a3e4" alt=""><figcaption><p>400TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2F3ziETPL9xE4HzavzvuHo%2FScreenshot%202024-03-21%20at%208.57.06%E2%80%AFAM.png?alt=media&#x26;token=245765c5-c741-4dcc-a478-f15faabddcce" alt=""><figcaption><p>400TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2Fl0r3ayc3conVjcNGSm74%2FScreenshot%202024-03-21%20at%208.57.11%E2%80%AFAM.png?alt=media&#x26;token=47844eb8-aaf6-426a-b7b4-6660d3fc7639" alt=""><figcaption><p>400TR</p></figcaption></figure></div>

<div><figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FXL2nLKjOpDlzbAgdfxC3%2FScreenshot%202024-03-25%20at%2012.25.17.png?alt=media&#x26;token=60b19e83-a6c0-45b5-9250-10fc0b5513e8" alt="" width="188"><figcaption><p>1000TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2F9WMILMSTNn2rxhjNupTx%2FScreenshot%202024-03-25%20at%2012.25.30.png?alt=media&#x26;token=4aaabf76-757a-4cbd-8911-205dd92bcfce" alt="" width="188"><figcaption><p>1000TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2F5LpVCHytrdbXOw7PDwh1%2FScreenshot%202024-03-25%20at%2012.25.39.png?alt=media&#x26;token=9b203c0d-88d1-4666-bd4c-cdf385d76f7d" alt="" width="188"><figcaption><p>1000TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2FtOc1MvPBFK0u1RALeYAa%2FScreenshot%202024-03-25%20at%2012.26.05.png?alt=media&#x26;token=37785188-8001-441d-8fbc-3adbb527e0c9" alt="" width="188"><figcaption><p>1000TR</p></figcaption></figure></div>

<div><figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2F58q5O8jAxWxP6nF5EMEq%2FCONNECTINGconfirmation.gif?alt=media&#x26;token=b6084917-724b-4c5a-81ca-1d81037d4e50" alt="" width="375"><figcaption><p>1000TR</p></figcaption></figure> <figure><img src="https://3604734571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPaz8tFKqEd6volXC5G4B%2Fuploads%2Frr1ODwvxZyz65TGbJRzX%2FScreen-Recording-2024-03-25-at-12.26.37.gif?alt=media&#x26;token=65f3aceb-c06a-4b97-a532-c9cfc638af83" alt="" width="375"><figcaption><p>1000TR</p></figcaption></figure></div>