2023-08-17 08:54:51 +00:00
|
|
|
/**
|
|
|
|
* External dependencies
|
|
|
|
*/
|
|
|
|
import apiFetch from '@wordpress/api-fetch';
|
|
|
|
|
2023-08-08 14:29:08 +00:00
|
|
|
/**
|
|
|
|
* Internal dependencies
|
|
|
|
*/
|
2023-08-09 13:04:35 +00:00
|
|
|
import { Product } from '../components/product-list/types';
|
[wccom-17942] Only showing feedback snackbar when content of in-app marketplace has finished loading. Making sure snackbar is fixed position, so it's visible wherever you are on the page.
- `ProductListContextProvider` provides `setIsLoading` function as well as `isLoading`.
- `Discover` uses these values from context, instead of keeping a loading state in itself.
- `FeedbackModal` calls `maybSetTimeout` when `isLoading` changes. If `isLoading` isn't truthy, and snackbar hasn't already rendered, it sets a timeout of 5 seconds to show it.
- Removed wrapping <WooFooterItem> from around Footer component, so it's no longer a child of the WooCommerce Admin `.woocommerce-layout__footer` footer.
- Removed the `position: relative` from `.woocommerce-layout__footer`. It needs to be `position: fixed`.
- Added FooterContent component to Footer, to allow the layout we want.
- Changed use of context. This now only has states for the selected tab and loading state.
- We use this context in `Tabs` and `Content` to keep track of which tab is selected, and set the selected tab.
- We also use it in `Discover` and `Extensions`, which both report loading state to the context. This allows us to use it to only render the snackbar when loading is complete.
- Extensions: moved `productList` and `setProductList` and logic for getting product list from the context provider to a state in this component. We don't need to share the list of products in the context.
- Renamed `ProductListContext`, `ProductListContextProvider` and `productListContextValue` to more generic `MarketplaceContext`, `MarketplaceContextProvider` and `marketplaceContextValue`.
- Renamed a constant and created constants for API paths.
- Only shows snackbar after content has loaded, and after a timeout. We set a date `marketplace_redesign_2023_last_shown_date` in local storage to ensure we only show one snackbar.
2023-08-23 15:49:36 +00:00
|
|
|
import { MARKETPLACE_API_HOST, MARKETPLACE_CATEGORY_API_PATH } from '../components/constants';
|
2023-08-09 13:04:35 +00:00
|
|
|
import { CategoryAPIItem } from '../components/category-selector/types';
|
2023-08-17 08:54:51 +00:00
|
|
|
import { LOCALE } from '../../utils/admin-settings';
|
2023-08-08 14:29:08 +00:00
|
|
|
|
|
|
|
interface ProductGroup {
|
2023-08-15 12:37:50 +00:00
|
|
|
id: string;
|
2023-08-08 14:29:08 +00:00
|
|
|
title: string;
|
|
|
|
items: Product[];
|
|
|
|
url: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Fetch data for the discover page from the WooCommerce.com API
|
2023-08-17 08:54:51 +00:00
|
|
|
async function fetchDiscoverPageData(): Promise< ProductGroup[] > {
|
|
|
|
let url = '/wc/v3/marketplace/featured';
|
2023-08-08 14:29:08 +00:00
|
|
|
|
2023-08-17 08:54:51 +00:00
|
|
|
if ( LOCALE.userLocale ) {
|
|
|
|
url = `${ url }?locale=${ LOCALE.userLocale }`;
|
|
|
|
}
|
|
|
|
|
|
|
|
try {
|
|
|
|
return await apiFetch( { path: url.toString() } );
|
|
|
|
} catch ( error ) {
|
|
|
|
return [];
|
|
|
|
}
|
|
|
|
}
|
2023-08-08 14:29:08 +00:00
|
|
|
|
2023-08-09 13:04:35 +00:00
|
|
|
function fetchCategories(): Promise< CategoryAPIItem[] > {
|
[wccom-17942] Only showing feedback snackbar when content of in-app marketplace has finished loading. Making sure snackbar is fixed position, so it's visible wherever you are on the page.
- `ProductListContextProvider` provides `setIsLoading` function as well as `isLoading`.
- `Discover` uses these values from context, instead of keeping a loading state in itself.
- `FeedbackModal` calls `maybSetTimeout` when `isLoading` changes. If `isLoading` isn't truthy, and snackbar hasn't already rendered, it sets a timeout of 5 seconds to show it.
- Removed wrapping <WooFooterItem> from around Footer component, so it's no longer a child of the WooCommerce Admin `.woocommerce-layout__footer` footer.
- Removed the `position: relative` from `.woocommerce-layout__footer`. It needs to be `position: fixed`.
- Added FooterContent component to Footer, to allow the layout we want.
- Changed use of context. This now only has states for the selected tab and loading state.
- We use this context in `Tabs` and `Content` to keep track of which tab is selected, and set the selected tab.
- We also use it in `Discover` and `Extensions`, which both report loading state to the context. This allows us to use it to only render the snackbar when loading is complete.
- Extensions: moved `productList` and `setProductList` and logic for getting product list from the context provider to a state in this component. We don't need to share the list of products in the context.
- Renamed `ProductListContext`, `ProductListContextProvider` and `productListContextValue` to more generic `MarketplaceContext`, `MarketplaceContextProvider` and `marketplaceContextValue`.
- Renamed a constant and created constants for API paths.
- Only shows snackbar after content has loaded, and after a timeout. We set a date `marketplace_redesign_2023_last_shown_date` in local storage to ensure we only show one snackbar.
2023-08-23 15:49:36 +00:00
|
|
|
let url = MARKETPLACE_API_HOST + MARKETPLACE_CATEGORY_API_PATH;
|
2023-08-17 08:54:51 +00:00
|
|
|
|
|
|
|
if ( LOCALE.userLocale ) {
|
|
|
|
url = `${ url }?locale=${ LOCALE.userLocale }`;
|
|
|
|
}
|
|
|
|
|
|
|
|
return fetch( url.toString() )
|
2023-08-09 13:04:35 +00:00
|
|
|
.then( ( response ) => {
|
|
|
|
if ( ! response.ok ) {
|
|
|
|
throw new Error( response.statusText );
|
|
|
|
}
|
|
|
|
|
|
|
|
return response.json();
|
|
|
|
} )
|
|
|
|
.then( ( json ) => {
|
|
|
|
return json;
|
|
|
|
} )
|
|
|
|
.catch( () => {
|
|
|
|
return [];
|
|
|
|
} );
|
|
|
|
}
|
|
|
|
|
2023-08-15 08:03:27 +00:00
|
|
|
// Append UTM parameters to a URL, being aware of existing query parameters
|
|
|
|
const appendUTMParams = (
|
|
|
|
url: string,
|
|
|
|
utmParams: Array< [ string, string ] >
|
|
|
|
): string => {
|
|
|
|
const urlObject = new URL( url );
|
|
|
|
if ( ! urlObject ) {
|
|
|
|
return url;
|
|
|
|
}
|
|
|
|
utmParams.forEach( ( [ key, value ] ) => {
|
|
|
|
urlObject.searchParams.set( key, value );
|
|
|
|
} );
|
|
|
|
return urlObject.toString();
|
|
|
|
};
|
|
|
|
|
|
|
|
export {
|
|
|
|
fetchDiscoverPageData,
|
|
|
|
fetchCategories,
|
|
|
|
ProductGroup,
|
|
|
|
appendUTMParams,
|
|
|
|
};
|