IO Pay Portal - frontend

The repository contains the code implementing IO Pay Portal frontend.

About The Project

This project is a simple frontend that interacts with the services implemented in io-functions-pay-portal, and the goal is to verify and start a payment given a "Codice Avviso Pagamento". If the verification is successful, the app redirects to io-pay.

Built With

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

In order to build and run this project are required:

Configuration

The table below describes all the Environment variables needed by the application.

Variable name	Description	type
IO_PAY_PORTAL_API_HOST	api services	endpoint/string
IO_PAY_PORTAL_API_REQUEST_TIMEOUT	request timeout	milliseconds

Installation

Clone the repo

git clone https://github.com/pagopa/io-pay-portal

Install node packages
```
yarn install
```
Generate api client
```
yarn generate
```
Build
```
yarn build
```
tests
```
yarn test
```
Linter
```
yarn lint
```

Usage

In order to run the application on a local dev server with mock API responses:

```
yarn dev
```

the application is available at http://localhost:1234

To run the application on a local dev server with real API:

```
yarn dev:proxy
```

Azure Pipeline

The CI/CD pipelines are defined in the .devops folder. It is required to set the following variables on Azure DevOps:

GIT_EMAIL
GIT_USERNAME
GITHUB_CONNECTION
PRODUCTION_AZURE_SUBSCRIPTION
STAGING_AZURE_SUBSCRIPTION
PRODUCTION_RESOURCE_GROUP_NAME
PRODUCTION_CDN_ENDPOINT
PRODUCTION_CDN_PROFILE_NAME
IO_PAY_PORTAL_API_HOST
IO_PAY_PORTAL_API_REQUEST_TIMEOUT
IO_PAY_PORTAL_PAY_WL_POLLING_INTERVAL
IO_PAY_PORTAL_PAY_WL_POLLING_ATTEMPTS

Adding Translations

The app uses i18n for translations, in order to add a new one follow this steps:

Add new language folder in src/translations
Create a new file titled: translations.ts

Copy the content of the existing translations as template and change accordingly with new translations

export const TRANSLATIONS_<LANG> = {
mainPage: {
   footer: {
      accessibility: <"Accessibilità">,
      ...
   },
},
...

In src/translations/lang.ts import your template

import { TRANSLATIONS_IT } from "./it/translations";

Add the new configuration in src/translations/lang.ts

const lang: Languages = {
   it: {
   label: "Italiano",
   lang: "it-IT",
   translation: TRANSLATIONS_IT,
   },
   en: {
   label: "English",
   lang: "en-EN",
   translation: TRANSLATIONS_EN,
   },
   //here
}