Update marketplace product card for updated WCCOM search API (#39689)
This commit is contained in:
commit
6b1694f89b
|
@ -9,7 +9,6 @@ import { Button, Card } from '@wordpress/components';
|
||||||
*/
|
*/
|
||||||
import './product-card.scss';
|
import './product-card.scss';
|
||||||
import { Product } from '../product-list/types';
|
import { Product } from '../product-list/types';
|
||||||
import { getAdminSetting } from '../../../../client/utils/admin-settings';
|
|
||||||
import { appendUTMParams } from '../../utils/functions';
|
import { appendUTMParams } from '../../utils/functions';
|
||||||
|
|
||||||
export interface ProductCardProps {
|
export interface ProductCardProps {
|
||||||
|
@ -19,7 +18,8 @@ export interface ProductCardProps {
|
||||||
|
|
||||||
function ProductCard( props: ProductCardProps ): JSX.Element {
|
function ProductCard( props: ProductCardProps ): JSX.Element {
|
||||||
const { product } = props;
|
const { product } = props;
|
||||||
const currencySymbol = getAdminSetting( 'currency' )?.symbol;
|
// We hardcode this for now while we only display prices in USD.
|
||||||
|
const currencySymbol = '$';
|
||||||
|
|
||||||
// Append UTM parameters to the vendor URL
|
// Append UTM parameters to the vendor URL
|
||||||
let vendorUrl = '';
|
let vendorUrl = '';
|
||||||
|
@ -76,12 +76,15 @@ function ProductCard( props: ProductCardProps ): JSX.Element {
|
||||||
variant="link"
|
variant="link"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
{ product.price === 0 || product.price === '0'
|
{
|
||||||
? __( 'Free download', 'woocommerce' )
|
// '0' is a free product
|
||||||
: currencySymbol + product.price }
|
product.price === 0
|
||||||
|
? __( 'Free download', 'woocommerce' )
|
||||||
|
: currencySymbol + product.price
|
||||||
|
}
|
||||||
</span>
|
</span>
|
||||||
<span className="woocommerce-marketplace__product-card__price-billing">
|
<span className="woocommerce-marketplace__product-card__price-billing">
|
||||||
{ product.price === 0 || product.price === '0'
|
{ product.price === 0
|
||||||
? ''
|
? ''
|
||||||
: __( ' annually', 'woocommerce' ) }
|
: __( ' annually', 'woocommerce' ) }
|
||||||
</span>
|
</span>
|
||||||
|
|
|
@ -5,6 +5,7 @@ export type SearchAPIProductType = {
|
||||||
link: string;
|
link: string;
|
||||||
demo_url: string;
|
demo_url: string;
|
||||||
price: string;
|
price: string;
|
||||||
|
raw_price: number;
|
||||||
hash: string;
|
hash: string;
|
||||||
slug: string;
|
slug: string;
|
||||||
id: number;
|
id: number;
|
||||||
|
@ -23,9 +24,8 @@ export interface Product {
|
||||||
vendorUrl: string;
|
vendorUrl: string;
|
||||||
icon: string;
|
icon: string;
|
||||||
url: string;
|
url: string;
|
||||||
price: string | number;
|
price: number;
|
||||||
productType?: string;
|
productType?: string;
|
||||||
averageRating?: number | null;
|
averageRating?: number | null;
|
||||||
reviewsCount?: number | null;
|
reviewsCount?: number | null;
|
||||||
currency?: string;
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -78,10 +78,10 @@ export function ProductListContextProvider(
|
||||||
vendorUrl: product.vendor_url,
|
vendorUrl: product.vendor_url,
|
||||||
icon: product.icon,
|
icon: product.icon,
|
||||||
url: product.link,
|
url: product.link,
|
||||||
price: product.price,
|
// Due to backwards compatibility, raw_price is from search API, price is from featured API
|
||||||
|
price: product.raw_price ?? product.price,
|
||||||
averageRating: product.rating ?? 0,
|
averageRating: product.rating ?? 0,
|
||||||
reviewsCount: product.reviews_count ?? 0,
|
reviewsCount: product.reviews_count ?? 0,
|
||||||
currency: '',
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue