Add ability to create stock in multiple warehouses

src/products/components/ProductVariantCreatorPage/ProductVariantCreatorContent.tsx

@@ -24,8 +24,7 @@ export interface ProductVariantCreatorContentProps {
   warehouses: WarehouseFragment[];
 }
 
-const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps> = props => {
+const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps> = ({
-  const {
   attributes,
   currencySymbol,
   data,
@@ -33,7 +32,7 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
   errors,
   step,
   warehouses
-  } = props;
+}) => {
   const selectedAttributes = attributes.filter(attribute =>
     isSelected(
       attribute.id,
@@ -104,17 +103,26 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
                   : ProductVariantCreateReducerActionType.changeApplyStockToAttributeId
             })
           }
-          onAttributeValueChange={(valueId, price, type) =>
+          onAttributePriceChange={(valueId, price) =>
-            dispatchFormDataAction(
+            dispatchFormDataAction({
-              type === "price" && {
               changeAttributeValuePrice: {
                 price,
                 valueId
               },
               type:
                 ProductVariantCreateReducerActionType.changeAttributeValuePrice
+            })
           }
-            )
+          onAttributeStockChange={(valueId, quantity, warehouseIndex) =>
+            dispatchFormDataAction({
+              changeAttributeValueStock: {
+                quantity,
+                valueId,
+                warehouseIndex
+              },
+              type:
+                ProductVariantCreateReducerActionType.changeAttributeValueStock
+            })
           }
           onWarehouseToggle={warehouseId =>
             dispatchFormDataAction({

src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPage.tsx

@@ -50,11 +50,9 @@ function canHitNext(
         ) {
           return false;
         }
-      } else {
-        return true;
       }
 
-      if (data.stock.mode === "attribute" || data.stock.attribute) {
+      if (data.stock.mode === "attribute" && data.stock.attribute === "") {
         return false;
       }
 

src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPriceAndSku.tsx

@@ -23,10 +23,11 @@ export interface ProductVariantCreatorPriceAndSkuProps {
   onApplyToAllPriceChange: (value: string) => void;
   onApplyToAllStockChange: (warehouseIndex: number, value: string) => void;
   onAttributeSelect: (id: string, type: PriceOrStock) => void;
-  onAttributeValueChange: (
+  onAttributePriceChange: (id: string, value: string) => void;
+  onAttributeStockChange: (
     id: string,
-    value: string,
+    quantity: number,
-    type: PriceOrStock
+    warehouseIndex: number
   ) => void;
   onWarehouseToggle: (id: string) => void;
 }
@@ -40,7 +41,8 @@ const ProductVariantCreatorPriceAndSku: React.FC<ProductVariantCreatorPriceAndSk
   onApplyToAllPriceChange,
   onApplyToAllStockChange,
   onAttributeSelect,
-  onAttributeValueChange,
+  onAttributePriceChange,
+  onAttributeStockChange,
   onWarehouseToggle
 }) => (
   <>
@@ -51,9 +53,7 @@ const ProductVariantCreatorPriceAndSku: React.FC<ProductVariantCreatorPriceAndSk
       onApplyToAllChange={value => onApplyToAllChange(value, "price")}
       onApplyToAllPriceChange={onApplyToAllPriceChange}
       onAttributeSelect={id => onAttributeSelect(id, "price")}
-      onAttributeValueChange={(id, value) =>
+      onAttributeValueChange={onAttributePriceChange}
-        onAttributeValueChange(id, value, "price")
-      }
     />
     <CardSpacer />
     <ProductVariantCreatorStock
@@ -63,9 +63,7 @@ const ProductVariantCreatorPriceAndSku: React.FC<ProductVariantCreatorPriceAndSk
       onApplyToAllChange={value => onApplyToAllChange(value, "stock")}
       onApplyToAllStockChange={onApplyToAllStockChange}
       onAttributeSelect={id => onAttributeSelect(id, "stock")}
-      onAttributeValueChange={(id, value) =>
+      onAttributeValueChange={onAttributeStockChange}
-        onAttributeValueChange(id, value, "stock")
-      }
       onWarehouseToggle={onWarehouseToggle}
     />
   </>

src/products/components/ProductVariantCreatorPage/ProductVariantCreatorStock.tsx

@@ -27,6 +27,17 @@ import { getStockAttributeValues } from "./utils";
 
 const useStyles = makeStyles(
   theme => ({
+    attributeStockContainer: {
+      columnGap: theme.spacing(3) + "px",
+      display: "grid",
+      gridTemplateColumns: ({ data }: ProductVariantCreatorStockProps) =>
+        `150px repeat(${data.warehouses.length}, 288px)`,
+      rowGap: theme.spacing(2) + "px"
+    },
+    attributeStockScroll: {
+      overflowX: "scroll",
+      width: "100%"
+    },
     hr: {
       marginBottom: theme.spacing(),
       marginTop: theme.spacing(0.5)
@@ -75,7 +86,11 @@ export interface ProductVariantCreatorStockProps {
   onApplyToAllChange: (mode: VariantCreatorPricesAndSkuMode) => void;
   onApplyToAllStockChange: (warehouseIndex: number, value: string) => void;
   onAttributeSelect: (id: string) => void;
-  onAttributeValueChange: (id: string, value: string) => void;
+  onAttributeValueChange: (
+    id: string,
+    quantity: number,
+    warehouseIndex: number
+  ) => void;
   onWarehouseToggle: (id: string) => void;
 }
 
@@ -168,11 +183,8 @@ const ProductVariantCreatorStock: React.FC<ProductVariantCreatorStockProps> = pr
           {data.stock.mode === "all" && (
             <div className={classes.stockContainer}>
               {data.warehouses.map((warehouseId, warehouseIndex) => (
-                <div>
+                <div key={warehouseId}>
-                  <Typography
+                  <Typography className={classes.warehouseName}>
-                    className={classes.warehouseName}
-                    key={warehouseId}
-                  >
                     {
                       warehouses.find(warehouse => warehouse.id === warehouseId)
                         .name
@@ -212,60 +224,74 @@ const ProductVariantCreatorStock: React.FC<ProductVariantCreatorStockProps> = pr
           {data.stock.mode === "attribute" && (
             <>
               <FormSpacer />
-              <Grid variant="uniform">
-                <div className={classes.label}>
-                  <Typography>
-                    <FormattedMessage
-                      defaultMessage="Choose attribute"
-                      description="variant attribute"
-                    />
-                  </Typography>
-                </div>
-                <div>
               <SingleSelectField
+                className={classes.shortInput}
                 choices={attributeChoices}
                 label={intl.formatMessage({
-                      defaultMessage: "Attribute",
+                  defaultMessage: "Select Attribute",
                   description: "variant attribute"
                 })}
                 value={data.stock.attribute}
-                    onChange={onAttributeSelect}
+                onChange={event => onAttributeSelect(event.target.value)}
               />
-                </div>
+              {stockAttributeValues && (
-              </Grid>
+                <>
-              {stockAttributeValues &&
-                stockAttributeValues.map(attributeValue => (
-                  <React.Fragment key={attributeValue.id}>
                   <Hr className={classes.hrAttribute} />
                   <FormSpacer />
-                    <Grid variant="uniform">
+                  <div className={classes.attributeStockScroll}>
-                      <div className={classes.label}>
+                    <div className={classes.attributeStockContainer}>
+                      <div />
+                      {data.stock.attribute &&
+                        data.warehouses.map(warehouseId => (
+                          <Typography
+                            className={classes.warehouseName}
+                            key={warehouseId}
+                          >
+                            {
+                              warehouses.find(
+                                warehouse => warehouse.id === warehouseId
+                              ).name
+                            }
+                          </Typography>
+                        ))}
+                      {stockAttributeValues.map(attributeValue => (
+                        <React.Fragment key={attributeValue.id}>
                           <Typography>{attributeValue.name}</Typography>
-                      </div>
+                          {data.warehouses.map(
-                      <div>
+                            (warehouseId, warehouseIndex) => (
                               <TextField
+                                fullWidth
+                                inputProps={{
+                                  min: 0,
+                                  type: "number"
+                                }}
                                 label={intl.formatMessage({
                                   defaultMessage: "Stock",
-                            description: "variant stock",
+                                  id:
-                            id: "productVariantCreatePricesSetStockPlaceholder"
+                                    "productVariantCreatePricesStockInputLabel"
                                 })}
-                          fullWidth
                                 value={
                                   data.stock.values.find(
                                     value => value.slug === attributeValue.slug
-                            ).value
+                                  ).value[warehouseIndex]
                                 }
                                 onChange={event =>
                                   onAttributeValueChange(
                                     attributeValue.slug,
-                              event.target.value
+                                    parseInt(event.target.value, 10),
+                                    warehouseIndex
                                   )
                                 }
+                                key={warehouseId}
                               />
-                      </div>
+                            )
-                    </Grid>
+                          )}
                         </React.Fragment>
                       ))}
+                    </div>
+                  </div>
+                </>
+              )}
             </>
           )}
           <FormSpacer />

src/products/components/ProductVariantCreatorPage/ProductVariantCreatorSummary.tsx

@@ -92,7 +92,7 @@ const useStyles = makeStyles<
       marginTop: theme.spacing(0.5)
     },
     hr: {
-      gridColumn: props => `span ${4 + props.data.stock.value.length}`
+      gridColumn: props => `span ${4 + props.data.variants[0].stocks.length}`
     },
     input: {
       "& input": {
@@ -103,7 +103,7 @@ const useStyles = makeStyles<
       columnGap: theme.spacing(3),
       display: "grid",
       gridTemplateColumns: props =>
-        `minmax(240px, auto) 170px repeat(${props.data.stock.value.length}, 140px) 140px 64px`,
+        `minmax(240px, auto) 170px repeat(${props.data.variants[0].stocks.length}, 140px) 140px 64px`,
       overflowX: "scroll",
       rowGap: theme.spacing() + "px"
     }

src/products/components/ProductVariantCreatorPage/reducer.ts

@@ -186,8 +186,8 @@ function changeAttributeValuePrice(
 function changeAttributeValueStock(
   state: ProductVariantCreateFormData,
   attributeValueSlug: string,
-  warehouseIndex: number,
+  quantity: number,
-  quantity: number
+  warehouseIndex: number
 ): ProductVariantCreateFormData {
   const index = state.stock.values.findIndex(
     value => value.slug === attributeValueSlug
@@ -199,8 +199,12 @@ function changeAttributeValueStock(
 
   const values = updateAtIndex(
     {
-      slug: attributeValueSlug,
+      ...state.stock.values[index],
-      value: updateAtIndex(quantity, state.stock.value, warehouseIndex)
+      value: updateAtIndex(
+        quantity,
+        state.stock.values[index].value,
+        warehouseIndex
+      )
     },
     state.stock.values,
     index