Use products data store for getPermalinkParts selector (#36706)

* Add generated_slug and permalink_template to Product

* Update getPermalinkParts to use products data store instead of posts data store

* Remove ts-expect-error directive

* Changelog

* Add resolver for getPermalinkParts

packages/js/data/changelog/update-get-permalinks-parts-selector

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Use products data store for getPermalinkParts selector.

packages/js/data/src/products/index.ts

@@ -19,7 +19,6 @@ registerStore< State >( STORE_NAME, {
 	reducer: reducer as Reducer< ProductState >,
 	actions,
 	controls,
-	// @ts-expect-error as the registerStore type is not allowing the createRegistrySelector selector.
 	selectors,
 	resolvers,
 } );

packages/js/data/src/products/resolvers.ts

@@ -2,12 +2,17 @@
  * External dependencies
  */
 import { addQueryArgs } from '@wordpress/url';
-import { apiFetch } from '@wordpress/data-controls';
+import {
+	apiFetch,
+	dispatch as deprecatedDispatch,
+	select,
+} from '@wordpress/data-controls';
+import { controls } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { WC_PRODUCT_NAMESPACE } from './constants';
+import { STORE_NAME, WC_PRODUCT_NAMESPACE } from './constants';
 import { Product, ProductQuery } from './types';
 import {
 	getProductError,
@@ -19,6 +24,11 @@ import {
 } from './actions';
 import { request } from '../utils';
 
+const dispatch =
+	controls && controls.dispatch ? controls.dispatch : deprecatedDispatch;
+const resolveSelect =
+	controls && controls.resolveSelect ? controls.resolveSelect : select;
+
 export function* getProducts( query: Partial< ProductQuery > ) {
 	// id is always required.
 	const productsQuery = {
@@ -56,6 +66,11 @@ export function* getProduct( productId: number ) {
 		} );
 
 		yield getProductSuccess( productId, product );
+
+		yield dispatch( STORE_NAME, 'finishResolution', 'getPermalinkParts', [
+			productId,
+		] );
+
 		return product;
 	} catch ( error ) {
 		yield getProductError( productId, error );
@@ -81,3 +96,7 @@ export function* getProductsTotalCount( query: Partial< ProductQuery > ) {
 		throw error;
 	}
 }
+
+export function* getPermalinkParts( productId: number ) {
+	yield resolveSelect( STORE_NAME, 'getProduct', [ productId ] );
+}

packages/js/data/src/products/selectors.ts

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import createSelector from 'rememo';
-import { createRegistrySelector } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -122,38 +121,24 @@ export const isPending = (
 	return false;
 };
 
-export const getPermalinkParts = createRegistrySelector(
+export const getPermalinkParts = ( state: ProductState, productId: number ) => {
-	( select ) => ( state: ProductState, productId: number ) => {
+	const product = state.data[ productId ];
-		const product = select( 'core' ).getEntityRecord(
+
-			'postType',
+	if ( product && product.permalink_template ) {
-			'product',
+		const postName = product.slug || product.generated_slug;
-			productId,
+
-			// @ts-expect-error query object is not part of the @wordpress/core-data types yet.
+		const [ prefix, suffix ] = product.permalink_template.split(
-			{
+			PERMALINK_PRODUCT_REGEX
-				_fields: [
-					'id',
-					'permalink_template',
-					'slug',
-					'generated_slug',
-				],
-			}
 		);
-		if ( product && product.permalink_template ) {
-			const postName = product.slug || product.generated_slug;
 
-			const [ prefix, suffix ] = product.permalink_template.split(
+		return {
-				PERMALINK_PRODUCT_REGEX
+			prefix,
-			);
+			postName,
-
+			suffix,
-			return {
+		};
-				prefix,
-				postName,
-				suffix,
-			};
-		}
-		return null;
 	}
-);
+	return null;
+};
 
 export type ProductsSelectors = {
 	getCreateProductError: WPDataSelector< typeof getCreateProductError >;
@@ -162,7 +147,5 @@ export type ProductsSelectors = {
 	getProductsTotalCount: WPDataSelector< typeof getProductsTotalCount >;
 	getProductsError: WPDataSelector< typeof getProductsError >;
 	isPending: WPDataSelector< typeof isPending >;
-	getPermalinkParts: (
+	getPermalinkParts: WPDataSelector< typeof getPermalinkParts >;
-		productId: number
-	) => { prefix: string; postName: string; suffix: string } | null;
 } & WPDataSelectors;

packages/js/data/src/products/types.ts

@@ -66,6 +66,7 @@ export type Product< Status = ProductStatus, Type = ProductType > = Omit<
 	downloads: ProductDownload[];
 	external_url: string;
 	featured: boolean;
+	generated_slug: string;
 	id: number;
 	low_stock_amount: number;
 	manage_stock: boolean;
@@ -73,6 +74,7 @@ export type Product< Status = ProductStatus, Type = ProductType > = Omit<
 	name: string;
 	on_sale: boolean;
 	permalink: string;
+	permalink_template: string;
 	price: string;
 	price_html: string;
 	purchasable: boolean;
@@ -108,9 +110,11 @@ export const productReadOnlyProperties = [
 	'date_created_gmt',
 	'date_modified',
 	'date_modified_gmt',
+	'generated_slug',
 	'id',
 	'on_sale',
 	'permalink',
+	'permalink_template',
 	'price',
 	'price_html',
 	'purchasable',