@automattic/data-stores 1.0.0-alpha.0 → 3.0.0

package/src/plans/mock/apis/plans.ts

@@ -0,0 +1,219 @@
+import * as MockData from '../';
+import type {
+	PricedAPIPlanFree,
+	PricedAPIPlanPaidAnnually,
+	PricedAPIPlanPaidMonthly,
+	DetailsAPIResponse,
+	APIPlanDetail,
+} from '../../types';
+
+/**
+ * For the sake of testing, only a few plans are mocked:
+ * - Free plan
+ * - Premium plan (annually and monthly billed)
+ */
+
+//==============================================================================
+// Mock TypeScript interfaces
+// (allow us to use real-ish APIs data without TypeScript complaining about
+// extra props that are otherwise ignored in this data-store)
+//==============================================================================
+interface MockPricedAPIPlanFree extends PricedAPIPlanFree {
+	[ key: string ]: unknown;
+}
+interface MockAPIPlanDetail extends APIPlanDetail {
+	[ key: string ]: unknown;
+}
+interface MockDetailsAPIResponse extends DetailsAPIResponse {
+	plans: MockAPIPlanDetail[];
+	[ key: string ]: unknown;
+}
+interface MockPricedAPIPlanPaidAnnually extends PricedAPIPlanPaidAnnually {
+	[ key: string ]: unknown;
+}
+interface MockPricedAPIPlanPaidMonthly extends PricedAPIPlanPaidMonthly {
+	[ key: string ]: unknown;
+}
+
+// All plans details (from APIs)
+export const API_PLAN_DETAILS: MockDetailsAPIResponse = {
+	groups: [
+		{
+			slug: 'personal',
+			name: 'Personal',
+		},
+	],
+	plans: [
+		{
+			support_priority: 1,
+			support_name: 'free',
+			groups: [ 'personal' ],
+			products: [
+				{
+					plan_id: 1,
+				},
+			],
+			name: 'WordPress.com Free',
+			short_name: 'Free',
+			nonlocalized_short_name: 'Free',
+			tagline: 'Mock free plan',
+			description:
+				'If you just want to start creating, get a free site and be on your way to publishing in less than five minutes.',
+			features: [ 'subdomain' ],
+			highlighted_features: [ 'Free plan highlighted feature' ],
+			storage: '3 GB',
+			icon: 'https://s0.wordpress.com/i/store/mobile/plans-free.png',
+		},
+		{
+			support_priority: 4,
+			support_name: 'premium',
+			groups: [ 'business' ],
+			products: [
+				{
+					plan_id: 1003,
+				},
+				{
+					plan_id: 1013,
+				},
+			],
+			name: 'WordPress.com Premium',
+			short_name: 'Premium',
+			nonlocalized_short_name: 'Premium',
+			tagline: 'Mock premium plan',
+			description:
+				'Build a unique website with advanced design tools, CSS editing, lots of space for audio and video, and the ability to monetize your site with ads.',
+			features: [ 'custom-domain', 'support-live', 'recurring-payments', 'wordads' ],
+			highlighted_features: [
+				MockData.API_FEATURE_CUSTOM_DOMAIN.name,
+				MockData.API_FEATURE_LIVE_SUPPORT.name,
+				'Premium plan highlighted feature',
+			],
+			storage: '13 GB',
+			icon: 'https://s0.wordpress.com/i/store/mobile/plans-premium.png',
+		},
+	],
+	features_by_type: [
+		MockData.API_FEATURES_BY_TYPE_GENERAL,
+		MockData.API_FEATURES_BY_TYPE_COMMERCE,
+		MockData.API_FEATURES_BY_TYPE_MARKETING,
+	],
+	features: [
+		MockData.API_FEATURE_CUSTOM_DOMAIN,
+		MockData.API_FEATURE_LIVE_SUPPORT,
+		MockData.API_FEATURE_PRIORITY_SUPPORT,
+		MockData.API_FEATURE_RECURRING_PAYMENTS,
+		MockData.API_FEATURE_WORDADS,
+	],
+};
+
+// Individual plan (from APIs)
+
+export const API_PLAN_PRICE_FREE: MockPricedAPIPlanFree = {
+	product_id: 1,
+	product_name: 'WordPress.com Free',
+	meta: null,
+	cost: 0,
+	blog_id: null,
+	path_slug: 'free',
+	product_slug: 'free_plan',
+	description: '',
+	bill_period: -1,
+	product_type: 'bundle',
+	available: 'yes',
+	multi: 0,
+	bd_slug: 'wp-free-plan',
+	bd_variation_slug: 'wp-bundles',
+	outer_slug: null,
+	extra: null,
+	capability: 'manage_options',
+	product_name_short: 'Free',
+	icon: 'https://s0.wordpress.com/i/store/plan-free.png',
+	icon_active: 'https://s0.wordpress.com/i/store/plan-free-active.png',
+	bill_period_label: 'for life',
+	price: '€0',
+	formatted_price: '€0',
+	raw_price: 0,
+	tagline: 'Perfect for anyone creating a basic blog or site',
+	currency_code: 'EUR',
+	features_highlight: [
+		{
+			items: [ 'free-blog', 'space', 'support' ],
+		},
+	],
+};
+
+export const API_PLAN_PRICE_PREMIUM_ANNUALLY: MockPricedAPIPlanPaidAnnually = {
+	product_id: 1003,
+	product_name: 'WordPress.com Premium',
+	meta: null,
+	cost: 96,
+	blog_id: null,
+	path_slug: 'premium',
+	product_slug: 'value_bundle',
+	description: '',
+	bill_period: 365,
+	product_type: 'bundle',
+	available: 'yes',
+	multi: 0,
+	bd_slug: 'wp-bundles',
+	bd_variation_slug: 'wp-value-bundle',
+	outer_slug: null,
+	extra: '',
+	capability: 'manage_options',
+	product_name_short: 'Premium',
+	icon: 'https://s0.wordpress.com/i/store/plan-premium.png',
+	icon_active: 'https://s0.wordpress.com/i/store/plan-premium-active.png',
+	bundle_product_ids: [
+		9, 12, 45, 15, 5, 49, 50, 6, 46, 54, 56, 57, 58, 59, 60, 62, 63, 64, 65, 66, 67, 68, 72, 73, 74,
+		76, 75, 16,
+	],
+	bill_period_label: 'per year',
+	price: '€96',
+	formatted_price: '€96',
+	raw_price: 96,
+	tagline: 'Perfect for bloggers, creatives, and other professionals',
+	currency_code: 'EUR',
+	features_highlight: [
+		{
+			items: [
+				'custom-design',
+				'videopress',
+				'support',
+				'space',
+				'custom-domain',
+				'no-adverts/no-adverts.php',
+			],
+		},
+		{
+			title: 'Included with all plans',
+			items: [ 'free-blog' ],
+		},
+	],
+};
+
+export const API_PLAN_PRICE_PREMIUM_MONTHLY: MockPricedAPIPlanPaidMonthly = {
+	product_id: 1013,
+	product_name: 'WordPress.com Premium',
+	meta: null,
+	cost: 14,
+	blog_id: null,
+	product_slug: 'value_bundle_monthly',
+	description: '',
+	bill_period: 31,
+	product_type: 'bundle',
+	available: 'yes',
+	multi: 0,
+	bd_slug: 'wp-bundles',
+	bd_variation_slug: 'wp-value-bundle-monthly',
+	outer_slug: null,
+	extra: null,
+	capability: 'manage_options',
+	product_name_short: 'Premium',
+	bundle_product_ids: [ 9, 12, 45, 15, 6, 16, 49, 50 ],
+	bill_period_label: 'per month',
+	price: '€14',
+	formatted_price: '€14',
+	raw_price: 14,
+	tagline: null,
+	currency_code: 'EUR',
+};

