feat(react): add properties on structure data organization

feat(react): add properties on structure data organization

Revert "fix(react|redux): commerce pages in ssr not working"

This reverts commit 7bd944a.

packages/react/src/contents/structured-data/__tests__/__fixtures__/structuredOrganization.fixtures.ts

@@ -18,7 +18,11 @@ export const organization = {
     headPrefix: '',
   },
   name: 'Organization',
+  legalName: 'Organization legal',
   url: 'http://www.farfetch.com',
+  description: 'Description',
+  urlTemplate: 'http://www.farfetch.com/shopping',
+  searchTitle: 'Search Title',
   logoUrl: 'http://www.farfetch.com/static/logo.jpg',
   address: {
     street: 'Street name',
@@ -72,3 +76,26 @@ export const organizationResult = {
     areaServed: 'Europe',
   },
 };
+
+export const organizationResultWithLegalNameDescription = {
+  ...organizationResult,
+  legalName: 'Organization legal',
+  description: 'Description',
+};
+
+export const organizationResultWithPotentialAction = {
+  ...organizationResult,
+  potentialAction: {
+    '@type': 'SearchAction',
+    name: 'Search Title',
+    target: {
+      '@type': 'EntryPoint',
+      urlTemplate: 'http://www.farfetch.com/shopping{search_term_string}',
+    },
+    'query-input': {
+      '@type': 'PropertyValueSpecification',
+      valueRequired: 'True',
+      valueName: 'search_term_string',
+    },
+  },
+};

packages/react/src/contents/structured-data/__tests__/structuredOrganization.test.tsx

@@ -2,10 +2,24 @@ import {
   MockRenderScript,
   organization,
   organizationResult,
+  organizationResultWithLegalNameDescription,
+  organizationResultWithPotentialAction,
 } from './__fixtures__/index.js';
 import structuredOrganization from '../structuredOrganization.js';
 
