From 9e8f453c99c3c950f2e2be93cc51cb1febb368f9 Mon Sep 17 00:00:00 2001
From: Dawid Tarasiuk <tarasiukdawid@gmail.com>
Date: Wed, 16 Sep 2020 13:55:49 +0200
Subject: [PATCH] Add no warehouses info in variant creator

---
 locale/defaultMessages.json                   |   4 +
 .../ProductVariantCreatorStock.tsx            | 370 +++++++++---------
 2 files changed, 196 insertions(+), 178 deletions(-)

diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
index 546019980..3721f20ef 100644
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@@ -302,6 +302,10 @@
     "context": "variant stock, header",
     "string": "Stock"
   },
+  "productVariantCreatorWarehouseSectionDescription": {
+    "context": "no warehouses info",
+    "string": "There are no warehouses set up for your store. You can configure your variants without providing stock quantites."
+  },
   "productVariantCreatorWarehouseSectionHeader": {
     "context": "header",
     "string": "Warehouses"
diff --git a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorStock.tsx b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorStock.tsx
index 51770851a..11066b09b 100644
--- a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorStock.tsx
+++ b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorStock.tsx
@@ -123,192 +123,206 @@ const ProductVariantCreatorStock: React.FC<ProductVariantCreatorStockProps> = pr
         })}
       />
       <CardContent>
