From 23773e19f0b4b7b6ac357037c04b51367bad79c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cem=20=C3=9Cnalan?= <raicem@users.noreply.github.com>
Date: Fri, 10 May 2024 23:00:05 +0300
Subject: [PATCH] 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>
---
 .../product-card/product-card-footer.tsx      | 35 ++++++++++++++-----
 .../product-list-content.tsx                  |  1 +
 .../components/product-list/types.ts          |  2 ++
 .../client/marketplace/utils/functions.tsx    |  1 +
 ...-update-in-app-marketplace-new-price-label |  4 +++
 5 files changed, 34 insertions(+), 9 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/45982-update-in-app-marketplace-new-price-label

diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card-footer.tsx b/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card-footer.tsx
index 38dcdd0f0b1..c3a337464b7 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card-footer.tsx
+++ b/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">
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx b/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx
index 9111923f3e8..79bf0e05995 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx
+++ b/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,
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-list/types.ts b/plugins/woocommerce-admin/client/marketplace/components/product-list/types.ts
index 1626e469df2..1080acf7468 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/product-list/types.ts
+++ b/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;
diff --git a/plugins/woocommerce-admin/client/marketplace/utils/functions.tsx b/plugins/woocommerce-admin/client/marketplace/utils/functions.tsx
index 7378d326409..98d36d41bd8 100644
--- a/plugins/woocommerce-admin/client/marketplace/utils/functions.tsx
+++ b/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,
diff --git a/plugins/woocommerce/changelog/45982-update-in-app-marketplace-new-price-label b/plugins/woocommerce/changelog/45982-update-in-app-marketplace-new-price-label
new file mode 100644
index 00000000000..466c1002c21
--- /dev/null
+++ b/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
\ No newline at end of file