djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #713 from mirumee/fix/no-warehouses-in-variant-creator

Browse source 
Add no warehouses info when working with stock quantities
This commit is contained in:
Dawid Tarasiuk 2020-10-08 12:42:10 +02:00 committed by GitHub
commit 46cadf0c48
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 5374 additions and 279 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
CHANGELOG.md
View file

@ -40,6 +40,8 @@ All notable, unreleased changes to this project will be documented in this file.
- Update schema with PositiveDecimal type - #695 by @AlicjaSzu
- Add error info when fetching taxes - #701 by @dominik-zeglen
- Fix return to previous page on screen size change - #710 by @orzechdev
- Fix updating order details on address change #711 - by @orzechdev
- Add no warehouses info when working with stock quantities #713 - by @orzechdev
- Add variants reordering possibility - #716 by @orzechdev
- Fix avatar change button - #719 by @orzechdev
- Add slug field to product, collection, category & page details (update and create) - #720 by @mmarkusik
@ -104,7 +106,6 @@ All notable, unreleased changes to this project will be documented in this file.
- Update product stock management to newest design - #515 by @dominik-zeglen
- Handle untracked products - #523 by @dominik-zeglen
- Display correct error if there were no graphql errors - #525 by @dominik-zeglen
- Fix updating order details on address change #711 - by @orzechdev
## 2.0.0

12
locale/defaultMessages.json
View file

@ -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 variants without providing stock quantities."
},
"productVariantCreatorWarehouseSectionHeader": {
"context": "header",
"string": "Warehouses"
@ -310,6 +314,14 @@
"context": "optional field",
"string": "Optional"
},
"productVariantWarehouseSectionDescription": {
"context": "no warehouses info",
"string": "There are no warehouses set up for your store. To add stock quantity to the variant please <a>configure a warehouse</a>"
},
"productWarehouseSectionDescription": {
"context": "no warehouses info",
"string": "There are no warehouses set up for your store. To add stock quantity to the product please <a>configure a warehouse</a>"
},
"saleDetailsPageCategoriesQuantity": {
"context": "number of categories",
"string": "Categories ({quantity})"

6
src/products/components/ProductCreatePage/ProductCreatePage.tsx
View file

@ -101,6 +101,7 @@ interface ProductCreatePageProps {
fetchCategories: (data: string) => void;
fetchCollections: (data: string) => void;
fetchProductTypes: (data: string) => void;
onWarehouseConfigure: () => void;
onBack?();
onSubmit?(data: ProductCreatePageSubmitData);
}
@ -124,7 +125,8 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
onBack,
fetchProductTypes,
weightUnit,
onSubmit
onSubmit,
onWarehouseConfigure
}: ProductCreatePageProps) => {
const intl = useIntl();
const localizeDate = useDateLocalize();
@ -297,6 +299,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
<ProductStocks
data={data}
disabled={disabled}
hasVariants={false}
onFormDataChange={change}
errors={errors}
stocks={stocks}
@ -320,6 +323,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
triggerChange();
removeStock(id);
}}
onWarehouseConfigure={onWarehouseConfigure}
/>
<CardSpacer />
</>

47
src/products/components/ProductStocks/ProductStocks.tsx
View file

@ -21,6 +21,7 @@ import CardTitle from "@saleor/components/CardTitle";
import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import FormSpacer from "@saleor/components/FormSpacer";
import Hr from "@saleor/components/Hr";
import Link from "@saleor/components/Link";
import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment";
import { FormChange } from "@saleor/hooks/useForm";
@ -41,12 +42,14 @@ export interface ProductStocksProps {
data: ProductStockFormData;
disabled: boolean;
errors: ProductErrorFragment[];
hasVariants: boolean;
stocks: ProductStockInput[];
warehouses: WarehouseFragment[];
onChange: FormsetChange;
onFormDataChange: FormChange;
onWarehouseStockAdd: (warehouseId: string) => void;
onWarehouseStockDelete: (warehouseId: string) => void;
onWarehouseConfigure: () => void;
}
const useStyles = makeStyles(
@ -75,6 +78,9 @@ const useStyles = makeStyles(
marginBottom: theme.spacing(2)
}
},
noWarehouseInfo: {
marginTop: theme.spacing()
},
paper: {
padding: theme.spacing(2)
},
@ -105,13 +111,15 @@ const useStyles = makeStyles(
const ProductStocks: React.FC<ProductStocksProps> = ({
data,
disabled,
hasVariants,
errors,
stocks,
warehouses,
onChange,
onFormDataChange,
onWarehouseStockAdd,
onWarehouseStockDelete
onWarehouseStockDelete,
onWarehouseConfigure
}) => {
const classes = useStyles({});
const intl = useIntl();
@ -178,7 +186,39 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
</span>
</div>
</Typography>
{!warehouses.length && (
<Typography color="textSecondary" className={classes.noWarehouseInfo}>
{hasVariants ? (
<>
<FormattedMessage
defaultMessage="There are no warehouses set up for your store. To add stock quantity to the variant please <a>configure a warehouse</a>"
description="no warehouses info"
id="productVariantWarehouseSectionDescription"
values={{
a: chunks => (
<Link onClick={onWarehouseConfigure}>{chunks}</Link>
)
}}
/>
</>
) : (
<>
<FormattedMessage
defaultMessage="There are no warehouses set up for your store. To add stock quantity to the product please <a>configure a warehouse</a>"
description="no warehouses info"
id="productWarehouseSectionDescription"
values={{
a: chunks => (
<Link onClick={onWarehouseConfigure}>{chunks}</Link>
)
}}
/>
</>
)}
</Typography>
)}
</CardContent>
{warehouses.length > 0 && (
<Table>
<TableHead>
<TableRow>
@ -236,7 +276,9 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
</Typography>
</TableCell>
<TableCell className={classes.colAction}>
<ClickAwayListener onClickAway={() => setExpansionState(false)}>
<ClickAwayListener
onClickAway={() => setExpansionState(false)}
>
<div ref={anchor}>
<IconButton
color="primary"
@ -280,6 +322,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
)}
</TableBody>
</Table>
)}
</Card>
);
};

