Freemium: update marketplace product card label (#45982)

* Freemium: update marketplace product card label

* Add changefile(s) from automation for the following project(s): woocommerce

* Add changefile(s) from automation for the following project(s): woocommerce

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce-admin/client/marketplace/components/product-card/product-card-footer.tsx

@@ -67,6 +67,30 @@ function ProductCardFooter( props: { product: Product } ) {
 	// We hardcode this for now while we only display prices in USD.
 	const currencySymbol = '$';
 
+	function getPriceLabel(): string {
+		if ( product.price === 0 ) {
+			return __( 'Free download', 'woocommerce' );
+		}
+
+		if ( product.freemium_type === 'primary' ) {
+			return __( 'Free plan available', 'woocommerce' );
+		}
+
+		return currencySymbol + product.price;
+	}
+
+	function getBillingText(): string {
+		if ( product.freemium_type === 'primary' ) {
+			return '';
+		}
+
+		if ( product.price !== 0 ) {
+			return __( ' annually', 'woocommerce' );
+		}
+
+		return '';
+	}
+
 	if ( shouldShowAddToStore( product ) ) {
 		return (
 			<>
@@ -83,17 +107,10 @@ function ProductCardFooter( props: { product: Product } ) {
 		<>
 			<div className="woocommerce-marketplace__product-card__price">
 				<span className="woocommerce-marketplace__product-card__price-label">
-					{
-						// '0' is a free product
-						product.price === 0
-							? __( 'Free download', 'woocommerce' )
-							: currencySymbol + product.price
-					}
+					{ getPriceLabel() }
 				</span>
 				<span className="woocommerce-marketplace__product-card__price-billing">
-					{ product.price === 0
-						? ''
-						: __( ' annually', 'woocommerce' ) }
+					{ getBillingText() }
 				</span>
 			</div>
 			<div className="woocommerce-marketplace__product-card__rating">

plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx

@@ -72,6 +72,7 @@ export default function ProductListContent( props: {
 								title: product.title,
 								image: product.image,
 								type: product.type,
+								freemium_type: product.freemium_type,
 								icon: product.icon,
 								label: product.label,
 								primary_color: product.primary_color,

plugins/woocommerce-admin/client/marketplace/components/product-list/types.ts

@@ -6,6 +6,7 @@ export type SearchAPIProductType = {
 	title: string;
 	image: string;
 	type: ProductType;
+	freemium_type: 'unset' | 'primary';
 	excerpt: string;
 	link: string;
 	demo_url: string;
@@ -29,6 +30,7 @@ export interface Product {
 	title: string;
 	image: string;
 	type: ProductType;
+	freemium_type?: 'unset' | 'primary';
 	description: string;
 	vendorName: string;
 	vendorUrl: string;

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

@@ -129,6 +129,7 @@ async function fetchSearchResults(
 							title: product.title,
 							image: product.image,
 							type: product.type,
+							freemium_type: product.freemium_type,
 							description: product.excerpt,
 							vendorName: product.vendor_name,
 							vendorUrl: product.vendor_url,

plugins/woocommerce/changelog/45982-update-in-app-marketplace-new-price-label

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Show the label for freemium products in the in-app marketpalce