diff --git a/src/products/components/ProductVariants/ProductVariants.tsx b/src/products/components/ProductVariants/ProductVariants.tsx index 6e46489a9..1146b9045 100644 --- a/src/products/components/ProductVariants/ProductVariants.tsx +++ b/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 = props => { description="product variant name" /> - - - @@ -165,10 +161,20 @@ export const ProductVariants: React.FC = props => { /> + + + {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 ( = props => { {variant ? variant.name || variant.sku : } - variant.stockQuantity > 0 - )} - > - {variant ? ( - 0 ? "success" : "error"} - label={ - variant.stockQuantity > 0 - ? intl.formatMessage({ - defaultMessage: "Available", - description: "product variant status" - }) - : intl.formatMessage({ - defaultMessage: "Unavailable", - description: "product variant status" - }) - } - /> - ) : ( - - )} - {variant ? variant.sku : } @@ -233,6 +213,28 @@ export const ProductVariants: React.FC = props => { )} + + {numAvailable === null ? ( + + ) : numAvailable === 0 ? ( + + ) : ( + + )} + ); })} diff --git a/src/products/queries.ts b/src/products/queries.ts index dbed486ce..5e5f58977 100644 --- a/src/products/queries.ts +++ b/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 + } } `; diff --git a/src/products/types/Product.ts b/src/products/types/Product.ts index 1b7426fc4..e0cafa652 100644 --- a/src/products/types/Product.ts +++ b/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 { diff --git a/src/products/types/ProductCreate.ts b/src/products/types/ProductCreate.ts index c265fd69f..b1409b4d8 100644 --- a/src/products/types/ProductCreate.ts +++ b/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 { diff --git a/src/products/types/ProductDetails.ts b/src/products/types/ProductDetails.ts index 2ebf1cfcc..78013430e 100644 --- a/src/products/types/ProductDetails.ts +++ b/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 { diff --git a/src/products/types/ProductImageCreate.ts b/src/products/types/ProductImageCreate.ts index c481ea341..45f62c860 100644 --- a/src/products/types/ProductImageCreate.ts +++ b/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 { diff --git a/src/products/types/ProductImageUpdate.ts b/src/products/types/ProductImageUpdate.ts index 23687fe07..0be498717 100644 --- a/src/products/types/ProductImageUpdate.ts +++ b/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 { diff --git a/src/products/types/ProductUpdate.ts b/src/products/types/ProductUpdate.ts index 20c745df8..7fce89379 100644 --- a/src/products/types/ProductUpdate.ts +++ b/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 { diff --git a/src/products/types/ProductVariant.ts b/src/products/types/ProductVariant.ts index 2d8091000..14f5aa54f 100644 --- a/src/products/types/ProductVariant.ts +++ b/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; } diff --git a/src/products/types/ProductVariantDetails.ts b/src/products/types/ProductVariantDetails.ts index 0f948a9cc..e4c98a234 100644 --- a/src/products/types/ProductVariantDetails.ts +++ b/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 { diff --git a/src/products/types/SimpleProductUpdate.ts b/src/products/types/SimpleProductUpdate.ts index 51c33a7e3..c49bd09a6 100644 --- a/src/products/types/SimpleProductUpdate.ts +++ b/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 { diff --git a/src/products/types/VariantCreate.ts b/src/products/types/VariantCreate.ts index da6dd3939..ae04aee61 100644 --- a/src/products/types/VariantCreate.ts +++ b/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 { diff --git a/src/products/types/VariantImageAssign.ts b/src/products/types/VariantImageAssign.ts index 5a5c8ad0a..da34c19e2 100644 --- a/src/products/types/VariantImageAssign.ts +++ b/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 { diff --git a/src/products/types/VariantImageUnassign.ts b/src/products/types/VariantImageUnassign.ts index 4978ee18b..46a910dd3 100644 --- a/src/products/types/VariantImageUnassign.ts +++ b/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 { diff --git a/src/products/types/VariantUpdate.ts b/src/products/types/VariantUpdate.ts index 0028a0887..e2e98e600 100644 --- a/src/products/types/VariantUpdate.ts +++ b/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 {