Display variant price range in product list

src/products/components/ProductList/ProductList.tsx

@@ -18,6 +18,7 @@ import { ProductListColumns } from "@saleor/config";
 import { maybe, renderCollection } from "@saleor/misc";
 import {
   getAttributeIdFromColumnValue,
+  getProductPriceRange,
   isAttributeColumnValue
 } from "@saleor/products/components/ProductListPage/utils";
 import { AvailableInGridAttributes_grid_edges_node } from "@saleor/products/types/AvailableInGridAttributes";
@@ -372,13 +373,48 @@ export const ProductList: React.FC<ProductListProps> = props => {
                     displayColumns={settings.columns}
                   >
                     <TableCell className={classes.colPrice}>
-                      {maybe(() => product.basePrice) &&
-                      maybe(() => product.basePrice.amount) !== undefined &&
-                      maybe(() => product.basePrice.currency) !== undefined ? (
-                        <Money money={product.basePrice} />
-                      ) : (
-                        <Skeleton />
-                      )}
+                      {maybe<React.ReactNode>(() => {
+                        const { max, min } = getProductPriceRange(
+                          product.variants
+                        );
+                        const currency = product.variants[0].price.currency;
+
+                        if (max === min) {
+                          return (
+                            <Money
+                              money={{
+                                amount: min,
+                                currency
+                              }}
+                            />
+                          );
+                        } else {
+                          return (
+                            <>
+                              {intl.formatMessage({
+                                defaultMessage: "From",
+                                description: "from"
+                              })}{" "}
+                              <Money
+                                money={{
+                                  amount: min,
+                                  currency
+                                }}
+                              />{" "}
+                              {intl.formatMessage({
+                                defaultMessage: "to",
+                                description: "to"
+                              })}{" "}
+                              <Money
+                                money={{
+                                  amount: max,
+                                  currency
+                                }}
+                              />
+                            </>
+                          );
+                        }
+                      }, <Skeleton />)}
                     </TableCell>
                   </DisplayColumn>
                 </TableRow>

src/products/components/ProductListPage/utils.ts

@@ -1,3 +1,5 @@
+import { ProductList_products_edges_node_variants } from "@saleor/products/types/ProductList";
+
 const prefix = "attribute";
 
 export function getAttributeColumnValue(id: string) {
@@ -11,3 +13,21 @@ export function isAttributeColumnValue(value: string) {
 export function getAttributeIdFromColumnValue(value: string) {
   return value.substr(prefix.length + 1);
 }
+
+export function getProductPriceRange(
+  productVariants: ProductList_products_edges_node_variants[]
+) {
+  let max = productVariants[0].price.amount;
+  let min = productVariants[0].price.amount;
+
+  for (let i = 1, len = productVariants.length; i < len; i++) {
+    const price = productVariants[i].price;
+    max = price.amount > max ? price.amount : max;
+    min = price.amount < min ? price.amount : min;
+  }
+
+  return {
+    max,
+    min
+  };
+}

src/products/queries.ts

@@ -330,6 +330,12 @@ const productListQuery = gql`
               name
             }
           }
+          variants {
+            price {
+              amount
+              currency
+            }
+          }
         }
       }
       pageInfo {

src/products/types/ProductList.ts

@@ -36,6 +36,17 @@ export interface ProductList_products_edges_node_attributes {
   values: (ProductList_products_edges_node_attributes_values | null)[];
 }
 
+export interface ProductList_products_edges_node_variants_price {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface ProductList_products_edges_node_variants {
+  __typename: "ProductVariant";
+  price: ProductList_products_edges_node_variants_price | null;
+}
+
 export interface ProductList_products_edges_node {
   __typename: "Product";
   id: string;
@@ -45,6 +56,7 @@ export interface ProductList_products_edges_node {
   isPublished: boolean;
   productType: ProductList_products_edges_node_productType;
   attributes: ProductList_products_edges_node_attributes[];
+  variants: (ProductList_products_edges_node_variants | null)[] | null;
 }
 
 export interface ProductList_products_edges {