@magento/venia-ui 11.7.2-alpha2 → 11.7.2-alpha3

package/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');

package/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
         }
     }
 `;

package/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}

package/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',

package/lib/RootComponents/Product/product.js

@@ -1,10 +1,10 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { string } from 'prop-types';
 import { useProduct } from '@magento/peregrine/lib/talons/RootComponents/Product/useProduct';
 
 import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
-import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
+import { StoreTitle, Meta, Link } from '@magento/venia-ui/lib/components/Head';
 import ProductFullDetail from '@magento/venia-ui/lib/components/ProductFullDetail';
 import mapProduct from '@magento/venia-ui/lib/util/mapProduct';
 import ProductShimmer from './product.shimmer';
@@ -23,7 +23,17 @@ const Product = props => {
         mapProduct
     });
 
-    const { error, loading, product } = talonProps;
+    const { error, loading, product, storeConfig } = talonProps;
+
+    const canonicalUrl = useMemo(() => {
+        if (!product || !storeConfig?.product_canonical_tag) return null;
+
+        const origin =
+            typeof window !== 'undefined' ? window.location.origin : '';
+        const suffix = storeConfig?.product_url_suffix || '';
+
+        return `${origin}/${product.url_key}${suffix}`;
+    }, [product, storeConfig]);
 
     if (loading && !product)
         return <ProductShimmer productType={productType} />;
@@ -45,6 +55,7 @@ const Product = props => {
         <Fragment>
             <StoreTitle>{product.name}</StoreTitle>
             <Meta name="description" content={product.meta_description} />
+            {canonicalUrl && <Link rel="canonical" href={canonicalUrl} />}
             <ProductFullDetail product={product} />
         </Fragment>
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-ui",
-  "version": "11.7.2-alpha2",
+  "version": "11.7.2-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -80,7 +80,7 @@
   "peerDependencies": {
     "@apollo/client": "~3.5.0",
     "@magento/babel-preset-peregrine": "~1.3.3",
-    "@magento/peregrine": "15.7.2-alpha2",
+    "@magento/peregrine": "15.7.2-alpha3",
     "@magento/pwa-buildpack": "~11.5.5",
     "apollo-cache-persist": "~0.1.1",
     "braintree-web-drop-in": "~1.43.0",