# NXP Notification UI Plugin

- Nxp-Notifications-Ui-Plugin is a vueJs plugin for managing institution Notification settings.

## Requirements

- Nxp UI Plugin.

```shell
npm i vue-nxp-plugin
```

## Configuration

- add the following line to your hosts file to trust notification Certificate.
```
3.22.52.234 notifications-transvers-integration.app.dev.s2m.ma
```

## Installation

- via npm, latest version.

```shell
npm i vue-nxp-notifications-ui-plugin
```

- via package.json with specific version (integration Deployments).

```json
"vue-nxp-notifications-ui-plugin" : "0.5.3",
```

__NB :__
```text
Add following code to your package.json in order to download the plugin from nexus repository.
```

```json
"publishConfig": {
"registry": "https://artifact-repos.dev.s2m.ma/repository/npm-hosted/",
},
```

- via package.json with specific version (local Developments).

```json
"vue-nxp-notifications-ui-plugin" : "0.4.9",
```

## Settings

- After Installing the Plugin, Use it globally in your main.js file.

```js
import NotificationConfigurationPlugin from 'vue-nxp-notifications-ui-plugin/dist/nxp-notifications-ui-plugin.common';
import 'vue-nxp-notifications-ui-plugin/dist/nxp-notifications-ui-plugin.css';

Vue.use(NotificationConfigurationPlugin,{ 'notificationUrl': process.env.VUE_APP_ITSP_NOTIFICATION_URL });
```

- With VUE_APP_ITSP_NOTIFICATION_URL is an environment variable in .env file containing notification Microservice url.

- in your main.js file add parameters microservice Url (default value is ITSP parameters microService URL): 
```js
Vue.prototype.$parameters_microservice_url = "url/api";
```

- finally, in your i18n file plug notification plugin i18n variable:

```js
setTimeout(()=>{
    your_messages.en = {...Vue.prototype.$notification_messages.en ,...your_messages.en}
    your_messages.fr = {...Vue.prototype.$notification_messages.fr ,...your_messages.fr}
},0)
```

- with Vue.prototype.$notification_messages is a global variable coming from notifications plugin.

## Props

- institution : Object.

## Events

- close : when the user clicks on Close Button.

## Usage

- You can simply import The base Component as follows :

```vue
<template>
  <div>
    <nxp-notification-configuration :institution="institution"/>
  </div>
</template>

<script>
export default {
  name :'test',
  data(){
    return {
      institution : {
        institutionId :'000001',
        institutionName : 'BMCE Bank'
      }
    }
  }
}
</script>
```