-        {warehouses.length > 1 && (
+        {!warehouses.length ? (
+          <Typography color="textSecondary">
+            <FormattedMessage
+              defaultMessage="There are no warehouses set up for your store. You can configure your variants without providing stock quantites."
+              description="no warehouses info"
+              id="productVariantCreatorWarehouseSectionDescription"
+            />
+          </Typography>
+        ) : (
           <>
-            <Typography className={classes.warehouseHeader} variant="h5">
-              <FormattedMessage
-                defaultMessage="Warehouses"
-                description="header"
-                id="productVariantCreatorWarehouseSectionHeader"
-              />
-            </Typography>
-            <Typography className={classes.warehouseSubheader}>
-              <FormattedMessage
-                defaultMessage="Based on your selections we will create {numberOfProducts} products. Use this step to customize price and stocks for your new products"
-                values={{
-                  numberOfProducts: data.attributes.reduce(
-                    (acc, attr) => acc + attr.values.length,
-                    0
-                  )
-                }}
-              />
-            </Typography>
-            <div className={classes.warehouseContainer}>
-              {warehouses.map(warehouse => (
-                <ControlledCheckbox
-                  checked={isSelected(
-                    warehouse.id,
-                    data.warehouses,
-                    (a, b) => a === b
-                  )}
-                  name={`warehouse:${warehouse.id}`}
-                  label={warehouse.name}
-                  onChange={() => onWarehouseToggle(warehouse.id)}
-                  key={warehouse.id}
-                />
-              ))}
-            </div>
-            <CardSpacer />
-            <Hr />
-            <CardSpacer />
-          </>
-        )}
-        <Typography className={classes.stockHeader} variant="h5">
-          <FormattedMessage
-            defaultMessage="Stock"
-            description="variant stock, header"
-            id="productVariantCreatorStockSectionHeader"
-          />
-        </Typography>
-        <RadioGroup value={data.stock.mode}>
-          <FormControlLabel
-            value="all"
-            control={<Radio color="primary" />}
-            label={intl.formatMessage({
-              defaultMessage: "Apply single stock to all SKUs"
-            })}
-            onChange={() => onApplyToAllChange("all")}
-          />
-          {data.stock.mode === "all" && (
-            <div className={classes.stockContainer}>
-              {data.warehouses.map((warehouseId, warehouseIndex) => (
-                <div key={warehouseId}>
-                  <Typography className={classes.warehouseName}>
-                    {
-                      warehouses.find(warehouse => warehouse.id === warehouseId)
-                        .name
-                    }
-                  </Typography>
-                  <TextField
-                    fullWidth
-                    inputProps={{
-                      min: 0,
-                      type: "number"
-                    }}
-                    label={intl.formatMessage({
-                      defaultMessage: "Stock",
-                      id: "productVariantCreatePricesStockInputLabel"
-                    })}
-                    value={data.stock.value[warehouseIndex]}
-                    onChange={event =>
-                      onApplyToAllStockChange(
-                        parseInt(event.target.value, 10),
-                        warehouseIndex
-                      )
-                    }
+            {warehouses.length > 1 && (
+              <>
+                <Typography className={classes.warehouseHeader} variant="h5">
+                  <FormattedMessage
+                    defaultMessage="Warehouses"
+                    description="header"
+                    id="productVariantCreatorWarehouseSectionHeader"
                   />
+                </Typography>
+                <Typography className={classes.warehouseSubheader}>
+                  <FormattedMessage
+                    defaultMessage="Based on your selections we will create {numberOfProducts} products. Use this step to customize price and stocks for your new products"
+                    values={{
+                      numberOfProducts: data.attributes.reduce(
+                        (acc, attr) => acc + attr.values.length,
+                        0
+                      )
+                    }}
+                  />
+                </Typography>
+                <div className={classes.warehouseContainer}>
+                  {warehouses.map(warehouse => (
+                    <ControlledCheckbox
+                      checked={isSelected(
+                        warehouse.id,
+                        data.warehouses,
+                        (a, b) => a === b
+                      )}
+                      name={`warehouse:${warehouse.id}`}
+                      label={warehouse.name}
+                      onChange={() => onWarehouseToggle(warehouse.id)}
+                      key={warehouse.id}
+                    />
+                  ))}
                 </div>
-              ))}
-            </div>
-          )}
-          <FormSpacer />
-          <FormControlLabel
-            value="attribute"
-            control={<Radio color="primary" />}
-            label={intl.formatMessage({
-              defaultMessage: "Apply unique stock by attribute to each SKU"
-            })}
-            onChange={() => onApplyToAllChange("attribute")}
-          />
-          {data.stock.mode === "attribute" && (
-            <>
-              <FormSpacer />
-              <SingleSelectField
-                className={classes.shortInput}
-                choices={attributeChoices}
-                label={intl.formatMessage({
-                  defaultMessage: "Select Attribute",
-                  description: "variant attribute"
-                })}
-                value={data.stock.attribute}
-                onChange={event => onAttributeSelect(event.target.value)}
+                <CardSpacer />
+                <Hr />
+                <CardSpacer />
+              </>
+            )}
+            <Typography className={classes.stockHeader} variant="h5">
+              <FormattedMessage
+                defaultMessage="Stock"
+                description="variant stock, header"
+                id="productVariantCreatorStockSectionHeader"
               />
-              {stockAttributeValues && (
-                <>
-                  <Hr className={classes.hrAttribute} />
-                  <FormSpacer />
-                  <div className={classes.attributeStockScroll}>
-                    <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>
-                          {data.warehouses.map(
-                            (warehouseId, warehouseIndex) => (
-                              <TextField
-                                fullWidth
-                                inputProps={{
-                                  min: 0,
-                                  type: "number"
-                                }}
-                                label={intl.formatMessage({
-                                  defaultMessage: "Stock",
-                                  id:
-                                    "productVariantCreatePricesStockInputLabel"
-                                })}
-                                value={
-                                  data.stock.values.find(
-                                    value => value.slug === attributeValue.slug
-                                  ).value[warehouseIndex]
-                                }
-                                onChange={event =>
-                                  onAttributeValueChange(
-                                    attributeValue.slug,
-                                    parseInt(event.target.value, 10),
-                                    warehouseIndex
-                                  )
-                                }
-                                key={warehouseId}
-                              />
-                            )
-                          )}
-                        </React.Fragment>
-                      ))}
+            </Typography>
+            <RadioGroup value={data.stock.mode}>
+              <FormControlLabel
+                value="all"
+                control={<Radio color="primary" />}
+                label={intl.formatMessage({
+                  defaultMessage: "Apply single stock to all SKUs"
+                })}
+                onChange={() => onApplyToAllChange("all")}
+              />
+              {data.stock.mode === "all" && (
+                <div className={classes.stockContainer}>
+                  {data.warehouses.map((warehouseId, warehouseIndex) => (
+                    <div key={warehouseId}>
+                      <Typography className={classes.warehouseName}>
+                        {
+                          warehouses.find(
+                            warehouse => warehouse.id === warehouseId
+                          ).name
+                        }
+                      </Typography>
+                      <TextField
+                        fullWidth
+                        inputProps={{
+                          min: 0,
+                          type: "number"
+                        }}
+                        label={intl.formatMessage({
+                          defaultMessage: "Stock",
+                          id: "productVariantCreatePricesStockInputLabel"
+                        })}
+                        value={data.stock.value[warehouseIndex]}
+                        onChange={event =>
+                          onApplyToAllStockChange(
+                            parseInt(event.target.value, 10),
+                            warehouseIndex
+                          )
+                        }
+                      />
                     </div>
-                  </div>
+                  ))}
+                </div>
+              )}
+              <FormSpacer />
+              <FormControlLabel
+                value="attribute"
+                control={<Radio color="primary" />}
+                label={intl.formatMessage({
+                  defaultMessage: "Apply unique stock by attribute to each SKU"
+                })}
+                onChange={() => onApplyToAllChange("attribute")}
+              />
+              {data.stock.mode === "attribute" && (
+                <>
+                  <FormSpacer />
+                  <SingleSelectField
+                    className={classes.shortInput}
+                    choices={attributeChoices}
+                    label={intl.formatMessage({
+                      defaultMessage: "Select Attribute",
+                      description: "variant attribute"
+                    })}
+                    value={data.stock.attribute}
+                    onChange={event => onAttributeSelect(event.target.value)}
+                  />
+                  {stockAttributeValues && (
+                    <>
+                      <Hr className={classes.hrAttribute} />
+                      <FormSpacer />
+                      <div className={classes.attributeStockScroll}>
+                        <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>
+                              {data.warehouses.map(
+                                (warehouseId, warehouseIndex) => (
+                                  <TextField
+                                    fullWidth
+                                    inputProps={{
+                                      min: 0,
+                                      type: "number"
+                                    }}
+                                    label={intl.formatMessage({
+                                      defaultMessage: "Stock",
+                                      id:
+                                        "productVariantCreatePricesStockInputLabel"
+                                    })}
+                                    value={
+                                      data.stock.values.find(
+                                        value =>
+                                          value.slug === attributeValue.slug
+                                      ).value[warehouseIndex]
+                                    }
+                                    onChange={event =>
+                                      onAttributeValueChange(
+                                        attributeValue.slug,
+                                        parseInt(event.target.value, 10),
+                                        warehouseIndex
+                                      )
+                                    }
+                                    key={warehouseId}
+                                  />
+                                )
+                              )}
+                            </React.Fragment>
+                          ))}
+                        </div>
+                      </div>
+                    </>
+                  )}
+                </>
+              )}
+              {data.stock.mode === "attribute" && !!data.stock.attribute && (
+                <>
+                  <FormSpacer />
+                  <Hr />
                 </>
               )}
-            </>
-          )}
-          {data.stock.mode === "attribute" && !!data.stock.attribute && (
-            <>
               <FormSpacer />
-              <Hr />
-            </>
-          )}
-          <FormSpacer />
-          <FormControlLabel
-            value="skip"
-            control={<Radio color="primary" />}
-            label={intl.formatMessage({
-              defaultMessage: "Skip stock for now"
-            })}
-            onChange={() => onApplyToAllChange("skip")}
-          />
-        </RadioGroup>
+              <FormControlLabel
+                value="skip"
+                control={<Radio color="primary" />}
+                label={intl.formatMessage({
+                  defaultMessage: "Skip stock for now"
+                })}
+                onChange={() => onApplyToAllChange("skip")}
+              />
+            </RadioGroup>
+          </>
+        )}
       </CardContent>
     </Card>
   );