Merge pull request #37 from pagopa/CHK-3248-continue-app-io-webview

[CHK-3248] feat: add webview to improve IO app flow

.env.development

@@ -7,5 +7,5 @@ ECOMMERCE_GDI_CHECK_TIMEOUT=12000
 ECOMMERCE_NPG_SDK_URL=https://stg-ta.nexigroup.com/monetaweb/resources/hfsdk.js
 ECOMMERCE_IO_CLIENT_REDIRECT_OUTCOME_PATH=test
 ECOMMERCE_CHECKOUT_CLIENT_REDIRECT_OUTCOME_PATH=http://localhost:1234/v2/esito
-ECOMMERCE_GET_TRANSACTION_POLLING_DELAY_MILLIS=100
-ECOMMERCE_GET_TRANSACTION_POLLING_RETRIES=2
+ECOMMERCE_GET_TRANSACTION_POLLING_DELAY_MILLIS=1000
+ECOMMERCE_GET_TRANSACTION_POLLING_RETRIES=4

.proxyrc.js

@@ -14,6 +14,7 @@ const {createProxyMiddleware} = require("http-proxy-middleware");
 const apiHost = "http://127.0.0.1:8080";
 const ecommerceBasepathV1 = "/ecommerce/checkout/v1";
 const ecommerceIOBasepathV1 = "/ecommerce/io/v1";
