Merge pull request #216 from AppQuality/CUP-1271-translate-strapi-content-when-possible

feat(service): show translated data if content is available

Author: cannarocks

src/pages/Service/ServiceTimeline.tsx

@@ -17,6 +17,8 @@ import { ReactComponent as CheckIcon } from 'src/assets/icons/check-icon.svg';
 import { ServiceResponse } from 'src/features/backoffice';
 import { Link } from 'react-scroll';
 import { extractStrapiData } from 'src/common/getStrapiData';
+import { getLocalizedStrapiData } from 'src/common/utils';
+import i18n from 'src/i18n';
 import { ServiceExpressCta } from './ServiceExpressCta';
 import { ServiceContactUsCta } from './ServiceContactUsCta';
 
@@ -112,9 +114,11 @@ const ServiceTimeline = ({
   onContactClick: () => void;
 }) => {
   const { t } = useTranslation();
-  const { data: serviceData } = response;
   const STRAPI_URL = process.env.REACT_APP_STRAPI_URL || '';
-  const service = extractStrapiData({ data: serviceData });
+  const service = getLocalizedStrapiData({
+    item: response,
+    language: i18n.language,
+  });
   const express = extractStrapiData(service.express);
   const expressType = extractStrapiData(express.express_type);
 

src/pages/Service/SingleServicePageHeader.tsx

@@ -19,6 +19,8 @@ import { ReactComponent as FunctionalIcon } from 'src/assets/icons/functional-ic
 import { ReactComponent as EnvironmentIcon } from 'src/assets/icons/environment-icon.svg';
 import { ReactComponent as TimeIcon } from 'src/assets/icons/time-icon.svg';
 import { extractStrapiData } from 'src/common/getStrapiData';
+import { getLocalizedStrapiData } from 'src/common/utils';
+import i18n from 'src/i18n';
 import { ServiceExpressCta } from './ServiceExpressCta';
 import { ServiceContactUsCta } from './ServiceContactUsCta';
 
@@ -42,12 +44,14 @@ export const SingleServicePageHeader = ({
 }) => {
   const navigate = useNavigate();
   const { t } = useTranslation();
-  const { data: serviceData } = response;
   const { activeWorkspace } = useAppSelector((state) => state.navigation);
   const servicesRoute = useLocalizeRoute('services');
   const homeRoute = useLocalizeRoute('');
   const STRAPI_URL = process.env.REACT_APP_STRAPI_URL || '';
-  const service = extractStrapiData({ data: serviceData });
+  const service = getLocalizedStrapiData({
+    item: response,
+    language: i18n.language,
+  });
 
   // Strapi response
   const days = service.duration_in_days ?? 3;

src/pages/Service/index.tsx

@@ -8,11 +8,12 @@ import { useAppDispatch, useAppSelector } from 'src/app/hooks';
 import { openWizard } from 'src/features/express/expressSlice';
 import { useGetFullServicesByIdQuery } from 'src/features/backoffice/strapi';
 import PageLoader from 'src/features/templates/PageLoader';
-import { extractStrapiData } from 'src/common/getStrapiData';
 import { HubspotModal } from 'src/common/components/HubspotModal';
-import { checkHubspotURL } from 'src/common/utils';
+import { checkHubspotURL, getLocalizedStrapiData } from 'src/common/utils';
+import i18n from 'src/i18n';
 import { ServiceTimeline } from './ServiceTimeline';
 import { SingleServicePageHeader } from './SingleServicePageHeader';
+import { strapiParams } from './strapi';
 
 const Service = () => {
   const { templateId } = useParams();
@@ -33,45 +34,22 @@ const Service = () => {
   const { data, isLoading, isError } = useGetFullServicesByIdQuery({
     id: templateId || '',
     populate: {
-      output_image: '*',
-      requirements: {
+      ...strapiParams,
+      localizations: {
         populate: {
-          description: {
-            populate: '*',
-          },
-          list: {
-            populate: '*',
-          },
+          ...strapiParams,
         },
       },
-      why: {
-        populate: {
-          reasons: {
-            populate: '*',
-          },
-          advantages: {
-            populate: '*',
-          },
-        },
-      },
-      what: { populate: '*' },
-      how: {
-        populate: {
-          timeline: {
-            populate: '*',
-          },
-        },
-      },
-      express: {
-        populate: { express_type: '*' },
-      },
     },
   });
 
   let service;
 
   if (data) {
-    service = extractStrapiData(data);
+    service = getLocalizedStrapiData({
+      item: data,
+      language: i18n.language,
+    });
   }
 
   if (isError) {

src/pages/Service/strapi.ts

@@ -0,0 +1,34 @@
+export const strapiParams = {
+  output_image: '*',
+  requirements: {
+    populate: {
+      description: {
+        populate: '*',
+      },
+      list: {
+        populate: '*',
+      },
+    },
+  },
+  why: {
+    populate: {
+      reasons: {
+        populate: '*',
+      },
+      advantages: {
+        populate: '*',
+      },
+    },
+  },
+  what: { populate: '*' },
+  how: {
+    populate: {
+      timeline: {
+        populate: '*',
+      },
+    },
+  },
+  express: {
+    populate: { express_type: '*' },
+  },
+};