feat: finalize cookie logic

City-of-Helsinki · Dec 4, 2023 · d21bf31 · d21bf31
1 parent 907f9f6
commit d21bf31
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 33 deletions.
diff --git a/frontend/benefit/applicant/src/components/applications/Applications.sc.ts b/frontend/benefit/applicant/src/components/applications/Applications.sc.ts
@@ -49,3 +49,24 @@ export const $SpinnerContainer = styled.div`
 `;
 
 export const $Empty = styled.div``;
+
+export const $AskemContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: 129px;
+  margin: 0;
+  padding-left: ${(props) => props.theme.spacing.l};
+  padding-right: ${(props) => props.theme.spacing.l};
+  ${respondAbove('sm')`
+    flex-direction: row;
+
+  `}
+`;
+
+export const $AskemItem = styled.div`
+  display: flex;
+  flex-flow: column;
+  ${respondAbove('sm')`
+    min-width: 13%;
+  `}
+`;
diff --git a/frontend/benefit/applicant/src/components/applications/pageContent/PageContent.tsx b/frontend/benefit/applicant/src/components/applications/pageContent/PageContent.tsx
@@ -12,7 +12,9 @@ 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 { $Hr } from 'benefit/applicant/components/pages/Pages.sc';
 import { SUBMITTED_STATUSES } from 'benefit/applicant/constants';
+import { useAskem } from 'benefit/applicant/hooks/useAnalytics';
 import { IconInfoCircleFill, LoadingSpinner, Stepper } from 'hds-react';
 import { useRouter } from 'next/router';
 import React, { useEffect } from 'react';
@@ -24,6 +26,7 @@ import { useTheme } from 'styled-components';
 import ErrorPage from '../../errorPage/ErrorPage';
 import { $Notification } from '../../Notification/Notification.sc';
 import NotificationView from '../../notificationView/NotificationView';
+import { $AskemContainer, $AskemItem } from '../Applications.sc';
 import { usePageContent } from './usePageContent';
 
 const stepperCss = {
@@ -49,8 +52,12 @@ const PageContent: React.FC = () => {
   } = usePageContent();
 
   const theme = useTheme();
-
   const router = useRouter();
+  const canShowAskem = useAskem(
+    router.locale,
+    isSubmittedApplication,
+    isLoading
+  );
 
   useEffect(() => {
     if (isReadOnly) document.title = t('common:pageTitles.viewApplication');
@@ -83,16 +90,30 @@ const PageContent: React.FC = () => {
 
   if (isSubmittedApplication) {
     return (
-      <NotificationView
-        title={t('common:notifications.applicationSubmitted.label')}
-        message={t('common:notifications.applicationSubmitted.message', {
-          applicationNumber: application?.applicationNumber,
-          applicantName: getFullName(
-            application?.employee?.firstName,
-            application?.employee?.lastName
-          ),
-        })}
-      />
+      <>
+        <NotificationView
+          title={t('common:notifications.applicationSubmitted.label')}
+          message={t('common:notifications.applicationSubmitted.message', {
+            applicationNumber: application?.applicationNumber,
+            applicantName: getFullName(
+              application?.employee?.firstName,
+              application?.employee?.lastName
+            ),
+          })}
+        />
+        {canShowAskem && (
+          <Container>
+            <$Hr />
+            <$AskemContainer>
+              <$AskemItem />
+              <$AskemItem>
+                <div className="rns" />
+              </$AskemItem>
+            </$AskemContainer>
+            <$Hr />
+          </Container>
+        )}
+      </>
     );
   }
 

diff --git a/frontend/benefit/applicant/src/components/cookieConsent/CookieConsent.tsx b/frontend/benefit/applicant/src/components/cookieConsent/CookieConsent.tsx
@@ -80,9 +80,6 @@ const CookieConsent: React.FC = () => {
       onLanguageChange,
     },
     focusTargetSelector: '#focused-element-after-cookie-consent-closed',
-    onAllConsentsGiven: (consents) => {
-      console.log(consents);
-    },
   };
 
   return <CookieModal contentSource={contentSource} />;

diff --git a/frontend/benefit/applicant/src/components/notificationView/NotificatinsView.sc.ts b/frontend/benefit/applicant/src/components/notificationView/NotificatinsView.sc.ts
@@ -5,14 +5,13 @@ import styled from 'styled-components';
 export const $Notification = styled.div`
   display: flex;
   flex-direction: column;
