woocommerce/plugins/woocommerce-admin/client/marketplace/utils/functions.tsx

346 lines
8.4 KiB
TypeScript

/**
* External dependencies
*/
import apiFetch from '@wordpress/api-fetch';
import { __, sprintf } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { LOCALE } from '../../utils/admin-settings';
import { CategoryAPIItem } from '../components/category-selector/types';
import {
MARKETPLACE_CATEGORY_API_PATH,
MARKETPLACE_HOST,
MARKETPLACE_SEARCH_API_PATH,
} from '../components/constants';
import { Subscription } from '../components/my-subscriptions/types';
import {
Product,
ProductType,
SearchAPIJSONType,
SearchAPIProductType,
} from '../components/product-list/types';
interface ProductGroup {
id: string;
title: string;
items: Product[];
url: string;
itemType: ProductType;
}
// The fetchCache stores the results of GET fetch/apiFetch calls from the Marketplace, in RAM, for performance
const maxFetchCacheSize = 100;
const fetchCache = new Map();
function maybePruneFetchCache() {
while ( fetchCache.size > maxFetchCacheSize ) {
fetchCache.delete( fetchCache.keys().next().value );
}
}
// Wrapper around apiFetch() that caches results in memory
async function apiFetchWithCache( params: object ): Promise< object > {
// Attempt to fetch from cache:
const cacheKey = JSON.stringify( params );
if ( fetchCache.get( cacheKey ) ) {
return new Promise( ( resolve ) => {
resolve( fetchCache.get( cacheKey ) );
} );
}
// Failing that, fetch using apiCache:
return new Promise( ( resolve, reject ) => {
apiFetch( params )
.then( ( json ) => {
fetchCache.set( cacheKey, json );
maybePruneFetchCache();
resolve( json as object );
} )
.catch( () => {
reject();
} );
} );
}
// Wrapper around fetch() that caches results in memory
async function fetchJsonWithCache(
url: string,
abortSignal?: AbortSignal
): Promise< object > {
// Attempt to fetch from cache:
if ( fetchCache.get( url ) ) {
return new Promise( ( resolve ) => {
resolve( fetchCache.get( url ) );
} );
}
// Failing that, fetch from net:
return new Promise( ( resolve, reject ) => {
fetch( url, { signal: abortSignal } )
.then( ( response ) => {
if ( ! response.ok ) {
throw new Error( response.statusText );
}
return response.json();
} )
.then( ( json ) => {
fetchCache.set( url, json );
maybePruneFetchCache();
resolve( json );
} )
.catch( () => {
reject();
} );
} );
}
// Fetch search results for a given set of URLSearchParams from the Woo.com API
async function fetchSearchResults(
params: URLSearchParams,
abortSignal?: AbortSignal
): Promise< Product[] > {
const url =
MARKETPLACE_HOST +
MARKETPLACE_SEARCH_API_PATH +
'?' +
params.toString();
// Fetch data from WCCOM API
return new Promise( ( resolve, reject ) => {
fetchJsonWithCache( url, abortSignal )
.then( ( json ) => {
/**
* Product card component expects a Product type.
* So we build that object from the API response.
*/
const products = ( json as SearchAPIJSONType ).products.map(
( product: SearchAPIProductType ): Product => {
return {
id: product.id,
title: product.title,
image: product.image,
type: product.type,
description: product.excerpt,
vendorName: product.vendor_name,
vendorUrl: product.vendor_url,
icon: product.icon,
url: product.link,
// Due to backwards compatibility, raw_price is from search API, price is from featured API
price: product.raw_price ?? product.price,
averageRating: product.rating ?? 0,
reviewsCount: product.reviews_count ?? 0,
};
}
);
resolve( products );
} )
.catch( () => reject );
} );
}
// Fetch data for the discover page from the Woo.com API
async function fetchDiscoverPageData(): Promise< ProductGroup[] > {
let url = '/wc/v3/marketplace/featured';
if ( LOCALE.userLocale ) {
url = `${ url }?locale=${ LOCALE.userLocale }`;
}
try {
return ( await apiFetchWithCache( {
path: url.toString(),
} ) ) as Promise< ProductGroup[] >;
} catch ( error ) {
return [];
}
}
function fetchCategories( type: ProductType ): Promise< CategoryAPIItem[] > {
const url = new URL( MARKETPLACE_HOST + MARKETPLACE_CATEGORY_API_PATH );
if ( LOCALE.userLocale ) {
url.searchParams.set( 'locale', LOCALE.userLocale );
}
// We don't define parent for extensions since that is provided by default
// This is to ensure the old marketplace continues to work when this isn't defined
if ( type === ProductType.theme ) {
url.searchParams.set( 'parent', 'themes' );
}
return (
fetchJsonWithCache( url.toString() ) as Promise< CategoryAPIItem[] >
)
.then( ( json ) => {
return json;
} )
.catch( () => {
return [];
} );
}
async function fetchSubscriptions(): Promise< Array< Subscription > > {
const url = '/wc/v3/marketplace/subscriptions';
return await apiFetch( { path: url.toString() } );
}
function connectProduct( subscription: Subscription ): Promise< void > {
if ( subscription.active === true ) {
return Promise.resolve();
}
const url = '/wc/v3/marketplace/subscriptions/connect';
const data = new URLSearchParams();
data.append( 'product_key', subscription.product_key );
return apiFetch( {
path: url.toString(),
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: data,
} );
}
function disconnectProduct( subscription: Subscription ): Promise< void > {
if ( subscription.active === false ) {
return Promise.resolve();
}
const url = '/wc/v3/marketplace/subscriptions/disconnect';
const data = new URLSearchParams();
data.append( 'product_key', subscription.product_key );
return apiFetch( {
path: url.toString(),
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: data,
} );
}
function wpAjax(
action: string,
data: {
slug?: string;
plugin?: string;
theme?: string;
success?: boolean;
}
): Promise< void > {
return new Promise( ( resolve, reject ) => {
if ( ! window.wp.updates ) {
reject( __( 'Please reload and try again', 'woocommerce' ) );
return;
}
window.wp.updates.ajax( action, {
...data,
success: ( response: {
success?: boolean;
errorMessage?: string;
} ) => {
if ( response.success === false ) {
reject( {
success: false,
data: {
message: response.errorMessage,
},
} );
}
resolve();
},
error: ( error: { errorMessage: string } ) => {
reject( {
success: false,
data: {
message: error.errorMessage,
},
} );
},
} );
} );
}
function activateProduct( subscription: Subscription ): Promise< void > {
if ( subscription.local.active === true ) {
return Promise.resolve();
}
const url = '/wc/v3/marketplace/subscriptions/activate';
const data = new URLSearchParams();
data.append( 'product_key', subscription.product_key );
return apiFetch( {
path: url.toString(),
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: data,
} )
.then( () => Promise.resolve() )
.catch( () =>
Promise.reject( {
success: false,
data: {
message: sprintf(
// translators: %s is the product name.
__(
'%s could not be activated. Please activate it manually.',
'woocommerce'
),
subscription.product_name
),
},
} )
);
}
function installProduct( subscription: Subscription ): Promise< void > {
return connectProduct( subscription ).then( () => {
return wpAjax( 'install-' + subscription.product_type, {
// The slug prefix is required for the install to use WCCOM install filters.
slug: 'woocommerce-com-' + subscription.product_slug,
} )
.then( () => {
return activateProduct( subscription );
} )
.catch( ( error ) => {
// If install fails disconnect the product
return disconnectProduct( subscription ).finally( () =>
Promise.reject( error )
);
} );
} );
}
// Append UTM parameters to a URL, being aware of existing query parameters
const appendURLParams = (
url: string,
utmParams: Array< [ string, string ] >
): string => {
if ( ! url ) {
return url;
}
const urlObject = new URL( url );
if ( ! urlObject ) {
return url;
}
utmParams.forEach( ( [ key, value ] ) => {
urlObject.searchParams.set( key, value );
} );
return urlObject.toString();
};
export {
ProductGroup,
appendURLParams,
connectProduct,
fetchCategories,
fetchDiscoverPageData,
fetchSearchResults,
fetchSubscriptions,
installProduct,
};