diff --git a/src/categories/components/CategoryProductList/CategoryProductList.tsx b/src/categories/components/CategoryProductList/CategoryProductList.tsx index 5aaaf8728..ed1c432f0 100644 --- a/src/categories/components/CategoryProductList/CategoryProductList.tsx +++ b/src/categories/components/CategoryProductList/CategoryProductList.tsx @@ -14,6 +14,7 @@ import TableCellAvatar, { import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; import { maybe, renderCollection } from "@saleor/misc"; +import { getProductPriceRange } from "@saleor/products/components/ProductListPage/utils"; import { ListActions, ListProps } from "@saleor/types"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -207,13 +208,41 @@ export const CategoryProductList: React.FC = props => )} - {maybe(() => product.basePrice) && - maybe(() => product.basePrice.amount) !== undefined && - maybe(() => product.basePrice.currency) !== undefined ? ( - - ) : ( - - )} + {maybe(() => { + const { max, min } = getProductPriceRange( + product.variants + ); + const currency = product.variants[0].price.currency; + + if (max === min) { + return ( + + ); + } else { + return ( + <> + + {" - "} + + + ); + } + }, )} ); diff --git a/src/categories/fixtures.ts b/src/categories/fixtures.ts index 89ab0441f..c4317e829 100644 --- a/src/categories/fixtures.ts +++ b/src/categories/fixtures.ts @@ -117,11 +117,6 @@ export const category: ( cursor: "YXJyYXljb25uZWN0aW9uOjA=", node: { __typename: "Product", - basePrice: { - __typename: "Money", - amount: 83.3, - currency: "USD" - }, id: "UHJvZHVjdDoyMQ==", isAvailable: true, name: "Gardner-Schultz", @@ -130,7 +125,25 @@ export const category: ( id: "UHJvZHVjdFR5cGU6Mw==", name: "Coffee" }, - thumbnail: { __typename: "Image", url: placeholderImage } + thumbnail: { __typename: "Image", url: placeholderImage }, + variants: [ + { + __typename: "ProductVariant" as "ProductVariant", + price: { + __typename: "Money" as "Money", + amount: 5, + currency: "USD" + } + }, + { + __typename: "ProductVariant" as "ProductVariant", + price: { + __typename: "Money" as "Money", + amount: 10, + currency: "USD" + } + } + ] } }, { @@ -138,11 +151,6 @@ export const category: ( cursor: "YXJyYXljb25uZWN0aW9uOjE=", node: { __typename: "Product", - basePrice: { - __typename: "Money", - amount: 68.27, - currency: "USD" - }, id: "UHJvZHVjdDoyMg==", isAvailable: true, name: "James, Martinez and Murray", @@ -151,7 +159,25 @@ export const category: ( id: "UHJvZHVjdFR5cGU6Mw==", name: "Coffee" }, - thumbnail: { __typename: "Image", url: placeholderImage } + thumbnail: { __typename: "Image", url: placeholderImage }, + variants: [ + { + __typename: "ProductVariant" as "ProductVariant", + price: { + __typename: "Money" as "Money", + amount: 5, + currency: "USD" + } + }, + { + __typename: "ProductVariant" as "ProductVariant", + price: { + __typename: "Money" as "Money", + amount: 10, + currency: "USD" + } + } + ] } }, { @@ -159,11 +185,6 @@ export const category: ( cursor: "YXJyYXljb25uZWN0aW9uOjI=", node: { __typename: "Product", - basePrice: { - __typename: "Money", - amount: 21.43, - currency: "USD" - }, id: "UHJvZHVjdDoyMw==", isAvailable: true, name: "Curtis, Joyce and Turner", @@ -172,7 +193,25 @@ export const category: ( id: "UHJvZHVjdFR5cGU6Mw==", name: "Coffee" }, - thumbnail: { __typename: "Image", url: placeholderImage } + thumbnail: { __typename: "Image", url: placeholderImage }, + variants: [ + { + __typename: "ProductVariant" as "ProductVariant", + price: { + __typename: "Money" as "Money", + amount: 5, + currency: "USD" + } + }, + { + __typename: "ProductVariant" as "ProductVariant", + price: { + __typename: "Money" as "Money", + amount: 10, + currency: "USD" + } + } + ] } }, { @@ -180,11 +219,6 @@ export const category: ( cursor: "YXJyYXljb25uZWN0aW9uOjM=", node: { __typename: "Product", - basePrice: { - __typename: "Money", - amount: 62.76, - currency: "USD" - }, id: "UHJvZHVjdDoyNA==", isAvailable: true, name: "Davis, Brown and Ray", @@ -193,7 +227,25 @@ export const category: ( id: "UHJvZHVjdFR5cGU6Mw==", name: "Coffee" }, - thumbnail: { __typename: "Image", url: placeholderImage } + thumbnail: { __typename: "Image", url: placeholderImage }, + variants: [ + { + __typename: "ProductVariant" as "ProductVariant", + price: { + __typename: "Money" as "Money", + amount: 5, + currency: "USD" + } + }, + { + __typename: "ProductVariant" as "ProductVariant", + price: { + __typename: "Money" as "Money", + amount: 10, + currency: "USD" + } + } + ] } }, { @@ -201,11 +253,6 @@ export const category: ( cursor: "YXJyYXljb25uZWN0aW9uOjQ=", node: { __typename: "Product", - basePrice: { - __typename: "Money", - amount: 7.13, - currency: "USD" - }, id: "UHJvZHVjdDoyNQ==", isAvailable: true, name: "Gallegos Ltd", @@ -214,7 +261,25 @@ export const category: ( id: "UHJvZHVjdFR5cGU6Mw==", name: "Coffee" }, - thumbnail: { __typename: "Image", url: placeholderImage } + thumbnail: { __typename: "Image", url: placeholderImage }, + variants: [ + { + __typename: "ProductVariant" as "ProductVariant", + price: { + __typename: "Money" as "Money", + amount: 5, + currency: "USD" + } + }, + { + __typename: "ProductVariant" as "ProductVariant", + price: { + __typename: "Money" as "Money", + amount: 10, + currency: "USD" + } + } + ] } }, { @@ -222,11 +287,6 @@ export const category: ( cursor: "YXJyYXljb25uZWN0aW9uOjU=", node: { __typename: "Product", - basePrice: { - __typename: "Money", - amount: 48.82, - currency: "USD" - }, id: "UHJvZHVjdDoyNg==", isAvailable: true, name: "Franklin Inc", @@ -235,7 +295,25 @@ export const category: ( id: "UHJvZHVjdFR5cGU6Mw==", name: "Coffee" }, - thumbnail: { __typename: "Image", url: placeholderImage } + thumbnail: { __typename: "Image", url: placeholderImage }, + variants: [ + { + __typename: "ProductVariant" as "ProductVariant", + price: { + __typename: "Money" as "Money", + amount: 5, + currency: "USD" + } + }, + { + __typename: "ProductVariant" as "ProductVariant", + price: { + __typename: "Money" as "Money", + amount: 10, + currency: "USD" + } + } + ] } }, { @@ -243,11 +321,6 @@ export const category: ( cursor: "YXJyYXljb25uZWN0aW9uOjY=", node: { __typename: "Product", - basePrice: { - __typename: "Money", - amount: 27.34, - currency: "USD" - }, id: "UHJvZHVjdDoyNw==", isAvailable: true, name: "Williams-Taylor", @@ -256,7 +329,25 @@ export const category: ( id: "UHJvZHVjdFR5cGU6Mw==", name: "Coffee" }, - thumbnail: { __typename: "Image", url: placeholderImage } + thumbnail: { __typename: "Image", url: placeholderImage }, + variants: [ + { + __typename: "ProductVariant" as "ProductVariant", + price: { + __typename: "Money" as "Money", + amount: 5, + currency: "USD" + } + }, + { + __typename: "ProductVariant" as "ProductVariant", + price: { + __typename: "Money" as "Money", + amount: 10, + currency: "USD" + } + } + ] } }, { @@ -264,11 +355,6 @@ export const category: ( cursor: "YXJyYXljb25uZWN0aW9uOjc=", node: { __typename: "Product", - basePrice: { - __typename: "Money", - amount: 75.42, - currency: "USD" - }, id: "UHJvZHVjdDoyOA==", isAvailable: true, name: "Riddle, Evans and Hicks", @@ -277,7 +363,25 @@ export const category: ( id: "UHJvZHVjdFR5cGU6Mw==", name: "Coffee" }, - thumbnail: { __typename: "Image", url: placeholderImage } + thumbnail: { __typename: "Image", url: placeholderImage }, + variants: [ + { + __typename: "ProductVariant" as "ProductVariant", + price: { + __typename: "Money" as "Money", + amount: 5, + currency: "USD" + } + }, + { + __typename: "ProductVariant" as "ProductVariant", + price: { + __typename: "Money" as "Money", + amount: 10, + currency: "USD" + } + } + ] } }, { @@ -285,11 +389,6 @@ export const category: ( cursor: "YXJyYXljb25uZWN0aW9uOjg=", node: { __typename: "Product", - basePrice: { - __typename: "Money", - amount: 86.62, - currency: "USD" - }, id: "UHJvZHVjdDoyOQ==", isAvailable: true, name: "Hebert-Sherman", @@ -298,7 +397,25 @@ export const category: ( id: "UHJvZHVjdFR5cGU6Mw==", name: "Coffee" }, - thumbnail: { __typename: "Image", url: placeholderImage } + thumbnail: { __typename: "Image", url: placeholderImage }, + variants: [ + { + __typename: "ProductVariant" as "ProductVariant", + price: { + __typename: "Money" as "Money", + amount: 5, + currency: "USD" + } + }, + { + __typename: "ProductVariant" as "ProductVariant", + price: { + __typename: "Money" as "Money", + amount: 10, + currency: "USD" + } + } + ] } }, { @@ -306,11 +423,6 @@ export const category: ( cursor: "YXJyYXljb25uZWN0aW9uOjk=", node: { __typename: "Product", - basePrice: { - __typename: "Money", - amount: 48.66, - currency: "USD" - }, id: "UHJvZHVjdDozMA==", isAvailable: true, name: "Carter and Sons", @@ -319,7 +431,25 @@ export const category: ( id: "UHJvZHVjdFR5cGU6Mw==", name: "Coffee" }, - thumbnail: { __typename: "Image", url: placeholderImage } + thumbnail: { __typename: "Image", url: placeholderImage }, + variants: [ + { + __typename: "ProductVariant" as "ProductVariant", + price: { + __typename: "Money" as "Money", + amount: 5, + currency: "USD" + } + }, + { + __typename: "ProductVariant" as "ProductVariant", + price: { + __typename: "Money" as "Money", + amount: 10, + currency: "USD" + } + } + ] } } ], diff --git a/src/categories/queries.ts b/src/categories/queries.ts index 76b0efe6a..e89afa141 100644 --- a/src/categories/queries.ts +++ b/src/categories/queries.ts @@ -112,6 +112,12 @@ export const categoryDetails = gql` id name } + variants { + price { + amount + currency + } + } } } } diff --git a/src/categories/types/CategoryDetails.ts b/src/categories/types/CategoryDetails.ts index 21a0b0a5d..8be554dc3 100644 --- a/src/categories/types/CategoryDetails.ts +++ b/src/categories/types/CategoryDetails.ts @@ -73,6 +73,17 @@ export interface CategoryDetails_category_products_edges_node_productType { name: string; } +export interface CategoryDetails_category_products_edges_node_variants_price { + __typename: "Money"; + amount: number; + currency: string; +} + +export interface CategoryDetails_category_products_edges_node_variants { + __typename: "ProductVariant"; + price: CategoryDetails_category_products_edges_node_variants_price | null; +} + export interface CategoryDetails_category_products_edges_node { __typename: "Product"; id: string; @@ -80,6 +91,7 @@ export interface CategoryDetails_category_products_edges_node { isAvailable: boolean | null; thumbnail: CategoryDetails_category_products_edges_node_thumbnail | null; productType: CategoryDetails_category_products_edges_node_productType; + variants: (CategoryDetails_category_products_edges_node_variants | null)[] | null; } export interface CategoryDetails_category_products_edges { diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index 3de6622f5..50d81bc57 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -25221,7 +25221,7 @@ Ctrl + K" - $83.30 + $5.00 - $10.00 - $68.27 + $5.00 - $10.00 - $21.43 + $5.00 - $10.00 - $62.76 + $5.00 - $10.00 - $7.13 + $5.00 - $10.00 - $48.82 + $5.00 - $10.00 - $27.34 + $5.00 - $10.00 - $75.42 + $5.00 - $10.00 - $86.62 + $5.00 - $10.00 - $48.66 + $5.00 - $10.00