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 9b3b0400442..924f4e70628 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 @@ -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 } ) { <>
- { getPriceLabel() } + + { getReaderPriceLabel() } + + { getPriceLabel() } - + + { product.isOnSale && ( + + { sprintf( + getCurrencyFormat( product.currency ), + product.regularPrice + ) } + + ) } + + { getBillingText() }
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.scss b/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.scss index 9f3d404d053..4bc5639b727 100644 --- a/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.scss +++ b/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; diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.tsx b/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.tsx index 00ba4a2d0e7..e96484e6def 100644 --- a/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.tsx +++ b/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 { 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 ff414b7c1d7..8a1b510ddf9 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 @@ -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, 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 9ee660ddb08..c7b9db5682f 100644 --- a/plugins/woocommerce-admin/client/marketplace/components/product-list/types.ts +++ b/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 { diff --git a/plugins/woocommerce-admin/client/marketplace/utils/functions.tsx b/plugins/woocommerce-admin/client/marketplace/utils/functions.tsx index a063490eefc..67a8319db21 100644 --- a/plugins/woocommerce-admin/client/marketplace/utils/functions.tsx +++ b/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,