4
src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
View file

@ -87,6 +87,7 @@ export interface ProductUpdatePageProps extends ListActions {
onSubmit?(data: ProductUpdatePageSubmitData);
onVariantAdd?();
onSetDefaultVariant();
onWarehouseConfigure();
}
export interface ProductUpdatePageSubmitData extends ProductUpdatePageFormData {
@ -128,6 +129,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
onSetDefaultVariant,
onVariantShow,
onVariantReorder,
onWarehouseConfigure,
isChecked,
selected,
toggle,
@ -346,6 +348,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
<ProductStocks
data={data}
disabled={disabled}
hasVariants={false}
errors={errors}
stocks={stocks}
warehouses={warehouses}
@ -369,6 +372,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
triggerChange();
removeStock(id);
}}
onWarehouseConfigure={onWarehouseConfigure}
/>
</>
)}

6
src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx
View file

@ -58,6 +58,7 @@ interface ProductVariantCreatePageProps {
onSubmit: (data: ProductVariantCreatePageSubmitData) => void;
onVariantClick: (variantId: string) => void;
onVariantReorder: ReorderAction;
onWarehouseConfigure: () => void;
}
const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
@ -72,7 +73,8 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
onBack,
onSubmit,
onVariantClick,
onVariantReorder
onVariantReorder,
onWarehouseConfigure
}) => {
const intl = useIntl();
const attributeInput = React.useMemo(
@ -165,6 +167,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
<ProductStocks
data={data}
disabled={disabled}
hasVariants={true}
onFormDataChange={change}
errors={errors}
stocks={stocks}
@ -187,6 +190,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
triggerChange();
removeStock(id);
}}
onWarehouseConfigure={onWarehouseConfigure}
/>
<CardSpacer />
<Metadata data={data} onChange={changeMetadata} />

11
src/products/components/ProductVariantCreatorPage/ProductVariantCreator.stories.tsx
View file

@ -140,6 +140,17 @@ storiesOf(
step={ProductVariantCreatorStep.prices}
warehouses={[props.warehouses[0]]}
/>
))
.add("ship when no warehouses", () => (
<ProductVariantCreatorContent
{...props}
data={{
...data,
warehouses: []
}}
step={ProductVariantCreatorStep.prices}
warehouses={[]}
/>
));
storiesOf("Views / Products / Create multiple variants / summary", module)

20
src/products/components/ProductVariantCreatorPage/ProductVariantCreatorStock.tsx
View file

@ -123,6 +123,16 @@ const ProductVariantCreatorStock: React.FC<ProductVariantCreatorStockProps> = pr
})}
/>
<CardContent>
{!warehouses.length ? (
<Typography color="textSecondary">
<FormattedMessage
defaultMessage="There are no warehouses set up for your store. You can configure variants without providing stock quantities."
description="no warehouses info"
id="productVariantCreatorWarehouseSectionDescription"
/>
</Typography>
) : (
<>
{warehouses.length > 1 && (
<>
<Typography className={classes.warehouseHeader} variant="h5">
@ -185,8 +195,9 @@ const ProductVariantCreatorStock: React.FC<ProductVariantCreatorStockProps> = pr
<div key={warehouseId}>
<Typography className={classes.warehouseName}>
{
warehouses.find(warehouse => warehouse.id === warehouseId)
.name
warehouses.find(
warehouse => warehouse.id === warehouseId
).name
}
</Typography>
<TextField
@ -271,7 +282,8 @@ const ProductVariantCreatorStock: React.FC<ProductVariantCreatorStockProps> = pr
})}
value={
data.stock.values.find(
value => value.slug === attributeValue.slug
value =>
value.slug === attributeValue.slug
).value[warehouseIndex]
}
onChange={event =>
@ -309,6 +321,8 @@ const ProductVariantCreatorStock: React.FC<ProductVariantCreatorStockProps> = pr
onChange={() => onApplyToAllChange("skip")}
/>
</RadioGroup>
</>
)}
</CardContent>
</Card>
);

