PWA-3642: Canonical url support (#4597)

Co-authored-by: Bharathidasan Elangovan <del22123@adobe.com>

Author: del15881

packages/peregrine/lib/talons/RootComponents/Category/__tests__/__snapshots__/useCategory.spec.js.snap

@@ -34,6 +34,9 @@ Object {
     },
     [MockFunction],
   ],
+  "storeConfig": Object {
+    "grid_per_page": 12,
+  },
 }
 `;
 

packages/peregrine/lib/talons/RootComponents/Category/categoryFragments.gql.js

@@ -7,6 +7,8 @@ export const CategoryFragment = gql`
         meta_title
         meta_keywords
         meta_description
+        url_path
+        url_key
     }
 `;
 

packages/peregrine/lib/talons/RootComponents/Category/useCategory.js

@@ -49,6 +49,7 @@ export const useCategory = props => {
         nextFetchPolicy: 'cache-first'
     });
     const pageSize = pageSizeData && pageSizeData.storeConfig.grid_per_page;
+    const storeConfig = pageSizeData && pageSizeData.storeConfig;
 
     const [paginationValues, paginationApi] = usePagination();
     const { currentPage, totalPages } = paginationValues;
@@ -222,6 +223,7 @@ export const useCategory = props => {
         pageControl,
         sortProps,
         pageSize,
-        categoryNotFound
+        categoryNotFound,
+        storeConfig
     };
 };

packages/peregrine/lib/talons/RootComponents/Product/__tests__/useProduct.spec.js

@@ -113,7 +113,7 @@ test('it returns the proper shape', () => {
     // Assert.
     const talonProps = log.mock.calls[0][0];
     const actualKeys = Object.keys(talonProps);
-    const expectedKeys = ['error', 'loading', 'product'];
+    const expectedKeys = ['error', 'loading', 'product', 'storeConfig'];
     expect(actualKeys.sort()).toEqual(expectedKeys.sort());
 });
 

packages/peregrine/lib/talons/RootComponents/Product/product.gql.js

@@ -8,6 +8,7 @@ export const GET_STORE_CONFIG_DATA = gql`
         storeConfig {
             store_code
             product_url_suffix
+            product_canonical_tag
         }
     }
 `;

packages/peregrine/lib/talons/RootComponents/Product/useProduct.js

@@ -115,6 +115,7 @@ export const useProduct = props => {
     return {
         error,
         loading,
-        product
+        product,
+        storeConfig: storeConfigData?.storeConfig
     };
 };

packages/venia-ui/lib/RootComponents/Category/__tests__/category.spec.js

@@ -10,7 +10,8 @@ jest.mock('@magento/peregrine/lib/talons/RootComponents/Category', () => ({
 jest.mock('../../../components/Head', () => ({
     HeadProvider: ({ children }) => <div>{children}</div>,
     StoreTitle: () => 'Title',
-    Meta: () => 'Meta'
+    Meta: () => 'Meta',
+    Link: () => 'Link'
 }));
 
 jest.mock('../categoryContent', () => 'CategoryContent');

packages/venia-ui/lib/RootComponents/Category/category.gql.js

@@ -6,6 +6,8 @@ export const GET_PAGE_SIZE = gql`
         storeConfig {
             store_code
             grid_per_page
+            category_url_suffix
+            category_canonical_tag
         }
     }
 `;

packages/venia-ui/lib/RootComponents/Category/category.js

@@ -1,11 +1,11 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useMemo } from 'react';
 import { shape, string } from 'prop-types';
 import { useCategory } from '@magento/peregrine/lib/talons/RootComponents/Category';
 import { useStyle } from '../../classify';
 
 import CategoryContent from './categoryContent';
 import defaultClasses from './category.module.css';
-import { Meta } from '../../components/Head';
+import { Meta, Link } from '../../components/Head';
 import { GET_PAGE_SIZE } from './category.gql';
 import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
 import { useIntl } from 'react-intl';
@@ -34,11 +34,30 @@ const Category = props => {
         pageControl,
         sortProps,
         pageSize,
-        categoryNotFound
+        categoryNotFound,
+        storeConfig
     } = talonProps;
 
     const classes = useStyle(defaultClasses, props.classes);
 
+    // Generate canonical URL for category
+    const canonicalUrl = useMemo(() => {
+        if (!categoryData || !storeConfig?.category_canonical_tag) return null;
+
+        const category = categoryData.categories?.items?.[0];
+        if (!category) return null;
+
+        // Use url_path if available, otherwise fall back to url_key
+        const urlPath = category.url_path || category.url_key;
+        if (!urlPath) return null;
+
+        const origin =
+            typeof window !== 'undefined' ? window.location.origin : '';
+        const suffix = storeConfig?.category_url_suffix || '';
+
+        return `${origin}/${urlPath}${suffix}`;
+    }, [categoryData, storeConfig]);
+
     if (!categoryData) {
         if (error && pageControl.currentPage === 1) {
             if (process.env.NODE_ENV !== 'production') {
@@ -62,6 +81,7 @@ const Category = props => {
     return (
         <Fragment>
             <Meta name="description" content={metaDescription} />
+            {canonicalUrl && <Link rel="canonical" href={canonicalUrl} />}
             <CategoryContent
                 categoryId={uid}
                 classes={classes}

packages/venia-ui/lib/RootComponents/Product/__tests__/product.spec.js

@@ -10,7 +10,8 @@ jest.mock('@magento/venia-ui/lib/components/ErrorView', () => 'ErrorView');
 jest.mock('@magento/venia-ui/lib/components/Head', () => ({
     __esModule: true,
     StoreTitle: jest.fn(() => 'StoreTitle'),
-    Meta: jest.fn(() => 'Meta')
+    Meta: jest.fn(() => 'Meta'),
+    Link: jest.fn(() => 'Link')
 }));
 jest.mock(
     '@magento/venia-ui/lib/components/ProductFullDetail',