[CHK-3264] feat: show continue to IO app button if redirect fail (#43)

* feat: add delay to showing continue to IO app button * feat: set show button delay by env * fix: check env variable exists --------- Co-authored-by: Pietro Tota <[email protected]>
pagopa · Oct 9, 2024 · 6132aa6 · 6132aa6
1 parent efe18c6
commit 6132aa6
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 13 deletions.
diff --git a/.devops/azure-templates/setup-env.yml b/.devops/azure-templates/setup-env.yml
@@ -36,6 +36,10 @@ parameters:
     type: string
     default: ' '
 
+  - name: 'show_continue_io_btn_delay_millis'
+    type: number
+    default: 2000
+
 steps:
 - bash: |
     chmod +x env.sh
@@ -49,6 +53,7 @@ steps:
       ECOMMERCE_NPG_SDK_URL=${{ parameters.npg_sdk_url }} \
       ECOMMERCE_IO_CLIENT_REDIRECT_OUTCOME_PATH=${{ parameters.io_client_redirect_outcome_path }} \
       ECOMMERCE_CHECKOUT_CLIENT_REDIRECT_OUTCOME_PATH=${{ parameters.checkout_client_redirect_outcome_path }} \
+      ECOMMERCE_SHOW_CONTINUE_IO_BTN_DELAY_MILLIS=${{ parameters.show_continue_io_btn_delay_millis }} \
       bash env.sh
 
   displayName: 'Populate environment file'
diff --git a/.devops/pagopa-code-review-pipelines.yml b/.devops/pagopa-code-review-pipelines.yml
@@ -58,6 +58,7 @@ stages:
             gdi_check_timeout: 12000
             io_client_redirect_outcome_path: 'https://api.dev.platform.pagopa.it/ecommerce/io-outcomes/v1/transactions'
             checkout_client_redirect_outcome_path: 'https://dev.checkout.pagopa.it/v2/esito'
+            show_continue_io_btn_delay_millis: 2000
 
         - script: |
             yarn build

diff --git a/.devops/pagopa-deploy-pipelines.yml b/.devops/pagopa-deploy-pipelines.yml
@@ -85,6 +85,7 @@ stages:
               gdi_check_timeout: 12000
               io_client_redirect_outcome_path: 'https://api.dev.platform.pagopa.it/ecommerce/io-outcomes/v1/transactions'
               checkout_client_redirect_outcome_path: 'https://dev.checkout.pagopa.it/v2/esito'
+              show_continue_io_btn_delay_millis: 2000
 
           - script: |
               yarn build
@@ -202,6 +203,7 @@ stages:
               gdi_check_timeout: 12000
               io_client_redirect_outcome_path: 'https://api.uat.platform.pagopa.it/ecommerce/io-outcomes/v1/transactions'
               checkout_client_redirect_outcome_path: 'https://uat.checkout.pagopa.it/v2/esito'
+              show_continue_io_btn_delay_millis: 2000
 
           - script: |
               yarn build
@@ -294,6 +296,7 @@ stages:
               gdi_check_timeout: 12000
               io_client_redirect_outcome_path: 'https://api.platform.pagopa.it/ecommerce/io-outcomes/v1/transactions'
               checkout_client_redirect_outcome_path: 'https://checkout.pagopa.it/v2/esito'
+              show_continue_io_btn_delay_millis: 2000
 
           - script: |
               yarn build

diff --git a/.env.development b/.env.development
@@ -8,4 +8,5 @@ ECOMMERCE_NPG_SDK_URL=https://stg-ta.nexigroup.com/monetaweb/resources/hfsdk.js
 ECOMMERCE_IO_CLIENT_REDIRECT_OUTCOME_PATH=http://localhost:1234/ecommerce/io-outcomes/v1/transactions
 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_RETRIES=2
+ECOMMERCE_SHOW_CONTINUE_IO_BTN_DELAY_MILLIS=2000
diff --git a/src/routes/PaymentResponsePage.tsx b/src/routes/PaymentResponsePage.tsx
@@ -15,6 +15,7 @@ import PageContainer from "../components/PageContainer";
 import { getOnboardingPaymentOutcome } from "../utils/api/transactions/TransactionResultUtil";
 import { SessionItems, getSessionItem } from "../utils/storage/sessionStorage";
 import { getFragments, redirectToClient } from "../utils/urlUtilities";
+import { getConfigOrThrow } from "../utils/config/config";
 import { CLIENT_TYPE, ROUTE_FRAGMENT } from "./models/routeModel";
 
 export default function PaymentResponsePage() {
@@ -27,21 +28,30 @@ export default function PaymentResponsePage() {
     ROUTE_FRAGMENT.CLIENT_ID,
     ROUTE_FRAGMENT.TRANSACTION_ID
   );
-  const [outcomeState, setOutcomeAndRedirect] =
+  const [outcomeState, setOutcomeState] =
     React.useState<ViewOutcomeEnum | null>(null);
+  const config = getConfigOrThrow();
 
   const redirectWithError = () => {
-    setOutcomeAndRedirect(ViewOutcomeEnum.GENERIC_ERROR);
+    performRedirectToClient(ViewOutcomeEnum.GENERIC_ERROR);
   };
 
-  const performRedirectToClient = () => {
-    const outcome = outcomeState || ViewOutcomeEnum.GENERIC_ERROR;
+  const performRedirectToClient = (newOutcome?: ViewOutcomeEnum) => {
+    // if not present new outcome use old one
+    const outcome = newOutcome || outcomeState || ViewOutcomeEnum.GENERIC_ERROR;
     redirectToClient({ transactionId, outcome, clientId });
+    // if is new outcome, update state after timeout
+    if (newOutcome) {
+      setTimeout(
+        () => setOutcomeState(outcome),
+        config.ECOMMERCE_SHOW_CONTINUE_IO_BTN_DELAY_MILLIS
+      );
+    }
   };
 
   const GetTransaction = (token: string) => {
     const manageResp = O.match(redirectWithError, (transactionInfo) => {
-      setOutcomeAndRedirect(
+      performRedirectToClient(
         getOnboardingPaymentOutcome(transactionInfo as transactionInfoStatus)
       );
     });
@@ -63,13 +73,6 @@ export default function PaymentResponsePage() {
     })();
   };
 
-  // On outcome update perform redirect
-  useEffect(() => {
-    if (outcomeState) {
-      performRedirectToClient();
-    }
-  }, [outcomeState]);
-
   useEffect(() => {
     const token =
       getSessionItem(SessionItems.sessionToken) ?? fragmentSessionToken;

diff --git a/src/utils/config/config.ts b/src/utils/config/config.ts
@@ -24,6 +24,7 @@ export const IConfig = t.interface({
   ECOMMERCE_CHECKOUT_CLIENT_REDIRECT_OUTCOME_PATH: NonEmptyString,
   ECOMMERCE_GET_TRANSACTION_POLLING_RETRIES: t.number,
   ECOMMERCE_GET_TRANSACTION_POLLING_DELAY_MILLIS: t.number,
+  ECOMMERCE_SHOW_CONTINUE_IO_BTN_DELAY_MILLIS: t.number,
 });
 
 // No need to re-evaluate this object for each call
@@ -58,6 +59,15 @@ const errorOrConfig: t.Validation<IConfig> = IConfig.decode({
         10
       )
     : 3000,
+  // eslint-disable-next-line no-underscore-dangle
+  ECOMMERCE_SHOW_CONTINUE_IO_BTN_DELAY_MILLIS: (window as any)._env_
+    .ECOMMERCE_SHOW_CONTINUE_IO_BTN_DELAY_MILLIS
+    ? parseInt(
+        // eslint-disable-next-line no-underscore-dangle
+        (window as any)._env_.ECOMMERCE_SHOW_CONTINUE_IO_BTN_DELAY_MILLIS,
+        10
+      )
+    : 2000,
 });
 
 /**