feat: show "no cookie consents" notification (HL-1078) (#2623)

City-of-Helsinki · Dec 22, 2023 · aca3fe0 · aca3fe0
1 parent d0d0911
commit aca3fe0
Show file tree

Hide file tree

Showing 10 changed files with 97 additions and 14 deletions.
diff --git a/frontend/benefit/applicant/public/locales/en/common.json b/frontend/benefit/applicant/public/locales/en/common.json
@@ -714,5 +714,10 @@
   },
   "toast": {
     "closeToast": "Close notification"
+  },
+  "cookieNotification": {
+    "title": "Sivun palautenappeja ei voida näyttää",
+    "text": "Toiminnon käyttämiseksi vaaditaan, että hyväksyt sivuston evästeet. Pääsen antamaan palautetta tästä sivusta sallimalla evästeasetuksista tilastointiin liittyvät evästeet.",
+    "button": "Muokkaa evästeasetuksia"
   }
 }
diff --git a/frontend/benefit/applicant/public/locales/fi/common.json b/frontend/benefit/applicant/public/locales/fi/common.json
@@ -714,5 +714,10 @@
   },
   "toast": {
     "closeToast": "Sulje ilmoitus"
+  },
+  "cookieNotification": {
+    "title": "Sivun palautenappeja ei voida näyttää",
+    "text": "Toiminnon käyttämiseksi vaaditaan, että hyväksyt sivuston evästeet. Pääsen antamaan palautetta tästä sivusta sallimalla evästeasetuksista tilastointiin liittyvät evästeet.",
+    "button": "Muokkaa evästeasetuksia"
   }
 }
diff --git a/frontend/benefit/applicant/public/locales/sv/common.json b/frontend/benefit/applicant/public/locales/sv/common.json
@@ -714,5 +714,10 @@
   },
   "toast": {
     "closeToast": "Stäng avisering"
+  },
+  "cookieNotification": {
+    "title": "Sivun palautenappeja ei voida näyttää",
+    "text": "Toiminnon käyttämiseksi vaaditaan, että hyväksyt sivuston evästeet. Pääsen antamaan palautetta tästä sivusta sallimalla evästeasetuksista tilastointiin liittyvät evästeet.",
+    "button": "Muokkaa evästeasetuksia"
   }
 }
diff --git a/frontend/benefit/applicant/src/components/applications/pageContent/PageContent.tsx b/frontend/benefit/applicant/src/components/applications/pageContent/PageContent.tsx
@@ -12,6 +12,7 @@ import ApplicationFormStep3 from 'benefit/applicant/components/applications/form
 import ApplicationFormStep4 from 'benefit/applicant/components/applications/forms/application/step4/ApplicationFormStep4';
 import ApplicationFormStep5 from 'benefit/applicant/components/applications/forms/application/step5/ApplicationFormStep5';
 import ApplicationFormStep6 from 'benefit/applicant/components/applications/forms/application/step6/ApplicationFormStep6';
+import NoCookieConsentsNotification from 'benefit/applicant/components/cookieConsent/NoCookieConsentsNotification';
 import { $Hr } from 'benefit/applicant/components/pages/Pages.sc';
 import { SUBMITTED_STATUSES } from 'benefit/applicant/constants';
 import { useAskem } from 'benefit/applicant/hooks/useAnalytics';
