# Vidis prescriptions detail web component
## Context

VIDIS (Virtual Integrated Drug Information System) integrates several sources and systems:
- [Recip-e][Recip-e] prescriptions
- [Vitalink][Vitalink] / [RSW][RSW] / [RSB][RSB] medication scheme
- [Vitalink][Vitalink] / [RSW][RSW] / [RSB][RSB] diary notes
- [Farmaflux][Farmaflux] delivered medications

In order to be reused by other software vendors, the VIDIS front-end is now split into [web components][Web component explanations].
The container application will have to provide the input parameters to provision the web component with a working context.

## Prerequisites

- A supported browser [by our Web Components](https://angular.dev/reference/versions#browser-support) AND [by eHealth][Supported browsers]
- A valid VIDIS token. It could be obtained from [eHealth Token eXchange][eHealth IAM] service. This token must be refreshed periodically in order to be used by VIDIS
- Notify partners that are using REST APIs so your VIDIS tokens & clients will be trusted :
    - [Vitalink][Vitalink] & their Apigee service – Contact: vitalink-support@smals.be 
    - [Farmaflux][Farmaflux] – Contact: vidis@farmaflux.be

⚠️ IE (internet explorer) is not supported. You can include [polyfill scripts ("polyfills")](https://www.webcomponents.org/polyfills) for the browsers that you must support.


## Features

This web component provides users with a comprehensive prescription details such as intake instructions, a medication leaflet (if available), and, for compound prescriptions, a breakdown of the individual ingredients. It also includes additional data such as the start and end dates for the treatment, the patient's name, the prescribing doctor’s name, the date the prescription was created, posology (dosing instructions), and other relevant instructions specific to the treatment plan.

Moreover, the prescription detail page includes a variety of helpful features for the user:

- **Prescription Reservation:** Users can reserve their prescription at a specific pharmacy, to help the patient organize efficient pharmacy visits. This can help to reduce medication shortages, as it can help pharmacies to better manage their inventory, ensuring they can fulfill patient needs without running out of stock. This is particularly helpful for patients who require specialized or less commonly stocked medications.
- **Visibility Management:** Patients can adjust the visibility of their prescriptions, allowing them to control who can access their prescription information, providing an added layer of privacy and control.
- **Prescription Deletion:** If needed, patients can delete prescriptions from the list, giving them the ability to remove unnecessary or outdated prescriptions from their records.
- **Printing Option:** Users can print a selected prescription directly from the detail page, making it easy to maintain a physical copy for reference or legal reasons.

## Inputs

| Name                        | Mandatory | Possible values                                                    | Description                                                                                                                                                                                                                                                                     |
|-----------------------------|-----------|--------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `userLanguage`              | true      | `en`, `de`, `fr`, `nl`                                             | The language holds the current language as a value, which means it can change over time if the user changes his/her preferred language. The web component adapts the translations based on the value set. The values of the language property are defined in the Language enum. |
| `configName`                | true      | `acc`, `prod`                                                      | Name of the configuration the application and the components are being deployed to.                                                                                                                                                                                             |
| `authenticationStatus`      | true      | `unauthenticated`, `online-authenticated`, `offline-authenticated` | Indicates the authentication state of the current user. When `online-authenticated`, the component can access all backend services. When `offline-authenticated`, the component uses cached data. When `unauthenticated`, no token is fetched from the host application.         |
| `rid`                       | true      | N/A                                                                | Prescription RID code to display.                                                                                                                                                                                                                                               |
| `professional`              | false     | `true`, `false`                                                    | Indicates whether the component is being used in a professional context. If set to `true`, the `ssin` input must be provided and will be used to identify the patient. If `false`, the SSIN will be retrieved automatically from the authentication token. Defaults to `false`. |
| `ssin`                      | false     | N/A                                                                | The patient's SSIN. Required when `professional` is `true`. When `professional` is `false`, this value is ignored and the SSIN is extracted from the authentication token.                                                                                                      |
| `offlineDataStorageEnabled` | false     | `true`, `false`                                                    | A boolean flag indicating whether offline data storage has been enabled by the user. When true, the web component can store and retrieve data locally for offline access.                                                                                                       |
| `isOfflineAuthenticated`    | false     | `true`, `false`                                                    | **Deprecated** since v5.0.2 — use `authenticationStatus` instead. A boolean flag indicating whether the web component is being accessed from an offline state.                                                                                                                  |

## Outputs

| Name      | Type                                                                                                       | Description                                                                                                         |
|-----------|------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------|
| `print`   | {title: string, content: string, mimeType: 'application/base64', orientation?: 'portrait' \| 'landscape'} | Emitted with the prescription as a base64 PDF and title. The PDF is created for portrait printing.                  |
| `open`    | {componentTag: string, props?: {[key: string]: unknown}}                                                   | Emitted on mobile when navigating to the reservation (`vidis-pharmacy-reservation`) or visibility (`vidis-prescription-visibility`) sub-component. |
| `onError` | {reported: boolean}                                                                                        | Emitted after the error dialog closes. `reported` is `true` if the user confirmed reporting the error; otherwise `false`. |

## Reservation component
tagName: `<vidis-pharmacy-reservation />`

| Property         | Type                   | Required | Description                                  |
|------------------|----------------------------|----------|----------------------------------------------|
| info             | {id: string, ssin: string} | Yes      | Recieved from the prescription detail component and needs to be passed to the reservation component for correct rendering |

| Event               | Type                 | Required | Description                                                                                                                                                        |
|---------------------|----------------------|----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| finishReservation   | customEvent          | Yes      | Event emitted when the user has finished or canceled the reservation flow. Host application should handle the navigation back to the prescription detail component |
| `onError`           | {reported: boolean}  | Yes      | Emitted after the error dialog closes. reported is true if the user confirmed reporting the error; otherwise false.                                                |

## Visibility component
tagName: `<vidis-prescription-visibility />`

| Property         | Type                   | Required | Description                                  |
|------------------|----------------------------|----------|----------------------------------------------|
| info             | {id: string, ssin: string, action: 'pharmacy' | 'prescriber'} | Yes      | Recieved from the prescription detail component and needs to be passed to the visibility component for correct rendering | 

| Event            | Type                | Required | Description                                                                                                                                                       |
|------------------|---------------------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| finishVisibility | customEvent         | Yes      | Event emitted when the user has finished or canceled the visibility flow. Host application should handle the navigation back to the prescription detail component |
| `onError`        | {reported: boolean} | Yes      | Emitted after the error dialog closes. reported is true if the user confirmed reporting the error; otherwise false.                                               |




## Usage

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vidis prescriptions detail web component</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script type="module" src="vidis-prescription-detail/prescription-detail.js"></script>
	<link rel="stylesheet" href="vidis-prescription-detail/prescription-detail.css">
</head>
<body>
<script>
	const wc = document.createElement("vidis-prescription-detail");

	// Common inputs for all VIDIS web components
	// Refer to https://www.npmjs.com/package/@smals-belgium/myhealth-wc-integration for more details
	wc.language = 'en'
	wc.configName = 'acc';
	wc.services = {
		cache: {
			get: (key) => (undefined),
			set: (key, value) => {
			},
			remove: (key) => {
			}
		},
		getAccessToken: async (audience) => "TODO : the eHealth OAuth2 JWT token.",
		registerRefreshCallback: () => {
		}
	}

	// Example on how to provide extra input parameter(s), if needed / requested by the component
	// wc["attributeName"] = "myValue" 

	// Example on how to listen to output parameter(s)
	wc.addEventListener("eventName", (event) => {
		console.log(`event:`, event)
		const params = event.detail;
		console.log('param:', params);
	})

	// Example on how to listen to output parameter(s), for printing
	wc.addEventListener("onPrint", (event) => {
		console.log(`event:`, event)
		const params = event.detail;
		console.log('param:', params);

		const byteArray = new Uint8Array(atob(params.content).split('').map(char => char.charCodeAt(0)))
		const blob = new Blob([byteArray], {type: 'application/pdf'})
		const url = window.URL.createObjectURL(blob)
		window.open(url, '_blank').print()
	})

	document.body.append(wc);
</script>
</body>
</html>
```


## Versioning

This project follows [Semantic Versioning][Semver]. Each release is categorized by major, minor, and patch updates. Significant changes that may break existing integrations will be introduced with major versions. Please check [CHANGELOG.md](CHANGELOG.md) file for more info.

## Accessibility

We are committed to making our web components accessible to all users. Our components are:
- Screen reader friendly : Designed to work well with popular screen readers (Talkback / VoiceOver / ...)
- Responsive : Adapt to various screen sizes (desktop / mobile).
- Compliant: Meet [accessibility criteria][OFAC], including ARIA labels and keyboard navigation

## Customizations

The web components are build with [Angular Material][Angular Material]. The styling of it is overwritten by the “My Health” portal, by there [design kit][MHDK].

## Troubleshoots

If you encounter issues while using the web components :

- Ensure that your token is valid and hasn't expired. For assistance, contact [eHealth][eHealth IAM].
- Ensure you are using the latest version of the web components
- Ensure you are using a supported browser and that you have cleared your cache if issues persist.
- Ensure your organization, browser or device don't block calls to VIDIS API by any way.
- If none of the above, please contact mijngeneesmiddelen@riziv-inami.fgov.be / mesmedicaments@riziv-inami.fgov.be

## License

[GNU Lesser General Public License v3.0 or later](https://spdx.org/licenses/LGPL-3.0-or-later.html)

[Recip-e]: https://recip-e.be/
[Vitalink]: https://www.vitalink.be/
[RSW]: https://www.reseausantewallon.be/
[RSB]: https://brusselshealthnetwork.be/
[Farmaflux]: https://www.farmaflux.be/
[Web component explanations]: https://www.webcomponents.org/introduction
[eHealth IAM]:https://www.ehealth.fgov.be/ehealthplatform/nl/service-i.am-identity-access-management 
[MHDK]: https://www.npmjs.com/package/@myhealth-belgium/design-kit
[Angular Material]: https://material.angular.io/
[OFAC]: https://openfed.github.io/AccessibilityCheck/
[Semver]: https://docs.npmjs.com/about-semantic-versioning
[MHWCI]: https://www.npmjs.com/package/@myhealth-belgium/webcomponent-integration
[Supported browsers]: https://www.ehealth.fgov.be/nl/page/hoe-toegang-krijgen-tot-applicaties