package/src/plans/mock/index.ts

@@ -0,0 +1,5 @@
+export * from './apis/features';
+export * from './apis/plans';
+export * from './store/features';
+export * from './store/plans';
+export * from './store/products';

package/src/plans/mock/store/features.ts

@@ -0,0 +1,43 @@
+import * as MockData from '../';
+import type { PlanSimplifiedFeature, PlanFeature } from '../../types';
+
+// Plan "simplified" features
+export const STORE_SIMPLIFIED_FEATURE_CUSTOM_DOMAIN: PlanSimplifiedFeature = {
+	name: MockData.API_FEATURE_CUSTOM_DOMAIN.name,
+	requiresAnnuallyBilledPlan: true,
+};
+export const STORE_SIMPLIFIED_FEATURE_LIVE_SUPPORT: PlanSimplifiedFeature = {
+	name: MockData.API_FEATURE_LIVE_SUPPORT.name,
+	requiresAnnuallyBilledPlan: true,
+};
+export const STORE_SIMPLIFIED_FEATURE_PRIORITY_SUPPORT: PlanSimplifiedFeature = {
+	name: MockData.API_FEATURE_PRIORITY_SUPPORT.name,
+	requiresAnnuallyBilledPlan: false,
+};
+
+// Plan features
+export const STORE_PLAN_FEATURE_CUSTOM_DOMAIN: PlanFeature = {
+	...MockData.API_FEATURE_CUSTOM_DOMAIN,
+	type: 'checkbox',
+	requiresAnnuallyBilledPlan: true,
+};
+export const STORE_PLAN_FEATURE_LIVE_SUPPORT: PlanFeature = {
+	...MockData.API_FEATURE_LIVE_SUPPORT,
+	type: 'checkbox',
+	requiresAnnuallyBilledPlan: true,
+};
+export const STORE_PLAN_FEATURE_PRIORITY_SUPPORT: PlanFeature = {
+	...MockData.API_FEATURE_PRIORITY_SUPPORT,
+	type: 'checkbox',
+	requiresAnnuallyBilledPlan: true,
+};
+export const STORE_PLAN_FEATURE_RECURRING_PAYMENTS: PlanFeature = {
+	...MockData.API_FEATURE_RECURRING_PAYMENTS,
+	type: 'checkbox',
+	requiresAnnuallyBilledPlan: false,
+};
+export const STORE_PLAN_FEATURE_WORDADS: PlanFeature = {
+	...MockData.API_FEATURE_WORDADS,
+	type: 'checkbox',
+	requiresAnnuallyBilledPlan: false,
+};

