feat: react and share (Askem) component

apps/events-helsinki/src/constants.ts

@@ -1,11 +1,13 @@
 export const ROUTES = {
+  FRONT_PAGE: '/',
   SEARCH: '/search',
   EVENTS: '/events/[eventId]',
   ARTICLE_ARCHIVE: '/article-archive',
   ARTICLES: '/articles/[...slug]',
   PAGES: '/pages/[...slug]',
   LINK: '',
   VENUES: '/venues/[venueId]',
+  COOKIE_CONSENT: '/cookie-consent',
 };
 
 export const AUTOSUGGEST_KEYWORD_BLACK_LIST = [

apps/events-helsinki/src/domain/app/AppConfig.ts

@@ -92,6 +92,20 @@ class AppConfig {
     };
   }
 
+  static askemFeedbackConfiguration(locale: 'en' | 'fi' | 'sv') {
+    const askemEnabled = process.env.NEXT_PUBLIC_ASKEM_ENABLED;
+    let askemApiKey = process.env.NEXT_PUBLIC_ASKEM_API_KEY_FI;
+    if (locale === 'en') {
+      askemApiKey = process.env.NEXT_PUBLIC_ASKEM_API_KEY_EN;
+    } else if (locale === 'sv') {
+      askemApiKey = process.env.NEXT_PUBLIC_ASKEM_API_KEY_SV;
+    }
+    return {
+      disabled: !parseEnvValue(askemEnabled),
+      apiKey: askemApiKey as string,
+    };
+  }
+
   static get defaultRevalidate() {
     const envValue = process.env.NEXT_PUBLIC_DEFAULT_ISR_REVALIDATE_SECONDS;
     const value = envValue ? parseEnvValue(envValue) : 60;

apps/events-helsinki/src/domain/cookieConsent/ConsentPageContent.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import styles from './consentPageContent.module.scss';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const ConsentPageContent: React.FC<Props> = ({ children }) => {
+  return <div className={styles.container}>{children}</div>;
+};
+
+export default ConsentPageContent;

apps/events-helsinki/src/domain/cookieConsent/consentPageContent.module.scss

@@ -0,0 +1,3 @@
+.container {
+  margin-bottom: var(--spacing-3-xl);
+}

apps/events-helsinki/src/pages/_app.tsx

@@ -1,13 +1,19 @@
 import 'nprogress/nprogress.css';
 import type { NavigationProviderProps } from '@events-helsinki/components';
-import { BaseApp, useCommonTranslation } from '@events-helsinki/components';
+import {
+  useLocale,
+  BaseApp,
+  useCommonTranslation,
+} from '@events-helsinki/components';
 import type { AppProps as NextAppProps } from 'next/app';
+import { useRouter } from 'next/router';
 import type { SSRConfig } from 'next-i18next';
 import { appWithTranslation } from 'next-i18next';
 import React from 'react';
 
 import '../styles/globals.scss';
 import nextI18nextConfig from '../../next-i18next.config';
+import { ROUTES } from '../constants';
 import AppConfig from '../domain/app/AppConfig';
 import EventsApolloProvider from '../domain/app/EventsApolloProvider';
 import cmsHelper from '../domain/app/headlessCmsHelper';
@@ -22,6 +28,8 @@ export type CustomPageProps = NavigationProviderProps & SSRConfig;
 
 function MyApp({ Component, pageProps }: AppProps<CustomPageProps>) {
   const { t } = useCommonTranslation();
+  const locale = useLocale();
+  const { asPath, pathname } = useRouter();
 
   return (
     <EventsApolloProvider>
@@ -30,6 +38,11 @@ function MyApp({ Component, pageProps }: AppProps<CustomPageProps>) {
         cmsHelper={cmsHelper}
         routerHelper={routerHelper}
         matomoConfiguration={AppConfig.matomoConfiguration}
+        askemFeedbackConfiguration={AppConfig.askemFeedbackConfiguration(
+          locale
+        )}
+        withConsent={pathname !== ROUTES.COOKIE_CONSENT}
+        asPath={asPath}
         {...pageProps}
       >
         <Component {...pageProps} />

apps/events-helsinki/src/pages/articles/index.tsx

@@ -197,6 +197,7 @@ export default function ArticleArchive({
           <FooterSection
             menu={footerMenu}
             appName={commonT('appEvents:appName')}
+            feedbackWithPadding
           />
         }
       />

apps/events-helsinki/src/pages/cookie-consent/index.tsx

@@ -0,0 +1,77 @@
+import {
+  NavigationContext,
+  Navigation,
+  MatomoWrapper,
+  useCommonTranslation,
+  FooterSection,
+  getLanguageOrDefault,
+  usePageScrollRestoration,
+  EventsCookieConsent,
+} from '@events-helsinki/components';
+import type { GetStaticPropsContext } from 'next';
+import { useRouter } from 'next/router';
+import React, { useCallback, useContext } from 'react';
+import { Page as HCRCApolloPage } from 'react-helsinki-headless-cms/apollo';
+import { ROUTES } from '../../constants';
+import getEventsStaticProps from '../../domain/app/getEventsStaticProps';
+import ConsentPageContent from '../../domain/cookieConsent/ConsentPageContent';
+import serverSideTranslationsWithCommon from '../../domain/i18n/serverSideTranslationsWithCommon';
+
+export default function CookieConsent() {
+  const { footerMenu } = useContext(NavigationContext);
+  const { t } = useCommonTranslation();
+  const router = useRouter();
+  /* 
+  // bug or feature: query is empty in handleRedirect
+  const router = useRouter();
+  const params: { returnPath?: string } = router.query; */
+
+  const handleRedirect = useCallback(() => {
+    if (window) {
+      const urlSearchParams = new URLSearchParams(window.location.search);
+      const returnPath: string | null = urlSearchParams.get('returnPath');
+      if (returnPath) {
+        router.push(returnPath);
+      }
+    }
+  }, [router]);
+
+  usePageScrollRestoration();
+
+  return (
+    <MatomoWrapper>
+      <HCRCApolloPage
+        uri={ROUTES.COOKIE_CONSENT}
+        className="pageLayout"
+        navigation={<Navigation />}
+        content={
+          <ConsentPageContent>
+            <EventsCookieConsent
+              appName={t('appSports:appName')}
+              isModal={false}
+              onConsentGiven={handleRedirect}
+            />
+          </ConsentPageContent>
+        }
+        footer={
+          <FooterSection
+            menu={footerMenu}
+            appName={t('appSports:appName')}
+            hasFeedBack={false}
+          />
+        }
+      />
+    </MatomoWrapper>
+  );
+}
+
+export async function getStaticProps(context: GetStaticPropsContext) {
+  return getEventsStaticProps(context, async () => {
+    const language = getLanguageOrDefault(context.locale);
+    return {
+      props: {
+        ...(await serverSideTranslationsWithCommon(language)),
+      },
+    };
+  });
+}

apps/events-helsinki/src/pages/index.tsx

@@ -61,7 +61,11 @@ const HomePage: NextPage<{
           />
         }
         footer={
-          <FooterSection menu={footerMenu} appName={t('appEvents:appName')} />
+          <FooterSection
+            menu={footerMenu}
+            appName={t('appEvents:appName')}
+            hasFeedBack={false}
+          />
         }
       />
     </MatomoWrapper>

apps/events-helsinki/src/pages/search/index.tsx

@@ -58,6 +58,7 @@ export default function Search() {
           <FooterSection
             menu={footerMenu}
             appName={tAppEvents('appEvents:appName')}
+            feedbackWithPadding
           />
         }
       />

apps/hobbies-helsinki/src/constants.ts

@@ -1,11 +1,13 @@
 export const ROUTES = {
+  FRONT_PAGE: '/',
   SEARCH: '/search',
   COURSES: '/courses/[eventId]',
   ARTICLE_ARCHIVE: '/article-archive',
   ARTICLES: '/articles/[...slug]',
   PAGES: '/pages/[...slug]',
   VENUES: '/venues/[venueId]',
   LINK: '',
+  COOKIE_CONSENT: '/cookie-consent',
 };
 
 export const AUTOSUGGEST_KEYWORD_BLACK_LIST = [

apps/hobbies-helsinki/src/domain/app/AppConfig.ts

@@ -92,6 +92,20 @@ class AppConfig {
     };
   }
 
+  static askemFeedbackConfiguration(locale: 'en' | 'fi' | 'sv') {
+    const askemEnabled = process.env.NEXT_PUBLIC_ASKEM_ENABLED;
+    let askemApiKey = process.env.NEXT_PUBLIC_ASKEM_API_KEY_FI;
+    if (locale === 'en') {
+      askemApiKey = process.env.NEXT_PUBLIC_ASKEM_API_KEY_EN;
+    } else if (locale === 'sv') {
+      askemApiKey = process.env.NEXT_PUBLIC_ASKEM_API_KEY_SV;
+    }
+    return {
+      disabled: !parseEnvValue(askemEnabled),
+      apiKey: askemApiKey as string,
+    };
+  }
+
   static get defaultRevalidate() {
     const envValue = process.env.NEXT_PUBLIC_DEFAULT_ISR_REVALIDATE_SECONDS;
     const value = envValue ? parseEnvValue(envValue) : 60;

apps/hobbies-helsinki/src/domain/cookieConsent/ConsentPageContent.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import styles from './consentPageContent.module.scss';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const ConsentPageContent: React.FC<Props> = ({ children }) => {
+  return <div className={styles.container}>{children}</div>;
+};
+
+export default ConsentPageContent;

apps/hobbies-helsinki/src/domain/cookieConsent/consentPageContent.module.scss

@@ -0,0 +1,3 @@
+.container {
+  margin-bottom: var(--spacing-3-xl);
+}

apps/hobbies-helsinki/src/pages/_app.tsx

@@ -1,12 +1,18 @@
 import 'nprogress/nprogress.css';
 import type { NavigationProviderProps } from '@events-helsinki/components';
-import { BaseApp, useCommonTranslation } from '@events-helsinki/components';
+import {
+  useLocale,
+  BaseApp,
+  useCommonTranslation,
+} from '@events-helsinki/components';
+import { useRouter } from 'next/router';
 import type { SSRConfig } from 'next-i18next';
 import { appWithTranslation } from 'next-i18next';
 import React from 'react';
 
 import '../styles/globals.scss';
 import nextI18nextConfig from '../../next-i18next.config';
+import { ROUTES } from '../constants';
 import AppConfig from '../domain/app/AppConfig';
 import cmsHelper from '../domain/app/headlessCmsHelper';
 import HobbiesApolloProvider from '../domain/app/HobbiesApolloProvider';
@@ -22,6 +28,8 @@ export type CustomPageProps = NavigationProviderProps & SSRConfig;
 
 function MyApp({ Component, pageProps }: AppProps<CustomPageProps>) {
   const { t } = useCommonTranslation();
+  const locale = useLocale();
+  const { asPath, pathname } = useRouter();
 
   return (
     <HobbiesApolloProvider>
@@ -30,6 +38,11 @@ function MyApp({ Component, pageProps }: AppProps<CustomPageProps>) {
         cmsHelper={cmsHelper}
         routerHelper={routerHelper}
         matomoConfiguration={AppConfig.matomoConfiguration}
+        askemFeedbackConfiguration={AppConfig.askemFeedbackConfiguration(
+          locale
+        )}
+        withConsent={pathname !== ROUTES.COOKIE_CONSENT}
+        asPath={asPath}
         {...pageProps}
       >
         <Component {...pageProps} />

apps/hobbies-helsinki/src/pages/articles/index.tsx

@@ -197,6 +197,7 @@ export default function ArticleArchive({
           <FooterSection
             menu={footerMenu}
             appName={commonT('appHobbies:appName')}
+            feedbackWithPadding
           />
         }
       />

apps/hobbies-helsinki/src/pages/cookie-consent/index.tsx

@@ -0,0 +1,77 @@
+import {
+  NavigationContext,
+  Navigation,
+  MatomoWrapper,
+  useCommonTranslation,
+  FooterSection,
+  getLanguageOrDefault,
+  usePageScrollRestoration,
+  EventsCookieConsent,
+} from '@events-helsinki/components';
+import type { GetStaticPropsContext } from 'next';
+import { useRouter } from 'next/router';
+import React, { useCallback, useContext } from 'react';
+import { Page as HCRCApolloPage } from 'react-helsinki-headless-cms/apollo';
+import { ROUTES } from '../../constants';
+import getHobbiesStaticProps from '../../domain/app/getHobbiesStaticProps';
+import ConsentPageContent from '../../domain/cookieConsent/ConsentPageContent';
+import serverSideTranslationsWithCommon from '../../domain/i18n/serverSideTranslationsWithCommon';
+
+export default function CookieConsent() {
+  const { footerMenu } = useContext(NavigationContext);
+  const { t } = useCommonTranslation();
+  const router = useRouter();
+  /* 
+  // bug or feature: query is empty in handleRedirect
+  const router = useRouter();
+  const params: { returnPath?: string } = router.query; */
+
+  const handleRedirect = useCallback(() => {
+    if (window) {
+      const urlSearchParams = new URLSearchParams(window.location.search);
+      const returnPath: string | null = urlSearchParams.get('returnPath');
+      if (returnPath) {
+        router.push(returnPath);
+      }
+    }
+  }, [router]);
+
+  usePageScrollRestoration();
+
+  return (
+    <MatomoWrapper>
+      <HCRCApolloPage
+        uri={ROUTES.COOKIE_CONSENT}
+        className="pageLayout"
+        navigation={<Navigation />}
+        content={
+          <ConsentPageContent>
+            <EventsCookieConsent
+              appName={t('appSports:appName')}
+              isModal={false}
+              onConsentGiven={handleRedirect}
+            />
+          </ConsentPageContent>
+        }
+        footer={
+          <FooterSection
+            menu={footerMenu}
+            appName={t('appSports:appName')}
+            hasFeedBack={false}
+          />
+        }
+      />
+    </MatomoWrapper>
+  );
+}
+
+export async function getStaticProps(context: GetStaticPropsContext) {
+  return getHobbiesStaticProps(context, async () => {
+    const language = getLanguageOrDefault(context.locale);
+    return {
+      props: {
+        ...(await serverSideTranslationsWithCommon(language)),
+      },
+    };
+  });
+}

apps/hobbies-helsinki/src/pages/index.tsx

@@ -60,7 +60,11 @@ const HomePage: NextPage<{
           />
         }
         footer={
-          <FooterSection menu={footerMenu} appName={t('appHobbies:appName')} />
+          <FooterSection
+            menu={footerMenu}
+            appName={t('appHobbies:appName')}
+            hasFeedBack={false}
+          />
         }
       />
     </MatomoWrapper>