Allow the display of different suggestions groups depending on the lang

docs/customization.md

@@ -40,7 +40,63 @@ In json files, you can just override the primary keys you need. You have to over
 
 - `header.json` to define logo URL, default and available languages, number items to flatpages to display in navbar (see default values in https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/header.json)
 
-- `home.json` to define homepage settings. You can define blocks to display and trek suggestion block with treks ID, outdoor sites ID, services ID or events ID to highlight on homepage (see https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/customization/config/home.json).
+- `home.json` to define homepage settings.
+
+  - `suggestions`: You can define blocks to display suggestions groups with treks ID, outdoor sites ID, services ID or events ID to highlight on homepage (see https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/customization/config/home.json).
+    Each group has the following properties :
+    ```typescript
+    {
+      "titleTranslationId": string, // you can use locales keys with the files inside `translations` folder
+      "iconUrl": string, // url to the icon file
+      "ids": string[] // list of ids ,
+      "type": 'trek' | 'service' | 'outdoor' | 'events' // if not set, default to `trek`
+    }
+    ```
+    There are two ways to displays suggestions groups:
+    - By using an `object` with the languages code as keys (feature available since 3.8.7 version). By this way you can optimize the valorization of a territory according to the selected language. If you don't need this feature (or if you want the same configuration for several language), use `default` key instead of a language code. The configuration in the example below displays 2 groups of suggestions for all languages except the English version with one different:
+    ```json
+    "suggestions": {
+      "default": [
+        {
+          "titleTranslationId": "home.territoryTreks",
+          "iconUrl": "/icons/practice-pedestrian.svg",
+          "ids": ["2", "582", "586", "501", "771", "596"],
+          "type": "trek"
+        },
+        {
+          "titleTranslationId": "home.events",
+          "iconUrl": "/icons/category-events.svg",
+          "ids": ["1", "5"],
+          "type": "events"
+        },
+      ],
+      "en": [
+        {
+          "titleTranslationId": "home.treksDiscovery",
+          "iconUrl": "/icons/pedestrian.svg",
+          "ids": ["2", "582", "586"],
+          "type": "trek"
+        },
+      ]
+    }
+    ```
+    - By using an `array`, this is the same behavior that `object` with only a `default` key. For example:
+      ```json
+      "suggestions": [
+        {
+          "titleTranslationId": "home.territoryTreks",
+          "iconUrl": "/icons/practice-pedestrian.svg",
+          "ids": ["2", "582", "586", "501", "771", "596"],
+          "type": "trek"
+        },
+        {
+          "titleTranslationId": "home.events",
+          "iconUrl": "/icons/category-events.svg",
+          "ids": ["1", "5"],
+          "type": "events"
+        },
+      ]
+      ```
 
   - In `welcomeBanner`, you can personnalize the cover on the homepage. You can add an asset on the top of the page: it can either be a video, a single picture or a carousel of images:
 

frontend/src/components/pages/home/useHome.ts

@@ -2,20 +2,30 @@ import { flatten } from 'lodash';
 import { getActivitySuggestions } from 'modules/activitySuggestions/connector';
 import { ActivitySuggestion } from 'modules/activitySuggestions/interface';
 import { getDefaultLanguage } from 'modules/header/utills';
-import { getHomePageConfig } from 'modules/home/utils';
+import { HomePageConfig } from 'modules/home/interface';
+import { adaptSuggestions, getHomePageConfig } from 'modules/home/utils';
 import { useRouter } from 'next/router';
 import { useQuery } from 'react-query';
+interface UseHome {
+  config: HomePageConfig;
+  suggestions: ActivitySuggestion[];
+}
 