package/src/plans/mock/store/plans.ts

@@ -0,0 +1,50 @@
+import * as MockData from '../';
+import type { Plan } from '../../types';
+
+export const STORE_PLAN_FREE: Plan = {
+	description: 'Mock free plan',
+	features: [
+		{
+			name: 'Free plan highlighted feature',
+			requiresAnnuallyBilledPlan: false,
+		},
+	],
+	storage: '3 GB',
+	title: 'Free',
+	featuresSlugs: {
+		subdomain: true,
+	},
+	isFree: true,
+	isPopular: false,
+	periodAgnosticSlug: 'free',
+	productIds: [ 1 ],
+};
+export const STORE_PLAN_PREMIUM: Plan = {
+	description: 'Mock premium plan',
+	features: [
+		{
+			name: MockData.API_FEATURE_CUSTOM_DOMAIN.name,
+			requiresAnnuallyBilledPlan: true,
+		},
+		{
+			name: MockData.API_FEATURE_LIVE_SUPPORT.name,
+			requiresAnnuallyBilledPlan: true,
+		},
+		{
+			name: 'Premium plan highlighted feature',
+			requiresAnnuallyBilledPlan: false,
+		},
+	],
+	storage: '13 GB',
+	title: 'Premium',
+	featuresSlugs: {
+		'custom-domain': true,
+		'support-live': true,
+		'recurring-payments': true,
+		wordads: true,
+	},
+	isFree: false,
+	isPopular: true,
+	periodAgnosticSlug: 'premium',
+	productIds: [ 1003, 1013 ],
+};