-const { metadata, name, url, logoUrl, address, contact, sameAs } = organization;
+const {
+  metadata,
+  name,
+  url,
+  logoUrl,
+  address,
+  contact,
+  sameAs,
+  legalName,
+  description,
+  urlTemplate,
+  searchTitle,
+} = organization;
 
 describe('structuredOrganization', () => {
   it('should correctly generate JSON-LD for a Organization', () => {
@@ -23,4 +37,46 @@ describe('structuredOrganization', () => {
       MockRenderScript(JSON.stringify(organizationResult)),
     );
   });
+
+  it('should correctly generate JSON-LD for a Organization with legal name and description', () => {
+    const renderStructuredOrganization = structuredOrganization(
+      metadata,
+      name,
+      url,
+      logoUrl,
+      address,
+      contact,
+      sameAs,
+      undefined,
+      legalName,
+      description,
+    );
+
+    expect(renderStructuredOrganization).toEqual(
+      MockRenderScript(
+        JSON.stringify(organizationResultWithLegalNameDescription),
+      ),
+    );
+  });
+
+  it('should correctly generate JSON-LD for a Organization with potential action', () => {
+    const renderStructuredOrganization = structuredOrganization(
+      metadata,
+      name,
+      url,
+      logoUrl,
+      address,
+      contact,
+      sameAs,
+      undefined,
+      undefined,
+      undefined,
+      searchTitle,
+      urlTemplate,
+    );
+
+    expect(renderStructuredOrganization).toEqual(
+      MockRenderScript(JSON.stringify(organizationResultWithPotentialAction)),
+    );
+  });
 });

packages/react/src/contents/structured-data/schemas/schemaPotentialAction.ts

@@ -0,0 +1,41 @@
+import * as schemaProperties from './schemaProperties.js';
+import generateSchemaOrgProperty from '../../utils/generateSchemaOrgProperty.js';
+import type { CustomSearchAction } from '../../types/index.js';
+import type { SEOMetadata } from '@farfetch/blackout-client';
+
+/**
+ * Generate a schema for Potential Action.
+ *
+ * @example
+ * ```
+ * const potencialActioin = schemaPotentialAction(searchTitle, urlTemplate, metadata);
+ * ```
+ *
+ * @param searchTitle - Website title.
+ * @param urlTemplate - Complete url to query on.
+ * @param metadata    - SEO metadata for type WebsiteSearch on Homepage.
+ *
+ * @returns - An object with Potential Action JSON-LD structured data.
+ */
+const schemaPotentialAction = (
+  searchTitle: string,
+  urlTemplate: string,
+  metadata: SEOMetadata,
+): CustomSearchAction => ({
+  '@type': schemaProperties.DEFAULT_TYPE_ACTION,
+  name:
+    generateSchemaOrgProperty('homepage:searchTitle', metadata) || searchTitle,
+  target: {
+    '@type': schemaProperties.DEFAULT_TYPE_TARGET,
+    urlTemplate:
+      generateSchemaOrgProperty('homepage:searchUrl', metadata) ||
+      `${urlTemplate}{search_term_string}`,
+  },
+  'query-input': {
+    '@type': schemaProperties.DEFAULT_TYPE_INPUT,
+    valueRequired: 'True',
+    valueName: 'search_term_string',
+  },
+});
+
+export default schemaPotentialAction;

packages/react/src/contents/structured-data/structuredArticle.ts

@@ -1,7 +1,7 @@
 import * as schemaProperties from './schemas/schemaProperties.js';
 import {
+  generateSchemaOrgProperty,
   getCategories,
-  getMetatag,
   stripUrlSubfolder,
 } from '../utils/index.js';
 import { renderScriptTag } from '../helpers/index.js';
@@ -62,50 +62,52 @@ const structuredArticle = (
   publisher: Publisher,
   space?: number,
 ): ReactElement => {
-  const generateSchemaOrgProperty = (property: string) =>
-    getMetatag(property, metadata?.metatags);
-
   const ARTICLE: WithContext<Article> = {
     '@context': schemaProperties.DEFAULT_CONTEXT,
     '@type': schemaProperties.DEFAULT_TYPE,
-    name: generateSchemaOrgProperty('og:title') || metadata?.title,
+    name: generateSchemaOrgProperty('og:title', metadata) || metadata?.title,
     headline: metadata?.h1 || title,
     description:
-      generateSchemaOrgProperty('og:description') || metadata?.description,
-    url: generateSchemaOrgProperty('og:url') || stripUrlSubfolder(url),
+      generateSchemaOrgProperty('og:description', metadata) ||
+      metadata?.description,
+    url:
+      generateSchemaOrgProperty('og:url', metadata) || stripUrlSubfolder(url),
     mainEntityOfPage: {
       '@type': schemaProperties.DEFAULT_TYPE_WEBPAGE,
       '@id': url,
     },
     datePublished:
-      generateSchemaOrgProperty('article:datePublished') ||
+      generateSchemaOrgProperty('article:datePublished', metadata) ||
       date?.publicationDate,
     dateModified:
-      generateSchemaOrgProperty('article:dateModified') ||
+      generateSchemaOrgProperty('article:dateModified', metadata) ||
       date?.modificationDate,
     publisher: {
       '@type': schemaProperties.DEFAULT_ORGANISATION,
       name:
-        generateSchemaOrgProperty('article:publisher:name') || publisher?.name,
-      url: generateSchemaOrgProperty('article:publisher:url') || publisher?.url,
+        generateSchemaOrgProperty('article:publisher:name', metadata) ||
+        publisher?.name,
+      url:
+        generateSchemaOrgProperty('article:publisher:url', metadata) ||
+        publisher?.url,
       logo: {
         '@type': schemaProperties.DEFAULT_IMAGE_OBJECT,
         url:
-          generateSchemaOrgProperty('article:publisher:logo') ||
+          generateSchemaOrgProperty('article:publisher:logo', metadata) ||
           publisher?.logo,
       },
     },
     author: {
       '@type': schemaProperties.DEFAULT_ORGANISATION,
-      name: generateSchemaOrgProperty('og:site_name') || author,
+      name: generateSchemaOrgProperty('og:site_name', metadata) || author,
     },
-    articleBody: generateSchemaOrgProperty('article:body'),
+    articleBody: generateSchemaOrgProperty('article:body', metadata),
     articleSection:
-      generateSchemaOrgProperty('article:section') ||
+      generateSchemaOrgProperty('article:section', metadata) ||
       getCategories(breadcrumbs),
     image:
-      generateSchemaOrgProperty('article:image') ||
-      generateSchemaOrgProperty('og:image') ||
+      generateSchemaOrgProperty('article:image', metadata) ||
+      generateSchemaOrgProperty('og:image', metadata) ||
       image,
     keywords: metadata?.keywords ?? undefined,
   };

packages/react/src/contents/structured-data/structuredOrganization.ts

@@ -1,6 +1,7 @@
 import * as schemaProperties from './schemas/schemaProperties.js';
-import { getMetatag } from '../utils/index.js';
 import { renderScriptTag } from '../helpers/index.js';
+import generateSchemaOrgProperty from '../utils/generateSchemaOrgProperty.js';
+import schemaPotentialAction from './schemas/schemaPotentialAction.js';
 import type { Address, Contact } from '../types/index.js';
 import type { Organization, WithContext } from 'schema-dts';
 import type { ReactElement } from 'react';
@@ -36,14 +37,18 @@ import type { SEOMetadata } from '@farfetch/blackout-client';
  *
  * ```
  *
- * @param metadata - SEO metadata for type Organization on Homepage.
- * @param name     - Name of the Organization.
- * @param url      - Relative url of the page (location.pathname).
- * @param logoUrl  - Complete url for logotype.
- * @param address  - Full address information.
- * @param contact  - Full Contact information.
- * @param sameAs   - SameAs links of organization (e.g. Links to facebook and/or instagram).
- * @param space    - Add whitespace and indentation to the serialized output.
+ * @param metadata    - SEO metadata for type Organization on Homepage.
+ * @param name        - Name of the Organization.
+ * @param url         - Relative url of the page (location.pathname).
+ * @param logoUrl     - Complete url for logotype.
+ * @param address     - Full address information.
+ * @param contact     - Full Contact information.
+ * @param sameAs      - SameAs links of organization (e.g. Links to facebook and/or instagram).
+ * @param space       - Add whitespace and indentation to the serialized output.
+ * @param legalName   - Legal name of the Organization.
+ * @param description - Description of the Organization.
+ * @param searchTitle - Website title (Use in combination with urlTemplate to include potentialAction property).
+ * @param urlTemplate - Complete url to query on.
  *
  * @returns - A script tag with Organization JSON-LD structured data.
  */
@@ -56,49 +61,78 @@ const structuredOrganization = (
   contact: Contact,
   sameAs: string[],
   space?: number,
+  legalName?: string,
+  description?: string,
+  searchTitle?: string,
+  urlTemplate?: string,
 ): ReactElement => {
-  const generateSchemaOrgProperty = (property: string) =>
-    getMetatag(property, metadata?.metatags);
-
   const ORGANIZATION: WithContext<Organization> = {
     '@context': schemaProperties.DEFAULT_CONTEXT,
     '@type': schemaProperties.DEFAULT_ORGANISATION,
-    name: generateSchemaOrgProperty('organization:name') || name,
-    url: generateSchemaOrgProperty('organization:url') || url,
-    logo: generateSchemaOrgProperty('organization:logo') || logoUrl,
-    sameAs: generateSchemaOrgProperty('organization:sameAS') || sameAs,
+    name: generateSchemaOrgProperty('organization:name', metadata) || name,
+    url: generateSchemaOrgProperty('organization:url', metadata) || url,
+    logo: generateSchemaOrgProperty('organization:logo', metadata) || logoUrl,
+    sameAs:
+      generateSchemaOrgProperty('organization:sameAS', metadata) || sameAs,
     address: {
       '@type': schemaProperties.DEFAULT_TYPE_ADDRESS,
       streetAddress:
-        generateSchemaOrgProperty('organization:streetAddress') ||
+        generateSchemaOrgProperty('organization:streetAddress', metadata) ||
         address?.street,
       addressLocality:
-        generateSchemaOrgProperty('organization:addressLocality') ||
+        generateSchemaOrgProperty('organization:addressLocality', metadata) ||
         address?.locality,
       addressRegion:
-        generateSchemaOrgProperty('organization:addressRegion') ||
+        generateSchemaOrgProperty('organization:addressRegion', metadata) ||
         address?.region,
       postalCode:
-        generateSchemaOrgProperty('organization:postalCode') ||
+        generateSchemaOrgProperty('organization:postalCode', metadata) ||
         address?.postalCode,
       addressCountry:
-        generateSchemaOrgProperty('organization:addressCountry') ||
+        generateSchemaOrgProperty('organization:addressCountry', metadata) ||
         address?.country,
     },
     contactPoint: {
       '@type': schemaProperties.DEFAULT_TYPE_CONTACT_POINT,
       telephone:
-        generateSchemaOrgProperty('organization:telephone') || contact?.phone,
+        generateSchemaOrgProperty('organization:telephone', metadata) ||
+        contact?.phone,
       contactType:
-        generateSchemaOrgProperty('organization:contactType') || contact?.type,
-      email: generateSchemaOrgProperty('organization:email') || contact?.email,
+        generateSchemaOrgProperty('organization:contactType', metadata) ||
+        contact?.type,
+      email:
+        generateSchemaOrgProperty('organization:email', metadata) ||
+        contact?.email,
       contactOption:
-        generateSchemaOrgProperty('organization:contactOption') ||
+        generateSchemaOrgProperty('organization:contactOption', metadata) ||
         contact?.option,
       areaServed:
-        generateSchemaOrgProperty('organization:areaServed') ||
+        generateSchemaOrgProperty('organization:areaServed', metadata) ||
         contact?.areaServed,
     },
+    ...(legalName
+      ? {
+          legalName:
+            generateSchemaOrgProperty('organization:legalName', metadata) ||
+            legalName,
+        }
+      : {}),
+    ...(description
+      ? {
+          description:
+            generateSchemaOrgProperty('organization:description', metadata) ||
+            description,
+        }
+      : {}),
+    ...(searchTitle && urlTemplate
+      ? {
+          potentialAction: schemaPotentialAction(
+            searchTitle,
+            urlTemplate,
+            metadata,
+          ),
+        }
+      : {}),
   };
 
   return renderScriptTag(ORGANIZATION, space);