A4A > Marketplace: Implement Term pricing for Hosting, Products & Cart

Author: yashwin

client/a8c-for-agencies/components/pressable-usage-details/index.tsx

@@ -6,7 +6,7 @@ import { useSelector } from 'react-redux';
 import getPressablePlan from 'calypso/a8c-for-agencies/sections/marketplace/pressable-overview/lib/get-pressable-plan';
 import { getActiveAgency } from 'calypso/state/a8c-for-agencies/agency/selectors';
 import { TitanOrder } from 'calypso/state/a8c-for-agencies/types';
-import { APIProductFamilyProduct } from 'calypso/state/partner-portal/types';
+import type { APIProductFamilyProduct } from 'calypso/a8c-for-agencies/types/products';
 
 import './style.scss';
 

client/a8c-for-agencies/data/client/use-fetch-client-products.ts

@@ -1,7 +1,10 @@
 import { UseQueryResult, useQuery } from '@tanstack/react-query';
 import { selectAlphabeticallySortedProductOptions } from 'calypso/jetpack-cloud/sections/partner-portal/lib';
 import wpcom from 'calypso/lib/wp';
-import { APIProductFamily, APIProductFamilyProduct } from 'calypso/state/partner-portal/types';
+import type {
+	APIProductFamily,
+	APIProductFamilyProduct,
+} from 'calypso/a8c-for-agencies/types/products';
 
 function queryClientProducts(): Promise< APIProductFamily[] > {
 	return wpcom.req

client/a8c-for-agencies/data/marketplace/use-products-query.ts

@@ -1,3 +1,4 @@
+import { isEnabled } from '@automattic/calypso-config';
 import { useQuery, UseQueryResult, useQueryClient } from '@tanstack/react-query';
 import { useTranslate } from 'i18n-calypso';
 import { useEffect } from 'react';
@@ -7,16 +8,17 @@ import wpcom from 'calypso/lib/wp';
 import { useDispatch, useSelector } from 'calypso/state';
 import { getActiveAgencyId } from 'calypso/state/a8c-for-agencies/agency/selectors';
 import { errorNotice } from 'calypso/state/notices/actions';
-import { APIProductFamily, APIProductFamilyProduct } from 'calypso/state/partner-portal/types';
+import type {
+	APIProductFamily,
+	APIProductFamilyProduct,
+} from 'calypso/a8c-for-agencies/types/products';
 
-function queryProducts(
-	isPublicFacing: boolean,
-	agencyId?: number
-): Promise< APIProductFamily[] > {
-	const productsAPIPath = isPublicFacing
-		? '/jetpack-licensing/public/manage-pricing'
-		: '/jetpack-licensing/partner/product-families';
+const isTermPricingEnabled = isEnabled( 'a4a-bd-term-pricing' ) && isEnabled( 'a4a-bd-checkout' );
 
+async function queryProducts( agencyId?: number ): Promise< APIProductFamily[] > {
+	const productsAPIPath = isTermPricingEnabled
+		? '/agency/products'
+		: '/jetpack-licensing/partner/product-families';
 	return wpcom.req
 		.get(
 			{
@@ -60,20 +62,9 @@ function queryProducts(
 		} );
 }
 
-export function usePublicProductsQuery(): UseQueryResult< APIProductFamilyProduct[], unknown > {
-	return useProductsQuery( true );
-}
-
-const getProductsQueryKey = ( isPublicFacing: boolean, agencyId?: number ) => [
-	'a4a',
-	'marketplace',
-	'products',
-	isPublicFacing,
-	agencyId,
-];
+const getProductsQueryKey = ( agencyId?: number ) => [ 'a4a', 'marketplace', 'products', agencyId ];
 
 export default function useProductsQuery(
-	isPublicFacing = false,
 	includeRawData = false,
 	useStaleData = false
 ): UseQueryResult< APIProductFamilyProduct[], unknown > {
@@ -82,7 +73,7 @@ export default function useProductsQuery(
 	const agencyId = useSelector( getActiveAgencyId );
 
 	const queryClient = useQueryClient();
-	const data = queryClient.getQueryData( getProductsQueryKey( isPublicFacing, agencyId ) );
+	const data = queryClient.getQueryData( getProductsQueryKey( agencyId ) );
 
 	let staleTime = 0;
 
@@ -92,10 +83,10 @@ export default function useProductsQuery(
 	}
 
 	const query = useQuery( {
-		queryKey: getProductsQueryKey( isPublicFacing, agencyId ),
-		queryFn: () => queryProducts( isPublicFacing, agencyId ),
+		queryKey: getProductsQueryKey( agencyId ),
+		queryFn: () => queryProducts( agencyId ),
 		select: includeRawData ? getProductsRaw : selectAlphabeticallySortedProductOptions,
-		enabled: isPublicFacing || !! agencyId,
+		enabled: !! agencyId,
 		refetchOnWindowFocus: false,
 		staleTime,
 	} );

client/a8c-for-agencies/sections/client/primary/subscriptions-list/mobile-view/index.tsx

@@ -9,7 +9,7 @@ import {
 	SubscriptionStatus,
 } from '../field-content';
 import type { Subscription } from '../../../types';
-import type { APIProductFamilyProduct } from 'calypso/state/partner-portal/types';
+import type { APIProductFamilyProduct } from 'calypso/a8c-for-agencies/types/products';
 
 import './style.scss';
 

client/a8c-for-agencies/sections/marketplace/commissions-info/index.tsx

@@ -1,19 +1,33 @@
+import { isEnabled } from '@automattic/calypso-config';
 import { formatCurrency } from '@automattic/number-formatters';
 import { useTranslate } from 'i18n-calypso';
 import { getProductCommissionPercentage } from '../../referrals/lib/commissions';
-import type { ShoppingCartItem } from '../types';
+import type { ShoppingCartItem, TermPricingType } from '../types';
 
 import './style.scss';
 
-export default function CommissionsInfo( { items }: { items: ShoppingCartItem[] } ) {
+export default function CommissionsInfo( {
+	items,
+	termPricing,
+}: {
+	items: ShoppingCartItem[];
+	termPricing?: TermPricingType;
+} ) {
 	const translate = useTranslate();
 
+	const isTermPricingEnabled = isEnabled( 'a4a-bd-term-pricing' ) && isEnabled( 'a4a-bd-checkout' );
+
 	const totalCommissions = items.reduce( ( acc, item ) => {
 		const product = item;
-		const commissionPercentage = getProductCommissionPercentage( product.family_slug );
-		const totalCommissions = product?.amount
-			? Number( product.amount.replace( /,/g, '' ) ) * commissionPercentage
-			: 0;
+		const commissionPercentage = getProductCommissionPercentage(
+			product.slug,
+			product.family_slug
+		);
+		const termPrice =
+			termPricing === 'yearly' ? product.yearly_price ?? 0 : product.monthly_price ?? 0;
+		const productAmount = product?.amount ? Number( product.amount.replace( /,/g, '' ) ) : 0;
+		const productPrice = isTermPricingEnabled ? termPrice : productAmount;
+		const totalCommissions = productPrice * commissionPercentage || 0;
 		return acc + totalCommissions;
 	}, 0 );
 
@@ -22,16 +36,25 @@ export default function CommissionsInfo( { items }: { items: ShoppingCartItem[]
 		return null;
 	}
 
+	const currency = items[ 0 ]?.currency ?? 'USD';
+
+	const totalPricePerTerm =
+		isTermPricingEnabled && termPricing === 'yearly'
+			? translate( '%(total)s/yr', {
+					args: {
+						total: formatCurrency( totalCommissions, currency ),
+					},
+			  } )
+			: translate( '%(total)s/mo', {
+					args: {
+						total: formatCurrency( totalCommissions, currency ),
+					},
+			  } );
+
 	return (
 		<div className="commissions-info">
 			<span>{ translate( 'Your estimated commission:' ) }</span>
-			<span>
-				{ translate( '%(total)s/mo', {
-					args: {
-						total: formatCurrency( totalCommissions, 'USD' ),
-					},
-				} ) }
-			</span>
+			<span>{ totalPricePerTerm }</span>
 		</div>
 	);
 }

client/a8c-for-agencies/sections/marketplace/download-products-form/woo-product-download.tsx

@@ -6,8 +6,8 @@ import ClipboardButton from 'calypso/components/forms/clipboard-button';
 import { useDispatch } from 'calypso/state';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { infoNotice, errorNotice } from 'calypso/state/notices/actions';
-import { APIProductFamilyProduct } from 'calypso/state/partner-portal/types';
 import useLicenseDownloadUrlMutation from '../../purchases/licenses/revoke-license-dialog/hooks/use-license-download-url-mutation';
+import type { APIProductFamilyProduct } from 'calypso/a8c-for-agencies/types/products';
 
 interface WooProductDownloadProps {
 	licenseKey: string;

client/a8c-for-agencies/sections/marketplace/hooks/use-product-and-plans.tsx

@@ -4,7 +4,6 @@ import useProductsQuery from 'calypso/a8c-for-agencies/data/marketplace/use-prod
 import { isProductMatch } from 'calypso/jetpack-cloud/sections/partner-portal/primary/issue-license/lib/filter';
 import { useSelector } from 'calypso/state';
 import { getAssignedPlanAndProductIDsForSite } from 'calypso/state/partner-portal/licenses/selectors';
-import { APIProductFamilyProduct } from 'calypso/state/partner-portal/types';
 import {
 	PRODUCT_TYPE_JETPACK_BACKUP_ADDON,
 	PRODUCT_TYPE_JETPACK_PLAN,
@@ -19,6 +18,7 @@ import {
 	filterProductsAndPlansByType,
 } from '../lib/product-filter';
 import type { SiteDetails } from '@automattic/data-stores';
+import type { APIProductFamilyProduct } from 'calypso/a8c-for-agencies/types/products';
 
 // Plans and Products that we can merged into 1 card.
 const MERGABLE_PLANS = [ 'jetpack-security' ];
@@ -111,9 +111,8 @@ export default function useProductAndPlans( {
 	selectedSite,
 	selectedProductFilters,
 	productSearchQuery,
-	usePublicQuery = false,
 }: Props ) {
-	const { data, isLoading: isLoadingProducts } = useProductsQuery( usePublicQuery );
+	const { data, isLoading: isLoadingProducts } = useProductsQuery();
 
 	const addedPlanAndProducts = useSelector( ( state ) =>
 		selectedSite ? getAssignedPlanAndProductIDsForSite( state, selectedSite.ID ) : null

client/a8c-for-agencies/sections/marketplace/hooks/use-product-categories.ts

@@ -1,7 +1,6 @@
 import { useTranslate } from 'i18n-calypso';
 import { useMemo } from 'react';
 import { isWooCommerceProduct } from 'calypso/jetpack-cloud/sections/partner-portal/lib';
-import { APIProductFamilyProduct } from 'calypso/state/partner-portal/types';
 import { isProductType } from '../lib/product-filter';
 import {
 	SECURITY_PRODUCT_SLUGS,
@@ -16,6 +15,7 @@ import {
 	STORE_CONTENT_PRODUCT_SLUGS,
 	STORE_MANAGEMENT_PRODUCT_SLUGS,
 } from '../lib/product-slugs';
+import type { APIProductFamilyProduct } from 'calypso/a8c-for-agencies/types/products';
 
 type CategoryConfig = {
 	slugs: string[];
@@ -24,7 +24,7 @@ type CategoryConfig = {
 
 export function useProductCategories( product: APIProductFamilyProduct ): string[] {
 	const translate = useTranslate();
-	const { family_slug } = product;
+	const { family_slug, slug } = product;
 
 	return useMemo( () => {
 		// Add e-commerce category for WooCommerce products
@@ -49,7 +49,7 @@ export function useProductCategories( product: APIProductFamilyProduct ): string
 		// Add regular categories
 		categories.push(
 			...CATEGORIES.reduce( ( acc: string[], { slugs, label } ) => {
-				if ( slugs.includes( family_slug ) ) {
+				if ( slugs.includes( slug ) ) {
 					acc.push( label );
 				}
 				return acc;
@@ -68,5 +68,5 @@ export function useProductCategories( product: APIProductFamilyProduct ): string
 		}
 
 		return categories;
-	}, [ family_slug, translate ] );
+	}, [ family_slug, translate, slug ] );
 }