Add inventory status to variant list

src/products/components/ProductVariants/ProductVariants.tsx

@@ -15,7 +15,6 @@ import Checkbox from "@saleor/components/Checkbox";
 import Money from "@saleor/components/Money";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
-import StatusLabel from "@saleor/components/StatusLabel";
 import TableHead from "@saleor/components/TableHead";
 import { maybe, renderCollection } from "../../../misc";
 import { ListActions } from "../../../types";
@@ -25,17 +24,20 @@ import { ProductVariant_costPrice } from "../../types/ProductVariant";
 const useStyles = makeStyles(
   theme => ({
     [theme.breakpoints.up("lg")]: {
+      colInventory: {
+        width: 300
+      },
       colName: {},
       colPrice: {
-        width: 200
+        width: 150
       },
       colSku: {
-        width: 250
-      },
-      colStatus: {
         width: 200
       }
     },
+    colInventory: {
+      textAlign: "right"
+    },
     colName: {},
     colPrice: {
       textAlign: "right"
@@ -148,12 +150,6 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
                 description="product variant name"
               />
             </TableCell>
-            <TableCell className={classes.colStatus}>
-              <FormattedMessage
-                defaultMessage="Status"
-                description="product variant status"
-              />
-            </TableCell>
             <TableCell className={classes.colSku}>
               <FormattedMessage defaultMessage="SKU" />
             </TableCell>
@@ -165,10 +161,20 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
                 />
               </TableCell>
             </Hidden>
+            <TableCell className={classes.colInventory}>
+              <FormattedMessage
+                defaultMessage="Inventory"
+                description="product variant inventory status"
+              />
+            </TableCell>
           </TableHead>
           <TableBody>
             {renderCollection(variants, variant => {
               const isSelected = variant ? isChecked(variant.id) : false;
+              const numAvailable =
+                variant && variant.stock
+                  ? variant.stock.reduce((acc, s) => acc + s.quantity, 0)
+                  : null;
 
               return (
                 <TableRow
@@ -189,32 +195,6 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
                   <TableCell className={classes.colName} data-tc="name">
                     {variant ? variant.name || variant.sku : <Skeleton />}
                   </TableCell>
-                  <TableCell
-                    className={classes.colStatus}
-                    data-tc="isAvailable"
-                    data-tc-is-available={maybe(
-                      () => variant.stockQuantity > 0
-                    )}
-                  >
-                    {variant ? (
-                      <StatusLabel
-                        status={variant.stockQuantity > 0 ? "success" : "error"}
-                        label={
-                          variant.stockQuantity > 0
-                            ? intl.formatMessage({
-                                defaultMessage: "Available",
-                                description: "product variant status"
-                              })
-                            : intl.formatMessage({
-                                defaultMessage: "Unavailable",
-                                description: "product variant status"
-                              })
-                        }
-                      />
-                    ) : (
-                      <Skeleton />
-                    )}
-                  </TableCell>
                   <TableCell className={classes.colSku} data-tc="sku">
                     {variant ? variant.sku : <Skeleton />}
                   </TableCell>
@@ -233,6 +213,28 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
                       )}
                     </TableCell>
                   </Hidden>
+                  <TableCell
+                    className={classes.colInventory}
+                    data-tc="inventory"
+                  >
+                    {numAvailable === null ? (
+                      <Skeleton />
+                    ) : numAvailable === 0 ? (
+                      <FormattedMessage
+                        defaultMessage="Unavailable in all locations"
+                        description="product variant inventory"
+                      />
+                    ) : (
+                      <FormattedMessage
+                        defaultMessage="{numAvailable} available at {numLocations} {numLocations,plural,one{location} other{locations}}"
+                        description="product variant inventory"
+                        values={{
+                          numAvailable,
+                          numLocations: variant.stock.length
+                        }}
+                      />
+                    )}
+                  </TableCell>
                 </TableRow>
               );
             })}

src/products/queries.ts

@@ -146,6 +146,10 @@ export const productFragmentDetails = gql`
       quantity
       quantityAllocated
       stockQuantity
+      stock {
+        id
+        quantity
+      }
     }
     productType {
       id
@@ -212,6 +216,10 @@ export const fragmentVariant = gql`
     sku
     quantity
     quantityAllocated
+    stock {
+      id
+      quantity
+    }
   }
 `;
 

src/products/types/Product.ts

@@ -127,6 +127,12 @@ export interface Product_variants_priceOverride {
   currency: string;
 }
 
+export interface Product_variants_stock {
+  __typename: "Stock";
+  id: string;
+  quantity: number;
+}
+
 export interface Product_variants {
   __typename: "ProductVariant";
   id: string;
@@ -137,6 +143,7 @@ export interface Product_variants {
   quantity: number;
   quantityAllocated: number | null;
   stockQuantity: number;
+  stock: (Product_variants_stock | null)[] | null;
 }
 
 export interface Product_productType {

src/products/types/ProductCreate.ts

@@ -133,6 +133,12 @@ export interface ProductCreate_productCreate_product_variants_priceOverride {
   currency: string;
 }
 
+export interface ProductCreate_productCreate_product_variants_stock {
+  __typename: "Stock";
+  id: string;
+  quantity: number;
+}
+
 export interface ProductCreate_productCreate_product_variants {
   __typename: "ProductVariant";
   id: string;
@@ -143,6 +149,7 @@ export interface ProductCreate_productCreate_product_variants {
   quantity: number;
   quantityAllocated: number | null;
   stockQuantity: number;
+  stock: (ProductCreate_productCreate_product_variants_stock | null)[] | null;
 }
 
 export interface ProductCreate_productCreate_product_productType {

src/products/types/ProductDetails.ts

@@ -127,6 +127,12 @@ export interface ProductDetails_product_variants_priceOverride {
   currency: string;
 }
 
+export interface ProductDetails_product_variants_stock {
+  __typename: "Stock";
+  id: string;
+  quantity: number;
+}
+
 export interface ProductDetails_product_variants {
   __typename: "ProductVariant";
   id: string;
@@ -137,6 +143,7 @@ export interface ProductDetails_product_variants {
   quantity: number;
   quantityAllocated: number | null;
   stockQuantity: number;
+  stock: (ProductDetails_product_variants_stock | null)[] | null;
 }
 
 export interface ProductDetails_product_productType_variantAttributes_values {

src/products/types/ProductImageCreate.ts

@@ -133,6 +133,12 @@ export interface ProductImageCreate_productImageCreate_product_variants_priceOve
   currency: string;
 }
 
+export interface ProductImageCreate_productImageCreate_product_variants_stock {
+  __typename: "Stock";
+  id: string;
+  quantity: number;
+}
+
 export interface ProductImageCreate_productImageCreate_product_variants {
   __typename: "ProductVariant";
   id: string;
@@ -143,6 +149,7 @@ export interface ProductImageCreate_productImageCreate_product_variants {
   quantity: number;
   quantityAllocated: number | null;
   stockQuantity: number;
+  stock: (ProductImageCreate_productImageCreate_product_variants_stock | null)[] | null;
 }
 
 export interface ProductImageCreate_productImageCreate_product_productType {

src/products/types/ProductImageUpdate.ts

@@ -133,6 +133,12 @@ export interface ProductImageUpdate_productImageUpdate_product_variants_priceOve
   currency: string;
 }
 
+export interface ProductImageUpdate_productImageUpdate_product_variants_stock {
+  __typename: "Stock";
+  id: string;
+  quantity: number;
+}
+
 export interface ProductImageUpdate_productImageUpdate_product_variants {
   __typename: "ProductVariant";
   id: string;
@@ -143,6 +149,7 @@ export interface ProductImageUpdate_productImageUpdate_product_variants {
   quantity: number;
   quantityAllocated: number | null;
   stockQuantity: number;
+  stock: (ProductImageUpdate_productImageUpdate_product_variants_stock | null)[] | null;
 }
 
 export interface ProductImageUpdate_productImageUpdate_product_productType {

src/products/types/ProductUpdate.ts

@@ -133,6 +133,12 @@ export interface ProductUpdate_productUpdate_product_variants_priceOverride {
   currency: string;
 }
 
+export interface ProductUpdate_productUpdate_product_variants_stock {
+  __typename: "Stock";
+  id: string;
+  quantity: number;
+}
+
 export interface ProductUpdate_productUpdate_product_variants {
   __typename: "ProductVariant";
   id: string;
@@ -143,6 +149,7 @@ export interface ProductUpdate_productUpdate_product_variants {
   quantity: number;
   quantityAllocated: number | null;
   stockQuantity: number;
+  stock: (ProductUpdate_productUpdate_product_variants_stock | null)[] | null;
 }
 
 export interface ProductUpdate_productUpdate_product_productType {

src/products/types/ProductVariant.ts

@@ -89,6 +89,12 @@ export interface ProductVariant_product {
   variants: (ProductVariant_product_variants | null)[] | null;
 }
 
+export interface ProductVariant_stock {
+  __typename: "Stock";
+  id: string;
+  quantity: number;
+}
+
 export interface ProductVariant {
   __typename: "ProductVariant";
   id: string;
@@ -101,4 +107,5 @@ export interface ProductVariant {
   sku: string;
   quantity: number;
   quantityAllocated: number | null;
+  stock: (ProductVariant_stock | null)[] | null;
 }

src/products/types/ProductVariantDetails.ts

@@ -89,6 +89,12 @@ export interface ProductVariantDetails_productVariant_product {
   variants: (ProductVariantDetails_productVariant_product_variants | null)[] | null;
 }
 
+export interface ProductVariantDetails_productVariant_stock {
+  __typename: "Stock";
+  id: string;
+  quantity: number;
+}
+
 export interface ProductVariantDetails_productVariant {
   __typename: "ProductVariant";
   id: string;
@@ -101,6 +107,7 @@ export interface ProductVariantDetails_productVariant {
   sku: string;
   quantity: number;
   quantityAllocated: number | null;
+  stock: (ProductVariantDetails_productVariant_stock | null)[] | null;
 }
 
 export interface ProductVariantDetails {

src/products/types/SimpleProductUpdate.ts

@@ -133,6 +133,12 @@ export interface SimpleProductUpdate_productUpdate_product_variants_priceOverrid
   currency: string;
 }
 
+export interface SimpleProductUpdate_productUpdate_product_variants_stock {
+  __typename: "Stock";
+  id: string;
+  quantity: number;
+}
+
 export interface SimpleProductUpdate_productUpdate_product_variants {
   __typename: "ProductVariant";
   id: string;
@@ -143,6 +149,7 @@ export interface SimpleProductUpdate_productUpdate_product_variants {
   quantity: number;
   quantityAllocated: number | null;
   stockQuantity: number;
+  stock: (SimpleProductUpdate_productUpdate_product_variants_stock | null)[] | null;
 }
 
 export interface SimpleProductUpdate_productUpdate_product_productType {
@@ -271,6 +278,12 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_product
   variants: (SimpleProductUpdate_productVariantUpdate_productVariant_product_variants | null)[] | null;
 }
 
+export interface SimpleProductUpdate_productVariantUpdate_productVariant_stock {
+  __typename: "Stock";
+  id: string;
+  quantity: number;
+}
+
 export interface SimpleProductUpdate_productVariantUpdate_productVariant {
   __typename: "ProductVariant";
   id: string;
@@ -283,6 +296,7 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant {
   sku: string;
   quantity: number;
   quantityAllocated: number | null;
+  stock: (SimpleProductUpdate_productVariantUpdate_productVariant_stock | null)[] | null;
 }
 
 export interface SimpleProductUpdate_productVariantUpdate {

src/products/types/VariantCreate.ts

@@ -97,6 +97,12 @@ export interface VariantCreate_productVariantCreate_productVariant_product {
   variants: (VariantCreate_productVariantCreate_productVariant_product_variants | null)[] | null;
 }
 
+export interface VariantCreate_productVariantCreate_productVariant_stock {
+  __typename: "Stock";
+  id: string;
+  quantity: number;
+}
+
 export interface VariantCreate_productVariantCreate_productVariant {
   __typename: "ProductVariant";
   id: string;
@@ -109,6 +115,7 @@ export interface VariantCreate_productVariantCreate_productVariant {
   sku: string;
   quantity: number;
   quantityAllocated: number | null;
+  stock: (VariantCreate_productVariantCreate_productVariant_stock | null)[] | null;
 }
 
 export interface VariantCreate_productVariantCreate {

src/products/types/VariantImageAssign.ts

@@ -97,6 +97,12 @@ export interface VariantImageAssign_variantImageAssign_productVariant_product {
   variants: (VariantImageAssign_variantImageAssign_productVariant_product_variants | null)[] | null;
 }
 
+export interface VariantImageAssign_variantImageAssign_productVariant_stock {
+  __typename: "Stock";
+  id: string;
+  quantity: number;
+}
+
 export interface VariantImageAssign_variantImageAssign_productVariant {
   __typename: "ProductVariant";
   id: string;
@@ -109,6 +115,7 @@ export interface VariantImageAssign_variantImageAssign_productVariant {
   sku: string;
   quantity: number;
   quantityAllocated: number | null;
+  stock: (VariantImageAssign_variantImageAssign_productVariant_stock | null)[] | null;
 }
 
 export interface VariantImageAssign_variantImageAssign {

src/products/types/VariantImageUnassign.ts

@@ -97,6 +97,12 @@ export interface VariantImageUnassign_variantImageUnassign_productVariant_produc
   variants: (VariantImageUnassign_variantImageUnassign_productVariant_product_variants | null)[] | null;
 }
 
+export interface VariantImageUnassign_variantImageUnassign_productVariant_stock {
+  __typename: "Stock";
+  id: string;
+  quantity: number;
+}
+
 export interface VariantImageUnassign_variantImageUnassign_productVariant {
   __typename: "ProductVariant";
   id: string;
@@ -109,6 +115,7 @@ export interface VariantImageUnassign_variantImageUnassign_productVariant {
   sku: string;
   quantity: number;
   quantityAllocated: number | null;
+  stock: (VariantImageUnassign_variantImageUnassign_productVariant_stock | null)[] | null;
 }
 
 export interface VariantImageUnassign_variantImageUnassign {

src/products/types/VariantUpdate.ts

@@ -97,6 +97,12 @@ export interface VariantUpdate_productVariantUpdate_productVariant_product {
   variants: (VariantUpdate_productVariantUpdate_productVariant_product_variants | null)[] | null;
 }
 
+export interface VariantUpdate_productVariantUpdate_productVariant_stock {
+  __typename: "Stock";
+  id: string;
+  quantity: number;
+}
+
 export interface VariantUpdate_productVariantUpdate_productVariant {
   __typename: "ProductVariant";
   id: string;
@@ -109,6 +115,7 @@ export interface VariantUpdate_productVariantUpdate_productVariant {
   sku: string;
   quantity: number;
   quantityAllocated: number | null;
+  stock: (VariantUpdate_productVariantUpdate_productVariant_stock | null)[] | null;
 }
 
 export interface VariantUpdate_productVariantUpdate {