Use quantity allocated to get available variants

src/products/components/ProductVariants/ProductVariants.tsx

@@ -296,7 +296,10 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
               const isSelected = variant ? isChecked(variant.id) : false;
               const numAvailable =
                 variant && variant.stocks
-                  ? variant.stocks.reduce((acc, s) => acc + s.quantity, 0)
+                  ? variant.stocks.reduce(
+                      (acc, s) => acc + s.quantity - s.quantityAllocated,
+                      0
+                    )
                   : null;
 
               return (

src/products/fixtures.ts

@@ -266,12 +266,14 @@ export const product: (
           __typename: "Stock",
           id: "1",
           quantity: 1,
+          quantityAllocated: 0,
           warehouse: warehouseList[0]
         },
         {
           __typename: "Stock",
           id: "2",
           quantity: 4,
+          quantityAllocated: 2,
           warehouse: warehouseList[1]
         }
       ],
@@ -301,6 +303,7 @@ export const product: (
           __typename: "Stock",
           id: "1",
           quantity: 13,
+          quantityAllocated: 2,
           warehouse: warehouseList[0]
         }
       ],

src/products/queries.ts

@@ -37,6 +37,7 @@ export const stockFragment = gql`
   fragment StockFragment on Stock {
     id
     quantity
+    quantityAllocated
     warehouse {
       id
       name

src/products/types/AddOrRemoveStocks.ts

@@ -25,6 +25,7 @@ export interface AddOrRemoveStocks_productVariantStocksCreate_productVariant_sto
   __typename: "Stock";
   id: string;
   quantity: number;
+  quantityAllocated: number;
   warehouse: AddOrRemoveStocks_productVariantStocksCreate_productVariant_stocks_warehouse;
 }
 
@@ -56,6 +57,7 @@ export interface AddOrRemoveStocks_productVariantStocksDelete_productVariant_sto
   __typename: "Stock";
   id: string;
   quantity: number;
+  quantityAllocated: number;
   warehouse: AddOrRemoveStocks_productVariantStocksDelete_productVariant_stocks_warehouse;
 }
 

src/products/types/Product.ts

@@ -159,6 +159,7 @@ export interface Product_variants_stocks {
   __typename: "Stock";
   id: string;
   quantity: number;
+  quantityAllocated: number;
   warehouse: Product_variants_stocks_warehouse;
 }
 

src/products/types/ProductCreate.ts

@@ -165,6 +165,7 @@ export interface ProductCreate_productCreate_product_variants_stocks {
   __typename: "Stock";
   id: string;
   quantity: number;
+  quantityAllocated: number;
   warehouse: ProductCreate_productCreate_product_variants_stocks_warehouse;
 }
 

src/products/types/ProductDetails.ts

@@ -159,6 +159,7 @@ export interface ProductDetails_product_variants_stocks {
   __typename: "Stock";
   id: string;
   quantity: number;
+  quantityAllocated: number;
   warehouse: ProductDetails_product_variants_stocks_warehouse;
 }
 

src/products/types/ProductImageCreate.ts

@@ -165,6 +165,7 @@ export interface ProductImageCreate_productImageCreate_product_variants_stocks {
   __typename: "Stock";
   id: string;
   quantity: number;
+  quantityAllocated: number;
   warehouse: ProductImageCreate_productImageCreate_product_variants_stocks_warehouse;
 }
 

src/products/types/ProductImageUpdate.ts

@@ -165,6 +165,7 @@ export interface ProductImageUpdate_productImageUpdate_product_variants_stocks {
   __typename: "Stock";
   id: string;
   quantity: number;
+  quantityAllocated: number;
   warehouse: ProductImageUpdate_productImageUpdate_product_variants_stocks_warehouse;
 }
 

src/products/types/ProductUpdate.ts

@@ -165,6 +165,7 @@ export interface ProductUpdate_productUpdate_product_variants_stocks {
   __typename: "Stock";
   id: string;
   quantity: number;
+  quantityAllocated: number;
   warehouse: ProductUpdate_productUpdate_product_variants_stocks_warehouse;
 }
 

src/products/types/ProductVariant.ts

@@ -99,6 +99,7 @@ export interface ProductVariant_stocks {
   __typename: "Stock";
   id: string;
   quantity: number;
+  quantityAllocated: number;
   warehouse: ProductVariant_stocks_warehouse;
 }
 

src/products/types/ProductVariantDetails.ts

@@ -99,6 +99,7 @@ export interface ProductVariantDetails_productVariant_stocks {
   __typename: "Stock";
   id: string;
   quantity: number;
+  quantityAllocated: number;
   warehouse: ProductVariantDetails_productVariant_stocks_warehouse;
 }
 

src/products/types/SimpleProductUpdate.ts

@@ -165,6 +165,7 @@ export interface SimpleProductUpdate_productUpdate_product_variants_stocks {
   __typename: "Stock";
   id: string;
   quantity: number;
+  quantityAllocated: number;
   warehouse: SimpleProductUpdate_productUpdate_product_variants_stocks_warehouse;
 }
 
@@ -307,6 +308,7 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_stocks
   __typename: "Stock";
   id: string;
   quantity: number;
+  quantityAllocated: number;
   warehouse: SimpleProductUpdate_productVariantUpdate_productVariant_stocks_warehouse;
 }
 
@@ -430,6 +432,7 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_s
   __typename: "Stock";
   id: string;
   quantity: number;
+  quantityAllocated: number;
   warehouse: SimpleProductUpdate_productVariantStocksCreate_productVariant_stocks_warehouse;
 }
 
@@ -552,6 +555,7 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_s
   __typename: "Stock";
   id: string;
   quantity: number;
+  quantityAllocated: number;
   warehouse: SimpleProductUpdate_productVariantStocksDelete_productVariant_stocks_warehouse;
 }
 
@@ -675,6 +679,7 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_s
   __typename: "Stock";
   id: string;
   quantity: number;
+  quantityAllocated: number;
   warehouse: SimpleProductUpdate_productVariantStocksUpdate_productVariant_stocks_warehouse;
 }
 

src/products/types/StockFragment.ts

@@ -16,5 +16,6 @@ export interface StockFragment {
   __typename: "Stock";
   id: string;
   quantity: number;
+  quantityAllocated: number;
   warehouse: StockFragment_warehouse;
 }

src/products/types/VariantCreate.ts

@@ -107,6 +107,7 @@ export interface VariantCreate_productVariantCreate_productVariant_stocks {
   __typename: "Stock";
   id: string;
   quantity: number;
+  quantityAllocated: number;
   warehouse: VariantCreate_productVariantCreate_productVariant_stocks_warehouse;
 }
 

src/products/types/VariantImageAssign.ts

@@ -107,6 +107,7 @@ export interface VariantImageAssign_variantImageAssign_productVariant_stocks {
   __typename: "Stock";
   id: string;
   quantity: number;
+  quantityAllocated: number;
   warehouse: VariantImageAssign_variantImageAssign_productVariant_stocks_warehouse;
 }
 

src/products/types/VariantImageUnassign.ts

@@ -107,6 +107,7 @@ export interface VariantImageUnassign_variantImageUnassign_productVariant_stocks
   __typename: "Stock";
   id: string;
   quantity: number;
+  quantityAllocated: number;
   warehouse: VariantImageUnassign_variantImageUnassign_productVariant_stocks_warehouse;
 }
 

src/products/types/VariantUpdate.ts

@@ -107,6 +107,7 @@ export interface VariantUpdate_productVariantUpdate_productVariant_stocks {
   __typename: "Stock";
   id: string;
   quantity: number;
+  quantityAllocated: number;
   warehouse: VariantUpdate_productVariantUpdate_productVariant_stocks_warehouse;
 }
 
@@ -230,6 +231,7 @@ export interface VariantUpdate_productVariantStocksUpdate_productVariant_stocks
   __typename: "Stock";
   id: string;
   quantity: number;
+  quantityAllocated: number;
   warehouse: VariantUpdate_productVariantStocksUpdate_productVariant_stocks_warehouse;
 }
 

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -111482,7 +111482,7 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                       data-tc="inventory"
                     >
-                      5 available at 2 locations
+                      3 available at 2 locations
                     </td>
                   </tr>
                   <tr
@@ -111519,7 +111519,7 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                       data-tc="inventory"
                     >
-                      13 available at 1 location
+                      11 available at 1 location
                     </td>
                   </tr>
                 </tbody>
@@ -113043,7 +113043,7 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                       data-tc="inventory"
                     >
-                      5 available at 2 locations
+                      3 available at 2 locations
                     </td>
                   </tr>
                   <tr
@@ -113080,7 +113080,7 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                       data-tc="inventory"
                     >
-                      13 available at 1 location
+                      11 available at 1 location
                     </td>
                   </tr>
                 </tbody>
@@ -118480,7 +118480,7 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                       data-tc="inventory"
                     >
-                      5 available at 2 locations
+                      3 available at 2 locations
                     </td>
                   </tr>
                   <tr
@@ -118517,7 +118517,7 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                       data-tc="inventory"
                     >
-                      13 available at 1 location
+                      11 available at 1 location
                     </td>
                   </tr>
                 </tbody>
@@ -121360,7 +121360,7 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                       data-tc="inventory"
                     >
-                      5 available at 2 locations
+                      3 available at 2 locations
                     </td>
                   </tr>
                   <tr
@@ -121397,7 +121397,7 @@ Ctrl + K"
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                       data-tc="inventory"
                     >
-                      13 available at 1 location
+                      11 available at 1 location
                     </td>
                   </tr>
                 </tbody>