+const ecommerceIOWebviewBasepathV1 = "/ecommerce/webview/v1";
 
 module.exports = function (app) {
     app.use(createProxyMiddleware(ecommerceBasepathV1, {
@@ -23,4 +24,8 @@ module.exports = function (app) {
     app.use(createProxyMiddleware(ecommerceIOBasepathV1, {
         target: apiHost,
     }));
+
+    app.use(createProxyMiddleware(ecommerceIOWebviewBasepathV1, {
+        target: apiHost,
+    }));
 }

README.md

@@ -1 +1,93 @@
-# pagopa-ecommerce-fe
+# pagopa-ecommerce-fe
+
+This repository contain webviews used for ecommerce payments flow (checkout-App IO)
+
+## About The Project
+
+### Built With
+
+* [Bootstrap](https://getbootstrap.com)
+* [JQuery](https://jquery.com)
+* [Parcel](https://parceljs.org)
+* [Typescript](https://www.typescriptlang.org)
+* [Azure Pipeline](https://azure.microsoft.com)
+
+## 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:
+
+- [yarn](https://yarnpkg.com/)
+- [node (18.17.1)](https://nodejs.org/it/)
+
+### Installation
+
+1. Install node packages
+   ```sh
+   yarn install
+   ```
+2. Generate api client
+   ```sh
+   yarn generate
+   ```
+3. Build
+   ```sh
+   yarn build
+   ```
+4. tests
+   ```sh
+   yarn test
+   ```
+5. Linter
+   ```sh
+   yarn lint
+   ```
+
+### Usage
+
+In order to run the application on a local dev server with mock API responses:
+-  ```sh
+   yarn dev
+   ```
+the application is available at http://localhost:1234
+
+Test use cases: 
+
+- *CHECKOUT* 
+    1. start checkout mock [pagopa-checkout-be-mock](https://github.com/pagopa/pagopa-checkout-be-mock)
+    2. open on browser http://localhost:1234/ecommerce-fe/esito#clientId=CHECKOUT&sessionToken=test&transactionId=1234
+
+- *APP IO*
+    1. start script ```yarn start-io-mock``` on other terminal
+    2. open on browser http://localhost:1234/ecommerce-fe/esito#clientId=IO&sessionToken=test&transactionId=1234
+
+
+## IO Mock outcome result
+The ecommerce transaction get transaction endpoint `/checkout/webview/v1/transactions/:transactionId` is driven by the following mockFlow values:
+
+| MOCK FLOW                                          | Transaction Id Suffix | OUTCOME              | 
+|----------------------------------------------------|--------------|----------------------|
+| NOTIFIED_OK                                        | other        | SUCCESS (0)          |
+| NOTIFICATION_REQUESTED - Outcome OK                | 61           | SUCCESS (0)          |
+| NOTIFICATION_REQUESTED - Outcome KO                | 62           | GENERIC_ERROR (1)    |
+| NOTIFICATION_ERROR - Outcome OK                    | 63           | SUCCESS (0)          |
+| NOTIFICATION_ERROR - Outcome KO                    | 64           | GENERIC_ERROR (1)    |
+| NOTIFIED_KO                                        | 65           | GENERIC_ERROR (1)    |
+| REFUNDED                                           | 66           | GENERIC_ERROR (1)    |
+| REFUND_REQUESTED                                   | 67           | GENERIC_ERROR (1)    |
+| REFUND_ERROR                                       | 68           | GENERIC_ERROR (1)    |
+| EXPIRED_NOT_AUTHORIZED                             | 69           | TIMEOUT (4)          |
+| CANCELED                                           | 70           | CANCELED_BY_USER (8) |  
+| CANCELLATION_EXPIRED                               | 71           | CANCELED_BY_USER (8) |  
+| CLOSURE_ERROR - NPG EXECUTED                       | 72           | GENERIC_ERROR (1)    |
+| CLOSURE_REQUESTED - NPG CANCELED                   | 73           | CANCELED_BY_USER (8) |   
+| AUTHORIZATION_COMPLETED - NPG AUTHORIZED           | 74           | GENERIC_ERROR (1)    |
+| UNAUTHORIZED - NPG DENIED_BY_RISK                  | 75           | AUTH_ERROR (2)       |
+| CLOSED - Outcome NOT_RECEIVED                      | 76           | TAKING_CHARGE (17)   |
+| CLOSED - Other                                     | 77           | GENERIC_ERROR (1)    |
+| EXPIRED - Outcome OK                               | 78           | SUCCESS (0)          |
+| AUTHORIZATION_REQUESTED                            | 79           | TAKING_CHARGE (17)   |  

mock/io-mock.js

@@ -0,0 +1,190 @@
+/**
+ * Development server built as an express application,
+ * able to run frontend (thanks to parcel-bundler) and an API server with json response example.
+ */
+
+const express = require("express");
+const port = 8080;
+const app = express();
+
+app.get("/ecommerce/webview/v1/transactions/:transactionId", (req, res) => {
+
+    const transactionId = req.params.transactionId.replace(/\n|\r/g, "");
+    console.log("Transaction ID received: " + transactionId);
+
+    const paymentSuccess =  {
+        status: "NOTIFIED_OK",
+        gateway: "NPG",
+        gatewayAuthorizationStatus: "EXECUTED",
+        outcome: "OK"
+    }
+
+    const suffixMap = {
+        "61": {
+            status: "NOTIFICATION_REQUESTED",
+            gateway: "NPG",
+            gatewayAuthorizationStatus: "EXECUTED",
+            outcome: "OK"
+        },
+        "62": {
+            status: "NOTIFICATION_REQUESTED",
+            gateway: "NPG",
+            gatewayAuthorizationStatus: "EXECUTED",
+            outcome: "KO"
+        },
+        "63": {
+            status: "NOTIFICATION_ERROR",
+            gateway: "NPG",
+            gatewayAuthorizationStatus: "EXECUTED",
+            outcome: "OK"
+        },
+        "64": {
+            status: "NOTIFICATION_ERROR",
+            gateway: "NPG",
+            gatewayAuthorizationStatus: "EXECUTED",
+            outcome: "KO"
+        },
+        "65": {
+            status: "NOTIFIED_KO",
+            gateway: "NPG",
+            gatewayAuthorizationStatus: "EXECUTED",
+            outcome: "KO"
+        },
+        "66": {
+            status: "REFUNDED",
+            gateway: "NPG",
+            gatewayAuthorizationStatus: "EXECUTED",
+            outcome: "OK"
+        },
+        "67": {
+            status: "REFUND_REQUESTED",
+            gateway: "NPG",
+            gatewayAuthorizationStatus: "EXECUTED",
+            outcome: "OK"
+        },
+        "68": {
+            status: "REFUND_ERROR",
+            gateway: "NPG",
+            gatewayAuthorizationStatus: "EXECUTED",
+            outcome: "OK"
+        },
+        "69": {
+            status: "EXPIRED_NOT_AUTHORIZED",
+            gateway: "NPG",
+            gatewayAuthorizationStatus: "EXECUTED",
+            outcome: "OK"
+        },
+        "70": {
+            status: "CANCELED",
+            gateway: "NPG",
+            gatewayAuthorizationStatus: "EXECUTED",
+            outcome: "OK"
+        },
+        "71": {
+            status: "CANCELLATION_EXPIRED",
+            gateway: "NPG",
+            gatewayAuthorizationStatus: "EXECUTED",
+            outcome: "OK"
+        },
+        "72": {
+            status: "CLOSURE_ERROR",
+            gateway: "NPG",
+            gatewayAuthorizationStatus: "EXECUTED",
+            outcome: undefined
+        },
+        "73": {
+            status: "CLOSURE_REQUESTED",
+            gateway: "NPG",
+            gatewayAuthorizationStatus: "CANCELED",
+            outcome: undefined
+        },
+        "74": {
+            status: "AUTHORIZATION_COMPLETED",
+            gateway: "NPG",
+            gatewayAuthorizationStatus: "AUTHORIZED",
+            outcome: undefined
+        },
+        "75": {
+            status: "UNAUTHORIZED",
+            gateway: "NPG",
+            gatewayAuthorizationStatus: "DENIED_BY_RISK",
+            outcome: undefined
+        },
+        "76": {
+            status: "CLOSED",
+            gateway: "NPG",
+            gatewayAuthorizationStatus: undefined,
+            outcome: "NOT_RECEIVED"
+        },
+        "77": {
+            status: "CLOSED",
+            gateway: "NPG",
+            gatewayAuthorizationStatus: undefined,
+            outcome: "EXECUTED"
+        },
+        "78": {
+            status: "EXPIRED",
+            gateway: "NPG",
+            gatewayAuthorizationStatus: "EXECUTED",
+            outcome: "OK"
+        },
+        "79": {
+            status: "AUTHORIZATION_REQUESTED",
+            gateway: "NPG",
+            gatewayAuthorizationStatus: undefined,
+            outcome: undefined
+        }
+    };
+
+    const suffix = transactionId.slice(-2);
+    const params = suffixMap[suffix] || paymentSuccess;
+
+    res.send(
+        mockTransactionData(
+            params.status, 
+            params.gateway, 
+            params.gatewayAuthorizationStatus,
+            params.outcome
+        ));
+
+});
+
+app.listen(port, () => {
+  console.log(`Mock started on port ${port}`)
+});
+
+function mockTransactionData(status, gateway, gatewayAuthorizationStatus, outcome) {
+  return {
+    "authToken": "eyJhbGciOiJIUzUxMiJ9.eyJ0cmFuc2FjdGlvbklkIjoiMTdhYzhkZTMtMjAzMy00YzQ2LWI1MzQtZjE5MTk2NmNlODRjIiwicnB0SWQiOiI3Nzc3Nzc3Nzc3NzMzMDIwMDAwMDAwMDAwMDAwMCIsImVtYWlsIjoibmFtZS5zdXJuYW1lQHBhZ29wYS5pdCIsInBheW1lbnRUb2tlbiI6IjRkNTAwZTk5MDg3MTQyMDJiNTU3NTFlZDZiMWRmZGYzIiwianRpIjoiODUxNjQ2NDQzMjUxMTQxIn0.Fl3PoDBgtEhDSMFR3unkAow8JAe2ztYDoxlu7h-q_ygmmGvO7zP5dlztELUQCofcmYwhB4L9EgSLNT-HbiJgKA",
+    "clientId": "IO",
+    "feeTotal": 99999999,
+    "payments": [
+        {
+            "amount": 1000,
+            "isAllCCP": false,
+            "paymentToken": "paymentToken1",
+            "reason": "reason1",
+            "rptId": "77777777777302012387654312384",
+            "transferList": [
+                {
+                    "digitalStamp": true,
+                    "paFiscalCode": "66666666666",
+                    "transferAmount": 100,
+                    "transferCategory": "transferCategory1"
+                },
+                {
+                    "digitalStamp": false,
+                    "paFiscalCode": "77777777777",
+                    "transferAmount": 900,
+                    "transferCategory": "transferCategory2"
+                }
+            ]
+        }
+    ],
+    "status": status,
+    "transactionId": "1234",
+    "sendPaymentResultOutcome": outcome,
+    "gateway": gateway,
+    "gatewayAuthorizationStatus": gatewayAuthorizationStatus
+  }
+}

package.json

@@ -21,7 +21,8 @@
     "preversion": "auto-changelog  --config .auto-changelog.json --unreleased --commit-limit false --stdout --template preview.hbs",
     "version": "auto-changelog -p --config .auto-changelog.json --unreleased && git add CHANGELOG.md",
     "prestart-mock": "export $(grep -v '^#' .env.development | xargs) && chmod +x env.sh && source env.sh",
-    "start-mock": "parcel src/index.html & mkdir -p dist && cp -R ot dist/ot"
+    "start-mock": "parcel src/index.html & mkdir -p dist && cp -R ot dist/ot",
+    "start-io-mock": "node mock/io-mock.js"
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",