-  margin: ${(props) => props.theme.spacing.xl} 0
-    ${(props) => props.theme.spacing.xl} 0;
+  margin-top: ${(props) => props.theme.spacing.xl};
   padding: ${(props) => props.theme.spacing.l};
   background: ${(props) => props.theme.colors.fogLight};
 
   ${respondAbove('sm')`
     flex-direction: row;
-  
+
   `}
 `;
 

diff --git a/frontend/benefit/applicant/src/hooks/useAnalytics.ts b/frontend/benefit/applicant/src/hooks/useAnalytics.ts
@@ -1,32 +1,33 @@
 import { useEffect } from 'react';
 
+import { canShowAskem } from '../utils/cookie';
+
 export const useAskem = (
-  cookieConsent: string,
   lang: string | undefined,
-  pageTitle: string
-): any => {
+  isSubmittedApplication: boolean,
+  isLoading: boolean
+): boolean => {
+  const showAskem = canShowAskem(lang);
   useEffect(() => {
-    if (cookieConsent !== 'true') {
-      return;
+    if (!canShowAskem || isLoading) {
+      return () => {};
     }
 
-    const askemApiKey = process.env.NEXT_PUBLIC_ASKEM_API_KEY;
-
     const script = document.createElement('script');
-    const resourceUrl = 'https://cdn.reactandshare.com/plugin/rns.js';
-    script.src = resourceUrl;
+    // eslint-disable-next-line scanjs-rules/assign_to_src
+    script.src = 'https://cdn.reactandshare.com/plugin/rns.js';
     script.type = 'text/javascript';
 
     window.rnsData = {
-      apiKey: askemApiKey,
-      title: pageTitle || 'Helsinki-lisä',
+      apiKey: process.env.NEXT_PUBLIC_ASKEM_API_KEY,
+      title: 'Helsinki-lisä',
       canonicalUrl: window.location.href,
-      categories: ['Helsinki-lisä'],
     };
 
     document.body.append(script);
     return () => {
       script.remove();
     };
-  }, [cookieConsent, lang]);
+  }, [lang, isSubmittedApplication, isLoading, showAskem]);
+  return showAskem;
 };
diff --git a/frontend/benefit/applicant/src/pages/_app.tsx b/frontend/benefit/applicant/src/pages/_app.tsx
@@ -6,7 +6,6 @@ import 'hds-design-tokens';
 import AuthProvider from 'benefit/applicant/auth/AuthProvider';
 import CookieConsent from 'benefit/applicant/components/cookieConsent/CookieConsent';
 import Layout from 'benefit/applicant/components/layout/Layout';
-import { useAskem } from 'benefit/applicant/hooks/useAnalytics';
 import useLocale from 'benefit/applicant/hooks/useLocale';
 import { appWithTranslation } from 'benefit/applicant/i18n';
 import {
@@ -33,7 +32,6 @@ const App: React.FC<AppProps> = (appProps) => {
   const router = useRouter();
 
   const { t } = useTranslation();
-  useAskem('true', router.locale, 'Helsinki-lisä');
 
   useEffect(() => {
     setAppLoaded();
@@ -70,7 +68,6 @@ const App: React.FC<AppProps> = (appProps) => {
             title={!isServerSide() && document.title}
             {...appProps}
           />
-          <div className="rns" />
         </AuthProvider>
       </QueryClientProvider>
     </BackendAPIProvider>

diff --git a/frontend/benefit/applicant/src/types/common.d.ts b/frontend/benefit/applicant/src/types/common.d.ts
@@ -15,3 +15,22 @@ interface ErrorResponse {
 interface ErrorData {
   data?: Record<string, string[]>;
 }
+
+type RNSData = {
+  apiKey: string;
+  title: string;
+  canonicalUrl: string;
+};
+
+export type ConsentsCookie = {
+  'city-of-helsinki-cookie-consents': boolean;
+  rns: boolean;
+  rnsbid_ts: boolean;
+  rns_reaction: boolean;
+};
+
+declare global {
+  interface Window {
+    rnsData: RNSData;
+  }
+}
diff --git a/frontend/benefit/applicant/src/utils/cookie.ts b/frontend/benefit/applicant/src/utils/cookie.ts
@@ -0,0 +1,19 @@
+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'
+  );
+  if (!consentsCookieEncoded) {
+    return undefined;
+  }
+  const consentsCookieString = decodeURIComponent(consentsCookieEncoded);
+  return JSON.parse(consentsCookieString) as ConsentsCookie;
+};
+
+export const canShowAskem = (lang: string): boolean => {
+  const consentsCookie = parseConsentsCookie();
+  return consentsCookie && consentsCookie.rns && lang === 'fi';
+};