diff --git a/apps/full-site-editing/full-site-editing-plugin/donations/donations.js b/apps/full-site-editing/full-site-editing-plugin/donations/donations.js
index 514596409b7ad..7e0ca5ce7ab33 100644
--- a/apps/full-site-editing/full-site-editing-plugin/donations/donations.js
+++ b/apps/full-site-editing/full-site-editing-plugin/donations/donations.js
@@ -15,7 +15,7 @@ import { Button } from '@wordpress/components';
*/
import StripeNudge from './stripe-nudge';
-const Donations = ( { stripeConnectUrl } ) => {
+const Donations = ( { products, stripeConnectUrl } ) => {
const [ activeTab, setActiveTab ] = useState( 'one-time' );
const isActive = ( button ) => ( activeTab === button ? 'active' : null );
diff --git a/apps/full-site-editing/full-site-editing-plugin/donations/edit.js b/apps/full-site-editing/full-site-editing-plugin/donations/edit.js
index 11e6a4e1d180b..7fb5dd7bdbaa3 100644
--- a/apps/full-site-editing/full-site-editing-plugin/donations/edit.js
+++ b/apps/full-site-editing/full-site-editing-plugin/donations/edit.js
@@ -11,6 +11,7 @@ import Donations from './donations';
import LoadingError from './loading-error';
import LoadingStatus from './loading-status';
import UpgradePlan from './upgrade-plan';
+import fetchDefaultProducts from './fetch-default-products';
import fetchStatus from './fetch-status';
const Edit = () => {
@@ -18,8 +19,29 @@ const Edit = () => {
const [ loadingError, setLoadingError ] = useState( '' );
const [ shouldUpgrade, setShouldUpgrade ] = useState( false );
const [ stripeConnectUrl, setStripeConnectUrl ] = useState( false );
+ const [ products, setProducts ] = useState( [] );
const [ upgradeUrl, setUpgradeUrl ] = useState( '' );
+ const apiError = ( message ) => {
+ setLoadingError( message );
+ setIsLoading( false );
+ };
+
+ const hasRequiredProducts = ( productList, productCurrency ) => {
+ const productIntervals = productList.reduce( ( intervals, { currency, type, interval } ) => {
+ if ( currency === productCurrency && type === 'donation' ) {
+ intervals.push( interval );
+ }
+ return intervals;
+ }, [] );
+
+ return (
+ productIntervals.includes( 'one-time' ) &&
+ productIntervals.includes( '1 month' ) &&
+ productIntervals.includes( '1 year' )
+ );
+ };
+
const mapStatusToState = ( result ) => {
if ( ( ! result && typeof result !== 'object' ) || result.errors ) {
setLoadingError( __( 'Could not load data from WordPress.com.', 'full-site-editing' ) );
@@ -27,18 +49,22 @@ const Edit = () => {
setShouldUpgrade( result.should_upgrade_to_access_memberships );
setUpgradeUrl( result.upgrade_url );
setStripeConnectUrl( result.connect_url );
- }
- setIsLoading( false );
- };
+ if ( result.products.length && hasRequiredProducts( result.products, 'USD' ) ) {
+ setProducts( result.products );
+ } else {
+ fetchDefaultProducts( 'USD' ).then(
+ ( defaultProducts ) => setProducts( defaultProducts ),
+ apiError
+ );
+ }
+ }
- const apiError = ( message ) => {
- setLoadingError( message );
setIsLoading( false );
};
useEffect( () => {
- const updateData = () => fetchStatus().then( mapStatusToState, apiError );
+ const updateData = () => fetchStatus( 'donation' ).then( mapStatusToState, apiError );
updateData();
}, [] );
@@ -54,7 +80,7 @@ const Edit = () => {
return ;
}
- return ;
+ return ;
};
export default Edit;
diff --git a/apps/full-site-editing/full-site-editing-plugin/donations/fetch-default-products.js b/apps/full-site-editing/full-site-editing-plugin/donations/fetch-default-products.js
new file mode 100644
index 0000000000000..f712ac2d91882
--- /dev/null
+++ b/apps/full-site-editing/full-site-editing-plugin/donations/fetch-default-products.js
@@ -0,0 +1,23 @@
+/* eslint-disable wpcalypso/import-docblock */
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+
+const fetchDefaultProducts = async ( currency ) => {
+ try {
+ const result = await apiFetch( {
+ path: '/wpcom/v2/memberships/products',
+ method: 'POST',
+ data: {
+ type: 'donation',
+ currency,
+ },
+ } );
+ return result;
+ } catch ( error ) {
+ return Promise.reject( error.message );
+ }
+};
+
+export default fetchDefaultProducts;
diff --git a/apps/full-site-editing/full-site-editing-plugin/donations/fetch-status.js b/apps/full-site-editing/full-site-editing-plugin/donations/fetch-status.js
index db611099f797b..80a28212b4f8d 100644
--- a/apps/full-site-editing/full-site-editing-plugin/donations/fetch-status.js
+++ b/apps/full-site-editing/full-site-editing-plugin/donations/fetch-status.js
@@ -4,10 +4,14 @@
*/
import apiFetch from '@wordpress/api-fetch';
-const fetchStatus = async () => {
+const fetchStatus = async ( type = null ) => {
+ let path = '/wpcom/v2/memberships/status';
+ if ( type ) {
+ path += `?type=${ type }`;
+ }
try {
const result = await apiFetch( {
- path: '/wpcom/v2/memberships/status',
+ path,
method: 'GET',
} );
return result;