package/src/plans/mock/store/products.ts

@@ -0,0 +1,34 @@
+import type { PlanProduct } from '../../types';
+
+// Plan products
+export const STORE_PRODUCT_FREE: PlanProduct = {
+	productId: 1,
+	billingPeriod: 'ANNUALLY',
+	periodAgnosticSlug: 'free',
+	storeSlug: 'free_plan',
+	rawPrice: 0,
+	pathSlug: 'free',
+	price: '€0',
+	annualPrice: '€0',
+};
+export const STORE_PRODUCT_PREMIUM_ANNUALLY: PlanProduct = {
+	productId: 1003,
+	billingPeriod: 'ANNUALLY',
+	periodAgnosticSlug: 'premium',
+	storeSlug: 'value_bundle',
+	rawPrice: 96,
+	pathSlug: 'premium',
+	price: '€8',
+	annualPrice: '€96',
+	annualDiscount: 43,
+};
+export const STORE_PRODUCT_PREMIUM_MONTHLY: PlanProduct = {
+	productId: 1013,
+	billingPeriod: 'MONTHLY',
+	periodAgnosticSlug: 'premium',
+	storeSlug: 'value_bundle_monthly',
+	rawPrice: 14,
+	price: '€14',
+	annualPrice: '€168',
+	annualDiscount: 43,
+};

package/src/plans/reducer.ts

@@ -0,0 +1,60 @@
+import { combineReducers } from '@wordpress/data';
+import type { PlanAction } from './actions';
+import type { Plan, PlanFeature, FeaturesByType, PlanProduct } from './types';
+import type { Reducer } from 'redux';
+
+// create a Locale type just for code readability
+type Locale = string;
+
+export const features: Reducer< Record< Locale, Record< string, PlanFeature > >, PlanAction > = (
+	state = {},
+	action
+) => {
+	switch ( action.type ) {
+		case 'SET_FEATURES':
+			return { ...state, [ action.locale ]: action.features };
+		default:
+			return state;
+	}
+};
+
+export const featuresByType: Reducer< Record< Locale, Array< FeaturesByType > >, PlanAction > = (
+	state = {},
+	action
+) => {
+	switch ( action.type ) {
+		case 'SET_FEATURES_BY_TYPE':
+			return { ...state, [ action.locale ]: action.featuresByType };
+		default:
+			return state;
+	}
+};
+
+export const plans: Reducer< Record< Locale, Plan[] >, PlanAction > = ( state = {}, action ) => {
+	switch ( action.type ) {
+		case 'SET_PLANS':
+			return { ...state, [ action.locale ]: action.plans };
+		default:
+			return state;
+	}
+};
+
+export const planProducts: Reducer< PlanProduct[], PlanAction > = ( state = [], action ) => {
+	switch ( action.type ) {
+		case 'SET_PLAN_PRODUCTS':
+			return action.products;
+		default:
+			return state;
+	}
+};
+
+const reducer = combineReducers( {
+	features,
+	featuresByType,
+	planProducts,
+	plans,
+} );
+
+export type State = ReturnType< typeof reducer >;
+
+export default reducer;

package/src/plans/resolvers.ts