@@ -92,6 +93,7 @@ const PageContent: React.FC = () => {
     return (
       <>
         <NotificationView
+          applicationId={application.id}
           title={t('common:notifications.applicationSubmitted.label')}
           message={t('common:notifications.applicationSubmitted.message', {
             applicationNumber: application?.applicationNumber,
@@ -101,15 +103,19 @@ const PageContent: React.FC = () => {
             ),
           })}
         />
-        {canShowAskem && (
+        {router.locale === 'fi' && (
           <Container>
             <$Hr />
-            <$AskemContainer>
-              <$AskemItem />
-              <$AskemItem>
-                <div className="rns" />
-              </$AskemItem>
-            </$AskemContainer>
+            {canShowAskem ? (
+              <$AskemContainer>
+                <$AskemItem />
+                <$AskemItem>
+                  <div className="rns" />
+                </$AskemItem>
+              </$AskemContainer>
+            ) : (
+              <NoCookieConsentsNotification submittedApplication={application.id} />
+            )}
             <$Hr />
           </Container>
         )}

diff --git a/frontend/benefit/applicant/src/components/applications/pageContent/usePageContent.ts b/frontend/benefit/applicant/src/components/applications/pageContent/usePageContent.ts
@@ -33,9 +33,9 @@ const isApplicationLoaded = (id: number | string, status: string): boolean =>
 const usePageContent = (): ExtendedComponentProps => {
   const router = useRouter();
   const id = router?.query?.id?.toString() ?? '';
+  const isSubmittedQueryParam = !!router?.query?.isSubmitted;
   const { t } = useTranslation();
   const [isLoading, setIsLoading] = useState(true);
-
   const [isSubmittedApplication, setIsSubmittedApplication] =
     useState<boolean>(false);
 
@@ -58,7 +58,8 @@ const usePageContent = (): ExtendedComponentProps => {
     if (router.isReady && !router.query.id) {
       setIsLoading(false);
     }
-  }, [router]);
+    setIsSubmittedApplication(isSubmittedQueryParam);
+  }, [router, isSubmittedQueryParam]);
 
   const application: Application = existingApplication
     ? camelcaseKeys(

diff --git a/frontend/benefit/applicant/src/components/cookieConsent/CookieConsent.tsx b/frontend/benefit/applicant/src/components/cookieConsent/CookieConsent.tsx
@@ -1,10 +1,13 @@
 import {
   ASKEM_HOSTNAME,
+  ROUTES,
   SUPPORTED_LANGUAGES,
 } from 'benefit/applicant/constants';
 import useLocale from 'benefit/applicant/hooks/useLocale';
+import { useTranslation } from 'benefit/applicant/i18n';
 import { BackendEndpoint } from 'benefit-shared/backend-api/backend-api';
-import { CookieModal, CookiePage } from 'hds-react';
+import { Button, Container, CookieModal, CookiePage } from 'hds-react';
+import { useSearchParams } from 'next/navigation';
 import { useRouter } from 'next/router';
 import React from 'react';
 import useBackendAPI from 'shared/hooks/useBackendAPI';
@@ -14,6 +17,8 @@ const CookieConsent: React.FC<{ asPage?: boolean }> = ({ asPage = false }) => {
   const router = useRouter();
   const { axios } = useBackendAPI();
   const { pathname, asPath, query } = router;
+  const { t } = useTranslation();
+  const submittedApplication = useSearchParams().get('submittedApplication');
 
   const onLanguageChange = (newLanguage: SUPPORTED_LANGUAGES): void => {
     void axios.get(BackendEndpoint.USER_OPTIONS, {
@@ -84,8 +89,26 @@ const CookieConsent: React.FC<{ asPage?: boolean }> = ({ asPage = false }) => {
     focusTargetSelector: '#main_content',
   };
 
+  const handleBack = (): void => {
+    if (submittedApplication) {
+      void router.push({
+        pathname: ROUTES.APPLICATION_FORM,
+        query: { id: submittedApplication, isSubmitted: true },
+      });
+    } else {
+      void router.back();
+    }
+  };
+
   return asPage ? (
-    <CookiePage contentSource={contentSource} />
+    <>
+      <CookiePage contentSource={contentSource} />
+      <Container>
+        <Button onClick={handleBack}>
+          {t('common:applications.actions.back')}
+        </Button>
+      </Container>
+    </>
   ) : (
     <CookieModal contentSource={contentSource} />
   );

diff --git a/frontend/benefit/applicant/src/components/cookieConsent/NoCookieConsentsNotification.tsx b/frontend/benefit/applicant/src/components/cookieConsent/NoCookieConsentsNotification.tsx
@@ -0,0 +1,27 @@
+import { ROUTES } from 'benefit/applicant/constants';
+import { useTranslation } from 'benefit/applicant/i18n';
+import { Button, Notification } from 'hds-react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+const NoCookieConsentsNotification: React.FC<{
+  submittedApplication: string;
+}> = ({ submittedApplication }) => {
+  const { t } = useTranslation();
+  const tBase = 'common:cookieNotification';
+  const router = useRouter();
+  const handleEditClick = (): void => {
+    void router.push({
+      pathname: ROUTES.COOKIE_SETTINGS,
+      query: { submittedApplication },
+    });
+  };
+  return (
+    <Notification label={t(`${tBase}.title`)}>
+      <p>{t(`${tBase}.text`)}</p>
+      <Button onClick={handleEditClick}>{t(`${tBase}.button`)}</Button>
+    </Notification>
+  );
+};
+
+export default NoCookieConsentsNotification;
diff --git a/frontend/benefit/applicant/src/components/notificationView/NotificationView.tsx b/frontend/benefit/applicant/src/components/notificationView/NotificationView.tsx
@@ -15,11 +15,16 @@ import {
 } from './NotificatinsView.sc';
 
 type Props = {
+  applicationId: string;
   title: string;
   message: string;
 };
 
-const NotificationView: React.FC<Props> = ({ title, message }) => {
+const NotificationView: React.FC<Props> = ({
+  applicationId,
+  title,
+  message,
+}) => {
   const { t } = useTranslation();
   const router = useRouter();
 
@@ -28,7 +33,10 @@ const NotificationView: React.FC<Props> = ({ title, message }) => {
   };
 
   const handleReload = (): void => {
-    void router.reload();
+    void router.push({
+      pathname: ROUTES.APPLICATION_FORM,
+      query: { id: applicationId },
+    });
   };
 
   return (

diff --git a/frontend/benefit/applicant/src/utils/cookie.ts b/frontend/benefit/applicant/src/utils/cookie.ts
@@ -1,10 +1,11 @@
+import { HELSINKI_CONSENT_COOKIE_NAME } from 'benefit-shared/constants';
 import { getLastCookieValue } from 'shared/cookies/get-last-cookie-value';
 
 import type { ConsentsCookie } from '../types/common';
 
 const parseConsentsCookie = (): ConsentsCookie | undefined => {
   const consentsCookieEncoded = getLastCookieValue(
-    'city-of-helsinki-cookie-consents'
+    HELSINKI_CONSENT_COOKIE_NAME
   );
   if (!consentsCookieEncoded) {
     return undefined;

diff --git a/frontend/benefit/shared/src/constants.ts b/frontend/benefit/shared/src/constants.ts
@@ -198,3 +198,5 @@ export enum CALCULATION_ROW_DESCRIPTION_TYPES {
   DATE_TOTAL = 'date_total',
   DEDUCTION = 'deduction',
 }
+
+export const HELSINKI_CONSENT_COOKIE_NAME = 'city-of-helsinki-cookie-consents'