feat: SEO component prop name resolving

ChristopheCVB · ChristopheCVB · commit eaed2c0ea7d2 · 2025-03-18T12:34:44.000+01:00
diff --git a/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/index.jsx b/admin/src/components/CMEditView/RightLinksCompo/SeoChecks/index.jsx
@@ -20,16 +20,19 @@ import { getRichTextData } from '../../utils/getRichTextData';
 import { useIntl } from 'react-intl';
 import { getTrad } from '../../../../utils/getTrad';
 
-export const SeoChecks = ({ updatedAt, modifiedData, components, contentType, checks }) => {
+export const SeoChecks = ({ updatedAt, layout, modifiedData, components, contentType, checks }) => {
   const { formatMessage } = useIntl();
 
+  const seoPropName = Object.entries(layout.attributes).find(([, attr]) => attr.type === 'component' && attr.component === 'shared.seo')[0];
+  const seo = _.get(modifiedData, seoPropName, null);
+
   const { wordCount, keywordsDensity, emptyAltCount } = getRichTextData(
+    seo,
     modifiedData,
     components,
     contentType
   );
 
-  const seo = modifiedData?.seo ?? null;
   const hasSeo = seo && Object.keys(seo).length > 0;
 
   return (
diff --git a/admin/src/components/CMEditView/RightLinksCompo/Summary/BrowserPreview/index.jsx b/admin/src/components/CMEditView/RightLinksCompo/Summary/BrowserPreview/index.jsx
@@ -13,10 +13,11 @@ import { Illo } from '../../../../HomePage/Main/EmptyComponentLayout/illo';
 
 import { getTrad } from '../../../../../utils/getTrad';
 
-export const BrowserPreview = ({ modifiedData }) => {
+export const BrowserPreview = ({ layout, modifiedData }) => {
   const { formatMessage } = useIntl();
 
-  const seo = get(modifiedData, 'seo', null);
+  const seoPropName = Object.entries(layout.attributes).find(([, attr]) => attr.type === 'component' && attr.component === 'shared.seo')[0];
+  const seo = _.get(modifiedData, seoPropName, null);
   const metaTitle = get(seo, 'metaTitle', null);
   const metaDescription = get(seo, 'metaDescription', null);
   const keywords = get(seo, 'keywords', null);
diff --git a/admin/src/components/CMEditView/RightLinksCompo/Summary/OpenGraphPreview/index.jsx b/admin/src/components/CMEditView/RightLinksCompo/Summary/OpenGraphPreview/index.jsx
@@ -10,10 +10,12 @@ import { FacebookOGPreview } from './Facebook/index';
 import { TwitterOGPreview } from './X/index';
 import { LinkedInOGPreview } from './LinkedIn/index';
 
-export const OpenGraphPreview = ({ modifiedData }) => {
+export const OpenGraphPreview = ({ layout, modifiedData }) => {
   const { formatMessage } = useIntl();
 
-  const { openGraph } = modifiedData?.seo;
+  const seoPropName = Object.entries(layout.attributes).find(([, attr]) => attr.type === 'component' && attr.component === 'shared.seo')[0];
+  const seo = _.get(modifiedData, seoPropName, null);
+  const { openGraph } = seo;
 
   return (
     <Modal.Content labelledBy="title">
diff --git a/admin/src/components/CMEditView/RightLinksCompo/Summary/index.jsx b/admin/src/components/CMEditView/RightLinksCompo/Summary/index.jsx
@@ -45,7 +45,7 @@ export const Summary = () => {
   const [localChecks, setLocalChecks] = React.useState({});
   const [checks, dispatch] = React.useReducer(reducer, initialState);
 
-  const { model, collectionType, id, form, contentType, components } = useContentManagerContext();
+  const { layout, model, collectionType, id, form, contentType, components } = useContentManagerContext();
   const { values: modifiedData } = form;
 
   const { metaTitle, metaDescription, openGraph } = modifiedData.seo;
@@ -56,39 +56,43 @@ export const Summary = () => {
     documentId: id,
   });
 
-  const getAllChecks = async (modifiedData, components, contentType) => {
+  const getAllChecks = async (layout, modifiedData, components, contentType) => {
     const { data: defaultSettings } = await getSettings();
 
+    const seoPropName = Object.entries(layout.attributes).find(([, attr]) => attr.type === 'component' && attr.component === 'shared.seo')[0];
+    const seo = _.get(modifiedData, seoPropName, null);
+
     const { wordCount, keywordsDensity, emptyAltCount } = getRichTextData(
+      seo,
       modifiedData,
       components,
       contentType
     );
 
     let result = {
       ...(defaultSettings[contentType?.uid]?.seoChecks?.metaTitle && {
-        metaTitle: getMetaTitleCheckPreview(modifiedData),
+        metaTitle: getMetaTitleCheckPreview(seo),
       }),
       ...(defaultSettings[contentType?.uid]?.seoChecks?.wordCount && {
         wordCount: getWordCountPreview(wordCount),
       }),
       ...(defaultSettings[contentType?.uid]?.seoChecks?.metaRobots && {
-        metaRobots: metaRobotPreview(modifiedData),
+        metaRobots: metaRobotPreview(seo),
       }),
       ...(defaultSettings[contentType?.uid]?.seoChecks?.openGraph && {
-        openGraph: openGraphPreview(modifiedData),
+        openGraph: openGraphPreview(seo),
       }),
       ...(defaultSettings[contentType?.uid]?.seoChecks?.canonicalUrl && {
-        canonicalUrl: canonicalUrlPreview(modifiedData),
+        canonicalUrl: canonicalUrlPreview(seo),
       }),
       ...(defaultSettings[contentType?.uid]?.seoChecks?.lastUpdatedAt && {
         lastUpdatedAt: lastUpdatedAtPreview(modifiedData),
       }),
       ...(defaultSettings[contentType?.uid]?.seoChecks?.structuredData && {
-        structuredData: structuredDataPreview(modifiedData),
+        structuredData: structuredDataPreview(seo),
       }),
       ...(defaultSettings[contentType?.uid]?.seoChecks?.metaDescription && {
-        metaDescription: getMetaDescriptionPreview(modifiedData),
+        metaDescription: getMetaDescriptionPreview(seo),
       }),
       ...(defaultSettings[contentType?.uid]?.seoChecks?.alternativeText && {
         alternativeText: getAlternativeTextPreview(emptyAltCount),
@@ -105,7 +109,7 @@ export const Summary = () => {
     const fetchChecks = async () => {
       if (!(JSON.stringify(localChecks) === JSON.stringify(checks))) {
         if (checks?.preview) {
-          const status = await getAllChecks(modifiedData, components, contentType);
+          const status = await getAllChecks(layout, modifiedData, components, contentType);
 
           dispatch({
             type: 'UPDATE_FOR_PREVIEW',
@@ -147,7 +151,7 @@ export const Summary = () => {
                 </Button>
               </Box>
             </Modal.Trigger>
-            <BrowserPreview modifiedData={modifiedData} />
+            <BrowserPreview layout={layout} modifiedData={modifiedData} />
           </Modal.Root>
         )}
 
@@ -163,7 +167,7 @@ export const Summary = () => {
                 </Button>
               </Box>
             </Modal.Trigger>
-            <OpenGraphPreview modifiedData={modifiedData} />
+            <OpenGraphPreview layout={layout} modifiedData={modifiedData} />
           </Modal.Root>
         )}
 
@@ -181,6 +185,7 @@ export const Summary = () => {
             </Box>
           </Modal.Trigger>
           <SeoChecks
+            layout={layout}
             updatedAt={document?.updatedAt ?? null}
             modifiedData={modifiedData}
             components={components}
diff --git a/admin/src/components/CMEditView/RightLinksCompo/index.jsx b/admin/src/components/CMEditView/RightLinksCompo/index.jsx
@@ -7,10 +7,10 @@ import { Summary } from './Summary';
 
 export const SeoChecker = () => {
   const {
-    form: { values },
+    layout,
   } = useContentManagerContext();
 
-  if (values?.seo) {
+  if (Object.values(layout.attributes).some((attr) => attr.type === 'component' && attr.component === 'shared.seo')) {
     return <Summary />;
   }
 
diff --git a/admin/src/components/CMEditView/utils/checks.js b/admin/src/components/CMEditView/utils/checks.js
@@ -8,8 +8,8 @@ export const qualityVerdict = {
   bad: 'bad',
 };
 
-export const getMetaTitleCheckPreview = (modifiedData) => {
-  const metaTitle = get(modifiedData, 'seo.metaTitle');
+export const getMetaTitleCheckPreview = (seo) => {
+  const metaTitle = get(seo, 'metaTitle');
 
   let status = {
     message: '',
@@ -30,8 +30,8 @@ export const getMetaTitleCheckPreview = (modifiedData) => {
   return status;
 };
 
-export const getMetaDescriptionPreview = (modifiedData) => {
-  const metaDescription = get(modifiedData, 'seo.metaDescription');
+export const getMetaDescriptionPreview = (seo) => {
+  const metaDescription = get(seo, 'metaDescription');
 
   let status = {
     message: '',
@@ -139,8 +139,8 @@ export const getKeywordDensityPreview = (keywordsDensity) => {
   return status;
 };
 
-export const canonicalUrlPreview = (modifiedData) => {
-  const canonicalUrl = get(modifiedData, 'seo.canonicalURL');
+export const canonicalUrlPreview = (seo) => {
+  const canonicalUrl = get(seo, 'canonicalURL');
   let status = {
     message: '',
     qualityVerdict: qualityVerdict.good,
@@ -179,8 +179,8 @@ export const lastUpdatedAtPreview = (modifiedData) => {
   return status;
 };
 
-export const metaRobotPreview = (modifiedData) => {
-  const metaRobots = get(modifiedData, 'seo.metaRobots');
+export const metaRobotPreview = (seo) => {
+  const metaRobots = get(seo, 'metaRobots');
   let status = {
     message: '',
     qualityVerdict: qualityVerdict.good,
@@ -194,8 +194,8 @@ export const metaRobotPreview = (modifiedData) => {
   return status;
 };
 
-export const openGraphPreview = (modifiedData) => {
-  const openGraph = get(modifiedData, 'seo.openGraph');
+export const openGraphPreview = (seo) => {
+  const openGraph = get(seo, 'openGraph');
 
   let status = {
     message: '',
@@ -217,8 +217,8 @@ export const openGraphPreview = (modifiedData) => {
   return status;
 };
 
-export const structuredDataPreview = (modifiedData) => {
-  const structuredData = get(modifiedData, 'seo.structuredData');
+export const structuredDataPreview = (seo) => {
+  const structuredData = get(seo, 'structuredData');
   let status = {
     message: '',
     qualityVerdict: qualityVerdict.good,
diff --git a/admin/src/components/CMEditView/utils/getRichTextData.js b/admin/src/components/CMEditView/utils/getRichTextData.js
@@ -170,12 +170,13 @@ const adjustIntersections = (data) => {
 
 /**
  * Main function to retrieve richtext and block field data and calculate word count and keyword density.
+ * @param {Object} seo - The SEO component.
  * @param {Object} modifiedData - The modified content data.
  * @param {Object} components - The components used in the content type.
  * @param {Object} contentType - The content type definition.
  * @returns {Object} - Contains word count and keyword density.
  */
-const getRichTextData = (modifiedData, components, contentType) => {
+const getRichTextData = (seo, modifiedData, components, contentType) => {
   // Retrieve richtext and block fields
   const { richTextFields, blockFields } = getRichTextAndBlocksFields(
     contentType,
@@ -193,7 +194,7 @@ const getRichTextData = (modifiedData, components, contentType) => {
   let keywordsDensity = {};
 
   // Extract keywords from SEO metadata
-  const seoKeywords = modifiedData?.seo?.keywords ?? '';
+  const seoKeywords = seo?.keywords ?? '';
   if (seoKeywords) {
     keywords = seoKeywords.toLowerCase().split(','); // Split keywords by commas
   }