6
src/products/components/ProductVariantPage/ProductVariantPage.tsx
View file

@ -70,6 +70,7 @@ interface ProductVariantPageProps {
onImageSelect(id: string);
onVariantClick(variantId: string);
onSetDefaultVariant();
onWarehouseConfigure();
}
const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
@ -88,7 +89,8 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
onSubmit,
onVariantClick,
onVariantReorder,
onSetDefaultVariant
onSetDefaultVariant,
onWarehouseConfigure
}) => {
const attributeInput = React.useMemo(
() => getAttributeInputFromVariant(variant),
@ -240,6 +242,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
<ProductStocks
data={data}
disabled={loading}
hasVariants={true}
errors={errors}
stocks={stocks}
warehouses={warehouses}
@ -263,6 +266,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
triggerChange();
removeStock(id);
}}
onWarehouseConfigure={onWarehouseConfigure}
/>
<CardSpacer />
<Metadata data={data} onChange={changeMetadata} />

2
src/products/views/ProductCreate.tsx
View file

@ -14,6 +14,7 @@ import {
usePrivateMetadataUpdate
} from "@saleor/utils/metadata/updateMetadata";
import { useWarehouseList } from "@saleor/warehouses/queries";
import { warehouseAddPath } from "@saleor/warehouses/urls";
import React from "react";
import { useIntl } from "react-intl";
@ -180,6 +181,7 @@ export const ProductCreateView: React.FC = () => {
)}
onBack={handleBack}
onSubmit={handleSubmit}
onWarehouseConfigure={() => navigate(warehouseAddPath)}
saveButtonBarState={productCreateOpts.status}
fetchMoreCategories={{
hasMore: searchCategoryOpts.data?.search.pageInfo.hasNextPage,

2
src/products/views/ProductUpdate/ProductUpdate.tsx
View file

@ -33,6 +33,7 @@ import {
usePrivateMetadataUpdate
} from "@saleor/utils/metadata/updateMetadata";
import { useWarehouseList } from "@saleor/warehouses/queries";
import { warehouseAddPath } from "@saleor/warehouses/urls";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -304,6 +305,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
onDelete={() => openModal("remove")}
onImageReorder={handleImageReorder}
onSubmit={handleSubmit}
onWarehouseConfigure={() => navigate(warehouseAddPath)}
onVariantAdd={handleVariantAdd}
onVariantsAdd={() => navigate(productVariantCreatorUrl(id))}
onVariantShow={variantId => () =>

2
src/products/views/ProductVariant.tsx
View file

@ -13,6 +13,7 @@ import {
usePrivateMetadataUpdate
} from "@saleor/utils/metadata/updateMetadata";
import { useWarehouseList } from "@saleor/warehouses/queries";
import { warehouseAddPath } from "@saleor/warehouses/urls";
import React, { useEffect, useState } from "react";
import { useIntl } from "react-intl";
@ -215,6 +216,7 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
onDelete={() => openModal("remove")}
onImageSelect={handleImageSelect}
onSubmit={handleSubmit}
onWarehouseConfigure={() => navigate(warehouseAddPath)}
onVariantClick={variantId => {
navigate(productVariantEditUrl(productId, variantId));
}}

2
src/products/views/ProductVariantCreate.tsx
View file

@ -10,6 +10,7 @@ import {
usePrivateMetadataUpdate
} from "@saleor/utils/metadata/updateMetadata";
import { useWarehouseList } from "@saleor/warehouses/queries";
import { warehouseAddPath } from "@saleor/warehouses/urls";
import React from "react";
import { useIntl } from "react-intl";
@ -142,6 +143,7 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
onBack={handleBack}
onSubmit={handleSubmit}
onVariantClick={handleVariantClick}
onWarehouseConfigure={() => navigate(warehouseAddPath)}
onVariantReorder={handleVariantReorder}
saveButtonBarState={variantCreateResult.status}
warehouses={

4924
src/storybook/__snapshots__/Stories.test.ts.snap
View file

File diff suppressed because it is too large Load diff

3
src/storybook/stories/products/ProductCreatePage.tsx
View file

@ -35,6 +35,7 @@ storiesOf("Views / Products / Create product", module)
onSubmit={() => undefined}
saveButtonBarState="default"
warehouses={warehouseList}
onWarehouseConfigure={() => undefined}
taxTypes={taxTypes}
weightUnit="kg"
/>
@ -58,6 +59,7 @@ storiesOf("Views / Products / Create product", module)
onSubmit={() => undefined}
saveButtonBarState="default"
warehouses={undefined}
onWarehouseConfigure={() => undefined}
taxTypes={taxTypes}
weightUnit="kg"
/>
@ -87,6 +89,7 @@ storiesOf("Views / Products / Create product", module)
onSubmit={() => undefined}
saveButtonBarState="default"
warehouses={warehouseList}
onWarehouseConfigure={() => undefined}
taxTypes={taxTypes}
weightUnit="kg"
/>

20
src/storybook/stories/products/ProductUpdatePage.tsx
View file

@ -39,6 +39,7 @@ const props: ProductUpdatePageProps = {
onVariantReorder: () => undefined,
onVariantShow: () => undefined,
onVariantsAdd: () => undefined,
onWarehouseConfigure: () => undefined,
placeholderImage,
product,
saveButtonBarState: "default",
@ -104,6 +105,25 @@ storiesOf("Views / Products / Product edit", module)
}}
/>
))
.add("no stock, no variants and no warehouses", () => (
<ProductUpdatePage
{...props}
warehouses={[]}
product={{
...product,
productType: {
...product.productType,
hasVariants: false
},
variants: [
{
...product.variants[0],
stocks: []
}
]
}}
/>
))
.add("no product attributes", () => (
<ProductUpdatePage
{...props}

21
src/storybook/stories/products/ProductVariantCreatePage.tsx
View file

@ -26,6 +26,7 @@ storiesOf("Views / Products / Create product variant", module)
onVariantReorder={() => undefined}
saveButtonBarState="default"
warehouses={warehouseList}
onWarehouseConfigure={() => undefined}
/>
))
.add("with errors", () => (
@ -58,6 +59,7 @@ storiesOf("Views / Products / Create product variant", module)
onVariantReorder={() => undefined}
saveButtonBarState="default"
warehouses={warehouseList}
onWarehouseConfigure={() => undefined}
/>
))
.add("when loading data", () => (
@ -74,6 +76,7 @@ storiesOf("Views / Products / Create product variant", module)
onVariantReorder={() => undefined}
saveButtonBarState="default"
warehouses={warehouseList}
onWarehouseConfigure={() => undefined}
/>
))
.add("add first variant", () => (
@ -93,5 +96,23 @@ storiesOf("Views / Products / Create product variant", module)
onVariantReorder={() => undefined}
saveButtonBarState="default"
warehouses={warehouseList}
onWarehouseConfigure={() => undefined}
/>
))
.add("no warehouses", () => (
<ProductVariantCreatePage
currencySymbol="USD"
weightUnit="kg"
disabled={false}
errors={[]}
header="Add variant"
product={product}
onBack={() => undefined}
onSubmit={() => undefined}
onVariantClick={undefined}
onVariantReorder={() => undefined}
saveButtonBarState="default"
warehouses={[]}
onWarehouseConfigure={() => undefined}
/>
));

22
src/storybook/stories/products/ProductVariantPage.tsx
View file

@ -28,6 +28,7 @@ storiesOf("Views / Products / Product variant details", module)
onVariantReorder={() => undefined}
saveButtonBarState="default"
warehouses={warehouseList}
onWarehouseConfigure={() => undefined}
/>
))
.add("when loading data", () => (
@ -47,6 +48,26 @@ storiesOf("Views / Products / Product variant details", module)
onVariantReorder={() => undefined}
saveButtonBarState="default"
warehouses={warehouseList}
onWarehouseConfigure={() => undefined}
/>
))
.add("no warehouses", () => (
<ProductVariantPage
defaultWeightUnit="kg"
header={variant.name || variant.sku}
errors={[]}
variant={variant}
onAdd={() => undefined}
onBack={() => undefined}
onDelete={undefined}
onSetDefaultVariant={() => undefined}
onImageSelect={() => undefined}
onSubmit={() => undefined}
onVariantClick={() => undefined}
onVariantReorder={() => undefined}
saveButtonBarState="default"
warehouses={[]}
onWarehouseConfigure={() => undefined}
/>
))
.add("attribute errors", () => (
@ -82,5 +103,6 @@ storiesOf("Views / Products / Product variant details", module)
...error
}))}
warehouses={warehouseList}
onWarehouseConfigure={() => undefined}
/>
));