Cherry pick 51499 into release/9.4 (#52035)

* Show correct decimals on product price and show the sale price of products (#51499)

* add regular price and sale price flag to product apis and types

* add sale price and screen reader text for prices on product cards

* fix typo on sale flag

* add regular price and sale price flag to product apis and types

* add sale price and screen reader text for prices on product cards

* fix typo on sale flag

* Changelog.

* address feedback on sale price VO text

---------

Co-authored-by: Herman <KokkieH@users.noreply.github.com>
Co-authored-by: And Finally <andfinally@users.noreply.github.com>

* Prep for cherry pick 51499

---------

Co-authored-by: Raja sekar <raja.sekar.manimaran@automattic.com>
Co-authored-by: Herman <KokkieH@users.noreply.github.com>
Co-authored-by: And Finally <andfinally@users.noreply.github.com>
Co-authored-by: WooCommerce Bot <no-reply@woocommerce.com>

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

@@ -144,6 +144,35 @@ function ProductCardFooter( props: { product: Product } ) {
 		return '';
 	}
 
+	const getReaderPriceLabel = () => {
+		if ( product.isOnSale ) {
+			return sprintf(
+				//translators: %1$s is the sale price of the product, %2$s is the regular price of the product, %3$s is the billing period
+				__(
+					'Sale Price %1$s %3$s, regular price %2$s %3$s',
+					'woocommerce'
+				),
+				getPriceLabel(),
+				sprintf(
+					getCurrencyFormat( product.currency ),
+					product.regularPrice
+				),
+				getBillingText()
+			);
+		}
+
+		if ( product.price !== 0 && product.freemium_type !== 'primary' ) {
+			return sprintf(
+				//translators: %1$s is the price of the product, %2$s is the billing period
+				__( ' %1$s, %2$s ', 'woocommerce' ),
+				getPriceLabel(),
+				getBillingText()
+			);
+		}
+
+		return getPriceLabel();
+	};
+
 	if ( shouldShowAddToStore( product ) ) {
 		return (
 			<>
@@ -160,9 +189,28 @@ function ProductCardFooter( props: { product: Product } ) {
 		<>
 			<div className="woocommerce-marketplace__product-card__price">
 				<span className="woocommerce-marketplace__product-card__price-label">
-					{ getPriceLabel() }
+					<span className="screen-reader-text">
+						{ getReaderPriceLabel() }
 					</span>
-				<span className="woocommerce-marketplace__product-card__price-billing">
+					<span aria-hidden>{ getPriceLabel() }</span>
+				</span>
+
+				{ product.isOnSale && (
+					<span
+						className="woocommerce-marketplace__product-card__on-sale"
+						aria-hidden
+					>
+						{ sprintf(
+							getCurrencyFormat( product.currency ),
+							product.regularPrice
+						) }
+					</span>
+				) }
+
+				<span
+					className="woocommerce-marketplace__product-card__price-billing"
+					aria-hidden
+				>
 					{ getBillingText() }
 				</span>
 			</div>

plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.scss

@@ -217,6 +217,12 @@
 			line-height: $medium-gap;
 		}
 
+		&__on-sale {
+			color: $gray-600;
+			font-weight: 400;
+			text-decoration: line-through;
+		}
+
 		&__price-billing {
 			color: $gray-600;
 			font-size: $default-font-size;

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

@@ -51,6 +51,8 @@ function ProductCard( props: ProductCardProps ): JSX.Element {
 		billingPeriod: '',
 		billingPeriodInterval: 0,
 		currency: '',
+		isOnSale: false,
+		regularPrice: 0,
 	};
 
 	function isSponsored(): boolean {

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

@@ -109,6 +109,8 @@ export default function ProductListContent( props: {
 								billingPeriodInterval:
 									product.billingPeriodInterval,
 								currency: product.currency,
+								isOnSale: product.isOnSale,
+								regularPrice: product.regularPrice,
 							} }
 							tracksData={ {
 								position: index + 1,

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

@@ -29,6 +29,8 @@ export type SearchAPIProductType = {
 	billing_period: string;
 	billing_period_interval: number;
 	currency: string;
+	is_on_sale: boolean;
+	regular_price: number;
 };
 
 export interface Product {
@@ -60,6 +62,8 @@ export interface Product {
 	billingPeriod?: string;
 	billingPeriodInterval?: number;
 	currency: string;
+	isOnSale: boolean;
+	regularPrice: number;
 }
 
 export interface ProductTracksData {

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

@@ -142,6 +142,8 @@ async function fetchSearchResults(
 							url: product.link,
 							// Due to backwards compatibility, raw_price is from search API, price is from featured API
 							price: product.raw_price ?? product.price,
+							regularPrice: product.regular_price,
+							isOnSale: product.is_on_sale,
 							averageRating: product.rating ?? null,
 							reviewsCount: product.reviews_count ?? null,
 							isInstallable: product.is_installable,
@@ -426,6 +428,8 @@ const subscriptionToProduct = ( subscription: Subscription ): Product => {
 		icon: subscription.product_icon,
 		url: subscription.product_url,
 		price: -1,
+		regularPrice: -1,
+		isOnSale: false,
 		averageRating: null,
 		reviewsCount: null,
 		isInstallable: false,