Add receipt page (#383)

* better error messages * add receipt page * add request id as url param when redirecting to vendor system * remove comment
Altinn · Sep 24, 2024 · 291c446 · 291c446
1 parent 7c60365
commit 291c446
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 32 deletions.
diff --git a/frontend/src/features/vendorRequestPage/VendorRequestPageContent.tsx b/frontend/src/features/vendorRequestPage/VendorRequestPageContent.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation, Trans } from 'react-i18next';
 import { Alert, Button, Heading, Paragraph, Spinner } from '@digdir/designsystemet-react';
@@ -23,6 +23,7 @@ interface VendorRequestPageContentProps {
 export const VendorRequestPageContent = ({ request, userInfo }: VendorRequestPageContentProps) => {
   const { i18n, t } = useTranslation();
   const currentLanguage = i18nLanguageToShortLanguageCode(i18n.language);
+  const [isReceiptVisible, setIsReceiptVisible] = useState<boolean>(false);
 
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
@@ -37,34 +38,90 @@ export const VendorRequestPageContent = ({ request, userInfo }: VendorRequestPag
     { isError: isRejectCreationRequestError, isLoading: isRejectingSystemUser },
   ] = useRejectSystemUserRequestMutation();
 
-  const acceptSystemUser = () => {
+  const acceptSystemUser = (): void => {
     postAcceptCreationRequest(request.id)
       .unwrap()
-      .then(() => redirectAfterAction(request.id));
+      .then(() => {
+        if (request.redirectUrl) {
+          redirectToVendor(request.redirectUrl);
+        } else {
+          setIsReceiptVisible(true);
+        }
+      });
   };
 
-  const rejectSystemUser = () => {
+  const rejectSystemUser = (): void => {
     postRejectCreationRequest(request.id)
       .unwrap()
-      .then(() => redirectAfterAction());
+      .then(() => {
+        if (request.redirectUrl) {
+          redirectToVendor(request.redirectUrl);
+        } else {
+          logoutUser();
+        }
+      });
   };
 
-  const redirectAfterAction = (createdId?: string) => {
-    if (request.redirectUrl) {
-      // logout and redirect
-      window.location.assign(request.redirectUrl);
-    } else {
-      // redirect to overview page
-      if (createdId) {
-        dispatch(setCreatedId(createdId));
-      }
-      navigate(AuthenticationRoute.Overview);
-    }
+  const redirectToVendor = (requestUrl: string): void => {
+    const url = new URL(requestUrl);
+    url.searchParams.append('id', request.id);
+    window.location.assign(url.toString());
+  };
+
+  const logoutUser = (): void => {
+    window.location.assign('/ui/Authentication/Logout');
   };
 
   const isActionButtonDisabled =
     !userInfo.canCreateSystemUser || isAcceptingSystemUser || isRejectingSystemUser;
 
+  const renderFooter = (): React.ReactNode => {
+    return (
+      <Paragraph size='sm' className={classes.vendorInfo}>
+        {t('vendor_request.org_nr', {
+          systemName: request.system.name[currentLanguage],
+          vendorName: request.system.systemVendorOrgName,
+          vendorOrg: request.system.systemVendorOrgNumber.match(/.{1,3}/g)?.join(' '),
+        })}
+      </Paragraph>
+    );
+  };
+
+  if (isReceiptVisible) {
+    return (
+      <>
+        <div className={classes.vendorRequestBlock}>
+          <Heading level={1} size='lg'>
+            {t('vendor_request.receipt_header')}
+          </Heading>
+        </div>
+        <div className={classes.vendorRequestBlock}>
+          <Heading level={2} size='sm'>
+            {t('vendor_request.receipt_ingress', {
+              systemName: request.system.name[currentLanguage],
+            })}
+          </Heading>
+          <Paragraph>{t('vendor_request.receipt_body')}</Paragraph>
+          <div className={classes.buttonRow}>
+            <Button variant='primary' onClick={() => logoutUser()}>
+              {t('vendor_request.receipt_close')}
+            </Button>
+            <Button
+              variant='tertiary'
+              onClick={() => {
+                dispatch(setCreatedId(request.id));
+                navigate(AuthenticationRoute.Overview);
+              }}
+            >
+              {t('vendor_request.receipt_go_to_overview')}
+            </Button>
+          </div>
+        </div>
+        {renderFooter()}
+      </>
+    );
+  }
+
   return (
     <>
       <div className={classes.vendorRequestBlock}>
@@ -140,13 +197,7 @@ export const VendorRequestPageContent = ({ request, userInfo }: VendorRequestPag
           </div>
         </div>
       </div>
-      <Paragraph size='sm' className={classes.vendorInfo}>
-        {t('vendor_request.org_nr', {
-          systemName: request.system.name[currentLanguage],
-          vendorName: request.system.systemVendorOrgName,
-          vendorOrg: request.system.systemVendorOrgNumber.match(/.{1,3}/g)?.join(' '),
-        })}
-      </Paragraph>
+      {renderFooter()}
     </>
   );
 };
diff --git a/frontend/src/localizations/en.json b/frontend/src/localizations/en.json
@@ -96,12 +96,17 @@
     "reject": "Reject",
     "org_nr": "{{systemName}} is delivered by {{vendorName}}, org.nr. {{vendorOrg}}",
     "loading_creation_request": "Laster request",
-    "load_creation_request_error": "Could not load creation request",
+    "load_creation_request_error": "Could not load system access request",
     "load_user_info_error": "Could not load user info",
-    "load_creation_request_no_id": "requestId must be included as query-parameter in url",
+    "load_creation_request_no_id": "id must be included as query-parameter in url",
     "accept_error": "Could not create system access",
     "reject_error": "Could not reject request",
     "accept_loading": "Creating system access...",
-    "reject_loading": "Rejecting request..."
+    "reject_loading": "Rejecting request...",
+    "receipt_header": "The system access is ready",
+    "receipt_ingress": "You can now use {{systemName}}",
+    "receipt_body": "At altinn.no you will find and overview of your system accesses. There you can also edit the name of the system accesses, and withdraw the approval at any time.",
+    "receipt_close": "Close",
+    "receipt_go_to_overview": "Go to overview in Altinn"
   }
 }
diff --git a/frontend/src/localizations/no_nb.json b/frontend/src/localizations/no_nb.json
@@ -96,12 +96,17 @@
     "reject": "Avvis",
     "org_nr": "{{systemName}} blir levert av {{vendorName}}, org.nr. {{vendorOrg}}",
     "loading_creation_request": "Laster forespørsel",
-    "load_creation_request_error": "Kunne ikke laste tilgangs-forespørsel",
+    "load_creation_request_error": "Kunne ikke laste systemtilgang-forespørsel",
     "load_user_info_error": "Kunne ikke laste brukerinfo",
-    "load_creation_request_no_id": "requestId må være med som query-parameter i url",
+    "load_creation_request_no_id": "id må være med som query-parameter i url",
     "accept_error": "Kunne ikke opprette systemtilgang",
     "reject_error": "Kunne ikke avvise forespørsel",
     "accept_loading": "Oppretter systemtilgang...",
-    "reject_loading": "Avviser forespørsel..."
+    "reject_loading": "Avviser forespørsel...",
+    "receipt_header": "Systemtilgangen er klar",
+    "receipt_ingress": " Du kan nå ta i bruk {{systemName}}",
+    "receipt_body": "På altinn.no finner du en oversikt over systemtilgangene dine. Der kan du også endre navn på systemtilgangen, og når som helst trekke tilbake godkjenningen.",
+    "receipt_close": "Lukk",
+    "receipt_go_to_overview": "Se oversikt i Altinn"
   }
 }
diff --git a/frontend/src/localizations/no_nn.json b/frontend/src/localizations/no_nn.json
@@ -96,12 +96,17 @@
     "reject": "Avvis",
     "org_nr": "{{systemName}} blir levert av {{vendorName}}, org.nr. {{vendorOrg}}",
     "loading_creation_request": "Laster forespørsel",
-    "load_creation_request_error": "Kunne ikke laste tilgangs-forespørsel",
+    "load_creation_request_error": "Kunne ikke laste systemtilgang-forespørsel",
     "load_user_info_error": "Kunne ikke laste brukerinfo",
-    "load_creation_request_no_id": "requestId må være med som query-parameter i url",
+    "load_creation_request_no_id": "id må være med som query-parameter i url",
     "accept_error": "Kunne ikkje opprette systemtilgang",
     "reject_error": "Kunne ikkje avvise forespørsel",
     "accept_loading": "Oppretter systemtilgang...",
-    "reject_loading": "Avviser forespørsel..."
+    "reject_loading": "Avviser forespørsel...",
+    "receipt_header": "Systemtilgangen er klar",
+    "receipt_ingress": " Du kan nå ta i bruk {{systemName}}",
+    "receipt_body": "På altinn.no finner du ei oversikt over systemtilgangene dine. Der kan du også endre navn på systemtilgangen, og når som helst trekke tilbake godkjenninga.",
+    "receipt_close": "Lukk",
+    "receipt_go_to_overview": "Se oversikt i Altinn"
   }
 }