@@ -0,0 +1,206 @@
+import formatCurrency from '@automattic/format-currency';
+import { stringify } from 'qs';
+import { fetchAndParse, wpcomRequest } from '../wpcom-request-controls';
+import { setFeatures, setFeaturesByType, setPlanProducts, setPlans } from './actions';
+import {
+	TIMELESS_PLAN_FREE,
+	TIMELESS_PLAN_PREMIUM,
+	plansProductSlugs,
+	monthlySlugs,
+	annualSlugs,
+	FEATURE_IDS_THAT_REQUIRE_ANNUALLY_BILLED_PLAN,
+} from './constants';
+import type {
+	PricedAPIPlan,
+	APIPlanDetail,
+	PlanSimplifiedFeature,
+	Plan,
+	DetailsAPIResponse,
+	PlanFeature,
+	PlanProduct,
+	PlanSlug,
+	DetailsAPIFeature,
+} from './types';
+
+const MONTHLY_PLAN_BILLING_PERIOD = 31;
+
+/**
+ * Calculates the monthly price of a plan
+ * Annual plans are only priced yearly
+ *
+ * @param plan the plan object
+ */
+function getMonthlyPrice( plan: PricedAPIPlan ) {
+	return formatCurrency( plan.raw_price / 12, plan.currency_code, { stripZeros: true } ) as string;
+}
+
+/**
+ * Calculates the yearly price of a monthly plan
+ *
+ * @param plan the plan object
+ */
+function getAnnualPrice( plan: PricedAPIPlan ) {
+	return formatCurrency( plan.raw_price * 12, plan.currency_code, { stripZeros: true } ) as string;
+}
+
+/**
+ * Formats the plan price according to 'format-currency' package rules
+ * We use this for consistency in prices formats across monthly and annual plans
+ *
+ * @param plan the plan object
+ */
+function getFormattedPrice( plan: PricedAPIPlan ) {
+	return formatCurrency( plan.raw_price, plan.currency_code, { stripZeros: true } ) as string;
+}
+
+function calculateDiscounts( planProducts: PlanProduct[] ) {
+	// calculate discounts
+	for ( let i = 0; i < annualSlugs.length; i++ ) {
+		const annualPlan = planProducts.find( ( plan ) => plan.storeSlug === annualSlugs[ i ] );
+		const monthlyPlan = planProducts.find( ( plan ) => plan.storeSlug === monthlySlugs[ i ] );
+
+		if ( annualPlan && monthlyPlan ) {
+			const annualCostIfPaidMonthly = monthlyPlan.rawPrice * 12;
+			const annualCostIfPaidAnnually = annualPlan.rawPrice;
+			const discount = Math.round(
+				100 * ( 1 - annualCostIfPaidAnnually / annualCostIfPaidMonthly )
+			);
+			annualPlan.annualDiscount = discount;
+			monthlyPlan.annualDiscount = discount;
+		}
+	}
+}
+
+function processFeatures( features: DetailsAPIFeature[] ) {
+	return features.reduce( ( features, feature ) => {
+		features[ feature.id ] = {
+			id: feature.id,
+			name: feature.name,
+			description: feature.description,
+			type: 'checkbox',
+			requiresAnnuallyBilledPlan:
+				FEATURE_IDS_THAT_REQUIRE_ANNUALLY_BILLED_PLAN.indexOf( feature.id ) > -1,
+		};
+		return features;
+	}, {} as Record< string, PlanFeature > );
+}
+
+function featureRequiresAnnual(
+	featureName: string,
+	allFeaturesData: Record< string, PlanFeature >
+): boolean {
+	const matchedFeatureId = Object.keys( allFeaturesData ).find(
+		( featureId ) => allFeaturesData[ featureId ].name === featureName
+	);
+
+	if ( matchedFeatureId ) {
+		return allFeaturesData[ matchedFeatureId ].requiresAnnuallyBilledPlan;
+	}
+
+	return false;
+}
+
+function processPlanFeatures(
+	planData: APIPlanDetail,
+	allFeaturesData: Record< string, PlanFeature >
+): PlanSimplifiedFeature[] {
+	const features: PlanSimplifiedFeature[] = planData.highlighted_features.map(
+		( featureName ) => ( {
+			name: featureName,
+			requiresAnnuallyBilledPlan: featureRequiresAnnual( featureName, allFeaturesData ),
+		} )
+	);
+
+	// Features requiring an annually billed plan should be first in the array.
+	features.sort(
+		( a, b ) => Number( b.requiresAnnuallyBilledPlan ) - Number( a.requiresAnnuallyBilledPlan )
+	);
+
+	return features;
+}
+
+function normalizePlanProducts(
+	pricedPlans: PricedAPIPlan[],
+	periodAgnosticPlans: Plan[]
+): PlanProduct[] {
+	const plansProducts: PlanProduct[] = plansProductSlugs.reduce( ( plans, slug ) => {
+		const planProduct = pricedPlans.find( ( pricedPlan ) => pricedPlan.product_slug === slug );
+
+		if ( ! planProduct ) {
+			return plans;
+		}
+
+		const periodAgnosticPlan = periodAgnosticPlans.find(
+			( plan ) => plan.productIds.indexOf( planProduct.product_id ) > -1
+		) as Plan;
+
+		plans.push( {
+			productId: planProduct.product_id,
+			// This means that free plan is considered "annually billed"
+			billingPeriod:
+				planProduct.bill_period === MONTHLY_PLAN_BILLING_PERIOD ? 'MONTHLY' : 'ANNUALLY',
+			periodAgnosticSlug: periodAgnosticPlan.periodAgnosticSlug,
+			storeSlug: planProduct.product_slug,
+			rawPrice: planProduct.raw_price,
+			// Not all plans returned from /plans have a `path_slug` (e.g. monthly plans don't have)
+			pathSlug: planProduct.path_slug,
+			price:
+				planProduct?.bill_period === MONTHLY_PLAN_BILLING_PERIOD || planProduct.raw_price === 0
+					? getFormattedPrice( planProduct )
+					: getMonthlyPrice( planProduct ),
+			annualPrice:
+				planProduct?.bill_period === MONTHLY_PLAN_BILLING_PERIOD
+					? getAnnualPrice( planProduct )
+					: getFormattedPrice( planProduct ),
+		} );
+		return plans;
+	}, [] as PlanProduct[] );
+	calculateDiscounts( plansProducts );
+	return plansProducts;
+}
+
+export function* getSupportedPlans( locale = 'en' ) {
+	const pricedPlans: PricedAPIPlan[] = yield wpcomRequest( {
+		path: '/plans',
+		query: stringify( { locale } ),
+		apiVersion: '1.5',
+	} );
+
+	const { body: plansFeatures } = ( yield fetchAndParse(
+		`https://public-api.wordpress.com/wpcom/v2/plans/details?locale=${ encodeURIComponent(
+			locale
+		) }`,
+		{
+			mode: 'cors',
+			credentials: 'omit',
+		}
+	) ) as { body: DetailsAPIResponse };
+
+	const features = processFeatures( plansFeatures.features );
+
+	const periodAgnosticPlans: Plan[] = plansFeatures.plans.map( ( plan ) => {
+		const planSlug = plan.nonlocalized_short_name?.toLowerCase() as PlanSlug;
+
+		return {
+			description: plan.tagline,
+			features: processPlanFeatures( plan, features ),
+			storage: plan.storage,
+			title: plan.short_name,
+			featuresSlugs: plan.features.reduce( ( slugs, slug ) => {
+				slugs[ slug ] = true;
+				return slugs;
+			}, {} as Record< string, boolean > ),
+			isFree: planSlug === TIMELESS_PLAN_FREE,
+			isPopular: planSlug === TIMELESS_PLAN_PREMIUM,
+			periodAgnosticSlug: planSlug,
+			productIds: plan.products.map( ( { plan_id } ) => plan_id ),
+		};
+	} );
+
+	const planProducts = normalizePlanProducts( pricedPlans, periodAgnosticPlans );
+
+	yield setPlans( periodAgnosticPlans, locale );
+	yield setPlanProducts( planProducts );
+	yield setFeatures( features, locale );
+	yield setFeaturesByType( plansFeatures.features_by_type, locale );
+}