# Mobile UI Composition

READ!

https://prismlibrary.com/docs/event-aggregator.html

## Requirements

* Navigation menus builds by configuration.
* Navigation menus supports parameters (ex: navigation menu for specific fx account)
* Pages are composition of stacked components.
* Page composition configuration comes from configuration services.
* Components listen for changes among themselves.
* Transactions flow path comes from backend.

## Architecture

* Component interaction is provided with the event aggregation pattern.
* All pages and components subscribe to the event bus as observers and publishes their internal event.
* All pages are initialized with a key
* Keys are always a guid type.
* Keys are used as transaction IDs for transaction page navigations.
* The key is sent as the **X-Request-Id** header for http calls.


## DI Injections

All object has default injections in solution

* **IEventAggregator**: To subscribe to all events in the app and stream the component's own events
* **ISession**: Provides the component with information about application, device, and user information
* **IServiceClient**: HttpClient that takes care of cross cutting concerns like http headers, logging, authorization token etc.
* **IHub**: Provides active SignalR channel provider for asynchronous communication with client
* **INavigation**: Responsible for navigation pages, page history management, workflow interaction

## Configurations

### Component Configuration

#### Configuration

{
  "components": [
    {
      "name": "account-slider",
      "class": {
        "tr-TR": "account_slider_component_tr",
        "en-EN": "account_slider_component_en"
      }
    },
    {
      "name": "overdraft-info",
      "class": {
        "tr-TR": "account_overdraft_info_component_tr",
        "en-EN": "account_overdraft_info_component_en"
      }
    },
    {
      "name": "account-summary",
      "class": {
        "tr-TR": "account_summary_component_tr",
        "en-EN": "account_summary_component_en"
      }
    },
    {
      "name": "last-transactions",
      "class": {
        "tr-TR": "last_transactions_component_tr",
        "en-EN": "last_transactions_component_en"
      }
    },
    {
      "name": "sub-navigation",
      "class": {
        "tr-TR": "sub_navigation_component_tr",
        "en-EN": "sub_navigation_component_en"
      }
    }
  ]
}

### Navigation Configuration

#### Configuration

{
  "navigation": [
    {
      "name": "root",
      "menu": [
        {
          "type": "page",
          "page": "account-info",
          "active": true,
          "new": false,
          "promoted": false,
          "icon": "class::icons:account_flag",
          "title": {
            "tr-TR": "Hesaplar",
            "en-EN": "Account"
          }
        },
        {
          "type": "divider"
        },
        {
          "type": "page",
          "page": "payments-home",
          "active": true,
          "new": true,
          "promoted": false,
          "icon": "class::icons:transfer_money",
          "title": {
            "tr-TR": "Odemeler",
            "en-EN": "Payments"
          }
        }
      ]
    },
      {
      "name": "account_sub",
      "menu": [
        {
          "type": "page",
          "page": "fx-buy",
          "active": true,
          "new": false,
          "promoted": false,
          "icon": "class::icons:fx_buy",
          "title": {
            "tr-TR": "Doviz Al",
            "en-EN": "FX Buy"
          },
          "parameter-maps": [
            {
              "key": "source_account"
            }
          ]
        },
        {
          "type": "divider"
        },
        {
          "type": "page",
          "page": "account-transaction",
          "active": true,
          "new": true,
          "promoted": false,
          "icon": "class::icons:account_transactions",
          "title": {
            "tr-TR": "Hesap Hareketleri",
            "en-EN": "Account Transactions"
          }
        }
      ]
    }
  ]
}

### View Page Configuration

#### Sample View : Account Information


#### Configuration

{
  "page": "account-info",
  "title": {
    "tr-TR": "Hesap Bilgileri",
    "en-EN": "Account Information"
  },
  "sub-title": {
    "tr-TR": "Vadesiz TL",
    "en-EN": "Deposit TL"
  },
  "parameters": [
    {
      "name": "iban",
      "publish-event-as": "submitted-iban",
      "is-required": false
    }
  ],
  "components": [
    {
      "name": "account-slider",
      "style": {
        "order": 0,
        "height": "float"
      },
      "config": {
        "account-type": "all",
        "currency": "all",
        "events": {
          "subscribe": [
            {
              "to": "submitted-iban",
              "as": "active-account"
            }
          ],
          "publish": [
            {
              "from": "active-account",
              "as": "selected-account"
            }
          ]
        }
      }
    },
    {
      "name": "overdraft-info",
      "style": {
        "order": 1,
        "height": "fixed"
      },
      "config": {
        "allow-apply": true,
        "allow-limit-update": true,
        "events": {
          "subscribe": [
            {
              "to": "submitted-iban",
              "as": "active-account"
            }
          ],
          "publish": [
            {
              "from": "apply-to-limit-update",
              "as": "overdraft-limit-update-transaction"
            }
          ]
        }
      }
    },
    {
      "name": "account-summary",
      "style": {
        "order": 2,
        "height": "fixed"
      },
      "config": {
        "events": {
          "subscribe": [
            {
              "to": "submitted-iban",
              "as": "active-account"
            }
          ]
        }
      }
    },
    {
      "name": "last-transactions",
      "style": {
        "order": 3,
        "height": "fixed"
      },
      "config": {
        "display-new": true,
        "events": {
          "subscribe": [
            {
              "to": "submitted-iban",
              "as": "active-account"
            }
          ],
          "publish": [
            {
              "from": "repeat-transaction",
              "as": "money-repeat-transfer-transaction"
            }
          ]
        }
      }
    },
    {
      "name": "sub-navigation",
      "style": {
        "order": 4,
        "height": "float"
      },
      "config": {
        "navigation": "account-sub",
        "events": {
          "subscribe": [
            {
              "to": "submitted-iban",
              "as": "key"
            }
          ]
        }
      }
    }
  ]
}

### Transactional Page Configuration

#### Configraution

{
  "page": "fx-buy",
  "transition": "trx-start-fx-buy",
  "navigation": [
    {
      "submit": {
        "tr-TR": "Devam",
        "en-EN": "Ok"
      }
    }
  ],
  "title": {
    "tr-TR": "Doviz Al",
    "en-EN": "Buy FX"
  },
  "sub-title": {
    "tr-TR": "Doviz Al...",
    "en-EN": "Buy FX..."
  },
  "parameters": [
    {
      "name": "source-iban",
      "publish-event-as": "source_account",
      "is-required": false
    },
    {
      "name": "target-iban",
      "publish-event-as": "target_account",
      "is-required": false
    }
  ],
  "components": []
}

#### Sample Process : FX Buy


##### T0 Navigate FX Buy Page
The process starts with the publish event of the navigation component.


##### T1 Start Transaction


##### T2 Approve Transaction