-export const useHome = () => {
+export const useHome = (): UseHome => {
   const homePageConfig = getHomePageConfig();
+  const language = useRouter().locale ?? getDefaultLanguage();
+  const suggestions = adaptSuggestions(homePageConfig.suggestions, language);
 
-  const activitySuggestionIds = flatten(homePageConfig.suggestions.map(s => s.ids));
+  if (suggestions === null) {
+    return { config: homePageConfig, suggestions: [] };
+  }
 
-  const language = useRouter().locale ?? getDefaultLanguage();
-  const { data: suggestions } = useQuery<ActivitySuggestion[], Error>(
+  const activitySuggestionIds = flatten(suggestions.map(s => s.ids));
+
+  const { data = [] } = useQuery<ActivitySuggestion[], Error>(
     ['activitySuggestions', activitySuggestionIds.join('-'), language],
-    () => getActivitySuggestions(homePageConfig.suggestions, language),
+    () => getActivitySuggestions(suggestions, language),
   );
 
-  return { config: homePageConfig, suggestions: suggestions as ActivitySuggestion[] };
+  return { config: homePageConfig, suggestions: data };
 };

frontend/src/modules/home/interface.ts

@@ -18,6 +18,13 @@ export interface Suggestion {
   type: 'trek' | 'service' | 'outdoor' | 'events';
 }
 
+/** @deprecated since 3.8.7 version */
+export type DeprecatedSuggestionList = Array<Suggestion>;
+
+export interface SuggestionList {
+  [language: 'default' | string]: Suggestion[];
+}
+
 export interface DisplayableSuggestionCategory {
   titleTranslationId: string;
   iconUrl: string;

frontend/src/modules/home/utils.ts

@@ -1,5 +1,5 @@
 import getNextConfig from 'next/config';
-import { HomePageConfig } from './interface';
+import { DeprecatedSuggestionList, HomePageConfig, Suggestion, SuggestionList } from './interface';
 
 export const getHomePageConfig = (): HomePageConfig => {
   const {
@@ -8,3 +8,19 @@ export const getHomePageConfig = (): HomePageConfig => {
 
   return home;
 };
+
+export const adaptSuggestions = (
+  suggestions: DeprecatedSuggestionList | SuggestionList,
+  language: string,
+): Suggestion[] | null => {
+  //  Backward compatibility with versions prior to 3.8.7
+  if (Array.isArray(suggestions)) {
+    return suggestions;
+  }
+
+  if (language in suggestions) {
+    return suggestions[language];
+  }
+
+  return suggestions.default ?? null;
+};

frontend/src/pages/index.tsx

@@ -2,7 +2,7 @@ import { Home } from 'components/pages/home';
 import { flatten } from 'lodash';
 import { getActivityBarContent } from 'modules/activities/connector';
 import { getActivitySuggestions } from 'modules/activitySuggestions/connector';
-import { getHomePageConfig } from 'modules/home/utils';
+import { adaptSuggestions, getHomePageConfig } from 'modules/home/utils';
 
 import { QueryClient } from 'react-query';
 import { dehydrate } from 'react-query/hydration';
@@ -11,17 +11,20 @@ export const getServerSideProps = async (context: { locale: string }) => {
   const queryClient = new QueryClient();
 
   const homePageConfig = getHomePageConfig();
+  const suggestions = adaptSuggestions(homePageConfig.suggestions, context.locale);
 
-  const activitySuggestionIds = flatten(homePageConfig.suggestions.map(s => s.ids));
+  if (suggestions !== null) {
+    const activitySuggestionIds = flatten(suggestions.map(s => s.ids));
 
-  await queryClient.prefetchQuery(
-    ['activitySuggestions', activitySuggestionIds.join('-'), context.locale],
-    () => getActivitySuggestions(homePageConfig.suggestions, context.locale),
-  );
+    await queryClient.prefetchQuery(
+      ['activitySuggestions', activitySuggestionIds.join('-'), context.locale],
+      () => getActivitySuggestions(suggestions, context.locale),
+    );
 
-  await queryClient.prefetchQuery(`homeActivities-${context.locale}`, () =>
-    getActivityBarContent(context.locale),
-  );
+    await queryClient.prefetchQuery(`homeActivities-${context.locale}`, () =>
+      getActivityBarContent(context.locale),
+    );
+  }
 
   return {
     props: {