feat: SEO component prop name resolving

Author: ChristopheCVB

Diff for: 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 for: 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 for: 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 for: 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 for: 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 for: 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
   }