Add no warehouses info in variant creator
This commit is contained in:
Dawid Tarasiuk
parent
7e24e4a14f
commit
9e8f453c99
2 changed files with 196 additions and 178 deletions
|
|
@ -302,6 +302,10 @@
|
||||||
"context": "variant stock, header",
|
"context": "variant stock, header",
|
||||||
"string": "Stock"
|
"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": {
|
"productVariantCreatorWarehouseSectionHeader": {
|
||||||
"context": "header",
|
"context": "header",
|
||||||
"string": "Warehouses"
|
"string": "Warehouses"
|
||||||
|
|
|
||||||
|
|
@ -123,192 +123,206 @@ const ProductVariantCreatorStock: React.FC<ProductVariantCreatorStockProps> = pr
|
||||||
})}
|
})}
|
||||||
/>
|
/>
|
||||||
<CardContent>
|
<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">
|
{warehouses.length > 1 && (
|
||||||
<FormattedMessage
|
<>
|
||||||
defaultMessage="Warehouses"
|
<Typography className={classes.warehouseHeader} variant="h5">
|
||||||
description="header"
|
<FormattedMessage
|
||||||
id="productVariantCreatorWarehouseSectionHeader"
|
defaultMessage="Warehouses"
|
||||||
/>
|
description="header"
|
||||||
</Typography>
|
id="productVariantCreatorWarehouseSectionHeader"
|
||||||
<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
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
|
</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>
|
||||||
))}
|
<CardSpacer />
|
||||||
</div>
|
<Hr />
|
||||||
)}
|
<CardSpacer />
|
||||||
<FormSpacer />
|
</>
|
||||||
<FormControlLabel
|
)}
|
||||||
value="attribute"
|
<Typography className={classes.stockHeader} variant="h5">
|
||||||
control={<Radio color="primary" />}
|
<FormattedMessage
|
||||||
label={intl.formatMessage({
|
defaultMessage="Stock"
|
||||||
defaultMessage: "Apply unique stock by attribute to each SKU"
|
description="variant stock, header"
|
||||||
})}
|
id="productVariantCreatorStockSectionHeader"
|
||||||
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 && (
|
</Typography>
|
||||||
<>
|
<RadioGroup value={data.stock.mode}>
|
||||||
<Hr className={classes.hrAttribute} />
|
<FormControlLabel
|
||||||
<FormSpacer />
|
value="all"
|
||||||
<div className={classes.attributeStockScroll}>
|
control={<Radio color="primary" />}
|
||||||
<div className={classes.attributeStockContainer}>
|
label={intl.formatMessage({
|
||||||
<div />
|
defaultMessage: "Apply single stock to all SKUs"
|
||||||
{data.stock.attribute &&
|
})}
|
||||||
data.warehouses.map(warehouseId => (
|
onChange={() => onApplyToAllChange("all")}
|
||||||
<Typography
|
/>
|
||||||
className={classes.warehouseName}
|
{data.stock.mode === "all" && (
|
||||||
key={warehouseId}
|
<div className={classes.stockContainer}>
|
||||||
>
|
{data.warehouses.map((warehouseId, warehouseIndex) => (
|
||||||
{
|
<div key={warehouseId}>
|
||||||
warehouses.find(
|
<Typography className={classes.warehouseName}>
|
||||||
warehouse => warehouse.id === warehouseId
|
{
|
||||||
).name
|
warehouses.find(
|
||||||
}
|
warehouse => warehouse.id === warehouseId
|
||||||
</Typography>
|
).name
|
||||||
))}
|
}
|
||||||
{stockAttributeValues.map(attributeValue => (
|
</Typography>
|
||||||
<React.Fragment key={attributeValue.id}>
|
<TextField
|
||||||
<Typography>{attributeValue.name}</Typography>
|
fullWidth
|
||||||
{data.warehouses.map(
|
inputProps={{
|
||||||
(warehouseId, warehouseIndex) => (
|
min: 0,
|
||||||
<TextField
|
type: "number"
|
||||||
fullWidth
|
}}
|
||||||
inputProps={{
|
label={intl.formatMessage({
|
||||||
min: 0,
|
defaultMessage: "Stock",
|
||||||
type: "number"
|
id: "productVariantCreatePricesStockInputLabel"
|
||||||
}}
|
})}
|
||||||
label={intl.formatMessage({
|
value={data.stock.value[warehouseIndex]}
|
||||||
defaultMessage: "Stock",
|
onChange={event =>
|
||||||
id:
|
onApplyToAllStockChange(
|
||||||
"productVariantCreatePricesStockInputLabel"
|
parseInt(event.target.value, 10),
|
||||||
})}
|
warehouseIndex
|
||||||
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>
|
||||||
</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 />
|
<FormSpacer />
|
||||||
<Hr />
|
<FormControlLabel
|
||||||
</>
|
value="skip"
|
||||||
)}
|
control={<Radio color="primary" />}
|
||||||
<FormSpacer />
|
label={intl.formatMessage({
|
||||||
<FormControlLabel
|
defaultMessage: "Skip stock for now"
|
||||||
value="skip"
|
})}
|
||||||
control={<Radio color="primary" />}
|
onChange={() => onApplyToAllChange("skip")}
|
||||||
label={intl.formatMessage({
|
/>
|
||||||
defaultMessage: "Skip stock for now"
|
</RadioGroup>
|
||||||
})}
|
</>
|
||||||
onChange={() => onApplyToAllChange("skip")}
|
)}
|
||||||
/>
|
|
||||||
</RadioGroup>
|
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue