diff --git a/frontend/benefit/applicant/src/components/applications/Applications.sc.ts b/frontend/benefit/applicant/src/components/applications/Applications.sc.ts index 896b402afc..6ebef41a93 100644 --- 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 index ce05e0661a..88c363ebe0 100644 --- 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 ( - + <> + + {canShowAskem && ( + + <$Hr /> + <$AskemContainer> + <$AskemItem /> + <$AskemItem> +
+ + + <$Hr /> + + )} + ); } diff --git a/frontend/benefit/applicant/src/components/cookieConsent/CookieConsent.tsx b/frontend/benefit/applicant/src/components/cookieConsent/CookieConsent.tsx index 959ef2bb1d..c60284410a 100644 --- 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 ; diff --git a/frontend/benefit/applicant/src/components/notificationView/NotificatinsView.sc.ts b/frontend/benefit/applicant/src/components/notificationView/NotificatinsView.sc.ts index 5689ede132..fb46df5c7e 100644 --- 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 index cd89f72519..30df24cc2c 100644 --- 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 index 16217dfc39..9a3beaa172 100644 --- 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) => { const router = useRouter(); const { t } = useTranslation(); - useAskem('true', router.locale, 'Helsinki-lisä'); useEffect(() => { setAppLoaded(); @@ -70,7 +68,6 @@ const App: React.FC = (appProps) => { title={!isServerSide() && document.title} {...appProps} /> -
diff --git a/frontend/benefit/applicant/src/types/common.d.ts b/frontend/benefit/applicant/src/types/common.d.ts index e0b3e66763..bc6edf89fa 100644 --- 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; } + +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 new file mode 100644 index 0000000000..0acf31900a --- /dev/null +++ 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'; +};